fix: fix top queries table row height

src/components/CellWithPopover/CellWithPopover.scss

@@ -0,0 +1,13 @@
+.ydb-cell-with-popover {
+    display: inline-block;
+    overflow: hidden;
+
+    max-width: 100%;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &__wrapper {
+        display: flex;
+    }
+}

src/components/CellWithPopover/CellWithPopover.tsx

@@ -0,0 +1,17 @@
+import cn from 'bem-cn-lite';
+
+import {Popover, type PopoverProps} from '@gravity-ui/uikit';
+
+import './CellWithPopover.scss';
+
+const b = cn('ydb-cell-with-popover');
+
+export function CellWithPopover({children, className, ...props}: PopoverProps) {
+    return (
+        <div className={b('wrapper')}>
+            <Popover className={b(null, className)} {...props}>
+                {children}
+            </Popover>
+        </div>
+    );
+}

src/components/TruncatedQuery/TopQueriesTruncatedQuery.tsx

@@ -0,0 +1,20 @@
+import cn from 'bem-cn-lite';
+
+import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
+
+import './TruncatedQuery.scss';
+
+const b = cn('kv-truncated-query');
+
+interface TopQueriesTruncatedQueryProps {
+    value: string | undefined;
+}
+
+export const TopQueriesTruncatedQuery = ({value = ''}: TopQueriesTruncatedQueryProps) => {
+    const content = value.split('\n').slice(0, 5).join('\n');
+    return (
+        <CellWithPopover contentClassName={b('popover-content')} content={content}>
+            {value}
+        </CellWithPopover>
+    );
+};

src/components/TruncatedQuery/TruncatedQuery.scss

@@ -14,4 +14,12 @@
             }
         }
     }
+
+    &__popover-content {
+        overflow: hidden;
+
+        max-width: 600px;
+
+        white-space: pre;
+    }
 }

src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx

@@ -1,4 +1,3 @@
-import qs from 'qs';
 import {useDispatch} from 'react-redux';
 import {useHistory, useLocation} from 'react-router';
 import {useCallback} from 'react';
@@ -14,6 +13,7 @@ import {
 } from '../../../../../store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries';
 import {changeUserInput} from '../../../../../store/reducers/executeQuery';
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {parseQuery} from '../../../../../routes';
 import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
 import {getTenantOverviewTopQueriesColumns} from '../../TopQueries/getTopQueriesColumns';
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
@@ -55,9 +55,7 @@ export function TopQueries({path}: TopQueriesProps) {
 
             dispatch(changeUserInput({input}));
 
-            const queryParams = qs.parse(location.search, {
-                ignoreQueryPrefix: true,
-            });
+            const queryParams = parseQuery(location);
 
             const queryPath = getTenantPath({
                 ...queryParams,

src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx

@@ -2,7 +2,6 @@ import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column} from '@gravity-ui/react-data-table';
-import {Popover} from '@gravity-ui/uikit';
 
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
 import {
@@ -17,6 +16,7 @@ import type {KeyValueRow} from '../../../../../types/api/query';
 import {formatBytes, getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
 import {TableSkeleton} from '../../../../../components/TableSkeleton/TableSkeleton';
 import {ResponseError} from '../../../../../components/Errors/ResponseError';
+import {CellWithPopover} from '../../../../../components/CellWithPopover/CellWithPopover';
 
 import './TenantStorage.scss';
 
@@ -67,13 +67,7 @@ export function TopTables({path}: TopTablesProps) {
         {
             name: 'Path',
             sortable: false,
-            render: ({row}) => (
-                <div className={b('cell-with-popover-wrapper')}>
-                    <Popover className={b('cell-with-popover')} content={row.Path}>
-                        {row.Path}
-                    </Popover>
-                </div>
-            ),
+            render: ({row}) => <CellWithPopover content={row.Path}>{row.Path}</CellWithPopover>,
         },
     ];
 

src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx

@@ -30,6 +30,7 @@ import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';
 import {parseQuery} from '../../../../routes';
 import {QUERY_TABLE_SETTINGS} from '../../utils/constants';
+import {isSortableTopQueriesProperty} from '../../../../utils/diagnostics';
 import {isColumnEntityType} from '../../utils/schema';
 import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
 import {getTopQueriesColumns} from './getTopQueriesColumns';
@@ -58,7 +59,7 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
         data: {result: data = undefined} = {},
         filters: storeFilters,
     } = useTypedSelector((state) => state.executeTopQueries);
-    const columns = getTopQueriesColumns();
+    const rawColumns = getTopQueriesColumns();
 
     const preventFetch = useRef(false);
 
@@ -71,6 +72,11 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
         dispatch(setTopQueriesFilters(filters));
     }, [dispatch, filters]);
 
+    const columns = rawColumns.map((column) => ({
+        ...column,
+        sortable: isSortableTopQueriesProperty(column.name),
+    }));
+
     const setDefaultFiltersFromResponse = (responseData?: IQueryResult) => {
         const intervalEnd = responseData?.result?.[0]?.IntervalEnd;
 

src/containers/Tenant/Diagnostics/TopQueries/getTopQueriesColumns.tsx

@@ -5,6 +5,7 @@ import DataTable, {type Column} from '@gravity-ui/react-data-table';
 import type {KeyValueRow} from '../../../../types/api/query';
 import {formatDateTime, formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
 import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {TopQueriesTruncatedQuery} from '../../../../components/TruncatedQuery/TopQueriesTruncatedQuery';
 import {MAX_QUERY_HEIGHT} from '../../utils/constants';
 
 import './TopQueries.scss';
@@ -18,6 +19,7 @@ const TOP_QUERIES_COLUMNS_IDS = {
     ReadRows: 'ReadRows',
     ReadBytes: 'ReadBytes',
     UserSID: 'UserSID',
+    TopQueriesQueryText: 'TopQueriesQueryText',
 };
 
 const cpuTimeUsColumn: Column<KeyValueRow> = {
@@ -66,6 +68,12 @@ const userSIDColumn: Column<KeyValueRow> = {
     align: DataTable.LEFT,
 };
 
+const topQueriesQueryTextColumn: Column<KeyValueRow> = {
+    name: TOP_QUERIES_COLUMNS_IDS.TopQueriesQueryText,
+    render: ({row}) => <TopQueriesTruncatedQuery value={row.QueryText?.toString()} />,
+    sortable: false,
+};
+
 export const getTopQueriesColumns = (): Column<KeyValueRow>[] => {
     return [
         cpuTimeUsColumn,
@@ -78,5 +86,5 @@ export const getTopQueriesColumns = (): Column<KeyValueRow>[] => {
 };
 
 export const getTenantOverviewTopQueriesColumns = (): Column<KeyValueRow>[] => {
-    return [queryTextColumn, cpuTimeUsColumn];
+    return [topQueriesQueryTextColumn, cpuTimeUsColumn];
 };

src/utils/diagnostics.ts

@@ -1,11 +1,23 @@
 import {ValueOf} from '../types/common';
 
-export const TOP_SHARDS_SORT_VALUES = {
+const TOP_SHARDS_SORT_VALUES = {
     CPUCores: 'CPUCores',
     DataSize: 'DataSize',
 } as const;
 
-export type TopShardsSortValue = ValueOf<typeof TOP_SHARDS_SORT_VALUES>;
+const TOP_QUERIES_SORT_VALUES = {
+    CPUTimeUs: 'CPUTimeUs',
+    EndTime: 'EndTime',
+    ReadRows: 'ReadRows',
+    ReadBytes: 'ReadBytes',
+    UserSID: 'UserSID',
+} as const;
+
+type TopShardsSortValue = ValueOf<typeof TOP_SHARDS_SORT_VALUES>;
+type TopQueriesSortValue = ValueOf<typeof TOP_QUERIES_SORT_VALUES>;
 
 export const isSortableTopShardsProperty = (value: string): value is TopShardsSortValue =>
     Object.values(TOP_SHARDS_SORT_VALUES).includes(value as TopShardsSortValue);
+
+export const isSortableTopQueriesProperty = (value: string): value is TopQueriesSortValue =>
+    Object.values(TOP_QUERIES_SORT_VALUES).includes(value as TopQueriesSortValue);