feat(Tablet): redesign tablet page, add data from hive

src/components/EmptyState/EmptyState.tsx

@@ -49,3 +49,20 @@ export const EmptyState = ({
         </div>
     );
 };
+
+interface EmptyStateWrapperProps extends EmptyStateProps {
+    isEmpty?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function EmptyStateWrapper({isEmpty, children, className, ...rest}: EmptyStateWrapperProps) {
+    if (isEmpty) {
+        return (
+            <div className={className}>
+                <EmptyState {...rest} />
+            </div>
+        );
+    }
+    return children;
+}

src/components/InfoViewerSkeleton/InfoViewerSkeleton.tsx

@@ -1,6 +1,9 @@
+import React from 'react';
+
 import {Skeleton} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
+import {useDelayed} from '../../utils/hooks/useDelayed';
 
 import './InfoViewerSkeleton.scss';
 
@@ -16,15 +19,27 @@ const SkeletonLabel = () => (
 interface InfoViewerSkeletonProps {
     className?: string;
     rows?: number;
+    delay?: number;
 }
 
-export const InfoViewerSkeleton = ({rows = 8, className}: InfoViewerSkeletonProps) => (
-    <div className={b(null, className)}>
-        {[...new Array(rows)].map((_, index) => (
-            <div className={b('row')} key={`skeleton-row-${index}`}>
-                <SkeletonLabel />
-                <Skeleton className={b('value')} />
-            </div>
-        ))}
-    </div>
-);
+export const InfoViewerSkeleton = ({rows = 8, className, delay = 600}: InfoViewerSkeletonProps) => {
+    const show = useDelayed(delay);
+    let skeletons: React.ReactNode = (
+        <React.Fragment>
+            <SkeletonLabel />
+            <Skeleton className={b('value')} />
+        </React.Fragment>
+    );
+    if (!show) {
+        skeletons = null;
+    }
+    return (
+        <div className={b(null, className)}>
+            {[...new Array(rows)].map((_, index) => (
+                <div className={b('row')} key={`skeleton-row-${index}`}>
+                    {skeletons}
+                </div>
+            ))}
+        </div>
+    );
+};

src/components/Tablet/Tablet.tsx

@@ -1,4 +1,4 @@
-import routes, {createHref} from '../../routes';
+import {getTabletPagePath} from '../../routes';
 import type {TTabletStateInfo} from '../../types/api/tablet';
 import {cn} from '../../utils/cn';
 import {getTabletLabel} from '../../utils/constants';
@@ -20,8 +20,7 @@ export const Tablet = ({tablet = {}, tenantName}: TabletProps) => {
     const {TabletId: id, NodeId, Type} = tablet;
     const status = tablet.Overall?.toLowerCase();
 
-    const tabletPath =
-        id && createHref(routes.tablet, {id}, {nodeId: NodeId, tenantName, type: Type});
+    const tabletPath = id && getTabletPagePath(id, {nodeId: NodeId, tenantName, type: Type});
 
     return (
         <ContentWithPopup

src/components/TabletState/TabletState.tsx

@@ -0,0 +1,12 @@
+import {Label} from '@gravity-ui/uikit';
+
+import type {ETabletState} from '../../types/api/tablet';
+import {mapTabletStateToLabelTheme} from '../../utils/tablet';
+
+interface TabletStateProps {
+    state?: ETabletState;
+}
+
+export function TabletState({state}: TabletStateProps) {
+    return <Label theme={mapTabletStateToLabelTheme(state)}>{state}</Label>;
+}

src/containers/Tablet/Tablet.scss

@@ -1,27 +1,10 @@
 @import '../../styles/mixins.scss';
 
-.tablet-page {
+.ydb-tablet-page {
     $_: &;
-    display: flex;
-    flex-direction: column;
-
+    height: 100%;
     padding: 20px;
-
-    &__tenant {
-        margin-bottom: 20px;
-    }
-
-    &__pane-wrapper {
-        display: flex;
-    }
-
-    &__left-pane {
-        margin-right: 70px;
-    }
-    &__history-title {
-        margin-bottom: 15px;
-        @include body-2-typography();
-    }
+    @include body-2-typography();
 
     &__placeholder {
         display: flex;
@@ -30,67 +13,7 @@
         align-items: center;
     }
 
-    &__row {
-        display: flex;
-        align-items: center;
-
-        &_header {
-            margin-bottom: 20px;
-
-            & #{$_}__link {
-                margin: 0 10px 0 5px;
-            }
-        }
-    }
-
-    &__title {
-        margin-right: 16px;
-
-        font-weight: 500;
-        text-transform: uppercase;
-
-        @include body-2-typography();
-    }
-
     &__loader {
-        width: 25px;
-    }
-
-    .info-viewer__items {
-        grid-template-columns: auto;
-    }
-
-    &__link {
-        @extend .link;
-    }
-
-    &__controls {
-        margin: 20px 0 15px;
-    }
-
-    &__control {
-        margin-right: 15px;
-    }
-
-    &__links {
-        display: flex;
-
-        margin: 5px 0 10px;
-        padding: 0;
-
-        list-style-type: none;
-
-        & > * {
-            margin: 0 10px 0 0;
-        }
-    }
-
-    &__top-label {
-        margin-right: 16px;
-
-        font-weight: 500;
-        text-transform: uppercase;
-
-        @include body-2-typography();
+        margin-left: var(--g-spacing-2);
     }
 }