Merge 633909d into 689120c

Author: astandrik

src/components/ElapsedTime/ElapsedTime.scss

@@ -2,16 +2,4 @@
     display: flex;
     align-items: center;
     gap: 4px;
-
-    color: var(--g-color-text-complementary);
-    &__result-status-icon {
-        color: var(--g-color-text-positive);
-        &_error {
-            color: var(--g-color-text-danger);
-        }
-    }
-
-    &__query-settings-icon {
-        color: var(--g-color-text-hint);
-    }
 }

src/components/ElapsedTime/ElapsedTime.tsx

@@ -1,20 +1,14 @@
 import React from 'react';
 
-import {
-    CircleCheck,
-    CircleInfo,
-    CircleQuestionFill,
-    CircleStop,
-    CircleXmark,
-} from '@gravity-ui/icons';
-import {Icon, Spin, Tooltip} from '@gravity-ui/uikit';
+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 i18n from '../../containers/Tenant/Query/i18n';
 import {isQueryCancelledError} from '../../containers/Tenant/Query/utils/isQueryCancelledError';
 import {cn} from '../../utils/cn';
-import {useChangedQuerySettings} from '../../utils/hooks/useChangedQuerySettings';
 import {isAxiosError} from '../../utils/response';
-import QuerySettingsDescription from '../QuerySettingsDescription/QuerySettingsDescription';
+
+import {useElapsedTime} from './useElapsedTime';
 
 import './QueryExecutionStatus.scss';
 
@@ -26,57 +20,52 @@ interface QueryExecutionStatusProps {
     loading?: boolean;
 }
 
-const QuerySettingsIndicator = () => {
-    const {isIndicatorShown, changedLastExecutionSettingsDescriptions} = useChangedQuerySettings();
-
-    if (!isIndicatorShown) {
-        return null;
-    }
-
-    return (
-        <Tooltip
-            openDelay={0}
-            content={
-                <QuerySettingsDescription
-                    prefix={i18n('banner.query-settings.message')}
-                    querySettings={changedLastExecutionSettingsDescriptions}
-                />
-            }
-        >
-            <Icon data={CircleInfo} className={b('query-settings-icon')} />
-        </Tooltip>
-    );
-};
-
 export const QueryExecutionStatus = ({className, error, loading}: QueryExecutionStatusProps) => {
     let icon: React.ReactNode;
     let label: string;
+    let theme: LabelProps['theme'];
+    let textColor: TextProps['color'];
+
+    const elapsedTime = useElapsedTime(loading);
+    const isCancelled = isQueryCancelledError(error);
 
     if (loading) {
+        theme = 'info';
+        textColor = 'info-heavy';
         icon = <Spin size="xs" />;
         label = 'Running';
     } else if (isAxiosError(error) && error.code === 'ECONNABORTED') {
+        theme = 'danger';
+        textColor = 'danger-heavy';
         icon = <Icon data={CircleQuestionFill} />;
         label = 'Connection aborted';
-    } else if (isQueryCancelledError(error)) {
-        icon = <Icon data={CircleStop} />;
+    } else if (isCancelled) {
+        theme = 'warning';
+        textColor = 'warning-heavy';
+        icon = <Icon data={CircleStop} className={b('result-status-icon', {error: true})} />;
         label = 'Stopped';
     } else {
         const hasError = Boolean(error);
+        theme = hasError ? 'danger' : 'success';
+        textColor = hasError ? 'danger-heavy' : 'positive-heavy';
         icon = (
             <Icon
-                data={hasError ? CircleXmark : CircleCheck}
+                data={hasError ? CircleXmark : CircleCheckFill}
                 className={b('result-status-icon', {error: hasError})}
             />
         );
         label = hasError ? 'Failed' : 'Completed';
     }
 
     return (
-        <div className={b(null, className)}>
-            {icon}
-            {label}
-            {isQueryCancelledError(error) || loading ? null : <QuerySettingsIndicator />}
-        </div>
+        <Label
+            theme={theme}
+            size="m"
+            className={b(null, className)}
+            icon={icon}
+            value={elapsedTime}
+        >
+            <Text color={textColor}>{label}</Text>
+        </Label>
     );
 };

src/components/QueryExecutionStatus/QueryExecutionStatus.scss

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {duration} from '@gravity-ui/date-utils';
+
+import {HOUR_IN_SECONDS, SECOND_IN_MS} from '../../utils/constants';
+
+export function useElapsedTime(loading?: boolean) {
+    const [startTime, setStartTime] = React.useState(Date.now());
+    const [elapsedTime, setElapsedTime] = React.useState(0);
+
+    React.useEffect(() => {
+        let timerId: ReturnType<typeof setInterval> | undefined;
+
+        if (loading) {
+            setElapsedTime(0);
+            setStartTime(Date.now());
+            timerId = setInterval(() => {
+                setElapsedTime(Date.now() - startTime);
+            }, SECOND_IN_MS);
+        } else {
+            clearInterval(timerId);
+        }
+        return () => {
+            clearInterval(timerId);
+        };
+    }, [loading, startTime]);
+
+    return elapsedTime > HOUR_IN_SECONDS * SECOND_IN_MS
+        ? duration(elapsedTime).format('hh:mm:ss')
+        : duration(elapsedTime).format('mm:ss');
+}

src/components/QueryExecutionStatus/QueryExecutionStatus.tsx

@@ -5,7 +5,6 @@ import {isEqual} from 'lodash';
 import {v4 as uuidv4} from 'uuid';
 
 import SplitPane from '../../../../components/SplitPane';
-import {cancelQueryApi} from '../../../../store/reducers/cancelQuery';
 import {
     useStreamingAvailable,
     useTracingLevelOptionAvailable,
@@ -92,12 +91,11 @@ export default function QueryEditor(props: QueryEditorProps) {
         LAST_USED_QUERY_ACTION_KEY,
     );
     const [lastExecutedQueryText, setLastExecutedQueryText] = React.useState<string>('');
-    const [isQueryStreamingEnabled] = useSetting(ENABLE_QUERY_STREAMING);
+    const [isQueryStreamingEnabled] = useSetting<boolean>(ENABLE_QUERY_STREAMING);
     const isStreamingEnabled = useStreamingAvailable() && isQueryStreamingEnabled;
 
     const [sendQuery] = queryApi.useUseSendQueryMutation();
     const [streamQuery] = queryApi.useUseStreamQueryMutation();
-    const [sendCancelQuery, cancelQueryResponse] = cancelQueryApi.useCancelQueryMutation();
 
     const runningQueryRef = React.useRef<{abort: VoidFunction} | null>(null);
 
@@ -150,7 +148,6 @@ export default function QueryEditor(props: QueryEditorProps) {
                 database: tenantName,
                 querySettings,
                 enableTracingLevel,
-                queryId,
             });
         } else {
             runningQueryRef.current = sendQuery({
@@ -202,14 +199,6 @@ export default function QueryEditor(props: QueryEditorProps) {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     });
 
-    const handleCancelRunningQuery = React.useCallback(() => {
-        if (isStreamingEnabled && runningQueryRef.current) {
-            runningQueryRef.current.abort();
-        } else if (result?.queryId) {
-            sendCancelQuery({queryId: result?.queryId, database: tenantName});
-        }
-    }, [isStreamingEnabled, result?.queryId, sendCancelQuery, tenantName]);
-
     const onCollapseResultHandler = () => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
     };
@@ -229,6 +218,10 @@ export default function QueryEditor(props: QueryEditorProps) {
                 isLoading={Boolean(result?.isLoading)}
                 handleGetExplainQueryClick={handleGetExplainQueryClick}
                 highlightedAction={lastUsedQueryAction}
+                tenantName={tenantName}
+                queryId={result?.queryId}
+                isStreamingEnabled={isStreamingEnabled}
+                runningQueryRef={runningQueryRef}
             />
         );
     };
@@ -270,12 +263,10 @@ export default function QueryEditor(props: QueryEditorProps) {
                         theme={theme}
                         key={result?.queryId}
                         result={result}
-                        cancelQueryResponse={cancelQueryResponse}
                         tenantName={tenantName}
                         path={path}
                         showPreview={showPreview}
                         queryText={lastExecutedQueryText}
-                        onCancelRunningQuery={handleCancelRunningQuery}
                         tableSettings={tableSettings}
                     />
                 </div>
@@ -292,17 +283,14 @@ interface ResultProps {
     type?: EPathType;
     theme: string;
     result?: QueryResult;
-    cancelQueryResponse?: Pick<QueryResult, 'isLoading' | 'error'>;
     tenantName: string;
     path: string;
     showPreview?: boolean;
     queryText: string;
     tableSettings?: Partial<Settings>;
-    onCancelRunningQuery: VoidFunction;
 }
 function Result({
     resultVisibilityState,
-    cancelQueryResponse,
     onExpandResultHandler,
     onCollapseResultHandler,
     type,
@@ -313,7 +301,6 @@ function Result({
     showPreview,
     queryText,
     tableSettings,
-    onCancelRunningQuery,
 }: ResultProps) {
     if (showPreview) {
         return <Preview database={tenantName} path={path} type={type} />;
@@ -327,13 +314,10 @@ function Result({
                 theme={theme}
                 tenantName={tenantName}
                 isResultsCollapsed={resultVisibilityState.collapsed}
-                isCancelError={Boolean(cancelQueryResponse?.error)}
-                isCancelling={Boolean(cancelQueryResponse?.isLoading)}
                 tableSettings={tableSettings}
                 onExpandResults={onExpandResultHandler}
                 onCollapseResults={onCollapseResultHandler}
                 queryText={queryText}
-                onCancelRunningQuery={onCancelRunningQuery}
             />
         );
     }