fix: must-have changes

Author: astandrik

src/components/PaginatedTable/PaginatedTable.scss

@@ -181,6 +181,6 @@
     }
 
     &__row-skeleton::after {
-        animation: none !important;
+        display: none !important;
     }
 }

src/components/PaginatedTable/TableChunk.tsx

@@ -119,12 +119,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
                 );
             } else {
                 return getArray(dataLength).map((value) => (
-                    <LoadingTableRow
-                        key={value}
-                        columns={columns}
-                        height={rowHeight}
-                        index={value}
-                    />
+                    <LoadingTableRow key={value} columns={columns} height={rowHeight} />
                 ));
             }
         }
@@ -141,7 +136,6 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
         return currentData.data.map((rowData, index) => (
             <TableRow
                 key={index}
-                index={index}
                 row={rowData as T}
                 columns={columns}
                 height={rowHeight}

src/components/PaginatedTable/TableRow.tsx

@@ -3,6 +3,7 @@ import {Skeleton} from '@gravity-ui/uikit';
 import {DEFAULT_ALIGN, DEFAULT_RESIZEABLE} from './constants';
 import {b} from './shared';
 import type {AlignType, Column, GetRowClassName} from './types';
+import {typedMemo} from './utils';
 
 interface TableCellProps {
     height: number;
@@ -38,19 +39,18 @@ const TableRowCell = ({
 
 interface LoadingTableRowProps<T> {
     columns: Column<T>[];
-    index: number;
     height: number;
 }
 
-export const LoadingTableRow = <T,>({index, columns, height}: LoadingTableRowProps<T>) => {
+export const LoadingTableRow = typedMemo(function <T>({columns, height}: LoadingTableRowProps<T>) {
     return (
         <tr className={b('row', {loading: true})}>
             {columns.map((column) => {
                 const resizeable = column.resizeable ?? DEFAULT_RESIZEABLE;
 
                 return (
                     <TableRowCell
-                        key={`${column.name}${index}`}
+                        key={`${column.name}`}
                         height={height}
                         width={column.width}
                         align={column.align}
@@ -66,17 +66,16 @@ export const LoadingTableRow = <T,>({index, columns, height}: LoadingTableRowPro
             })}
         </tr>
     );
-};
+});
 
 interface TableRowProps<T> {
     columns: Column<T>[];
-    index: number;
     row: T;
     height: number;
     getRowClassName?: GetRowClassName<T>;
 }
 
-export const TableRow = <T,>({row, index, columns, getRowClassName, height}: TableRowProps<T>) => {
+export const TableRow = <T,>({row, columns, getRowClassName, height}: TableRowProps<T>) => {
     const additionalClassName = getRowClassName?.(row);
 
     return (
@@ -86,14 +85,14 @@ export const TableRow = <T,>({row, index, columns, getRowClassName, height}: Tab
 
                 return (
                     <TableRowCell
-                        key={`${column.name}${index}`}
+                        key={`${column.name}`}
                         height={height}
                         width={column.width}
                         align={column.align}
                         className={column.className}
                         resizeable={resizeable}
                     >
-                        {column.render({row, index})}
+                        {column.render({row})}
                     </TableRowCell>
                 );
             })}

src/components/PaginatedTable/types.ts

@@ -29,7 +29,7 @@ export interface Column<T> {
     className?: string;
     sortable?: boolean;
     resizeable?: boolean;
-    render: (props: {row: T; index: number}) => React.ReactNode;
+    render: (props: {row: T}) => React.ReactNode;
     width?: number;
     resizeMaxWidth?: number;
     resizeMinWidth?: number;

src/containers/Nodes/NodesTable.tsx

@@ -83,7 +83,7 @@ export function NodesTable({
             parentRef={parentRef}
             columns={columns}
             fetchData={getNodes}
-            limit={50}
+            limit={30}
             initialEntitiesCount={initialEntitiesCount}
             renderControls={renderControls}
             renderErrorMessage={renderPaginatedTableErrorMessage}

src/containers/Storage/StorageGroups/PaginatedStorageGroupsTable.tsx

@@ -101,7 +101,7 @@ export const PaginatedStorageGroupsTable = ({
                 parentRef={parentRef}
                 columns={columns}
                 fetchData={fetchData}
-                limit={50}
+                limit={30}
                 initialEntitiesCount={initialEntitiesCount}
                 renderControls={renderControls}
                 renderErrorMessage={renderErrorMessage}

src/containers/Storage/StorageNodes/PaginatedStorageNodesTable.tsx

@@ -104,7 +104,7 @@ export const PaginatedStorageNodesTable = ({
             columns={columns}
             fetchData={getStorageNodes}
             rowHeight={51}
-            limit={50}
+            limit={30}
             initialEntitiesCount={initialEntitiesCount}
             renderControls={renderControls}
             renderErrorMessage={renderErrorMessage}

src/containers/Storage/StorageNodes/getNodes.ts

@@ -48,7 +48,7 @@ export const getStorageNodes: FetchData<
         type,
         storage,
         limit,
-        offset,
+        offset: 0,
         sort,
         filter: searchValue,
         uptime: getUptimeParamValue(nodesUptimeFilter),
@@ -61,9 +61,23 @@ export const getStorageNodes: FetchData<
         fieldsRequired: dataFieldsRequired,
     });
     const preparedResponse = prepareStorageNodesResponse(response);
+
+    let mockedData = preparedResponse.nodes?.slice();
+
+    for (let i = 0; i < 4000; i++) {
+        mockedData = mockedData?.concat(
+            preparedResponse.nodes?.map((data, j) => ({
+                ...data,
+                NodeId: data.NodeId + i * 2000 + j,
+                Host: data.Host || String(i) + ',' + j,
+            })) || [],
+        );
+    }
+    const paginatedData = mockedData?.slice(offset, offset + limit);
+
     return {
-        data: preparedResponse.nodes || [],
-        found: preparedResponse.found || 0,
-        total: preparedResponse.total || 0,
+        data: paginatedData || [],
+        found: mockedData?.length || 0,
+        total: mockedData?.length || 0,
     };
 };