feat: design query tab

Author: astandrik

src/components/DateRange/DateRange.scss

@@ -1,7 +1,7 @@
 .date-range {
     &__range-input {
         &_s {
-            width: 200px;
+            width: 130px;
         }
 
         &_m {

src/components/DateRange/DateRange.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 
-import type {RelativeRangeDatePickerProps} from '@gravity-ui/date-components';
+import type {
+    RelativeRangeDatePickerProps,
+    RelativeRangeDatePickerValue,
+} from '@gravity-ui/date-components';
 import {RelativeRangeDatePicker} from '@gravity-ui/date-components';
 
 import {cn} from '../../utils/cn';
@@ -19,23 +22,13 @@ export interface DateRangeValues {
     to?: string;
 }
 
-const DEFAULT_VALUE = {
-    start: {
-        value: 'now-1h',
-        type: 'relative',
-    },
-    end: {
-        value: 'now',
-        type: 'relative',
-    },
-} as const;
-
 interface DateRangeProps extends DateRangeValues {
     className?: string;
+    defaultValue?: RelativeRangeDatePickerValue;
     onChange?: (value: DateRangeValues) => void;
 }
 
-export const DateRange = ({from, to, className, onChange}: DateRangeProps) => {
+export const DateRange = ({from, to, className, defaultValue, onChange}: DateRangeProps) => {
     const handleUpdate = React.useCallback<NonNullable<RelativeRangeDatePickerProps['onUpdate']>>(
         (pickerValue) => onChange?.(toDateRangeValues(pickerValue)),
         [onChange],
@@ -50,13 +43,14 @@ export const DateRange = ({from, to, className, onChange}: DateRangeProps) => {
 
     // eslint-disable-next-line new-cap
     const timeZoneString = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const currentValue = value || defaultValue;
     return (
         <div className={b(null, className)}>
             <RelativeRangeDatePicker
                 withPresets
-                className={b('range-input', {[getdatePickerSize(value)]: true})}
+                className={b('range-input', {[getdatePickerSize(currentValue)]: true})}
                 timeZone={timeZoneString}
-                value={value || DEFAULT_VALUE}
+                value={currentValue}
                 allowNullableValues
                 size="m"
                 format={i18n('date-time-format')}

src/components/ResizeableDataTable/ResizeableDataTable.scss

@@ -5,4 +5,9 @@
 
     // padding for easier resize of the last column
     padding-right: 20px;
+
+    &__row-skeleton {
+        width: 100%;
+        height: 50%;
+    }
 }

src/components/ResizeableDataTable/ResizeableDataTable.tsx

@@ -1,5 +1,6 @@
-import type {DataTableProps, Settings} from '@gravity-ui/react-data-table';
+import type {Column, DataTableProps, Settings} from '@gravity-ui/react-data-table';
 import DataTable, {updateColumnsWidth} from '@gravity-ui/react-data-table';
+import {Skeleton} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {useTableResize} from '../../utils/hooks/useTableResize';
@@ -11,18 +12,28 @@ const b = cn('ydb-resizeable-data-table');
 export interface ResizeableDataTableProps<T> extends Omit<DataTableProps<T>, 'theme' | 'onResize'> {
     columnsWidthLSKey?: string;
     wrapperClassName?: string;
+    loading?: boolean;
 }
 
 export function ResizeableDataTable<T>({
     columnsWidthLSKey,
     columns,
     settings,
     wrapperClassName,
+    loading,
     ...props
 }: ResizeableDataTableProps<T>) {
     const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
 
-    const updatedColumns = updateColumnsWidth(columns, tableColumnsWidth);
+    // If loading is true, override the render method of each column to display a Skeleton
+    const processedColumns = loading
+        ? columns.map((column: Column<T>) => ({
+              ...column,
+              render: () => <Skeleton className={b('row-skeleton')} />,
+          }))
+        : columns;
+
+    const updatedColumns = updateColumnsWidth(processedColumns, tableColumnsWidth);
 
     const newSettings: Settings = {
         ...settings,

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

@@ -45,7 +45,7 @@ export function TopQueries({tenantName}: TopQueriesProps) {
     }, []);
 
     const {currentData, isFetching, error} = topQueriesApi.useGetTopQueriesQuery(
-        {database: tenantName},
+        {database: tenantName, timeFrame: 'hour'},
         {pollingInterval: autoRefreshInterval},
     );
 

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

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import type {Column} from '@gravity-ui/react-data-table';
+
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
@@ -8,7 +10,6 @@ import type {KeyValueRow} from '../../../../types/api/query';
 import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
 import {parseQueryErrorToString} from '../../../../utils/query';
 
-import {getRunningQueriesColumns} from './columns/columns';
 import {RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY} from './columns/constants';
 import i18n from './i18n';
 import {TOP_QUERIES_TABLE_SETTINGS, useRunningQueriesSort} from './utils';
@@ -17,30 +18,24 @@ interface Props {
     database: string;
     onRowClick: (query: string) => void;
     rowClassName: string;
+    columns: Column<KeyValueRow>[];
 }
 
-export const RunningQueriesData = ({database, onRowClick, rowClassName}: Props) => {
+export const RunningQueriesData = ({database, onRowClick, rowClassName, columns}: Props) => {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const filters = useTypedSelector((state) => state.executeTopQueries);
 
     const {tableSort, handleTableSort, backendSort} = useRunningQueriesSort();
 
-    const {currentData, isFetching, error} = topQueriesApi.useGetRunningQueriesQuery(
-        {
-            database,
-            filters,
-            sortOrder: backendSort,
-        },
-        {pollingInterval: autoRefreshInterval},
-    );
-
-    const loading = isFetching && currentData === undefined;
-
-    const data = currentData?.resultSets?.[0].result || [];
-
-    const columns = React.useMemo(() => {
-        return getRunningQueriesColumns();
-    }, []);
+    const {currentData, data, isLoading, isFetching, error} =
+        topQueriesApi.useGetRunningQueriesQuery(
+            {
+                database,
+                filters,
+                sortOrder: backendSort,
+            },
+            {pollingInterval: autoRefreshInterval},
+        );
 
     const handleRowClick = (row: KeyValueRow) => {
         return onRowClick(row.QueryText as string);
@@ -49,12 +44,13 @@ export const RunningQueriesData = ({database, onRowClick, rowClassName}: Props)
     return (
         <React.Fragment>
             {error ? <ResponseError error={parseQueryErrorToString(error)} /> : null}
-            <TableWithControlsLayout.Table loading={loading}>
+            <TableWithControlsLayout.Table loading={isLoading}>
                 <ResizeableDataTable
                     emptyDataMessage={i18n('no-data')}
                     columnsWidthLSKey={RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY}
                     columns={columns}
-                    data={data}
+                    data={data?.resultSets?.[0].result || []}
+                    loading={isFetching && currentData === undefined}
                     settings={TOP_QUERIES_TABLE_SETTINGS}
                     onRowClick={handleRowClick}
                     rowClassName={() => rowClassName}

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

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import type {RadioButtonOption} from '@gravity-ui/uikit';
-import {RadioButton} from '@gravity-ui/uikit';
+import type {Column} from '@gravity-ui/react-data-table';
+import type {RadioButtonOption, SelectOption} from '@gravity-ui/uikit';
+import {RadioButton, Select, TableColumnSetup} from '@gravity-ui/uikit';
 import {useHistory, useLocation} from 'react-router-dom';
 import {StringParam, useQueryParam} from 'use-query-params';
 import {z} from 'zod';
@@ -12,6 +13,7 @@ import {Search} from '../../../../components/Search';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {parseQuery} from '../../../../routes';
 import {setTopQueriesFilters} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
+import type {TimeFrame} from '../../../../store/reducers/executeTopQueries/types';
 import {changeUserInput, setIsDirty} from '../../../../store/reducers/query/query';
 import {
     TENANT_PAGE,
@@ -20,11 +22,22 @@ import {
 } from '../../../../store/reducers/tenant/constants';
 import {cn} from '../../../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
+import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
 import {useChangeInputWithConfirmation} from '../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
 import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
 
 import {RunningQueriesData} from './RunningQueriesData';
 import {TopQueriesData} from './TopQueriesData';
+import {getRunningQueriesColumns, getTopQueriesColumns} from './columns/columns';
+import {
+    DEFAULT_RUNNING_QUERIES_COLUMNS,
+    DEFAULT_TOP_QUERIES_COLUMNS,
+    REQUIRED_RUNNING_QUERIES_COLUMNS,
+    REQUIRED_TOP_QUERIES_COLUMNS,
+    RUNNING_QUERIES_SELECTED_COLUMNS_LS_KEY,
+    TOP_QUERIES_COLUMNS_TITLES,
+    TOP_QUERIES_SELECTED_COLUMNS_LS_KEY,
+} from './columns/constants';
 import i18n from './i18n';
 
 import './TopQueries.scss';
@@ -51,7 +64,35 @@ const QUERY_MODE_OPTIONS: RadioButtonOption[] = [
     },
 ];
 
+const TimeFrameIds = {
+    hour: 'hour',
+    minute: 'minute',
+} as const;
+
 const queryModeSchema = z.nativeEnum(QueryModeIds).catch(QueryModeIds.top);
+const timeFrameSchema = z.nativeEnum(TimeFrameIds).catch(TimeFrameIds.hour);
+
+const TIME_FRAME_OPTIONS: SelectOption[] = [
+    {
+        value: TimeFrameIds.hour,
+        content: i18n('timeframe_hour'),
+    },
+    {
+        value: TimeFrameIds.minute,
+        content: i18n('timeframe_minute'),
+    },
+];
+
+const DEFAULT_TIME_FILTER_VALUE = {
+    start: {
+        value: 'now-6h',
+        type: 'relative',
+    },
+    end: {
+        value: 'now',
+        type: 'relative',
+    },
+} as const;
 
 interface TopQueriesProps {
     tenantName: string;
@@ -62,8 +103,10 @@ export const TopQueries = ({tenantName}: TopQueriesProps) => {
     const location = useLocation();
     const history = useHistory();
     const [_queryMode = QueryModeIds.top, setQueryMode] = useQueryParam('queryMode', StringParam);
+    const [_timeFrame = TimeFrameIds.hour, setTimeFrame] = useQueryParam('timeFrame', StringParam);
 
     const queryMode = queryModeSchema.parse(_queryMode);
+    const timeFrame = timeFrameSchema.parse(_timeFrame);
 
     const isTopQueries = queryMode === QueryModeIds.top;
 
@@ -93,10 +136,30 @@ export const TopQueries = ({tenantName}: TopQueriesProps) => {
         dispatch(setTopQueriesFilters({text}));
     };
 
+    const handleTimeFrameChange = (value: string[]) => {
+        setTimeFrame(value[0] as TimeFrame);
+    };
+
     const handleDateRangeChange = (value: DateRangeValues) => {
         dispatch(setTopQueriesFilters(value));
     };
 
+    // Get columns based on query mode
+    const columns: Column<any>[] = React.useMemo(() => {
+        return isTopQueries ? getTopQueriesColumns() : getRunningQueriesColumns();
+    }, [isTopQueries]);
+
+    // Use selected columns hook
+    const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
+        columns,
+        isTopQueries
+            ? TOP_QUERIES_SELECTED_COLUMNS_LS_KEY
+            : RUNNING_QUERIES_SELECTED_COLUMNS_LS_KEY,
+        TOP_QUERIES_COLUMNS_TITLES,
+        isTopQueries ? DEFAULT_TOP_QUERIES_COLUMNS : DEFAULT_RUNNING_QUERIES_COLUMNS,
+        isTopQueries ? REQUIRED_TOP_QUERIES_COLUMNS : REQUIRED_RUNNING_QUERIES_COLUMNS,
+    );
+
     const DataComponent = isTopQueries ? TopQueriesData : RunningQueriesData;
 
     return (
@@ -107,21 +170,42 @@ export const TopQueries = ({tenantName}: TopQueriesProps) => {
                     value={queryMode}
                     onUpdate={setQueryMode}
                 />
+                {isTopQueries && (
+                    <Select
+                        options={TIME_FRAME_OPTIONS}
+                        value={[timeFrame]}
+                        onUpdate={handleTimeFrameChange}
+                    />
+                )}
+                {isTopQueries && (
+                    <DateRange
+                        from={filters.from}
+                        to={filters.to}
+                        onChange={handleDateRangeChange}
+                        defaultValue={DEFAULT_TIME_FILTER_VALUE}
+                    />
+                )}
                 <Search
                     value={filters.text}
                     onChange={handleTextSearchUpdate}
                     placeholder={i18n('filter.text.placeholder')}
                     className={b('search')}
                 />
-                {isTopQueries ? (
-                    <DateRange
-                        from={filters.from}
-                        to={filters.to}
-                        onChange={handleDateRangeChange}
-                    />
-                ) : null}
+                <TableColumnSetup
+                    popupWidth={200}
+                    items={columnsToSelect}
+                    showStatus
+                    onUpdate={setColumns}
+                    sortable={false}
+                />
             </TableWithControlsLayout.Controls>
-            <DataComponent database={tenantName} onRowClick={onRowClick} rowClassName={b('row')} />
+            <DataComponent
+                database={tenantName}
+                onRowClick={onRowClick}
+                rowClassName={b('row')}
+                timeFrame={timeFrame}
+                columns={columnsToShow}
+            />
         </TableWithControlsLayout>
     );
 };