feat: use new /viewer/cluster handler format

src/components/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -1,13 +1,12 @@
+@import '../../styles/mixins';
+
 .storage-disk-progress-bar {
     $block: &;
 
     $border-width: 1px;
     $outer-border-radius: 4px;
     $inner-border-radius: $outer-border-radius - $border-width;
 
-    --progress-bar-border-color: var(--g-color-base-misc-heavy);
-    --progress-bar-background-color: var(--g-color-base-misc-light);
-    --progress-bar-fill-color: var(--g-color-base-misc-medium);
     --progress-bar-full-height: var(--g-text-body-3-line-height);
     --progress-bar-compact-height: 12px;
 
@@ -20,9 +19,10 @@
     text-align: center;
 
     color: var(--g-color-text-primary);
-    border: $border-width solid var(--progress-bar-border-color);
+    border: $border-width solid var(--entity-state-border-color);
     border-radius: $outer-border-radius;
-    background-color: var(--progress-bar-background-color);
+    background-color: var(--entity-state-background-color);
+    @include entity-state-colors();
 
     &_compact {
         min-width: 0;
@@ -31,35 +31,6 @@
         border-radius: 2px;
     }
 
-    &_green {
-        --progress-bar-border-color: var(--g-color-base-positive-heavy);
-        --progress-bar-background-color: var(--g-color-base-positive-light);
-        --progress-bar-fill-color: var(--g-color-base-positive-medium);
-    }
-
-    &_blue {
-        --progress-bar-border-color: var(--g-color-base-info-heavy);
-        --progress-bar-background-color: var(--g-color-base-info-light);
-        --progress-bar-fill-color: var(--g-color-base-info-medium);
-    }
-
-    &_yellow {
-        --progress-bar-border-color: var(--g-color-base-warning-heavy);
-        --progress-bar-background-color: var(--g-color-base-yellow-light);
-        --progress-bar-fill-color: var(--g-color-base-yellow-medium);
-    }
-
-    &_orange {
-        --progress-bar-border-color: var(--ydb-color-status-orange);
-        --progress-bar-background-color: var(--g-color-base-warning-light);
-        --progress-bar-fill-color: var(--g-color-base-warning-medium);
-    }
-    &_red {
-        --progress-bar-border-color: var(--g-color-base-danger-heavy);
-        --progress-bar-background-color: var(--g-color-base-danger-light);
-        --progress-bar-fill-color: var(--g-color-base-danger-medium);
-    }
-
     &_faded {
         background-color: unset;
     }
@@ -78,11 +49,11 @@
         height: 100%;
 
         border-radius: $inner-border-radius 0 0 $inner-border-radius;
-        background-color: var(--progress-bar-fill-color);
+        background-color: var(--entity-state-fill-color);
 
         &_faded {
             // Bg color is light variant, use it to make bar less bright
-            background-color: var(--progress-bar-background-color);
+            background-color: var(--entity-state-background-color);
         }
 
         &_compact {

src/components/Tag/Tag.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {cn} from '../../utils/cn';
 
 import './Tag.scss';
@@ -7,7 +9,7 @@ const b = cn('tag');
 export type TagType = 'blue';
 
 interface TagProps {
-    text: string;
+    text: React.ReactNode;
     type?: TagType;
 }
 

src/components/Tags/Tags.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {cn} from '../../utils/cn';
 import type {TagType} from '../Tag';
 import {Tag} from '../Tag';
@@ -7,7 +9,7 @@ import './Tags.scss';
 const b = cn('tags');
 
 interface TagsProps {
-    tags: string[];
+    tags: React.ReactNode[];
     tagsType?: TagType;
     className?: string;
 }

src/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -47,24 +47,17 @@
         gap: var(--g-spacing-2);
     }
 
-    &__storage-groups-stats {
-        display: flex;
-        flex-direction: column;
-        gap: 11px;
-    }
-
-    &__groups-stats-bar {
-        cursor: pointer;
-    }
-
-    &__groups-stats-popup-content {
-        padding: 12px;
-    }
-
     &__clipboard-button {
         display: flex;
         align-items: center;
 
         margin-left: 5px;
     }
+    &__dc-count {
+        text-transform: lowercase;
+    }
+    &__nodes-states {
+        display: flex;
+        gap: var(--g-spacing-half);
+    }
 }

src/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -1,198 +1,20 @@
-import React from 'react';
-
-import {ContentWithPopup} from '../../../components/ContentWithPopup/ContentWithPopup';
 import {ResponseError} from '../../../components/Errors/ResponseError';
-import type {InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
 import {InfoViewer} from '../../../components/InfoViewer/InfoViewer';
 import {InfoViewerSkeleton} from '../../../components/InfoViewerSkeleton/InfoViewerSkeleton';
-import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
-import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
-import {Tablet} from '../../../components/Tablet';
-import {Tags} from '../../../components/Tags';
 import {backend, customBackend} from '../../../store';
-import type {
-    ClusterGroupsStats,
-    DiskErasureGroupsStats,
-    DiskGroupsStats,
-} from '../../../store/reducers/cluster/types';
-import {nodesApi} from '../../../store/reducers/nodes/nodes';
-import type {AdditionalClusterProps, ClusterLink} from '../../../types/additionalProps';
+import type {ClusterGroupsStats} from '../../../store/reducers/cluster/types';
+import type {AdditionalClusterProps} from '../../../types/additionalProps';
 import type {TClusterInfo} from '../../../types/api/cluster';
 import type {IResponseError} from '../../../types/api/error';
-import type {VersionToColorMap, VersionValue} from '../../../types/versions';
-import {formatBytes, getSizeWithSignificantDigits} from '../../../utils/bytesParsers';
-import {cn} from '../../../utils/cn';
+import type {VersionToColorMap} from '../../../types/versions';
 import {DEVELOPER_UI_TITLE} from '../../../utils/constants';
-import {formatStorageValues} from '../../../utils/dataFormatters/dataFormatters';
 import {useTypedSelector} from '../../../utils/hooks';
-import {parseNodeGroupsToVersionsValues, parseNodesToVersionsValues} from '../../../utils/versions';
-import {VersionsBar} from '../VersionsBar/VersionsBar';
-import i18n from '../i18n';
 
-import {compareTablets} from './utils';
+import {b} from './shared';
+import {getInfo, useGetVersionValues} from './utils';
 
 import './ClusterInfo.scss';
 
-const b = cn('cluster-info');
-
-interface GroupsStatsPopupContentProps {
-    stats: DiskErasureGroupsStats;
-}
-
-const GroupsStatsPopupContent = ({stats}: GroupsStatsPopupContentProps) => {
-    const {diskType, erasure, allocatedSize, availableSize} = stats;
-
-    const sizeToConvert = getSizeWithSignificantDigits(Math.max(allocatedSize, availableSize), 2);
-
-    const convertedAllocatedSize = formatBytes({value: allocatedSize, size: sizeToConvert});
-    const convertedAvailableSize = formatBytes({value: availableSize, size: sizeToConvert});
-
-    const usage = Math.round((allocatedSize / (allocatedSize + availableSize)) * 100);
-
-    const info = [
-        {
-            label: i18n('disk-type'),
-            value: diskType,
-        },
-        {
-            label: i18n('erasure'),
-            value: erasure,
-        },
-        {
-            label: i18n('allocated'),
-            value: convertedAllocatedSize,
-        },
-        {
-            label: i18n('available'),
-            value: convertedAvailableSize,
-        },
-        {
-            label: i18n('usage'),
-            value: usage + '%',
-        },
-    ];
-
-    return (
-        <InfoViewer dots={true} info={info} className={b('groups-stats-popup-content')} size="s" />
-    );
-};
-
-interface DiskGroupsStatsProps {
-    stats: DiskGroupsStats;
-}
-
-const DiskGroupsStatsBars = ({stats}: DiskGroupsStatsProps) => {
-    return (
-        <div className={b('storage-groups-stats')}>
-            {Object.values(stats).map((erasureStats) => (
-                <ContentWithPopup
-                    placement={['right']}
-                    key={erasureStats.erasure}
-                    content={<GroupsStatsPopupContent stats={erasureStats} />}
-                >
-                    <ProgressViewer
-                        className={b('groups-stats-bar')}
-                        value={erasureStats.createdGroups}
-                        capacity={erasureStats.totalGroups}
-                    />
-                </ContentWithPopup>
-            ))}
-        </div>
-    );
-};
-
-const getGroupsStatsFields = (groupsStats: ClusterGroupsStats) => {
-    return Object.keys(groupsStats).map((diskType) => {
-        return {
-            label: i18n('storage-groups', {diskType}),
-            value: <DiskGroupsStatsBars stats={groupsStats[diskType]} />,
-        };
-    });
-};
-
-const getInfo = (
-    cluster: TClusterInfo,
-    versionsValues: VersionValue[],
-    groupsStats: ClusterGroupsStats,
-    additionalInfo: InfoViewerItem[],
-    links: ClusterLink[],
-) => {
-    const info: InfoViewerItem[] = [];
-
-    if (cluster.DataCenters) {
-        info.push({
-            label: i18n('dc'),
-            value: <Tags tags={cluster.DataCenters} />,
-        });
-    }
-
-    if (cluster.SystemTablets) {
-        const tablets = cluster.SystemTablets.slice(0).sort(compareTablets);
-        info.push({
-            label: i18n('tablets'),
-            value: (
-                <div className={b('system-tablets')}>
-                    {tablets.map((tablet, tabletIndex) => (
-                        <Tablet key={tabletIndex} tablet={tablet} />
-                    ))}
-                </div>
-            ),
-        });
-    }
-
-    if (cluster.Tenants) {
-        info.push({
-            label: i18n('databases'),
-            value: cluster.Tenants,
-        });
-    }
-
-    info.push(
-        {
-            label: i18n('nodes'),
-            value: <ProgressViewer value={cluster?.NodesAlive} capacity={cluster?.NodesTotal} />,
-        },
-        {
-            label: i18n('load'),
-            value: <ProgressViewer value={cluster?.LoadAverage} capacity={cluster?.NumberOfCpus} />,
-        },
-        {
-            label: i18n('storage-size'),
-            value: (
-                <ProgressViewer
-                    value={cluster?.StorageUsed}
-                    capacity={cluster?.StorageTotal}
-                    formatValues={formatStorageValues}
-                />
-            ),
-        },
-    );
-
-    if (Object.keys(groupsStats).length) {
-        info.push(...getGroupsStatsFields(groupsStats));
-    }
-
-    info.push(
-        ...additionalInfo,
-        {
-            label: i18n('links'),
-            value: (
-                <div className={b('links')}>
-                    {links.map(({title, url}) => (
-                        <LinkWithIcon key={title} title={title} url={url} />
-                    ))}
-                </div>
-            ),
-        },
-        {
-            label: i18n('versions'),
-            value: <VersionsBar versionsValues={versionsValues} />,
-        },
-    );
-
-    return info;
-};
-
 interface ClusterInfoProps {
     cluster?: TClusterInfo;
     versionToColor?: VersionToColorMap;
@@ -212,20 +34,7 @@ export const ClusterInfo = ({
 }: ClusterInfoProps) => {
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
 
-    const {currentData} = nodesApi.useGetNodesQuery({
-        tablets: false,
-        group: 'Version',
-    });
-
-    const versionsValues = React.useMemo(() => {
-        if (!currentData) {
-            return [];
-        }
-        if (Array.isArray(currentData.NodeGroups)) {
-            return parseNodeGroupsToVersionsValues(currentData.NodeGroups, versionToColor);
-        }
-        return parseNodesToVersionsValues(currentData.Nodes, versionToColor);
-    }, [currentData, versionToColor]);
+    const versionsValues = useGetVersionValues(cluster, versionToColor);
 
     let internalLink = backend + '/internal';
 

src/containers/Cluster/ClusterInfo/components/DiskGroupsStatsBars/DiskGroupsStatsBars.scss

@@ -0,0 +1,11 @@
+.ydb-disk-groups-stats {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-spacing-3);
+    &__bar {
+        cursor: pointer;
+    }
+    &__popup-content {
+        padding: var(--g-spacing-3);
+    }
+}