feat: metaphor loading state

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

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

metaphor/components/navigation/index.tsx

@@ -57,7 +57,7 @@ const Navigation: FunctionComponent<NavigationProps> = ({ consoleUrl, collapsibl
             color="#ABADC6"
             sx={{ position: 'absolute', left: 65, bottom: -10 }}
           >
-            {`V<KUBEFIRST_VERSION>`}
+            {`<KUBEFIRST_VERSION>`}
           </Typography>
         </Title>
         {domLoaded && (

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 = () => {
           </LearnMoreLink>
         </Typography>
       </Header>
-      <Cards>
-        {cardValues.map((card) => (
-          <Card key={card.title} {...card} />
-        ))}
-      </Cards>
+      {isLoading ? (
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <CircularProgress />
+        </Box>
+      ) : (
+        <Cards>
+          <>
+            {cardValues.map((card) => (
+              <Card key={card.title} {...card} />
+            ))}
+          </>
+        </Cards>
+      )}
     </Container>
   );
 };

metaphor/pages/index.tsx

@@ -6,26 +6,24 @@ import Dashboard from '../containers/dashboard';
 
 interface HomeProps {
   consoleUrl: string;
-  metaphorApiUrl: string;
 }
 
-const Home: FunctionComponent<HomeProps> = ({ consoleUrl, metaphorApiUrl }) => {
+const Home: FunctionComponent<HomeProps> = ({ consoleUrl }) => {
   const dispatch = useAppDispatch();
 
   useEffect(() => {
-    dispatch(setConfigValues({ consoleUrl, metaphorApiUrl }));
-  }, [consoleUrl, dispatch, metaphorApiUrl]);
+    dispatch(setConfigValues({ consoleUrl }));
+  }, [consoleUrl, dispatch]);
 
   return <Dashboard />;
 };
 
 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,
     },
   };
 }

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<any, string>(
-  'metaphor/healthz',
-  async (param, { dispatch }) => {
-    const response = await healthz.initiate(param);
-    return dispatch(response).unwrap();
-  },
-);
+export const getHealthz = createAsyncThunk<any>('metaphor/healthz', async (_, { dispatch }) => {
+  const response = await healthz.initiate({});
+  return dispatch(response).unwrap();
+});
 
-export const getInfoApp = createAsyncThunk<any, string>(
-  'metaphor/app',
-  async (param, { dispatch }) => {
-    const response = await getInfoApi.initiate(param);
-    return dispatch(response).unwrap();
-  },
-);
+export const getInfoApp = createAsyncThunk<any>('metaphor/app', async (_, { dispatch }) => {
+  const response = await getInfoApi.initiate({});
+  return dispatch(response).unwrap();
+});
 
-export const getKubernetesData = createAsyncThunk<any, string>(
+export const getKubernetesData = createAsyncThunk<any>(
   '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<any, string>(
-  'metaphor/vault',
-  async (param, { dispatch }) => {
-    const response = await getVaultInfo.initiate(param);
-    return dispatch(response).unwrap();
-  },
-);
+export const getVaultData = createAsyncThunk<any>('metaphor/vault', async (_, { dispatch }) => {
+  const response = await getVaultInfo.initiate({});
+  return dispatch(response).unwrap();
+});

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`,
     }),
   }),
 });

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);

metaphor/redux/slices/metaphor.slice.ts

@@ -21,48 +21,66 @@ 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({
   name: 'metaphor',
   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;
     });
   },
 });