From ae8c98634a3dde983a48bb808277835910b6f08e Mon Sep 17 00:00:00 2001 From: CristhianF7 Date: Wed, 27 Sep 2023 14:44:16 -0500 Subject: [PATCH 1/2] feat: metaphor loading state --- .../mgmt/components/kubefirst/console.yaml | 2 +- .../mgmt/components/kubefirst/console.yaml | 2 +- metaphor/.env.example | 1 - .../charts/metaphor/templates/deployment.yaml | 2 - metaphor/containers/dashboard/index.tsx | 37 +++++++++++------- metaphor/pages/index.tsx | 10 ++--- metaphor/redux/actions/metaphor.action.ts | 39 +++++++------------ metaphor/redux/api/index.ts | 8 ++-- metaphor/redux/selectors/metaphor.selector.ts | 6 +-- metaphor/redux/slices/metaphor.slice.ts | 28 ++++++++++--- 10 files changed, 73 insertions(+), 62 deletions(-) diff --git a/aws-github/cluster-types/mgmt/components/kubefirst/console.yaml b/aws-github/cluster-types/mgmt/components/kubefirst/console.yaml index 4785fa7c7..96c8a6def 100644 --- a/aws-github/cluster-types/mgmt/components/kubefirst/console.yaml +++ b/aws-github/cluster-types/mgmt/components/kubefirst/console.yaml @@ -9,7 +9,7 @@ spec: project: default source: repoURL: https://charts.kubefirst.com - targetRevision: 2.2.16 + targetRevision: 2.3.0-rc24 chart: kubefirst helm: values: |- diff --git a/aws-gitlab/cluster-types/mgmt/components/kubefirst/console.yaml b/aws-gitlab/cluster-types/mgmt/components/kubefirst/console.yaml index 4785fa7c7..96c8a6def 100644 --- a/aws-gitlab/cluster-types/mgmt/components/kubefirst/console.yaml +++ b/aws-gitlab/cluster-types/mgmt/components/kubefirst/console.yaml @@ -9,7 +9,7 @@ spec: project: default source: repoURL: https://charts.kubefirst.com - targetRevision: 2.2.16 + targetRevision: 2.3.0-rc24 chart: kubefirst helm: values: |- diff --git a/metaphor/.env.example b/metaphor/.env.example index b9a314cc0..c912a1a4e 100644 --- a/metaphor/.env.example +++ b/metaphor/.env.example @@ -1,4 +1,3 @@ -METAPHOR_API_URL=http://localhost:3000/api CONSOLE_URL=https://kubefirst.kubefirst.dev CHART_VERSION=0.3.0 DOCKER_TAG=62a9ad15e0036a02b7708ebbd618c8a43563c3d9 diff --git a/metaphor/charts/metaphor/templates/deployment.yaml b/metaphor/charts/metaphor/templates/deployment.yaml index f704a1620..75ab57790 100644 --- a/metaphor/charts/metaphor/templates/deployment.yaml +++ b/metaphor/charts/metaphor/templates/deployment.yaml @@ -33,8 +33,6 @@ spec: - secretRef: name: {{ template "metaphor.fullname" . }} env: - - name: METAPHOR_API_URL - value: "{{ .Values.metaphor.host }}" - name: CONSOLE_URL value: "{{ .Values.metaphor.console }}" - name: CHART_VERSION diff --git a/metaphor/containers/dashboard/index.tsx b/metaphor/containers/dashboard/index.tsx index a3f55972a..5a21ba913 100644 --- a/metaphor/containers/dashboard/index.tsx +++ b/metaphor/containers/dashboard/index.tsx @@ -5,8 +5,8 @@ import Card from '../../components/card'; import { selectAppData, selectIsApiAvailable, + selectIsLoading, selectKubernetesData, - selectMetaphorApiUrl, selectVaultData, } from '../../redux/selectors/metaphor.selector'; import { useAppDispatch, useAppSelector } from '../../redux/store'; @@ -19,6 +19,7 @@ import { import Tag from '../../components/tag'; import { Cards, Container, Header, LearnMoreLink, Title } from './dashboard.styled'; +import { Box, CircularProgress } from '@mui/material'; const DOCS_LINK = 'https://docs.kubefirst.io'; const RUNNING_TAG_PROPS = { @@ -39,24 +40,22 @@ const INFO_TAG_PROPS = { const Dashboard: FunctionComponent = () => { const dispatch = useAppDispatch(); - const metaphorApiUrl = useAppSelector(selectMetaphorApiUrl()); const isApiAvailable = useAppSelector(selectIsApiAvailable()); const appData = useAppSelector(selectAppData()); const kubernetesData = useAppSelector(selectKubernetesData()); const vaultData = useAppSelector(selectVaultData()); + const isLoading = useAppSelector(selectIsLoading()); useEffect(() => { const getApiData = async () => { - await dispatch(getHealthz(metaphorApiUrl)).unwrap(); - await dispatch(getInfoApp(metaphorApiUrl)).unwrap(); - await dispatch(getKubernetesData(metaphorApiUrl)).unwrap(); - await dispatch(getVaultData(metaphorApiUrl)).unwrap(); + await dispatch(getHealthz()).unwrap(); + await dispatch(getInfoApp()).unwrap(); + await dispatch(getKubernetesData()).unwrap(); + await dispatch(getVaultData()).unwrap(); }; - if (metaphorApiUrl) { - getApiData(); - } - }, [dispatch, metaphorApiUrl]); + getApiData(); + }, [dispatch]); const cardValues = useMemo( () => [ @@ -152,11 +151,19 @@ const Dashboard: FunctionComponent = () => { - - {cardValues.map((card) => ( - - ))} - + {isLoading ? ( + + + + ) : ( + + <> + {cardValues.map((card) => ( + + ))} + + + )} ); }; diff --git a/metaphor/pages/index.tsx b/metaphor/pages/index.tsx index 6176a7db4..3079eae62 100644 --- a/metaphor/pages/index.tsx +++ b/metaphor/pages/index.tsx @@ -6,26 +6,24 @@ import Dashboard from '../containers/dashboard'; interface HomeProps { consoleUrl: string; - metaphorApiUrl: string; } -const Home: FunctionComponent = ({ consoleUrl, metaphorApiUrl }) => { +const Home: FunctionComponent = ({ consoleUrl }) => { const dispatch = useAppDispatch(); useEffect(() => { - dispatch(setConfigValues({ consoleUrl, metaphorApiUrl })); - }, [consoleUrl, dispatch, metaphorApiUrl]); + dispatch(setConfigValues({ consoleUrl })); + }, [consoleUrl, dispatch]); return ; }; export async function getServerSideProps() { - const { METAPHOR_API_URL = '', CONSOLE_URL = '' } = process.env; + const { CONSOLE_URL = '' } = process.env; return { props: { consoleUrl: CONSOLE_URL, - metaphorApiUrl: METAPHOR_API_URL, }, }; } diff --git a/metaphor/redux/actions/metaphor.action.ts b/metaphor/redux/actions/metaphor.action.ts index a07149749..d3505ead0 100644 --- a/metaphor/redux/actions/metaphor.action.ts +++ b/metaphor/redux/actions/metaphor.action.ts @@ -5,34 +5,25 @@ import { endpoints } from '../api/index'; const { healthz, getInfoApp: getInfoApi, getKubernetesInfo, getVaultInfo } = endpoints; -export const getHealthz = createAsyncThunk( - 'metaphor/healthz', - async (param, { dispatch }) => { - const response = await healthz.initiate(param); - return dispatch(response).unwrap(); - }, -); +export const getHealthz = createAsyncThunk('metaphor/healthz', async (_, { dispatch }) => { + const response = await healthz.initiate({}); + return dispatch(response).unwrap(); +}); -export const getInfoApp = createAsyncThunk( - 'metaphor/app', - async (param, { dispatch }) => { - const response = await getInfoApi.initiate(param); - return dispatch(response).unwrap(); - }, -); +export const getInfoApp = createAsyncThunk('metaphor/app', async (_, { dispatch }) => { + const response = await getInfoApi.initiate({}); + return dispatch(response).unwrap(); +}); -export const getKubernetesData = createAsyncThunk( +export const getKubernetesData = createAsyncThunk( 'metaphor/kubernetes', - async (param, { dispatch }) => { - const response = await getKubernetesInfo.initiate(param); + async (_, { dispatch }) => { + const response = await getKubernetesInfo.initiate({}); return dispatch(response).unwrap(); }, ); -export const getVaultData = createAsyncThunk( - 'metaphor/vault', - async (param, { dispatch }) => { - const response = await getVaultInfo.initiate(param); - return dispatch(response).unwrap(); - }, -); +export const getVaultData = createAsyncThunk('metaphor/vault', async (_, { dispatch }) => { + const response = await getVaultInfo.initiate({}); + return dispatch(response).unwrap(); +}); diff --git a/metaphor/redux/api/index.ts b/metaphor/redux/api/index.ts index 1a00795f4..8c8eed168 100644 --- a/metaphor/redux/api/index.ts +++ b/metaphor/redux/api/index.ts @@ -14,16 +14,16 @@ export const metaphorApi = createApi({ tagTypes: [], endpoints: (builder) => ({ healthz: builder.query({ - query: (baseuRL: string) => `${baseuRL}/healthz`, + query: () => `api/healthz`, }), getInfoApp: builder.query({ - query: (baseuRL: string) => `${baseuRL}/app`, + query: () => `api/app`, }), getKubernetesInfo: builder.query({ - query: (baseuRL: string) => `${baseuRL}/kubernetes`, + query: () => `api/kubernetes`, }), getVaultInfo: builder.query({ - query: (baseuRL: string) => `${baseuRL}/vault`, + query: () => `api/vault`, }), }), }); diff --git a/metaphor/redux/selectors/metaphor.selector.ts b/metaphor/redux/selectors/metaphor.selector.ts index 104926db8..0185838cd 100644 --- a/metaphor/redux/selectors/metaphor.selector.ts +++ b/metaphor/redux/selectors/metaphor.selector.ts @@ -17,8 +17,8 @@ export const selectKubernetesData = () => export const selectVaultData = () => createSelector(metaphorSelector, ({ vaultSecrets }) => vaultSecrets || ({} as Config)); -export const selectMetaphorApiUrl = () => - createSelector(metaphorSelector, ({ metaphorApiUrl }) => metaphorApiUrl || ''); - export const selectConsoleUrl = () => createSelector(metaphorSelector, ({ consoleUrl }) => consoleUrl || ''); + +export const selectIsLoading = () => + createSelector(metaphorSelector, ({ isLoading }) => !!isLoading); diff --git a/metaphor/redux/slices/metaphor.slice.ts b/metaphor/redux/slices/metaphor.slice.ts index ec109561d..7f5df0bb9 100644 --- a/metaphor/redux/slices/metaphor.slice.ts +++ b/metaphor/redux/slices/metaphor.slice.ts @@ -21,21 +21,20 @@ export interface Config { export interface MetaphorState { consoleUrl?: string; - metaphorApiUrl?: string; metaphor?: Metaphor; metaphorStatus: boolean; kubernetesScrets?: Config; vaultSecrets?: Config; + isLoading: boolean; } export const initialState: MetaphorState = { consoleUrl: undefined, - metaphorApiUrl: undefined, - metaphor: undefined, metaphorStatus: false, kubernetesScrets: undefined, vaultSecrets: undefined, + isLoading: true, }; const metaphorSlice = createSlice({ @@ -43,26 +42,45 @@ const metaphorSlice = createSlice({ initialState, reducers: { setConfigValues(state, payload) { - const { consoleUrl, metaphorApiUrl } = payload.payload; + const { consoleUrl } = payload.payload; state.consoleUrl = consoleUrl; - state.metaphorApiUrl = metaphorApiUrl; }, }, extraReducers(builder) { + builder.addCase(getHealthz.pending, (state) => { + state.isLoading = true; + }); builder.addCase(getHealthz.rejected, (state) => { state.metaphorStatus = false; + state.isLoading = false; }); builder.addCase(getHealthz.fulfilled, (state) => { state.metaphorStatus = true; + state.isLoading = false; + }); + builder.addCase(getInfoApp.pending, (state) => { + state.isLoading = true; + }); + builder.addCase(getInfoApp.rejected, (state) => { + state.isLoading = false; }); builder.addCase(getInfoApp.fulfilled, (state, action) => { state.metaphor = action.payload; + state.isLoading = false; + }); + builder.addCase(getKubernetesData.pending, (state) => { + state.isLoading = true; + }); + builder.addCase(getKubernetesData.rejected, (state) => { + state.isLoading = false; }); builder.addCase(getKubernetesData.fulfilled, (state, action) => { state.kubernetesScrets = action.payload; + state.isLoading = false; }); builder.addCase(getVaultData.fulfilled, (state, action) => { state.vaultSecrets = action.payload; + state.isLoading = false; }); }, }); From 21c42fc31e7a157ce8bf79652914cab08699b3e5 Mon Sep 17 00:00:00 2001 From: CristhianF7 Date: Fri, 20 Oct 2023 10:51:31 -0500 Subject: [PATCH 2/2] fix: remove v prefix --- metaphor/components/navigation/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/metaphor/components/navigation/index.tsx b/metaphor/components/navigation/index.tsx index 36532fdf6..62b473c99 100644 --- a/metaphor/components/navigation/index.tsx +++ b/metaphor/components/navigation/index.tsx @@ -57,7 +57,7 @@ const Navigation: FunctionComponent = ({ consoleUrl, collapsibl color="#ABADC6" sx={{ position: 'absolute', left: 65, bottom: -10 }} > - {`V`} + {``} {domLoaded && (