diff --git a/src/containers/Cluster/ClusterInfo/ClusterInfo.scss b/src/containers/Cluster/ClusterInfo/ClusterInfo.scss
index 568a1076af..3e0555f10c 100644
--- a/src/containers/Cluster/ClusterInfo/ClusterInfo.scss
+++ b/src/containers/Cluster/ClusterInfo/ClusterInfo.scss
@@ -3,38 +3,19 @@
.cluster-info {
padding: 20px 0;
+ @include mixins.body-2-typography();
+
&__skeleton {
margin-top: 5px;
}
- &__error {
- @include mixins.body-2-typography();
+ &__section-title {
+ margin: var(--g-spacing-1) 0 var(--g-spacing-3);
+ @include mixins.text-subheader-2();
}
- &__metrics {
- margin: 0 -15px;
- padding: 0 15px !important;
-
- .info-viewer__items {
- grid-template-columns: repeat(2, minmax(auto, 250px));
- }
-
- .info-viewer__label {
- width: 50px;
- }
- .info-viewer__value {
- width: 130px;
- }
- }
-
- &__tablets {
- margin-left: 15px;
- padding: 0 !important;
- }
- &__links {
- display: flex;
- flex-flow: row wrap;
- gap: var(--g-spacing-2);
+ &__dc {
+ height: 20px;
}
&__clipboard-button {
diff --git a/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx b/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx
index b2fd6be2e8..260022a1d9 100644
--- a/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx
+++ b/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx
@@ -1,10 +1,13 @@
+import {DefinitionList, Flex} from '@gravity-ui/uikit';
+
import {ResponseError} from '../../../components/Errors/ResponseError';
-import {InfoViewer} from '../../../components/InfoViewer/InfoViewer';
import {InfoViewerSkeleton} from '../../../components/InfoViewerSkeleton/InfoViewerSkeleton';
+import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
import type {AdditionalClusterProps} from '../../../types/additionalProps';
import type {TClusterInfo} from '../../../types/api/cluster';
import type {IResponseError} from '../../../types/api/error';
import type {VersionToColorMap} from '../../../types/versions';
+import i18n from '../i18n';
import {b} from './shared';
import {getInfo, useClusterLinks} from './utils';
@@ -28,25 +31,65 @@ export const ClusterInfo = ({
const {info = [], links = []} = additionalClusterProps;
const clusterLinks = useClusterLinks();
+ const linksList = links.concat(clusterLinks);
- const clusterInfo = getInfo(cluster ?? {}, info, [...links, ...clusterLinks]);
-
- const getContent = () => {
- if (loading) {
- return ;
- }
+ const clusterInfo = getInfo(cluster ?? {}, info);
+ const renderInfo = () => {
if (error && !cluster) {
return null;
}
- return ;
+ return (
+
+
{i18n('title_info')}
+
+ {clusterInfo.map(({label, value}) => {
+ return (
+
+ {value}
+
+ );
+ })}
+
+
+ );
+ };
+
+ const renderLinks = () => {
+ if (linksList.length) {
+ return (
+
+
{i18n('title_links')}
+
+ {linksList.map(({title, url}) => {
+ return ;
+ })}
+
+
+ );
+ }
+
+ return null;
+ };
+
+ const renderContent = () => {
+ if (loading) {
+ return ;
+ }
+
+ return (
+
+ {renderInfo()}
+ {renderLinks()}
+
+ );
};
return (
{error ?
: null}
-
{getContent()}
+ {renderContent()}
);
};
diff --git a/src/containers/Cluster/ClusterInfo/utils.tsx b/src/containers/Cluster/ClusterInfo/utils.tsx
index d72fb0e48d..873ad31d37 100644
--- a/src/containers/Cluster/ClusterInfo/utils.tsx
+++ b/src/containers/Cluster/ClusterInfo/utils.tsx
@@ -2,8 +2,6 @@ import React from 'react';
import {Flex} from '@gravity-ui/uikit';
-import type {InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
-import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
import {Tags} from '../../../components/Tags';
import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
@@ -11,8 +9,7 @@ import type {ClusterLink} from '../../../types/additionalProps';
import {isClusterInfoV2} from '../../../types/api/cluster';
import type {TClusterInfo} from '../../../types/api/cluster';
import type {EFlag} from '../../../types/api/enums';
-import type {TTabletStateInfo} from '../../../types/api/tablet';
-import {EType} from '../../../types/api/tablet';
+import type {InfoItem} from '../../../types/components';
import {formatNumber} from '../../../utils/dataFormatters/dataFormatters';
import {parseJson} from '../../../utils/utils';
import i18n from '../i18n';
@@ -29,18 +26,6 @@ const COLORS_PRIORITY: Record = {
Grey: 0,
};
-export const compareTablets = (tablet1: TTabletStateInfo, tablet2: TTabletStateInfo) => {
- if (tablet1.Type === EType.TxAllocator) {
- return 1;
- }
-
- if (tablet2.Type === EType.TxAllocator) {
- return -1;
- }
-
- return 0;
-};
-
const getDCInfo = (cluster: TClusterInfo) => {
if (isClusterInfoV2(cluster) && cluster.MapDataCenters) {
return Object.entries(cluster.MapDataCenters).map(([dc, count]) => (
@@ -52,12 +37,8 @@ const getDCInfo = (cluster: TClusterInfo) => {
return undefined;
};
-export const getInfo = (
- cluster: TClusterInfo,
- additionalInfo: InfoViewerItem[],
- links: ClusterLink[],
-) => {
- const info: InfoViewerItem[] = [];
+export const getInfo = (cluster: TClusterInfo, additionalInfo: InfoItem[]) => {
+ const info: InfoItem[] = [];
if (isClusterInfoV2(cluster) && cluster.MapNodeStates) {
const arrayNodesStates = Object.entries(cluster.MapNodeStates) as [EFlag, number][];
@@ -80,7 +61,7 @@ export const getInfo = (
if (dataCenters?.length) {
info.push({
label: i18n('label_dc'),
- value: ,
+ value: ,
});
}
@@ -91,19 +72,6 @@ export const getInfo = (
info.push(...additionalInfo);
- if (links.length) {
- info.push({
- label: i18n('links'),
- value: (
-
- {links.map(({title, url}) => (
-
- ))}
-
- ),
- });
- }
-
return info;
};
diff --git a/src/containers/Cluster/i18n/en.json b/src/containers/Cluster/i18n/en.json
index 391b5b1f49..2cd3ae4010 100644
--- a/src/containers/Cluster/i18n/en.json
+++ b/src/containers/Cluster/i18n/en.json
@@ -9,12 +9,14 @@
"storage-size": "Storage size",
"storage-groups": "Storage groups, {{diskType}}",
"links": "Links",
- "link_cores": "Cores",
+ "link_cores": "Coredumps",
"link_logging": "Logging",
"context_cores": "cores",
"title_cpu": "CPU",
"title_storage": "Storage",
"title_memory": "Memory",
+ "title_info": "Info",
+ "title_links": "Links",
"label_nodes": "Nodes",
"label_hosts": "Hosts",
"label_storage-groups": "Storage groups",
diff --git a/src/types/additionalProps.ts b/src/types/additionalProps.ts
index cdab115afc..f2c76508a5 100644
--- a/src/types/additionalProps.ts
+++ b/src/types/additionalProps.ts
@@ -1,7 +1,6 @@
-import type {InfoViewerItem} from '../components/InfoViewer';
-
import type {TSystemStateInfo} from './api/nodes';
import type {ETenantType} from './api/tenant';
+import type {InfoItem} from './components';
import type {VersionToColorMap} from './versions';
export interface AdditionalVersionsProps {
@@ -14,7 +13,7 @@ export interface ClusterLink {
}
export interface AdditionalClusterProps {
- info?: InfoViewerItem[];
+ info?: InfoItem[];
links?: ClusterLink[];
}
diff --git a/src/types/components.ts b/src/types/components.ts
new file mode 100644
index 0000000000..7ae9ca6285
--- /dev/null
+++ b/src/types/components.ts
@@ -0,0 +1,6 @@
+import type React from 'react';
+
+export interface InfoItem {
+ label: string;
+ value: React.ReactNode;
+}