ydb-embedded-ui 3.3.2 → 3.3.4

package/dist/containers/Storage/PDisk/__tests__/colors.tsx

@@ -7,7 +7,7 @@ import {TPDiskState} from '../../../../types/api/pdisk';
 import {PDisk} from '../PDisk';
 
 describe('PDisk state', () => {
-    it('Should determine severity based on State', () => {
+    it('Should determine severity based on State if space severity is OK', () => {
         const {getAllByRole} = renderWithStore(
             <MemoryRouter>
                 <PDisk nodeId={1} data={{State: TPDiskState.Normal}} />
@@ -20,6 +20,55 @@ describe('PDisk state', () => {
         expect(normalDisk.className).not.toBe(erroredDisk.className);
     });
 
+    it('Should determine severity based on space utilization if state severity is OK', () => {
+        const {getAllByRole} = renderWithStore(
+            <MemoryRouter>
+                <PDisk
+                    nodeId={1}
+                    data={{State: TPDiskState.Normal, AvailableSize: '100', TotalSize: '100'}}
+                />
+                <PDisk
+                    nodeId={2}
+                    data={{State: TPDiskState.Normal, AvailableSize: '14', TotalSize: '100'}}
+                />
+                <PDisk
+                    nodeId={3}
+                    data={{State: TPDiskState.Normal, AvailableSize: '4', TotalSize: '100'}}
+                />
+            </MemoryRouter>,
+        );
+
+        const [disk1, disk2, disk3] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_green\b/i);
+        expect(disk2.className).toMatch(/_yellow\b/i);
+        expect(disk3.className).toMatch(/_red\b/i);
+    });
+
+    it('Should determine severity based on max severity of state and space utilization ', () => {
+        const {getAllByRole} = renderWithStore(
+            <MemoryRouter>
+                <PDisk
+                    nodeId={1}
+                    data={{
+                        State: TPDiskState.ChunkQuotaError,
+                        AvailableSize: '100',
+                        TotalSize: '100',
+                    }}
+                />
+                <PDisk
+                    nodeId={2}
+                    data={{State: TPDiskState.Normal, AvailableSize: '4', TotalSize: '100'}}
+                />
+            </MemoryRouter>,
+        );
+
+        const [disk1, disk2] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_red\b/i);
+        expect(disk2.className).toMatch(/_red\b/i);
+    });
+
     it('Should display as unavailabe when no State is provided', () => {
         const {getAllByRole} = renderWithStore(
             <MemoryRouter>
@@ -34,4 +83,18 @@ describe('PDisk state', () => {
         expect(disk1.className).toMatch(/_grey\b/i);
         expect(disk2.className).not.toMatch(/_grey\b/i);
     });
+
+    it('Should display as unavailabe when no State is provided event if space severity is not OK', () => {
+        const {getAllByRole} = renderWithStore(
+            <MemoryRouter>
+                <PDisk nodeId={1} data={{AvailableSize: '14', TotalSize: '100'}} />
+                <PDisk nodeId={2} data={{AvailableSize: '4', TotalSize: '100'}} />
+            </MemoryRouter>,
+        );
+
+        const [disk1, disk2] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_grey\b/i);
+        expect(disk2.className).toMatch(/_grey\b/i);
+    });
 });

package/dist/containers/Storage/Storage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 import {RadioButton} from '@gravity-ui/uikit';
 
 import {Search} from '../../components/Search';

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

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
-import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
+import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import shieldIcon from '../../../assets/icons/shield.svg';
@@ -20,7 +20,7 @@ import {getUsage, isFullDonorData} from '../../../utils/storage';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import {VDisk} from '../VDisk';
-import {getDegradedSeverity, getUsageSeverity} from '../utils';
+import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
 
 import i18n from './i18n';
 import './StorageGroups.scss';
@@ -28,6 +28,7 @@ import './StorageGroups.scss';
 enum TableColumnsIds {
     PoolName = 'PoolName',
     Type = 'Type',
+    ErasureSpecies = 'ErasureSpecies',
     GroupID = 'GroupID',
     Used = 'Used',
     Limit = 'Limit',
@@ -53,6 +54,7 @@ interface StorageGroupsProps {
 const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
     PoolName: 'Pool Name',
     Type: 'Type',
+    ErasureSpecies: 'Erasure',
     GroupID: 'Group ID',
     Used: 'Used',
     Limit: 'Limit',
@@ -127,6 +129,7 @@ function StorageGroups({
         {
             name: TableColumnsIds.Type,
             header: tableColumnsNames[TableColumnsIds.Type],
+            // prettier-ignore
             render: ({value, row}) => (
                 <>
                     <Label>{(value as string) || '—'}</Label>
@@ -145,6 +148,12 @@ function StorageGroups({
                 </>
             ),
         },
+        {
+            name: TableColumnsIds.ErasureSpecies,
+            header: tableColumnsNames[TableColumnsIds.ErasureSpecies],
+            render: ({row}) => (row.ErasureSpecies ? row.ErasureSpecies : '-'),
+            align: DataTable.LEFT,
+        },
         {
             name: TableColumnsIds.Missing,
             header: tableColumnsNames[TableColumnsIds.Missing],
@@ -164,7 +173,7 @@ function StorageGroups({
                 // but the absence of a value is more clear
                 return row.Limit ? (
                     <Label
-                        theme={getUsageSeverity(usage)}
+                        theme={getUsageSeverityForStorageGroup(usage)}
                         className={b('usage-label', {overload: usage >= 90})}
                     >
                         {usage}%

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
 
-import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
+import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {VisibleEntities} from '../../../store/reducers/storage';

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

@@ -1,12 +1,14 @@
 import type {IStoragePoolGroup} from '../../../types/store/storage';
+import {EFlag} from '../../../types/api/enums';
 
 export * from './constants';
 
-const generateEvaluator = <
-    OkLevel extends string,
-    WarnLevel extends string,
-    CritLevel extends string
->(warn: number, crit: number, levels: [OkLevel, WarnLevel, CritLevel]) =>
+const generateEvaluator =
+    <OkLevel extends string, WarnLevel extends string, CritLevel extends string>(
+        warn: number,
+        crit: number,
+        levels: [OkLevel, WarnLevel, CritLevel],
+    ) =>
     (value: number) => {
         if (0 <= value && value < warn) {
             return levels[0];
@@ -34,12 +36,26 @@ const canEvaluateErasureSpecies = (value?: string): value is keyof typeof degrad
     value !== undefined && value in degradationEvaluators;
 
 export const getDegradedSeverity = (group: IStoragePoolGroup) => {
-    const evaluate = canEvaluateErasureSpecies(group.ErasureSpecies) ?
-        degradationEvaluators[group.ErasureSpecies] :
-        defaultDegradationEvaluator;
+    const evaluate = canEvaluateErasureSpecies(group.ErasureSpecies)
+        ? degradationEvaluators[group.ErasureSpecies]
+        : defaultDegradationEvaluator;
 
     return evaluate(group.Missing);
 };
 
-export const getUsageSeverity = generateEvaluator(80, 85, ['success', 'warning', 'danger']);
-export const getUsageSeverityForEntityStatus = generateEvaluator(80, 85, ['Green', 'Yellow', 'Red']);
+export const getUsageSeverityForStorageGroup = generateEvaluator(80, 85, [
+    'success',
+    'warning',
+    'danger',
+]);
+export const getUsageSeverityForEntityStatus = generateEvaluator(80, 85, [
+    'Green',
+    'Yellow',
+    'Red',
+]);
+
+export const getUsageSeverityForPDisk = generateEvaluator(85, 95, [
+    EFlag.Green,
+    EFlag.Yellow,
+    EFlag.Red,
+]);

package/dist/containers/Tablet/Tablet.js

@@ -16,7 +16,7 @@ import {Tag} from '../../components/Tag/Tag';
 import Icon from '../../components/Icon/Icon';
 import EmptyState from '../../components/EmptyState/EmptyState';
 import {Link as ExternalLink, Button, Loader} from '@gravity-ui/uikit';
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 import CriticalActionDialog from '../../components/CriticalActionDialog/CriticalActionDialog';
 import routes, {createHref} from '../../routes';
 import {getDefaultNodePath} from '../Node/NodePages';

package/dist/containers/Tenant/Acl/Acl.js

@@ -4,7 +4,7 @@ import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import {connect} from 'react-redux';
 import {Loader} from '@gravity-ui/uikit';
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 
 import './Acl.scss';

package/dist/containers/Tenant/Diagnostics/Consumers/Consumers.tsx

@@ -1,9 +1,9 @@
 import {useCallback, useEffect, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
-import { escapeRegExp } from 'lodash/fp';
+import {escapeRegExp} from 'lodash/fp';
 
-import DataTable, {Column} from '@yandex-cloud/react-data-table';
+import DataTable, {Column} from '@gravity-ui/react-data-table';
 
 import type {EPathType} from '../../../../types/api/schema';
 import {Loader} from '../../../../components/Loader';

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

@@ -12,7 +12,7 @@ import {Loader} from '../../../components/Loader';
 import {TopQueries} from './TopQueries';
 //@ts-ignore
 import DetailedOverview from './DetailedOverview/DetailedOverview';
-import {OverloadedShards} from './OverloadedShards';
+import {TopShards} from './TopShards';
 //@ts-ignore
 import Storage from '../../Storage/Storage';
 //@ts-ignore
@@ -124,8 +124,8 @@ function Diagnostics(props: DiagnosticsProps) {
                     />
                 );
             }
-            case GeneralPagesIds.overloadedShards: {
-                return <OverloadedShards tenantPath={tenantNameString} type={type} />;
+            case GeneralPagesIds.topShards: {
+                return <TopShards tenantPath={tenantNameString} type={type} />;
             }
             case GeneralPagesIds.nodes: {
                 return (

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -3,7 +3,7 @@ import {EPathType} from '../../../types/api/schema';
 export enum GeneralPagesIds {
     'overview' = 'Overview',
     'topQueries' = 'topQueries',
-    'overloadedShards' = 'overloadedShards',
+    'topShards' = 'topShards',
     'nodes' = 'Nodes',
     'tablets' = 'Tablets',
     'storage' = 'Storage',
@@ -29,9 +29,9 @@ const topQueries = {
     title: 'Top queries',
 };
 
-const overloadedShards = {
-    id: GeneralPagesIds.overloadedShards,
-    title: 'Overloaded shards',
+const topShards = {
+    id: GeneralPagesIds.topShards,
+    title: 'Top shards',
 };
 
 const nodes = {
@@ -75,7 +75,7 @@ const consumers = {
 export const DATABASE_PAGES = [
     overview,
     topQueries,
-    overloadedShards,
+    topShards,
     nodes,
     tablets,
     storage,
@@ -83,9 +83,9 @@ export const DATABASE_PAGES = [
     describe,
 ];
 
-export const TABLE_PAGES = [overview, overloadedShards, graph, tablets, hotKeys, describe];
+export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, describe];
 
-export const DIR_PAGES = [overview, overloadedShards, describe];
+export const DIR_PAGES = [overview, topShards, describe];
 
 export const CDC_STREAM_PAGES = [overview, consumers, describe];
 export const TOPIC_PAGES = [overview, consumers, describe];

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -2,7 +2,7 @@ import {useEffect, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 import {Loader} from '@gravity-ui/uikit';
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 
 import Icon from '../../../../components/Icon/Icon';
 

package/dist/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -1,15 +1,15 @@
 import {ReactNode, useCallback, useMemo} from 'react';
 import {shallowEqual, useDispatch, useSelector} from 'react-redux';
-import cn from 'bem-cn-lite';
 
-import {Loader} from '@gravity-ui/uikit';
+import {Loader} from '../../../../components/Loader';
 
 //@ts-ignore
-import SchemaInfoViewer from '../../Schema/SchemaInfoViewer/SchemaInfoViewer';
 import {TableIndexInfo} from '../../../../components/InfoViewer/schemaInfo';
+import {ResponseError} from '../../../../components/Errors/ResponseError';
 
 import {TopicInfo} from './TopicInfo';
 import {ChangefeedInfo} from './ChangefeedInfo';
+import {TableInfo} from './TableInfo';
 
 import {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
 import {
@@ -33,8 +33,6 @@ import {
 } from '../../../../store/reducers/olapStats';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 
-import './Overview.scss';
-
 function prepareOlapTableGeneral(item?: TEvDescribeSchemeResult, olapStats?: any[]) {
     const tableData = item?.PathDescription?.ColumnTableDescription;
 
@@ -70,8 +68,6 @@ interface OverviewProps {
     tenantName?: string;
 }
 
-const b = cn('kv-tenant-overview');
-
 function Overview({type, tenantName, className}: OverviewProps) {
     const dispatch = useDispatch();
 
@@ -81,6 +77,7 @@ function Overview({type, tenantName, className}: OverviewProps) {
         wasLoaded,
         autorefresh,
         currentSchemaPath,
+        error,
     } = useSelector((state: any) => state.schema);
 
     const {data: {result: olapStats} = {result: undefined}, loading: olapStatsLoading} =
@@ -144,14 +141,6 @@ function Overview({type, tenantName, className}: OverviewProps) {
             : currentItem;
     }, [type, olapStats, currentItem]);
 
-    const renderLoader = () => {
-        return (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
-        );
-    };
-
     const renderContent = () => {
         // verbose mapping to guarantee a correct render for new path types
         // TS will error when a new type is added but not mapped here
@@ -170,15 +159,15 @@ function Overview({type, tenantName, className}: OverviewProps) {
             [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={schemaData} />,
         };
 
-        return (
-            (type && pathTypeToComponent[type]?.()) || (
-                <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
-            )
-        );
+        return (type && pathTypeToComponent[type]?.()) || <TableInfo data={schemaData} />;
     };
 
     if ((loading && !wasLoaded) || (isEntityWithMergedImpl && !mergedChildrenPaths)) {
-        return renderLoader();
+        return <Loader size="m" />;
+    }
+
+    if (error) {
+        return <ResponseError error={error} />;
     }
 
     return <div className={className}>{renderContent()}</div>;

package/dist/containers/Tenant/{Schema/SchemaInfoViewer/SchemaInfoViewer.scss → Diagnostics/Overview/TableInfo/TableInfo.scss}

@@ -1,6 +1,12 @@
-.schema-info-viewer {
+@import '../../../../../styles/mixins.scss';
+
+.ydb-diagnostics-table-info {
     overflow: auto;
 
+    &__title {
+        @include info-viewer-title();
+    }
+
     &__row {
         display: flex;
         flex-wrap: wrap;
@@ -19,19 +25,11 @@
         }
     }
 
-    &__item {
+    &__info-block {
         margin-bottom: 20px;
 
         .info-viewer__items {
             grid-template-columns: minmax(max-content, 280px);
         }
     }
-
-    &__title {
-        margin: 15px 0 10px;
-
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 600;
-        line-height: var(--yc-text-body-2-line-height);
-    }
 }

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx

@@ -0,0 +1,71 @@
+import {useMemo} from 'react';
+import cn from 'bem-cn-lite';
+
+import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+
+import {InfoViewer} from '../../../../../components/InfoViewer';
+
+import {getEntityName} from '../../../utils';
+
+import {prepareTableInfo} from './prepareTableInfo';
+
+import i18n from './i18n';
+
+import './TableInfo.scss';
+
+const b = cn('ydb-diagnostics-table-info');
+
+interface TableInfoProps {
+    data?: TEvDescribeSchemeResult;
+}
+
+export const TableInfo = ({data}: TableInfoProps) => {
+    const entityName = getEntityName(data?.PathDescription);
+
+    const {
+        generalTableInfo = [],
+        tableStatsInfo = [],
+        tabletMetricsInfo = [],
+        partitionConfigInfo = [],
+    } = useMemo(() => prepareTableInfo(data), [data]);
+
+    return (
+        <div className={b()}>
+            <InfoViewer
+                info={generalTableInfo}
+                title={entityName}
+                className={b('info-block')}
+                renderEmptyState={() => <div className={b('title')}>{entityName}</div>}
+            />
+            <div className={b('row')}>
+                {tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (
+                    <div className={b('col')}>
+                        <InfoViewer
+                            info={tabletMetricsInfo}
+                            title={i18n('tabletMetrics')}
+                            className={b('info-block')}
+                            renderEmptyState={() => null}
+                        />
+                        <InfoViewer
+                            info={partitionConfigInfo}
+                            title={i18n('partitionConfig')}
+                            className={b('info-block')}
+                            renderEmptyState={() => null}
+                        />
+                    </div>
+                ) : null}
+                <div className={b('col')}>
+                    {tableStatsInfo.map((info, index) => (
+                        <InfoViewer
+                            key={index}
+                            info={info}
+                            title={index === 0 ? i18n('tableStats') : undefined}
+                            className={b('info-block')}
+                            renderEmptyState={() => null}
+                        />
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "tableStats": "Table Stats",
+  "tabletMetrics": "Tablet Metrics",
+  "partitionConfig": "Partition Config"
+}

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/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-overview-table-info';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/ru.json

@@ -0,0 +1,5 @@
+{
+  "tableStats": "Статистика таблицы",
+  "tabletMetrics": "Метрики таблетки",
+  "partitionConfig": "Конфигурация партиции"
+}

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/index.ts

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

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.ts

@@ -0,0 +1,96 @@
+import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+
+import {formatObject} from '../../../../../components/InfoViewer';
+import {
+    formatFollowerGroupItem,
+    formatPartitionConfigItem,
+    formatTableStatsItem,
+    formatTabletMetricsItem,
+} from '../../../../../components/InfoViewer/formatters';
+
+export const prepareTableInfo = (data?: TEvDescribeSchemeResult) => {
+    if (!data) {
+        return {};
+    }
+
+    const {PathDescription = {}} = data;
+
+    const {
+        TableStats = {},
+        TabletMetrics = {},
+        Table: {PartitionConfig = {}} = {},
+    } = PathDescription;
+
+    const {
+        PartCount,
+        RowCount,
+        DataSize,
+        IndexSize,
+
+        LastAccessTime,
+        LastUpdateTime,
+
+        ImmediateTxCompleted,
+        PlannedTxCompleted,
+        TxRejectedByOverload,
+        TxRejectedBySpace,
+        TxCompleteLagMsec,
+        InFlightTxCount,
+
+        RowUpdates,
+        RowDeletes,
+        RowReads,
+        RangeReads,
+        RangeReadRows,
+
+        ...restTableStats
+    } = TableStats;
+
+    const {FollowerGroups, FollowerCount, CrossDataCenterFollowerCount} = PartitionConfig;
+
+    const generalTableInfo = formatObject(formatTableStatsItem, {
+        PartCount,
+        RowCount,
+        DataSize,
+        IndexSize,
+        ...restTableStats,
+    });
+
+    const tableStatsInfo = [
+        formatObject(formatTableStatsItem, {
+            LastAccessTime,
+            LastUpdateTime,
+        }),
+        formatObject(formatTableStatsItem, {
+            ImmediateTxCompleted,
+            PlannedTxCompleted,
+            TxRejectedByOverload,
+            TxRejectedBySpace,
+            TxCompleteLagMsec,
+            InFlightTxCount,
+        }),
+        formatObject(formatTableStatsItem, {
+            RowUpdates,
+            RowDeletes,
+            RowReads,
+            RangeReads,
+            RangeReadRows,
+        }),
+    ];
+
+    const tabletMetricsInfo = formatObject(formatTabletMetricsItem, TabletMetrics);
+
+    let partitionConfigInfo = [];
+
+    if (Array.isArray(FollowerGroups) && FollowerGroups.length > 0) {
+        partitionConfigInfo = formatObject(formatFollowerGroupItem, FollowerGroups[0]);
+    } else if (FollowerCount !== undefined) {
+        partitionConfigInfo.push(formatPartitionConfigItem('FollowerCount', FollowerCount));
+    } else if (CrossDataCenterFollowerCount !== undefined) {
+        partitionConfigInfo.push(
+            formatPartitionConfigItem('CrossDataCenterFollowerCount', CrossDataCenterFollowerCount),
+        );
+    }
+
+    return {generalTableInfo, tableStatsInfo, tabletMetricsInfo, partitionConfigInfo};
+};

package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx

@@ -2,7 +2,7 @@ import {useCallback, useEffect, useRef, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import DataTable, {Column, Settings} from '@yandex-cloud/react-data-table';
+import DataTable, {Column, Settings} from '@gravity-ui/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
 
 import {DateRange, DateRangeValues} from '../../../../components/DateRange';
@@ -21,6 +21,7 @@ import type {EPathType} from '../../../../types/api/schema';
 import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries';
 import type {IQueryResult} from '../../../../types/store/query';
 
+import {formatDateTime} from '../../../../utils';
 import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';
@@ -51,6 +52,11 @@ const COLUMNS: Column<KeyValueRow>[] = [
         sortable: false,
         render: ({value}) => <TruncatedQuery value={value} maxQueryHeight={MAX_QUERY_HEIGHT} />,
     },
+    {
+        name: 'IntervalEnd',
+        width: 140,
+        render: ({value}) => formatDateTime(new Date(value as string).getTime()),
+    },
 ];
 
 interface TopQueriesProps {