fix: fix top queries table row height (#565)

Author: krosy1337

package-lock.json

@@ -18,6 +18,7 @@
     "axios": "0.19.2",
     "bem-cn-lite": "4.0.0",
     "copy-to-clipboard": "^3.3.3",
+    "crc-32": "^1.2.2",
     "history": "4.10.1",
     "js-cookie": "2.2.1",
     "lodash": "4.17.11",

package.json

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

src/components/TruncatedQuery/TruncatedQuery.scss

@@ -1,11 +1,13 @@
 import cn from 'bem-cn-lite';
 
+import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
+
 import './TruncatedQuery.scss';
 
 const b = cn('kv-truncated-query');
 
 interface TruncatedQueryProps {
-    value: string | undefined;
+    value?: string;
     maxQueryHeight?: number;
 }
 
@@ -26,3 +28,15 @@ export const TruncatedQuery = ({value = '', maxQueryHeight = 6}: TruncatedQueryP
     }
     return <>{value}</>;
 };
+
+interface OneLineQueryWithPopoverProps {
+    value?: string;
+}
+
+export const OneLineQueryWithPopover = ({value = ''}: OneLineQueryWithPopoverProps) => {
+    return (
+        <CellWithPopover contentClassName={b('popover-content')} content={value}>
+            {value}
+        </CellWithPopover>
+    );
+};

src/components/TruncatedQuery/TruncatedQuery.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/TenantCpu/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/TopQueries.tsx

@@ -4,7 +4,11 @@ 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 {generateHash} from '../../../../utils/generateHash';
+import {
+    TruncatedQuery,
+    OneLineQueryWithPopover,
+} from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {MAX_QUERY_HEIGHT} from '../../utils/constants';
 
 import './TopQueries.scss';
@@ -18,6 +22,8 @@ const TOP_QUERIES_COLUMNS_IDS = {
     ReadRows: 'ReadRows',
     ReadBytes: 'ReadBytes',
     UserSID: 'UserSID',
+    OneLineQueryText: 'OneLineQueryText',
+    QueryHash: 'QueryHash',
 };
 
 const cpuTimeUsColumn: Column<KeyValueRow> = {
@@ -66,6 +72,20 @@ const userSIDColumn: Column<KeyValueRow> = {
     align: DataTable.LEFT,
 };
 
+const oneLineQueryTextColumn: Column<KeyValueRow> = {
+    name: TOP_QUERIES_COLUMNS_IDS.OneLineQueryText,
+    header: 'QueryText',
+    render: ({row}) => <OneLineQueryWithPopover value={row.QueryText?.toString()} />,
+    sortable: false,
+};
+
+const queryHashColumn: Column<KeyValueRow> = {
+    name: TOP_QUERIES_COLUMNS_IDS.QueryHash,
+    render: ({row}) => generateHash(String(row.QueryText)),
+    width: 130,
+    sortable: false,
+};
+
 export const getTopQueriesColumns = (): Column<KeyValueRow>[] => {
     return [
         cpuTimeUsColumn,
@@ -78,5 +98,5 @@ export const getTopQueriesColumns = (): Column<KeyValueRow>[] => {
 };
 
 export const getTenantOverviewTopQueriesColumns = (): Column<KeyValueRow>[] => {
-    return [queryTextColumn, cpuTimeUsColumn];
+    return [queryHashColumn, oneLineQueryTextColumn, cpuTimeUsColumn];
 };

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

@@ -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);

src/utils/diagnostics.ts

@@ -0,0 +1,11 @@
+import crc32 from 'crc-32';
+
+export const generateHash = (value: string) => {
+    // 1. crc32.str(value) - generate crc32 hash
+    // 2. (>>>) - use unsigned right shift operator (>>>) to avoid negative values
+    // 3. toString(16) - convert hash to hex format
+    // 4. toUpperCase() - convert hash to uppercase
+    // 5. padStart(8, '0') - fill hash with leading zeros if hash length < 8
+    // eslint-disable-next-line no-bitwise
+    return (crc32.str(value) >>> 0).toString(16).toUpperCase().padStart(8, '0');
+};