ydb-embedded-ui 4.13.0 → 4.15.0

package/dist/containers/Storage/Storage.tsx

@@ -2,8 +2,6 @@ import {useCallback, useEffect} from 'react';
 import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import DataTable, {Settings} from '@gravity-ui/react-data-table';
-
 import {Search} from '../../components/Search';
 import {UptimeFilter} from '../../components/UptimeFIlter';
 import {AccessDenied} from '../../components/Errors/403';
@@ -11,9 +9,13 @@ import {EntitiesCount} from '../../components/EntitiesCount';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {ResponseError} from '../../components/Errors/ResponseError';
 
-import type {StorageType, VisibleEntities} from '../../store/reducers/storage/types';
+import type {
+    StorageSortParams,
+    StorageType,
+    VisibleEntities,
+} from '../../store/reducers/storage/types';
+import type {NodesSortParams} from '../../store/reducers/nodes/types';
 import {
-    getStorageInfo,
     setInitialState,
     setVisibleEntities,
     setStorageTextFilter,
@@ -21,17 +23,28 @@ import {
     setStorageType,
     setNodesUptimeFilter,
     setDataWasNotLoaded,
+    getStorageNodesInfo,
+    getStorageGroupsInfo,
+    setNodesSortParams,
+    setGroupsSortParams,
 } from '../../store/reducers/storage/storage';
 import {
     selectFilteredGroups,
     selectFilteredNodes,
-    selectStorageNodesCount,
-    selectStorageGroupsCount,
+    selectEntitiesCount,
     selectUsageFilterOptions,
+    selectNodesSortParams,
+    selectGroupsSortParams,
 } from '../../store/reducers/storage/selectors';
 import {VISIBLE_ENTITIES, STORAGE_TYPES} from '../../store/reducers/storage/constants';
 import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList';
-import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import {
+    useAutofetcher,
+    useNodesRequestParams,
+    useStorageRequestParams,
+    useTableSort,
+    useTypedSelector,
+} from '../../utils/hooks';
 import {AdditionalNodesInfo, NodesUptimeFilterValues} from '../../utils/nodes';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 
@@ -45,11 +58,6 @@ import './Storage.scss';
 
 const b = cn('global-storage');
 
-const tableSettings: Settings = {
-    ...DEFAULT_TABLE_SETTINGS,
-    defaultOrder: DataTable.DESCENDING,
-};
-
 interface StorageProps {
     additionalNodesInfo?: AdditionalNodesInfo;
     tenant?: string;
@@ -72,10 +80,11 @@ export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) =>
     } = useTypedSelector((state) => state.storage);
     const storageNodes = useTypedSelector(selectFilteredNodes);
     const storageGroups = useTypedSelector(selectFilteredGroups);
-    const nodesCount = useTypedSelector(selectStorageNodesCount);
-    const groupsCount = useTypedSelector(selectStorageGroupsCount);
+    const entitiesCount = useTypedSelector(selectEntitiesCount);
     const nodesMap = useTypedSelector(selectNodesMap);
     const usageFilterOptions = useTypedSelector(selectUsageFilterOptions);
+    const nodesSortParams = useTypedSelector(selectNodesSortParams);
+    const groupsSortParams = useTypedSelector(selectGroupsSortParams);
 
     useEffect(() => {
         dispatch(getNodesList());
@@ -86,27 +95,47 @@ export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) =>
         };
     }, [dispatch]);
 
+    const nodesRequestParams = useNodesRequestParams({
+        filter,
+        nodesUptimeFilter,
+        ...nodesSortParams,
+    });
+    const storageRequestParams = useStorageRequestParams({
+        filter,
+        ...groupsSortParams,
+    });
+
+    const [nodesSort, handleNodesSort] = useTableSort(nodesSortParams, (params) =>
+        dispatch(setNodesSortParams(params as NodesSortParams)),
+    );
+    const [groupsSort, handleGroupsSort] = useTableSort(groupsSortParams, (params) =>
+        dispatch(setGroupsSortParams(params as StorageSortParams)),
+    );
+
     const fetchData = useCallback(
         (isBackground: boolean) => {
             if (!isBackground) {
                 dispatch(setDataWasNotLoaded());
             }
 
-            dispatch(
-                getStorageInfo(
-                    {
-                        tenant,
-                        nodeId,
-                        visibleEntities,
-                        type: storageType,
-                    },
-                    {
-                        concurrentId: 'getStorageInfo',
-                    },
-                ),
-            );
+            const nodesParams = nodesRequestParams || {};
+            const storageParams = storageRequestParams || {};
+
+            if (storageType === STORAGE_TYPES.nodes) {
+                dispatch(getStorageNodesInfo({tenant, visibleEntities, ...nodesParams}));
+            } else {
+                dispatch(getStorageGroupsInfo({tenant, visibleEntities, nodeId, ...storageParams}));
+            }
         },
-        [dispatch, tenant, nodeId, visibleEntities, storageType],
+        [
+            dispatch,
+            tenant,
+            nodeId,
+            visibleEntities,
+            storageType,
+            storageRequestParams,
+            nodesRequestParams,
+        ],
     );
 
     const autorefreshEnabled = tenant ? autorefresh : true;
@@ -145,9 +174,11 @@ export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) =>
                     <StorageGroups
                         visibleEntities={visibleEntities}
                         data={storageGroups}
-                        tableSettings={tableSettings}
+                        tableSettings={DEFAULT_TABLE_SETTINGS}
                         nodes={nodesMap}
                         onShowAll={() => handleGroupVisibilityChange(VISIBLE_ENTITIES.all)}
+                        sort={groupsSort}
+                        handleSort={handleGroupsSort}
                     />
                 )}
                 {storageType === STORAGE_TYPES.nodes && (
@@ -155,9 +186,11 @@ export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) =>
                         visibleEntities={visibleEntities}
                         nodesUptimeFilter={nodesUptimeFilter}
                         data={storageNodes}
-                        tableSettings={tableSettings}
+                        tableSettings={DEFAULT_TABLE_SETTINGS}
                         onShowAll={handleShowAllNodes}
                         additionalNodesInfo={additionalNodesInfo}
+                        sort={nodesSort}
+                        handleSort={handleNodesSort}
                     />
                 )}
             </>
@@ -166,7 +199,6 @@ export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) =>
 
     const renderEntitiesCount = () => {
         const entityName = storageType === STORAGE_TYPES.groups ? 'Groups' : 'Nodes';
-        const count = storageType === STORAGE_TYPES.groups ? groupsCount : nodesCount;
         const current =
             storageType === STORAGE_TYPES.groups ? storageGroups.length : storageNodes.length;
 
@@ -174,7 +206,7 @@ export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) =>
             <EntitiesCount
                 label={entityName}
                 loading={loading && !wasLoaded}
-                total={count.total}
+                total={entitiesCount.total}
                 current={current}
             />
         );

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -3,13 +3,15 @@ import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
+import type {ValueOf} from '../../../types/common';
 import type {NodesMap} from '../../../types/store/nodesList';
 import type {PreparedStorageGroup, VisibleEntities} from '../../../store/reducers/storage/types';
+import type {HandleSort} from '../../../utils/hooks/useTableSort';
 
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import {stringifyVdiskId} from '../../../utils';
-import {getUsage, isFullVDiskData} from '../../../utils/storage';
+import {getUsage, isFullVDiskData, isSortableStorageProperty} from '../../../utils/storage';
 
 import shieldIcon from '../../../assets/icons/shield.svg';
 import {Stack} from '../../../components/Stack/Stack';
@@ -22,23 +24,22 @@ import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
 import i18n from './i18n';
 import './StorageGroups.scss';
 
-enum TableColumnsIds {
-    PoolName = 'PoolName',
-    Type = 'Type',
-    ErasureSpecies = 'ErasureSpecies',
-    GroupID = 'GroupID',
-    Used = 'Used',
-    Limit = 'Limit',
-    UsedPercents = 'UsedPercents',
-    UsedSpaceFlag = 'UsedSpaceFlag',
-    Read = 'Read',
-    Write = 'Write',
-    VDisks = 'VDisks',
-    Missing = 'Missing',
-}
+const TableColumnsIds = {
+    PoolName: 'PoolName',
+    Kind: 'Kind',
+    Erasure: 'Erasure',
+    GroupId: 'GroupId',
+    Used: 'Used',
+    Limit: 'Limit',
+    Usage: 'Usage',
+    UsedSpaceFlag: 'UsedSpaceFlag',
+    Read: 'Read',
+    Write: 'Write',
+    VDisks: 'VDisks',
+    Degraded: 'Degraded',
+} as const;
 
-type TableColumnsIdsKeys = keyof typeof TableColumnsIds;
-type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
+type TableColumnId = ValueOf<typeof TableColumnsIds>;
 
 interface StorageGroupsProps {
     data: PreparedStorageGroup[];
@@ -46,59 +47,37 @@ interface StorageGroupsProps {
     tableSettings: Settings;
     visibleEntities: VisibleEntities;
     onShowAll?: VoidFunction;
+    sort?: SortOrder;
+    handleSort?: HandleSort;
 }
 
-const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
+const tableColumnsNames: Record<TableColumnId, string> = {
     PoolName: 'Pool Name',
-    Type: 'Type',
-    ErasureSpecies: 'Erasure',
-    GroupID: 'Group ID',
+    Kind: 'Type',
+    Erasure: 'Erasure',
+    GroupId: 'Group ID',
     Used: 'Used',
     Limit: 'Limit',
     UsedSpaceFlag: 'Space',
-    UsedPercents: 'Usage',
+    Usage: 'Usage',
     Read: 'Read',
     Write: 'Write',
     VDisks: 'VDisks',
-    Missing: 'Degraded',
+    Degraded: 'Degraded',
 };
 
 const b = cn('global-storage-groups');
 
-function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
-    switch (visibleEntities) {
-        case VISIBLE_ENTITIES.all: {
-            return {
-                columnId: TableColumnsIds.PoolName,
-                order: DataTable.ASCENDING,
-            };
-        }
-        case VISIBLE_ENTITIES.missing: {
-            return {
-                columnId: TableColumnsIds.Missing,
-                order: DataTable.DESCENDING,
-            };
-        }
-        case VISIBLE_ENTITIES.space: {
-            return {
-                columnId: TableColumnsIds.UsedSpaceFlag,
-                order: DataTable.DESCENDING,
-            };
-        }
-        default: {
-            return undefined;
-        }
-    }
-}
-
 export function StorageGroups({
     data,
     tableSettings,
     visibleEntities,
     nodes,
     onShowAll,
+    sort,
+    handleSort,
 }: StorageGroupsProps) {
-    const allColumns: Column<PreparedStorageGroup>[] = [
+    const rawColumns: Column<PreparedStorageGroup>[] = [
         {
             name: TableColumnsIds.PoolName,
             header: tableColumnsNames[TableColumnsIds.PoolName],
@@ -124,12 +103,12 @@ export function StorageGroups({
             align: DataTable.LEFT,
         },
         {
-            name: TableColumnsIds.Type,
-            header: tableColumnsNames[TableColumnsIds.Type],
+            name: TableColumnsIds.Kind,
+            header: tableColumnsNames[TableColumnsIds.Kind],
             // prettier-ignore
             render: ({row}) => (
                 <>
-                    <Label>{row.Type || '—'}</Label>
+                    <Label>{row.Kind || '—'}</Label>
                     {' '}
                     {row.Encryption && (
                         <Popover
@@ -146,18 +125,18 @@ export function StorageGroups({
             ),
         },
         {
-            name: TableColumnsIds.ErasureSpecies,
-            header: tableColumnsNames[TableColumnsIds.ErasureSpecies],
+            name: TableColumnsIds.Erasure,
+            header: tableColumnsNames[TableColumnsIds.Erasure],
             render: ({row}) => (row.ErasureSpecies ? row.ErasureSpecies : '-'),
             align: DataTable.LEFT,
         },
         {
-            name: TableColumnsIds.Missing,
-            header: tableColumnsNames[TableColumnsIds.Missing],
+            name: TableColumnsIds.Degraded,
+            header: tableColumnsNames[TableColumnsIds.Degraded],
             width: 100,
             render: ({row}) =>
-                row.Missing ? (
-                    <Label theme={getDegradedSeverity(row)}>Degraded: {row.Missing}</Label>
+                row.Degraded ? (
+                    <Label theme={getDegradedSeverity(row)}>Degraded: {row.Degraded}</Label>
                 ) : (
                     '-'
                 ),
@@ -165,19 +144,18 @@ export function StorageGroups({
             defaultOrder: DataTable.DESCENDING,
         },
         {
-            name: TableColumnsIds.UsedPercents,
-            header: tableColumnsNames[TableColumnsIds.UsedPercents],
+            name: TableColumnsIds.Usage,
+            header: tableColumnsNames[TableColumnsIds.Usage],
             width: 100,
             render: ({row}) => {
-                const usage = getUsage(row, 5);
                 // without a limit the usage can be evaluated as 0,
                 // but the absence of a value is more clear
                 return row.Limit ? (
                     <Label
-                        theme={getUsageSeverityForStorageGroup(usage)}
-                        className={b('usage-label', {overload: usage >= 90})}
+                        theme={getUsageSeverityForStorageGroup(row.Usage)}
+                        className={b('usage-label', {overload: row.Usage >= 90})}
                     >
-                        {usage}%
+                        {row.Usage}%
                     </Label>
                 ) : (
                     '-'
@@ -188,12 +166,13 @@ export function StorageGroups({
             align: DataTable.LEFT,
         },
         {
-            name: TableColumnsIds.GroupID,
-            header: tableColumnsNames[TableColumnsIds.GroupID],
+            name: TableColumnsIds.GroupId,
+            header: tableColumnsNames[TableColumnsIds.GroupId],
             width: 130,
             render: ({row}) => {
                 return <span className={b('group-id')}>{row.GroupID}</span>;
             },
+            sortAccessor: (row) => Number(row.GroupID),
             align: DataTable.RIGHT,
         },
         {
@@ -297,18 +276,21 @@ export function StorageGroups({
         },
     ];
 
-    let columns = allColumns;
+    let columns = rawColumns.map((column) => ({
+        ...column,
+        sortable: isSortableStorageProperty(column.name),
+    }));
 
     if (visibleEntities === VISIBLE_ENTITIES.all) {
-        columns = allColumns.filter((col) => {
+        columns = columns.filter((col) => {
             return (
-                col.name !== TableColumnsIds.Missing && col.name !== TableColumnsIds.UsedSpaceFlag
+                col.name !== TableColumnsIds.Degraded && col.name !== TableColumnsIds.UsedSpaceFlag
             );
         });
     }
 
     if (visibleEntities === VISIBLE_ENTITIES.space) {
-        columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
+        columns = columns.filter((col) => col.name !== TableColumnsIds.Degraded);
 
         if (!data.length) {
             return (
@@ -322,7 +304,7 @@ export function StorageGroups({
     }
 
     if (visibleEntities === VISIBLE_ENTITIES.missing) {
-        columns = allColumns.filter((col) => col.name !== TableColumnsIds.UsedSpaceFlag);
+        columns = columns.filter((col) => col.name !== TableColumnsIds.UsedSpaceFlag);
 
         if (!data.length) {
             return (
@@ -342,8 +324,9 @@ export function StorageGroups({
             data={data}
             columns={columns}
             settings={tableSettings}
-            initialSortOrder={setSortOrder(visibleEntities)}
             emptyDataMessage={i18n('empty.default')}
+            sortOrder={sort}
+            onSort={handleSort}
         />
     ) : null;
 }

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -2,11 +2,14 @@ import cn from 'bem-cn-lite';
 
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 
+import type {ValueOf} from '../../../types/common';
 import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
+import type {HandleSort} from '../../../utils/hooks/useTableSort';
 
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import {
     AdditionalNodesInfo,
+    isSortableNodesProperty,
     isUnavailableNode,
     NodesUptimeFilterValues,
 } from '../../../utils/nodes';
@@ -19,18 +22,17 @@ import {PDisk} from '../PDisk';
 import i18n from './i18n';
 import './StorageNodes.scss';
 
-enum TableColumnsIds {
-    NodeId = 'NodeId',
-    FQDN = 'FQDN',
-    DataCenter = 'DataCenter',
-    Rack = 'Rack',
-    Uptime = 'Uptime',
-    PDisks = 'PDisks',
-    Missing = 'Missing',
-}
+const TableColumnsIds = {
+    NodeId: 'NodeId',
+    Host: 'Host',
+    DC: 'DC',
+    Rack: 'Rack',
+    Uptime: 'Uptime',
+    PDisks: 'PDisks',
+    Missing: 'Missing',
+} as const;
 
-type TableColumnsIdsKeys = keyof typeof TableColumnsIds;
-type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
+type TableColumnId = ValueOf<typeof TableColumnsIds>;
 
 interface StorageNodesProps {
     data: PreparedStorageNode[];
@@ -39,12 +41,14 @@ interface StorageNodesProps {
     nodesUptimeFilter: keyof typeof NodesUptimeFilterValues;
     onShowAll?: VoidFunction;
     additionalNodesInfo?: AdditionalNodesInfo;
+    sort?: SortOrder;
+    handleSort?: HandleSort;
 }
 
-const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
+const tableColumnsNames: Record<TableColumnId, string> = {
     NodeId: 'Node ID',
-    FQDN: 'FQDN',
-    DataCenter: 'DC',
+    Host: 'Host',
+    DC: 'DC',
     Rack: 'Rack',
     Uptime: 'Uptime',
     PDisks: 'PDisks',
@@ -53,26 +57,6 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
 
 const b = cn('global-storage-nodes');
 
-function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
-    switch (visibleEntities) {
-        case VISIBLE_ENTITIES.all: {
-            return {
-                columnId: TableColumnsIds.NodeId,
-                order: DataTable.ASCENDING,
-            };
-        }
-        case VISIBLE_ENTITIES.missing: {
-            return {
-                columnId: TableColumnsIds.Missing,
-                order: DataTable.DESCENDING,
-            };
-        }
-        default: {
-            return undefined;
-        }
-    }
-}
-
 export function StorageNodes({
     data,
     tableSettings,
@@ -80,10 +64,12 @@ export function StorageNodes({
     onShowAll,
     nodesUptimeFilter,
     additionalNodesInfo,
+    sort,
+    handleSort,
 }: StorageNodesProps) {
     const getNodeRef = additionalNodesInfo?.getNodeRef;
 
-    const allColumns: Column<PreparedStorageNode>[] = [
+    const rawColumns: Column<PreparedStorageNode>[] = [
         {
             name: TableColumnsIds.NodeId,
             header: tableColumnsNames[TableColumnsIds.NodeId],
@@ -91,8 +77,8 @@ export function StorageNodes({
             align: DataTable.RIGHT,
         },
         {
-            name: TableColumnsIds.FQDN,
-            header: tableColumnsNames[TableColumnsIds.FQDN],
+            name: TableColumnsIds.Host,
+            header: tableColumnsNames[TableColumnsIds.Host],
             width: 350,
             render: ({row}) => {
                 return <NodeHostWrapper node={row} getNodeRef={getNodeRef} />;
@@ -100,8 +86,8 @@ export function StorageNodes({
             align: DataTable.LEFT,
         },
         {
-            name: TableColumnsIds.DataCenter,
-            header: tableColumnsNames[TableColumnsIds.DataCenter],
+            name: TableColumnsIds.DC,
+            header: tableColumnsNames[TableColumnsIds.DC],
             render: ({row}) => row.DataCenter || '—',
             align: DataTable.LEFT,
         },
@@ -144,10 +130,13 @@ export function StorageNodes({
         },
     ];
 
-    let columns = allColumns;
+    let columns = rawColumns.map((column) => ({
+        ...column,
+        sortable: isSortableNodesProperty(column.name),
+    }));
 
-    if (visibleEntities === VISIBLE_ENTITIES.space) {
-        columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
+    if (visibleEntities !== VISIBLE_ENTITIES.missing) {
+        columns = columns.filter((col) => col.name !== TableColumnsIds.Missing);
     }
 
     if (!data.length) {
@@ -187,9 +176,10 @@ export function StorageNodes({
                 ...tableSettings,
                 dynamicRenderType: 'variable',
             }}
-            initialSortOrder={setSortOrder(visibleEntities)}
             emptyDataMessage={i18n('empty.default')}
             rowClassName={(row) => b('node', {unavailable: isUnavailableNode(row)})}
+            sortOrder={sort}
+            onSort={handleSort}
         />
     ) : null;
 }

package/dist/containers/Storage/utils/index.ts

@@ -1,4 +1,4 @@
-import type {IStoragePoolGroup} from '../../../types/store/storage';
+import type {PreparedStorageGroup} from '../../../store/reducers/storage/types';
 import {EFlag} from '../../../types/api/enums';
 
 export * from './constants';
@@ -35,12 +35,12 @@ const degradationEvaluators = {
 const canEvaluateErasureSpecies = (value?: string): value is keyof typeof degradationEvaluators =>
     value !== undefined && value in degradationEvaluators;
 
-export const getDegradedSeverity = (group: IStoragePoolGroup) => {
+export const getDegradedSeverity = (group: PreparedStorageGroup) => {
     const evaluate = canEvaluateErasureSpecies(group.ErasureSpecies)
         ? degradationEvaluators[group.ErasureSpecies]
         : defaultDegradationEvaluator;
 
-    return evaluate(group.Missing);
+    return evaluate(group.Degraded);
 };
 
 export const getUsageSeverityForStorageGroup = generateEvaluator(80, 85, [

package/dist/containers/Tablet/Tablet.tsx

@@ -13,6 +13,7 @@ import {DEVELOPER_UI_TITLE} from '../../utils/constants';
 import '../../services/api';
 import {parseQuery} from '../../routes';
 
+import type {EType} from '../../types/api/tablet';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {Tag} from '../../components/Tag';
@@ -48,10 +49,14 @@ export const Tablet = () => {
         error,
     } = useTypedSelector((state) => state.tablet);
 
-    const {nodeId: queryNodeId, tenantName: queryTenantName} = parseQuery(location);
-
+    const {
+        nodeId: queryNodeId,
+        tenantName: queryTenantName,
+        type: queryTabletType,
+    } = parseQuery(location);
     const nodeId = tablet.NodeId?.toString() || queryNodeId?.toString();
     const tenantName = tenantPath || queryTenantName?.toString();
+    const type = tablet.Type || (queryTabletType?.toString() as EType | undefined);
 
     // NOTE: should be reviewed when migrating to React 18
     useEffect(() => {
@@ -79,9 +84,10 @@ export const Tablet = () => {
                 nodeIds: nodeId ? [nodeId] : [],
                 tenantName,
                 tabletId: id,
+                tabletType: type,
             }),
         );
-    }, [dispatch, tenantName, id, nodeId]);
+    }, [dispatch, tenantName, id, nodeId, type]);
 
     const renderExternalLinks = (link: {name: string; path: string}, index: number) => {
         return (

package/dist/containers/Tenant/Query/QueryDuration/QueryDuration.scss

@@ -5,4 +5,12 @@
     margin-left: 10px;
 
     color: var(--yc-color-text-complementary);
+
+    &__item-with-popover {
+        white-space: nowrap;
+    }
+
+    &__popover {
+        max-width: 300px;
+    }
 }