Change Loading Logic for Metrics Page (#3166)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

portal-ui/src/screens/Console/Dashboard/Dashboard.tsx

@@ -15,7 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { Grid, ProgressBar } from "mds";
 import { useSelector } from "react-redux";
 import { AppState, useAppDispatch } from "../../../store";
 import { getUsageAsync } from "./dashboardThunks";
@@ -27,7 +26,7 @@ import HelpMenu from "../HelpMenu";
 
 const Dashboard = () => {
   const dispatch = useAppDispatch();
-  const [loading, setLoading] = useState<boolean>(true);
+  const [iniLoad, setIniLoad] = useState<boolean>(false);
 
   const usage = useSelector((state: AppState) => state.dashboard.usage);
   const features = useSelector(selFeatures);
@@ -40,31 +39,22 @@ const Dashboard = () => {
   }
 
   useEffect(() => {
-    if (loading) {
+    if (!iniLoad) {
-      setLoading(false);
+      setIniLoad(true);
       dispatch(getUsageAsync());
     }
-  }, [loading, dispatch]);
+  }, [iniLoad, dispatch]);
 
   useEffect(() => {
     dispatch(setHelpName("metrics"));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dispatch]);
-  }, []);
 
   return (
     <Fragment>
       {!hideMenu && (
         <PageHeaderWrapper label="Metrics" actions={<HelpMenu />} />
       )}
-      {loading ? (
+      <PrDashboard usage={usage} />
-        <Grid container>
-          <Grid item xs={12}>
-            <ProgressBar />
-          </Grid>
-        </Grid>
-      ) : (
-        <PrDashboard usage={usage} />
-      )}
     </Fragment>
   );
 };

portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx

@@ -15,7 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useState } from "react";
-import { useSelector } from "react-redux";
 import {
   Box,
   Button,
@@ -31,7 +30,7 @@ import {
 import { IDashboardPanel } from "./types";
 import { panelsConfiguration } from "./utils";
 import { componentToUse } from "./widgetUtils";
-import { AppState, useAppDispatch } from "../../../../store";
+import { useAppDispatch, useAppSelector } from "../../../../store";
 import {
   DLayoutColumnProps,
   DLayoutRowProps,
@@ -57,16 +56,12 @@ interface IPrDashboard {
 
 const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => {
   const dispatch = useAppDispatch();
-  const loadingUsage = useSelector(
+  const status = useAppSelector((state) => state.dashboard.status);
-    (state: AppState) => state.dashboard.loadingUsage,
+  const zoomOpen = useAppSelector((state) => state.dashboard.zoom.openZoom);
+  const zoomWidget = useAppSelector(
+    (state) => state.dashboard.zoom.widgetRender,
   );
-  const zoomOpen = useSelector(
+  const features = useAppSelector(selFeatures);
-    (state: AppState) => state.dashboard.zoom.openZoom,
-  );
-  const zoomWidget = useSelector(
-    (state: AppState) => state.dashboard.zoom.widgetRender,
-  );
-  const features = useSelector(selFeatures);
   const obOnly = !!features?.includes("object-browser-only");
   let hideMenu = false;
   if (features?.includes("hide-menu")) {
@@ -78,9 +73,7 @@ const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => {
   const [timeStart, setTimeStart] = useState<any>(null);
   const [timeEnd, setTimeEnd] = useState<any>(null);
   const panelInformation = panelsConfiguration;
-  const [curTab, setCurTab] = useState<string>(
+  const [curTab, setCurTab] = useState<string>("info");
-    usage?.advancedMetricsStatus === "not configured" ? "info" : "usage",
-  );
 
   const getPanelDetails = (id: number) => {
     return panelInformation.find((panel) => panel.id === id);
@@ -186,7 +179,7 @@ const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => {
                   onClick={() => {
                     dispatch(getUsageAsync());
                   }}
-                  disabled={loadingUsage}
+                  disabled={status === "loading"}
                   icon={<SyncIcon />}
                   label={"Sync"}
                 />
@@ -210,8 +203,8 @@ const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => {
     tabConfig: { label: "Info", id: "info", disabled: false },
     content: (
       <Fragment>
-        {(!usage || loadingUsage) && <ProgressBar />}
+        {(!usage || status === "loading") && <ProgressBar />}
-        {usage && !loadingUsage && (
+        {usage && status === "idle" && (
           <Fragment>
             {searchBox}
             <BasicDashboard usage={usage} />
@@ -321,13 +314,7 @@ const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => {
     },
   ];
 
-  let tabsOptions: TabItemProps[];
+  let tabsOptions: TabItemProps[] = [infoTab, ...prometheusTabs];
-
-  if (!prometheusOptionsDisabled) {
-    tabsOptions = [...prometheusTabs, infoTab];
-  } else {
-    tabsOptions = [infoTab, ...prometheusTabs];
-  }
 
   return (
     <PageLayout

portal-ui/src/screens/Console/Dashboard/dashboardSlice.ts

@@ -23,17 +23,17 @@ import { AdminInfoResponse } from "api/consoleApi";
 export interface DashboardState {
   zoom: zoomState;
   usage: AdminInfoResponse | null;
-  loadingUsage: boolean;
+  status: "idle" | "loading" | "failed";
   widgetLoadVersion: number;
 }
 
 const initialState: DashboardState = {
+  status: "idle",
   zoom: {
     openZoom: false,
     widgetRender: null,
   },
   usage: null,
-  loadingUsage: true,
   widgetLoadVersion: 0,
 };
 export const dashboardSlice = createSlice({
@@ -55,13 +55,13 @@ export const dashboardSlice = createSlice({
   extraReducers: (builder) => {
     builder
       .addCase(getUsageAsync.pending, (state) => {
-        state.loadingUsage = true;
+        state.status = "loading";
       })
       .addCase(getUsageAsync.rejected, (state) => {
-        state.loadingUsage = false;
+        state.status = "failed";
       })
       .addCase(getUsageAsync.fulfilled, (state, action) => {
-        state.loadingUsage = false;
+        state.status = "idle";
         state.usage = action.payload;
       });
   },

portal-ui/src/store.ts

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import { useDispatch } from "react-redux";
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import { combineReducers, configureStore } from "@reduxjs/toolkit";
 
 import systemReducer from "./systemSlice";
@@ -69,6 +69,8 @@ if (process.env.NODE_ENV !== "production" && module.hot) {
 export type AppState = ReturnType<typeof rootReducer>;
 
 export type AppDispatch = typeof store.dispatch;
+export type RootState = ReturnType<typeof store.getState>;
 export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 
 export default store;