feat(Cluster): redesign cluster dashboard (#2176)

Author: Raubzeug

src/assets/icons/overview.svg

@@ -1,14 +1,17 @@
 .ydb-doughnut-metrics {
-    --doughnut-border: 11px;
+    --doughnut-border: 16px;
     --doughnut-color: var(--ydb-color-status-green);
+    --doughnut-backdrop-color: var(--g-color-base-positive-light);
+    --doughnut-overlap-color: var(--g-color-base-positive-heavy-hover);
     &__doughnut {
         position: relative;
 
-        width: 172px;
+        width: 100px;
         aspect-ratio: 1;
 
         border-radius: 50%;
-        background-color: var(--doughnut-color);
+
+        transform: rotate(180deg);
         &::before {
             display: block;
 
@@ -25,9 +28,13 @@
     }
     &__doughnut_status_warning {
         --doughnut-color: var(--ydb-color-status-yellow);
+        --doughnut-backdrop-color: var(--g-color-base-warning-light);
+        --doughnut-overlap-color: var(--g-color-base-warning-heavy-hover);
     }
     &__doughnut_status_danger {
         --doughnut-color: var(--ydb-color-status-red);
+        --doughnut-backdrop-color: var(--g-color-base-danger-light);
+        --doughnut-overlap-color: var(--g-color-base-danger-heavy-hover);
     }
     &__text-wrapper {
         --wrapper-indent: calc(var(--doughnut-border) + 5px);
@@ -44,15 +51,15 @@
         width: calc(100% - calc(var(--wrapper-indent) * 2));
 
         text-align: center;
+
+        transform: rotate(180deg);
         aspect-ratio: 1;
     }
     &__value {
         position: absolute;
         bottom: 20px;
     }
-    &__legend {
-        height: 50%;
-
-        white-space: pre-wrap;
+    &__legend-note {
+        display: flex;
     }
 }

src/assets/icons/user-check.svg

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type {TextProps} from '@gravity-ui/uikit';
-import {Text} from '@gravity-ui/uikit';
+import {Flex, HelpMark, Text} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import type {ProgressStatus} from '../../utils/progress';
@@ -13,18 +13,23 @@ const b = cn('ydb-doughnut-metrics');
 interface LegendProps {
     children?: React.ReactNode;
     variant?: TextProps['variant'];
+    color?: TextProps['color'];
+    note?: React.ReactNode;
 }
 
-function Legend({children, variant = 'subheader-3'}: LegendProps) {
+function Legend({children, variant = 'subheader-3', color = 'primary', note}: LegendProps) {
     return (
-        <Text variant={variant} color="secondary" className={b('legend')}>
-            {children}
-        </Text>
+        <Flex gap={1} alignItems="center">
+            <Text variant={variant} color={color} className={b('legend')} as="div">
+                {children}
+            </Text>
+            {note && <HelpMark className={b('legend-note')}>{note}</HelpMark>}
+        </Flex>
     );
 }
 function Value({children, variant = 'subheader-2'}: LegendProps) {
     return (
-        <Text variant={variant} color="secondary" className={b('value')}>
+        <Text variant={variant} className={b('value')}>
             {children}
         </Text>
     );
@@ -38,19 +43,21 @@ interface DoughnutProps {
 }
 
 export function DoughnutMetrics({status, fillWidth, children, className}: DoughnutProps) {
-    let gradientFill = 'var(--g-color-line-generic-solid)';
-    let filledDegrees = fillWidth * 3.6 - 90;
+    let filledDegrees = fillWidth * 3.6;
+    let doughnutFillVar = 'var(--doughnut-color)';
+    let doughnutBackdropVar = 'var(--doughnut-backdrop-color)';
 
-    if (fillWidth > 50) {
-        gradientFill = 'var(--doughnut-color)';
-        filledDegrees = fillWidth * 3.6 + 90;
+    if (filledDegrees > 360) {
+        filledDegrees -= 360;
+        doughnutBackdropVar = 'var(--doughnut-color)';
+        doughnutFillVar = 'var(--doughnut-overlap-color)';
     }
-    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%)`,
+                    background: `conic-gradient(${doughnutFillVar} 0deg ${filledDegrees}deg, ${doughnutBackdropVar} ${filledDegrees}deg 360deg)`,
                 }}
                 className={b('doughnut', {status})}
             >

src/components/DoughnutMetrics/DoughnutMetrics.scss

@@ -0,0 +1,10 @@
+.ydb-entity-status-new {
+    .g-help-mark__button {
+        color: inherit;
+    }
+
+    &_orange.g-label {
+        color: var(--g-color-private-orange-500);
+        background-color: var(--g-color-private-orange-100);
+    }
+}

src/components/DoughnutMetrics/DoughnutMetrics.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import type {LabelProps} from '@gravity-ui/uikit';
+import {ActionTooltip, Flex, HelpMark, Label} from '@gravity-ui/uikit';
+
+import {EFlag} from '../../types/api/enums';
+import {cn} from '../../utils/cn';
+import {StatusIcon} from '../StatusIconNew/StatusIcon';
+
+import i18n from './i18n';
+import {EFlagToDescription} from './utils';
+
+import './EntityStatus.scss';
+
+const b = cn('ydb-entity-status-new');
+
+const EFlagToLabelTheme: Record<EFlag, LabelProps['theme'] | 'orange'> = {
+    [EFlag.Red]: 'danger',
+    [EFlag.Blue]: 'info',
+    [EFlag.Green]: 'success',
+    [EFlag.Grey]: 'unknown',
+    [EFlag.Orange]: 'orange',
+    [EFlag.Yellow]: 'warning',
+};
+
+const EFlagToStatusName: Record<EFlag, string> = {
+    get [EFlag.Red]() {
+        return i18n('title_red');
+    },
+    get [EFlag.Yellow]() {
+        return i18n('title_yellow');
+    },
+    get [EFlag.Orange]() {
+        return i18n('title_orange');
+    },
+    get [EFlag.Green]() {
+        return i18n('title_green');
+    },
+    get [EFlag.Grey]() {
+        return i18n('title_grey');
+    },
+    get [EFlag.Blue]() {
+        return i18n('title_blue');
+    },
+};
+
+interface EntityStatusLabelProps {
+    status: EFlag;
+    note?: React.ReactNode;
+    children?: React.ReactNode;
+    withStatusName?: boolean;
+    size?: LabelProps['size'];
+    iconSize?: number;
+}
+
+function EntityStatusLabel({
+    children,
+    status,
+    withStatusName = true,
+    note,
+    size = 'm',
+    iconSize = 14,
+}: EntityStatusLabelProps) {
+    const theme = EFlagToLabelTheme[status];
+    return (
+        <ActionTooltip title={EFlagToDescription[status]} disabled={Boolean(note)}>
+            <Label
+                theme={theme === 'orange' ? undefined : theme}
+                icon={<StatusIcon size={iconSize} status={status} />}
+                size={size}
+                className={b({orange: theme === 'orange'})}
+            >
+                <Flex gap="2" wrap="nowrap">
+                    {children}
+                    {withStatusName ? EFlagToStatusName[status] : null}
+                    {note && <HelpMark>{note}</HelpMark>}
+                </Flex>
+            </Label>
+        </ActionTooltip>
+    );
+}
+
+interface EntityStatusProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+
+export function EntityStatus({className, children}: EntityStatusProps) {
+    return (
+        <Flex gap="2" wrap="nowrap" alignItems="center" className={b(null, className)}>
+            {children}
+        </Flex>
+    );
+}
+
+EntityStatus.Label = EntityStatusLabel;
+EntityStatus.displayName = 'EntityStatus';

src/components/EntityStatusNew/EntityStatus.scss

@@ -0,0 +1,14 @@
+{
+  "title_red": "Failed",
+  "title_blue": "Normal",
+  "title_green": "Good",
+  "title_grey": "Unknown",
+  "title_orange": "Caution",
+  "title_yellow": "Warning",
+  "context_red": "Some systems are failed and not available",
+  "context_yellow": "There are minor issues",
+  "context_orange": "Critical state, requires immediate attention",
+  "context_green": "Everything is working as expected",
+  "context_grey": "The condition cannot be determined",
+  "context_blue": "All good, some parts of the system are restoring"
+}

src/components/EntityStatusNew/EntityStatus.tsx

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-entity-status';
+
+export default registerKeysets(COMPONENT, {en});

src/components/EntityStatusNew/i18n/en.json

@@ -0,0 +1,24 @@
+import {EFlag} from '../../types/api/enums';
+
+import i18n from './i18n';
+
+export const EFlagToDescription: Record<EFlag, string> = {
+    get [EFlag.Red]() {
+        return i18n('context_red');
+    },
+    get [EFlag.Yellow]() {
+        return i18n('context_yellow');
+    },
+    get [EFlag.Orange]() {
+        return i18n('context_orange');
+    },
+    get [EFlag.Green]() {
+        return i18n('context_green');
+    },
+    get [EFlag.Grey]() {
+        return i18n('context_grey');
+    },
+    get [EFlag.Blue]() {
+        return i18n('context_blue');
+    },
+};

src/components/EntityStatusNew/i18n/index.ts

@@ -0,0 +1,31 @@
+import {
+    CircleCheck,
+    CircleExclamation,
+    CircleInfo,
+    PlugConnection,
+    TriangleExclamation,
+} from '@gravity-ui/icons';
+import type {IconProps} from '@gravity-ui/uikit';
+import {Icon} from '@gravity-ui/uikit';
+
+import {EFlag} from '../../types/api/enums';
+
+const EFlagToIcon: Record<EFlag, (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element> = {
+    [EFlag.Blue]: CircleInfo,
+    [EFlag.Yellow]: CircleExclamation,
+    [EFlag.Orange]: TriangleExclamation,
+    [EFlag.Red]: CircleExclamation,
+    [EFlag.Green]: CircleCheck,
+    [EFlag.Grey]: PlugConnection,
+};
+
+interface StatusIconProps extends Omit<IconProps, 'data'> {
+    status?: EFlag;
+}
+
+export function StatusIcon({status, ...props}: StatusIconProps) {
+    if (!status) {
+        return null;
+    }
+    return <Icon {...props} data={EFlagToIcon[status]} />;
+}