fix: tracing issues (#1555)

Author: astandrik

src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx

@@ -270,7 +270,9 @@ export function ExecuteResult({
                             <CancelQueryButton queryId={queryId} tenantName={tenantName} />
                         </React.Fragment>
                     ) : null}
-                    {data?.traceId ? <TraceButton traceId={data.traceId} /> : null}
+                    {data?.traceId ? (
+                        <TraceButton traceId={data.traceId} isTraceReady={result.isTraceReady} />
+                    ) : null}
                 </div>
                 <div className={b('controls-left')}>
                     {renderClipboardButton()}

src/containers/Tenant/Query/ExecuteResult/TraceButton.tsx

@@ -5,45 +5,40 @@ import {Button} from '@gravity-ui/uikit';
 
 import {useClusterBaseInfo} from '../../../../store/reducers/cluster/cluster';
 import {traceApi} from '../../../../store/reducers/trace';
-import {SECOND_IN_MS} from '../../../../utils/constants';
-import {useDelayed} from '../../../../utils/hooks/useDelayed';
 import {replaceParams} from '../utils/replaceParams';
 
 import i18n from './i18n';
 
-const TIME_BEFORE_CHECK = 15 * SECOND_IN_MS;
-
 interface TraceUrlButtonProps {
     traceId: string;
+    isTraceReady?: true;
 }
 
-export function TraceButton({traceId}: TraceUrlButtonProps) {
+export function TraceButton({traceId, isTraceReady}: TraceUrlButtonProps) {
     const {traceCheck, traceView} = useClusterBaseInfo();
 
     const checkTraceUrl = traceCheck?.url ? replaceParams(traceCheck.url, {traceId}) : '';
     const traceUrl = traceView?.url ? replaceParams(traceView.url, {traceId}) : '';
 
-    // We won't get any trace data at first 15 seconds for sure
-    const [readyToFetch, resetDelay] = useDelayed(TIME_BEFORE_CHECK);
+    const [checkTrace, {isLoading, isUninitialized}] = traceApi.useCheckTraceMutation();
 
     React.useEffect(() => {
-        resetDelay();
-    }, [traceId, resetDelay]);
+        let checkTraceMutation: {abort: () => void} | null;
+        if (checkTraceUrl && !isTraceReady) {
+            checkTraceMutation = checkTrace({url: checkTraceUrl});
+        }
 
-    const {isFetching} = traceApi.useCheckTraceQuery(
-        {url: checkTraceUrl},
-        {skip: !checkTraceUrl || !readyToFetch},
-    );
+        return () => checkTraceMutation?.abort();
+    }, [checkTrace, checkTraceUrl, isTraceReady]);
 
-    if (!traceUrl) {
+    if (!traceUrl || (isUninitialized && !isTraceReady)) {
         return null;
     }
 
-    const loading = !readyToFetch || isFetching;
     return (
         <Button
-            view={loading ? 'flat-secondary' : 'flat-info'}
-            loading={loading}
+            view={isLoading ? 'flat-secondary' : 'flat-info'}
+            loading={isLoading}
             href={traceUrl}
             target="_blank"
         >

src/services/api.ts

@@ -66,8 +66,9 @@ import {parseMetaCluster} from './parsers/parseMetaCluster';
 import {parseMetaTenants} from './parsers/parseMetaTenants';
 import {settingsManager} from './settings';
 
-const TRACE_CHECK_TIMEOUT = 2 * SECOND_IN_MS;
-const TRACE_API_ERROR_TIMEOUT = 10 * SECOND_IN_MS;
+const TRACE_RETRY_DELAY = 4 * SECOND_IN_MS;
+const TRACE_CHECK_TIMEOUT = 10 * SECOND_IN_MS;
+const TRACE_API_ERROR_RETRY_DELAY = 10 * SECOND_IN_MS;
 const MAX_TRACE_CHECK_RETRIES = 30;
 
 export type AxiosOptions = {
@@ -604,10 +605,10 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                                 (error?.response?.status === 404 || error.code === 'ERR_NETWORK');
 
                             if (isTracingError) {
-                                return TRACE_CHECK_TIMEOUT;
+                                return TRACE_RETRY_DELAY;
                             }
 
-                            return TRACE_API_ERROR_TIMEOUT;
+                            return TRACE_API_ERROR_RETRY_DELAY;
                         },
                         shouldResetTimeout: true,
                         retryCondition: () => true,

src/store/reducers/executeQuery.ts

@@ -22,6 +22,7 @@ const MAXIMUM_QUERIES_IN_HISTORY = 20;
 
 const CHANGE_USER_INPUT = 'query/CHANGE_USER_INPUT';
 const SET_QUERY_RESULT = 'query/SET_QUERY_RESULT';
+const SET_QUERY_TRACE_READY = 'query/SET_QUERY_TRACE_READY';
 const SAVE_QUERY_TO_HISTORY = 'query/SAVE_QUERY_TO_HISTORY';
 const UPDATE_QUERY_IN_HISTORY = 'query/UPDATE_QUERY_IN_HISTORY';
 const SET_QUERY_HISTORY_FILTER = 'query/SET_QUERY_HISTORY_FILTER';
@@ -63,6 +64,20 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
             };
         }
 
+        case SET_QUERY_TRACE_READY: {
+            if (state.result) {
+                return {
+                    ...state,
+                    result: {
+                        ...state.result,
+                        isTraceReady: true,
+                    },
+                };
+            }
+
+            return state;
+        }
+
         case SET_QUERY_RESULT: {
             return {
                 ...state,
@@ -313,6 +328,12 @@ export function setQueryResult(data?: QueryResult) {
     } as const;
 }
 
+export function setQueryTraceReady() {
+    return {
+        type: SET_QUERY_TRACE_READY,
+    } as const;
+}
+
 export const goToPreviousQuery = () => {
     return {
         type: GO_TO_PREVIOUS_QUERY,

src/store/reducers/trace.ts

@@ -1,15 +1,18 @@
 import {api} from './api';
+import {setQueryTraceReady} from './executeQuery';
 
 interface CheckTraceParams {
     url: string;
 }
 
 export const traceApi = api.injectEndpoints({
     endpoints: (build) => ({
-        checkTrace: build.query({
-            queryFn: async ({url}: CheckTraceParams, {signal}) => {
+        checkTrace: build.mutation({
+            queryFn: async ({url}: CheckTraceParams, {signal, dispatch}) => {
                 try {
                     const response = await window.api.checkTrace({url}, {signal});
+
+                    dispatch(setQueryTraceReady());
                     return {data: response};
                 } catch (error) {
                     return {error: error};

src/types/store/executeQuery.ts

@@ -5,6 +5,7 @@ import type {
     saveQueryToHistory,
     setQueryHistoryFilter,
     setQueryResult,
+    setQueryTraceReady,
     setTenantPath,
     updateQueryInHistory,
 } from '../../store/reducers/executeQuery';
@@ -34,6 +35,7 @@ export type ExecuteQueryResult = {
     type: ResultType.EXECUTE;
     data?: IQueryResult;
     error?: unknown;
+    isTraceReady?: true;
 } & CommonResultParams;
 
 export type ExplainQueryResult = {
@@ -64,7 +66,8 @@ export type ExecuteQueryAction =
     | ReturnType<typeof saveQueryToHistory>
     | ReturnType<typeof updateQueryInHistory>
     | ReturnType<typeof setTenantPath>
-    | ReturnType<typeof setQueryHistoryFilter>;
+    | ReturnType<typeof setQueryHistoryFilter>
+    | ReturnType<typeof setQueryTraceReady>;
 
 export interface ExecuteQueryStateSlice {
     executeQuery: ExecuteQueryState;