feat(Storage): add advanced disks view (#1235)

Author: artemmufazalov

src/components/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -8,12 +8,14 @@
     --progress-bar-border-color: var(--g-color-base-misc-heavy);
     --progress-bar-background-color: var(--g-color-base-misc-light);
     --progress-bar-fill-color: var(--g-color-base-misc-medium);
+    --progress-bar-full-height: var(--g-text-body-3-line-height);
+    --progress-bar-compact-height: 12px;
 
     position: relative;
     z-index: 0;
 
     min-width: 50px;
-    height: var(--g-text-body-3-line-height);
+    height: var(--progress-bar-full-height);
 
     text-align: center;
 
@@ -24,7 +26,7 @@
 
     &_compact {
         min-width: 0;
-        height: 12px;
+        height: var(--progress-bar-compact-height);
 
         border-radius: 2px;
     }
@@ -101,7 +103,7 @@
 
         font-size: var(--g-text-body-1-font-size);
         // bar height minus borders
-        line-height: calc(var(--g-text-body-3-line-height) - #{$border-width * 2});
+        line-height: calc(var(--progress-bar-full-height) - #{$border-width * 2});
 
         color: inherit;
     }

src/components/PDiskPopup/PDiskPopup.tsx

@@ -5,7 +5,6 @@ import {Popup} from '@gravity-ui/uikit';
 
 import {EFlag} from '../../types/api/enums';
 import type {NodesMap} from '../../types/store/nodesList';
-import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {getPDiskId} from '../../utils/disks/helpers';
@@ -26,10 +25,7 @@ export const preparePDiskData = (data: PreparedPDisk, nodes?: NodesMap) => {
     const pdiskData: InfoViewerItem[] = [
         {
             label: 'PDisk',
-            value:
-                valueIsDefined(NodeId) && valueIsDefined(PDiskId)
-                    ? getPDiskId(NodeId, PDiskId)
-                    : EMPTY_DATA_PLACEHOLDER,
+            value: getPDiskId(NodeId, PDiskId) ?? EMPTY_DATA_PLACEHOLDER,
         },
         {label: 'State', value: State || 'not available'},
         {label: 'Type', value: Type || 'unknown'},
@@ -75,6 +71,7 @@ export const PDiskPopup = ({data, nodes, ...props}: PDiskPopupProps) => {
         <Popup
             contentClassName={b()}
             placement={['top', 'bottom']}
+            hasArrow
             // bigger offset for easier switching to neighbour nodes
             // matches the default offset for popup with arrow out of a sense of beauty
             offset={[0, 12]}

src/components/VDisk/VDisk.tsx

@@ -17,13 +17,25 @@ import './VDisk.scss';
 
 const b = cn('ydb-vdisk-component');
 
-interface VDiskProps {
+export interface VDiskProps {
     data?: PreparedVDisk;
     nodes?: NodesMap;
     compact?: boolean;
+    showPopup?: boolean;
+    onShowPopup?: VoidFunction;
+    onHidePopup?: VoidFunction;
+    progressBarClassName?: string;
 }
 
-export const VDisk = ({data = {}, nodes, compact}: VDiskProps) => {
+export const VDisk = ({
+    data = {},
+    nodes,
+    compact,
+    showPopup,
+    onShowPopup,
+    onHidePopup,
+    progressBarClassName,
+}: VDiskProps) => {
     const isFullData = isFullVDiskData(data);
 
     const diskPagesAvailable = useDiskPagesAvailable();
@@ -32,12 +44,14 @@ export const VDisk = ({data = {}, nodes, compact}: VDiskProps) => {
 
     const anchor = React.useRef(null);
 
-    const showPopup = () => {
+    const handleShowPopup = () => {
         setIsPopupVisible(true);
+        onShowPopup?.();
     };
 
-    const hidePopup = () => {
+    const handleHidePopup = () => {
         setIsPopupVisible(false);
+        onHidePopup?.();
     };
 
     let vDiskPath: string | undefined;
@@ -62,24 +76,27 @@ export const VDisk = ({data = {}, nodes, compact}: VDiskProps) => {
 
     return (
         <React.Fragment>
-            <VDiskPopup data={data} nodes={nodes} anchorRef={anchor} open={isPopupVisible} />
-            <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
-                {vDiskPath ? (
-                    <InternalLink to={vDiskPath} className={b('content')}>
-                        <DiskStateProgressBar
-                            diskAllocatedPercent={data.AllocatedPercent}
-                            severity={data.Severity}
-                            compact={compact}
-                        />
-                    </InternalLink>
-                ) : (
+            <div
+                className={b()}
+                ref={anchor}
+                onMouseEnter={handleShowPopup}
+                onMouseLeave={handleHidePopup}
+            >
+                <InternalLink to={vDiskPath} className={b('content')}>
                     <DiskStateProgressBar
                         diskAllocatedPercent={data.AllocatedPercent}
                         severity={data.Severity}
                         compact={compact}
+                        className={progressBarClassName}
                     />
-                )}
+                </InternalLink>
             </div>
+            <VDiskPopup
+                data={data}
+                nodes={nodes}
+                anchorRef={anchor}
+                open={isPopupVisible || showPopup}
+            />
         </React.Fragment>
     );
 };

src/components/VDisk/VDiskWithDonorsStack.tsx

@@ -1,32 +1,29 @@
-import type {NodesMap} from '../../types/store/nodesList';
 import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
 import {isFullVDiskData} from '../../utils/disks/helpers';
 import type {PreparedVDisk} from '../../utils/disks/types';
 import {Stack} from '../Stack/Stack';
 
+import type {VDiskProps} from './VDisk';
 import {VDisk} from './VDisk';
 
-interface VDiskWithDonorsStackProps {
+interface VDiskWithDonorsStackProps extends VDiskProps {
     data?: PreparedVDisk;
-    nodes?: NodesMap;
-    compact?: boolean;
     className?: string;
     stackClassName?: string;
 }
 
 export function VDiskWithDonorsStack({
     data,
-    nodes,
-    compact,
     className,
     stackClassName,
+    ...restProps
 }: VDiskWithDonorsStackProps) {
     const donors = data?.Donors;
 
     const content =
         donors && donors.length > 0 ? (
             <Stack className={stackClassName}>
-                <VDisk data={data} nodes={nodes} compact={compact} />
+                <VDisk data={data} {...restProps} />
                 {donors.map((donor) => {
                     const isFullData = isFullVDiskData(donor);
 
@@ -35,14 +32,13 @@ export function VDiskWithDonorsStack({
                         <VDisk
                             key={stringifyVdiskId(isFullData ? donor.VDiskId : donor)}
                             data={donor}
-                            nodes={nodes}
-                            compact={compact}
+                            {...restProps}
                         />
                     );
                 })}
             </Stack>
         ) : (
-            <VDisk data={data} nodes={nodes} compact={compact} />
+            <VDisk data={data} {...restProps} />
         );
 
     return <div className={className}>{content}</div>;

src/components/VDiskPopup/VDiskPopup.tsx

@@ -148,6 +148,7 @@ export const VDiskPopup = ({data, nodes, ...props}: VDiskPopupProps) => {
         <Popup
             contentClassName={b()}
             placement={['top', 'bottom']}
+            hasArrow
             // bigger offset for easier switching to neighbour nodes
             // matches the default offset for popup with arrow out of a sense of beauty
             offset={[0, 12]}

src/containers/PDiskPage/PDiskGroups/PDiskGroups.tsx

@@ -1,23 +1,17 @@
-import React from 'react';
-
 import {ResizeableDataTable} from '../../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableSkeleton} from '../../../components/TableSkeleton/TableSkeleton';
-import {selectNodesMap} from '../../../store/reducers/nodesList';
 import {pDiskApi} from '../../../store/reducers/pdisk/pdisk';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
-import {useAutoRefreshInterval, useTypedSelector} from '../../../utils/hooks';
-import {
-    STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY,
-    getDiskPageStorageColumns,
-} from '../../Storage/StorageGroups/getStorageGroupsColumns';
+import {useAutoRefreshInterval} from '../../../utils/hooks';
+import {STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY} from '../../Storage/StorageGroups/columns/getStorageGroupsColumns';
+import {useGetDiskStorageColumns} from '../../Storage/StorageGroups/columns/hooks';
 
 interface PDiskGroupsProps {
     nodeId: string | number;
     pDiskId: string | number;
 }
 
 export function PDiskGroups({pDiskId, nodeId}: PDiskGroupsProps) {
-    const nodesMap = useTypedSelector(selectNodesMap);
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
     const pDiskStorageQuery = pDiskApi.useGetStorageInfoQuery(
@@ -27,9 +21,7 @@ export function PDiskGroups({pDiskId, nodeId}: PDiskGroupsProps) {
     const loading = pDiskStorageQuery.isFetching && pDiskStorageQuery.currentData === undefined;
     const data = pDiskStorageQuery.currentData ?? [];
 
-    const pDiskStorageColumns = React.useMemo(() => {
-        return getDiskPageStorageColumns(nodesMap);
-    }, [nodesMap]);
+    const pDiskStorageColumns = useGetDiskStorageColumns();
 
     if (loading) {
         return <TableSkeleton />;

src/containers/PDiskPage/PDiskPage.tsx

@@ -137,7 +137,7 @@ export function PDiskPage() {
             <EntityPageTitle
                 entityName={pDiskPageKeyset('pdisk')}
                 status={getSeverityColor(Severity)}
-                id={pDiskParamsDefined ? getPDiskId(nodeId, pDiskId) : null}
+                id={getPDiskId(nodeId, pDiskId)}
                 className={pdiskPageCn('title')}
             />
         );

src/containers/Storage/Disks/Disks.scss

@@ -0,0 +1,46 @@
+.ydb-storage-disks {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 20px;
+
+    width: max-content;
+
+    &__vdisks-wrapper {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: row;
+        gap: 4px;
+
+        width: 300px;
+    }
+
+    &__pdisks-wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: left;
+        gap: 6px;
+
+        width: max-content;
+    }
+
+    &__vdisk-item {
+        flex-basis: 8px;
+        flex-shrink: 0;
+    }
+    &__vdisk-progress-bar {
+        --progress-bar-compact-height: 18px;
+
+        border-radius: 4px;
+    }
+
+    &__pdisk-item {
+        width: 80px;
+    }
+    &__pdisk-progress-bar {
+        --progress-bar-full-height: 20px;
+        padding-left: var(--g-spacing-2);
+
+        text-align: left;
+    }
+}