fix: error handling

Author: astandrik

src/components/QueryExecutionStatus/QueryExecutionStatus.tsx

@@ -6,10 +6,10 @@ 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 {selectQueryDuration, 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 {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {isAxiosError} from '../../utils/response';
 
 import './QueryExecutionStatus.scss';
@@ -20,20 +20,15 @@ interface QueryExecutionStatusProps {
     className?: string;
     error?: unknown;
     loading?: boolean;
-    queryDuration?: number;
 }
 
-export const QueryExecutionStatus = ({
-    className,
-    error,
-    loading,
-    queryDuration,
-}: QueryExecutionStatusProps) => {
+export const QueryExecutionStatus = ({className, error, loading}: QueryExecutionStatusProps) => {
     let icon: React.ReactNode;
     let label: string;
     let theme: LabelProps['theme'];
     let textColor: TextProps['color'];
     const dispatch = useTypedDispatch();
+    const queryDuration = useTypedSelector(selectQueryDuration);
 
     const isCancelled = isQueryCancelledError(error);
 
@@ -42,7 +37,7 @@ export const QueryExecutionStatus = ({
         let startTime = Date.now();
 
         if (loading) {
-            setQueryDuration(0);
+            dispatch(setQueryDuration(0));
             startTime = Date.now();
             timerId = setInterval(() => {
                 dispatch(setQueryDuration(Date.now() - startTime));

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

@@ -108,7 +108,7 @@ export function QueryResultViewer({
     });
     const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
 
-    const {error, isLoading, data = {}, queryDuration} = result;
+    const {error, isLoading, data = {}} = result;
     const {preparedPlan, simplifiedPlan, stats, resultSets, ast} = data;
 
     React.useEffect(() => {
@@ -217,8 +217,7 @@ export function QueryResultViewer({
         );
     };
 
-    const renderErrorView = () => {
-        const isStopped = isQueryCancelledError(error);
+    const renderCommonErrorView = (isStopped: boolean) => {
         return (
             <Flex justifyContent="center" alignItems="center" width="100%">
                 <EmptyState
@@ -236,9 +235,11 @@ export function QueryResultViewer({
     };
 
     const renderResultSection = () => {
+        const isStopped = isQueryCancelledError(error);
+
         if (activeSection === RESULT_OPTIONS_IDS.result) {
-            if (error && !resultSets?.length) {
-                return renderErrorView();
+            if (error && isStopped) {
+                return renderCommonErrorView(isStopped);
             }
 
             return (
@@ -253,7 +254,7 @@ export function QueryResultViewer({
         }
 
         if (error) {
-            return renderErrorView();
+            return renderCommonErrorView(isStopped);
         }
 
         if (activeSection === RESULT_OPTIONS_IDS.schema) {
@@ -300,11 +301,7 @@ export function QueryResultViewer({
                         onUpdate={onSelectSection}
                     />
                 ) : null}
-                <QueryExecutionStatus
-                    error={error}
-                    loading={isLoading}
-                    queryDuration={queryDuration}
-                />
+                <QueryExecutionStatus error={error} loading={isLoading} />
                 {data?.traceId && isExecute ? <TraceButton traceId={data.traceId} /> : null}
             </div>
         );

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

@@ -62,10 +62,22 @@ export function ResultSetsViewer(props: ResultSetsViewerProps) {
         );
     };
 
+    const renderResults = () => {
+        if (resultSets?.length) {
+            if (resultSets?.length > 1) {
+                return renderTabs();
+            } else {
+                return renderSingleResult();
+            }
+        }
+
+        return null;
+    };
+
     return (
         <div className={b('result-wrapper')}>
             {props.error ? <QueryResultError error={error} /> : null}
-            {resultSets?.length && resultSets?.length > 1 ? renderTabs() : renderSingleResult()}
+            {renderResults()}
             {currentResult ? (
                 <div className={b('result')}>
                     <QueryResultTable

src/store/reducers/query/query.ts

@@ -54,9 +54,7 @@ const slice = createSlice({
             state.result = action.payload;
         },
         setQueryDuration: (state, action: PayloadAction<number>) => {
-            if (state.result) {
-                state.result.queryDuration = action.payload;
-            }
+            state.queryDuration = action.payload;
         },
         saveQueryToHistory: (
             state,
@@ -136,6 +134,7 @@ const slice = createSlice({
     selectors: {
         selectQueriesHistoryFilter: (state) => state.history.filter || '',
         selectTenantPath: (state) => state.tenantPath,
+        selectQueryDuration: (state) => state.queryDuration,
         selectResult: (state) => state.result,
         selectQueriesHistory: (state) => {
             const items = state.history.queries;
@@ -173,6 +172,7 @@ export const {
     selectTenantPath,
     selectResult,
     selectUserInput,
+    selectQueryDuration,
 } = slice.selectors;
 
 interface SendQueryParams extends QueryRequestParams {

src/store/reducers/query/types.ts

@@ -54,12 +54,12 @@ export interface QueryResult {
     error?: unknown;
     queryId: string;
     isLoading: boolean;
-    queryDuration?: number;
 }
 
 export interface QueryState {
     input: string;
     result?: QueryResult;
+    queryDuration?: number;
     history: {
         queries: QueryInHistory[];
         currentIndex: number;