feat: add data sorting to TopQueries table (#1028)

Author: astandrik

public/index.html

@@ -23,7 +23,7 @@
       window.systemSettings = {};
       window.userSettings = {};
       window.web_version = !'%REACT_APP_BACKEND%';
-      window.custom_backend = '%NODE_ENV%' === 'development' && '%REACT_APP_BACKEND%' ;
+      window.custom_backend = '%NODE_ENV%' === 'development' && '%REACT_APP_BACKEND%';
       window.meta_backend = '%REACT_APP_META_BACKEND%'
     </script>
   </head>

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

@@ -8,8 +8,9 @@ import {
 import type {KeyValueRow} from '../../../../types/api/query';
 import {cn} from '../../../../utils/cn';
 import {formatDateTime, formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
+import {TOP_QUERIES_COLUMNS_IDS} from '../../../../utils/diagnostics';
 import {generateHash} from '../../../../utils/generateHash';
-import {parseUsToMs} from '../../../../utils/timeParsers';
+import {formatToMs, parseUsToMs} from '../../../../utils/timeParsers';
 import {MAX_QUERY_HEIGHT} from '../../utils/constants';
 
 import './TopQueries.scss';
@@ -18,21 +19,10 @@ const b = cn('kv-top-queries');
 
 export const TOP_QUERIES_COLUMNS_WIDTH_LS_KEY = 'topQueriesColumnsWidth';
 
-const TOP_QUERIES_COLUMNS_IDS = {
-    CPUTimeUs: 'CPUTimeUs',
-    QueryText: 'QueryText',
-    EndTime: 'EndTime',
-    ReadRows: 'ReadRows',
-    ReadBytes: 'ReadBytes',
-    UserSID: 'UserSID',
-    OneLineQueryText: 'OneLineQueryText',
-    QueryHash: 'QueryHash',
-    Duration: 'Duration',
-};
-
 const cpuTimeUsColumn: Column<KeyValueRow> = {
     name: TOP_QUERIES_COLUMNS_IDS.CPUTimeUs,
     sortAccessor: (row) => Number(row.CPUTimeUs),
+    render: ({row}) => formatToMs(parseUsToMs(row.CPUTimeUs ?? undefined)),
     width: 120,
     align: DataTable.RIGHT,
     sortable: false,
@@ -97,8 +87,8 @@ const queryHashColumn: Column<KeyValueRow> = {
 
 const durationColumn: Column<KeyValueRow> = {
     name: TOP_QUERIES_COLUMNS_IDS.Duration,
-    header: 'Duration, ms',
-    render: ({row}) => formatNumber(parseUsToMs(row.Duration ?? undefined)),
+    header: 'Duration',
+    render: ({row}) => formatToMs(parseUsToMs(row.Duration ?? undefined)),
     sortAccessor: (row) => Number(row.Duration),
     align: DataTable.RIGHT,
     width: 150,

src/containers/Tenant/Diagnostics/TopShards/TopShards.tsx

@@ -17,7 +17,7 @@ import type {EPathType} from '../../../../types/api/schema';
 import {cn} from '../../../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {formatDateTime} from '../../../../utils/dataFormatters/dataFormatters';
-import {isSortableTopShardsProperty} from '../../../../utils/diagnostics';
+import {TOP_SHARD_COLUMNS_IDS, isSortableTopShardsProperty} from '../../../../utils/diagnostics';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {parseQueryErrorToString} from '../../../../utils/query';
 import {isColumnEntityType} from '../../utils/schema';
@@ -38,17 +38,6 @@ const TABLE_SETTINGS: Settings = {
     defaultOrder: DataTable.DESCENDING,
 };
 
-const tableColumnsNames = {
-    TabletId: 'TabletId',
-    CPUCores: 'CPUCores',
-    DataSize: 'DataSize',
-    Path: 'Path',
-    NodeId: 'NodeId',
-    PeakTime: 'PeakTime',
-    InFlightTxCount: 'InFlightTxCount',
-    IntervalEnd: 'IntervalEnd',
-};
-
 function prepareDateTimeValue(value: CellValue) {
     if (!value) {
         return '–';
@@ -115,7 +104,7 @@ export const TopShards = ({tenantName, path, type}: TopShardsProps) => {
         return defaultValue;
     });
 
-    const [sortOrder, setSortOrder] = React.useState(tableColumnsNames.CPUCores);
+    const [sortOrder, setSortOrder] = React.useState(TOP_SHARD_COLUMNS_IDS.CPUCores);
     const {
         data: result,
         isFetching,
@@ -171,14 +160,14 @@ export const TopShards = ({tenantName, path, type}: TopShardsProps) => {
         if (filters.mode === EShardsWorkloadMode.History) {
             // after NodeId
             columns.splice(5, 0, {
-                name: tableColumnsNames.PeakTime,
+                name: TOP_SHARD_COLUMNS_IDS.PeakTime,
                 render: ({row}) => {
                     return prepareDateTimeValue(row.PeakTime);
                 },
                 sortable: false,
             });
             columns.push({
-                name: tableColumnsNames.IntervalEnd,
+                name: TOP_SHARD_COLUMNS_IDS.IntervalEnd,
                 render: ({row}) => {
                     return prepareDateTimeValue(row.IntervalEnd);
                 },

src/store/reducers/executeTopQueries/executeTopQueries.ts

@@ -37,6 +37,7 @@ SELECT
     Duration
 FROM \`${path}/.sys/top_queries_by_cpu_time_one_hour\`
 WHERE ${filterConditions || 'true'}
+ORDER BY CPUTimeUs DESC
 `;
 };
 

src/utils/diagnostics.ts

@@ -1,25 +1,43 @@
-import type {ValueOf} from '../types/common';
-
-const TOP_SHARDS_SORT_VALUES = {
-    CPUCores: 'CPUCores',
-    DataSize: 'DataSize',
-    InFlightTxCount: 'InFlightTxCount',
-} as const;
-
-const TOP_QUERIES_SORT_VALUES = {
-    CPUTimeUs: 'CPUTimeUs',
+export const TOP_QUERIES_COLUMNS_IDS = {
+    CPUTimeUs: 'CPUTime',
+    QueryText: 'QueryText',
     EndTime: 'EndTime',
     ReadRows: 'ReadRows',
     ReadBytes: 'ReadBytes',
     UserSID: 'UserSID',
+    OneLineQueryText: 'OneLineQueryText',
+    QueryHash: 'QueryHash',
     Duration: 'Duration',
-} as const;
+};
+
+export const TOP_SHARD_COLUMNS_IDS = {
+    TabletId: 'TabletId',
+    CPUCores: 'CPUCores',
+    DataSize: 'DataSize',
+    Path: 'Path',
+    NodeId: 'NodeId',
+    PeakTime: 'PeakTime',
+    InFlightTxCount: 'InFlightTxCount',
+    IntervalEnd: 'IntervalEnd',
+};
+
+const TOP_SHARDS_SORT_VALUES = [
+    TOP_SHARD_COLUMNS_IDS.CPUCores,
+    TOP_SHARD_COLUMNS_IDS.DataSize,
+    TOP_SHARD_COLUMNS_IDS.InFlightTxCount,
+];
 
-type TopShardsSortValue = ValueOf<typeof TOP_SHARDS_SORT_VALUES>;
-type TopQueriesSortValue = ValueOf<typeof TOP_QUERIES_SORT_VALUES>;
+const TOP_QUERIES_SORT_VALUES = [
+    TOP_QUERIES_COLUMNS_IDS.CPUTimeUs,
+    TOP_QUERIES_COLUMNS_IDS.EndTime,
+    TOP_QUERIES_COLUMNS_IDS.ReadRows,
+    TOP_QUERIES_COLUMNS_IDS.ReadBytes,
+    TOP_QUERIES_COLUMNS_IDS.UserSID,
+    TOP_QUERIES_COLUMNS_IDS.Duration,
+];
 
-export const isSortableTopShardsProperty = (value: string): value is TopShardsSortValue =>
-    Object.values(TOP_SHARDS_SORT_VALUES).includes(value as TopShardsSortValue);
+export const isSortableTopShardsProperty = (value: string) =>
+    Object.values(TOP_SHARDS_SORT_VALUES).includes(value);
 
-export const isSortableTopQueriesProperty = (value: string): value is TopQueriesSortValue =>
-    Object.values(TOP_QUERIES_SORT_VALUES).includes(value as TopQueriesSortValue);
+export const isSortableTopQueriesProperty = (value: string) =>
+    Object.values(TOP_QUERIES_SORT_VALUES).includes(value);