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

ydb-platform · Aug 19, 2024 · 4f72f77 · 4f72f77
1 parent c10bee7
commit 4f72f77
Show file tree

Hide file tree

Showing 32 changed files with 775 additions and 291 deletions.
diff --git a/src/components/EmptyState/EmptyState.tsx b/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;
+}
diff --git a/src/components/InfoViewerSkeleton/InfoViewerSkeleton.tsx b/src/components/InfoViewerSkeleton/InfoViewerSkeleton.tsx
@@ -1,6 +1,7 @@
 import {Skeleton} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
+import {useDelayed} from '../../utils/hooks/useDelayed';
 
 import './InfoViewerSkeleton.scss';
 
@@ -16,15 +17,22 @@ 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);
+    if (!show) {
+        return null;
+    }
+    return (
+        <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>
+    );
+};
diff --git a/src/components/PDiskInfo/PDiskInfo.tsx b/src/components/PDiskInfo/PDiskInfo.tsx
@@ -164,7 +164,7 @@ function getPDiskInfo<T extends PreparedPDisk>({
             label: pDiskInfoKeyset('links'),
             value: (
                 <span className={b('links')}>
-                    {withPDiskPageLink && (
+                    {isUserAllowedToMakeChanges && (
                         <LinkWithIcon
                             title={pDiskInfoKeyset('pdisk-page')}
                             url={pDiskPagePath}

diff --git a/src/components/Tablet/Tablet.tsx b/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

diff --git a/src/containers/Tablet/Tablet.scss b/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,16 @@
         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;
+        margin-left: var(--g-spacing-2);
     }
 
     &__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();
+    &__section-title {
+        margin: var(--g-spacing-1) 0 var(--g-spacing-3);
+        @include text-subheader-2();
     }
 }