feat(TopicData): add tab for topic data (#2145)

Author: Raubzeug

src/components/DebouncedInput/DebouncedTextInput.tsx

@@ -0,0 +1,19 @@
+import type {TextInputProps} from '@gravity-ui/uikit';
+import {TextInput} from '@gravity-ui/uikit';
+
+import {useDebouncedValue} from '../../utils/hooks/useDebouncedValue';
+
+interface DebouncedInputProps extends TextInputProps {
+    debounce?: number;
+}
+
+export const DebouncedInput = ({
+    onUpdate,
+    value = '',
+    debounce = 200,
+    ...rest
+}: DebouncedInputProps) => {
+    const [currentValue, handleUpdate] = useDebouncedValue<string>({value, onUpdate, debounce});
+
+    return <TextInput value={currentValue} onUpdate={handleUpdate} {...rest} />;
+};

src/components/EmptyState/EmptyState.scss

@@ -28,6 +28,9 @@
 
             margin: 0 auto;
         }
+        &_position_left {
+            margin: unset;
+        }
     }
 
     &__image {

src/components/MetricChart/getDefaultDataFormatter.ts

@@ -2,7 +2,7 @@ import {formatBytes} from '../../utils/bytesParsers';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
 import {formatToMs} from '../../utils/timeParsers';
-import {isNumeric} from '../../utils/utils';
+import {safeParseNumber} from '../../utils/utils';
 
 import type {ChartDataType, ChartValue} from './types';
 
@@ -28,27 +28,18 @@ function formatChartValueToMs(value: ChartValue) {
     if (value === null) {
         return EMPTY_DATA_PLACEHOLDER;
     }
-    return formatToMs(roundToPrecision(convertToNumber(value), 2));
+    return formatToMs(roundToPrecision(safeParseNumber(value), 2));
 }
 
 function formatChartValueToSize(value: ChartValue) {
     if (value === null) {
         return EMPTY_DATA_PLACEHOLDER;
     }
-    return formatBytes({value: convertToNumber(value), precision: 3});
+    return formatBytes({value: safeParseNumber(value), precision: 3});
 }
 function formatChartValueToPercent(value: ChartValue) {
     if (value === null) {
         return EMPTY_DATA_PLACEHOLDER;
     }
-    return Math.round(convertToNumber(value) * 100) + '%';
-}
-
-// Numeric values expected, not numeric value should be displayd as 0
-function convertToNumber(value: unknown): number {
-    if (isNumeric(value)) {
-        return Number(value);
-    }
-
-    return 0;
+    return Math.round(safeParseNumber(value) * 100) + '%';
 }

src/components/MultilineTableHeader/MultilineTableHeader.scss

@@ -0,0 +1,3 @@
+.ydb-multiline-table-header {
+    white-space: normal;
+}

src/components/MultilineTableHeader/MultilineTableHeader.tsx

@@ -0,0 +1,16 @@
+import {cn} from '../../utils/cn';
+
+import './MultilineTableHeader.scss';
+
+const b = cn('ydb-multiline-table-header');
+
+interface MultilineTableHeaderProps {
+    title?: string;
+}
+
+export function MultilineTableHeader({title}: MultilineTableHeaderProps) {
+    if (!title) {
+        return null;
+    }
+    return <div className={b()}>{title}</div>;
+}

src/components/PaginatedTable/PaginatedTable.scss

@@ -79,50 +79,69 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        gap: var(--g-spacing-2);
 
         width: 100%;
         max-width: 100%;
         padding: var(--paginated-table-cell-vertical-padding)
             var(--paginated-table-cell-horizontal-padding);
 
+        font-weight: bold;
+        cursor: default;
         &_align {
             &_left {
                 justify-content: left;
+
+                text-align: left;
             }
             &_center {
                 justify-content: center;
+
+                text-align: center;
             }
             &_right {
                 justify-content: right;
+
+                text-align: right;
+
+                #{$block}__head-cell-content-container {
+                    flex-direction: row-reverse;
+                }
             }
         }
     }
 
-    &__head-cell {
-        gap: 8px;
-
-        font-weight: bold;
-        cursor: default;
-
-        &_sortable {
-            cursor: pointer;
+    &__head-cell_sortable {
+        cursor: pointer;
 
-            &#{$block}__head-cell_align_right {
-                flex-direction: row-reverse;
-            }
+        &#{$block}__head-cell_align_right {
+            flex-direction: row-reverse;
         }
     }
 
+    &__head-cell-note {
+        display: flex;
+    }
+
     // Separate head cell content class for correct text ellipsis overflow
     &__head-cell-content {
         overflow: hidden;
 
-        width: min-content;
-
         white-space: nowrap;
         text-overflow: ellipsis;
     }
 
+    &__head-cell-content-container {
+        display: inline-flex;
+        overflow: hidden;
+        gap: var(--g-spacing-1);
+
+        .g-help-mark__button {
+            display: inline-flex;
+            align-items: center;
+        }
+    }
+
     &__row-cell {
         display: table-cell;
         overflow-x: hidden;

src/components/PaginatedTable/PaginatedTable.tsx

@@ -38,6 +38,7 @@ export interface PaginatedTableProps<T, F> {
     renderErrorMessage?: RenderErrorMessage;
     containerClassName?: string;
     onDataFetched?: (data: PaginatedTableData<T>) => void;
+    keepCache?: boolean;
 }
 
 const DEFAULT_PAGINATION_LIMIT = 20;
@@ -46,7 +47,7 @@ export const PaginatedTable = <T, F>({
     limit: chunkSize = DEFAULT_PAGINATION_LIMIT,
     initialEntitiesCount,
     fetchData,
-    filters,
+    filters: rawFilters,
     tableName,
     columns,
     getRowClassName,
@@ -59,6 +60,7 @@ export const PaginatedTable = <T, F>({
     renderEmptyDataMessage,
     containerClassName,
     onDataFetched,
+    keepCache = true,
 }: PaginatedTableProps<T, F>) => {
     const initialTotal = initialEntitiesCount || 0;
     const initialFound = initialEntitiesCount || 1;
@@ -78,6 +80,13 @@ export const PaginatedTable = <T, F>({
         chunkSize,
     });
 
+    // this prevent situation when filters are new, but active chunks is not yet recalculated (it will be done to the next rendrer, so we bring filters change on the next render too)
+    const [filters, setFilters] = React.useState(rawFilters);
+
+    React.useEffect(() => {
+        setFilters(rawFilters);
+    }, [rawFilters]);
+
     const lastChunkSize = React.useMemo(() => {
         // If foundEntities = 0, there will only first chunk
         // Display it with 1 row, to display empty data message
@@ -107,7 +116,7 @@ export const PaginatedTable = <T, F>({
         if (parentRef?.current) {
             parentRef.current.scrollTo(0, 0);
         }
-    }, [filters, initialFound, initialTotal, parentRef]);
+    }, [rawFilters, initialFound, initialTotal, parentRef]);
 
     const renderChunks = () => {
         return activeChunks.map((isActive, index) => (
@@ -127,6 +136,7 @@ export const PaginatedTable = <T, F>({
                 renderEmptyDataMessage={renderEmptyDataMessage}
                 onDataFetched={handleDataFetched}
                 isActive={isActive}
+                keepCache={keepCache}
             />
         ));
     };

src/components/PaginatedTable/TableChunk.tsx

@@ -37,6 +37,8 @@ interface TableChunkProps<T, F> {
     renderErrorMessage?: RenderErrorMessage;
     renderEmptyDataMessage?: RenderEmptyDataMessage;
     onDataFetched: (data?: PaginatedTableData<T>) => void;
+
+    keepCache?: boolean;
 }
 
 // Memoisation prevents chunks rerenders that could cause perfomance issues on big tables
@@ -55,6 +57,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     renderEmptyDataMessage,
     onDataFetched,
     isActive,
+    keepCache,
 }: TableChunkProps<T, F>) {
     const [isTimeoutActive, setIsTimeoutActive] = React.useState(true);
     const [autoRefreshInterval] = useAutoRefreshInterval();
@@ -74,6 +77,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     tableDataApi.useFetchTableChunkQuery(queryParams, {
         skip: isTimeoutActive || !isActive,
         pollingInterval: autoRefreshInterval,
+        refetchOnMountOrArgChange: !keepCache,
     });
 
     const {currentData, error} = tableDataApi.endpoints.fetchTableChunk.useQueryState(queryParams);

src/components/PaginatedTable/TableHead.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
 
+import type {HelpMarkProps} from '@gravity-ui/uikit';
+import {HelpMark} from '@gravity-ui/uikit';
+
 import {ResizeHandler} from './ResizeHandler';
 import {
     ASCENDING,
@@ -9,7 +12,14 @@ import {
     DESCENDING,
 } from './constants';
 import {b} from './shared';
-import type {Column, HandleTableColumnsResize, OnSort, SortOrderType, SortParams} from './types';
+import type {
+    AlignType,
+    Column,
+    HandleTableColumnsResize,
+    OnSort,
+    SortOrderType,
+    SortParams,
+} from './types';
 
 // Icon similar to original DataTable icons to keep the same tables across diferent pages and tabs
 const SortIcon = ({order}: {order?: SortOrderType}) => {
@@ -43,6 +53,12 @@ const ColumnSortIcon = ({sortOrder, sortable, defaultSortOrder}: ColumnSortIconP
     }
 };
 
+const columnAlignToHelpMarkPlacement: Record<AlignType, Required<HelpMarkProps['placement']>> = {
+    left: 'right',
+    right: 'left',
+    center: 'right',
+};
+
 interface TableHeadCellProps<T> {
     column: Column<T>;
     resizeable?: boolean;
@@ -115,7 +131,17 @@ export const TableHeadCell = <T,>({
                     }
                 }}
             >
-                <div className={b('head-cell-content')}>{content}</div>
+                <div className={b('head-cell-content-container')}>
+                    <div className={b('head-cell-content')}>{content}</div>
+                    {column.note && (
+                        <HelpMark
+                            placement={columnAlignToHelpMarkPlacement[column.align]}
+                            className={b('head-cell-note')}
+                        >
+                            {column.note}
+                        </HelpMark>
+                    )}
+                </div>
                 <ColumnSortIcon
                     sortOrder={sortOrder}
                     sortable={column.sortable}

src/components/PaginatedTable/types.ts

@@ -25,6 +25,7 @@ export type HandleTableColumnsResize = (columnId: string, width: number) => void
 
 export interface Column<T> {
     name: string;
+    note?: string;
     header?: React.ReactNode;
     className?: string;
     sortable?: boolean;