refactor(Storage): redo disks layout

ariser · ariser · commit ecb145d6e169 · 2022-10-24T12:29:02.000+03:00
diff --git a/src/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss b/src/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss
@@ -1,18 +1,20 @@
 .storage-disk-progress-bar {
+    $block: &;
+
     $border-width: 2px;
     $outer-border-radius: 4px;
     $inner-border-radius: $outer-border-radius - $border-width;
 
-    $block: &;
     position: relative;
 
-    display: inline-block;
+    display: block;
 
-    width: 100%;
+    min-width: 50px;
     height: var(--yc-text-body-2-line-height);
 
-    vertical-align: top;
+    text-align: center;
 
+    color: var(--yc-color-text-primary);
     border: $border-width solid var(--yc-color-infographics-misc-heavy);
     border-radius: $outer-border-radius;
     background-color: var(--yc-color-infographics-misc-light);
@@ -82,7 +84,7 @@
         }
     }
     &__filled-title {
-        position: absolute;
+        position: relative;
         z-index: 2;
 
         font-size: var(--yc-text-body-1-font-size);
diff --git a/src/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx b/src/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx
@@ -5,8 +5,6 @@ import cn from 'bem-cn-lite';
 import {INVERTED_DISKS_KEY} from '../../../utils/constants';
 import {getSettingValue} from '../../../store/reducers/settings';
 
-import InternalLink from '../../../components/InternalLink/InternalLink';
-
 import './DiskStateProgressBar.scss';
 
 const b = cn('storage-disk-progress-bar');
@@ -23,13 +21,11 @@ export const diskProgressColors = {
 interface DiskStateProgressBarProps {
     diskAllocatedPercent?: number;
     severity?: keyof typeof diskProgressColors;
-    href?: string;
 }
 
 function DiskStateProgressBar({
     diskAllocatedPercent = -1,
     severity,
-    href,
 }: DiskStateProgressBarProps) {
     const inverted = useSelector((state) => getSettingValue(state, INVERTED_DISKS_KEY));
 
@@ -63,13 +59,7 @@ function DiskStateProgressBar({
             aria-valuemax={100}
             aria-valuenow={diskAllocatedPercent}
         >
-            {href ? (
-                <InternalLink to={href} className={b('link')}>
-                    {renderAllocatedPercent()}
-                </InternalLink>
-            ) : (
-                renderAllocatedPercent()
-            )}
+            {renderAllocatedPercent()}
         </div>
     );
 }
diff --git a/src/containers/Storage/Pdisk/Pdisk.scss b/src/containers/Storage/Pdisk/Pdisk.scss
@@ -1,18 +1,12 @@
 .pdisk-storage {
     position: relative;
 
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-
     min-width: 120px;
-    max-width: 200px;
-    margin-right: 10px;
 
-    cursor: pointer;
+    border-radius: 4px; // to match interactive area with disk shape
 
-    &:last-child {
-        margin-right: 0px;
+    &__content {
+        border-radius: 4px; // to match interactive area with disk shape
     }
 
     &__popup-wrapper {
@@ -21,6 +15,7 @@
 
     &__media-type {
         position: absolute;
+        top: 0;
         right: 4px;
 
         font-size: var(--yc-text-body-1-font-size);
diff --git a/src/containers/Storage/Pdisk/Pdisk.tsx b/src/containers/Storage/Pdisk/Pdisk.tsx
@@ -1,21 +1,23 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import cn from 'bem-cn-lite';
+
 import {Popup} from '@gravity-ui/uikit';
 
-import type {RequiredField} from '../../../types';
-//@ts-ignore
-import {bytesToGB} from '../../../utils/utils';
-//@ts-ignore
+import {InfoViewer} from '../../../components/InfoViewer';
+import InternalLink from '../../../components/InternalLink/InternalLink';
+
 import routes, {createHref} from '../../../routes';
-//@ts-ignore
+import type {RequiredField} from '../../../types';
+import {TPDiskStateInfo, TPDiskState} from '../../../types/api/storage';
 import {getPDiskId} from '../../../utils';
 import {getPDiskType} from '../../../utils/pdisk';
-import {TPDiskStateInfo, TPDiskState} from '../../../types/api/storage';
-import {InfoViewer} from '../../../components/InfoViewer';
+import {bytesToGB} from '../../../utils/utils';
+
+import {STRUCTURE} from '../../Node/NodePages';
+
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
-import {STRUCTURE} from '../../Node/NodePages';
 
 import {colorSeverity, NOT_AVAILABLE_SEVERITY} from '../utils';
 
@@ -135,16 +137,20 @@ function Pdisk(props: PDiskProps) {
         <React.Fragment>
             {renderPopup()}
             <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
-                <DiskStateProgressBar
-                    diskAllocatedPercent={pdiskAllocatedPercent}
-                    severity={severity as keyof typeof diskProgressColors}
-                    href={createHref(
+                <InternalLink
+                    to={createHref(
                         routes.node,
                         {id: props.NodeId, activeTab: STRUCTURE},
                         {pdiskId: props.PDiskId || ''},
                     )}
-                />
-                <div className={b('media-type')}>{getPDiskType(props)}</div>
+                    className={b('content')}
+                >
+                    <DiskStateProgressBar
+                        diskAllocatedPercent={pdiskAllocatedPercent}
+                        severity={severity as keyof typeof diskProgressColors}
+                    />
+                    <div className={b('media-type')}>{getPDiskType(props)}</div>
+                </InternalLink>
             </div>
         </React.Fragment>
     );
diff --git a/src/containers/Storage/StorageNodes/StorageNodes.scss b/src/containers/Storage/StorageNodes/StorageNodes.scss
@@ -7,6 +7,16 @@
 
         min-width: 500px;
     }
+    &__pdisks-item {
+        flex-grow: 1;
+
+        max-width: 200px;
+        margin-right: 10px;
+
+        &:last-child {
+            margin-right: 0px;
+        }
+    }
     &__fqdn-wrapper {
         width: 330px;
     }
diff --git a/src/containers/Storage/StorageNodes/StorageNodes.tsx b/src/containers/Storage/StorageNodes/StorageNodes.tsx
@@ -1,9 +1,9 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
+
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
 import {Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
-//@ts-ignore
 import {VisibleEntities} from '../../../store/reducers/storage';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
@@ -108,7 +108,9 @@ function StorageNodes({data, tableSettings, visibleEntities, onShowAll}: Storage
             render: ({value, row}) => (
                 <div className={b('pdisks-wrapper')}>
                     {_.map(value as any, (el) => (
-                        <Pdisk key={el.PDiskId} {...el} NodeId={row.NodeId} />
+                        <div className={b('pdisks-item')}>
+                            <Pdisk key={el.PDiskId} {...el} NodeId={row.NodeId} />
+                        </div>
                     ))}
                 </div>
             ),
diff --git a/src/containers/Storage/Vdisk/Vdisk.js b/src/containers/Storage/Vdisk/Vdisk.js
@@ -1,17 +1,22 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
+
 import {Label, Popup} from '@gravity-ui/uikit';
 
-import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
+import InternalLink from '../../../components/InternalLink/InternalLink';
+import {InfoViewer} from '../../../components/InfoViewer';
+
 import routes, {createHref} from '../../../routes';
 import {stringifyVdiskId, getPDiskId} from '../../../utils';
 import {getPDiskType} from '../../../utils/pdisk';
-import {InfoViewer} from '../../../components/InfoViewer';
+import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
+
+import {STRUCTURE} from '../../Node/NodePages';
+
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
-import {STRUCTURE} from '../../Node/NodePages';
 
 import {colorSeverity, NOT_AVAILABLE_SEVERITY} from '../utils';
 
@@ -225,33 +230,41 @@ function Vdisk(props) {
         const available = AvailableSize ? AvailableSize : PDisk?.AvailableSize;
 
         if (!available) {
-            return;
+            return undefined;
         }
-        return !isNaN(Number(AllocatedSize))
-            ? (Number(AllocatedSize) * 100) / (Number(available) + Number(AllocatedSize))
-            : undefined;
+
+        return isNaN(Number(AllocatedSize))
+            ? undefined
+            : (Number(AllocatedSize) * 100) / (Number(available) + Number(AllocatedSize));
     }, [props.AllocatedSize, props.AvailableSize, props.PDisk?.AvailableSize]);
 
     return (
         <React.Fragment>
             {renderPopup()}
             <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
-                <DiskStateProgressBar
-                    diskAllocatedPercent={vdiskAllocatedPercent}
-                    severity={severity}
-                    href={
-                        props.NodeId
-                            ? createHref(
-                                routes.node,
-                                {id: props.NodeId, activeTab: STRUCTURE},
-                                {
-                                    pdiskId: props.PDisk?.PDiskId,
-                                    vdiskId: stringifyVdiskId(props.VDiskId),
-                                },
-                            )
-                            : undefined
-                    }
-                />
+                {props.NodeId ? (
+                    <InternalLink
+                        to={createHref(
+                            routes.node,
+                            {id: props.NodeId, activeTab: STRUCTURE},
+                            {
+                                pdiskId: props.PDisk?.PDiskId,
+                                vdiskId: stringifyVdiskId(props.VDiskId),
+                            },
+                        )}
+                        className={b('content')}
+                    >
+                        <DiskStateProgressBar
+                            diskAllocatedPercent={vdiskAllocatedPercent}
+                            severity={severity}
+                        />
+                    </InternalLink>
+                ) : (
+                    <DiskStateProgressBar
+                        diskAllocatedPercent={vdiskAllocatedPercent}
+                        severity={severity}
+                    />
+                )}
             </div>
         </React.Fragment>
     );
diff --git a/src/containers/Storage/Vdisk/Vdisk.scss b/src/containers/Storage/Vdisk/Vdisk.scss
@@ -1,4 +1,10 @@
 .vdisk-storage {
+    border-radius: 4px; // to match interactive area with disk shape
+
+    &__content {
+        border-radius: 4px; // to match interactive area with disk shape
+    }
+
     &__popup-wrapper {
         padding: 12px;
 
