feat(Queries): default ACO [#436]

ytsaurus · Oct 18, 2024 · cd929c5 · cd929c5
1 parent 0966a01
commit cd929c5
Show file tree

Hide file tree

Showing 13 changed files with 107 additions and 92 deletions.
diff --git a/packages/ui/src/shared/constants/settings-types.ts b/packages/ui/src/shared/constants/settings-types.ts
@@ -69,8 +69,7 @@ interface AccountsSettings {
     'global::accounts::dashboardVisibilityMode': 'string';
 }
 
-type ClusterName = string;
-type Stage = string;
+export type Stage = string;
 
 interface QueryTrackerSettings {
     'global::queryTracker::queriesListSidebarVisibilityMode': boolean;
@@ -82,11 +81,11 @@ interface ChytSettings {
 }
 
 type QueryTrackerLastSelectedACOsSettings = {
-    [key in `qt-stage::${ClusterName}::queryTracker::${Stage}::lastSelectedACOs`]: string[];
+    [key in `qt-stage::${Stage}::queryTracker::lastSelectedACOs`]: string[];
 };
 
 type QueryTrackerUserDefaultACOSettings = {
-    [key in `qt-stage::${ClusterName}::queryTracker::${Stage}::defaultACO`]: string;
+    [key in `qt-stage::${Stage}::queryTracker::defaultACO`]: string;
 };
 
 interface OtherSettings {

diff --git a/packages/ui/src/shared/yt-types.d.ts b/packages/ui/src/shared/yt-types.d.ts
@@ -1,5 +1,5 @@
 import type {YTError} from '../@types/types';
-import type {Settings} from './constants/settings-types';
+import type {Settings, Stage} from './constants/settings-types';
 import type {UISettings} from './ui-settings';
 
 export interface YTConfig {
@@ -24,7 +24,7 @@ export interface ClusterUiConfig {
     enable_maintenance_api_proxies?: boolean;
     chyt_controller_base_url?: string;
     livy_controller_base_url?: string;
-    query_tracker_default_aco?: Record<string, string>;
+    query_tracker_default_aco?: Record<Stage, string>;
     job_trace_url_template?: {
         title: string;
         url_template: string;

diff --git a/packages/ui/src/ui/containers/SettingsMenu/SettingsMenu.scss b/packages/ui/src/ui/containers/SettingsMenu/SettingsMenu.scss
@@ -52,6 +52,11 @@
             &_one-line {
                 display: flex;
             }
+
+            &_select {
+                margin-left: 0;
+                margin-bottom: 0;
+            }
         }
 
         &-annotation {

diff --git a/packages/ui/src/ui/containers/SettingsMenu/SettingsMenuSelect.tsx b/packages/ui/src/ui/containers/SettingsMenu/SettingsMenuSelect.tsx
@@ -0,0 +1,41 @@
+import React, {useEffect, useState} from 'react';
+import block from 'bem-cn-lite';
+import {SelectSingle} from '../../components/Select/Select';
+
+import './SettingsMenu.scss';
+
+const b = block('elements-page');
+
+type SettingsMenuSelectOption =
+    | {options: Array<{value: string; text: string}>}
+    | {getOptionsOnMount: () => Promise<Array<{value: string; text: string}>>};
+type SettingsMenuSelectProps = {
+    placeholder?: string;
+    label?: string;
+    getSetting: () => string;
+    setSetting: (value?: string) => void;
+} & SettingsMenuSelectOption;
+
+export const SettingsMenuSelect = (props: SettingsMenuSelectProps) => {
+    const value = props.getSetting();
+    const [items, setItems] = useState('options' in props ? props.options : []);
+
+    useEffect(() => {
+        if ('getOptionsOnMount' in props) {
+            props?.getOptionsOnMount().then((options) => {
+                setItems(options);
+            });
+        }
+    }, []);
+
+    return (
+        <div className={b('settings-item', {select: true})} title={props.label}>
+            <SelectSingle
+                value={value}
+                items={items}
+                onChange={(value) => props.setSetting(value)}
+                placeholder={props.placeholder}
+            />
+        </div>
+    );
+};
diff --git a/packages/ui/src/ui/containers/SettingsPanel/settings-description.tsx b/packages/ui/src/ui/containers/SettingsPanel/settings-description.tsx
@@ -53,7 +53,11 @@ import Link from '../../components/Link/Link';
 import Button from '../../components/Button/Button';
 import {AddTokenForm, VcsList} from '../../pages/query-tracker/Vcs/SettingsMenu';
 import {selectIsVcsVisible, selectVcsConfig} from '../../pages/query-tracker/module/vcs/selectors';
-import {QueryACOSettingsMenuForm} from '../../pages/query-tracker/QueryACO/QueryACOSettingsMenu';
+import {SettingsMenuSelect} from '../SettingsMenu/SettingsMenuSelect';
+import {getDefaultQueryACO} from '../../pages/query-tracker/module/query_aco/selectors';
+import {getQueryACO, setUserDefaultACO} from '../../pages/query-tracker/module/query_aco/actions';
+import {Item} from '../../components/Select/Select';
+import {useThunkDispatch} from '../../store/thunkDispatch';
 
 export interface SettingsPage {
     title: string;
@@ -81,13 +85,15 @@ function wrapEscapeText(text: string) {
 }
 
 function useSettings(cluster: string, isAdmin: boolean): Array<SettingsPage> {
+    const dispatch = useThunkDispatch();
     const clusterNS = useSelector(getCurrentClusterNS);
 
     const httpProxyVersion: string = useSelector(getHttpProxyVersion);
     const schedulerVersion: string = useSelector(getGlobalSchedulerVersion);
     const masterVersion: string = useSelector(getGlobalMasterVersion);
     const vcsConfig = useSelector(selectVcsConfig);
     const isVcsVisible = useSelector(selectIsVcsVisible);
+    const defaultUserACO = useSelector(getDefaultQueryACO);
 
     return compact_([
         makePage('General', generalIcon, [
@@ -515,7 +521,27 @@ function useSettings(cluster: string, isAdmin: boolean): Array<SettingsPage> {
         makePage(
             'Query ACO',
             undefined,
-            compact_([makeItem('Default ACO', undefined, <QueryACOSettingsMenuForm />)]),
+            compact_([
+                makeItem(
+                    'Default ACO',
+                    undefined,
+                    <SettingsMenuSelect
+                        getOptionsOnMount={() =>
+                            dispatch(getQueryACO()).then((data) => {
+                                return data.access_control_objects.reduce(
+                                    (acc: Item[], item: string) => {
+                                        acc.push({value: item, text: item});
+                                        return acc;
+                                    },
+                                    [] as Item[],
+                                );
+                            })
+                        }
+                        setSetting={(value) => value && dispatch(setUserDefaultACO(value))}
+                        getSetting={() => defaultUserACO}
+                    />,
+                ),
+            ]),
         ),
 
         makePage(

diff --git a/...ui/src/ui/pages/query-tracker/QueryACO/QueryACOSettingsMenu/QueryACOSettingsMenuForm.scss b/...ui/src/ui/pages/query-tracker/QueryACO/QueryACOSettingsMenu/QueryACOSettingsMenuForm.scss
diff --git a/.../ui/src/ui/pages/query-tracker/QueryACO/QueryACOSettingsMenu/QueryACOSettingsMenuForm.tsx b/.../ui/src/ui/pages/query-tracker/QueryACO/QueryACOSettingsMenu/QueryACOSettingsMenuForm.tsx
diff --git a/packages/ui/src/ui/pages/query-tracker/QueryACO/QueryACOSettingsMenu/index.ts b/packages/ui/src/ui/pages/query-tracker/QueryACO/QueryACOSettingsMenu/index.ts
diff --git a/packages/ui/src/ui/pages/query-tracker/module/api.ts b/packages/ui/src/ui/pages/query-tracker/module/api.ts
@@ -11,7 +11,7 @@ import {generateQuerySettings, generateQueryText} from '../utils/query_generate'
 import {RootState} from '../../../store/reducers';
 import {makeDirectDownloadPath} from '../../../utils/navigation';
 import {QueriesHistoryCursorDirection, UPDATE_QUERIES_LIST} from './query-tracker-contants';
-import {getCurrentStage, getQueryTrackerRequestOptions} from './query/selectors';
+import {getEffectiveApiStage, getQueryTrackerRequestOptions} from './query/selectors';
 import {AnyAction} from 'redux';
 import {QueryEngine} from './engines';
 import {getLastSelectedACONamespaces, selectIsMultipleAco} from './query_aco/selectors';
@@ -571,14 +571,15 @@ export function addACOToLastSelected(
 ): ThunkAction<Promise<any>, RootState, any, AnyAction> {
     return async (dispatch, getState) => {
         const state = getState();
-        const cluster = state.global.cluster;
         const lastSelectedACONamespaces = getLastSelectedACONamespaces(state);
-        const stage = getCurrentStage(state);
+        const stage = getEffectiveApiStage(state);
 
         await dispatch(
-            setSettingByKey(`qt-stage::${cluster}::queryTracker::${stage}::lastSelectedACOs`, [
+            setSettingByKey(`qt-stage::${stage}::queryTracker::lastSelectedACOs`, [
                 ...aco,
-                ...lastSelectedACONamespaces.filter((item) => !aco.includes(item)).slice(0, 9),
+                ...lastSelectedACONamespaces
+                    .filter((item: string) => !aco.includes(item))
+                    .slice(0, 9),
             ]),
         );
     };

diff --git a/packages/ui/src/ui/pages/query-tracker/module/query/selectors.ts b/packages/ui/src/ui/pages/query-tracker/module/query/selectors.ts
@@ -101,7 +101,7 @@ export const getQueryEditorErrors = (state: RootState): QTEditorError[] => {
 export const getDirtySinceLastSubmit = (state: RootState) =>
     state.queryTracker.query.dirtySinceLastSubmit;
 
-export const getCurrentStage = (state: RootState) => {
+export const getEffectiveApiStage = (state: RootState) => {
     return state.queryTracker?.aco?.data?.query_tracker_stage ?? 'production';
 };
 

diff --git a/packages/ui/src/ui/pages/query-tracker/module/query_aco/actions.ts b/packages/ui/src/ui/pages/query-tracker/module/query_aco/actions.ts
@@ -3,14 +3,21 @@ import {ThunkAction} from 'redux-thunk';
 import {Toaster} from '@gravity-ui/uikit';
 import type {AxiosError} from 'axios';
 import {YTApiId, ytApiV4Id} from '../../../../rum/rum-wrap-api';
-import {getCurrentStage, getQueryTrackerRequestOptions} from '../query/selectors';
+import {getEffectiveApiStage, getQueryTrackerRequestOptions} from '../query/selectors';
 import {QUERY_ACO_LOADING} from './constants';
 import {showErrorPopup} from '../../../../utils/utils';
 import {QueryACOActions} from './reducer';
 import {RootState} from '../../../../store/reducers';
 import {setSettingByKey} from '../../../../store/actions/settings';
 
-export const getQueryACO = (): ThunkAction<Promise<unknown>, any, any, QueryACOActions> => {
+type QueryTrackerInfoResponse = Awaited<ReturnType<typeof ytApiV4Id.getQueryTrackerInfo>>;
+
+export const getQueryACO = (): ThunkAction<
+    Promise<QueryTrackerInfoResponse>,
+    any,
+    any,
+    QueryACOActions
+> => {
     return (dispatch, getState) => {
         const state = getState();
         const {stage} = getQueryTrackerRequestOptions(state);
@@ -44,6 +51,8 @@ export const getQueryACO = (): ThunkAction<Promise<unknown>, any, any, QueryACOA
                     type: QUERY_ACO_LOADING.SUCCESS,
                     data: {data},
                 });
+
+                return data;
             })
             .catch((error) => {
                 // @todo Remove the condition when the method will be implemented on all clusters
@@ -70,11 +79,8 @@ export function setUserDefaultACO(
 ): ThunkAction<Promise<any>, RootState, any, AnyAction> {
     return async (dispatch, getState) => {
         const state = getState();
-        const cluster = state.global.cluster;
-        const stage = getCurrentStage(state);
+        const stage = getEffectiveApiStage(state);
 
-        await dispatch(
-            setSettingByKey(`qt-stage::${cluster}::queryTracker::${stage}::defaultACO`, aco),
-        );
+        await dispatch(setSettingByKey(`qt-stage::${stage}::queryTracker::defaultACO`, aco));
     };
 }
diff --git a/packages/ui/src/ui/pages/query-tracker/module/query_aco/reducer.ts b/packages/ui/src/ui/pages/query-tracker/module/query_aco/reducer.ts
@@ -18,7 +18,7 @@ const initialState: QueryACOState = {
     data: {
         cluster_name: '',
         access_control_objects: [],
-        query_tracker_stage: 'production',
+        query_tracker_stage: '',
         supported_features: {
             access_control: false,
         },

diff --git a/packages/ui/src/ui/pages/query-tracker/module/query_aco/selectors.ts b/packages/ui/src/ui/pages/query-tracker/module/query_aco/selectors.ts
@@ -3,19 +3,14 @@ import {SelectOption} from '@gravity-ui/uikit/build/esm/components/Select/types'
 import {RootState} from '../../../../store/reducers';
 import {getSettingsData} from '../../../../store/selectors/settings-base';
 import {createSelector} from 'reselect';
-import {DEFAULT_QUERY_ACO, SHARED_QUERY_ACO, getCurrentStage} from '../query/selectors';
+import {DEFAULT_QUERY_ACO, SHARED_QUERY_ACO, getEffectiveApiStage} from '../query/selectors';
 import {getClusterUiConfig} from '../../../../store/selectors/global';
-import get_ from 'lodash/get';
 const selectAcoState = (state: RootState) => state.queryTracker.aco;
 
 export const getLastSelectedACONamespaces = (state: RootState) => {
-    const cluster = state.global.cluster;
-    const stage = getCurrentStage(state);
+    const stage = getEffectiveApiStage(state);
 
-    return (
-        getSettingsData(state)[`qt-stage::${cluster}::queryTracker::${stage}::lastSelectedACOs`] ??
-        []
-    );
+    return getSettingsData(state)[`qt-stage::${stage}::queryTracker::lastSelectedACOs`] ?? [];
 };
 
 export const getQueryACOOptions = (state: RootState): SelectOption[] => {
@@ -51,16 +46,15 @@ export const isSupportedShareQuery = createSelector(
 
 export const getClusterDefaultQueryACO = (state: RootState) => {
     const queryTrackerDefaultACO = getClusterUiConfig(state)?.query_tracker_default_aco;
-    const stage = getCurrentStage(state);
+    const stage = getEffectiveApiStage(state);
 
-    return get_(queryTrackerDefaultACO, stage, DEFAULT_QUERY_ACO);
+    return (queryTrackerDefaultACO && queryTrackerDefaultACO[stage]) || DEFAULT_QUERY_ACO;
 };
 
 export const getUserDefaultQueryACO = (state: RootState) => {
-    const cluster = state.global.cluster;
-    const stage = getCurrentStage(state);
+    const stage = getEffectiveApiStage(state);
 
-    return getSettingsData(state)[`qt-stage::${cluster}::queryTracker::${stage}::defaultACO`];
+    return getSettingsData(state)[`qt-stage::${stage}::queryTracker::defaultACO`];
 };
 
 export const getDefaultQueryACO = (state: RootState) => {