Skip to content

Commit 5de1a3a

Browse files
astandrikastandrik
committed
feat: buttons
1 parent 5679ec3 commit 5de1a3a

File tree

8 files changed

+70
-105
lines changed

8 files changed

+70
-105
lines changed

‎src/components/ElapsedTime/ElapsedTime.scss‎

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

‎src/components/ElapsedTime/ElapsedTime.tsx‎

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

‎src/components/QueryExecutionStatus/QueryExecutionStatus.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,4 @@
22
display: flex;
33
align-items: center;
44
gap: 4px;
5-
6-
color: var(--g-color-text-complementary);
7-
&__result-status-icon {
8-
color: var(--g-color-text-positive);
9-
&_error {
10-
color: var(--g-color-text-danger);
11-
}
12-
}
13-
14-
&__query-settings-icon {
15-
color: var(--g-color-text-hint);
16-
}
175
}

‎src/components/QueryExecutionStatus/QueryExecutionStatus.tsx‎

Lines changed: 30 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import React from 'react';
22

33
import {
4-
CircleCheck,
5-
CircleInfo,
4+
CircleCheckFill,
5+
CircleDashed,
66
CircleQuestionFill,
77
CircleStop,
88
CircleXmark,
99
} from '@gravity-ui/icons';
10-
import {Icon, Spin, Tooltip} from '@gravity-ui/uikit';
10+
import type {LabelProps, TextProps} from '@gravity-ui/uikit';
11+
import {Icon, Label, Text} from '@gravity-ui/uikit';
1112

12-
import i18n from '../../containers/Tenant/Query/i18n';
1313
import {isQueryCancelledError} from '../../containers/Tenant/Query/utils/isQueryCancelledError';
1414
import {cn} from '../../utils/cn';
15-
import {useChangedQuerySettings} from '../../utils/hooks/useChangedQuerySettings';
1615
import {isAxiosError} from '../../utils/response';
17-
import QuerySettingsDescription from '../QuerySettingsDescription/QuerySettingsDescription';
16+
17+
import {useElapsedTime} from './useElapsedTime';
1818

1919
import './QueryExecutionStatus.scss';
2020

@@ -26,57 +26,51 @@ interface QueryExecutionStatusProps {
2626
loading?: boolean;
2727
}
2828

29-
const QuerySettingsIndicator = () => {
30-
const {isIndicatorShown, changedLastExecutionSettingsDescriptions} = useChangedQuerySettings();
31-
32-
if (!isIndicatorShown) {
33-
return null;
34-
}
35-
36-
return (
37-
<Tooltip
38-
openDelay={0}
39-
content={
40-
<QuerySettingsDescription
41-
prefix={i18n('banner.query-settings.message')}
42-
querySettings={changedLastExecutionSettingsDescriptions}
43-
/>
44-
}
45-
>
46-
<Icon data={CircleInfo} className={b('query-settings-icon')} />
47-
</Tooltip>
48-
);
49-
};
50-
5129
export const QueryExecutionStatus = ({className, error, loading}: QueryExecutionStatusProps) => {
5230
let icon: React.ReactNode;
5331
let label: string;
32+
let theme: LabelProps['theme'];
33+
let textColor: TextProps['color'];
34+
35+
const elapsedTime = useElapsedTime(loading);
5436

5537
if (loading) {
56-
icon = <Spin size="xs" />;
38+
theme = 'info';
39+
textColor = 'info-heavy';
40+
icon = <Icon data={CircleDashed} />;
5741
label = 'Running';
5842
} else if (isAxiosError(error) && error.code === 'ECONNABORTED') {
43+
theme = 'danger';
44+
textColor = 'danger-heavy';
5945
icon = <Icon data={CircleQuestionFill} />;
6046
label = 'Connection aborted';
6147
} else if (isQueryCancelledError(error)) {
62-
icon = <Icon data={CircleStop} />;
48+
theme = 'danger';
49+
textColor = 'danger-heavy';
50+
icon = <Icon data={CircleStop} className={b('result-status-icon', {error: true})} />;
6351
label = 'Stopped';
6452
} else {
6553
const hasError = Boolean(error);
54+
theme = hasError ? 'danger' : 'success';
55+
textColor = hasError ? 'danger-heavy' : 'positive-heavy';
6656
icon = (
6757
<Icon
68-
data={hasError ? CircleXmark : CircleCheck}
58+
data={hasError ? CircleXmark : CircleCheckFill}
6959
className={b('result-status-icon', {error: hasError})}
7060
/>
7161
);
7262
label = hasError ? 'Failed' : 'Completed';
7363
}
7464

7565
return (
76-
<div className={b(null, className)}>
77-
{icon}
78-
{label}
79-
{isQueryCancelledError(error) || loading ? null : <QuerySettingsIndicator />}
80-
</div>
66+
<Label
67+
theme={theme}
68+
size="m"
69+
className={b(null, className)}
70+
icon={icon}
71+
value={elapsedTime}
72+
>
73+
<Text color={textColor}>{label}</Text>
74+
</Label>
8175
);
8276
};

‎src/components/QueryExecutionStatus/useElapsedTime.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
3+
import {duration} from '@gravity-ui/date-utils';
4+
5+
import {HOUR_IN_SECONDS, SECOND_IN_MS} from '../../utils/constants';
6+
7+
export function useElapsedTime(loading?: boolean) {
8+
const [startTime, setStartTime] = React.useState(Date.now());
9+
const [elapsedTime, setElapsedTime] = React.useState(0);
10+
11+
React.useEffect(() => {
12+
let timerId: ReturnType<typeof setInterval> | undefined;
13+
14+
if (loading) {
15+
setElapsedTime(0);
16+
setStartTime(Date.now());
17+
timerId = setInterval(() => {
18+
setElapsedTime(Date.now() - startTime);
19+
}, SECOND_IN_MS);
20+
} else {
21+
clearInterval(timerId);
22+
}
23+
return () => {
24+
clearInterval(timerId);
25+
};
26+
}, [loading, startTime]);
27+
28+
return elapsedTime > HOUR_IN_SECONDS * SECOND_IN_MS
29+
? duration(elapsedTime).format('hh:mm:ss')
30+
: duration(elapsedTime).format('mm:ss');
31+
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,6 @@ export default function QueryEditor(props: QueryEditorProps) {
262262
onCollapseResultHandler={onCollapseResultHandler}
263263
type={type}
264264
theme={theme}
265-
key={result?.queryId}
266265
result={result}
267266
tenantName={tenantName}
268267
path={path}

‎src/containers/Tenant/Query/QueryResult/QueryResultViewer.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
align-items: center;
1010

1111
height: 53px;
12-
padding: 12px 20px;
12+
padding: var(--g-spacing-3) var(--g-spacing-4);
1313

1414
border-bottom: 1px solid var(--g-color-line-generic);
1515
background-color: var(--g-color-base-background);

‎src/containers/Tenant/Query/QueryResult/QueryResultViewer.tsx‎

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

33
import type {Settings} from '@gravity-ui/react-data-table';
44
import type {ControlGroupOption} from '@gravity-ui/uikit';
5-
import {ClipboardButton, RadioButton} from '@gravity-ui/uikit';
5+
import {ClipboardButton, Loader, RadioButton} from '@gravity-ui/uikit';
66

7-
import Divider from '../../../../components/Divider/Divider';
8-
import ElapsedTime from '../../../../components/ElapsedTime/ElapsedTime';
97
import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
108
import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
119
import {LoaderWrapper} from '../../../../components/LoaderWrapper/LoaderWrapper';
@@ -273,29 +271,22 @@ export function QueryResultViewer({
273271
const renderLeftControls = () => {
274272
return (
275273
<div className={b('controls-left')}>
276-
<QueryExecutionStatus error={error} loading={isLoading} />
277274
{!error && !isLoading && (
278275
<React.Fragment>
279276
{valueIsDefined(stats?.DurationUs) ? (
280277
<QueryDuration duration={Number(stats.DurationUs)} />
281278
) : null}
282279
{radioButtonOptions.length && activeSection ? (
283-
<React.Fragment>
284-
<Divider />
285-
<RadioButton
286-
options={radioButtonOptions}
287-
value={activeSection}
288-
onUpdate={onSelectSection}
289-
/>
290-
</React.Fragment>
280+
<RadioButton
281+
options={radioButtonOptions}
282+
value={activeSection}
283+
onUpdate={onSelectSection}
284+
/>
291285
) : null}
292286
</React.Fragment>
293287
)}
294-
{isLoading ? (
295-
<React.Fragment>
296-
<ElapsedTime className={b('elapsed-time')} />
297-
</React.Fragment>
298-
) : null}
288+
<QueryExecutionStatus error={error} loading={isLoading} />
289+
{isLoading ? <Loader size="s" /> : null}
299290
{data?.traceId && isExecute ? <TraceButton traceId={data.traceId} /> : null}
300291
</div>
301292
);

0 commit comments

Comments
 (0)