feat: added ability to render custom query tab at query-tracker page

ytsaurus · May 7, 2024 · 193d24b · 193d24b
1 parent 675adb6
commit 193d24b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 0 deletions.
diff --git a/packages/ui/src/ui/UIFactory.tsx b/packages/ui/src/ui/UIFactory.tsx
@@ -29,6 +29,7 @@ import {PreparedAclSubject} from './utils/acl/acl-types';
 import {PreparedRole} from './utils/acl';
 import {UISettingsMonitoring} from '../shared/ui-settings';
 import {DefaultSubjectCard, type SubjectCardProps} from './components/SubjectLink/SubjectLink';
+import type {QueryItem} from './pages/query-tracker/module/api';
 
 type HeaderItemOrPage =
     | {
@@ -355,6 +356,13 @@ export interface UIFactory {
 
     renderRolesLink(params: {cluster: string; login: string; className?: string}): React.ReactNode;
 
+    getCustomQueryResultTab():
+        | undefined
+        | {
+              title: string;
+              renderContent: (params: {query: QueryItem}) => React.ReactNode;
+          };
+
     getExternalSettings(params: {
         cluster: string;
         login: string;
@@ -617,6 +625,10 @@ const uiFactory: UIFactory = {
         return undefined;
     },
 
+    getCustomQueryResultTab() {
+        return undefined;
+    },
+
     getExternalSettings() {
         return [];
     },

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResults/hooks/useQueryResultTabs.tsx b/packages/ui/src/ui/pages/query-tracker/QueryResults/hooks/useQueryResultTabs.tsx
@@ -9,13 +9,15 @@ import {useDispatch, useSelector} from 'react-redux';
 import {loadQueryResultsErrors} from '../../module/query_result/actions';
 import {getQueryResults} from '../../module/query_result/selectors';
 import {RootState} from '../../../../store/reducers';
+import UIFactory from '../../../../UIFactory';
 
 export enum QueryResultTab {
     ERROR = 'error',
     META = 'meta',
     RESULT = 'result',
     STATISTIC = 'statistic',
     PROGRESS = 'progress',
+    CUSTOM_TAB = 'custom-tab',
 }
 
 const isResultTab = (tabId: string) => tabId.startsWith('result/');
@@ -87,6 +89,15 @@ export const useQueryResultTabs = (
         if (query.state === QueryStatus.FAILED) {
             items.unshift({id: QueryResultTab.ERROR, title: 'Error'});
         } else if (query.state === QueryStatus.COMPLETED) {
+            const customQueryResultTab = UIFactory.getCustomQueryResultTab();
+
+            if (customQueryResultTab) {
+                items.unshift({
+                    id: QueryResultTab.CUSTOM_TAB,
+                    title: customQueryResultTab.title,
+                });
+            }
+
             if (query.progress?.yql_statistics) {
                 items.unshift({
                     id: QueryResultTab.STATISTIC,

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResults/index.tsx b/packages/ui/src/ui/pages/query-tracker/QueryResults/index.tsx
@@ -19,6 +19,7 @@ import PlanActions from '../Plan/PlanActions';
 import './index.scss';
 import {ErrorTree} from './ErrorTree';
 import {QueryProgress} from './QueryResultActions/QueryProgress';
+import UIFactory from '../../../UIFactory';
 
 const b = block('query-results');
 
@@ -38,6 +39,16 @@ function QueryResultContainer({
     return <QueryResultsView query={query} index={activeResultParams?.resultIndex || 0} />;
 }
 
+function CustomQueryTabContainer({query}: {query: QueryItem}) {
+    const customQueryResultTab = UIFactory.getCustomQueryResultTab();
+
+    if (!customQueryResultTab) {
+        return null;
+    }
+
+    return customQueryResultTab.renderContent({query});
+}
+
 function extractOperationIdToCluster(obj: YQLSstatistics | undefined): Map<string, string> {
     const clusterNames: Map<string, string> = new Map();
 
@@ -118,6 +129,17 @@ export const QueryResults = React.memo(function QueryResults({
                                 activeResultParams={activeResultParams}
                             />
                         </NotRenderUntilFirstVisible>
+                        <NotRenderUntilFirstVisible
+                            hide={
+                                category !== QueryResultTab.CUSTOM_TAB &&
+                                !Number.isInteger(resultIndex)
+                            }
+                            className={b('result-wrap')}
+                        >
+                            {category === QueryResultTab.CUSTOM_TAB && (
+                                <CustomQueryTabContainer query={query} />
+                            )}
+                        </NotRenderUntilFirstVisible>
                         {category === QueryResultTab.ERROR && <ErrorTree rootError={query.error} />}
                         {category === QueryResultTab.META && <QueryMetaTable query={query} />}