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; +}