From d89a787afe4a46358b86611801b8e7a10d60f736 Mon Sep 17 00:00:00 2001 From: Vladyslav Palyvoda Date: Wed, 8 Jan 2025 15:06:22 +0200 Subject: [PATCH] fix: Codemie loading, available clusters list (#537) --- .../providers/DynamicData/provider.tsx | 9 +- .../codemie/providers/DynamicData/types.ts | 4 +- .../configuration/pages/codemie/view.tsx | 228 ++++++++++-------- .../components/fields/Cluster/index.tsx | 14 +- 4 files changed, 138 insertions(+), 117 deletions(-) diff --git a/src/pages/configuration/pages/codemie/providers/DynamicData/provider.tsx b/src/pages/configuration/pages/codemie/providers/DynamicData/provider.tsx index 5cf746a94..fd57c75c6 100644 --- a/src/pages/configuration/pages/codemie/providers/DynamicData/provider.tsx +++ b/src/pages/configuration/pages/codemie/providers/DynamicData/provider.tsx @@ -36,8 +36,6 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => { namespace: getDefaultNamespace(), }); - const codemieSecret = codemieSecrets?.[0]; - const DataContextValue = React.useMemo( () => ({ codemieQuickLink: { @@ -46,12 +44,12 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => { error: codemieQuickLinkError, }, codemie: { - data: codemie, + data: codemie?.[0]?.jsonData, isLoading: codemie === null, error: codemieError, }, codemieProject: { - data: codemieProject, + data: codemieProject?.[0]?.jsonData, isLoading: codemieProject === null, error: codemieProjectError, }, @@ -66,7 +64,7 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => { error: codemieApplicationsError, }, codemieSecret: { - data: codemieSecret, + data: codemieSecrets?.[0]?.jsonData, isLoading: codemieSecrets === null, error: codemieSecretsError, }, @@ -82,7 +80,6 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => { codemieProjectSettingsError, codemieQuickLink, codemieQuickLinkError, - codemieSecret, codemieSecrets, codemieSecretsError, ] diff --git a/src/pages/configuration/pages/codemie/providers/DynamicData/types.ts b/src/pages/configuration/pages/codemie/providers/DynamicData/types.ts index 67cde4f97..adc062e3c 100644 --- a/src/pages/configuration/pages/codemie/providers/DynamicData/types.ts +++ b/src/pages/configuration/pages/codemie/providers/DynamicData/types.ts @@ -7,8 +7,8 @@ import { QuickLinkKubeObjectInterface } from '../../../../../../k8s/groups/EDP/Q import { DataProviderValue } from '../../../../../../types/pages'; export interface DynamicDataContextProviderValue { - codemie: DataProviderValue; - codemieProject: DataProviderValue; + codemie: DataProviderValue; + codemieProject: DataProviderValue; codemieProjectSettings: DataProviderValue; codemieApplications: DataProviderValue; codemieSecret: DataProviderValue; diff --git a/src/pages/configuration/pages/codemie/view.tsx b/src/pages/configuration/pages/codemie/view.tsx index fab4d9b6c..67f081603 100644 --- a/src/pages/configuration/pages/codemie/view.tsx +++ b/src/pages/configuration/pages/codemie/view.tsx @@ -76,7 +76,7 @@ export const PageView = () => { return ; } - if (!codemie && !isLoading) { + if (!codemie.isLoading && !codemie.data && !codemieSecret.isLoading && !codemieSecret.data) { return ( <> { const ownerReference = codemieSecret.data?.metadata?.ownerReferences?.[0]?.kind; - const status = codemieProject.data?.[0]?.status?.value; - const statusError = codemieProject.data?.[0]?.status?.error; + const status = codemieProject.data?.status?.value; + const statusError = codemieProject.data?.status?.error; const [icon, color] = CodemieKubeObject.getStatusIcon(status); @@ -119,7 +119,7 @@ export const PageView = () => { } /> - {codemieProject.data?.[0]?.metadata.name} + {codemieProject.data?.metadata.name} {!!ownerReference && ( @@ -139,7 +139,7 @@ export const PageView = () => { { }, [ error, codemie, - isLoading, - codemieSecret.data, + codemieSecret, codemieProject.data, + isLoading, codemieQuickLink.data, permissions, ]); @@ -238,7 +238,7 @@ export const PageView = () => { component: ( { Project Settings - - {codemieProjectSettings.data?.map((setting) => { - const status = setting?.status?.value; - const statusError = setting?.status?.error; + {codemieProjectSettings.data?.length ? ( + + {codemieProjectSettings.data?.map((_setting) => { + const setting = _setting.jsonData; + const status = setting?.status?.value; + const statusError = setting?.status?.error; - const [icon, color] = CodemieProjectSettingsKubeObject.getStatusIcon(status); + const [icon, color] = CodemieProjectSettingsKubeObject.getStatusIcon(status); - return ( - - `${t.typography.pxToRem(10)} ${t.typography.pxToRem(20)}` }} - > - + `${t.typography.pxToRem(10)} ${t.typography.pxToRem(20)}` }} > - - - - {`Status: ${status || 'Unknown'}`} - - {!!statusError && ( - - {statusError} + + + + + {`Status: ${status || 'Unknown'}`} - )} - - } - /> - {setting.metadata.name} + {!!statusError && ( + + {statusError} + + )} + + } + /> + {setting.metadata.name} + + - - - - - ); - })} - + + + ); + })} + + ) : ( + + )} t.typography.pxToRem(40) }}> @@ -332,66 +340,74 @@ export const PageView = () => { Applications - - {codemieApplications.data?.map((application) => { - const status = application?.status?.value; - const statusError = application?.status?.error; + {codemieApplications.data?.length ? ( + + {codemieApplications.data?.map((_application) => { + const application = _application.jsonData; + const status = application?.status?.value; + const statusError = application?.status?.error; - const [icon, color] = CodemieApplicationKubeObject.getStatusIcon(status); + const [icon, color] = CodemieApplicationKubeObject.getStatusIcon(status); - return ( - - `${t.typography.pxToRem(10)} ${t.typography.pxToRem(20)}` }} - > - + `${t.typography.pxToRem(10)} ${t.typography.pxToRem(20)}` }} > - - - - {`Status: ${status || 'Unknown'}`} - - {!!statusError && ( - - {statusError} + + + + + {`Status: ${status || 'Unknown'}`} - )} - - } - /> - {application.metadata.name} + {!!statusError && ( + + {statusError} + + )} + + } + /> + {application.metadata.name} + + - - - - - ); - })} - + + + ); + })} + + ) : ( + + )} - {editor.open && editor.data?.jsonData && ( + {editor.open && editor.data && ( diff --git a/src/widgets/dialogs/ManageStage/components/fields/Cluster/index.tsx b/src/widgets/dialogs/ManageStage/components/fields/Cluster/index.tsx index f16476dea..467d464d3 100644 --- a/src/widgets/dialogs/ManageStage/components/fields/Cluster/index.tsx +++ b/src/widgets/dialogs/ManageStage/components/fields/Cluster/index.tsx @@ -4,7 +4,8 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; import { DEFAULT_CLUSTER } from '../../../../../../constants/clusters'; import { EDP_USER_GUIDE } from '../../../../../../constants/urls'; -import { useClusterSecretListQuery } from '../../../../../../k8s/groups/default/Secret/hooks/useClusterSecretListQuery'; +import { EDP_CONFIG_CONFIG_MAP_NAME } from '../../../../../../k8s/groups/default/ConfigMap/constants'; +import { useEDPConfigMapQuery } from '../../../../../../k8s/groups/default/ConfigMap/hooks/useEDPConfigMap'; import { routeClusters } from '../../../../../../pages/configuration/pages/clusters/route'; import { FormSelect } from '../../../../../../providers/Form/components/FormSelect'; import { useTypedFormContext } from '../../../hooks/useFormContext'; @@ -22,13 +23,20 @@ export const Cluster = () => { formState: { errors }, } = useTypedFormContext(); - const { data, isLoading } = useClusterSecretListQuery({}); + const { data, isLoading } = useEDPConfigMapQuery({ + props: { + name: EDP_CONFIG_CONFIG_MAP_NAME, + }, + }); const clusterOptions = React.useMemo(() => { if (isLoading || !data) { return [defaultClusterOption]; } - const clusters = data?.items.map(({ metadata: { name } }) => ({ + + const availableClusters = data?.data?.available_clusters?.split(', '); + + const clusters = availableClusters.map((name) => ({ label: name, value: name, }));