From 63d895c910248243442d699110ba05fb48e5b360 Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Mon, 9 Sep 2024 15:34:17 +0300 Subject: [PATCH 1/8] feat(Header): use cluster domain if cluster name is undefined --- src/store/reducers/cluster/cluster.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/store/reducers/cluster/cluster.ts b/src/store/reducers/cluster/cluster.ts index b5aa65b1ae..bb0b4fda1f 100644 --- a/src/store/reducers/cluster/cluster.ts +++ b/src/store/reducers/cluster/cluster.ts @@ -114,6 +114,14 @@ export const clusterApi = api.injectEndpoints({ overrideExisting: 'throw', }); +function normalizeDomain(domain?: string) { + if (!domain) { + return undefined; + } + const normalizedDomain = domain.startsWith('/') ? domain.slice(1) : domain; + return normalizedDomain.toUpperCase(); +} + export function useClusterBaseInfo() { const [clusterName] = useQueryParam('clusterName', StringParam); @@ -127,10 +135,16 @@ export function useClusterBaseInfo() { ...data } = currentData || {}; + const normalizedClusterName = name ?? clusterName; + + const {currentData: baseClusterInfo} = clusterApi.useGetClusterInfoQuery( + normalizedClusterName ? skipToken : undefined, + ); + return { ...data, ...parseTraceFields({traceCheck, traceView}), - name: name ?? clusterName ?? undefined, + name: normalizedClusterName ?? normalizeDomain(baseClusterInfo?.clusterData.Domain), monitoring, }; } From 244a2f5cf1f5948ba8bf65482e92eb70d4bc5463 Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Thu, 12 Sep 2024 09:03:44 +0300 Subject: [PATCH 2/8] fix: use Domain on cluster page --- src/containers/Cluster/Cluster.tsx | 11 ++++++----- src/containers/Cluster/utils.tsx | 8 ++++++++ src/services/api.ts | 13 ++++--------- src/store/reducers/cluster/cluster.ts | 16 +--------------- src/types/api/meta.ts | 7 +++++-- 5 files changed, 24 insertions(+), 31 deletions(-) diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx index 5f85018d36..5eca3819ee 100644 --- a/src/containers/Cluster/Cluster.tsx +++ b/src/containers/Cluster/Cluster.tsx @@ -28,7 +28,7 @@ import {Versions} from '../Versions/Versions'; import {ClusterInfo} from './ClusterInfo/ClusterInfo'; import type {ClusterTab} from './utils'; -import {clusterTabs, clusterTabsIds, getClusterPath, isClusterTab} from './utils'; +import {clusterTabs, clusterTabsIds, getClusterPath, isClusterTab, normalizeDomain} from './utils'; import './Cluster.scss'; @@ -66,11 +66,11 @@ export function Cluster({ const clusterError = error && typeof error === 'object' ? error : undefined; - const {Name} = cluster; + const {Name, Domain} = cluster; React.useEffect(() => { dispatch(setHeaderBreadcrumbs('cluster', {})); - }, [dispatch, Name]); + }, [dispatch]); const versionToColor = React.useMemo(() => { if (additionalVersionsProps?.getVersionToColorMap) { @@ -79,6 +79,8 @@ export function Cluster({ return parseVersionsToVersionToColorMap(cluster?.Versions); }, [additionalVersionsProps, cluster]); + const clusterTitle = Name ?? clusterName ?? normalizeDomain(Domain) ?? CLUSTER_DEFAULT_TITLE; + const getClusterTitle = () => { if (infoLoading) { return ; @@ -88,13 +90,12 @@ export function Cluster({ ); }; - const clusterTitle = cluster?.Name ?? clusterName ?? CLUSTER_DEFAULT_TITLE; const activeTab = React.useMemo( () => clusterTabs.find(({id}) => id === activeTabId), [activeTabId], diff --git a/src/containers/Cluster/utils.tsx b/src/containers/Cluster/utils.tsx index 0350aeea96..5778facc2f 100644 --- a/src/containers/Cluster/utils.tsx +++ b/src/containers/Cluster/utils.tsx @@ -42,3 +42,11 @@ export function isClusterTab(tab: any): tab is ClusterTab { export const getClusterPath = (activeTab?: ClusterTab, query = {}) => { return createHref(routes.cluster, activeTab ? {activeTab} : undefined, query); }; + +export function normalizeDomain(domain?: string) { + if (!domain) { + return undefined; + } + const normalizedDomain = domain.startsWith('/') ? domain.slice(1) : domain; + return normalizedDomain.toUpperCase(); +} diff --git a/src/services/api.ts b/src/services/api.ts index 739db97e8a..3fd8b96915 100644 --- a/src/services/api.ts +++ b/src/services/api.ts @@ -14,12 +14,7 @@ import type {DescribeConsumerResult} from '../types/api/consumer'; import type {FeatureFlagConfigs} from '../types/api/featureFlags'; import type {HealthCheckAPIResponse} from '../types/api/healthcheck'; import type {JsonHotKeysResponse} from '../types/api/hotkeys'; -import type { - MetaCluster, - MetaClusters, - MetaGeneralClusterInfo, - MetaTenants, -} from '../types/api/meta'; +import type {MetaBaseClusterInfo, MetaCluster, MetaClusters, MetaTenants} from '../types/api/meta'; import type {ModifyDiskResponse} from '../types/api/modifyDisk'; import type {TNetInfo} from '../types/api/netInfo'; import type {TNodesInfo} from '../types/api/nodes'; @@ -825,7 +820,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper { getClusterBaseInfo( _clusterName: string, _opts: AxiosOptions = {}, - ): Promise { + ): Promise { throw new Error('Method is not implemented.'); } } @@ -860,8 +855,8 @@ export class YdbWebVersionAPI extends YdbEmbeddedAPI { getClusterBaseInfo( clusterName: string, {concurrentId, signal}: AxiosOptions = {}, - ): Promise { - return this.get( + ): Promise { + return this.get( `${META_BACKEND || ''}/meta/db_clusters`, { name: clusterName, diff --git a/src/store/reducers/cluster/cluster.ts b/src/store/reducers/cluster/cluster.ts index bb0b4fda1f..b5aa65b1ae 100644 --- a/src/store/reducers/cluster/cluster.ts +++ b/src/store/reducers/cluster/cluster.ts @@ -114,14 +114,6 @@ export const clusterApi = api.injectEndpoints({ overrideExisting: 'throw', }); -function normalizeDomain(domain?: string) { - if (!domain) { - return undefined; - } - const normalizedDomain = domain.startsWith('/') ? domain.slice(1) : domain; - return normalizedDomain.toUpperCase(); -} - export function useClusterBaseInfo() { const [clusterName] = useQueryParam('clusterName', StringParam); @@ -135,16 +127,10 @@ export function useClusterBaseInfo() { ...data } = currentData || {}; - const normalizedClusterName = name ?? clusterName; - - const {currentData: baseClusterInfo} = clusterApi.useGetClusterInfoQuery( - normalizedClusterName ? skipToken : undefined, - ); - return { ...data, ...parseTraceFields({traceCheck, traceView}), - name: normalizedClusterName ?? normalizeDomain(baseClusterInfo?.clusterData.Domain), + name: name ?? clusterName ?? undefined, monitoring, }; } diff --git a/src/types/api/meta.ts b/src/types/api/meta.ts index 8142b78194..bf213bf6fe 100644 --- a/src/types/api/meta.ts +++ b/src/types/api/meta.ts @@ -22,7 +22,7 @@ export interface MetaExtendedClusterInfo extends MetaGeneralClusterInfo { versions?: MetaClusterVersion[]; } -export interface MetaGeneralClusterInfo { +export interface MetaBaseClusterInfo { owner?: string; location?: string; image?: string; @@ -38,11 +38,14 @@ export interface MetaGeneralClusterInfo { description?: string; balancer?: string; service?: string; - cluster?: MetaViewerClusterInfo; trace_view?: string; trace_check?: string; } +export interface MetaGeneralClusterInfo extends MetaBaseClusterInfo { + cluster?: MetaViewerClusterInfo; +} + // In case of error in viewer /cluster request mvp return error field instead of cluster data export interface MetaViewerClusterInfo extends TClusterInfo { error?: string; From 91b0c8870d49f734019c21f375cc3db23921e26d Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Thu, 12 Sep 2024 09:37:41 +0300 Subject: [PATCH 3/8] fix: save cluster title in store --- src/containers/Cluster/Cluster.tsx | 16 +++++++---- src/containers/Cluster/utils.tsx | 8 ------ src/containers/Header/Header.tsx | 7 ++--- src/store/reducers/cluster/cluster.ts | 40 ++++++++++++++++++++++----- src/store/reducers/cluster/types.ts | 1 + src/store/reducers/cluster/utils.ts | 8 ++++++ 6 files changed, 54 insertions(+), 26 deletions(-) diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx index 5eca3819ee..a3c17cad86 100644 --- a/src/containers/Cluster/Cluster.tsx +++ b/src/containers/Cluster/Cluster.tsx @@ -9,7 +9,11 @@ import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefres import {EntityStatus} from '../../components/EntityStatus/EntityStatus'; import {InternalLink} from '../../components/InternalLink'; import routes, {getLocationObjectFromHref} from '../../routes'; -import {clusterApi, updateDefaultClusterTab} from '../../store/reducers/cluster/cluster'; +import { + clusterApi, + selectClusterTitle, + updateDefaultClusterTab, +} from '../../store/reducers/cluster/cluster'; import {setHeaderBreadcrumbs} from '../../store/reducers/header/header'; import type { AdditionalClusterProps, @@ -28,7 +32,7 @@ import {Versions} from '../Versions/Versions'; import {ClusterInfo} from './ClusterInfo/ClusterInfo'; import type {ClusterTab} from './utils'; -import {clusterTabs, clusterTabsIds, getClusterPath, isClusterTab, normalizeDomain} from './utils'; +import {clusterTabs, clusterTabsIds, getClusterPath, isClusterTab} from './utils'; import './Cluster.scss'; @@ -49,6 +53,10 @@ export function Cluster({ }: ClusterProps) { const container = React.useRef(null); + const rawClusterTitle = useTypedSelector(selectClusterTitle); + + const clusterTitle = rawClusterTitle ?? CLUSTER_DEFAULT_TITLE; + const dispatch = useTypedDispatch(); const activeTabId = useClusterTab(); @@ -66,8 +74,6 @@ export function Cluster({ const clusterError = error && typeof error === 'object' ? error : undefined; - const {Name, Domain} = cluster; - React.useEffect(() => { dispatch(setHeaderBreadcrumbs('cluster', {})); }, [dispatch]); @@ -79,8 +85,6 @@ export function Cluster({ return parseVersionsToVersionToColorMap(cluster?.Versions); }, [additionalVersionsProps, cluster]); - const clusterTitle = Name ?? clusterName ?? normalizeDomain(Domain) ?? CLUSTER_DEFAULT_TITLE; - const getClusterTitle = () => { if (infoLoading) { return ; diff --git a/src/containers/Cluster/utils.tsx b/src/containers/Cluster/utils.tsx index 5778facc2f..0350aeea96 100644 --- a/src/containers/Cluster/utils.tsx +++ b/src/containers/Cluster/utils.tsx @@ -42,11 +42,3 @@ export function isClusterTab(tab: any): tab is ClusterTab { export const getClusterPath = (activeTab?: ClusterTab, query = {}) => { return createHref(routes.cluster, activeTab ? {activeTab} : undefined, query); }; - -export function normalizeDomain(domain?: string) { - if (!domain) { - return undefined; - } - const normalizedDomain = domain.startsWith('/') ? domain.slice(1) : domain; - return normalizedDomain.toUpperCase(); -} diff --git a/src/containers/Header/Header.tsx b/src/containers/Header/Header.tsx index 6397be1d04..e145acb3d9 100644 --- a/src/containers/Header/Header.tsx +++ b/src/containers/Header/Header.tsx @@ -5,7 +5,7 @@ import {Breadcrumbs} from '@gravity-ui/uikit'; import {InternalLink} from '../../components/InternalLink'; import {LinkWithIcon} from '../../components/LinkWithIcon/LinkWithIcon'; import {backend, customBackend} from '../../store'; -import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster'; +import {selectClusterTitle} from '../../store/reducers/cluster/cluster'; import {cn} from '../../utils/cn'; import {DEVELOPER_UI_TITLE} from '../../utils/constants'; import {useTypedSelector} from '../../utils/hooks'; @@ -32,10 +32,7 @@ interface HeaderProps { function Header({mainPage}: HeaderProps) { const singleClusterMode = useTypedSelector((state) => state.singleClusterMode); const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header); - - const clusterInfo = useClusterBaseInfo(); - - const clusterName = clusterInfo.title || clusterInfo.name; + const clusterName = useTypedSelector(selectClusterTitle); const breadcrumbItems = React.useMemo(() => { const rawBreadcrumbs: RawBreadcrumbItem[] = []; diff --git a/src/store/reducers/cluster/cluster.ts b/src/store/reducers/cluster/cluster.ts index b5aa65b1ae..03b8672da3 100644 --- a/src/store/reducers/cluster/cluster.ts +++ b/src/store/reducers/cluster/cluster.ts @@ -12,7 +12,11 @@ import {isQueryErrorResponse} from '../../../utils/query'; import {api} from '../api'; import type {ClusterGroupsStats, ClusterState} from './types'; -import {createSelectClusterGroupsQuery, parseGroupsStatsQueryResponse} from './utils'; +import { + createSelectClusterGroupsQuery, + normalizeDomain, + parseGroupsStatsQueryResponse, +} from './utils'; const defaultClusterTabLS = localStorage.getItem(DEFAULT_CLUSTER_TAB_KEY); @@ -33,20 +37,31 @@ const clusterSlice = createSlice({ setDefaultClusterTab(state, action: PayloadAction) { state.defaultClusterTab = action.payload; }, + setClusterTitle: (state, action: PayloadAction) => { + const clusterTitle = action.payload; + + state.clusterTitle = clusterTitle; + }, + }, + selectors: { + selectClusterTitle: (state) => state.clusterTitle, }, }); +export default clusterSlice.reducer; +export const {selectClusterTitle} = clusterSlice.selectors; + +const {setClusterTitle, setDefaultClusterTab} = clusterSlice.actions; + export function updateDefaultClusterTab(tab: string) { return (dispatch: Dispatch) => { if (isClusterTab(tab)) { localStorage.setItem(DEFAULT_CLUSTER_TAB_KEY, tab); - dispatch(clusterSlice.actions.setDefaultClusterTab(tab)); + dispatch(setDefaultClusterTab(tab)); } }; } -export default clusterSlice.reducer; - export const clusterApi = api.injectEndpoints({ endpoints: (builder) => ({ getClusterInfo: builder.query< @@ -56,11 +71,18 @@ export const clusterApi = api.injectEndpoints({ }, string | undefined >({ - queryFn: async (clusterName, {signal}) => { + queryFn: async (clusterName, {signal, dispatch}) => { try { const clusterData = await window.api.getClusterInfo(clusterName, {signal}); - const clusterRoot = clusterData.Domain; + const {Name, Domain} = clusterData; + + const clusterRoot = Domain; + + const clusterTitle = Name || clusterName || normalizeDomain(clusterRoot); + if (clusterTitle) { + dispatch(setClusterTitle(clusterTitle)); + } // Without domain we cannot get stats from system tables if (!clusterRoot) { @@ -100,9 +122,13 @@ export const clusterApi = api.injectEndpoints({ providesTags: ['All'], }), getClusterBaseInfo: builder.query({ - queryFn: async (clusterName: string, {signal}) => { + queryFn: async (clusterName: string, {signal, dispatch}) => { try { const data = await window.api.getClusterBaseInfo(clusterName, {signal}); + const clusterTitle = data.title || data.name || clusterName; + if (clusterTitle) { + dispatch(setClusterTitle(clusterTitle)); + } return {data}; } catch (error) { return {error}; diff --git a/src/store/reducers/cluster/types.ts b/src/store/reducers/cluster/types.ts index ca4030f53e..fd5483f0eb 100644 --- a/src/store/reducers/cluster/types.ts +++ b/src/store/reducers/cluster/types.ts @@ -18,6 +18,7 @@ export type ClusterGroupsStats = Record; export interface ClusterState { defaultClusterTab: ClusterTab; + clusterTitle?: string; } export interface HandledClusterResponse { diff --git a/src/store/reducers/cluster/utils.ts b/src/store/reducers/cluster/utils.ts index 16c3f7d3fa..2dc9c9d767 100644 --- a/src/store/reducers/cluster/utils.ts +++ b/src/store/reducers/cluster/utils.ts @@ -86,3 +86,11 @@ export const parseGroupsStatsQueryResponse = ( return result; }; + +export function normalizeDomain(domain?: string) { + if (!domain) { + return undefined; + } + const normalizedDomain = domain.startsWith('/') ? domain.slice(1) : domain; + return normalizedDomain.toUpperCase(); +} From 2904397d5fce1e9467130f7fb269fdac53ddc411 Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Thu, 12 Sep 2024 10:35:15 +0300 Subject: [PATCH 4/8] fix: set cluster name from query params if requst failed --- src/store/reducers/cluster/cluster.ts | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/store/reducers/cluster/cluster.ts b/src/store/reducers/cluster/cluster.ts index 03b8672da3..bcfce6f1b6 100644 --- a/src/store/reducers/cluster/cluster.ts +++ b/src/store/reducers/cluster/cluster.ts @@ -72,6 +72,7 @@ export const clusterApi = api.injectEndpoints({ string | undefined >({ queryFn: async (clusterName, {signal, dispatch}) => { + let clusterTitle = clusterName; try { const clusterData = await window.api.getClusterInfo(clusterName, {signal}); @@ -79,11 +80,7 @@ export const clusterApi = api.injectEndpoints({ const clusterRoot = Domain; - const clusterTitle = Name || clusterName || normalizeDomain(clusterRoot); - if (clusterTitle) { - dispatch(setClusterTitle(clusterTitle)); - } - + clusterTitle = Name || clusterName || normalizeDomain(clusterRoot); // Without domain we cannot get stats from system tables if (!clusterRoot) { return {data: {clusterData}}; @@ -117,21 +114,27 @@ export const clusterApi = api.injectEndpoints({ } } catch (error) { return {error}; + } finally { + if (clusterTitle) { + dispatch(setClusterTitle(clusterTitle)); + } } }, providesTags: ['All'], }), getClusterBaseInfo: builder.query({ queryFn: async (clusterName: string, {signal, dispatch}) => { + let clusterTitle = clusterName; try { const data = await window.api.getClusterBaseInfo(clusterName, {signal}); - const clusterTitle = data.title || data.name || clusterName; - if (clusterTitle) { - dispatch(setClusterTitle(clusterTitle)); - } + clusterTitle = data.title || data.name || clusterName; return {data}; } catch (error) { return {error}; + } finally { + if (clusterTitle) { + dispatch(setClusterTitle(clusterTitle)); + } } }, providesTags: ['All'], From c309a17a39923d54c5ba1853d421f6dfede714e9 Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Thu, 12 Sep 2024 13:10:26 +0300 Subject: [PATCH 5/8] fix: not use cluster name from store in header --- src/containers/Header/Header.tsx | 7 +++++-- src/store/reducers/cluster/cluster.ts | 8 +------- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/containers/Header/Header.tsx b/src/containers/Header/Header.tsx index e145acb3d9..6397be1d04 100644 --- a/src/containers/Header/Header.tsx +++ b/src/containers/Header/Header.tsx @@ -5,7 +5,7 @@ import {Breadcrumbs} from '@gravity-ui/uikit'; import {InternalLink} from '../../components/InternalLink'; import {LinkWithIcon} from '../../components/LinkWithIcon/LinkWithIcon'; import {backend, customBackend} from '../../store'; -import {selectClusterTitle} from '../../store/reducers/cluster/cluster'; +import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster'; import {cn} from '../../utils/cn'; import {DEVELOPER_UI_TITLE} from '../../utils/constants'; import {useTypedSelector} from '../../utils/hooks'; @@ -32,7 +32,10 @@ interface HeaderProps { function Header({mainPage}: HeaderProps) { const singleClusterMode = useTypedSelector((state) => state.singleClusterMode); const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header); - const clusterName = useTypedSelector(selectClusterTitle); + + const clusterInfo = useClusterBaseInfo(); + + const clusterName = clusterInfo.title || clusterInfo.name; const breadcrumbItems = React.useMemo(() => { const rawBreadcrumbs: RawBreadcrumbItem[] = []; diff --git a/src/store/reducers/cluster/cluster.ts b/src/store/reducers/cluster/cluster.ts index bcfce6f1b6..eef5d827cc 100644 --- a/src/store/reducers/cluster/cluster.ts +++ b/src/store/reducers/cluster/cluster.ts @@ -123,18 +123,12 @@ export const clusterApi = api.injectEndpoints({ providesTags: ['All'], }), getClusterBaseInfo: builder.query({ - queryFn: async (clusterName: string, {signal, dispatch}) => { - let clusterTitle = clusterName; + queryFn: async (clusterName: string, {signal}) => { try { const data = await window.api.getClusterBaseInfo(clusterName, {signal}); - clusterTitle = data.title || data.name || clusterName; return {data}; } catch (error) { return {error}; - } finally { - if (clusterTitle) { - dispatch(setClusterTitle(clusterTitle)); - } } }, providesTags: ['All'], From 4b8272e20ab3113423455d8950444eba0764a65b Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Fri, 13 Sep 2024 10:40:07 +0300 Subject: [PATCH 6/8] fix: review --- src/containers/Cluster/Cluster.tsx | 5 +-- src/store/reducers/cluster/cluster.ts | 56 ++++++++++++++------------- src/store/reducers/cluster/types.ts | 1 - 3 files changed, 30 insertions(+), 32 deletions(-) diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx index a3c17cad86..f0adc8e278 100644 --- a/src/containers/Cluster/Cluster.tsx +++ b/src/containers/Cluster/Cluster.tsx @@ -22,7 +22,6 @@ import type { AdditionalVersionsProps, } from '../../types/additionalProps'; import {cn} from '../../utils/cn'; -import {CLUSTER_DEFAULT_TITLE} from '../../utils/constants'; import {useTypedDispatch, useTypedSelector} from '../../utils/hooks'; import {parseVersionsToVersionToColorMap} from '../../utils/versions'; import {NodesWrapper} from '../Nodes/NodesWrapper'; @@ -53,9 +52,7 @@ export function Cluster({ }: ClusterProps) { const container = React.useRef(null); - const rawClusterTitle = useTypedSelector(selectClusterTitle); - - const clusterTitle = rawClusterTitle ?? CLUSTER_DEFAULT_TITLE; + const clusterTitle = useTypedSelector(selectClusterTitle); const dispatch = useTypedDispatch(); diff --git a/src/store/reducers/cluster/cluster.ts b/src/store/reducers/cluster/cluster.ts index eef5d827cc..e8a4b6ec3e 100644 --- a/src/store/reducers/cluster/cluster.ts +++ b/src/store/reducers/cluster/cluster.ts @@ -1,4 +1,4 @@ -import {createSlice} from '@reduxjs/toolkit'; +import {createSelector, createSlice} from '@reduxjs/toolkit'; import type {Dispatch, PayloadAction} from '@reduxjs/toolkit'; import {skipToken} from '@reduxjs/toolkit/query'; import {StringParam, useQueryParam} from 'use-query-params'; @@ -7,8 +7,9 @@ import type {ClusterTab} from '../../../containers/Cluster/utils'; import {clusterTabsIds, isClusterTab} from '../../../containers/Cluster/utils'; import {parseTraceFields} from '../../../services/parsers/parseMetaCluster'; import type {TClusterInfo} from '../../../types/api/cluster'; -import {DEFAULT_CLUSTER_TAB_KEY} from '../../../utils/constants'; +import {CLUSTER_DEFAULT_TITLE, DEFAULT_CLUSTER_TAB_KEY} from '../../../utils/constants'; import {isQueryErrorResponse} from '../../../utils/query'; +import type {RootState} from '../../defaultStore'; import {api} from '../api'; import type {ClusterGroupsStats, ClusterState} from './types'; @@ -37,31 +38,20 @@ const clusterSlice = createSlice({ setDefaultClusterTab(state, action: PayloadAction) { state.defaultClusterTab = action.payload; }, - setClusterTitle: (state, action: PayloadAction) => { - const clusterTitle = action.payload; - - state.clusterTitle = clusterTitle; - }, - }, - selectors: { - selectClusterTitle: (state) => state.clusterTitle, }, }); -export default clusterSlice.reducer; -export const {selectClusterTitle} = clusterSlice.selectors; - -const {setClusterTitle, setDefaultClusterTab} = clusterSlice.actions; - export function updateDefaultClusterTab(tab: string) { return (dispatch: Dispatch) => { if (isClusterTab(tab)) { localStorage.setItem(DEFAULT_CLUSTER_TAB_KEY, tab); - dispatch(setDefaultClusterTab(tab)); + dispatch(clusterSlice.actions.setDefaultClusterTab(tab)); } }; } +export default clusterSlice.reducer; + export const clusterApi = api.injectEndpoints({ endpoints: (builder) => ({ getClusterInfo: builder.query< @@ -71,16 +61,11 @@ export const clusterApi = api.injectEndpoints({ }, string | undefined >({ - queryFn: async (clusterName, {signal, dispatch}) => { - let clusterTitle = clusterName; + queryFn: async (clusterName, {signal}) => { try { const clusterData = await window.api.getClusterInfo(clusterName, {signal}); - const {Name, Domain} = clusterData; - - const clusterRoot = Domain; - - clusterTitle = Name || clusterName || normalizeDomain(clusterRoot); + const clusterRoot = clusterData.Domain; // Without domain we cannot get stats from system tables if (!clusterRoot) { return {data: {clusterData}}; @@ -114,10 +99,6 @@ export const clusterApi = api.injectEndpoints({ } } catch (error) { return {error}; - } finally { - if (clusterTitle) { - dispatch(setClusterTitle(clusterTitle)); - } } }, providesTags: ['All'], @@ -157,3 +138,24 @@ export function useClusterBaseInfo() { monitoring, }; } + +const createClusterInfoSelector = createSelector( + (clusterName?: string) => clusterName, + (clusterName) => clusterApi.endpoints.getClusterInfo.select(clusterName), +); + +export const selectClusterInfo = createSelector( + (state: RootState) => state, + (_state: RootState, clusterName?: string) => createClusterInfoSelector(clusterName), + (state, selectGetTopic) => selectGetTopic(state).data, +); + +export const selectClusterTitle = createSelector( + (_state: RootState, clusterName?: string) => clusterName, + (state: RootState, clusterName?: string) => selectClusterInfo(state, clusterName), + (clusterName, clusterInfo) => { + const {Name, Domain} = clusterInfo?.clusterData || {}; + + return Name || clusterName || normalizeDomain(Domain) || CLUSTER_DEFAULT_TITLE; + }, +); diff --git a/src/store/reducers/cluster/types.ts b/src/store/reducers/cluster/types.ts index fd5483f0eb..ca4030f53e 100644 --- a/src/store/reducers/cluster/types.ts +++ b/src/store/reducers/cluster/types.ts @@ -18,7 +18,6 @@ export type ClusterGroupsStats = Record; export interface ClusterState { defaultClusterTab: ClusterTab; - clusterTitle?: string; } export interface HandledClusterResponse { From 2e2ea08c50f715cc649faad3ced1f9b36554145a Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Fri, 13 Sep 2024 12:07:26 +0300 Subject: [PATCH 7/8] fix: review --- src/containers/Cluster/Cluster.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx index f0adc8e278..b77a5cb500 100644 --- a/src/containers/Cluster/Cluster.tsx +++ b/src/containers/Cluster/Cluster.tsx @@ -52,8 +52,6 @@ export function Cluster({ }: ClusterProps) { const container = React.useRef(null); - const clusterTitle = useTypedSelector(selectClusterTitle); - const dispatch = useTypedDispatch(); const activeTabId = useClusterTab(); @@ -63,6 +61,10 @@ export function Cluster({ backend: StringParam, }); + const clusterTitle = useTypedSelector((state) => + selectClusterTitle(state, clusterName ?? undefined), + ); + const { data: {clusterData: cluster = {}, groupsStats} = {}, isLoading: infoLoading, From 76490d4e8e0df9aedf34331e7bd747ffacc861ac Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Fri, 13 Sep 2024 13:26:37 +0300 Subject: [PATCH 8/8] fix: review --- src/store/reducers/cluster/cluster.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/reducers/cluster/cluster.ts b/src/store/reducers/cluster/cluster.ts index e8a4b6ec3e..c10f5b07a8 100644 --- a/src/store/reducers/cluster/cluster.ts +++ b/src/store/reducers/cluster/cluster.ts @@ -147,7 +147,7 @@ const createClusterInfoSelector = createSelector( export const selectClusterInfo = createSelector( (state: RootState) => state, (_state: RootState, clusterName?: string) => createClusterInfoSelector(clusterName), - (state, selectGetTopic) => selectGetTopic(state).data, + (state, selectGetClusterInfo) => selectGetClusterInfo(state).data, ); export const selectClusterTitle = createSelector(