Skip to content

Commit 7b7848c

Browse files
sareyusareyu
committed
fix: review fixes
1 parent 12b3273 commit 7b7848c

File tree

8 files changed

+93
-104
lines changed

8 files changed

+93
-104
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ function Diagnostics(props: DiagnosticsProps) {
9393
return <SchemaViewer path={path} tenantName={tenantName} type={type} extended />;
9494
}
9595
case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
96-
return <TopQueries tenantName={tenantName} type={type} />;
96+
return <TopQueries tenantName={tenantName} />;
9797
}
9898
case TENANT_DIAGNOSTICS_TABS_IDS.topShards: {
9999
return <TopShards tenantName={tenantName} path={path} type={type} />;

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

Lines changed: 13 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,23 @@
1-
import type {Column} from '@gravity-ui/react-data-table';
2-
import DataTable from '@gravity-ui/react-data-table';
1+
import React from 'react';
32

43
import {ResponseError} from '../../../../components/Errors/ResponseError';
54
import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
65
import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
7-
import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
86
import {topQueriesApi} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
9-
import type {KeyValueRow} from '../../../../types/api/query';
10-
import {cn} from '../../../../utils/cn';
11-
import {formatDateTime} from '../../../../utils/dataFormatters/dataFormatters';
127
import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
13-
import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
8+
import {parseQueryErrorToString} from '../../../../utils/query';
9+
import {QUERY_TABLE_SETTINGS} from '../../utils/constants';
1410

11+
import {
12+
RUNNING_QUERIES_COLUMNS,
13+
RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY,
14+
} from './getTopQueriesColumns';
1515
import i18n from './i18n';
1616

17-
const b = cn('kv-top-queries');
18-
1917
interface Props {
2018
database: string;
2119
}
2220

23-
const RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY = 'runningQueriesColumnsWidth';
24-
25-
const columns: Column<KeyValueRow>[] = [
26-
{
27-
name: 'UserSID',
28-
header: i18n('col_user'),
29-
render: ({row}) => <div className={b('user-sid')}>{row.UserSID || '–'}</div>,
30-
sortable: true,
31-
},
32-
{
33-
name: 'QueryStartAt',
34-
header: i18n('col_start-time'),
35-
render: ({row}) => formatDateTime(new Date(row.QueryStartAt as string).getTime()),
36-
sortable: true,
37-
resizeable: false,
38-
defaultOrder: DataTable.DESCENDING,
39-
},
40-
{
41-
name: 'Query',
42-
header: i18n('col_query-text'),
43-
render: ({row}) => (
44-
<div className={b('query')}>
45-
<TruncatedQuery value={row.Query?.toString()} maxQueryHeight={MAX_QUERY_HEIGHT} />
46-
</div>
47-
),
48-
width: 500,
49-
sortable: false,
50-
},
51-
{
52-
name: 'ApplicationName',
53-
header: i18n('col_app'),
54-
render: ({row}) => <div className={b('user-sid')}>{row.ApplicationName || '–'}</div>,
55-
sortable: true,
56-
},
57-
];
58-
5921
export const RunningQueriesData = ({database}: Props) => {
6022
const [autoRefreshInterval] = useAutoRefreshInterval();
6123
const filters = useTypedSelector((state) => state.executeTopQueries);
@@ -72,18 +34,17 @@ export const RunningQueriesData = ({database}: Props) => {
7234
);
7335

7436
return (
75-
<TableWithControlsLayout.Table loading={isFetching && data === undefined}>
76-
{error ? (
77-
<ResponseError error={error} />
78-
) : (
37+
<React.Fragment>
38+
{error ? <ResponseError error={parseQueryErrorToString(error)} /> : null}
39+
<TableWithControlsLayout.Table loading={isFetching && data === undefined}>
7940
<ResizeableDataTable
8041
emptyDataMessage={i18n('no-data')}
8142
columnsWidthLSKey={RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY}
82-
columns={columns}
43+
columns={RUNNING_QUERIES_COLUMNS}
8344
data={data || []}
8445
settings={QUERY_TABLE_SETTINGS}
8546
/>
86-
)}
87-
</TableWithControlsLayout.Table>
47+
</TableWithControlsLayout.Table>
48+
</React.Fragment>
8849
);
8950
};

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

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
TENANT_PAGES_IDS,
1818
TENANT_QUERY_TABS_ID,
1919
} from '../../../../store/reducers/tenant/constants';
20-
import type {EPathType} from '../../../../types/api/schema';
2120
import {cn} from '../../../../utils/cn';
2221
import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
2322
import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
@@ -30,21 +29,40 @@ import './TopQueries.scss';
3029

3130
const b = cn('kv-top-queries');
3231

33-
const QUERY_MODE_OPTIONS: RadioButtonOption[] = [
34-
{value: 'top', content: i18n('mode_top')},
35-
{value: 'running', content: i18n('mode_running')},
32+
enum QueryModeIds {
33+
'top',
34+
'running',
35+
}
36+
37+
type QueryModeIdsType = keyof typeof QueryModeIds;
38+
39+
const QUERY_MODE_OPTIONS: RadioButtonOption<QueryModeIdsType>[] = [
40+
{
41+
value: 'top',
42+
get content() {
43+
return i18n('mode_top');
44+
},
45+
},
46+
{
47+
value: 'running',
48+
get content() {
49+
return i18n('mode_running');
50+
},
51+
},
3652
];
3753

3854
interface TopQueriesProps {
3955
tenantName: string;
40-
type?: EPathType;
4156
}
4257

43-
export const TopQueries = ({tenantName, type}: TopQueriesProps) => {
58+
export const TopQueries = ({tenantName}: TopQueriesProps) => {
4459
const dispatch = useTypedDispatch();
4560
const location = useLocation();
4661
const history = useHistory();
47-
const [queryMode = 'top', setQueryMode] = useQueryParam('queryMode', StringParam);
62+
const [_queryMode = 'top', setQueryMode] = useQueryParam('queryMode', StringParam);
63+
64+
const queryMode =
65+
_queryMode && Object.keys(QueryModeIds).includes(_queryMode) ? _queryMode : 'top';
4866

4967
const isTopQueries = queryMode === 'top';
5068

@@ -98,7 +116,7 @@ export const TopQueries = ({tenantName, type}: TopQueriesProps) => {
98116
) : null}
99117
</TableWithControlsLayout.Controls>
100118
{isTopQueries ? (
101-
<TopQueriesData database={tenantName} type={type} onRowClick={onRowClick} />
119+
<TopQueriesData database={tenantName} onRowClick={onRowClick} />
102120
) : (
103121
<RunningQueriesData database={tenantName} />
104122
)}

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

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1+
import React from 'react';
2+
13
import {ResponseError} from '../../../../components/Errors/ResponseError';
24
import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
35
import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
46
import {topQueriesApi} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
57
import type {KeyValueRow} from '../../../../types/api/query';
6-
import type {EPathType} from '../../../../types/api/schema';
78
import {cn} from '../../../../utils/cn';
89
import {isSortableTopQueriesProperty} from '../../../../utils/diagnostics';
910
import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
11+
import {parseQueryErrorToString} from '../../../../utils/query';
1012
import {QUERY_TABLE_SETTINGS} from '../../utils/constants';
11-
import {isColumnEntityType} from '../../utils/schema';
1213

1314
import {TOP_QUERIES_COLUMNS, TOP_QUERIES_COLUMNS_WIDTH_LS_KEY} from './getTopQueriesColumns';
1415
import i18n from './i18n';
@@ -17,11 +18,10 @@ const b = cn('kv-top-queries');
1718

1819
interface Props {
1920
database: string;
20-
onRowClick: (row: any) => void;
21-
type?: EPathType;
21+
onRowClick: (query: string) => void;
2222
}
2323

24-
export const TopQueriesData = ({database, onRowClick, type}: Props) => {
24+
export const TopQueriesData = ({database, onRowClick}: Props) => {
2525
const [autoRefreshInterval] = useAutoRefreshInterval();
2626
const filters = useTypedSelector((state) => state.executeTopQueries);
2727
const {currentData, isFetching, error} = topQueriesApi.useGetTopQueriesQuery(
@@ -31,7 +31,6 @@ export const TopQueriesData = ({database, onRowClick, type}: Props) => {
3131
},
3232
{pollingInterval: autoRefreshInterval},
3333
);
34-
const loading = isFetching && currentData === undefined;
3534
const {result: data} = currentData || {};
3635

3736
const rawColumns = TOP_QUERIES_COLUMNS;
@@ -44,28 +43,20 @@ export const TopQueriesData = ({database, onRowClick, type}: Props) => {
4443
return onRowClick(row.QueryText as string);
4544
};
4645

47-
if (error && !data) {
48-
return (
49-
<TableWithControlsLayout.Table>
50-
<ResponseError error={error} />
51-
</TableWithControlsLayout.Table>
52-
);
53-
}
54-
55-
if (!data || isColumnEntityType(type)) {
56-
return <TableWithControlsLayout.Table>{i18n('no-data')}</TableWithControlsLayout.Table>;
57-
}
58-
5946
return (
60-
<TableWithControlsLayout.Table loading={loading}>
61-
<ResizeableDataTable
62-
columnsWidthLSKey={TOP_QUERIES_COLUMNS_WIDTH_LS_KEY}
63-
columns={columns}
64-
data={data}
65-
settings={QUERY_TABLE_SETTINGS}
66-
onRowClick={handleRowClick}
67-
rowClassName={() => b('row')}
68-
/>
69-
</TableWithControlsLayout.Table>
47+
<React.Fragment>
48+
{error ? <ResponseError error={parseQueryErrorToString(error)} /> : null}
49+
<TableWithControlsLayout.Table loading={isFetching && currentData === undefined}>
50+
<ResizeableDataTable
51+
emptyDataMessage={i18n('no-data')}
52+
columnsWidthLSKey={TOP_QUERIES_COLUMNS_WIDTH_LS_KEY}
53+
columns={columns}
54+
data={data || []}
55+
settings={QUERY_TABLE_SETTINGS}
56+
onRowClick={handleRowClick}
57+
rowClassName={() => b('row')}
58+
/>
59+
</TableWithControlsLayout.Table>
60+
</React.Fragment>
7061
);
7162
};

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,14 @@ import {generateHash} from '../../../../utils/generateHash';
1313
import {formatToMs, parseUsToMs} from '../../../../utils/timeParsers';
1414
import {MAX_QUERY_HEIGHT} from '../../utils/constants';
1515

16+
import i18n from './i18n';
17+
1618
import './TopQueries.scss';
1719

1820
const b = cn('kv-top-queries');
1921

2022
export const TOP_QUERIES_COLUMNS_WIDTH_LS_KEY = 'topQueriesColumnsWidth';
23+
export const RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY = 'runningQueriesColumnsWidth';
2124

2225
const cpuTimeUsColumn: Column<KeyValueRow> = {
2326
name: TOP_QUERIES_COLUMNS_IDS.CPUTimeUs,
@@ -94,6 +97,26 @@ const durationColumn: Column<KeyValueRow> = {
9497
width: 150,
9598
};
9699

100+
const queryStartColumn: Column<KeyValueRow> = {
101+
name: 'QueryStartAt',
102+
get header() {
103+
return i18n('col_start-time');
104+
},
105+
render: ({row}) => formatDateTime(new Date(row.QueryStartAt as string).getTime()),
106+
sortable: true,
107+
resizeable: false,
108+
defaultOrder: DataTable.DESCENDING,
109+
};
110+
111+
const applicationColumn: Column<KeyValueRow> = {
112+
name: 'ApplicationName',
113+
get header() {
114+
return i18n('col_app');
115+
},
116+
render: ({row}) => <div className={b('user-sid')}>{row.ApplicationName || '–'}</div>,
117+
sortable: true,
118+
};
119+
97120
export const TOP_QUERIES_COLUMNS = [
98121
cpuTimeUsColumn,
99122
queryTextColumn,
@@ -109,3 +132,10 @@ export const TENANT_OVERVIEW_TOP_QUERUES_COLUMNS = [
109132
oneLineQueryTextColumn,
110133
cpuTimeUsColumn,
111134
];
135+
136+
export const RUNNING_QUERIES_COLUMNS = [
137+
userSIDColumn,
138+
queryStartColumn,
139+
queryTextColumn,
140+
applicationColumn,
141+
];

‎src/containers/Tenant/Diagnostics/TopQueries/i18n/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import {registerKeysets} from '../../../../../utils/i18n';
22

33
import en from './en.json';
4-
import ru from './ru.json';
54

65
const COMPONENT = 'ydb-diagnostics-top-queries';
76

8-
export default registerKeysets(COMPONENT, {ru, en});
7+
export default registerKeysets(COMPONENT, {en});

‎src/containers/Tenant/Diagnostics/TopQueries/i18n/ru.json‎

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

‎src/store/reducers/executeTopQueries/executeTopQueries.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,13 +96,13 @@ export const topQueriesApi = api.injectEndpoints({
9696
) => {
9797
try {
9898
const filterConditions = filters?.text ? `Query ILIKE '%${filters.text}%'` : '';
99-
const queryText = `SELECT * from \`.sys/query_sessions\` WHERE ${filterConditions || 'true'} ORDER BY SessionStartAt limit 100`;
99+
const queryText = `SELECT UserSID, QueryStartAt, Query as QueryText, ApplicationName from \`.sys/query_sessions\` WHERE ${filterConditions || 'true'} ORDER BY SessionStartAt limit 100`;
100100

101101
const response = await window.api.sendQuery(
102102
{
103103
query: queryText,
104104
database,
105-
action: 'execute-query',
105+
action: 'execute-scan',
106106
},
107107
{signal, withRetries: true},
108108
);
@@ -111,7 +111,7 @@ export const topQueriesApi = api.injectEndpoints({
111111
throw response;
112112
}
113113

114-
return {data: response?.result?.filter((item) => item.Query !== queryText)};
114+
return {data: response?.result?.filter((item) => item.QueryText !== queryText)};
115115
} catch (error) {
116116
return {error};
117117
}

0 commit comments

Comments
 (0)