Skip to content

Commit 6378ca7

Browse files
artemmufazalovartemmufazalov
authored
feat(QueryEditor): transform history and saved to tabs (#427)
1 parent 19ca3bd commit 6378ca7

File tree

28 files changed

+519
-483
lines changed

28 files changed

+519
-483
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const columns: Column<IPreparedConsumerData>[] = [
4242
<InternalLink
4343
to={createHref(routes.tenant, undefined, {
4444
...queryParams,
45-
[TenantTabsGroups.generalTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
45+
[TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
4646
selectedConsumer: row.name,
4747
})}
4848
>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ function Diagnostics(props: DiagnosticsProps) {
176176
wrapTo={({id}, node) => {
177177
const path = createHref(routes.tenant, undefined, {
178178
...queryParams,
179-
[TenantTabsGroups.generalTab]: id,
179+
[TenantTabsGroups.diagnosticsTab]: id,
180180
});
181181

182182
return (

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

+11-13
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {useHistory, useLocation} from 'react-router';
44
import qs from 'qs';
55
import cn from 'bem-cn-lite';
66

7-
import DataTable, {Column, Settings} from '@gravity-ui/react-data-table';
7+
import DataTable, {Column} from '@gravity-ui/react-data-table';
88
import {Loader} from '@gravity-ui/uikit';
99

1010
import {DateRange, DateRangeValues} from '../../../../components/DateRange';
@@ -24,27 +24,24 @@ import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries
2424
import type {IQueryResult} from '../../../../types/store/query';
2525
import type {TenantGeneralTab} from '../../../../store/reducers/tenant/types';
2626

27-
import {TENANT_GENERAL_TABS_IDS} from '../../../../store/reducers/tenant/constants';
27+
import {
28+
TENANT_GENERAL_TABS_IDS,
29+
TENANT_QUERY_TABS_ID,
30+
} from '../../../../store/reducers/tenant/constants';
2831
import {formatDateTime, formatNumber} from '../../../../utils';
29-
import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
32+
import {HOUR_IN_SECONDS} from '../../../../utils/constants';
3033
import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
3134
import {prepareQueryError} from '../../../../utils/query';
32-
import routes, {createHref} from '../../../../routes';
3335

36+
import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
3437
import {isColumnEntityType} from '../../utils/schema';
35-
import {TenantTabsGroups} from '../../TenantPages';
38+
import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
3639

3740
import i18n from './i18n';
3841
import './TopQueries.scss';
3942

4043
const b = cn('kv-top-queries');
4144

42-
const TABLE_SETTINGS: Settings = {
43-
...DEFAULT_TABLE_SETTINGS,
44-
dynamicRenderType: 'variable',
45-
};
46-
47-
const MAX_QUERY_HEIGHT = 10;
4845
const COLUMNS: Column<KeyValueRow>[] = [
4946
{
5047
name: 'CPUTimeUs',
@@ -178,9 +175,10 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
178175
ignoreQueryPrefix: true,
179176
});
180177

181-
const queryPath = createHref(routes.tenant, undefined, {
178+
const queryPath = getTenantPath({
182179
...queryParams,
183180
[TenantTabsGroups.general]: TENANT_GENERAL_TABS_IDS.query,
181+
[TenantTabsGroups.queryTab]: TENANT_QUERY_TABS_ID.newQuery,
184182
});
185183

186184
history.push(queryPath);
@@ -222,7 +220,7 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
222220
<DataTable
223221
columns={COLUMNS}
224222
data={data}
225-
settings={TABLE_SETTINGS}
223+
settings={QUERY_TABLE_SETTINGS}
226224
onRowClick={handleRowClick}
227225
theme="yandex-cloud"
228226
/>

‎src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {useThemeValue} from '@gravity-ui/uikit';
77
import type {EPathType} from '../../../types/api/schema';
88
import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
99

10-
import QueryEditor from '../QueryEditor/QueryEditor';
10+
import {Query} from '../QueryEditor/Query';
1111
import Diagnostics from '../Diagnostics/Diagnostics';
1212

1313
import './ObjectGeneral.scss';
@@ -35,7 +35,7 @@ function ObjectGeneral(props: ObjectGeneralProps) {
3535
const {type, additionalTenantInfo, additionalNodesInfo} = props;
3636
switch (generalTab) {
3737
case TENANT_GENERAL_TABS_IDS.query: {
38-
return <QueryEditor path={tenantName as string} theme={theme} type={type} />;
38+
return <Query path={tenantName as string} theme={theme} type={type} />;
3939
}
4040
default: {
4141
return (

‎src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,11 @@ import {
4747
PaneVisibilityToggleButtons,
4848
} from '../utils/paneVisibilityToggleHelpers';
4949
import {setShowPreview} from '../../../store/reducers/schema/schema';
50-
import {setTopLevelTab} from '../../../store/reducers/tenant/tenant';
51-
import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
50+
import {setQueryTab, setTopLevelTab} from '../../../store/reducers/tenant/tenant';
51+
import {
52+
TENANT_GENERAL_TABS_IDS,
53+
TENANT_QUERY_TABS_ID,
54+
} from '../../../store/reducers/tenant/constants';
5255

5356
import './ObjectSummary.scss';
5457

@@ -276,6 +279,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
276279
const onOpenPreview = () => {
277280
dispatch(setShowPreview(true));
278281
dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
282+
dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
279283
};
280284

281285
const renderCommonInfoControls = () => {

‎src/containers/Tenant/QueryEditor/QueriesHistory/QueriesHistory.scss

+9-74
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,20 @@
1-
$popup-width: 700px;
1+
@import '../../../../styles/mixins.scss';
22

3-
.kv-queries-history {
4-
$block: &;
5-
padding: 12px 16px;
3+
.ydb-queries-history {
4+
overflow: auto;
65

7-
&__empty {
8-
font-weight: 600;
9-
text-align: center;
10-
}
11-
&__popup-wrapper {
12-
overflow: hidden;
13-
14-
width: $popup-width;
15-
max-width: $popup-width !important;
16-
17-
border-radius: 4px;
18-
:nth-child(2) {
19-
overflow-y: auto;
20-
21-
max-height: 50vh;
22-
}
23-
24-
&::before {
25-
width: $popup-width;
26-
27-
border-radius: 4px;
28-
}
29-
}
30-
&__saved-queries-row {
31-
display: flex;
32-
align-items: center;
6+
height: 100%;
7+
padding: 0 16px;
338

34-
padding: 8px 5px;
9+
@include flex-container();
10+
@include table-styles;
3511

36-
border-bottom: 1px solid var(--yc-color-line-generic);
37-
&:hover {
38-
cursor: pointer;
39-
40-
color: var(--yc-color-text-link-hover);
41-
background: var(--yc-color-base-simple-hover);
42-
#{$block}__query-controls {
43-
display: flex;
44-
}
45-
}
46-
&_header {
47-
font-weight: 600;
48-
&:hover {
49-
cursor: auto;
50-
51-
color: var(--yc-color-text-primary);
52-
background: var(--yc-color-base-background);
53-
}
54-
}
55-
}
56-
&__query-body {
12+
&__query {
5713
overflow: hidden;
5814
flex-grow: 1;
5915

16+
cursor: pointer;
6017
white-space: pre;
6118
text-overflow: ellipsis;
62-
&_header {
63-
display: flex;
64-
justify-content: center;
65-
}
66-
}
67-
&__query-controls {
68-
display: none;
69-
}
70-
&__control-button {
71-
display: flex;
72-
justify-content: center;
73-
align-items: center;
74-
75-
width: 24px;
76-
77-
color: var(--yc-color-text-hint);
78-
&:hover {
79-
color: var(--yc-color-text-secondary);
80-
}
81-
}
82-
&__dialog-query-name {
83-
font-weight: 500;
8419
}
8520
}

‎src/containers/Tenant/QueryEditor/QueriesHistory/QueriesHistory.tsx

+37-72
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,59 @@
1-
import React, {useRef, useState} from 'react';
2-
import cn from 'bem-cn-lite';
3-
import _ from 'lodash';
4-
import {Button, Popup} from '@gravity-ui/uikit';
1+
import {useDispatch} from 'react-redux';
2+
import block from 'bem-cn-lite';
3+
4+
import DataTable, {Column} from '@gravity-ui/react-data-table';
55

66
import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
7+
import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
8+
import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
79
import {useTypedSelector} from '../../../../utils/hooks';
10+
import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
811

9-
import './QueriesHistory.scss';
12+
import i18n from '../i18n';
1013

11-
const b = cn('kv-queries-history');
14+
import './QueriesHistory.scss';
1215

13-
const MAX_QUERY_HEIGHT = 3;
16+
const b = block('ydb-queries-history');
1417

1518
interface QueriesHistoryProps {
1619
changeUserInput: (value: {input: string}) => void;
1720
}
1821

19-
function QueriesHistory(props: QueriesHistoryProps) {
20-
const [isHistoryVisible, setIsHistoryVisible] = useState(false);
21-
const history = useTypedSelector((state) => state.executeQuery.history.queries) ?? [];
22-
const anchor = useRef(null);
22+
function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
23+
const dispatch = useDispatch();
2324

24-
const onShowHistoryClick = () => {
25-
setIsHistoryVisible(true);
26-
};
27-
28-
const onCloseHistory = () => {
29-
setIsHistoryVisible(false);
30-
};
25+
const queriesHistory = useTypedSelector((state) => state.executeQuery.history.queries) ?? [];
26+
const reversedHistory = [...queriesHistory].reverse();
3127

3228
const onQueryClick = (queryText: string) => {
33-
const {changeUserInput} = props;
34-
return () => {
35-
changeUserInput({input: queryText});
36-
onCloseHistory();
37-
};
29+
changeUserInput({input: queryText});
30+
dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
3831
};
3932

40-
const renderSavedQueries = () => {
41-
const reversedHistory = ([] as string[]).concat(history).reverse();
42-
return (
43-
<Popup
44-
className={b('popup-wrapper')}
45-
anchorRef={anchor}
46-
open={isHistoryVisible}
47-
placement={['bottom-end']}
48-
onClose={onCloseHistory}
49-
>
50-
<div className={b()}>
51-
{reversedHistory.length === 0 ? (
52-
<div className={b('empty')}>History is empty</div>
53-
) : (
54-
<React.Fragment>
55-
<div className={b('saved-queries-row', {header: true})}>
56-
<div className={b('query-body', {header: true})}>
57-
<span>QueryText</span>
58-
</div>
59-
</div>
60-
<div>
61-
{reversedHistory.map((query, index) => {
62-
return (
63-
<div
64-
className={b('saved-queries-row')}
65-
onClick={onQueryClick(query)}
66-
key={index}
67-
>
68-
<div className={b('query-body')}>
69-
<TruncatedQuery
70-
value={query}
71-
maxQueryHeight={MAX_QUERY_HEIGHT}
72-
/>
73-
</div>
74-
</div>
75-
);
76-
})}
77-
</div>
78-
</React.Fragment>
79-
)}
33+
const columns: Column<string>[] = [
34+
{
35+
name: 'queryText',
36+
header: 'Query Text',
37+
render: ({row: query}) => (
38+
<div className={b('query')}>
39+
<TruncatedQuery value={query} maxQueryHeight={MAX_QUERY_HEIGHT} />
8040
</div>
81-
</Popup>
82-
);
83-
};
41+
),
42+
sortable: false,
43+
},
44+
];
8445

8546
return (
86-
<React.Fragment>
87-
<Button ref={anchor} onClick={onShowHistoryClick}>
88-
Query history
89-
</Button>
90-
{isHistoryVisible && renderSavedQueries()}
91-
</React.Fragment>
47+
<div className={b()}>
48+
<DataTable
49+
theme="yandex-cloud"
50+
columns={columns}
51+
data={reversedHistory}
52+
settings={QUERY_TABLE_SETTINGS}
53+
emptyDataMessage={i18n('history.empty')}
54+
onRowClick={(row) => onQueryClick(row)}
55+
/>
56+
</div>
9257
);
9358
}
9459

‎src/containers/Tenant/QueryEditor/Query.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@import '../../../styles/mixins.scss';
2+
3+
.ydb-query {
4+
max-height: 100%;
5+
@include flex-container();
6+
7+
&__tabs {
8+
padding: 13px 20px 16px;
9+
}
10+
11+
&__content {
12+
overflow: hidden;
13+
14+
height: 100%;
15+
}
16+
}

0 commit comments

Comments
 (0)