fix(ClusterInfo): update links view (#1746)

Author: artemmufazalov

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 {

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 <InfoViewerSkeleton className={b('skeleton')} rows={9} />;
-        }
+    const clusterInfo = getInfo(cluster ?? {}, info);
 
+    const renderInfo = () => {
         if (error && !cluster) {
             return null;
         }
 
-        return <InfoViewer dots={true} info={clusterInfo} />;
+        return (
+            <div>
+                <div className={b('section-title')}>{i18n('title_info')}</div>
+                <DefinitionList nameMaxWidth={200}>
+                    {clusterInfo.map(({label, value}) => {
+                        return (
+                            <DefinitionList.Item key={label} name={label}>
+                                {value}
+                            </DefinitionList.Item>
+                        );
+                    })}
+                </DefinitionList>
+            </div>
+        );
+    };
+
+    const renderLinks = () => {
+        if (linksList.length) {
+            return (
+                <div>
+                    <div className={b('section-title')}>{i18n('title_links')}</div>
+                    <Flex direction="column" gap={4}>
+                        {linksList.map(({title, url}) => {
+                            return <LinkWithIcon key={title} title={title} url={url} />;
+                        })}
+                    </Flex>
+                </div>
+            );
+        }
+
+        return null;
+    };
+
+    const renderContent = () => {
+        if (loading) {
+            return <InfoViewerSkeleton className={b('skeleton')} rows={4} />;
+        }
+
+        return (
+            <Flex gap={10} wrap="nowrap">
+                {renderInfo()}
+                {renderLinks()}
+            </Flex>
+        );
     };
 
     return (
         <div className={b()}>
             {error ? <ResponseError error={error} className={b('error')} /> : null}
-            <div className={b('info')}>{getContent()}</div>
+            {renderContent()}
         </div>
     );
 };

src/containers/Cluster/ClusterInfo/utils.tsx

@@ -2,17 +2,14 @@ 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';
 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<EFlag, number> = {
     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: <Tags tags={dataCenters} gap={2} />,
+            value: <Tags tags={dataCenters} gap={2} className={b('dc')} />,
         });
     }
 
@@ -91,19 +72,6 @@ export const getInfo = (
 
     info.push(...additionalInfo);
 
-    if (links.length) {
-        info.push({
-            label: i18n('links'),
-            value: (
-                <div className={b('links')}>
-                    {links.map(({title, url}) => (
-                        <LinkWithIcon key={title} title={title} url={url} />
-                    ))}
-                </div>
-            ),
-        });
-    }
-
     return info;
 };
 

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",

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[];
 }
 

src/types/components.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+
+export interface InfoItem {
+    label: string;
+    value: React.ReactNode;
+}