fix: use table sort

Author: astandrik

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

@@ -29,6 +29,7 @@ import {
     TOP_QUERIES_SELECTED_COLUMNS_LS_KEY,
 } from './columns/constants';
 import {DEFAULT_TIME_FILTER_VALUE, TIME_FRAME_OPTIONS} from './constants';
+import {useGetSelectedRowTableSort} from './hooks/useGetSelectedRowTableSort';
 import {useSetSelectedTopQueryRowFromParams} from './hooks/useSetSelectedTopQueryRowFromParams';
 import i18n from './i18n';
 import {TOP_QUERIES_TABLE_SETTINGS, useTopQueriesSort} from './utils';
@@ -73,7 +74,8 @@ export const TopQueriesData = ({
         REQUIRED_TOP_QUERIES_COLUMNS,
     );
 
-    const {tableSort, handleTableSort, backendSort} = useTopQueriesSort();
+    const initialTableSort = useGetSelectedRowTableSort();
+    const {tableSort, handleTableSort, backendSort} = useTopQueriesSort(initialTableSort);
     const {currentData, isFetching, isLoading, error} = topQueriesApi.useGetTopQueriesQuery(
         {
             database: tenantName,
@@ -95,10 +97,10 @@ export const TopQueriesData = ({
 
     const onCopyLink = React.useCallback(() => {
         if (selectedRow) {
-            const shareableUrl = generateShareableUrl(selectedRow);
+            const shareableUrl = generateShareableUrl(selectedRow, tableSort);
             navigator.clipboard.writeText(shareableUrl);
         }
-    }, [selectedRow]);
+    }, [selectedRow, tableSort]);
 
     const renderDrawerContent = React.useCallback(() => {
         if (!isDrawerVisible) {

src/containers/Tenant/Diagnostics/TopQueries/hooks/useGetSelectedRowTableSort.ts

@@ -0,0 +1,13 @@
+import type {SortOrder} from '@gravity-ui/react-data-table';
+import {StringParam, useQueryParams} from 'use-query-params';
+
+export function useGetSelectedRowTableSort(): SortOrder[] | undefined {
+    const [queryParams] = useQueryParams({
+        selectedRow: StringParam,
+    });
+    const searchParamsQuery: {tableSort?: SortOrder[]} = queryParams.selectedRow
+        ? JSON.parse(queryParams.selectedRow)
+        : {};
+
+    return searchParamsQuery.tableSort;
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type {Settings} from '@gravity-ui/react-data-table';
+import type {Settings, SortOrder} from '@gravity-ui/react-data-table';
 import DataTable from '@gravity-ui/react-data-table';
 
 import type {InfoViewerItem} from '../../../../components/InfoViewer';
@@ -23,10 +23,10 @@ export const TOP_QUERIES_TABLE_SETTINGS: Settings = {
     disableSortReset: true,
 };
 
-export function useTopQueriesSort() {
+export function useTopQueriesSort(initialSort?: SortOrder[]) {
     const [tableSort, handleTableSort] = useTableSort({
-        initialSortColumn: QUERIES_COLUMNS_IDS.CPUTime,
-        initialSortOrder: DataTable.DESCENDING,
+        initialSortColumn: initialSort?.[0]?.columnId || QUERIES_COLUMNS_IDS.CPUTime,
+        initialSortOrder: initialSort?.[0]?.order || DataTable.DESCENDING,
         multiple: true,
         fixedOrderType: DataTable.DESCENDING,
     });

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

@@ -1,13 +1,16 @@
+import type {SortOrder} from '@gravity-ui/react-data-table';
+
 import type {KeyValueRow} from '../../../../../types/api/query';
 
 import {getTopQueryRowQueryParams} from './getTopQueryRowQueryParams';
 
 /**
  * Generates a shareable URL with query parameters for a top query row
  * @param row The top query row data
- * @returns A shareable URL string with the row's parameters encoded in the URL
+ * @param tableSort Optional sort configuration to include in the URL
+ * @returns A shareable URL string with the row's parameters and sort order encoded in the URL
  */
-export function generateShareableUrl(row: KeyValueRow): string {
+export function generateShareableUrl(row: KeyValueRow, tableSort?: SortOrder[]): string {
     const params = getTopQueryRowQueryParams(row);
 
     // Get current URL without query parameters
@@ -25,6 +28,7 @@ export function generateShareableUrl(row: KeyValueRow): string {
             intervalEnd: params.intervalEnd || undefined,
             endTime: params.endTime || undefined,
             queryHash: params.queryHash || undefined,
+            tableSort: tableSort || undefined, // Include the table sort order
         }),
     );