Skip to content

Commit 2280533

Browse files
astandrikastandrik
committed
fix: remove related to topQueries
1 parent 5bec8aa commit 2280533

File tree

6 files changed

+134
-255
lines changed

6 files changed

+134
-255
lines changed

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

Lines changed: 8 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22

33
import type {Column} from '@gravity-ui/react-data-table';
44
import {TableColumnSetup} from '@gravity-ui/uikit';
5-
import {isEqual} from 'lodash';
65

76
import {ResponseError} from '../../../../components/Errors/ResponseError';
87
import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
@@ -31,19 +30,18 @@ const b = cn('kv-top-queries');
3130
interface RunningQueriesDataProps {
3231
tenantName: string;
3332
renderQueryModeControl: () => React.ReactNode;
33+
onRowClick: (query: string) => void;
3434
handleTextSearchUpdate: (text: string) => void;
3535
}
3636

3737
export const RunningQueriesData = ({
3838
tenantName,
3939
renderQueryModeControl,
40+
onRowClick,
4041
handleTextSearchUpdate,
4142
}: RunningQueriesDataProps) => {
4243
const [autoRefreshInterval] = useAutoRefreshInterval();
4344
const filters = useTypedSelector((state) => state.executeTopQueries);
44-
// Internal state for selected row
45-
// null is reserved for not found state
46-
const [selectedRow, setSelectedRow] = React.useState<KeyValueRow | null | undefined>(undefined);
4745

4846
// Get columns for running queries
4947
const columns: Column<KeyValueRow>[] = React.useMemo(() => {
@@ -71,29 +69,9 @@ export const RunningQueriesData = ({
7169
{pollingInterval: autoRefreshInterval},
7270
);
7371

74-
const rows = data?.resultSets?.[0]?.result;
75-
76-
const isDrawerVisible = selectedRow !== undefined;
77-
78-
const onRowClick = React.useCallback(
79-
(
80-
row: KeyValueRow | null,
81-
_index?: number,
82-
event?: React.MouseEvent<HTMLTableRowElement>,
83-
) => {
84-
event?.stopPropagation();
85-
setSelectedRow(row);
86-
},
87-
[setSelectedRow],
88-
);
89-
90-
const inputRef = React.useRef<HTMLInputElement>(null);
91-
92-
React.useEffect(() => {
93-
if (isDrawerVisible) {
94-
inputRef.current?.blur();
95-
}
96-
}, [isDrawerVisible]);
72+
const handleRowClick = (row: KeyValueRow) => {
73+
return onRowClick(row.QueryText as string);
74+
};
9775

9876
return (
9977
<TableWithControlsLayout>
@@ -104,7 +82,6 @@ export const RunningQueriesData = ({
10482
onChange={handleTextSearchUpdate}
10583
placeholder={i18n('filter.text.placeholder')}
10684
className={b('search')}
107-
inputRef={inputRef}
10885
/>
10986
<TableColumnSetup
11087
popupWidth={200}
@@ -121,11 +98,11 @@ export const RunningQueriesData = ({
12198
emptyDataMessage={i18n('no-data')}
12299
columnsWidthLSKey={RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY}
123100
columns={columnsToShow}
124-
data={rows || []}
101+
data={data?.resultSets?.[0].result || []}
125102
loading={isFetching && currentData === undefined}
126103
settings={TOP_QUERIES_TABLE_SETTINGS}
127-
onRowClick={onRowClick}
128-
rowClassName={(row) => b('row', {active: isEqual(row, selectedRow)})}
104+
onRowClick={handleRowClick}
105+
rowClassName={() => b('row')}
129106
sortOrder={tableSort}
130107
onSort={handleTableSort}
131108
/>

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

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,6 @@
1414

1515
&__row {
1616
cursor: pointer;
17-
18-
&_active {
19-
background-color: var(--g-color-base-selection);
20-
21-
&:hover {
22-
background: var(--g-color-base-selection-hover) !important;
23-
}
24-
}
2517
}
2618

2719
&__query {
@@ -40,30 +32,4 @@
4032

4133
text-overflow: ellipsis;
4234
}
43-
44-
&__drawer {
45-
margin-top: calc(-1 * var(--g-spacing-4));
46-
}
47-
48-
&__empty-state-icon {
49-
color: var(--g-color-text-primary);
50-
}
51-
52-
&__not-found-container {
53-
display: flex;
54-
flex-direction: column;
55-
justify-content: center;
56-
align-items: center;
57-
58-
height: 100%;
59-
padding: var(--g-spacing-5) 0;
60-
}
61-
62-
&__not-found-description {
63-
margin-top: var(--g-spacing-2);
64-
}
65-
66-
&__not-found-close {
67-
margin-top: var(--g-spacing-5);
68-
}
6935
}

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

Lines changed: 115 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,133 @@
11
import React from 'react';
22

3-
import type {RadioButtonOption} from '@gravity-ui/uikit';
4-
import {RadioButton} from '@gravity-ui/uikit';
5-
import {StringParam, useQueryParam} from 'use-query-params';
6-
import {z} from 'zod';
3+
import type {Column} from '@gravity-ui/react-data-table';
4+
import {Select, TableColumnSetup} from '@gravity-ui/uikit';
75

86
import type {DateRangeValues} from '../../../../components/DateRange';
9-
import {setTopQueriesFilters} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
7+
import {DateRange} from '../../../../components/DateRange';
8+
import {ResponseError} from '../../../../components/Errors/ResponseError';
9+
import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
10+
import {Search} from '../../../../components/Search';
11+
import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
12+
import {topQueriesApi} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
1013
import type {TimeFrame} from '../../../../store/reducers/executeTopQueries/types';
11-
import {useTypedDispatch} from '../../../../utils/hooks';
12-
13-
import {RunningQueriesData} from './RunningQueriesData';
14-
import {TopQueriesData} from './TopQueriesData';
15-
import {TimeFrameIds} from './constants';
14+
import type {KeyValueRow} from '../../../../types/api/query';
15+
import {cn} from '../../../../utils/cn';
16+
import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
17+
import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
18+
import {parseQueryErrorToString} from '../../../../utils/query';
19+
20+
import {getTopQueriesColumns} from './columns/columns';
21+
import {
22+
DEFAULT_TOP_QUERIES_COLUMNS,
23+
QUERIES_COLUMNS_TITLES,
24+
REQUIRED_TOP_QUERIES_COLUMNS,
25+
TOP_QUERIES_COLUMNS_WIDTH_LS_KEY,
26+
TOP_QUERIES_SELECTED_COLUMNS_LS_KEY,
27+
} from './columns/constants';
28+
import {DEFAULT_TIME_FILTER_VALUE, TIME_FRAME_OPTIONS} from './constants';
1629
import i18n from './i18n';
30+
import {TOP_QUERIES_TABLE_SETTINGS, useTopQueriesSort} from './utils';
1731

18-
import './TopQueries.scss';
19-
20-
const QueryModeIds = {
21-
top: 'top',
22-
running: 'running',
23-
} as const;
32+
const b = cn('kv-top-queries');
2433

25-
const QUERY_MODE_OPTIONS: RadioButtonOption[] = [
26-
{
27-
value: QueryModeIds.top,
28-
get content() {
29-
return i18n('mode_top');
30-
},
31-
},
32-
{
33-
value: QueryModeIds.running,
34-
get content() {
35-
return i18n('mode_running');
36-
},
37-
},
38-
];
39-
40-
const queryModeSchema = z.nativeEnum(QueryModeIds).catch(QueryModeIds.top);
41-
const timeFrameSchema = z.nativeEnum(TimeFrameIds).catch(TimeFrameIds.hour);
42-
43-
interface TopQueriesProps {
34+
interface TopQueriesDataProps {
4435
tenantName: string;
36+
timeFrame: TimeFrame;
37+
renderQueryModeControl: () => React.ReactNode;
38+
onRowClick: (query: string) => void;
39+
handleTimeFrameChange: (value: string[]) => void;
40+
handleDateRangeChange: (value: DateRangeValues) => void;
41+
handleTextSearchUpdate: (text: string) => void;
4542
}
4643

47-
export const TopQueries = ({tenantName}: TopQueriesProps) => {
48-
const dispatch = useTypedDispatch();
49-
const [_queryMode = QueryModeIds.top, setQueryMode] = useQueryParam('queryMode', StringParam);
50-
const [_timeFrame = TimeFrameIds.hour, setTimeFrame] = useQueryParam('timeFrame', StringParam);
51-
52-
const queryMode = queryModeSchema.parse(_queryMode);
53-
const timeFrame = timeFrameSchema.parse(_timeFrame);
54-
55-
const isTopQueries = queryMode === QueryModeIds.top;
44+
export const TopQueriesData = ({
45+
tenantName,
46+
timeFrame,
47+
renderQueryModeControl,
48+
onRowClick,
49+
handleTimeFrameChange,
50+
handleDateRangeChange,
51+
handleTextSearchUpdate,
52+
}: TopQueriesDataProps) => {
53+
const [autoRefreshInterval] = useAutoRefreshInterval();
54+
const filters = useTypedSelector((state) => state.executeTopQueries);
55+
56+
// Get columns for top queries
57+
const columns: Column<KeyValueRow>[] = React.useMemo(() => {
58+
return getTopQueriesColumns();
59+
}, []);
60+
61+
// Use selected columns hook
62+
const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
63+
columns,
64+
TOP_QUERIES_SELECTED_COLUMNS_LS_KEY,
65+
QUERIES_COLUMNS_TITLES,
66+
DEFAULT_TOP_QUERIES_COLUMNS,
67+
REQUIRED_TOP_QUERIES_COLUMNS,
68+
);
5669

57-
const handleTextSearchUpdate = (text: string) => {
58-
dispatch(setTopQueriesFilters({text}));
59-
};
70+
const {tableSort, handleTableSort, backendSort} = useTopQueriesSort();
6071

61-
const handleTimeFrameChange = (value: string[]) => {
62-
setTimeFrame(value[0] as TimeFrame, 'replaceIn');
63-
};
72+
const {currentData, data, isFetching, isLoading, error} = topQueriesApi.useGetTopQueriesQuery(
73+
{
74+
database: tenantName,
75+
filters,
76+
sortOrder: backendSort,
77+
timeFrame,
78+
},
79+
{pollingInterval: autoRefreshInterval},
80+
);
6481

65-
const handleDateRangeChange = (value: DateRangeValues) => {
66-
dispatch(setTopQueriesFilters(value));
82+
const handleRowClick = (row: KeyValueRow) => {
83+
return onRowClick(row.QueryText as string);
6784
};
6885

69-
const renderQueryModeControl = React.useCallback(() => {
70-
return (
71-
<RadioButton options={QUERY_MODE_OPTIONS} value={queryMode} onUpdate={setQueryMode} />
72-
);
73-
}, [queryMode, setQueryMode]);
74-
75-
return isTopQueries ? (
76-
<TopQueriesData
77-
tenantName={tenantName}
78-
timeFrame={timeFrame}
79-
renderQueryModeControl={renderQueryModeControl}
80-
handleTimeFrameChange={handleTimeFrameChange}
81-
handleDateRangeChange={handleDateRangeChange}
82-
handleTextSearchUpdate={handleTextSearchUpdate}
83-
/>
84-
) : (
85-
<RunningQueriesData
86-
tenantName={tenantName}
87-
renderQueryModeControl={renderQueryModeControl}
88-
handleTextSearchUpdate={handleTextSearchUpdate}
89-
/>
86+
return (
87+
<TableWithControlsLayout>
88+
<TableWithControlsLayout.Controls>
89+
{renderQueryModeControl()}
90+
<Select
91+
options={TIME_FRAME_OPTIONS}
92+
value={[timeFrame]}
93+
onUpdate={handleTimeFrameChange}
94+
/>
95+
<DateRange
96+
from={filters.from}
97+
to={filters.to}
98+
onChange={handleDateRangeChange}
99+
defaultValue={DEFAULT_TIME_FILTER_VALUE}
100+
/>
101+
<Search
102+
value={filters.text}
103+
onChange={handleTextSearchUpdate}
104+
placeholder={i18n('filter.text.placeholder')}
105+
className={b('search')}
106+
/>
107+
<TableColumnSetup
108+
popupWidth={200}
109+
items={columnsToSelect}
110+
showStatus
111+
onUpdate={setColumns}
112+
sortable={false}
113+
/>
114+
</TableWithControlsLayout.Controls>
115+
116+
{error ? <ResponseError error={parseQueryErrorToString(error)} /> : null}
117+
<TableWithControlsLayout.Table loading={isLoading}>
118+
<ResizeableDataTable
119+
emptyDataMessage={i18n('no-data')}
120+
columnsWidthLSKey={TOP_QUERIES_COLUMNS_WIDTH_LS_KEY}
121+
columns={columnsToShow}
122+
data={data?.resultSets?.[0].result || []}
123+
loading={isFetching && currentData === undefined}
124+
settings={TOP_QUERIES_TABLE_SETTINGS}
125+
onRowClick={handleRowClick}
126+
rowClassName={() => b('row')}
127+
sortOrder={tableSort}
128+
onSort={handleTableSort}
129+
/>
130+
</TableWithControlsLayout.Table>
131+
</TableWithControlsLayout>
90132
);
91133
};

0 commit comments

Comments
 (0)