fix: add limit and sorting

Author: sareyu

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

@@ -1,11 +1,12 @@
 import type {Column} from '@gravity-ui/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {topQueriesApi} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
-import type {KeyValueRow} from '../../../../types/api/query';
+import type {CellValue, KeyValueRow} from '../../../../types/api/query';
 import {cn} from '../../../../utils/cn';
 import {formatDateTime} from '../../../../utils/dataFormatters/dataFormatters';
 import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
@@ -21,21 +22,29 @@ interface Props {
 
 const RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY = 'runningQueriesColumnsWidth';
 
+const parseDate = (date: CellValue) => (date ? new Date(date.toString()).getTime() : '');
+
 const columns: Column<KeyValueRow>[] = [
     {
-        name: 'user',
+        name: 'UserSID',
         header: i18n('col_user'),
-        render: ({row}) => row.UserSID || '-',
-        sortable: false,
+        render: ({row}) => <div className={b('user-sid')}>{row.UserSID || '–'}</div>,
+        sortAccessor: (row) => String(row.UserSID),
+        sortable: true,
     },
     {
-        name: 'startTime',
+        name: 'QueryStartAt',
         header: i18n('col_start-time'),
-        render: ({row}) => formatDateTime(new Date(row.QueryStartAt as string).getTime()),
-        sortable: false,
+        render: ({row}) => formatDateTime(parseDate(row.QueryStartAt)),
+        sortable: true,
+        resizeable: false,
+        defaultOrder: DataTable.DESCENDING,
+        sortAccessor: (row) => {
+            return parseDate(row.QueryStartAt);
+        },
     },
     {
-        name: 'queryText',
+        name: 'Query',
         header: i18n('col_query-text'),
         render: ({row}) => (
             <div className={b('query')}>
@@ -46,10 +55,10 @@ const columns: Column<KeyValueRow>[] = [
         sortable: false,
     },
     {
-        name: 'app',
+        name: 'ApplicationName',
         header: i18n('col_app'),
         render: ({row}) => row.ApplicationName || '-',
-        sortable: false,
+        sortable: true,
     },
 ];
 

src/store/reducers/executeTopQueries/executeTopQueries.ts

@@ -95,7 +95,7 @@ export const topQueriesApi = api.injectEndpoints({
             ) => {
                 try {
                     const filterConditions = filters?.text ? `Query ILIKE '%${filters.text}%'` : '';
-                    const queryText = `SELECT * from \`.sys/query_sessions\` WHERE ${filterConditions || 'true'} limit 10`;
+                    const queryText = `SELECT * from \`.sys/query_sessions\` WHERE ${filterConditions || 'true'} ORDER BY SessionStartAt limit 100`;
 
                     const response = await window.api.sendQuery(
                         {