feat: design query tab

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

@@ -17,10 +17,10 @@ import {parseQueryErrorToString} from '../../../../utils/query';
 import {getRunningQueriesColumns} from './columns/columns';
 import {
     DEFAULT_RUNNING_QUERIES_COLUMNS,
+    QUERIES_COLUMNS_TITLES,
     REQUIRED_RUNNING_QUERIES_COLUMNS,
     RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY,
     RUNNING_QUERIES_SELECTED_COLUMNS_LS_KEY,
-    TOP_QUERIES_COLUMNS_TITLES,
 } from './columns/constants';
 import i18n from './i18n';
 import {TOP_QUERIES_TABLE_SETTINGS, useRunningQueriesSort} from './utils';
@@ -52,7 +52,7 @@ export const RunningQueriesData = ({
     const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
         columns,
         RUNNING_QUERIES_SELECTED_COLUMNS_LS_KEY,
-        TOP_QUERIES_COLUMNS_TITLES,
+        QUERIES_COLUMNS_TITLES,
         DEFAULT_RUNNING_QUERIES_COLUMNS,
         REQUIRED_RUNNING_QUERIES_COLUMNS,
     );

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

@@ -20,8 +20,8 @@ import {parseQueryErrorToString} from '../../../../utils/query';
 import {getTopQueriesColumns} from './columns/columns';
 import {
     DEFAULT_TOP_QUERIES_COLUMNS,
+    QUERIES_COLUMNS_TITLES,
     REQUIRED_TOP_QUERIES_COLUMNS,
-    TOP_QUERIES_COLUMNS_TITLES,
     TOP_QUERIES_COLUMNS_WIDTH_LS_KEY,
     TOP_QUERIES_SELECTED_COLUMNS_LS_KEY,
 } from './columns/constants';
@@ -62,7 +62,7 @@ export const TopQueriesData = ({
     const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
         columns,
         TOP_QUERIES_SELECTED_COLUMNS_LS_KEY,
-        TOP_QUERIES_COLUMNS_TITLES,
+        QUERIES_COLUMNS_TITLES,
         DEFAULT_TOP_QUERIES_COLUMNS,
         REQUIRED_TOP_QUERIES_COLUMNS,
     );

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

@@ -1,5 +1,5 @@
 import DataTable from '@gravity-ui/react-data-table';
-import type {Column} from '@gravity-ui/react-data-table';
+import type {Column, OrderType} from '@gravity-ui/react-data-table';
 
 import {YDBSyntaxHighlighter} from '../../../../../components/SyntaxHighlighter/YDBSyntaxHighlighter';
 import {TruncatedQuery} from '../../../../../components/TruncatedQuery/TruncatedQuery';
@@ -11,8 +11,9 @@ import {formatToMs, parseUsToMs} from '../../../../../utils/timeParsers';
 import {MAX_QUERY_HEIGHT} from '../../../utils/constants';
 
 import {
-    TOP_QUERIES_COLUMNS_IDS,
-    TOP_QUERIES_COLUMNS_TITLES,
+    QUERIES_COLUMNS_IDS,
+    QUERIES_COLUMNS_TITLES,
+    isSortableRunningQueriesColumn,
     isSortableTopQueriesColumn,
 } from './constants';
 
@@ -21,16 +22,16 @@ import '../TopQueries.scss';
 const b = cn('kv-top-queries');
 
 const cpuTimeUsColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.CPUTime,
-    header: TOP_QUERIES_COLUMNS_TITLES.CPUTime,
+    name: QUERIES_COLUMNS_IDS.CPUTime,
+    header: QUERIES_COLUMNS_TITLES.CPUTime,
     render: ({row}) => formatToMs(parseUsToMs(row.CPUTimeUs ?? undefined)),
     width: 120,
     align: DataTable.RIGHT,
 };
 
 const queryTextColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.QueryText,
-    header: TOP_QUERIES_COLUMNS_TITLES.QueryText,
+    name: QUERIES_COLUMNS_IDS.QueryText,
+    header: QUERIES_COLUMNS_TITLES.QueryText,
     render: ({row}) => (
         <div className={b('query')}>
             <TruncatedQuery
@@ -44,39 +45,39 @@ const queryTextColumn: Column<KeyValueRow> = {
 };
 
 const endTimeColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.EndTime,
-    header: TOP_QUERIES_COLUMNS_TITLES.EndTime,
+    name: QUERIES_COLUMNS_IDS.EndTime,
+    header: QUERIES_COLUMNS_TITLES.EndTime,
     render: ({row}) => formatDateTime(new Date(row.EndTime as string).getTime()),
     align: DataTable.RIGHT,
     width: 200,
 };
 
 const readRowsColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.ReadRows,
-    header: TOP_QUERIES_COLUMNS_TITLES.ReadRows,
+    name: QUERIES_COLUMNS_IDS.ReadRows,
+    header: QUERIES_COLUMNS_TITLES.ReadRows,
     render: ({row}) => formatNumber(row.ReadRows),
     align: DataTable.RIGHT,
     width: 150,
 };
 
 const readBytesColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.ReadBytes,
-    header: TOP_QUERIES_COLUMNS_TITLES.ReadBytes,
+    name: QUERIES_COLUMNS_IDS.ReadBytes,
+    header: QUERIES_COLUMNS_TITLES.ReadBytes,
     render: ({row}) => formatNumber(row.ReadBytes),
     align: DataTable.RIGHT,
     width: 150,
 };
 
 const userSIDColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.UserSID,
-    header: TOP_QUERIES_COLUMNS_TITLES.UserSID,
+    name: QUERIES_COLUMNS_IDS.UserSID,
+    header: QUERIES_COLUMNS_TITLES.UserSID,
     render: ({row}) => <div className={b('user-sid')}>{row.UserSID || '–'}</div>,
     align: DataTable.LEFT,
 };
 
 const oneLineQueryTextColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.OneLineQueryText,
-    header: TOP_QUERIES_COLUMNS_TITLES.OneLineQueryText,
+    name: QUERIES_COLUMNS_IDS.OneLineQueryText,
+    header: QUERIES_COLUMNS_TITLES.OneLineQueryText,
     render: ({row}) => (
         <YDBSyntaxHighlighter
             language="yql"
@@ -90,39 +91,38 @@ const oneLineQueryTextColumn: Column<KeyValueRow> = {
 };
 
 const queryHashColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.QueryHash,
-    header: TOP_QUERIES_COLUMNS_TITLES.QueryHash,
+    name: QUERIES_COLUMNS_IDS.QueryHash,
+    header: QUERIES_COLUMNS_TITLES.QueryHash,
     render: ({row}) => generateHash(String(row.QueryText)),
     width: 130,
 };
 
 const durationColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.Duration,
-    header: TOP_QUERIES_COLUMNS_TITLES.Duration,
+    name: QUERIES_COLUMNS_IDS.Duration,
+    header: QUERIES_COLUMNS_TITLES.Duration,
     render: ({row}) => formatToMs(parseUsToMs(row.Duration ?? undefined)),
     align: DataTable.RIGHT,
     width: 150,
 };
 
 const queryStartColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.QueryStartAt,
-    header: TOP_QUERIES_COLUMNS_TITLES.QueryStartAt,
+    name: QUERIES_COLUMNS_IDS.QueryStartAt,
+    header: QUERIES_COLUMNS_TITLES.QueryStartAt,
     render: ({row}) => formatDateTime(new Date(row.QueryStartAt as string).getTime()),
     resizeable: false,
-    defaultOrder: DataTable.DESCENDING,
 };
 
 const requestUnitsColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.RequestUnits,
-    header: TOP_QUERIES_COLUMNS_TITLES.RequestUnits,
+    name: QUERIES_COLUMNS_IDS.RequestUnits,
+    header: QUERIES_COLUMNS_TITLES.RequestUnits,
     render: ({row}) => formatNumber(row.RequestUnits),
     align: DataTable.RIGHT,
     width: 150,
 };
 
 const applicationColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.ApplicationName,
-    header: TOP_QUERIES_COLUMNS_TITLES.ApplicationName,
+    name: QUERIES_COLUMNS_IDS.ApplicationName,
+    header: QUERIES_COLUMNS_TITLES.ApplicationName,
     render: ({row}) => <div className={b('user-sid')}>{row.ApplicationName || '–'}</div>,
 };
 
@@ -142,18 +142,18 @@ export function getTopQueriesColumns() {
     return columns.map((column) => ({
         ...column,
         sortable: isSortableTopQueriesColumn(column.name),
+        defaultOrder: DataTable.DESCENDING as OrderType,
     }));
 }
 
 export function getTenantOverviewTopQueriesColumns() {
     return [queryHashColumn, oneLineQueryTextColumn, cpuTimeUsColumn];
 }
-
 export function getRunningQueriesColumns() {
     const columns = [userSIDColumn, queryStartColumn, queryTextColumn, applicationColumn];
 
     return columns.map((column) => ({
         ...column,
-        sortable: isSortableTopQueriesColumn(column.name),
+        sortable: isSortableRunningQueriesColumn(column.name),
     }));
 }

src/containers/Tenant/Diagnostics/TopQueries/columns/constants.ts

@@ -7,7 +7,7 @@ export const RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY = 'runningQueriesColumnsWidth'
 export const TOP_QUERIES_SELECTED_COLUMNS_LS_KEY = 'topQueriesSelectedColumns';
 export const RUNNING_QUERIES_SELECTED_COLUMNS_LS_KEY = 'runningQueriesSelectedColumns';
 
-export const TOP_QUERIES_COLUMNS_IDS = {
+export const QUERIES_COLUMNS_IDS = {
     CPUTime: 'CPUTime',
     QueryText: 'QueryText',
     EndTime: 'EndTime',
@@ -21,9 +21,9 @@ export const TOP_QUERIES_COLUMNS_IDS = {
     ApplicationName: 'ApplicationName',
     RequestUnits: 'RequestUnits',
 } as const;
-export type TopQueriesColumnId = ValueOf<typeof TOP_QUERIES_COLUMNS_IDS>;
+export type QueriesColumnId = ValueOf<typeof QUERIES_COLUMNS_IDS>;
 
-export const DEFAULT_TOP_QUERIES_COLUMNS: TopQueriesColumnId[] = [
+export const DEFAULT_TOP_QUERIES_COLUMNS: QueriesColumnId[] = [
     'QueryHash',
     'CPUTime',
     'QueryText',
@@ -34,19 +34,19 @@ export const DEFAULT_TOP_QUERIES_COLUMNS: TopQueriesColumnId[] = [
     'RequestUnits',
     'UserSID',
 ];
-export const REQUIRED_TOP_QUERIES_COLUMNS: TopQueriesColumnId[] = ['CPUTime', 'QueryText'];
+export const REQUIRED_TOP_QUERIES_COLUMNS: QueriesColumnId[] = ['CPUTime', 'QueryText'];
 
-export const DEFAULT_RUNNING_QUERIES_COLUMNS: TopQueriesColumnId[] = [
+export const DEFAULT_RUNNING_QUERIES_COLUMNS: QueriesColumnId[] = [
     'UserSID',
     'QueryStartAt',
     'QueryText',
     'ApplicationName',
 ];
 
 // Required columns that must always be displayed for running queries
-export const REQUIRED_RUNNING_QUERIES_COLUMNS: TopQueriesColumnId[] = ['QueryStartAt', 'QueryText'];
+export const REQUIRED_RUNNING_QUERIES_COLUMNS: QueriesColumnId[] = ['QueryStartAt', 'QueryText'];
 
-export const TOP_QUERIES_COLUMNS_TITLES: Record<TopQueriesColumnId, string> = {
+export const QUERIES_COLUMNS_TITLES: Record<QueriesColumnId, string> = {
     get CPUTime() {
         return i18n('cpu-time');
     },
@@ -85,7 +85,7 @@ export const TOP_QUERIES_COLUMNS_TITLES: Record<TopQueriesColumnId, string> = {
     },
 } as const;
 
-const TOP_QUERIES_COLUMNS_TO_SORT_FIELDS: Record<TopQueriesColumnId, string | undefined> = {
+const TOP_QUERIES_COLUMNS_TO_SORT_FIELDS: Record<QueriesColumnId, string | undefined> = {
     CPUTime: 'CPUTimeUs',
     QueryText: undefined,
     EndTime: undefined,
@@ -100,10 +100,33 @@ const TOP_QUERIES_COLUMNS_TO_SORT_FIELDS: Record<TopQueriesColumnId, string | un
     RequestUnits: 'RequestUnits',
 } as const;
 
+// Define sort fields specifically for running queries
+const RUNNING_QUERIES_COLUMNS_TO_SORT_FIELDS: Record<QueriesColumnId, string | undefined> = {
+    CPUTime: undefined,
+    QueryText: undefined,
+    EndTime: undefined,
+    ReadRows: undefined,
+    ReadBytes: undefined,
+    UserSID: 'UserSID',
+    OneLineQueryText: undefined,
+    QueryHash: undefined,
+    Duration: undefined,
+    QueryStartAt: 'QueryStartAt',
+    ApplicationName: 'ApplicationName',
+    RequestUnits: undefined,
+} as const;
 export function getTopQueriesColumnSortField(columnId?: string) {
-    return TOP_QUERIES_COLUMNS_TO_SORT_FIELDS[columnId as TopQueriesColumnId];
+    return TOP_QUERIES_COLUMNS_TO_SORT_FIELDS[columnId as QueriesColumnId];
+}
+
+export function getRunningQueriesColumnSortField(columnId?: string) {
+    return RUNNING_QUERIES_COLUMNS_TO_SORT_FIELDS[columnId as QueriesColumnId];
 }
 
 export function isSortableTopQueriesColumn(columnId: string) {
     return Boolean(getTopQueriesColumnSortField(columnId));
 }
+
+export function isSortableRunningQueriesColumn(columnId: string) {
+    return Boolean(getRunningQueriesColumnSortField(columnId));
+}

src/containers/Tenant/Diagnostics/TopQueries/utils.ts

@@ -6,35 +6,49 @@ import DataTable from '@gravity-ui/react-data-table';
 import {prepareBackendSortFieldsFromTableSort, useTableSort} from '../../../../utils/hooks';
 import {QUERY_TABLE_SETTINGS} from '../../utils/constants';
 
-import {TOP_QUERIES_COLUMNS_IDS, getTopQueriesColumnSortField} from './columns/constants';
+import {
+    QUERIES_COLUMNS_IDS,
+    getRunningQueriesColumnSortField,
+    getTopQueriesColumnSortField,
+} from './columns/constants';
 
 export const TOP_QUERIES_TABLE_SETTINGS: Settings = {
     ...QUERY_TABLE_SETTINGS,
     disableSortReset: true,
 };
 
-function useQueriesSort(initialSortColumn: string) {
+export function useTopQueriesSort() {
     const [tableSort, handleTableSort] = useTableSort({
-        initialSortColumn: initialSortColumn,
+        initialSortColumn: QUERIES_COLUMNS_IDS.CPUTime,
         initialSortOrder: DataTable.DESCENDING,
         multiple: true,
         fixedOrderType: DataTable.DESCENDING,
     });
 
-    const backendSort = React.useMemo(
-        () => prepareBackendSortFieldsFromTableSort(tableSort, getTopQueriesColumnSortField),
-        [tableSort],
-    );
-
     return {
         tableSort,
         handleTableSort,
-        backendSort,
+        backendSort: React.useMemo(
+            () => prepareBackendSortFieldsFromTableSort(tableSort, getTopQueriesColumnSortField),
+            [tableSort],
+        ),
     };
 }
-export function useTopQueriesSort() {
-    return useQueriesSort(TOP_QUERIES_COLUMNS_IDS.CPUTime);
-}
+
 export function useRunningQueriesSort() {
-    return useQueriesSort(TOP_QUERIES_COLUMNS_IDS.QueryStartAt);
+    const [tableSort, handleTableSort] = useTableSort({
+        initialSortColumn: QUERIES_COLUMNS_IDS.QueryStartAt,
+        initialSortOrder: DataTable.DESCENDING,
+        multiple: true,
+    });
+
+    return {
+        tableSort,
+        handleTableSort,
+        backendSort: React.useMemo(
+            () =>
+                prepareBackendSortFieldsFromTableSort(tableSort, getRunningQueriesColumnSortField),
+            [tableSort],
+        ),
+    };
 }

src/store/reducers/executeTopQueries/executeTopQueries.ts

@@ -93,7 +93,7 @@ SELECT
     ApplicationName
 FROM \`.sys/query_sessions\`
 WHERE ${filterConditions || 'true'} AND Query NOT LIKE '%${QUERY_TECHNICAL_MARK}%'
-${orderBy}
+AND QueryStartAt is not null ${orderBy}
 LIMIT ${limit || 100}`;
 }
 

tests/suites/tenant/diagnostics/Diagnostics.ts

@@ -137,7 +137,7 @@ export enum TopShardsMode {
     Historical = 'Historical',
 }
 
-// Column names as they appear in the UI (based on TOP_QUERIES_COLUMNS_TITLES)
+// Column names as they appear in the UI (based on QUERIES_COLUMNS_TITLES)
 export const QUERY_COLUMNS_IDS = {
     QueryHash: 'Query Hash',
     CPUTime: 'CPU Time',