feat: add top tables links (#564)

Author: krosy1337

src/components/LinkToSchemaObject/LinkToSchemaObject.tsx

@@ -0,0 +1,17 @@
+import type {Location} from 'history';
+
+import {Link, type LinkProps} from '@gravity-ui/uikit';
+
+import {parseQuery} from '../../routes';
+import {getTenantPath} from '../../containers/Tenant/TenantPages';
+
+interface LinkToSchemaObjectProps extends LinkProps {
+    path: string;
+    location: Location;
+}
+
+export function LinkToSchemaObject({path, location, ...props}: LinkToSchemaObjectProps) {
+    const queryParams = parseQuery(location);
+
+    return <Link view="normal" href={getTenantPath({...queryParams, schema: path})} {...props} />;
+}

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

@@ -1,6 +1,6 @@
 import {useDispatch} from 'react-redux';
+import {useLocation} from 'react-router';
 
-import {getSchema, setCurrentSchemaPath} from '../../../../../store/reducers/schema/schema';
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
 import {
     sendTenantOverviewTopShardsQuery,
@@ -15,6 +15,7 @@ interface TopShardsProps {
 
 export const TopShards = ({path}: TopShardsProps) => {
     const dispatch = useDispatch();
+    const location = useLocation();
 
     const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
 
@@ -36,15 +37,7 @@ export const TopShards = ({path}: TopShardsProps) => {
         autorefresh,
     );
 
-    const onSchemaClick = (schemaPath: string) => {
-        return () => {
-            dispatch(setCurrentSchemaPath(schemaPath));
-            dispatch(getSchema({path: schemaPath}));
-            history.go(0);
-        };
-    };
-
-    const columns = getTopShardsColumns(onSchemaClick, path);
+    const columns = getTopShardsColumns(path, location);
 
     return (
         <TenantOverviewTableLayout

src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx

@@ -1,4 +1,5 @@
 import {useDispatch} from 'react-redux';
+import {useLocation} from 'react-router';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column} from '@gravity-ui/react-data-table';
@@ -17,6 +18,7 @@ import type {KeyValueRow} from '../../../../../types/api/query';
 import {formatBytes, getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
 import {TableSkeleton} from '../../../../../components/TableSkeleton/TableSkeleton';
 import {ResponseError} from '../../../../../components/Errors/ResponseError';
+import {LinkToSchemaObject} from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';
 
 import './TenantStorage.scss';
 
@@ -28,6 +30,7 @@ interface TopTablesProps {
 
 export function TopTables({path}: TopTablesProps) {
     const dispatch = useDispatch();
+    const location = useLocation();
 
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
@@ -67,13 +70,18 @@ export function TopTables({path}: TopTablesProps) {
         {
             name: 'Path',
             sortable: false,
-            render: ({row}) => (
-                <div className={b('cell-with-popover-wrapper')}>
-                    <Popover className={b('cell-with-popover')} content={row.Path}>
-                        {row.Path}
-                    </Popover>
-                </div>
-            ),
+            render: ({row}) =>
+                row.Path ? (
+                    <LinkToSchemaObject
+                        className={b('cell-with-popover-wrapper')}
+                        path={String(row.Path)}
+                        location={location}
+                    >
+                        <Popover className={b('cell-with-popover')} content={row.Path}>
+                            {row.Path}
+                        </Popover>
+                    </LinkToSchemaObject>
+                ) : null,
         },
     ];
 

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

@@ -1,18 +1,16 @@
-import {useState, useContext, useEffect, useMemo} from 'react';
+import {useState, useEffect, useMemo} from 'react';
 import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
+import {useLocation} from 'react-router';
 
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
 
-import HistoryContext from '../../../../contexts/HistoryContext';
-
 import {
     sendShardQuery,
     setShardsState,
     setShardsQueryFilters,
 } from '../../../../store/reducers/shardsWorkload/shardsWorkload';
-import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema/schema';
 import {
     EShardsWorkloadMode,
     type IShardsWorkloadFilters,
@@ -26,7 +24,6 @@ import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constan
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';
 import {isSortableTopShardsProperty} from '../../../../utils/diagnostics';
-
 import {isColumnEntityType} from '../../utils/schema';
 
 import {Filters} from './Filters';
@@ -99,6 +96,7 @@ interface TopShardsProps {
 
 export const TopShards = ({tenantPath, type}: TopShardsProps) => {
     const dispatch = useDispatch();
+    const location = useLocation();
 
     const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
 
@@ -153,8 +151,6 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
         );
     }, [dispatch, currentSchemaPath, tenantPath, filters]);
 
-    const history = useContext(HistoryContext);
-
     const onSort = (newSortOrder?: SortOrder | SortOrder[]) => {
         // omit information about sort order to disable ASC order, only DESC makes sense for top shards
         // use a string (and not the DataTable default format) to prevent reference change,
@@ -184,18 +180,7 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
     };
 
     const tableColumns = useMemo(() => {
-        const onSchemaClick = (schemaPath: string) => {
-            return () => {
-                dispatch(setCurrentSchemaPath(schemaPath));
-                dispatch(getSchema({path: schemaPath}));
-                history.go(0);
-            };
-        };
-
-        const rawColumns: Column<KeyValueRow>[] = getShardsWorkloadColumns(
-            onSchemaClick,
-            tenantPath,
-        );
+        const rawColumns: Column<KeyValueRow>[] = getShardsWorkloadColumns(tenantPath, location);
 
         const columns: Column<KeyValueRow>[] = rawColumns.map((column) => ({
             ...column,
@@ -220,7 +205,7 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
         }
 
         return columns;
-    }, [dispatch, filters.mode, history, tenantPath]);
+    }, [filters.mode, tenantPath, location]);
 
     const renderLoader = () => {
         return (

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

@@ -1,4 +1,4 @@
-import cn from 'bem-cn-lite';
+import type {Location} from 'history';
 
 import DataTable, {type Column} from '@gravity-ui/react-data-table';
 
@@ -10,10 +10,7 @@ import {InternalLink} from '../../../../components/InternalLink';
 import routes, {createHref} from '../../../../routes';
 import {getDefaultNodePath} from '../../../Node/NodePages';
 import {UsageLabel} from '../../../../components/UsageLabel/UsageLabel';
-
-import './TopShards.scss';
-
-const b = cn('yc-link');
+import {LinkToSchemaObject} from '../../../../components/LinkToSchemaObject/LinkToSchemaObject';
 
 const TOP_SHARDS_COLUMNS_IDS = {
     TabletId: 'TabletId',
@@ -43,18 +40,15 @@ function prepareCPUWorkloadValue(value: string | number) {
     return `${roundToPrecision(Number(value) * 100, 2)}%`;
 }
 
-const getPathColumn = (
-    onSchemaClick: (schemaPath: string) => () => void,
-    tenantPath: string,
-): Column<KeyValueRow> => ({
+const getPathColumn = (schemaPath: string, location: Location): Column<KeyValueRow> => ({
     name: TOP_SHARDS_COLUMNS_IDS.Path,
     header: tableColumnsNames[TOP_SHARDS_COLUMNS_IDS.Path],
     render: ({row}) => {
         // row.Path - relative schema path
         return (
-            <span onClick={onSchemaClick(tenantPath + row.Path)} className={b({view: 'normal'})}>
+            <LinkToSchemaObject path={schemaPath + row.Path} location={location}>
                 {row.Path}
-            </span>
+            </LinkToSchemaObject>
         );
     },
     sortable: false,
@@ -128,12 +122,9 @@ const inFlightTxCountColumn: Column<KeyValueRow> = {
     align: DataTable.RIGHT,
 };
 
-export const getShardsWorkloadColumns = (
-    onSchemaClick: (schemaPath: string) => () => void,
-    tenantPath: string,
-) => {
+export const getShardsWorkloadColumns = (schemaPath: string, location: Location) => {
     return [
-        getPathColumn(onSchemaClick, tenantPath),
+        getPathColumn(schemaPath, location),
         cpuCoresColumn,
         dataSizeColumn,
         tabletIdColumn,
@@ -142,9 +133,6 @@ export const getShardsWorkloadColumns = (
     ];
 };
 
-export const getTopShardsColumns = (
-    onSchemaClick: (schemaPath: string) => () => void,
-    tenantPath: string,
-) => {
-    return [tabletIdColumn, getPathColumn(onSchemaClick, tenantPath), topShardsCpuCoresColumn];
+export const getTopShardsColumns = (schemaPath: string, location: Location) => {
+    return [tabletIdColumn, getPathColumn(schemaPath, location), topShardsCpuCoresColumn];
 };