feat(Cluster): rework cluster page

src/components/DiagnosticCard/DiagnosticCard.scss

@@ -1,7 +1,6 @@
 .ydb-diagnostic-card {
     flex-shrink: 0;
 
-    width: 206px;
     padding: 16px;
     padding-bottom: 28px;
 
@@ -13,10 +12,24 @@
         border-color: var(--g-color-base-info-medium);
         background-color: var(--g-color-base-selection);
     }
+    &_interactive {
+        &:hover {
+            cursor: pointer;
 
-    &:hover {
-        cursor: pointer;
+            box-shadow: 0px 1px 5px var(--g-color-sfx-shadow);
+        }
+    }
 
-        box-shadow: 0px 1px 5px var(--g-color-sfx-shadow);
+    &_size_m {
+        width: 206px;
+        min-width: 206px;
+    }
+    &_size_l {
+        width: 289px;
+        min-width: 289px;
+    }
+    &_size_s {
+        width: 134px;
+        min-width: 134px;
     }
 }

src/components/DiagnosticCard/DiagnosticCard.tsx

@@ -4,12 +4,20 @@ import './DiagnosticCard.scss';
 
 const b = cn('ydb-diagnostic-card');
 
-interface DiagnosticCardProps {
+export interface DiagnosticCardProps {
     children?: React.ReactNode;
     className?: string;
     active?: boolean;
+    size?: 'm' | 'l' | 's';
+    interactive?: boolean;
 }
 
-export function DiagnosticCard({children, className, active}: DiagnosticCardProps) {
-    return <div className={b({active}, className)}>{children}</div>;
+export function DiagnosticCard({
+    children,
+    className,
+    active,
+    size = 'm',
+    interactive = true,
+}: DiagnosticCardProps) {
+    return <div className={b({active, size, interactive}, className)}>{children}</div>;
 }

src/components/DoughnutMetrics/DoughnutMetrics.scss

@@ -0,0 +1,58 @@
+.ydb-doughnut-metrics {
+    --doughnut-border: 11px;
+    --doughnut-color: var(--ydb-color-status-green);
+    &__doughnut {
+        position: relative;
+
+        width: 172px;
+        aspect-ratio: 1;
+
+        border-radius: 50%;
+        background-color: var(--doughnut-color);
+        &::before {
+            display: block;
+
+            height: calc(100% - calc(var(--doughnut-border) * 2));
+
+            content: '';
+
+            border-radius: 50%;
+            background-color: var(--g-color-base-background);
+
+            transform: translate(var(--doughnut-border), var(--doughnut-border));
+            aspect-ratio: 1;
+        }
+    }
+    &__doughnut_status_warning {
+        --doughnut-color: var(--ydb-color-status-yellow);
+    }
+    &__doughnut_status_danger {
+        --doughnut-color: var(--ydb-color-status-red);
+    }
+    &__text-wrapper {
+        --wrapper-indent: calc(var(--doughnut-border) + 5px);
+
+        position: absolute;
+        top: var(--wrapper-indent);
+        right: var(--wrapper-indent);
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        width: calc(100% - calc(var(--wrapper-indent) * 2));
+
+        text-align: center;
+        aspect-ratio: 1;
+    }
+    &__value {
+        position: absolute;
+        bottom: 20px;
+    }
+    &__legend {
+        height: 50%;
+
+        white-space: pre-wrap;
+    }
+}

src/components/DoughnutMetrics/DoughnutMetrics.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import type {TextProps} from '@gravity-ui/uikit';
+import {Text} from '@gravity-ui/uikit';
+
+import {cn} from '../../utils/cn';
+import type {ProgressStatus} from '../../utils/progress';
+
+import './DoughnutMetrics.scss';
+
+const b = cn('ydb-doughnut-metrics');
+
+interface LegendProps {
+    children?: React.ReactNode;
+    variant?: TextProps['variant'];
+}
+
+function Legend({children, variant = 'subheader-3'}: LegendProps) {
+    return (
+        <Text variant={variant} color="secondary" className={b('legend')}>
+            {children}
+        </Text>
+    );
+}
+function Value({children, variant = 'subheader-2'}: LegendProps) {
+    return (
+        <Text variant={variant} color="secondary" className={b('value')}>
+            {children}
+        </Text>
+    );
+}
+
+interface DoughnutProps {
+    status: ProgressStatus;
+    fillWidth: number;
+    children?: React.ReactNode;
+    className?: string;
+}
+
+export function DoughnutMetrics({status, fillWidth, children, className}: DoughnutProps) {
+    let gradientFill = 'var(--g-color-line-generic-solid)';
+    let filledDegrees = fillWidth * 3.6 - 90;
+
+    if (fillWidth > 50) {
+        gradientFill = 'var(--doughnut-color)';
+        filledDegrees = fillWidth * 3.6 + 90;
+    }
+    const gradientDegrees = filledDegrees;
+    return (
+        <div className={b(null, className)}>
+            <div
+                style={{
+                    backgroundImage: `linear-gradient(${gradientDegrees}deg, transparent 50%, ${gradientFill} 50%), linear-gradient(-90deg, var(--g-color-line-generic-solid) 50%, transparent 50%)`,
+                }}
+                className={b('doughnut', {status})}
+            >
+                <div className={b('text-wrapper')}>{children}</div>
+            </div>
+        </div>
+    );
+}
+
+DoughnutMetrics.Legend = Legend;
+DoughnutMetrics.Value = Value;

src/components/ProgressViewer/ProgressViewer.scss

@@ -11,7 +11,7 @@
     justify-content: center;
     align-items: center;
 
-    min-width: 120px;
+    min-width: 150px;
     height: 23px;
     padding: 0 4px;
 

src/components/ProgressViewer/ProgressViewer.tsx

@@ -2,6 +2,7 @@ import {useTheme} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {formatNumber, roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
+import {calculateProgressStatus} from '../../utils/progress';
 import {isNumeric} from '../../utils/utils';
 
 import './ProgressViewer.scss';
@@ -10,8 +11,6 @@ const b = cn('progress-viewer');
 
 type ProgressViewerSize = 'xs' | 's' | 'ns' | 'm' | 'n' | 'l' | 'head';
 
-type ProgressViewerStatus = 'good' | 'warning' | 'danger';
-
 type FormatProgressViewerValues = (
     value?: number,
     capacity?: number,
@@ -79,16 +78,15 @@ export function ProgressViewer({
         [valueText, capacityText] = formatValues(Number(value), Number(capacity));
     }
 
-    let status: ProgressViewerStatus = inverseColorize ? 'danger' : 'good';
-    if (colorizeProgress) {
-        if (fillWidth > warningThreshold && fillWidth <= dangerThreshold) {
-            status = 'warning';
-        } else if (fillWidth > dangerThreshold) {
-            status = inverseColorize ? 'good' : 'danger';
-        }
-        if (!isNumeric(capacity)) {
-            fillWidth = 100;
-        }
+    const status = calculateProgressStatus({
+        fillWidth,
+        warningThreshold,
+        dangerThreshold,
+        colorizeProgress,
+        inverseColorize,
+    });
+    if (colorizeProgress && !isNumeric(capacity)) {
+        fillWidth = 100;
     }
 
     const lineStyle = {

src/components/Tag/Tag.scss

@@ -1,9 +1,8 @@
 .tag {
-    margin-right: 5px;
     padding: 2px 5px;
 
     font-size: 12px;
-    text-transform: uppercase;
+    white-space: nowrap;
 
     color: var(--g-color-text-primary);
     border-radius: 3px;

src/components/Tags/Tags.tsx

@@ -1,24 +1,23 @@
 import React from 'react';
 
-import {cn} from '../../utils/cn';
+import type {FlexProps} from '@gravity-ui/uikit';
+import {Flex} from '@gravity-ui/uikit';
+
 import type {TagType} from '../Tag';
 import {Tag} from '../Tag';
 
-import './Tags.scss';
-
-const b = cn('tags');
-
 interface TagsProps {
     tags: React.ReactNode[];
     tagsType?: TagType;
     className?: string;
+    gap?: FlexProps['gap'];
 }
 
-export const Tags = ({tags, tagsType, className = ''}: TagsProps) => {
+export const Tags = ({tags, tagsType, className = '', gap = 1}: TagsProps) => {
     return (
-        <div className={b(null, className)}>
+        <Flex className={className} gap={gap} wrap="wrap" alignItems="center">
             {tags &&
                 tags.map((tag, tagIndex) => <Tag text={tag} key={tagIndex} type={tagsType}></Tag>)}
-        </div>
+        </Flex>
     );
 };

src/containers/Cluster/Cluster.scss

@@ -27,27 +27,50 @@
         height: var(--g-text-header-1-line-height);
     }
 
-    &__tabs {
-        position: sticky;
-        left: 0;
+    &__tabs-sticky-wrapper {
+        z-index: 3;
 
+        margin-top: 20px;
+        margin-right: -20px;
+        padding-right: 20px;
+        @include sticky-top();
+    }
+    &__tabs {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
         @include tabs-wrapper-styles();
     }
 
     &__sticky-wrapper {
         position: sticky;
         z-index: 4;
-        top: 56px;
+        top: 66px;
         left: 0;
     }
 
     &__auto-refresh-control {
         float: right;
 
-        margin-top: -40px;
+        margin-top: -46px;
+
+        background-color: var(--g-color-base-background);
+    }
+    .ydb-table-with-controls-layout__controls-wrapper {
+        top: 40px;
+    }
+
+    &__tablets {
+        .data-table__sticky_moving {
+            // Place table head right after controls
+            top: 60px !important;
+        }
+    }
+
+    &__fake-block {
+        position: sticky;
+        z-index: 3;
+        top: 40px;
+
+        height: 20px;
 
         background-color: var(--g-color-base-background);
     }

src/containers/Cluster/Cluster.tsx

@@ -31,6 +31,7 @@ import {TabletsTable} from '../Tablets/TabletsTable';
 import {Tenants} from '../Tenants/Tenants';
 import {Versions} from '../Versions/Versions';
 
+import {ClusterDashboard} from './ClusterDashboard/ClusterDashboard';
 import {ClusterInfo} from './ClusterInfo/ClusterInfo';
 import type {ClusterTab} from './utils';
 import {clusterTabs, clusterTabsIds, getClusterPath, isClusterTab} from './utils';
@@ -119,7 +120,11 @@ export function Cluster({
                 {activeTab ? <title>{activeTab.title}</title> : null}
             </Helmet>
             <div className={b('header')}>{getClusterTitle()}</div>
-            <div className={b('tabs')}>
+            <div className={b('sticky-wrapper')}>
+                <AutoRefreshControl className={b('auto-refresh-control')} />
+            </div>
+            <ClusterDashboard cluster={cluster} groupStats={groupsStats} loading={infoLoading} />
+            <div className={b('tabs-sticky-wrapper')}>
                 <Tabs
                     size="l"
                     allowNotSelected={true}
@@ -141,9 +146,6 @@ export function Cluster({
                     }}
                 />
             </div>
-            <div className={b('sticky-wrapper')}>
-                <AutoRefreshControl className={b('auto-refresh-control')} />
-            </div>
             <Switch>
                 <Route
                     path={
@@ -152,7 +154,6 @@ export function Cluster({
                 >
                     <ClusterInfo
                         cluster={cluster}
-                        groupsStats={groupsStats}
                         versionToColor={versionToColor}
                         loading={infoLoading}
                         error={clusterError}