fix: review fixes

Author: astandrik

src/components/QueryExecutionStatus/QueryExecutionStatus.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 
+import {duration} from '@gravity-ui/date-utils';
 import {CircleCheckFill, CircleQuestionFill, CircleStop, CircleXmark} from '@gravity-ui/icons';
 import type {LabelProps, TextProps} from '@gravity-ui/uikit';
 import {Icon, Label, Spin, Text} from '@gravity-ui/uikit';
 
 import {isQueryCancelledError} from '../../containers/Tenant/Query/utils/isQueryCancelledError';
+import {setQueryDuration} from '../../store/reducers/query/query';
 import {cn} from '../../utils/cn';
+import {HOUR_IN_SECONDS, SECOND_IN_MS} from '../../utils/constants';
+import {useTypedDispatch} from '../../utils/hooks';
 import {isAxiosError} from '../../utils/response';
 
-import {useElapsedTime} from './useElapsedTime';
-
 import './QueryExecutionStatus.scss';
 
 const b = cn('kv-query-execution-status');
@@ -18,17 +20,50 @@ interface QueryExecutionStatusProps {
     className?: string;
     error?: unknown;
     loading?: boolean;
+    queryDuration?: number;
 }
 
-export const QueryExecutionStatus = ({className, error, loading}: QueryExecutionStatusProps) => {
+export const QueryExecutionStatus = ({
+    className,
+    error,
+    loading,
+    queryDuration,
+}: QueryExecutionStatusProps) => {
     let icon: React.ReactNode;
     let label: string;
     let theme: LabelProps['theme'];
     let textColor: TextProps['color'];
+    const dispatch = useTypedDispatch();
 
-    const elapsedTime = useElapsedTime(loading);
     const isCancelled = isQueryCancelledError(error);
 
+    React.useEffect(() => {
+        let timerId: ReturnType<typeof setInterval> | undefined;
+        let startTime = Date.now();
+
+        if (loading) {
+            setQueryDuration(0);
+            startTime = Date.now();
+            timerId = setInterval(() => {
+                dispatch(setQueryDuration(Date.now() - startTime));
+            }, SECOND_IN_MS);
+        } else {
+            clearInterval(timerId);
+        }
+        return () => {
+            clearInterval(timerId);
+        };
+    }, [dispatch, loading]);
+
+    const formattedQueryDuration = React.useMemo(() => {
+        if (!queryDuration) {
+            return duration(0).format('mm:ss');
+        }
+        return queryDuration > HOUR_IN_SECONDS * SECOND_IN_MS
+            ? duration(queryDuration).format('hh:mm:ss')
+            : duration(queryDuration).format('mm:ss');
+    }, [queryDuration]);
+
     if (loading) {
         theme = 'info';
         textColor = 'info-heavy';
@@ -63,7 +98,7 @@ export const QueryExecutionStatus = ({className, error, loading}: QueryExecution
             size="m"
             className={b(null, className)}
             icon={icon}
-            value={elapsedTime}
+            value={formattedQueryDuration}
         >
             <Text color={textColor}>{label}</Text>
         </Label>

src/components/QueryExecutionStatus/useElapsedTime.tsx

@@ -33,6 +33,41 @@ interface QueryEditorControlsProps {
 const STOP_APPEAR_TIMEOUT = 400;
 const STOP_AUTO_HIDE_TIMEOUT = 5000;
 
+interface ActionButtonProps {
+    type: 'run' | 'explain';
+    isHighlighted: boolean;
+    isLoading: boolean;
+    isStoppable: boolean;
+    controlsDisabled: boolean;
+    onActionClick: () => void;
+    renderStopButton: () => React.ReactNode;
+}
+
+const ActionButton = ({
+    type,
+    isHighlighted,
+    isLoading,
+    isStoppable,
+    controlsDisabled,
+    onActionClick,
+    renderStopButton,
+}: ActionButtonProps) => {
+    if (isStoppable && isLoading && isHighlighted) {
+        return renderStopButton();
+    }
+
+    const ButtonComponent = type === 'run' ? EditorButton.Run : EditorButton.Explain;
+
+    return (
+        <ButtonComponent
+            onClick={onActionClick}
+            disabled={controlsDisabled}
+            loading={isLoading}
+            view={isHighlighted ? 'action' : undefined}
+        />
+    );
+};
+
 export const QueryEditorControls = ({
     disabled,
     isLoading,
@@ -49,17 +84,16 @@ export const QueryEditorControls = ({
     const input = useTypedSelector(selectUserInput);
     const [sendCancelQuery, cancelQueryResponse] = cancelQueryApi.useCancelQueryMutation();
     const stopButtonAppearRef = React.useRef<number>(0);
-    const [isStopButtonVisibilityTimeoutPassed, setIsStopButtonVisibilityTimeoutPassed] =
-        React.useState(false);
+    const [isStoppable, setIsStoppable] = React.useState(false);
 
     React.useEffect(() => {
         if (isLoading) {
             stopButtonAppearRef.current = window.setTimeout(() => {
-                setIsStopButtonVisibilityTimeoutPassed(true);
+                setIsStoppable(true);
             }, STOP_APPEAR_TIMEOUT);
         } else {
             window.clearTimeout(stopButtonAppearRef.current);
-            setIsStopButtonVisibilityTimeoutPassed(false);
+            setIsStoppable(false);
             cancelQueryResponse.reset();
         }
 
@@ -113,28 +147,24 @@ export const QueryEditorControls = ({
     return (
         <div className={b()}>
             <div className={b('left')}>
-                {isStopButtonVisibilityTimeoutPassed && isLoading && isRunHighlighted ? (
-                    renderStopButton()
-                ) : (
-                    <EditorButton.Run
-                        onClick={onRunButtonClick}
-                        disabled={controlsDisabled}
-                        loading={isLoading}
-                        view={isRunHighlighted ? 'action' : undefined}
-                    />
-                )}
-
-                {isStopButtonVisibilityTimeoutPassed && isLoading && isExplainHighlighted ? (
-                    renderStopButton()
-                ) : (
-                    <EditorButton.Explain
-                        onClick={onExplainButtonClick}
-                        disabled={controlsDisabled}
-                        loading={isLoading}
-                        view={isExplainHighlighted ? 'action' : undefined}
-                    />
-                )}
-
+                <ActionButton
+                    type="run"
+                    isHighlighted={isRunHighlighted}
+                    isLoading={isLoading}
+                    isStoppable={isStoppable}
+                    controlsDisabled={controlsDisabled}
+                    onActionClick={onRunButtonClick}
+                    renderStopButton={renderStopButton}
+                />
+                <ActionButton
+                    type="explain"
+                    isHighlighted={isExplainHighlighted}
+                    isLoading={isLoading}
+                    isStoppable={isStoppable}
+                    controlsDisabled={controlsDisabled}
+                    onActionClick={onExplainButtonClick}
+                    renderStopButton={renderStopButton}
+                />
                 <EditorButton.Settings onClick={onSettingsButtonClick} isLoading={isLoading} />
             </div>
             <div className={b('right')}>

src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx

@@ -108,7 +108,7 @@ export function QueryResultViewer({
     });
     const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
 
-    const {error, isLoading, data = {}} = result;
+    const {error, isLoading, data = {}, queryDuration} = result;
     const {preparedPlan, simplifiedPlan, stats, resultSets, ast} = data;
 
     React.useEffect(() => {
@@ -293,16 +293,18 @@ export function QueryResultViewer({
     const renderLeftControls = () => {
         return (
             <div className={b('controls-left')}>
-                <React.Fragment>
-                    {radioButtonOptions.length && activeSection ? (
-                        <RadioButton
-                            options={radioButtonOptions}
-                            value={activeSection}
-                            onUpdate={onSelectSection}
-                        />
-                    ) : null}
-                </React.Fragment>
-                <QueryExecutionStatus error={error} loading={isLoading} />
+                {radioButtonOptions.length && activeSection ? (
+                    <RadioButton
+                        options={radioButtonOptions}
+                        value={activeSection}
+                        onUpdate={onSelectSection}
+                    />
+                ) : null}
+                <QueryExecutionStatus
+                    error={error}
+                    loading={isLoading}
+                    queryDuration={queryDuration}
+                />
                 {data?.traceId && isExecute ? <TraceButton traceId={data.traceId} /> : null}
             </div>
         );

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

@@ -17,12 +17,6 @@
         padding-left: var(--g-spacing-4);
     }
 
-    &__tab-title {
-        display: flex;
-        align-items: center;
-        gap: var(--g-spacing-2);
-    }
-
     &__result-wrapper {
         display: flex;
         flex-direction: column;

src/containers/Tenant/Query/QueryResult/components/ResultSetsViewer/ResultSetsViewer.scss

@@ -1,6 +1,6 @@
 import type {Settings} from '@gravity-ui/react-data-table';
 import type {TabsItemProps} from '@gravity-ui/uikit';
-import {Tabs, Text} from '@gravity-ui/uikit';
+import {Flex, Tabs, Text} from '@gravity-ui/uikit';
 
 import {QueryResultTable} from '../../../../../../components/QueryResultTable';
 import type {ParsedResultSet} from '../../../../../../types/store/query';
@@ -31,26 +31,24 @@ export function ResultSetsViewer(props: ResultSetsViewerProps) {
                 return {
                     id: String(index),
                     title: (
-                        <div className={b('tab-title')}>
+                        <Flex gap={2} alignItems="center">
                             <Text>
                                 {`Result #${index + 1}${resultSets?.[index]?.truncated ? '(T)' : ''}`}
                             </Text>
                             <Text color="secondary">{resultSet.result?.length || 0}</Text>
-                        </div>
+                        </Flex>
                     ),
                 };
             }) || [];
 
         return (
-            <div>
-                <Tabs
-                    className={b('tabs')}
-                    size="l"
-                    items={tabsItems}
-                    activeTab={String(selectedResultSet)}
-                    onSelectTab={(tabId) => setSelectedResultSet(Number(tabId))}
-                />
-            </div>
+            <Tabs
+                className={b('tabs')}
+                size="l"
+                items={tabsItems}
+                activeTab={String(selectedResultSet)}
+                onSelectTab={(tabId) => setSelectedResultSet(Number(tabId))}
+            />
         );
     };
 

src/containers/Tenant/Query/QueryResult/components/ResultSetsViewer/ResultSetsViewer.tsx

@@ -53,6 +53,11 @@ const slice = createSlice({
         setQueryResult: (state, action: PayloadAction<QueryResult | undefined>) => {
             state.result = action.payload;
         },
+        setQueryDuration: (state, action: PayloadAction<number>) => {
+            if (state.result) {
+                state.result.queryDuration = action.payload;
+            }
+        },
         saveQueryToHistory: (
             state,
             action: PayloadAction<{queryText: string; queryId: string}>,
@@ -149,6 +154,7 @@ export default slice.reducer;
 export const {
     changeUserInput,
     setQueryResult,
+    setQueryDuration,
     saveQueryToHistory,
     updateQueryInHistory,
     goToPreviousQuery,

src/store/reducers/query/query.ts

@@ -54,6 +54,7 @@ export interface QueryResult {
     error?: unknown;
     queryId: string;
     isLoading: boolean;
+    queryDuration?: number;
 }
 
 export interface QueryState {