ydb-embedded-ui 3.3.3 → 3.4.0

package/dist/containers/Tenant/Diagnostics/Partitions/columns/columns.tsx

@@ -0,0 +1,246 @@
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+import block from 'bem-cn-lite';
+
+import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
+import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
+import {getDefaultNodePath} from '../../../../Node/NodePages';
+import {formatBytes, formatMsToUptime} from '../../../../../utils';
+import {isNumeric} from '../../../../../utils/utils';
+
+import {
+    PARTITIONS_COLUMNS_IDS,
+    PARTITIONS_COLUMNS_TITILES,
+    PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS,
+    PARTITIONS_READ_LAGS_SUB_COLUMNS_TITLES,
+    PARTITIONS_WRITE_LAGS_SUB_COLUMNS_IDS,
+    PARTITIONS_WRITE_LAGS_SUB_COLUMNS_TITLES,
+} from '../utils/constants';
+import type {IPreparedPartitionDataWithHosts} from '../utils/types';
+
+import {
+    MultilineHeader,
+    ReadLagsHeader,
+    ReadSessionHeader,
+    UncommitedMessagesHeader,
+    UnreadMessagesHeader,
+    WriteLagsHeader,
+} from '../Headers';
+
+import './Columns.scss';
+
+const b = block('ydb-diagnostics-partitions-columns');
+
+export const columns: Column<IPreparedPartitionDataWithHosts>[] = [
+    {
+        name: PARTITIONS_COLUMNS_IDS.PARTITION_ID,
+        header: (
+            <MultilineHeader
+                title={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.PARTITION_ID]}
+            />
+        ),
+        sortAccessor: (row) => isNumeric(row.partitionId) && Number(row.partitionId),
+        align: DataTable.LEFT,
+        render: ({row}) => row.partitionId,
+    },
+    {
+        name: PARTITIONS_COLUMNS_IDS.STORE_SIZE,
+        header: (
+            <MultilineHeader
+                title={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.STORE_SIZE]}
+            />
+        ),
+        align: DataTable.RIGHT,
+        render: ({row}) => formatBytes(row.storeSize),
+    },
+    {
+        name: PARTITIONS_COLUMNS_IDS.WRITE_SPEED,
+        header: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_SPEED],
+        align: DataTable.LEFT,
+        sortAccessor: (row) => row.writeSpeed.perMinute,
+        render: ({row}) => <SpeedMultiMeter data={row.writeSpeed} />,
+    },
+    {
+        name: PARTITIONS_COLUMNS_IDS.READ_SPEED,
+        header: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_SPEED],
+        align: DataTable.LEFT,
+        sortAccessor: (row) => row.readSpeed.perMinute,
+        render: ({row}) => <SpeedMultiMeter data={row.readSpeed} />,
+    },
+    {
+        name: PARTITIONS_COLUMNS_IDS.WRITE_LAGS,
+        header: <WriteLagsHeader />,
+        className: b('lags-header'),
+        sub: [
+            {
+                name: PARTITIONS_WRITE_LAGS_SUB_COLUMNS_IDS.PARTITION_WRITE_LAG,
+                header: PARTITIONS_WRITE_LAGS_SUB_COLUMNS_TITLES[
+                    PARTITIONS_WRITE_LAGS_SUB_COLUMNS_IDS.PARTITION_WRITE_LAG
+                ],
+                align: DataTable.RIGHT,
+                render: ({row}) => formatMsToUptime(row.partitionWriteLag),
+            },
+            {
+                name: PARTITIONS_WRITE_LAGS_SUB_COLUMNS_IDS.PARTITION_WRITE_IDLE_TIME,
+                header: PARTITIONS_WRITE_LAGS_SUB_COLUMNS_TITLES[
+                    PARTITIONS_WRITE_LAGS_SUB_COLUMNS_IDS.PARTITION_WRITE_IDLE_TIME
+                ],
+                align: DataTable.RIGHT,
+                render: ({row}) => formatMsToUptime(row.partitionWriteIdleTime),
+            },
+        ],
+    },
+    {
+        name: PARTITIONS_COLUMNS_IDS.READ_LAGS,
+        header: <ReadLagsHeader />,
+        className: b('lags-header'),
+        sub: [
+            {
+                name: PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS.CONSUMER_WRITE_LAG,
+                header: PARTITIONS_READ_LAGS_SUB_COLUMNS_TITLES[
+                    PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS.CONSUMER_WRITE_LAG
+                ],
+                align: DataTable.RIGHT,
+                render: ({row}) => formatMsToUptime(row.consumerWriteLag),
+            },
+            {
+                name: PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS.CONSUMER_READ_LAG,
+                header: PARTITIONS_READ_LAGS_SUB_COLUMNS_TITLES[
+                    PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS.CONSUMER_READ_LAG
+                ],
+                align: DataTable.RIGHT,
+                render: ({row}) => formatMsToUptime(row.consumerReadLag),
+            },
+            {
+                name: PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS.CONSUMER_READ_IDLE_TIME,
+                header: PARTITIONS_READ_LAGS_SUB_COLUMNS_TITLES[
+                    PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS.CONSUMER_READ_IDLE_TIME
+                ],
+                align: DataTable.RIGHT,
+                render: ({row}) => formatMsToUptime(row.consumerReadIdleTime),
+            },
+        ],
+    },
+    {
+        name: PARTITIONS_COLUMNS_IDS.UNCOMMITED_MESSAGES,
+        header: <UncommitedMessagesHeader />,
+        align: DataTable.RIGHT,
+        render: ({row}) => row.uncommitedMessages,
+    },
+    {
+        name: PARTITIONS_COLUMNS_IDS.UNREAD_MESSAGES,
+        header: <UnreadMessagesHeader />,
+        align: DataTable.RIGHT,
+        render: ({row}) => row.unreadMessages,
+    },
+    {
+        name: PARTITIONS_COLUMNS_IDS.START_OFFSET,
+        header: (
+            <MultilineHeader
+                title={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.START_OFFSET]}
+            />
+        ),
+        sortAccessor: (row) => isNumeric(row.startOffset) && Number(row.startOffset),
+        align: DataTable.RIGHT,
+        render: ({row}) => row.startOffset,
+    },
+    {
+        name: PARTITIONS_COLUMNS_IDS.END_OFFSET,
+        header: (
+            <MultilineHeader
+                title={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.END_OFFSET]}
+            />
+        ),
+        sortAccessor: (row) => isNumeric(row.endOffset) && Number(row.endOffset),
+        align: DataTable.RIGHT,
+        render: ({row}) => row.endOffset,
+    },
+    {
+        name: PARTITIONS_COLUMNS_IDS.COMMITED_OFFSET,
+        header: (
+            <MultilineHeader
+                title={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.COMMITED_OFFSET]}
+            />
+        ),
+        sortAccessor: (row) => isNumeric(row.commitedOffset) && Number(row.commitedOffset),
+        align: DataTable.RIGHT,
+        render: ({row}) => row.commitedOffset,
+    },
+    {
+        name: PARTITIONS_COLUMNS_IDS.READ_SESSION_ID,
+        header: <ReadSessionHeader />,
+        align: DataTable.LEFT,
+        render: ({row}) =>
+            row.readSessionId ? (
+                <EntityStatus
+                    name={row.readSessionId}
+                    showStatus={false}
+                    hasClipboardButton
+                    className={b('string-with-copy')}
+                />
+            ) : (
+                '–'
+            ),
+    },
+    {
+        name: PARTITIONS_COLUMNS_IDS.READER_NAME,
+        header: (
+            <MultilineHeader
+                title={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READER_NAME]}
+            />
+        ),
+        align: DataTable.LEFT,
+        render: ({row}) =>
+            row.readerName ? (
+                <EntityStatus
+                    name={row.readerName}
+                    showStatus={false}
+                    hasClipboardButton
+                    className={b('string-with-copy')}
+                />
+            ) : (
+                '–'
+            ),
+    },
+    {
+        name: PARTITIONS_COLUMNS_IDS.PARTITION_HOST,
+        header: (
+            <MultilineHeader
+                title={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.PARTITION_HOST]}
+            />
+        ),
+        align: DataTable.LEFT,
+        render: ({row}) =>
+            row.partitionHost ? (
+                <EntityStatus
+                    name={row.partitionHost}
+                    path={getDefaultNodePath(row.partitionHost)}
+                    showStatus={false}
+                    hasClipboardButton
+                    className={b('string-with-copy')}
+                />
+            ) : (
+                '–'
+            ),
+    },
+    {
+        name: PARTITIONS_COLUMNS_IDS.CONNECTION_HOST,
+        header: (
+            <MultilineHeader
+                title={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.CONNECTION_HOST]}
+            />
+        ),
+        align: DataTable.LEFT,
+        render: ({row}) =>
+            row.connectionHost ? (
+                <EntityStatus
+                    name={row.connectionHost}
+                    path={getDefaultNodePath(row.connectionNodeId)}
+                    showStatus={false}
+                    hasClipboardButton
+                    className={b('string-with-copy')}
+                />
+            ) : (
+                '–'
+            ),
+    },
+];

package/dist/containers/Tenant/Diagnostics/Partitions/columns/index.ts

@@ -0,0 +1 @@
+export * from './columns';

package/dist/containers/Tenant/Diagnostics/Partitions/i18n/en.json

@@ -0,0 +1,13 @@
+{
+  "lagsPopover.writeLags": "Write lags statistics (time format dd hh:mm:ss)",
+  "lagsPopover.readLags": "Read lags statistics (time format dd hh:mm:ss)",
+  "headers.unread": "End offset - Last read offset",
+  "headers.uncommited": "End offset - Committed offset",
+  "controls.consumerSelector": "Consumer:",
+  "controls.consumerSelector.placeholder": "Consumer",
+  "controls.partitionSearch": "Partition ID",
+  "controls.generalSearch": "Host, Host ID, Reader, Read Session ID",
+  "table.emptyDataMessage": "No partitions match the current search",
+  "noConsumersMessage.topic": "This topic has no consumers",
+  "noConsumersMessage.stream": "This changefeed has no consumers"
+}

package/dist/containers/Tenant/Diagnostics/{OverloadedShards → Partitions}/i18n/index.ts

@@ -3,7 +3,7 @@ import {i18n, Lang} from '../../../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 
-const COMPONENT = 'ydb-diagnostics-overloaded-shards';
+const COMPONENT = 'ydb-diagnostics-partitions';
 
 i18n.registerKeyset(Lang.En, COMPONENT, en);
 i18n.registerKeyset(Lang.Ru, COMPONENT, ru);

package/dist/containers/Tenant/Diagnostics/Partitions/i18n/ru.json

@@ -0,0 +1,13 @@
+{
+  "lagsPopover.writeLags": "Статистика лагов записи (формат времени дд чч:мм:сс)",
+  "lagsPopover.readLags": "Статистика лагов чтения (формат времени дд чч:мм:сс)",
+  "headers.unread": "End offset - Last read offset",
+  "headers.uncommited": "End offset - Committed offset",
+  "controls.consumerSelector": "Читатель:",
+  "controls.consumerSelector.placeholder": "Читатель",
+  "controls.partitionSearch": "Partition ID",
+  "controls.generalSearch": "Host, Host ID, Reader, Read Session ID",
+  "table.emptyDataMessage": "По заданному поиску нет партиций",
+  "noConsumersMessage.topic": "У этого топика нет читателей",
+  "noConsumersMessage.stream": "У этого стрима нет читателей"
+}

package/dist/containers/Tenant/Diagnostics/Partitions/index.ts

@@ -0,0 +1 @@
+export * from './PartitionsWrapper';

package/dist/containers/Tenant/Diagnostics/Partitions/utils/constants.ts

@@ -0,0 +1,74 @@
+export const PARTITIONS_COLUMNS_IDS = {
+    PARTITION_ID: 'partitionId',
+
+    STORE_SIZE: 'storeSize',
+
+    WRITE_SPEED: 'writeSpeed',
+    READ_SPEED: 'readSpeed',
+
+    WRITE_LAGS: 'writeLags',
+    READ_LAGS: 'readLags',
+
+    UNCOMMITED_MESSAGES: 'uncommitedMessages',
+    UNREAD_MESSAGES: 'unreadMessages',
+
+    START_OFFSET: 'startOffset',
+    END_OFFSET: 'endOffset',
+    COMMITED_OFFSET: 'commitedOffset',
+
+    READ_SESSION_ID: 'readSessionId',
+    READER_NAME: 'readerName',
+
+    PARTITION_HOST: 'partitionHost',
+    CONNECTION_HOST: 'connectionHost',
+} as const;
+
+export const PARTITIONS_COLUMNS_TITILES = {
+    [PARTITIONS_COLUMNS_IDS.PARTITION_ID]: 'Partition ID',
+
+    [PARTITIONS_COLUMNS_IDS.STORE_SIZE]: 'Store size',
+
+    [PARTITIONS_COLUMNS_IDS.WRITE_SPEED]: 'Write speed',
+    [PARTITIONS_COLUMNS_IDS.READ_SPEED]: 'Read speed',
+
+    [PARTITIONS_COLUMNS_IDS.WRITE_LAGS]: 'Write lags, duration',
+
+    [PARTITIONS_COLUMNS_IDS.READ_LAGS]: 'Read lags, duration',
+
+    [PARTITIONS_COLUMNS_IDS.UNCOMMITED_MESSAGES]: 'Uncommited messages',
+    [PARTITIONS_COLUMNS_IDS.UNREAD_MESSAGES]: 'Unread messages',
+
+    [PARTITIONS_COLUMNS_IDS.START_OFFSET]: 'Start offset',
+    [PARTITIONS_COLUMNS_IDS.END_OFFSET]: 'End offset',
+    [PARTITIONS_COLUMNS_IDS.COMMITED_OFFSET]: 'Commited offset',
+
+    [PARTITIONS_COLUMNS_IDS.READ_SESSION_ID]: 'Read session ID',
+    [PARTITIONS_COLUMNS_IDS.READER_NAME]: 'Reader name',
+
+    [PARTITIONS_COLUMNS_IDS.PARTITION_HOST]: 'Partition host',
+    [PARTITIONS_COLUMNS_IDS.CONNECTION_HOST]: 'Connection host',
+} as const;
+
+export const PARTITIONS_WRITE_LAGS_SUB_COLUMNS_IDS = {
+    PARTITION_WRITE_LAG: 'partitionWriteLag',
+    PARTITION_WRITE_IDLE_TIME: 'partitionWriteIdleTime',
+} as const;
+
+export const PARTITIONS_WRITE_LAGS_SUB_COLUMNS_TITLES = {
+    [PARTITIONS_WRITE_LAGS_SUB_COLUMNS_IDS.PARTITION_WRITE_LAG]: 'write lag',
+    [PARTITIONS_WRITE_LAGS_SUB_COLUMNS_IDS.PARTITION_WRITE_IDLE_TIME]: 'write idle time',
+} as const;
+
+export const PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS = {
+    CONSUMER_WRITE_LAG: 'consumerWriteLag',
+    CONSUMER_READ_LAG: 'consumerReadLag',
+    CONSUMER_READ_IDLE_TIME: 'consumerReadIdleTime',
+} as const;
+
+export const PARTITIONS_READ_LAGS_SUB_COLUMNS_TITLES = {
+    [PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS.CONSUMER_WRITE_LAG]: 'write lag',
+    [PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS.CONSUMER_READ_LAG]: 'read lag',
+    [PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS.CONSUMER_READ_IDLE_TIME]: 'read idle time',
+} as const;
+
+export const PARTITIONS_DEFAULT_SELECTED_COLUMNS = Object.values(PARTITIONS_COLUMNS_IDS);

package/dist/containers/Tenant/Diagnostics/Partitions/utils/types.ts

@@ -0,0 +1,6 @@
+import type {IPreparedPartitionData} from '../../../../../types/store/consumer';
+
+export interface IPreparedPartitionDataWithHosts extends IPreparedPartitionData {
+    partitionHost: string | undefined;
+    connectionHost: string | undefined;
+}

package/dist/containers/Tenant/Diagnostics/TopShards/Filters/Filters.scss

@@ -0,0 +1,8 @@
+.top-shards {
+    &__filters {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        gap: 16px;
+    }
+}

package/dist/containers/Tenant/Diagnostics/TopShards/Filters/Filters.tsx

@@ -0,0 +1,56 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import {DateRange, DateRangeValues} from '../../../../../components/DateRange';
+
+import {
+    EShardsWorkloadMode,
+    IShardsWorkloadFilters,
+} from '../../../../../types/store/shardsWorkload';
+
+import {isEnumMember} from '../../../../../utils/typecheckers';
+
+import i18n from '../i18n';
+import {b} from '../TopShards';
+
+import './Filters.scss';
+
+interface FiltersProps {
+    value: IShardsWorkloadFilters;
+    onChange: (value: Partial<IShardsWorkloadFilters>) => void;
+    className?: string;
+}
+
+export const Filters = ({value, onChange, className}: FiltersProps) => {
+    const handleModeChange = (mode: string) => {
+        if (!isEnumMember(EShardsWorkloadMode, mode)) {
+            const values = Object.values(EShardsWorkloadMode).join(', ');
+            throw new Error(`Unexpected TopShards mode "${mode}". Should be one of: ${values}`);
+        }
+
+        onChange({mode});
+    };
+
+    const handleDateRangeChange = (dateRange: DateRangeValues) => {
+        onChange({
+            mode: EShardsWorkloadMode.History,
+            ...dateRange,
+        });
+    };
+
+    const from = value.mode === EShardsWorkloadMode.Immediate ? undefined : value.from;
+    const to = value.mode === EShardsWorkloadMode.Immediate ? undefined : value.to;
+
+    return (
+        <div className={b('filters', className)}>
+            <RadioButton value={value.mode} onUpdate={handleModeChange}>
+                <RadioButton.Option value={EShardsWorkloadMode.Immediate}>
+                    {i18n('filters.mode.immediate')}
+                </RadioButton.Option>
+                <RadioButton.Option value={EShardsWorkloadMode.History}>
+                    {i18n('filters.mode.history')}
+                </RadioButton.Option>
+            </RadioButton>
+            <DateRange from={from} to={to} onChange={handleDateRangeChange} />
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/TopShards/Filters/index.ts

@@ -0,0 +1 @@
+export * from './Filters';

package/dist/containers/Tenant/Diagnostics/{OverloadedShards/OverloadedShards.scss → TopShards/TopShards.scss}

@@ -1,6 +1,7 @@
-.overloaded-shards {
+.top-shards {
     display: flex;
     flex-direction: column;
+    gap: 10px;
 
     height: 100%;
 
@@ -11,15 +12,6 @@
         justify-content: center;
     }
 
-    &__controls {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: baseline;
-        gap: 16px;
-
-        margin-bottom: 10px;
-    }
-
     &__table {
         overflow: auto;
         flex-grow: 1;

package/dist/containers/Tenant/Diagnostics/{OverloadedShards/OverloadedShards.tsx → TopShards/TopShards.tsx}

@@ -5,7 +5,6 @@ import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
 
-import {DateRange, DateRangeValues} from '../../../../components/DateRange';
 import {InternalLink} from '../../../../components/InternalLink';
 
 import HistoryContext from '../../../../contexts/HistoryContext';
@@ -18,7 +17,7 @@ import {
     setShardsQueryFilters,
 } from '../../../../store/reducers/shardsWorkload';
 import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
-import type {IShardsWorkloadFilters} from '../../../../types/store/shardsWorkload';
+import {EShardsWorkloadMode, IShardsWorkloadFilters} from '../../../../types/store/shardsWorkload';
 
 import type {EPathType} from '../../../../types/api/schema';
 
@@ -31,10 +30,12 @@ import {getDefaultNodePath} from '../../../Node/NodePages';
 
 import {isColumnEntityType} from '../../utils/schema';
 
+import {Filters} from './Filters';
+
 import i18n from './i18n';
-import './OverloadedShards.scss';
+import './TopShards.scss';
 
-const b = cn('overloaded-shards');
+export const b = cn('top-shards');
 const bLink = cn('yc-link');
 
 const TABLE_SETTINGS: Settings = {
@@ -83,12 +84,18 @@ function dataTableToStringSortOrder(value: SortOrder | SortOrder[] = []) {
     return sortOrders.map(({columnId}) => columnId).join(',');
 }
 
-interface OverloadedShardsProps {
+function fillDateRangeFor(value: IShardsWorkloadFilters) {
+    value.to = Date.now();
+    value.from = value.to - HOUR_IN_SECONDS * 1000;
+    return value;
+}
+
+interface TopShardsProps {
     tenantPath: string;
     type?: EPathType;
 }
 
-export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
+export const TopShards = ({tenantPath, type}: TopShardsProps) => {
     const dispatch = useDispatch();
 
     const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
@@ -101,17 +108,20 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
         wasLoaded,
     } = useTypedSelector((state) => state.shardsWorkload);
 
-    // default date range should be the last hour, but shouldn't propagate into URL until user interacts with the control
+    // default filters shouldn't propagate into URL until user interacts with the control
     // redux initial value can't be used, as it synchronizes with URL
     const [filters, setFilters] = useState<IShardsWorkloadFilters>(() => {
-        if (!storeFilters?.from && !storeFilters?.to) {
-            return {
-                from: Date.now() - HOUR_IN_SECONDS * 1000,
-                to: Date.now(),
-            };
+        const defaultValue = {...storeFilters};
+
+        if (!defaultValue.mode) {
+            defaultValue.mode = EShardsWorkloadMode.Immediate;
+        }
+
+        if (!defaultValue.from && !defaultValue.to) {
+            fillDateRangeFor(defaultValue);
         }
 
-        return storeFilters;
+        return defaultValue;
     });
 
     const [sortOrder, setSortOrder] = useState(tableColumnsNames.CPUCores);
@@ -144,18 +154,34 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
     const history = useContext(HistoryContext);
 
     const onSort = (newSortOrder?: SortOrder | SortOrder[]) => {
-        // omit information about sort order to disable ASC order, only DESC makes sense for overloaded shards
+        // omit information about sort order to disable ASC order, only DESC makes sense for top shards
         // use a string (and not the DataTable default format) to prevent reference change,
         // which would cause an excess state change, to avoid repeating requests
         setSortOrder(dataTableToStringSortOrder(newSortOrder));
     };
 
-    const handleDateRangeChange = (value: DateRangeValues) => {
+    const handleFiltersChange = (value: Partial<IShardsWorkloadFilters>) => {
+        const newStateValue = {...value};
+        const isDateRangePristine =
+            !storeFilters.from && !storeFilters.to && !value.from && !value.to;
+
+        if (isDateRangePristine) {
+            switch (value.mode) {
+                case EShardsWorkloadMode.Immediate:
+                    newStateValue.from = newStateValue.to = undefined;
+                    break;
+                case EShardsWorkloadMode.History:
+                    // should default to the current datetime every time history mode activates
+                    fillDateRangeFor(newStateValue);
+                    break;
+            }
+        }
+
         dispatch(setShardsQueryFilters(value));
-        setFilters(value);
+        setFilters((state) => ({...state, ...newStateValue}));
     };
 
-    const tableColumns: Column<any>[] = useMemo(() => {
+    const tableColumns = useMemo(() => {
         const onSchemaClick = (schemaPath: string) => {
             return () => {
                 dispatch(setCurrentSchemaPath(schemaPath));
@@ -164,7 +190,7 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
             };
         };
 
-        return [
+        const columns: Column<any>[] = [
             {
                 name: tableColumnsNames.Path,
                 render: ({value: relativeNodePath}) => {
@@ -217,23 +243,29 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
                 align: DataTable.RIGHT,
                 sortable: false,
             },
-            {
-                name: tableColumnsNames.PeakTime,
-                render: ({value}) => formatDateTime(new Date(value as string).valueOf()),
-                sortable: false,
-            },
             {
                 name: tableColumnsNames.InFlightTxCount,
                 render: ({value}) => formatNumber(value as number),
                 align: DataTable.RIGHT,
                 sortable: false,
             },
-            {
+        ];
+
+        if (filters.mode === EShardsWorkloadMode.History) {
+            // after NodeId
+            columns.splice(5, 0, {
+                name: tableColumnsNames.PeakTime,
+                render: ({value}) => formatDateTime(new Date(value as string).valueOf()),
+                sortable: false,
+            });
+            columns.push({
                 name: tableColumnsNames.IntervalEnd,
                 render: ({value}) => formatDateTime(new Date(value as string).getTime()),
-            }
-        ];
-    }, [dispatch, history, tenantPath]);
+            });
+        }
+
+        return columns;
+    }, [dispatch, filters.mode, history, tenantPath]);
 
     const renderLoader = () => {
         return (
@@ -272,10 +304,8 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
 
     return (
         <div className={b()}>
-            <div className={b('controls')}>
-                {i18n('description')}
-                <DateRange from={filters.from} to={filters.to} onChange={handleDateRangeChange} />
-            </div>
+            <Filters value={filters} onChange={handleFiltersChange} />
+            {filters.mode === EShardsWorkloadMode.History && <div>{i18n('description')}</div>}
             {renderContent()}
         </div>
     );

package/dist/containers/Tenant/Diagnostics/TopShards/i18n/en.json

@@ -0,0 +1,6 @@
+{
+  "no-data": "No data",
+  "filters.mode.immediate": "Immediate",
+  "filters.mode.history": "Historical",
+  "description": "Historical data only tracks shards with CPU load over 70%"
+}

package/dist/containers/Tenant/Diagnostics/TopShards/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-diagnostics-top-shards';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Tenant/Diagnostics/TopShards/i18n/ru.json

@@ -0,0 +1,6 @@
+{
+  "no-data": "Нет данных",
+  "filters.mode.immediate": "Мгновенные",
+  "filters.mode.history": "Исторические",
+  "description": "Исторические данные хранятся только о шардах с загрузкой CPU выше 70%"
+}