fix: review

Author: Raubzeug

src/components/FixedHeightQuery/FixedHeightQuery.tsx

@@ -10,30 +10,36 @@ const b = cn('ydb-fixed-height-query');
 const FIXED_PADDING = 8;
 const LINE_HEIGHT = 20;
 
+type FixedHeightQueryMode = 'fixed' | 'max';
+
 interface FixedHeightQueryProps {
     value?: string;
     lines?: number;
     hasClipboardButton?: boolean;
     clipboardButtonAlwaysVisible?: boolean;
+    mode?: FixedHeightQueryMode;
 }
 
 export const FixedHeightQuery = ({
     value = '',
     lines = 4,
     hasClipboardButton,
     clipboardButtonAlwaysVisible,
+    mode = 'fixed',
 }: FixedHeightQueryProps) => {
     const heightValue = `${lines * LINE_HEIGHT + FIXED_PADDING}px`;
 
     // Remove empty lines from the beginning (lines with only whitespace are considered empty)
     const trimmedValue = value.replace(/^(\s*\n)+/, '');
 
+    const heightStyle = mode === 'fixed' ? {height: heightValue} : {maxHeight: heightValue};
+
     return (
         <div
             className={b()}
             style={
                 {
-                    height: heightValue,
+                    ...heightStyle,
                     '--line-clamp': lines,
                 } as React.CSSProperties & {'--line-clamp': number}
             }

src/components/ShardsTable/columns.tsx

@@ -80,7 +80,7 @@ export const getCpuCoresColumn: GetShardsColumn = () => {
                 <UsageLabel value={roundToPrecision(usage, 2)} theme={getUsageSeverity(usage)} />
             );
         },
-        align: DataTable.RIGHT,
+        align: DataTable.LEFT,
         width: 110,
         resizeMinWidth: 110,
     };

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

@@ -27,22 +27,31 @@ const cpuTimeUsColumn: Column<KeyValueRow> = {
     align: DataTable.RIGHT,
 };
 
-const getQueryTextColumn = (lines = 3) => {
-    const queryTextColumn: Column<KeyValueRow> = {
-        name: QUERIES_COLUMNS_IDS.QueryText,
-        header: QUERIES_COLUMNS_TITLES.QueryText,
-        render: ({row}) => (
-            <div className={b('query')}>
-                <FixedHeightQuery
-                    value={row.QueryText?.toString()}
-                    lines={lines}
-                    hasClipboardButton
-                />
-            </div>
-        ),
-        width: 500,
-    };
-    return queryTextColumn;
+const queryTextColumn: Column<KeyValueRow> = {
+    name: QUERIES_COLUMNS_IDS.QueryText,
+    header: QUERIES_COLUMNS_TITLES.QueryText,
+    render: ({row}) => (
+        <div className={b('query')}>
+            <FixedHeightQuery value={row.QueryText?.toString()} lines={3} hasClipboardButton />
+        </div>
+    ),
+    width: 500,
+};
+
+const queryTextColumnWithMaxHeight: Column<KeyValueRow> = {
+    name: QUERIES_COLUMNS_IDS.QueryText,
+    header: QUERIES_COLUMNS_TITLES.QueryText,
+    render: ({row}) => (
+        <div className={b('query')}>
+            <FixedHeightQuery
+                value={row.QueryText?.toString()}
+                lines={6}
+                hasClipboardButton
+                mode="fixed"
+            />
+        </div>
+    ),
+    width: 500,
 };
 
 const endTimeColumn: Column<KeyValueRow> = {
@@ -80,7 +89,7 @@ const userSIDColumn: Column<KeyValueRow> = {
 const queryHashColumn: Column<KeyValueRow> = {
     name: QUERIES_COLUMNS_IDS.QueryHash,
     header: QUERIES_COLUMNS_TITLES.QueryHash,
-    render: ({row}) => <div className={b('query-hash')}>{generateHash(String(row.QueryText))}</div>,
+    render: ({row}) => generateHash(String(row.QueryText)),
     width: 130,
 };
 
@@ -121,7 +130,7 @@ export function getTopQueriesColumns() {
         durationColumn,
         readBytesColumn,
         requestUnitsColumn,
-        getQueryTextColumn(),
+        queryTextColumn,
         endTimeColumn,
         readRowsColumn,
         userSIDColumn,
@@ -135,14 +144,14 @@ export function getTopQueriesColumns() {
 }
 
 export function getTenantOverviewTopQueriesColumns() {
-    return [queryHashColumn, getQueryTextColumn(6), cpuTimeUsColumn];
+    return [queryHashColumn, queryTextColumnWithMaxHeight, cpuTimeUsColumn];
 }
 export function getRunningQueriesColumns() {
     const columns = [
         queryHashColumn,
         userSIDColumn,
         queryStartColumn,
-        getQueryTextColumn(),
+        queryTextColumn,
         applicationColumn,
     ];
 

src/utils/hooks/useScrollPosition.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import {debounce} from 'lodash';
 import {useHistory} from 'react-router-dom';
 
-const DEBAUNCE_DELAY = 100;
+const DEBOUNCE_DELAY = 100;
 
 /**
  * Hook for saving and restoring scroll position on navigation
@@ -65,7 +65,7 @@ export function useScrollPosition(
         () =>
             debounce((scrollTop: number) => {
                 saveScrollPosition(scrollTop);
-            }, DEBAUNCE_DELAY),
+            }, DEBOUNCE_DELAY),
         [saveScrollPosition],
     );
 
@@ -88,14 +88,15 @@ export function useScrollPosition(
 
     // Handle location changes
     React.useLayoutEffect(() => {
+        let timeoutId: number | undefined;
         if (isHistoryNavigation && shouldRestore) {
             // This is a browser back/forward navigation - restore position with timeout to ensure that content rendered
-            const timeoutId = setTimeout(restoreScrollPosition, 100);
-            return () => clearTimeout(timeoutId);
+            timeoutId = window.setTimeout(restoreScrollPosition, 100);
         } else {
             // This is a regular navigation (tab click, page reload) - clear position
             clearScrollPosition();
         }
+        return () => clearTimeout(timeoutId);
     }, [
         isHistoryNavigation,
         restoreScrollPosition,