fix(StorageNodes): uniform render type (#1376)

Author: artemmufazalov

src/containers/Storage/PDisk/PDisk.scss

@@ -21,7 +21,7 @@
     }
 
     &__vdisks-item {
-        flex-basis: 5px;
+        flex-basis: 3px;
         flex-shrink: 0;
 
         .stack__layer {

src/containers/Storage/Storage.tsx

@@ -26,15 +26,14 @@ import type {
     VisibleEntities,
 } from '../../store/reducers/storage/types';
 import {valueIsDefined} from '../../utils';
-import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {useAutoRefreshInterval, useTableSort} from '../../utils/hooks';
 import {NodesUptimeFilterValues, nodesUptimeFilterValuesSchema} from '../../utils/nodes';
 import {useAdditionalNodeProps} from '../AppWithClusters/useClusterData';
 
 import {StorageControls} from './StorageControls/StorageControls';
-import {StorageGroups} from './StorageGroups/StorageGroups';
+import {StorageGroupsTable} from './StorageGroups/StorageGroupsTable';
 import {useStorageGroupsSelectedColumns} from './StorageGroups/columns/hooks';
-import {StorageNodes} from './StorageNodes/StorageNodes';
+import {StorageNodesTable} from './StorageNodes/StorageNodesTable';
 import {useStorageNodesSelectedColumns} from './StorageNodes/columns/hooks';
 import {b} from './shared';
 import {defaultSortNode, getDefaultSortGroup} from './utils';
@@ -201,24 +200,22 @@ export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => {
         return (
             <React.Fragment>
                 {isGroups ? (
-                    <StorageGroups
+                    <StorageGroupsTable
                         key="groups"
                         visibleEntities={visibleEntities}
                         data={storageGroups}
-                        tableSettings={DEFAULT_TABLE_SETTINGS}
                         onShowAll={() => handleGroupVisibilityChange(VISIBLE_ENTITIES.all)}
                         sort={groupsSort}
                         handleSort={handleGroupsSort}
                         columns={storageGroupsColumnsToShow}
                     />
                 ) : null}
                 {isNodes ? (
-                    <StorageNodes
+                    <StorageNodesTable
                         key="nodes"
                         visibleEntities={visibleEntities}
                         nodesUptimeFilter={uptimeFilter}
                         data={storageNodes}
-                        tableSettings={DEFAULT_TABLE_SETTINGS}
                         onShowAll={handleShowAllNodes}
                         sort={nodesSort}
                         handleSort={handleNodesSort}

src/containers/Storage/StorageGroups/StorageGroups.tsx renamed to src/containers/Storage/StorageGroups/StorageGroupsTable.tsx

@@ -1,34 +1,33 @@
-import type {Settings, SortOrder} from '@gravity-ui/react-data-table';
+import type {SortOrder} from '@gravity-ui/react-data-table';
 
 import {ResizeableDataTable} from '../../../components/ResizeableDataTable/ResizeableDataTable';
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import type {PreparedStorageGroup, VisibleEntities} from '../../../store/reducers/storage/types';
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 import type {HandleSort} from '../../../utils/hooks/useTableSort';
 
 import {StorageGroupsEmptyDataMessage} from './StorageGroupsEmptyDataMessage';
 import {STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY} from './columns/constants';
 import type {StorageGroupsColumn} from './columns/types';
 import i18n from './i18n';
 
-interface StorageGroupsProps {
+interface StorageGroupsTableProps {
     data: PreparedStorageGroup[];
     columns: StorageGroupsColumn[];
-    tableSettings: Settings;
     visibleEntities: VisibleEntities;
     onShowAll?: VoidFunction;
     sort?: SortOrder;
     handleSort?: HandleSort;
 }
 
-export function StorageGroups({
+export function StorageGroupsTable({
     data,
     columns,
-    tableSettings,
     visibleEntities,
     onShowAll,
     sort,
     handleSort,
-}: StorageGroupsProps) {
+}: StorageGroupsTableProps) {
     if (!data.length && visibleEntities !== VISIBLE_ENTITIES.all) {
         return (
             <StorageGroupsEmptyDataMessage
@@ -44,7 +43,7 @@ export function StorageGroups({
             key={visibleEntities}
             data={data}
             columns={columns}
-            settings={tableSettings}
+            settings={DEFAULT_TABLE_SETTINGS}
             emptyDataMessage={i18n('empty.default')}
             sortOrder={sort}
             onSort={handleSort}

src/containers/Storage/StorageNodes/StorageNodes.tsx renamed to src/containers/Storage/StorageNodes/StorageNodesTable.tsx

@@ -1,8 +1,9 @@
-import type {Settings, SortOrder} from '@gravity-ui/react-data-table';
+import type {SortOrder} from '@gravity-ui/react-data-table';
 
 import {ResizeableDataTable} from '../../../components/ResizeableDataTable/ResizeableDataTable';
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 import type {HandleSort} from '../../../utils/hooks/useTableSort';
 import {NodesUptimeFilterValues} from '../../../utils/nodes';
 
@@ -12,27 +13,30 @@ import type {StorageNodesColumn} from './columns/types';
 import i18n from './i18n';
 import {getRowUnavailableClassName} from './shared';
 
-interface StorageNodesProps {
+const tableSettings = {
+    ...DEFAULT_TABLE_SETTINGS,
+    dynamicRenderMinSize: 51,
+} as const;
+
+interface StorageNodesTableProps {
     data: PreparedStorageNode[];
     columns: StorageNodesColumn[];
-    tableSettings: Settings;
     visibleEntities: VisibleEntities;
     nodesUptimeFilter: NodesUptimeFilterValues;
     sort?: SortOrder;
     onShowAll?: VoidFunction;
     handleSort?: HandleSort;
 }
 
-export function StorageNodes({
+export function StorageNodesTable({
     data,
     columns,
-    tableSettings,
     visibleEntities,
     nodesUptimeFilter,
     sort,
     onShowAll,
     handleSort,
-}: StorageNodesProps) {
+}: StorageNodesTableProps) {
     if (
         !data.length &&
         (visibleEntities !== VISIBLE_ENTITIES.all ||
@@ -53,10 +57,7 @@ export function StorageNodes({
             key={visibleEntities as string}
             data={data}
             columns={columns}
-            settings={{
-                ...tableSettings,
-                dynamicRenderType: 'variable',
-            }}
+            settings={tableSettings}
             emptyDataMessage={i18n('empty.default')}
             rowClassName={getRowUnavailableClassName}
             sortOrder={sort}

src/containers/Storage/StorageNodes/columns/StorageNodesColumns.scss

@@ -9,6 +9,7 @@
         align-items: flex-end;
 
         width: max-content;
+        height: 40px;
     }
     &__pdisks-item {
         flex-grow: 1;