fix: unnecessary background refresh on query page (#1256)

Author: astandrik

package-lock.json

@@ -38,7 +38,6 @@
     "path-to-regexp": "^3.0.0",
     "qs": "^6.12.0",
     "react-error-boundary": "^4.0.13",
-    "react-freeze": "^1.0.4",
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.52.1",
     "react-json-inspector": "^7.1.1",

package.json

@@ -1,8 +1,5 @@
-import React from 'react';
-
 import {useThemeValue} from '@gravity-ui/uikit';
 
-import NotRenderUntilFirstVisible from '../../../components/NotRenderUntilFirstVisible/NotRenderUntilFirstVisible';
 import {TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
 import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../types/additionalProps';
 import type {EPathType} from '../../../types/api/schema';
@@ -31,23 +28,22 @@ function ObjectGeneral(props: ObjectGeneralProps) {
 
     const renderPageContent = () => {
         const {type, additionalTenantProps, additionalNodesProps, tenantName, path} = props;
-
-        return (
-            <React.Fragment>
-                <NotRenderUntilFirstVisible show={tenantPage === TENANT_PAGES_IDS.query}>
-                    <Query tenantName={tenantName} path={path} theme={theme} type={type} />
-                </NotRenderUntilFirstVisible>
-                <NotRenderUntilFirstVisible show={tenantPage === TENANT_PAGES_IDS.diagnostics}>
+        switch (tenantPage) {
+            case TENANT_PAGES_IDS.query: {
+                return <Query tenantName={tenantName} path={path} theme={theme} type={type} />;
+            }
+            default: {
+                return (
                     <Diagnostics
                         type={type}
                         tenantName={tenantName}
                         path={path}
                         additionalTenantProps={additionalTenantProps}
                         additionalNodesProps={additionalNodesProps}
                     />
-                </NotRenderUntilFirstVisible>
-            </React.Fragment>
-        );
+                );
+            }
+        }
     };
 
     return (

src/components/NotRenderUntilFirstVisible/NotRenderUntilFirstVisible.scss

@@ -0,0 +1,9 @@
+@import '../../../../styles/mixins.scss';
+
+.cancel-query-button {
+    &__stop-button {
+        &_error {
+            @include query-buttons-animations();
+        }
+    }
+}

src/components/NotRenderUntilFirstVisible/NotRenderUntilFirstVisible.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {StopFill} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
+
+import {cancelQueryApi} from '../../../../store/reducers/cancelQuery';
+import {cn} from '../../../../utils/cn';
+import i18n from '../i18n';
+
+import './CancelQueryButton.scss';
+
+const b = cn('cancel-query-button');
+
+interface CancelQueryButtonProps {
+    queryId: string;
+    tenantName: string;
+}
+
+export function CancelQueryButton({queryId, tenantName}: CancelQueryButtonProps) {
+    const [sendCancelQuery, cancelQueryResponse] = cancelQueryApi.useCancelQueryMutation();
+
+    const onStopButtonClick = React.useCallback(() => {
+        sendCancelQuery({queryId, database: tenantName});
+    }, [queryId, sendCancelQuery, tenantName]);
+
+    return (
+        <Button
+            loading={cancelQueryResponse.isLoading}
+            onClick={onStopButtonClick}
+            className={b('stop-button', {error: Boolean(cancelQueryResponse.error)})}
+        >
+            <Icon data={StopFill} size={16} />
+            {i18n('action.stop')}
+        </Button>
+    );
+}

src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -78,10 +78,4 @@
     &__elapsed-label {
         margin-left: var(--g-spacing-3);
     }
-
-    &__stop-button {
-        &_error {
-            @include query-buttons-animations();
-        }
-    }
 }

src/containers/Tenant/Query/CancelQueryButton/CancelQueryButton.scss

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import {StopFill} from '@gravity-ui/icons';
 import type {ControlGroupOption} from '@gravity-ui/uikit';
-import {Button, Icon, RadioButton, Tabs} from '@gravity-ui/uikit';
+import {RadioButton, Tabs} from '@gravity-ui/uikit';
 import JSONTree from 'react-json-inspector';
 
 import {ClipboardButton} from '../../../../components/ClipboardButton';
@@ -17,13 +16,14 @@ import {QueryResultTable} from '../../../../components/QueryResultTable/QueryRes
 import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 import type {ColumnType, KeyValueRow, TKqpStatsQuery} from '../../../../types/api/query';
 import type {ValueOf} from '../../../../types/common';
-import type {IQueryResult} from '../../../../types/store/query';
+import type {ExecuteQueryResult} from '../../../../types/store/executeQuery';
 import {getArray} from '../../../../utils';
 import {cn} from '../../../../utils/cn';
 import {getStringifiedData} from '../../../../utils/dataFormatters/dataFormatters';
 import {useTypedDispatch} from '../../../../utils/hooks';
 import {parseQueryError} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
+import {CancelQueryButton} from '../CancelQueryButton/CancelQueryButton';
 import {SimplifiedPlan} from '../ExplainResult/components/SimplifiedPlan/SimplifiedPlan';
 import {ResultIssues} from '../Issues/Issues';
 import {QueryDuration} from '../QueryDuration/QueryDuration';
@@ -49,34 +49,28 @@ const resultOptionsIds = {
 type SectionID = ValueOf<typeof resultOptionsIds>;
 
 interface ExecuteResultProps {
-    data: IQueryResult | undefined;
-    error: unknown;
-    cancelError: unknown;
+    result: ExecuteQueryResult;
     isResultsCollapsed?: boolean;
+    theme?: string;
+    tenantName: string;
     onCollapseResults: VoidFunction;
     onExpandResults: VoidFunction;
-    onStopButtonClick: VoidFunction;
-    theme?: string;
-    loading?: boolean;
-    cancelQueryLoading?: boolean;
 }
 
 export function ExecuteResult({
-    data,
-    error,
-    cancelError,
+    result,
     isResultsCollapsed,
+    theme,
+    tenantName,
     onCollapseResults,
     onExpandResults,
-    onStopButtonClick,
-    theme,
-    loading,
-    cancelQueryLoading,
 }: ExecuteResultProps) {
     const [selectedResultSet, setSelectedResultSet] = React.useState(0);
     const [activeSection, setActiveSection] = React.useState<SectionID>(resultOptionsIds.result);
     const dispatch = useTypedDispatch();
 
+    const {error, isLoading, queryId, data} = result;
+
     const stats: TKqpStatsQuery | undefined = data?.stats;
     const resultsSetsCount = data?.resultSets?.length;
     const isMulti = resultsSetsCount && resultsSetsCount > 0;
@@ -111,10 +105,10 @@ export function ExecuteResult({
     };
 
     const renderResultTable = (
-        result: KeyValueRow[] | undefined,
+        resultSet: KeyValueRow[] | undefined,
         columns: ColumnType[] | undefined,
     ) => {
-        return <QueryResultTable data={result} columns={columns} settings={{sortable: false}} />;
+        return <QueryResultTable data={resultSet} columns={columns} settings={{sortable: false}} />;
     };
 
     const renderResult = () => {
@@ -243,8 +237,8 @@ export function ExecuteResult({
         <React.Fragment>
             <div className={b('controls')}>
                 <div className={b('controls-right')}>
-                    <QueryExecutionStatus error={error} loading={loading} />
-                    {!error && !loading && (
+                    <QueryExecutionStatus error={error} loading={isLoading} />
+                    {!error && !isLoading && (
                         <React.Fragment>
                             {stats?.DurationUs !== undefined && (
                                 <QueryDuration duration={Number(stats.DurationUs)} />
@@ -261,17 +255,10 @@ export function ExecuteResult({
                             )}
                         </React.Fragment>
                     )}
-                    {loading ? (
+                    {isLoading ? (
                         <React.Fragment>
                             <ElapsedTime className={b('elapsed-time')} />
-                            <Button
-                                loading={cancelQueryLoading}
-                                onClick={onStopButtonClick}
-                                className={b('stop-button', {error: Boolean(cancelError)})}
-                            >
-                                <Icon data={StopFill} size={16} />
-                                {i18n('action.stop')}
-                            </Button>
+                            <CancelQueryButton queryId={queryId} tenantName={tenantName} />
                         </React.Fragment>
                     ) : null}
                     {data?.traceId ? <TraceButton traceId={data.traceId} /> : null}
@@ -287,8 +274,8 @@ export function ExecuteResult({
                     />
                 </div>
             </div>
-            {loading || isQueryCancelledError(error) ? null : <QuerySettingsBanner />}
-            <LoaderWrapper loading={loading}>
+            {isLoading || isQueryCancelledError(error) ? null : <QuerySettingsBanner />}
+            <LoaderWrapper loading={isLoading}>
                 <Fullscreen>{renderResultSection()}</Fullscreen>
             </LoaderWrapper>
         </React.Fragment>

src/containers/Tenant/Query/CancelQueryButton/CancelQueryButton.tsx

@@ -3,7 +3,6 @@
   "action.result": "Result",
   "action.stats": "Stats",
   "action.schema": "Schema",
-  "action.stop": "Stop",
   "action.explain-plan": "Explain Plan",
   "action.copy": "Copy {{activeSection}}",
   "trace": "Trace"

src/containers/Tenant/Query/ExecuteResult/ExecuteResult.scss

@@ -43,10 +43,4 @@
     &__elapsed-label {
         margin-left: var(--g-spacing-3);
     }
-
-    &__stop-button {
-        &_error {
-            @include query-buttons-animations();
-        }
-    }
 }