feat(Healthcheck): redesign

Author: Raubzeug

src/components/Drawer/Drawer.scss

@@ -8,7 +8,7 @@
     }
 
     &__item {
-        z-index: 4;
+        z-index: calc(var(--ydb-drawer-veil-z-index) + 1);
 
         height: 100%;
     }

src/components/Drawer/Drawer.tsx

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

src/components/EmptyState/EmptyState.scss

@@ -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: 20px;
+            }
+        }
         &_size_s {
             width: 460px;
             height: 120px;

src/components/EmptyState/EmptyState.tsx

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

src/components/EnableFullscreenButton/EnableFullscreenButton.tsx

@@ -1,6 +1,6 @@
 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';
@@ -16,9 +16,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="Fullscreen">
+            <Button onClick={onEnableFullscreen} view={view} disabled={disabled}>
+                <Icon data={SquareDashed} />
+            </Button>
+        </ActionTooltip>
     );
 }
 

src/components/Fullscreen/Fullscreen.scss

@@ -6,7 +6,7 @@
         // should expand to fill the content area, keeping aside navigation visible
         // counts on .gn-aside-header__content to have position: relative, it is set in App.scss
         position: absolute;
-        z-index: 10;
+        z-index: calc(var(--ydb-drawer-veil-z-index) + 3);
         inset: 0;
 
         background-color: var(--g-color-base-background);

src/components/HealthcheckStatus/HealthcheckStatus.tsx

@@ -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/HealthcheckStatus/i18n/en.json

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

src/components/HealthcheckStatus/i18n/index.ts

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