Skip to content

Commit 89ed060

Browse files
astandrikastandrik
committed
feat: refrigerator
1 parent b7c2be6 commit 89ed060

File tree

9 files changed

+363
-282
lines changed

9 files changed

+363
-282
lines changed

Diff for: ‎src/containers/Tenant/Diagnostics/Diagnostics.scss

+4-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
height: 100%;
99

1010
&__header-wrapper {
11-
padding: 0 20px 16px;
11+
padding: 0 20px;
1212

1313
background-color: var(--g-color-base-background);
1414
}
@@ -37,15 +37,16 @@
3737
&__drawer-container {
3838
position: relative;
3939

40-
height: 100%;
40+
overflow: hidden;
4141
}
4242

4343
&__page-wrapper {
4444
overflow: auto;
4545
flex-grow: 1;
4646

4747
width: 100%;
48-
padding: 0 20px;
48+
height: 100%;
49+
margin: var(--g-spacing-4) var(--g-spacing-5) 0 var(--g-spacing-5);
4950

5051
.ydb-table-with-controls-layout {
5152
&__controls {

Diff for: ‎src/containers/Tenant/Diagnostics/TopQueries/QueryDetails.scss

+9-28
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,16 @@
55
flex-direction: column;
66

77
height: 100%;
8-
padding: var(--g-spacing-5) var(--g-spacing-6);
98

10-
color: var(--g-color-text-primary-invert);
9+
color: var(--g-color-text-primary);
1110
background-color: var(--g-color-base-background-dark);
1211

1312
&__header {
1413
display: flex;
1514
justify-content: space-between;
1615
align-items: center;
16+
17+
padding: var(--g-spacing-5) var(--g-spacing-6) 0 var(--g-spacing-6);
1718
}
1819

1920
&__title {
@@ -32,19 +33,17 @@
3233
overflow: auto;
3334
flex: 1;
3435

35-
padding-top: var(--g-spacing-5);
36-
}
37-
38-
&__query-section {
39-
margin-top: 20px;
36+
padding: var(--g-spacing-5) var(--g-spacing-4) var(--g-spacing-5) var(--g-spacing-6);
4037
}
4138

4239
&__query-header {
4340
display: flex;
4441
justify-content: space-between;
4542
align-items: center;
4643

47-
margin-bottom: 12px;
44+
padding: var(--g-spacing-2) var(--g-spacing-3);
45+
46+
border-bottom: 1px solid var(--g-color-line-generic);
4847
}
4948

5049
&__query-title {
@@ -57,6 +56,8 @@
5756

5857
overflow: hidden;
5958

59+
margin-top: 20px;
60+
6061
border-radius: 4px;
6162
background-color: var(--code-background-color);
6263

@@ -67,24 +68,4 @@
6768
background-color: transparent !important;
6869
}
6970
}
70-
71-
&__close-button {
72-
color: var(--g-color-text-secondary-invert);
73-
74-
&:hover {
75-
color: var(--g-color-text-primary-invert);
76-
}
77-
}
78-
79-
&__editor-button {
80-
display: flex;
81-
align-items: center;
82-
gap: 6px;
83-
84-
color: var(--g-color-text-secondary-invert);
85-
86-
&:hover {
87-
color: var(--g-color-text-primary-invert);
88-
}
89-
}
9071
}

Diff for: ‎src/containers/Tenant/Diagnostics/TopQueries/QueryDetails.tsx

+40-60
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
1-
import React from 'react';
2-
1+
import {Code, Link, Xmark} from '@gravity-ui/icons';
32
import {Button, Icon} from '@gravity-ui/uikit';
43

4+
import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
5+
import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
56
import type {InfoViewerItem} from '../../../../components/InfoViewer';
67
import {InfoViewer} from '../../../../components/InfoViewer';
78
import {YDBSyntaxHighlighter} from '../../../../components/SyntaxHighlighter/YDBSyntaxHighlighter';
8-
import type {KeyValueRow} from '../../../../types/api/query';
99
import {cn} from '../../../../utils/cn';
10-
import {formatDateTime, formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
11-
import {generateHash} from '../../../../utils/generateHash';
12-
import {formatToMs, parseUsToMs} from '../../../../utils/timeParsers';
1310

1411
import i18n from './i18n';
1512

@@ -18,77 +15,60 @@ import './QueryDetails.scss';
1815
const b = cn('kv-query-details');
1916

2017
interface QueryDetailsProps {
21-
row: KeyValueRow;
18+
queryText: string;
19+
infoItems: InfoViewerItem[];
2220
onClose: () => void;
2321
onOpenInEditor: () => void;
2422
}
2523

26-
export const QueryDetails = ({row, onClose, onOpenInEditor}: QueryDetailsProps) => {
27-
const query = row.QueryText as string;
28-
// Create info items for the InfoViewer with formatting matching the columns
29-
const infoItems: InfoViewerItem[] = React.useMemo(() => {
30-
return [
31-
{label: i18n('query-details.query-hash'), value: generateHash(String(row.QueryText))},
32-
{
33-
label: i18n('query-details.cpu-time'),
34-
value: formatToMs(parseUsToMs(row.CPUTimeUs ?? undefined)),
35-
},
36-
{
37-
label: i18n('query-details.duration'),
38-
value: formatToMs(parseUsToMs(row.Duration ?? undefined)),
39-
},
40-
{label: i18n('query-details.read-bytes'), value: formatNumber(row.ReadBytes)},
41-
{label: i18n('query-details.request-units'), value: formatNumber(row.RequestUnits)},
42-
{
43-
label: i18n('query-details.end-time'),
44-
value: row.EndTime
45-
? formatDateTime(new Date(row.EndTime as string).getTime())
46-
: '–',
47-
},
48-
{label: i18n('query-details.read-rows'), value: formatNumber(row.ReadRows)},
49-
{label: i18n('query-details.user-sid'), value: row.UserSID || '–'},
50-
{label: i18n('query-details.application-name'), value: row.ApplicationName || '–'},
51-
{
52-
label: i18n('query-details.query-start-at'),
53-
value: row.QueryStartAt
54-
? formatDateTime(new Date(row.QueryStartAt as string).getTime())
55-
: '–',
56-
},
57-
];
58-
}, [row]);
59-
24+
export const QueryDetails = ({
25+
queryText,
26+
infoItems,
27+
onClose,
28+
onOpenInEditor,
29+
}: QueryDetailsProps) => {
6030
return (
6131
<div className={b()}>
6232
<div className={b('header')}>
6333
<div className={b('title')}>Query</div>
6434
<div className={b('actions')}>
65-
<Button view="flat" size="l" onClick={onClose} className={b('close-button')}>
66-
<Icon data="close" size={16} />
35+
<Button view="flat-secondary" onClick={onClose}>
36+
<Icon data={Link} size={16} />
37+
</Button>
38+
<EnableFullscreenButton />
39+
<Button view="flat-secondary" onClick={onClose}>
40+
<Icon data={Xmark} size={16} />
6741
</Button>
6842
</div>
6943
</div>
7044

71-
<div className={b('content')}>
72-
<InfoViewer info={infoItems} />
45+
<Fullscreen>
46+
<div className={b('content')}>
47+
<InfoViewer info={infoItems} />
7348

74-
<div className={b('query-section')}>
75-
<div className={b('query-header')}>
76-
<div className={b('query-title')}>{i18n('query-details.query.title')}</div>
77-
<Button
78-
view="flat"
79-
size="m"
80-
onClick={onOpenInEditor}
81-
className={b('editor-button')}
82-
>
83-
<Icon data="code" size={16} />
84-
{i18n('query-details.open-in-editor')}
85-
</Button>
86-
</div>
8749
<div className={b('query-content')}>
88-
<YDBSyntaxHighlighter language="yql" text={query} withClipboardButton />
50+
<div className={b('query-header')}>
51+
<div className={b('query-title')}>
52+
{i18n('query-details.query.title')}
53+
</div>
54+
<Button
55+
view="flat-secondary"
56+
size="m"
57+
onClick={onOpenInEditor}
58+
className={b('editor-button')}
59+
>
60+
<Icon data={Code} size={16} />
61+
{i18n('query-details.open-in-editor')}
62+
</Button>
63+
</div>
64+
<YDBSyntaxHighlighter
65+
language="yql"
66+
text={queryText}
67+
withClipboardButton={{alwaysVisible: true, withLabel: false}}
68+
/>
8969
</div>
9070
</div>
91-
</div>
71+
</Fullscreen>
9272
</div>
9373
);
9474
};

Diff for: ‎src/containers/Tenant/Diagnostics/TopQueries/QueryDetailsDrawer.tsx

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React from 'react';
2+
3+
import {Drawer, DrawerItem} from '@gravity-ui/navigation';
4+
import {useHistory, useLocation} from 'react-router-dom';
5+
6+
import {parseQuery} from '../../../../routes';
7+
import {changeUserInput, setIsDirty} from '../../../../store/reducers/query/query';
8+
import {
9+
TENANT_PAGE,
10+
TENANT_PAGES_IDS,
11+
TENANT_QUERY_TABS_ID,
12+
} from '../../../../store/reducers/tenant/constants';
13+
import type {KeyValueRow} from '../../../../types/api/query';
14+
import {cn} from '../../../../utils/cn';
15+
import {useTypedDispatch} from '../../../../utils/hooks';
16+
import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
17+
18+
import {QueryDetails} from './QueryDetails';
19+
import {createQueryInfoItems} from './utils';
20+
21+
const DEFAULT_DRAWER_WIDTH = 600;
22+
const DRAWER_WIDTH_KEY = 'kv-top-queries-drawer-width';
23+
const b = cn('kv-top-queries');
24+
25+
interface QueryDetailsDrawerProps {
26+
row: KeyValueRow | null;
27+
onClose: () => void;
28+
}
29+
30+
export const QueryDetailsDrawer = ({row, onClose}: QueryDetailsDrawerProps) => {
31+
const [isVisible, setIsVisible] = React.useState(false);
32+
const [drawerWidth, setDrawerWidth] = React.useState(() => {
33+
const savedWidth = localStorage.getItem(DRAWER_WIDTH_KEY);
34+
return savedWidth ? Number(savedWidth) : DEFAULT_DRAWER_WIDTH;
35+
});
36+
37+
// Effect to open drawer when row changes
38+
React.useEffect(() => {
39+
if (row) {
40+
setIsVisible(true);
41+
}
42+
}, [row]);
43+
44+
const handleClose = () => {
45+
setIsVisible(false);
46+
onClose();
47+
};
48+
49+
const dispatch = useTypedDispatch();
50+
const location = useLocation();
51+
const history = useHistory();
52+
53+
const handleOpenInEditor = React.useCallback(() => {
54+
if (row) {
55+
const input = row.QueryText as string;
56+
dispatch(changeUserInput({input}));
57+
dispatch(setIsDirty(false));
58+
59+
const queryParams = parseQuery(location);
60+
61+
const queryPath = getTenantPath({
62+
...queryParams,
63+
[TENANT_PAGE]: TENANT_PAGES_IDS.query,
64+
[TenantTabsGroups.queryTab]: TENANT_QUERY_TABS_ID.newQuery,
65+
});
66+
67+
history.push(queryPath);
68+
}
69+
}, [dispatch, history, location, row]);
70+
71+
const handleResizeDrawer = (width: number) => {
72+
setDrawerWidth(width);
73+
localStorage.setItem(DRAWER_WIDTH_KEY, width.toString());
74+
};
75+
76+
return (
77+
<Drawer
78+
onEscape={handleClose}
79+
onVeilClick={handleClose}
80+
hideVeil
81+
className={b('drawer-container')}
82+
>
83+
<DrawerItem
84+
id="query-details"
85+
visible={isVisible}
86+
resizable
87+
width={drawerWidth}
88+
onResize={handleResizeDrawer}
89+
direction="right"
90+
className={b('drawer-item')}
91+
>
92+
{row && (
93+
<QueryDetails
94+
queryText={row.QueryText as string}
95+
infoItems={createQueryInfoItems(row)}
96+
onClose={handleClose}
97+
onOpenInEditor={handleOpenInEditor}
98+
/>
99+
)}
100+
</DrawerItem>
101+
</Drawer>
102+
);
103+
};

0 commit comments

Comments
 (0)