Merge branch 'main' into astandrik.add-controls-1415

Author: astandrik

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [6.29.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v6.29.1...v6.29.2) (2024-10-28)
+
+
+### Bug Fixes
+
+* **ClusterMetricsCores:** format value and capacity same way ([#1532](https://github.com/ydb-platform/ydb-embedded-ui/issues/1532)) ([4eb5c04](https://github.com/ydb-platform/ydb-embedded-ui/commit/4eb5c041f8b5615a2806bf5d5bd015afa963ac09))
+* **TabletsTable:** action icons coincide in tablet's page and in table ([#1549](https://github.com/ydb-platform/ydb-embedded-ui/issues/1549)) ([26f77a8](https://github.com/ydb-platform/ydb-embedded-ui/commit/26f77a8563e3c3a100001b198e3e7ee5f97ad7f9))
+
 ## [6.29.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v6.29.0...v6.29.1) (2024-10-25)
 
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "6.29.1",
+  "version": "6.29.2",
   "files": [
     "dist"
   ],

package.json

@@ -15,6 +15,7 @@ interface ButtonWithConfirmDialogProps<T, K> {
     retryButtonText?: string;
     buttonDisabled?: ButtonProps['disabled'];
     buttonView?: ButtonProps['view'];
+    buttonTitle?: ButtonProps['title'];
     buttonClassName?: ButtonProps['className'];
     withPopover?: boolean;
     popoverContent?: PopoverProps['content'];
@@ -31,6 +32,7 @@ export function ButtonWithConfirmDialog<T, K>({
     retryButtonText,
     buttonDisabled = false,
     buttonView = 'action',
+    buttonTitle,
     buttonClassName,
     withPopover = false,
     popoverContent,
@@ -69,6 +71,7 @@ export function ButtonWithConfirmDialog<T, K>({
                 disabled={buttonDisabled}
                 loading={!buttonDisabled && buttonLoading}
                 className={buttonClassName}
+                title={buttonTitle}
             >
                 {children}
             </Button>

src/components/ButtonWithConfirmDialog/ButtonWithConfirmDialog.tsx

@@ -1,7 +1,8 @@
-import type {FormatBytesArgs} from '../../utils/bytesParsers';
+import type {BytesSizes} from '../../utils/bytesParsers';
 import {formatBytes} from '../../utils/bytesParsers';
+import type {FormatValuesArgs} from '../../utils/dataFormatters/common';
 
-type FormattedBytesProps = FormatBytesArgs;
+type FormattedBytesProps = FormatValuesArgs<BytesSizes>;
 
 export const FormattedBytes = ({value, withSpeedLabel, ...params}: FormattedBytesProps) => {
     const formatted = formatBytes({value, withSpeedLabel, ...params});

src/components/FormattedBytes/FormattedBytes.tsx

@@ -1,10 +1,11 @@
-import type {FormatBytesArgs} from '../../utils/bytesParsers';
+import type {BytesSizes} from '../../utils/bytesParsers';
+import type {FormatValuesArgs} from '../../utils/dataFormatters/common';
 
 import {FormattedBytes} from './FormattedBytes';
 
 export const toFormattedSize = (
     value: number | string | undefined,
-    params?: Omit<FormatBytesArgs, 'value'>,
+    params?: Omit<FormatValuesArgs<BytesSizes>, 'value'>,
 ) => {
     if (!value) {
         return null;

src/components/FormattedBytes/utils.tsx

@@ -29,6 +29,10 @@
         position: relative;
         z-index: 1;
 
+        // Performance optimization for row hovering.
+        // it actually works.
+        transform: translateZ(0);
+
         &:hover {
             background: var(--paginated-table-hover-color);
         }
@@ -177,6 +181,6 @@
     }
 
     &__row-skeleton::after {
-        animation-delay: 200ms;
+        animation: none !important;
     }
 }

src/components/PaginatedTable/PaginatedTable.scss

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import {getArray} from '../../utils';
 import {TableWithControlsLayout} from '../TableWithControlsLayout/TableWithControlsLayout';
 
 import {TableChunk} from './TableChunk';
@@ -32,7 +31,7 @@ export interface PaginatedTableProps<T, F> {
     columns: Column<T>[];
     getRowClassName?: GetRowClassName<T>;
     rowHeight?: number;
-    parentRef?: React.RefObject<HTMLElement>;
+    parentRef: React.RefObject<HTMLElement>;
     initialSortParams?: SortParams;
     onColumnsResize?: HandleTableColumnsResize;
     renderControls?: RenderControls;
@@ -42,7 +41,7 @@ export interface PaginatedTableProps<T, F> {
 }
 
 export const PaginatedTable = <T, F>({
-    limit,
+    limit: chunkSize,
     initialEntitiesCount,
     fetchData,
     filters,
@@ -58,8 +57,8 @@ export const PaginatedTable = <T, F>({
     renderEmptyDataMessage,
     containerClassName,
 }: PaginatedTableProps<T, F>) => {
-    const initialTotal = initialEntitiesCount || limit;
-    const initialFound = initialEntitiesCount || 0;
+    const initialTotal = initialEntitiesCount || 0;
+    const initialFound = initialEntitiesCount || 1;
 
     const [sortParams, setSortParams] = React.useState<SortParams | undefined>(initialSortParams);
     const [totalEntities, setTotalEntities] = React.useState(initialTotal);
@@ -69,12 +68,18 @@ export const PaginatedTable = <T, F>({
     const tableRef = React.useRef<HTMLDivElement>(null);
 
     const activeChunks = useScrollBasedChunks({
-        containerRef: parentRef ?? tableRef,
+        parentRef,
+        tableRef,
         totalItems: foundEntities,
-        itemHeight: rowHeight,
-        chunkSize: limit,
+        rowHeight,
+        chunkSize,
     });
 
+    const lastChunkSize = React.useMemo(
+        () => foundEntities % chunkSize || chunkSize,
+        [foundEntities, chunkSize],
+    );
+
     const handleDataFetched = React.useCallback((total: number, found: number) => {
         setTotalEntities(total);
         setFoundEntities(found);
@@ -88,10 +93,8 @@ export const PaginatedTable = <T, F>({
         setIsInitialLoad(true);
         if (parentRef?.current) {
             parentRef.current.scrollTo(0, 0);
-        } else {
-            tableRef.current?.scrollTo(0, 0);
         }
-    }, [filters, initialFound, initialTotal, limit, parentRef]);
+    }, [filters, initialFound, initialTotal, parentRef]);
 
     const renderChunks = () => {
         if (!isInitialLoad && foundEntities === 0) {
@@ -104,15 +107,12 @@ export const PaginatedTable = <T, F>({
             );
         }
 
-        const totalLength = foundEntities || limit;
-        const chunksCount = Math.ceil(totalLength / limit);
-
-        return getArray(chunksCount).map((value) => (
+        return activeChunks.map((isActive, index) => (
             <TableChunk<T, F>
-                key={value}
-                id={value}
-                limit={limit}
-                totalLength={totalLength}
+                key={index}
+                id={index}
+                calculatedCount={index === activeChunks.length - 1 ? lastChunkSize : chunkSize}
+                chunkSize={chunkSize}
                 rowHeight={rowHeight}
                 columns={columns}
                 fetchData={fetchData}
@@ -122,7 +122,7 @@ export const PaginatedTable = <T, F>({
                 getRowClassName={getRowClassName}
                 renderErrorMessage={renderErrorMessage}
                 onDataFetched={handleDataFetched}
-                isActive={activeChunks.includes(value)}
+                isActive={isActive}
             />
         ));
     };

src/components/PaginatedTable/PaginatedTable.tsx

@@ -8,14 +8,15 @@ import {ResponseError} from '../Errors/ResponseError';
 
 import {EmptyTableRow, LoadingTableRow, TableRow} from './TableRow';
 import type {Column, FetchData, GetRowClassName, SortParams} from './types';
+import {typedMemo} from './utils';
 
 const DEBOUNCE_TIMEOUT = 200;
 
 interface TableChunkProps<T, F> {
     id: number;
-    limit: number;
-    totalLength: number;
+    chunkSize: number;
     rowHeight: number;
+    calculatedCount: number;
     columns: Column<T>[];
     filters?: F;
     sortParams?: SortParams;
@@ -29,10 +30,10 @@ interface TableChunkProps<T, F> {
 }
 
 // Memoisation prevents chunks rerenders that could cause perfomance issues on big tables
-export const TableChunk = <T, F>({
+export const TableChunk = typedMemo(function TableChunk<T, F>({
     id,
-    limit,
-    totalLength,
+    chunkSize,
+    calculatedCount,
     rowHeight,
     columns,
     fetchData,
@@ -43,15 +44,15 @@ export const TableChunk = <T, F>({
     renderErrorMessage,
     onDataFetched,
     isActive,
-}: TableChunkProps<T, F>) => {
+}: TableChunkProps<T, F>) {
     const [isTimeoutActive, setIsTimeoutActive] = React.useState(true);
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
     const columnsIds = columns.map((column) => column.name);
 
     const queryParams = {
-        offset: id * limit,
-        limit,
+        offset: id * chunkSize,
+        limit: chunkSize,
         fetchData: fetchData as FetchData<T, unknown>,
         filters,
         sortParams,
@@ -87,11 +88,7 @@ export const TableChunk = <T, F>({
         }
     }, [currentData, isActive, onDataFetched]);
 
-    const chunkOffset = id * limit;
-    const remainingLength = totalLength - chunkOffset;
-    const calculatedChunkLength = remainingLength < limit ? remainingLength : limit;
-
-    const dataLength = currentData?.data?.length || calculatedChunkLength;
+    const dataLength = currentData?.data?.length || calculatedCount;
 
     const renderContent = () => {
         if (!isActive) {
@@ -134,13 +131,11 @@ export const TableChunk = <T, F>({
         ));
     };
 
-    const chunkHeight = dataLength ? dataLength * rowHeight : limit * rowHeight;
-
     return (
         <tbody
             id={id.toString()}
             style={{
-                height: `${chunkHeight}px`,
+                height: `${dataLength * rowHeight}px`,
                 // Default display: table-row-group doesn't work in Safari and breaks the table
                 // display: block works in Safari, but disconnects thead and tbody cell grids
                 // Hack to make it work in all cases
@@ -150,4 +145,4 @@ export const TableChunk = <T, F>({
             {renderContent()}
         </tbody>
     );
-};
+});

src/components/PaginatedTable/TableChunk.tsx

@@ -13,6 +13,6 @@ export const DEFAULT_SORT_ORDER = DESCENDING;
 // Time in ms after which request will be sent
 export const DEFAULT_REQUEST_TIMEOUT = 200;
 
-export const DEFAULT_TABLE_ROW_HEIGHT = 40;
+export const DEFAULT_TABLE_ROW_HEIGHT = 41;
 
 export const DEFAULT_INTERSECTION_OBSERVER_MARGIN = '100%';