feat(Healthcheck): redesign (#2348)

Author: Raubzeug

src/components/Drawer/Drawer.tsx

@@ -32,6 +32,7 @@ interface DrawerPaneContentWrapperProps {
     detectClickOutside?: boolean;
     defaultWidth?: number;
     isPercentageWidth?: boolean;
+    hideVeil?: boolean;
 }
 
 const DrawerPaneContentWrapper = ({
@@ -45,6 +46,7 @@ const DrawerPaneContentWrapper = ({
     className,
     detectClickOutside = false,
     isPercentageWidth,
+    hideVeil = true,
 }: DrawerPaneContentWrapperProps) => {
     const [drawerWidth, setDrawerWidth] = React.useState(() => {
         const savedWidth = localStorage.getItem(storageKey);
@@ -113,7 +115,7 @@ const DrawerPaneContentWrapper = ({
             <GravityDrawer
                 onEscape={onClose}
                 onVeilClick={onClose}
-                hideVeil
+                hideVeil={hideVeil}
                 className={b('container', className)}
             >
                 <DrawerItem
@@ -156,6 +158,7 @@ interface DrawerPaneProps {
     drawerControls?: DrawerControl[];
     title?: React.ReactNode;
     headerClassName?: string;
+    hideVeil?: boolean;
 }
 
 export const DrawerWrapper = ({
@@ -173,6 +176,7 @@ export const DrawerWrapper = ({
     drawerControls = [],
     title,
     headerClassName,
+    hideVeil,
 }: DrawerPaneProps) => {
     React.useEffect(() => {
         return () => {
@@ -220,6 +224,7 @@ export const DrawerWrapper = ({
         <React.Fragment>
             {children}
             <DrawerPaneContentWrapper
+                hideVeil={hideVeil}
                 isVisible={isDrawerVisible}
                 onClose={onCloseDrawer}
                 drawerId={drawerId}

src/containers/Storage/EmptyFilter/EmptyFilter.tsx renamed to src/components/EmptyFilter/EmptyFilter.tsx

@@ -1,7 +1,7 @@
 import {Button} from '@gravity-ui/uikit';
 
-import {EmptyState} from '../../../components/EmptyState';
-import {Illustration} from '../../../components/Illustration';
+import {EmptyState} from '../EmptyState';
+import {Illustration} from '../Illustration';
 
 import i18n from './i18n';
 

src/containers/Storage/EmptyFilter/i18n/en.json renamed to src/components/EmptyFilter/i18n/en.json

@@ -1,4 +1,4 @@
-import {registerKeysets} from '../../../../utils/i18n';
+import {registerKeysets} from '../../../utils/i18n';
 
 import en from './en.json';
 import ru from './ru.json';

src/containers/Storage/EmptyFilter/i18n/index.ts renamed to src/components/EmptyFilter/i18n/index.ts

@@ -1,6 +1,7 @@
 @use '../../styles/mixins.scss';
 
 .empty-state {
+    $block: &;
     padding: 20px;
 
     &_size_m {
@@ -13,6 +14,14 @@
             'image title'
             'image description'
             'image actions';
+
+        &_size_xs {
+            width: 321px;
+            height: 100px;
+            #{$block}__image {
+                margin-right: var(--g-spacing-5);
+            }
+        }
         &_size_s {
             width: 460px;
             height: 120px;

src/containers/Storage/EmptyFilter/i18n/ru.json renamed to src/components/EmptyFilter/i18n/ru.json

@@ -9,6 +9,7 @@ import './EmptyState.scss';
 const block = cn('empty-state');
 
 const sizes = {
+    xs: 100,
     s: 150,
     m: 250,
     l: 350,

src/components/EmptyState/EmptyState.scss

@@ -1,10 +1,12 @@
 import {SquareDashed} from '@gravity-ui/icons';
 import type {ButtonView} from '@gravity-ui/uikit';
-import {Button, Icon} from '@gravity-ui/uikit';
+import {ActionTooltip, Button, Icon} from '@gravity-ui/uikit';
 
 import {enableFullscreen} from '../../store/reducers/fullscreen';
 import {useTypedDispatch} from '../../utils/hooks';
 
+import i18n from './i18n';
+
 interface EnableFullscreenButtonProps {
     disabled?: boolean;
     view?: ButtonView;
@@ -16,9 +18,11 @@ function EnableFullscreenButton({disabled, view = 'flat-secondary'}: EnableFulls
         dispatch(enableFullscreen());
     };
     return (
-        <Button onClick={onEnableFullscreen} view={view} disabled={disabled} title="Fullscreen">
-            <Icon data={SquareDashed} />
-        </Button>
+        <ActionTooltip title={i18n('title_fullscreen')}>
+            <Button onClick={onEnableFullscreen} view={view} disabled={disabled}>
+                <Icon data={SquareDashed} />
+            </Button>
+        </ActionTooltip>
     );
 }
 

src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,3 @@
+{
+  "title_fullscreen": "Fullscreen"
+}

src/components/EnableFullscreenButton/EnableFullscreenButton.tsx

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

src/components/EnableFullscreenButton/i18n/en.json

@@ -0,0 +1,69 @@
+import {
+    CircleCheck,
+    CircleExclamation,
+    CircleInfo,
+    PlugConnection,
+    TriangleExclamation,
+} from '@gravity-ui/icons';
+import type {LabelProps} from '@gravity-ui/uikit';
+import {Icon, Label} from '@gravity-ui/uikit';
+
+import {SelfCheckResult} from '../../types/api/healthcheck';
+
+import i18n from './i18n';
+
+const SelfCheckResultToLabelTheme: Record<SelfCheckResult, LabelProps['theme']> = {
+    [SelfCheckResult.GOOD]: 'success',
+    [SelfCheckResult.DEGRADED]: 'info',
+    [SelfCheckResult.MAINTENANCE_REQUIRED]: 'warning',
+    [SelfCheckResult.EMERGENCY]: 'danger',
+    [SelfCheckResult.UNSPECIFIED]: 'normal',
+};
+
+const SelfCheckResultToIcon: Record<
+    SelfCheckResult,
+    (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element
+> = {
+    [SelfCheckResult.GOOD]: CircleCheck,
+    [SelfCheckResult.DEGRADED]: CircleInfo,
+    [SelfCheckResult.MAINTENANCE_REQUIRED]: TriangleExclamation,
+    [SelfCheckResult.EMERGENCY]: CircleExclamation,
+    [SelfCheckResult.UNSPECIFIED]: PlugConnection,
+};
+
+const SelfCheckResultToText: Record<SelfCheckResult, string> = {
+    get [SelfCheckResult.GOOD]() {
+        return i18n('title_good');
+    },
+    get [SelfCheckResult.DEGRADED]() {
+        return i18n('title_degraded');
+    },
+    get [SelfCheckResult.MAINTENANCE_REQUIRED]() {
+        return i18n('title_maintenance');
+    },
+    get [SelfCheckResult.EMERGENCY]() {
+        return i18n('title_emergency');
+    },
+    get [SelfCheckResult.UNSPECIFIED]() {
+        return i18n('title_unspecified');
+    },
+};
+
+interface HealthcheckStatusProps {
+    status: SelfCheckResult;
+    size?: LabelProps['size'];
+}
+
+export function HealthcheckStatus({status, size = 'm'}: HealthcheckStatusProps) {
+    const theme = SelfCheckResultToLabelTheme[status];
+
+    return (
+        <Label
+            theme={theme}
+            icon={<Icon size={14} data={SelfCheckResultToIcon[status]} />}
+            size={size}
+        >
+            {SelfCheckResultToText[status]}
+        </Label>
+    );
+}

src/components/EnableFullscreenButton/i18n/index.ts

@@ -0,0 +1,7 @@
+{
+  "title_degraded": "Degraded",
+  "title_emergency": "Emergency",
+  "title_maintenance": "Maintenance required",
+  "title_good": "Good",
+  "title_unspecified": "Unspecified"
+}

src/components/HealthcheckStatus/HealthcheckStatus.tsx

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

src/components/HealthcheckStatus/i18n/en.json

@@ -35,6 +35,7 @@ Props description:
 6) inverseColorize - invert the colors of the progress bar
 7) warningThreshold - the percentage of fullness at which the color of the progress bar changes to yellow
 8) dangerThreshold - the percentage of fullness at which the color of the progress bar changes to red
+9) withOverflow - percents may be more that 100%
 */
 
 export interface ProgressViewerProps {
@@ -49,13 +50,15 @@ export interface ProgressViewerProps {
     warningThreshold?: number;
     dangerThreshold?: number;
     hideCapacity?: boolean;
+    withOverflow?: boolean;
 }
 
 export function ProgressViewer({
     value,
     capacity,
     formatValues = defaultFormatValues,
     percents,
+    withOverflow,
     className,
     size = 'xs',
     colorizeProgress,
@@ -68,12 +71,13 @@ export function ProgressViewer({
 
     let fillWidth =
         Math.floor((parseFloat(String(value)) / parseFloat(String(capacity))) * 100) || 0;
+    const rawFillWidth = fillWidth;
     fillWidth = fillWidth > 100 ? 100 : fillWidth;
     let valueText: number | string | undefined = value,
         capacityText: number | string | undefined = capacity,
         divider = '/';
     if (percents) {
-        valueText = fillWidth + '%';
+        valueText = (withOverflow ? rawFillWidth : fillWidth) + '%';
         capacityText = '';
         divider = '';
     } else if (formatValues) {

src/components/HealthcheckStatus/i18n/index.ts

@@ -22,7 +22,6 @@
 
     .gutter {
         position: relative;
-        z-index: 10;
 
         background: var(--g-color-base-background);
 

src/components/ProgressViewer/ProgressViewer.tsx

@@ -1,6 +1,6 @@
+import {EmptyFilter} from '../../../components/EmptyFilter/EmptyFilter';
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import type {VisibleEntities} from '../../../store/reducers/storage/types';
-import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 
 import i18n from './i18n';
 

src/components/SplitPane/SplitPane.scss

@@ -1,7 +1,7 @@
+import {EmptyFilter} from '../../../components/EmptyFilter/EmptyFilter';
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import type {VisibleEntities} from '../../../store/reducers/storage/types';
 import {NodesUptimeFilterValues} from '../../../utils/nodes';
-import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 
 import i18n from './i18n';