feat: side panel aka refrigerator for query text in top queries

Author: astandrik

src/containers/Tenant/Diagnostics/Diagnostics.scss

@@ -34,6 +34,12 @@
         }
     }
 
+    &__drawer-container {
+        position: relative;
+
+        height: 100%;
+    }
+
     &__page-wrapper {
         overflow: auto;
         flex-grow: 1;

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -194,8 +194,10 @@ function Diagnostics(props: DiagnosticsProps) {
                 </Helmet>
             ) : null}
             {renderTabs()}
-            <div className={b('page-wrapper')} ref={containerRef}>
-                {renderTabContent()}
+            <div className={b('drawer-container')}>
+                <div className={b('page-wrapper')} ref={containerRef}>
+                    {renderTabContent()}
+                </div>
             </div>
         </div>
     );

src/containers/Tenant/Diagnostics/TopQueries/QueryDetails.scss

@@ -0,0 +1,81 @@
+@import '../../../../styles/mixins.scss';
+
+.kv-query-details {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--g-color-base-background-dark);
+    color: var(--g-color-text-primary-invert);
+    padding: var(--g-spacing-5) var(--g-spacing-6);
+
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    &__title {
+        margin: 0;
+        font-size: 16px;
+        font-weight: 500;
+    }
+
+    &__actions {
+        display: flex;
+        gap: 8px;
+    }
+
+    &__content {
+        flex: 1;
+        padding-top: var(--g-spacing-5);
+        overflow: auto;
+    }
+
+    &__query-section {
+        margin-top: 20px;
+    }
+
+    &__query-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+    }
+
+    &__query-title {
+        font-size: 14px;
+        font-weight: 500;
+    }
+
+    &__query-content {
+        background-color: #1e1e1e;
+        border-radius: 4px;
+        overflow: hidden;
+        position: relative;
+
+        pre {
+            margin: 0 !important;
+            max-height: 100%;
+            background-color: transparent !important;
+        }
+    }
+
+    &__close-button {
+        color: var(--g-color-text-secondary-invert);
+
+        &:hover {
+            color: var(--g-color-text-primary-invert);
+        }
+    }
+
+    &__editor-button {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        color: var(--g-color-text-secondary-invert);
+
+        &:hover {
+            color: var(--g-color-text-primary-invert);
+        }
+    }
+}

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

@@ -0,0 +1,94 @@
+import React from 'react';
+
+import {Button, Icon} from '@gravity-ui/uikit';
+
+import type {InfoViewerItem} from '../../../../components/InfoViewer';
+import {InfoViewer} from '../../../../components/InfoViewer';
+import {YDBSyntaxHighlighter} from '../../../../components/SyntaxHighlighter/YDBSyntaxHighlighter';
+import type {KeyValueRow} from '../../../../types/api/query';
+import {cn} from '../../../../utils/cn';
+import {formatDateTime, formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
+import {generateHash} from '../../../../utils/generateHash';
+import {formatToMs, parseUsToMs} from '../../../../utils/timeParsers';
+
+import i18n from './i18n';
+
+import './QueryDetails.scss';
+
+const b = cn('kv-query-details');
+
+interface QueryDetailsProps {
+    row: KeyValueRow;
+    onClose: () => void;
+    onOpenInEditor: () => void;
+}
+
+export const QueryDetails = ({row, onClose, onOpenInEditor}: QueryDetailsProps) => {
+    const query = row.QueryText as string;
+    // Create info items for the InfoViewer with formatting matching the columns
+    const infoItems: InfoViewerItem[] = React.useMemo(() => {
+        return [
+            {label: i18n('query-details.query-hash'), value: generateHash(String(row.QueryText))},
+            {
+                label: i18n('query-details.cpu-time'),
+                value: formatToMs(parseUsToMs(row.CPUTimeUs ?? undefined)),
+            },
+            {
+                label: i18n('query-details.duration'),
+                value: formatToMs(parseUsToMs(row.Duration ?? undefined)),
+            },
+            {label: i18n('query-details.read-bytes'), value: formatNumber(row.ReadBytes)},
+            {label: i18n('query-details.request-units'), value: formatNumber(row.RequestUnits)},
+            {
+                label: i18n('query-details.end-time'),
+                value: row.EndTime
+                    ? formatDateTime(new Date(row.EndTime as string).getTime())
+                    : '–',
+            },
+            {label: i18n('query-details.read-rows'), value: formatNumber(row.ReadRows)},
+            {label: i18n('query-details.user-sid'), value: row.UserSID || '–'},
+            {label: i18n('query-details.application-name'), value: row.ApplicationName || '–'},
+            {
+                label: i18n('query-details.query-start-at'),
+                value: row.QueryStartAt
+                    ? formatDateTime(new Date(row.QueryStartAt as string).getTime())
+                    : '–',
+            },
+        ];
+    }, [row]);
+
+    return (
+        <div className={b()}>
+            <div className={b('header')}>
+                <div className={b('title')}>Query</div>
+                <div className={b('actions')}>
+                    <Button view="flat" size="l" onClick={onClose} className={b('close-button')}>
+                        <Icon data="close" size={16} />
+                    </Button>
+                </div>
+            </div>
+
+            <div className={b('content')}>
+                <InfoViewer info={infoItems} />
+
+                <div className={b('query-section')}>
+                    <div className={b('query-header')}>
+                        <div className={b('query-title')}>{i18n('query-details.query.title')}</div>
+                        <Button
+                            view="flat"
+                            size="m"
+                            onClick={onOpenInEditor}
+                            className={b('editor-button')}
+                        >
+                            <Icon data="code" size={16} />
+                            {i18n('query-details.open-in-editor')}
+                        </Button>
+                    </div>
+                    <div className={b('query-content')}>
+                        <YDBSyntaxHighlighter language="yql" text={query} withClipboardButton />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

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

@@ -30,14 +30,14 @@ const b = cn('kv-top-queries');
 interface RunningQueriesDataProps {
     tenantName: string;
     renderQueryModeControl: () => React.ReactNode;
-    onRowClick: (query: string) => void;
+    handleRowClick: (row: KeyValueRow) => void;
     handleTextSearchUpdate: (text: string) => void;
 }
 
 export const RunningQueriesData = ({
     tenantName,
     renderQueryModeControl,
-    onRowClick,
+    handleRowClick,
     handleTextSearchUpdate,
 }: RunningQueriesDataProps) => {
     const [autoRefreshInterval] = useAutoRefreshInterval();
@@ -69,10 +69,6 @@ export const RunningQueriesData = ({
             {pollingInterval: autoRefreshInterval},
         );
 
-    const handleRowClick = (row: KeyValueRow) => {
-        return onRowClick(row.QueryText as string);
-    };
-
     return (
         <TableWithControlsLayout>
             <TableWithControlsLayout.Controls>

src/containers/Tenant/Diagnostics/TopQueries/TopQueries.scss

@@ -32,4 +32,12 @@
 
         text-overflow: ellipsis;
     }
+
+    &__drawer-item {
+        z-index: 4;
+        // Because of tabs padding it is needed to move drawer item a little higher
+        // to make it stick to bottom of tabs
+        margin-top: calc(-1 * var(--g-spacing-4));
+        height: calc(100% + var(--g-spacing-4));
+    }
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {Drawer, DrawerItem} from '@gravity-ui/navigation';
 import type {RadioButtonOption} from '@gravity-ui/uikit';
 import {RadioButton} from '@gravity-ui/uikit';
 import {useHistory, useLocation} from 'react-router-dom';
@@ -16,10 +17,13 @@ import {
     TENANT_PAGES_IDS,
     TENANT_QUERY_TABS_ID,
 } from '../../../../store/reducers/tenant/constants';
+import type {KeyValueRow} from '../../../../types/api/query';
+import {cn} from '../../../../utils/cn';
 import {useTypedDispatch} from '../../../../utils/hooks';
 import {useChangeInputWithConfirmation} from '../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
 import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
 
+import {QueryDetails} from './QueryDetails';
 import {RunningQueriesData} from './RunningQueriesData';
 import {TopQueriesData} from './TopQueriesData';
 import {TimeFrameIds} from './constants';
@@ -54,6 +58,9 @@ interface TopQueriesProps {
     tenantName: string;
 }
 
+const DRAWER_WIDTH_KEY = 'kv-top-queries-drawer-width';
+const b = cn('kv-top-queries');
+
 export const TopQueries = ({tenantName}: TopQueriesProps) => {
     const dispatch = useTypedDispatch();
     const location = useLocation();
@@ -66,6 +73,13 @@ export const TopQueries = ({tenantName}: TopQueriesProps) => {
 
     const isTopQueries = queryMode === QueryModeIds.top;
 
+    const [selectedRow, setSelectedRow] = React.useState<KeyValueRow | null>(null);
+    const [isDrawerVisible, setIsDrawerVisible] = React.useState(false);
+    const [drawerWidth, setDrawerWidth] = React.useState(() => {
+        const savedWidth = localStorage.getItem(DRAWER_WIDTH_KEY);
+        return savedWidth ? Number(savedWidth) : 400;
+    });
+
     const applyRowClick = React.useCallback(
         (input: string) => {
             dispatch(changeUserInput({input}));
@@ -104,22 +118,65 @@ export const TopQueries = ({tenantName}: TopQueriesProps) => {
         );
     }, [queryMode, setQueryMode]);
 
-    return isTopQueries ? (
-        <TopQueriesData
-            tenantName={tenantName}
-            timeFrame={timeFrame}
-            renderQueryModeControl={renderQueryModeControl}
-            onRowClick={onRowClick}
-            handleTimeFrameChange={handleTimeFrameChange}
-            handleDateRangeChange={handleDateRangeChange}
-            handleTextSearchUpdate={handleTextSearchUpdate}
-        />
-    ) : (
-        <RunningQueriesData
-            tenantName={tenantName}
-            renderQueryModeControl={renderQueryModeControl}
-            onRowClick={onRowClick}
-            handleTextSearchUpdate={handleTextSearchUpdate}
-        />
+    const handleRowClick = (row: KeyValueRow) => {
+        setSelectedRow(row);
+        setIsDrawerVisible(true);
+    };
+
+    const handleOpenInEditor = () => {
+        if (selectedRow) {
+            onRowClick(selectedRow.QueryText as string);
+        }
+    };
+
+    const handleCloseDetails = () => {
+        setIsDrawerVisible(false);
+    };
+
+    const handleResizeDrawer = (width: number) => {
+        setDrawerWidth(width);
+        localStorage.setItem(DRAWER_WIDTH_KEY, width.toString());
+    };
+
+    return (
+        <React.Fragment>
+            {isTopQueries ? (
+                <TopQueriesData
+                    tenantName={tenantName}
+                    timeFrame={timeFrame}
+                    renderQueryModeControl={renderQueryModeControl}
+                    handleRowClick={handleRowClick}
+                    handleTimeFrameChange={handleTimeFrameChange}
+                    handleDateRangeChange={handleDateRangeChange}
+                    handleTextSearchUpdate={handleTextSearchUpdate}
+                />
+            ) : (
+                <RunningQueriesData
+                    tenantName={tenantName}
+                    renderQueryModeControl={renderQueryModeControl}
+                    handleRowClick={handleRowClick}
+                    handleTextSearchUpdate={handleTextSearchUpdate}
+                />
+            )}
+            <Drawer onEscape={handleCloseDetails} onVeilClick={handleCloseDetails} hideVeil>
+                <DrawerItem
+                    id="query-details"
+                    visible={isDrawerVisible}
+                    resizable
+                    width={drawerWidth}
+                    onResize={handleResizeDrawer}
+                    direction="right"
+                    className={b('drawer-item')}
+                >
+                    {selectedRow && (
+                        <QueryDetails
+                            row={selectedRow}
+                            onClose={handleCloseDetails}
+                            onOpenInEditor={handleOpenInEditor}
+                        />
+                    )}
+                </DrawerItem>
+            </Drawer>
+        </React.Fragment>
     );
 };