feat: set pdisks column width

ydb-platform · Dec 26, 2024 · c8d608e · c8d608e
1 parent 1095d96
commit c8d608e
Show file tree

Hide file tree

Showing 10 changed files with 320 additions and 53 deletions.
diff --git a/src/containers/Storage/PDisk/PDisk.scss b/src/containers/Storage/PDisk/PDisk.scss
@@ -1,19 +1,16 @@
-.pdisk-storage {
-    --pdisk-vdisk-width: 3px;
-    --pdisk-gap-width: 2px;
+@import '../../../styles/mixins.scss';
 
+.pdisk-storage {
     position: relative;
 
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
 
-    width: calc(
-        var(--pdisk-max-slots, 1) * var(--pdisk-vdisk-width) + (var(--pdisk-max-slots, 1) - 1) *
-            var(--pdisk-gap-width)
-    );
-    min-width: 120px;
+    width: var(--pdisk-width);
+    min-width: var(--pdisk-min-width);
 
+    @include calculate-storage-pdisk-variables();
     &__content {
         position: relative;
 

diff --git a/src/containers/Storage/PDisk/PDisk.tsx b/src/containers/Storage/PDisk/PDisk.tsx
@@ -16,8 +16,6 @@ import './PDisk.scss';
 
 const b = cn('pdisk-storage');
 
-const PDISK_MAX_SLOTS_CSS_VAR = '--pdisk-max-slots';
-
 interface PDiskProps {
     data?: PreparedPDisk;
     vDisks?: PreparedVDisk[];
@@ -27,7 +25,6 @@ interface PDiskProps {
     className?: string;
     progressBarClassName?: string;
     viewContext?: StorageViewContext;
-    maximumSlotsPerDisk?: string;
 }
 
 export const PDisk = ({
@@ -39,7 +36,6 @@ export const PDisk = ({
     className,
     progressBarClassName,
     viewContext,
-    maximumSlotsPerDisk,
 }: PDiskProps) => {
     const {NodeId, PDiskId} = data;
     const pDiskIdsDefined = valueIsDefined(NodeId) && valueIsDefined(PDiskId);
@@ -77,17 +73,7 @@ export const PDisk = ({
     }
 
     return (
-        <div
-            className={b(null, className)}
-            ref={anchorRef}
-            style={
-                maximumSlotsPerDisk
-                    ? ({
-                          [PDISK_MAX_SLOTS_CSS_VAR]: maximumSlotsPerDisk,
-                      } as React.CSSProperties)
-                    : undefined
-            }
-        >
+        <div className={b(null, className)} ref={anchorRef}>
             {renderVDisks()}
             <HoverPopup
                 showPopup={showPopup}

diff --git a/src/containers/Storage/StorageNodes/columns/StorageNodesColumns.scss b/src/containers/Storage/StorageNodes/columns/StorageNodesColumns.scss
@@ -1,14 +1,18 @@
+@import '../../../../styles/mixins.scss';
+
 .ydb-storage-nodes-columns {
     &__pdisks-column {
         overflow: visible; // to enable stacked disks overflow the row
     }
 
     &__pdisks-wrapper {
         display: flex;
-        gap: 10px;
+        gap: var(--pdisk-margin);
 
-        width: 100%;
+        width: var(--pdisks-container-width);
         height: 40px;
+
+        @include calculate-storage-pdisk-variables();
     }
 
     &__pdisks-item {

diff --git a/src/containers/Storage/StorageNodes/columns/columns.tsx b/src/containers/Storage/StorageNodes/columns/columns.tsx
@@ -30,27 +30,30 @@ import './StorageNodesColumns.scss';
 
 const b = cn('ydb-storage-nodes-columns');
 
+const MAX_SLOTS_CSS_VAR = '--maximum-slots';
+const MAX_DISKS_CSS_VAR = '--maximum-disks';
+
 const getPDisksColumn = ({viewContext}: GetStorageNodesColumnsParams): StorageNodesColumn => {
     return {
         name: NODES_COLUMNS_IDS.PDisks,
         header: NODES_COLUMNS_TITLES.PDisks,
         className: b('pdisks-column'),
         render: ({row}) => {
+            const pDiskStyles = {
+                [MAX_SLOTS_CSS_VAR]: row.MaximumSlotsPerDisk,
+                [MAX_DISKS_CSS_VAR]: row.MaximumDisksPerNode,
+            } as React.CSSProperties;
+
             return (
-                <div className={b('pdisks-wrapper')}>
+                <div className={b('pdisks-wrapper')} style={pDiskStyles}>
                     {row.PDisks?.map((pDisk) => {
                         const vDisks = row.VDisks?.filter(
                             (vdisk) => vdisk.PDiskId === pDisk.PDiskId,
                         );
 
                         return (
                             <div className={b('pdisks-item')} key={pDisk.PDiskId}>
-                                <PDisk
-                                    data={pDisk}
-                                    vDisks={vDisks}
-                                    viewContext={viewContext}
-                                    maximumSlotsPerDisk={row.MaximumSlotsPerDisk}
-                                />
+                                <PDisk data={pDisk} vDisks={vDisks} viewContext={viewContext} />
                             </div>
                         );
                     })}
@@ -59,7 +62,6 @@ const getPDisksColumn = ({viewContext}: GetStorageNodesColumnsParams): StorageNo
         },
         align: DataTable.CENTER,
         sortable: false,
-        width: 900,
         resizeable: false,
     };
 };

diff --git a/src/containers/Storage/StorageNodes/getNodes.ts b/src/containers/Storage/StorageNodes/getNodes.ts
@@ -3,6 +3,7 @@ import {
     NODES_COLUMNS_TO_DATA_FIELDS,
     getNodesColumnSortField,
 } from '../../../components/nodesColumns/constants';
+import {generateNodes} from '../../../mocks/storage/nodes';
 import type {
     PreparedStorageNode,
     PreparedStorageNodeFilters,
@@ -12,7 +13,6 @@ import type {NodesRequestParams} from '../../../types/api/nodes';
 import {prepareSortValue} from '../../../utils/filters';
 import {getUptimeParamValue} from '../../../utils/nodes';
 import {getRequiredDataFields} from '../../../utils/tableUtils/getRequiredDataFields';
-
 export const getStorageNodes: FetchData<
     PreparedStorageNode,
     PreparedStorageNodeFilters,
@@ -38,28 +38,42 @@ export const getStorageNodes: FetchData<
         filterGroupBy,
     } = filters ?? {};
     const {sortOrder, columnId} = sortParams ?? {};
-
     const sortField = getNodesColumnSortField(columnId);
     const sort = sortField ? prepareSortValue(sortField, sortOrder) : undefined;
 
     const dataFieldsRequired = getRequiredDataFields(columnsIds, NODES_COLUMNS_TO_DATA_FIELDS);
 
-    const response = await window.api.viewer.getNodes({
-        type,
-        storage,
-        limit,
-        offset,
-        sort,
-        filter: searchValue,
-        uptime: getUptimeParamValue(nodesUptimeFilter),
-        with: visibleEntities,
-        database,
-        node_id: nodeId,
-        group_id: groupId,
-        filter_group: filterGroup,
-        filter_group_by: filterGroupBy,
-        fieldsRequired: dataFieldsRequired,
-    });
+    let response;
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('mocks')) {
+        // Get mock configuration from URL parameters or use defaults
+        const pdisks = parseInt(urlParams.get('pdisks') || '10', 10);
+        const vdisksPerPDisk = parseInt(urlParams.get('vdisksPerPDisk') || '2', 10);
+        const totalNodes = parseInt(urlParams.get('totalNodes') || '50', 10);
+        response = generateNodes(totalNodes, {
+            maxVdisksPerPDisk: vdisksPerPDisk,
+            maxPdisks: pdisks,
+            offset,
+            limit,
+        });
+    } else {
+        response = await window.api.viewer.getNodes({
+            type,
+            storage,
+            limit,
+            offset,
+            sort,
+            filter: searchValue,
+            uptime: getUptimeParamValue(nodesUptimeFilter),
+            with: visibleEntities,
+            database,
+            node_id: nodeId,
+            group_id: groupId,
+            filter_group: filterGroup,
+            filter_group_by: filterGroupBy,
+            fieldsRequired: dataFieldsRequired,
+        });
+    }
     const preparedResponse = prepareStorageNodesResponse(response);
     return {
         data: preparedResponse.nodes || [],