Skip to content

Commit 9d85915

Browse files
astandrikastandrik
committed
fix: split views
1 parent fed455e commit 9d85915

File tree

7 files changed

+306
-249
lines changed

7 files changed

+306
-249
lines changed

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import React from 'react';
2+
3+
import type {Column} from '@gravity-ui/react-data-table';
4+
import {TableColumnSetup} from '@gravity-ui/uikit';
5+
6+
import {ResponseError} from '../../../../components/Errors/ResponseError';
7+
import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
8+
import {Search} from '../../../../components/Search';
9+
import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
10+
import {topQueriesApi} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
11+
import type {KeyValueRow} from '../../../../types/api/query';
12+
import {cn} from '../../../../utils/cn';
13+
import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
14+
import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
15+
import {parseQueryErrorToString} from '../../../../utils/query';
16+
17+
import {getRunningQueriesColumns} from './columns/columns';
18+
import {
19+
DEFAULT_RUNNING_QUERIES_COLUMNS,
20+
REQUIRED_RUNNING_QUERIES_COLUMNS,
21+
RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY,
22+
RUNNING_QUERIES_SELECTED_COLUMNS_LS_KEY,
23+
TOP_QUERIES_COLUMNS_TITLES,
24+
} from './columns/constants';
25+
import i18n from './i18n';
26+
import {TOP_QUERIES_TABLE_SETTINGS, useRunningQueriesSort} from './utils';
27+
28+
const b = cn('kv-top-queries');
29+
30+
interface RunningQueriesContentProps {
31+
tenantName: string;
32+
renderQueryModeControl: () => React.ReactNode;
33+
onRowClick: (query: string) => void;
34+
handleTextSearchUpdate: (text: string) => void;
35+
}
36+
37+
export const RunningQueriesContent = ({
38+
tenantName,
39+
renderQueryModeControl,
40+
onRowClick,
41+
handleTextSearchUpdate,
42+
}: RunningQueriesContentProps) => {
43+
const [autoRefreshInterval] = useAutoRefreshInterval();
44+
const filters = useTypedSelector((state) => state.executeTopQueries);
45+
46+
// Get columns for running queries
47+
const columns: Column<KeyValueRow>[] = React.useMemo(() => {
48+
return getRunningQueriesColumns();
49+
}, []);
50+
51+
// Use selected columns hook
52+
const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
53+
columns,
54+
RUNNING_QUERIES_SELECTED_COLUMNS_LS_KEY,
55+
TOP_QUERIES_COLUMNS_TITLES,
56+
DEFAULT_RUNNING_QUERIES_COLUMNS,
57+
REQUIRED_RUNNING_QUERIES_COLUMNS,
58+
);
59+
60+
const {tableSort, handleTableSort, backendSort} = useRunningQueriesSort();
61+
62+
const {currentData, data, isFetching, isLoading, error} =
63+
topQueriesApi.useGetRunningQueriesQuery(
64+
{
65+
database: tenantName,
66+
filters,
67+
sortOrder: backendSort,
68+
},
69+
{pollingInterval: autoRefreshInterval},
70+
);
71+
72+
const handleRowClick = (row: KeyValueRow) => {
73+
return onRowClick(row.QueryText as string);
74+
};
75+
76+
return (
77+
<TableWithControlsLayout>
78+
<TableWithControlsLayout.Controls>
79+
{renderQueryModeControl()}
80+
<Search
81+
value={filters.text}
82+
onChange={handleTextSearchUpdate}
83+
placeholder={i18n('filter.text.placeholder')}
84+
className={b('search')}
85+
/>
86+
<TableColumnSetup
87+
popupWidth={200}
88+
items={columnsToSelect}
89+
showStatus
90+
onUpdate={setColumns}
91+
sortable={false}
92+
/>
93+
</TableWithControlsLayout.Controls>
94+
95+
{error ? <ResponseError error={parseQueryErrorToString(error)} /> : null}
96+
<TableWithControlsLayout.Table loading={isLoading}>
97+
<ResizeableDataTable
98+
emptyDataMessage={i18n('no-data')}
99+
columnsWidthLSKey={RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY}
100+
columns={columnsToShow}
101+
data={data?.resultSets?.[0].result || []}
102+
loading={isFetching && currentData === undefined}
103+
settings={TOP_QUERIES_TABLE_SETTINGS}
104+
onRowClick={handleRowClick}
105+
rowClassName={() => b('row')}
106+
sortOrder={tableSort}
107+
onSort={handleTableSort}
108+
/>
109+
</TableWithControlsLayout.Table>
110+
</TableWithControlsLayout>
111+
);
112+
};

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

Lines changed: 0 additions & 63 deletions
This file was deleted.

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

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

3-
import type {Column} from '@gravity-ui/react-data-table';
4-
import type {RadioButtonOption, SelectOption} from '@gravity-ui/uikit';
5-
import {RadioButton, Select, TableColumnSetup} from '@gravity-ui/uikit';
3+
import type {RadioButtonOption} from '@gravity-ui/uikit';
4+
import {RadioButton} from '@gravity-ui/uikit';
65
import {useHistory, useLocation} from 'react-router-dom';
76
import {StringParam, useQueryParam} from 'use-query-params';
87
import {z} from 'zod';
98

109
import type {DateRangeValues} from '../../../../components/DateRange';
11-
import {DateRange} from '../../../../components/DateRange';
12-
import {Search} from '../../../../components/Search';
13-
import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
1410
import {parseQuery} from '../../../../routes';
1511
import {setTopQueriesFilters} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
1612
import type {TimeFrame} from '../../../../store/reducers/executeTopQueries/types';
@@ -20,30 +16,17 @@ import {
2016
TENANT_PAGES_IDS,
2117
TENANT_QUERY_TABS_ID,
2218
} from '../../../../store/reducers/tenant/constants';
23-
import {cn} from '../../../../utils/cn';
24-
import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
25-
import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
19+
import {useTypedDispatch} from '../../../../utils/hooks';
2620
import {useChangeInputWithConfirmation} from '../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
2721
import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
2822

29-
import {RunningQueriesData} from './RunningQueriesData';
30-
import {TopQueriesData} from './TopQueriesData';
31-
import {getRunningQueriesColumns, getTopQueriesColumns} from './columns/columns';
32-
import {
33-
DEFAULT_RUNNING_QUERIES_COLUMNS,
34-
DEFAULT_TOP_QUERIES_COLUMNS,
35-
REQUIRED_RUNNING_QUERIES_COLUMNS,
36-
REQUIRED_TOP_QUERIES_COLUMNS,
37-
RUNNING_QUERIES_SELECTED_COLUMNS_LS_KEY,
38-
TOP_QUERIES_COLUMNS_TITLES,
39-
TOP_QUERIES_SELECTED_COLUMNS_LS_KEY,
40-
} from './columns/constants';
23+
import {RunningQueriesContent} from './RunningQueriesContent';
24+
import {TopQueriesContent} from './TopQueriesContent';
25+
import {TimeFrameIds} from './constants';
4126
import i18n from './i18n';
4227

4328
import './TopQueries.scss';
4429

45-
const b = cn('kv-top-queries');
46-
4730
const QueryModeIds = {
4831
top: 'top',
4932
running: 'running',
@@ -64,36 +47,9 @@ const QUERY_MODE_OPTIONS: RadioButtonOption[] = [
6447
},
6548
];
6649

67-
const TimeFrameIds = {
68-
hour: 'hour',
69-
minute: 'minute',
70-
} as const;
71-
7250
const queryModeSchema = z.nativeEnum(QueryModeIds).catch(QueryModeIds.top);
7351
const timeFrameSchema = z.nativeEnum(TimeFrameIds).catch(TimeFrameIds.hour);
7452

75-
const TIME_FRAME_OPTIONS: SelectOption[] = [
76-
{
77-
value: TimeFrameIds.hour,
78-
content: i18n('timeframe_hour'),
79-
},
80-
{
81-
value: TimeFrameIds.minute,
82-
content: i18n('timeframe_minute'),
83-
},
84-
];
85-
86-
const DEFAULT_TIME_FILTER_VALUE = {
87-
start: {
88-
value: 'now-6h',
89-
type: 'relative',
90-
},
91-
end: {
92-
value: 'now',
93-
type: 'relative',
94-
},
95-
} as const;
96-
9753
interface TopQueriesProps {
9854
tenantName: string;
9955
}
@@ -110,8 +66,6 @@ export const TopQueries = ({tenantName}: TopQueriesProps) => {
11066

11167
const isTopQueries = queryMode === QueryModeIds.top;
11268

113-
const filters = useTypedSelector((state) => state.executeTopQueries);
114-
11569
const applyRowClick = React.useCallback(
11670
(input: string) => {
11771
dispatch(changeUserInput({input}));
@@ -144,68 +98,28 @@ export const TopQueries = ({tenantName}: TopQueriesProps) => {
14498
dispatch(setTopQueriesFilters(value));
14599
};
146100

147-
// Get columns based on query mode
148-
const columns: Column<any>[] = React.useMemo(() => {
149-
return isTopQueries ? getTopQueriesColumns() : getRunningQueriesColumns();
150-
}, [isTopQueries]);
151-
152-
// Use selected columns hook
153-
const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
154-
columns,
155-
isTopQueries
156-
? TOP_QUERIES_SELECTED_COLUMNS_LS_KEY
157-
: RUNNING_QUERIES_SELECTED_COLUMNS_LS_KEY,
158-
TOP_QUERIES_COLUMNS_TITLES,
159-
isTopQueries ? DEFAULT_TOP_QUERIES_COLUMNS : DEFAULT_RUNNING_QUERIES_COLUMNS,
160-
isTopQueries ? REQUIRED_TOP_QUERIES_COLUMNS : REQUIRED_RUNNING_QUERIES_COLUMNS,
161-
);
162-
163-
const DataComponent = isTopQueries ? TopQueriesData : RunningQueriesData;
164-
165-
return (
166-
<TableWithControlsLayout>
167-
<TableWithControlsLayout.Controls>
168-
<RadioButton
169-
options={QUERY_MODE_OPTIONS}
170-
value={queryMode}
171-
onUpdate={setQueryMode}
172-
/>
173-
{isTopQueries && (
174-
<Select
175-
options={TIME_FRAME_OPTIONS}
176-
value={[timeFrame]}
177-
onUpdate={handleTimeFrameChange}
178-
/>
179-
)}
180-
{isTopQueries && (
181-
<DateRange
182-
from={filters.from}
183-
to={filters.to}
184-
onChange={handleDateRangeChange}
185-
defaultValue={DEFAULT_TIME_FILTER_VALUE}
186-
/>
187-
)}
188-
<Search
189-
value={filters.text}
190-
onChange={handleTextSearchUpdate}
191-
placeholder={i18n('filter.text.placeholder')}
192-
className={b('search')}
193-
/>
194-
<TableColumnSetup
195-
popupWidth={200}
196-
items={columnsToSelect}
197-
showStatus
198-
onUpdate={setColumns}
199-
sortable={false}
200-
/>
201-
</TableWithControlsLayout.Controls>
202-
<DataComponent
203-
database={tenantName}
204-
onRowClick={onRowClick}
205-
rowClassName={b('row')}
206-
timeFrame={timeFrame}
207-
columns={columnsToShow}
208-
/>
209-
</TableWithControlsLayout>
101+
const renderQueryModeControl = React.useCallback(() => {
102+
return (
103+
<RadioButton options={QUERY_MODE_OPTIONS} value={queryMode} onUpdate={setQueryMode} />
104+
);
105+
}, [queryMode, setQueryMode]);
106+
107+
return isTopQueries ? (
108+
<TopQueriesContent
109+
tenantName={tenantName}
110+
timeFrame={timeFrame}
111+
renderQueryModeControl={renderQueryModeControl}
112+
onRowClick={onRowClick}
113+
handleTimeFrameChange={handleTimeFrameChange}
114+
handleDateRangeChange={handleDateRangeChange}
115+
handleTextSearchUpdate={handleTextSearchUpdate}
116+
/>
117+
) : (
118+
<RunningQueriesContent
119+
tenantName={tenantName}
120+
renderQueryModeControl={renderQueryModeControl}
121+
onRowClick={onRowClick}
122+
handleTextSearchUpdate={handleTextSearchUpdate}
123+
/>
210124
);
211125
};

0 commit comments

Comments
 (0)