ydb-embedded-ui 21.1.0 → 22.1.0

package/src/components/ResizeableDataTable/DataTableKeyboardNavigation.tsx

@@ -0,0 +1,194 @@
+import React from 'react';
+
+import type DataTable from '@gravity-ui/react-data-table';
+import type {Column, DynamicInnerRefT, Settings, SortOrder} from '@gravity-ui/react-data-table';
+
+import {cn} from '../../utils/cn';
+import {useTableKeyboardAdapter} from '../TableKeyboardNavigation/TableKeyboardNavigation';
+import {KEYBOARD_FOCUSED_ROW_CLASS_NAME} from '../TableKeyboardNavigation/utils';
+
+import {getDataTableOrder} from './getDataTableOrder';
+
+const b = cn('ydb-list-keyboard-navigation');
+
+interface Props<T> {
+    data: T[];
+    columns: Column<T>[];
+    settings?: Settings;
+    nullBeforeNumbers?: boolean;
+    onActivate?: (row: T) => void;
+    getRowKey?: (row: T) => string | number | undefined;
+    getRowLabel?: (row: T) => string | undefined;
+    sortOrder?: SortOrder | SortOrder[];
+    children: (options: {
+        tableRef: React.RefCallback<HTMLDivElement>;
+        onTableReady: React.Ref<DataTable<T>>;
+        onMouseMove: React.MouseEventHandler<HTMLElement>;
+        dynamicInnerRef: React.Ref<DynamicInnerRefT>;
+        getRowClassName: (index: number) => string;
+        active: boolean;
+        onSort: (order: SortOrder | SortOrder[] | undefined) => void;
+    }) => React.ReactNode;
+}
+
+export function DataTableKeyboardNavigation<T>({
+    data,
+    columns,
+    settings,
+    nullBeforeNumbers,
+    onActivate,
+    getRowKey,
+    getRowLabel,
+    sortOrder,
+    children,
+}: Props<T>) {
+    const tableRef = React.useRef<HTMLDivElement>(null);
+    const [internalSort, setInternalSort] = React.useState<SortOrder | SortOrder[]>();
+    const [table, setTable] = React.useState<DataTable<T> | null>(null);
+    const [order, setOrder] = React.useState<{data: T[]; indices: number[]}>({data, indices: []});
+    const {indices} = order;
+    const virtualList = React.useRef<DynamicInnerRefT | null>(null);
+    const dynamicInnerRef = React.useCallback(
+        (value: DynamicInnerRefT | null) => {
+            virtualList.current = value;
+            const consumerRef = settings?.dynamicInnerRef;
+            if (typeof consumerRef === 'function') {
+                consumerRef(value);
+            } else if (consumerRef) {
+                (consumerRef as React.MutableRefObject<DynamicInnerRefT | null>).current = value;
+            }
+        },
+        [settings?.dynamicInnerRef],
+    );
+    React.useLayoutEffect(() => {
+        if (!table) {
+            return;
+        }
+        const next = getDataTableOrder(table).filter((index) => index < data.length);
+        setOrder((previous) =>
+            previous.data === data &&
+            previous.indices.length === next.length &&
+            previous.indices.every((index, position) => index === next[position])
+                ? previous
+                : {data, indices: next},
+        );
+    }, [table, data, columns, sortOrder, internalSort, settings, nullBeforeNumbers]);
+    const indexByKey = React.useMemo(() => {
+        const result = new Map<string | number, number>();
+        order.indices.forEach((sourceIndex, position) => {
+            const key = getRowKey?.(order.data[sourceIndex]);
+            if (key !== undefined) {
+                result.set(key, position);
+            }
+        });
+        return result;
+    }, [order, getRowKey]);
+    const keyboard = useTableKeyboardAdapter({
+        tableRef,
+        getFirst: () => (indices.length ? 0 : undefined),
+        getLast: () => (indices.length ? indices.length - 1 : undefined),
+        getNext: (index, step) => {
+            const next = index + step;
+            return next >= 0 && next < indices.length ? next : undefined;
+        },
+        activate: onActivate
+            ? (index) => {
+                  const row = order.data[indices[index]];
+                  if (row !== undefined) {
+                      onActivate(row);
+                  }
+              }
+            : undefined,
+        isValidIndex: (index) => index >= 0 && index < indices.length,
+        getRowKey: (index) => {
+            const row = order.data[indices[index]];
+            return row === undefined ? undefined : getRowKey?.(row);
+        },
+        findRowIndex: getRowKey ? (key) => indexByKey.get(key) : undefined,
+        getRowLabel: getRowLabel
+            ? (index) => {
+                  const row = order.data[indices[index]];
+                  return row === undefined ? undefined : getRowLabel(row);
+              }
+            : undefined,
+        resetDeps: [sortOrder, internalSort, getRowKey ? undefined : data],
+    });
+    const scrolledRevision = React.useRef(0);
+    React.useLayoutEffect(() => {
+        if (keyboard.scrollRevision === scrolledRevision.current) {
+            return undefined;
+        }
+        if (keyboard.selected === undefined) {
+            return undefined;
+        }
+        const sourceIndex = indices[keyboard.selected];
+        if (sourceIndex === undefined) {
+            return undefined;
+        }
+        virtualList.current?.scrollAround(keyboard.selected);
+        const revealRow = () => {
+            const rowClassName = b('row', {index: String(sourceIndex)});
+            const row = tableRef.current?.querySelector<HTMLElement>(
+                `tbody tr.${rowClassName.split(' ').join('.')}`,
+            );
+            if (!row) {
+                return false;
+            }
+            const positions: Array<{element: HTMLElement; left: number}> = [];
+            for (let element = row.parentElement; element; element = element.parentElement) {
+                positions.push({element, left: element.scrollLeft});
+            }
+            row.scrollIntoView({block: 'nearest', behavior: 'instant'});
+            const head = tableRef.current?.querySelector<HTMLElement>('.data-table__sticky_head');
+            const overlap = head
+                ? head.getBoundingClientRect().bottom - row.getBoundingClientRect().top
+                : 0;
+            if (overlap > 0) {
+                positions
+                    .find(
+                        ({element}) =>
+                            element.scrollHeight > element.clientHeight &&
+                            /auto|scroll/.test(getComputedStyle(element).overflowY),
+                    )
+                    ?.element.scrollBy({top: -overlap, behavior: 'instant'});
+            }
+            for (const {element, left} of positions) {
+                if (element.scrollLeft !== left) {
+                    element.scrollLeft = left;
+                }
+            }
+            scrolledRevision.current = keyboard.scrollRevision;
+            return true;
+        };
+        if (revealRow()) {
+            return undefined;
+        }
+        const container = tableRef.current;
+        if (!container) {
+            return undefined;
+        }
+        const observer = new MutationObserver(() => {
+            if (revealRow()) {
+                observer.disconnect();
+            }
+        });
+        observer.observe(container, {childList: true, subtree: true});
+        return () => observer.disconnect();
+    }, [keyboard.selected, keyboard.scrollRevision, indices]);
+    const focusedSourceIndex =
+        keyboard.focusedIndex === undefined ? undefined : indices[keyboard.focusedIndex];
+    return children({
+        tableRef: keyboard.ref,
+        onTableReady: setTable,
+        onMouseMove: keyboard.onMouseMove,
+        dynamicInnerRef,
+        active: keyboard.focusedIndex !== undefined,
+        getRowClassName: (index) =>
+            b(
+                'row',
+                {index: String(index)},
+                index === focusedSourceIndex ? KEYBOARD_FOCUSED_ROW_CLASS_NAME : undefined,
+            ),
+        onSort: setInternalSort,
+    });
+}

package/src/components/ResizeableDataTable/ResizeableDataTable.scss

@@ -1,6 +1,16 @@
 .ydb-resizeable-data-table {
     width: max-content;
 
+    .ydb-keyboard-focused-row {
+        background: var(--g-color-base-simple-hover-solid);
+    }
+
+    &.ydb-keyboard-focus-active {
+        .data-table__row:hover:not(.ydb-keyboard-focused-row) {
+            background: transparent !important;
+        }
+    }
+
     &_reserve-resize-padding {
         // padding for easier resize of the last column
         padding-right: var(--g-spacing-5);

package/src/components/ResizeableDataTable/ResizeableDataTable.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 
-import type {Column, DataTableProps, SortOrder} from '@gravity-ui/react-data-table';
+import type {Column, DataTableProps, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import DataTable, {updateColumnsWidth} from '@gravity-ui/react-data-table';
 import {Skeleton} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {useTableResize} from '../../utils/hooks/useTableResize';
+import {useTableNavigationEnabled} from '../TableKeyboardNavigation/TableKeyboardNavigation';
+import {KEYBOARD_FOCUS_ACTIVE_CLASS_NAME} from '../TableKeyboardNavigation/utils';
 import {TableSkeleton} from '../TableSkeleton/TableSkeleton';
 
+import {DataTableKeyboardNavigation} from './DataTableKeyboardNavigation';
+
 import './ResizeableDataTable.scss';
 
 const b = cn('ydb-resizeable-data-table');
@@ -16,6 +20,9 @@ export interface ResizeableDataTableProps<T> extends Omit<DataTableProps<T>, 'th
     columnsWidthLSKey?: string;
     reserveResizePadding?: boolean;
     wrapperClassName?: string;
+    onKeyboardActivate?: (row: T) => void;
+    getKeyboardRowKey?: (row: T) => string | number | undefined;
+    getKeyboardRowLabel?: (row: T) => string | undefined;
 
     /**
      * Not enough meta data (settings, sizes, features, etc.) to properly render table columns
@@ -33,6 +40,80 @@ export interface ResizeableDataTableProps<T> extends Omit<DataTableProps<T>, 'th
 }
 
 export function ResizeableDataTable<T>({
+    onKeyboardActivate,
+    getKeyboardRowKey,
+    getKeyboardRowLabel,
+    rowClassName,
+    wrapperClassName,
+    onSortChange,
+    ...props
+}: ResizeableDataTableProps<T>) {
+    const enabled = useTableNavigationEnabled();
+    if (!enabled) {
+        return (
+            <ResizeableDataTableContent
+                {...props}
+                rowClassName={rowClassName}
+                wrapperClassName={wrapperClassName}
+                onSortChange={onSortChange}
+            />
+        );
+    }
+    return (
+        <DataTableKeyboardNavigation
+            data={props.data}
+            columns={props.columns}
+            settings={props.settings}
+            nullBeforeNumbers={props.nullBeforeNumbers}
+            onActivate={onKeyboardActivate}
+            getRowKey={getKeyboardRowKey}
+            getRowLabel={getKeyboardRowLabel}
+            sortOrder={props.sortOrder}
+        >
+            {({
+                getRowClassName,
+                active,
+                onSort,
+                tableRef,
+                onTableReady,
+                onMouseMove,
+                dynamicInnerRef,
+            }) => (
+                <ResizeableDataTableContent
+                    {...props}
+                    containerRef={tableRef}
+                    onTableReady={onTableReady}
+                    onMouseMove={onMouseMove}
+                    dynamicInnerRef={dynamicInnerRef}
+                    rowClassName={(row, index, isFooter, isHeader) =>
+                        [
+                            rowClassName?.(row, index, isFooter, isHeader),
+                            !isFooter && !isHeader ? getRowClassName(index) : undefined,
+                        ]
+                            .filter(Boolean)
+                            .join(' ')
+                    }
+                    wrapperClassName={[
+                        wrapperClassName,
+                        active ? KEYBOARD_FOCUS_ACTIVE_CLASS_NAME : undefined,
+                    ]
+                        .filter(Boolean)
+                        .join(' ')}
+                    onSortChange={(order) => {
+                        onSort(order);
+                        onSortChange?.(order);
+                    }}
+                />
+            )}
+        </DataTableKeyboardNavigation>
+    );
+}
+
+function ResizeableDataTableContent<T>({
+    containerRef,
+    onTableReady,
+    onMouseMove,
+    dynamicInnerRef,
     columnsWidthLSKey,
     columns,
     settings,
@@ -45,7 +126,12 @@ export function ResizeableDataTable<T>({
     onSortChange,
     data,
     ...props
-}: ResizeableDataTableProps<T>) {
+}: ResizeableDataTableProps<T> & {
+    containerRef?: React.Ref<HTMLDivElement>;
+    onTableReady?: React.Ref<DataTable<T>>;
+    onMouseMove?: React.MouseEventHandler<HTMLElement>;
+    dynamicInnerRef?: Settings['dynamicInnerRef'];
+}) {
     const [tableColumnsWidth, setTableColumnsWidth, isTableWidthLoading] =
         useTableResize(columnsWidthLSKey);
 
@@ -68,7 +154,10 @@ export function ResizeableDataTable<T>({
         return columns;
     }, [isFetching, columns]);
 
-    const updatedColumns = updateColumnsWidth(processedColumns, tableColumnsWidth);
+    const updatedColumns = React.useMemo(
+        () => updateColumnsWidth(processedColumns, tableColumnsWidth),
+        [processedColumns, tableColumnsWidth],
+    );
 
     const processedData = React.useMemo(() => {
         if (isFetching && !data?.length) {
@@ -81,17 +170,23 @@ export function ResizeableDataTable<T>({
     const newSettings = React.useMemo(() => {
         return {
             ...settings,
+            ...(dynamicInnerRef ? {dynamicInnerRef} : {}),
             defaultResizeable: true,
         };
-    }, [settings]);
+    }, [settings, dynamicInnerRef]);
 
     if (isLoading || isTableWidthLoading) {
         return <TableSkeleton rows={loadingSkeletonRowsCount} />;
     }
 
     return (
-        <div className={b({'reserve-resize-padding': reserveResizePadding}, wrapperClassName)}>
+        <div
+            ref={containerRef}
+            onMouseMoveCapture={onMouseMove}
+            className={b({'reserve-resize-padding': reserveResizePadding}, wrapperClassName)}
+        >
             <DataTable
+                ref={onTableReady}
                 theme="yandex-cloud"
                 columns={updatedColumns}
                 onResize={setTableColumnsWidth}

package/src/components/ResizeableDataTable/getDataTableOrder.ts

@@ -0,0 +1,18 @@
+import type DataTable from '@gravity-ui/react-data-table';
+import {getSortedData} from '@gravity-ui/react-data-table/build/esm/lib/util';
+
+export function getDataTableOrder<T>(table: DataTable<T>) {
+    const view = table.table;
+    if (!view) {
+        return [];
+    }
+    return getSortedData(
+        view.props.data,
+        view.getComplexColumns(view.props.columns).dataColumns,
+        view.state,
+        {
+            nullBeforeNumbers: view.props.nullBeforeNumbers,
+            externalSort: view.state.settings.externalSort,
+        },
+    ).map(({index}) => index);
+}

package/src/components/Search/Search.tsx

@@ -4,6 +4,7 @@ import type {TextInputProps} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {DebouncedTextInput} from '../DebouncedInput/DebouncedTextInput';
+import {useTableSearch} from '../TableKeyboardNavigation/TableKeyboardNavigation';
 
 import './Search.scss';
 
@@ -15,6 +16,7 @@ interface SearchProps extends Omit<TextInputProps, 'onUpdate' | 'onChange'> {
     width?: React.CSSProperties['width'];
     debounce?: number;
     inputRef?: React.RefObject<HTMLInputElement>;
+    tableFilter?: boolean;
 }
 
 export const Search = ({
@@ -24,8 +26,13 @@ export const Search = ({
     className,
     debounce,
     inputRef,
+    tableFilter = false,
     ...props
 }: SearchProps) => {
+    const ownRef = React.useRef<HTMLInputElement>(null);
+    const controlRef = inputRef ?? ownRef;
+    useTableSearch(controlRef, tableFilter, value);
+
     const onUpdate = React.useCallback(
         (newValue: string) => {
             onChange(newValue);
@@ -38,7 +45,7 @@ export const Search = ({
             debounce={debounce}
             hasClear
             autoFocus
-            controlRef={inputRef}
+            controlRef={controlRef}
             style={{width}}
             className={b(null, className)}
             value={value}

package/src/components/SegmentedProgress/SegmentedProgress.scss

@@ -35,6 +35,11 @@
 
         border-radius: var(--g-border-radius-xs);
         background-color: var(--ydb-segmented-progress-empty-color);
+
+        &:focus-visible {
+            outline: 2px solid var(--g-color-line-focus);
+            outline-offset: -2px;
+        }
     }
 
     &__section:not(&__section_used) {

package/src/components/SegmentedProgress/SegmentedProgress.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Flex, Text} from '@gravity-ui/uikit';
+import {Flex, Text, Tooltip} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 
@@ -28,6 +28,7 @@ interface SegmentedProgressByValueProps extends SegmentedProgressBaseProps {
     total: number;
     fillPercent?: never;
     displayNoLimit?: DisplayNoLimit;
+    segments?: never;
 }
 
 interface SegmentedProgressByFillPercentProps extends SegmentedProgressBaseProps {
@@ -35,11 +36,33 @@ interface SegmentedProgressByFillPercentProps extends SegmentedProgressBaseProps
     value?: never;
     total?: never;
     displayNoLimit?: never;
+    segments?: never;
+}
+
+export interface SegmentedProgressSegment {
+    id: string;
+    value: number;
+    /** Minimum width in pixels. A positive value keeps zero-value segments visible. */
+    minWidth?: number;
+    color?: string;
+    className?: string;
+    dataQa?: string;
+    tooltip?: string;
+    ariaLabelledBy?: string;
+}
+
+interface SegmentedProgressBySegmentsProps extends SegmentedProgressBaseProps {
+    segments: SegmentedProgressSegment[];
+    total: number;
+    value?: never;
+    fillPercent?: never;
+    displayNoLimit?: never;
 }
 
 export type SegmentedProgressProps =
     | SegmentedProgressByValueProps
-    | SegmentedProgressByFillPercentProps;
+    | SegmentedProgressByFillPercentProps
+    | SegmentedProgressBySegmentsProps;
 
 function clampPercent(percent: number) {
     if (!Number.isFinite(percent) || percent <= 0) {
@@ -51,7 +74,7 @@ function clampPercent(percent: number) {
     return percent;
 }
 
-function defaultNormalizePercent(percent: number) {
+export function defaultNormalizePercent(percent: number) {
     if (percent < 1) {
         return Math.round(percent * 10) / 10;
     }
@@ -64,11 +87,25 @@ function isFillPercentMode(
     return typeof props.fillPercent === 'number';
 }
 
+function isSegmentsMode(props: SegmentedProgressProps): props is SegmentedProgressBySegmentsProps {
+    return Array.isArray(props.segments);
+}
+
 function getPercentUsed(props: SegmentedProgressProps) {
     if (isFillPercentMode(props)) {
         return props.fillPercent;
     }
 
+    if (isSegmentsMode(props)) {
+        if (props.total > 0) {
+            const value = props.segments.reduce((sum, segment) => sum + segment.value, 0);
+
+            return (value / props.total) * 100;
+        }
+
+        return 0;
+    }
+
     if (props.total > 0) {
         return (props.value / props.total) * 100;
     }
@@ -110,9 +147,57 @@ export function SegmentedProgress(props: SegmentedProgressProps) {
         [normalizePercent, percentUsed],
     );
     const fillWidth = getFillWidth(props, normalizedUsed);
-
-    return (
-        <Flex direction="column" gap={1}>
+    const segmentSections = isSegmentsMode(props)
+        ? props.segments.map((segment) => ({
+              ...segment,
+              width: props.total > 0 ? clampPercent((segment.value / props.total) * 100) : 0,
+          }))
+        : undefined;
+    const hasEmptySection = (segmentSections ? percentUsed : fillWidth) < 100;
+
+    const renderSections = () => {
+        if (segmentSections) {
+            return segmentSections
+                .filter((segment) => segment.width > 0 || (segment.minWidth ?? 0) > 0)
+                .map((segment) => {
+                    const section = (
+                        <div
+                            key={segment.id}
+                            aria-label={segment.tooltip}
+                            aria-labelledby={segment.ariaLabelledBy}
+                            className={b('section', {used: true}, segment.className)}
+                            data-qa={segment.dataQa}
+                            role={segment.tooltip ? 'img' : undefined}
+                            style={{
+                                width: `${segment.width}%`,
+                                minWidth: segment.minWidth,
+                                backgroundColor: segment.color,
+                            }}
+                            tabIndex={segment.tooltip ? 0 : undefined}
+                        />
+                    );
+
+                    if (!segment.tooltip) {
+                        return section;
+                    }
+
+                    return (
+                        <Tooltip key={segment.id} content={segment.tooltip}>
+                            {section}
+                        </Tooltip>
+                    );
+                });
+        }
+
+        if (fillWidth > 0) {
+            return <div className={b('section', {used: true})} style={{width: `${fillWidth}%`}} />;
+        }
+
+        return null;
+    };
+
+    const renderProgress = () => {
+        return (
             <div
                 className={b({theme}, className)}
                 data-qa={dataQa}
@@ -122,11 +207,15 @@ export function SegmentedProgress(props: SegmentedProgressProps) {
                 aria-valuemax={100}
                 aria-valuenow={normalizedUsed}
             >
-                {fillWidth > 0 && (
-                    <div className={b('section', {used: true})} style={{width: `${fillWidth}%`}} />
-                )}
-                {100 - fillWidth > 0 && <div className={b('section')} style={{flexGrow: 1}} />}
+                {renderSections()}
+                {hasEmptySection && <div className={b('section')} style={{flexGrow: 1}} />}
             </div>
+        );
+    };
+
+    return (
+        <Flex direction="column" gap={1}>
+            {renderProgress()}
             {!hideLabels && (
                 <Flex width="100%">
                     {labelStart && <Text color="secondary">{labelStart}</Text>}

package/src/components/ShardsTable/columns.tsx

@@ -1,4 +1,5 @@
 import DataTable from '@gravity-ui/react-data-table';
+import {Flex, Text} from '@gravity-ui/uikit';
 
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {formatNumber, roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
@@ -53,14 +54,22 @@ export const getTabletIdColumn: GetShardsColumn = () => {
             if (!row.TabletId) {
                 return EMPTY_DATA_PLACEHOLDER;
             }
+            const followerId = Number(row.FollowerId);
+            const isFollower = followerId > 0;
+
             return (
-                <TabletNameWrapper
-                    tabletId={row.TabletId}
-                    followerId={row.FollowerId || undefined}
-                />
+                <Flex alignItems="center" gap={2}>
+                    <Flex minWidth={0}>
+                        <TabletNameWrapper
+                            tabletId={row.TabletId}
+                            followerId={isFollower ? followerId : undefined}
+                        />
+                    </Flex>
+                    {isFollower ? <Text color="secondary">{i18n('value_follower')}</Text> : null}
+                </Flex>
             );
         },
-        width: 220,
+        width: 280,
     };
 };
 export const getNodeIdColumn: GetShardsColumn = () => {

package/src/components/ShardsTable/i18n/en.json

@@ -1,5 +1,6 @@
 {
   "tablet-id": "TabletId",
+  "value_follower": "follower",
   "cpu-cores": "CPUCores",
   "data-size": "DataSize (B)",
   "context_data-size": "The total data size in bytes for a single table shard",

package/src/components/StorageGroupInfo/StorageGroupInfo.tsx

@@ -43,7 +43,6 @@ export function StorageGroupInfo({data, className, ...infoViewerProps}: StorageG
         Read,
         Write,
         GroupGeneration,
-        Latency,
         AllocationUnits,
         State,
         MissingDisks,
@@ -140,12 +139,6 @@ export function StorageGroupInfo({data, className, ...infoViewerProps}: StorageG
             });
         }
         runtimeInfo.push(...toInfoViewerItems(getStorageGroupCapacityInfoItems(data)));
-        if (valueIsDefined(Latency)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('latency'),
-                value: <StatusIcon status={Latency} />,
-            });
-        }
         if (valueIsDefined(LatencyPutTabletLogMs)) {
             runtimeInfo.push({
                 label: storageGroupInfoKeyset('latency-put-tablet-log'),
@@ -258,12 +251,6 @@ export function StorageGroupInfo({data, className, ...infoViewerProps}: StorageG
             value: <StatusIcon status={DiskSpace} />,
         });
     }
-    if (valueIsDefined(Latency)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('latency'),
-            value: <StatusIcon status={Latency} />,
-        });
-    }
     if (valueIsDefined(LatencyPutTabletLogMs)) {
         storageGroupInfoSecondColumn.push({
             label: storageGroupInfoKeyset('latency-put-tablet-log'),