fix(kiali): update load for overview page (#1491)

* Update load for overview * Add loading bar for lists * lint * Update view for tables in ENTITY * remove config from entity view card * remove config from entity view card
janus-idp · Apr 25, 2024 · 8de16e2 · 8de16e2
1 parent 328d23a
commit 8de16e2
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 30 deletions.
diff --git a/plugins/kiali/src/components/VirtualList/VirtualList.tsx b/plugins/kiali/src/components/VirtualList/VirtualList.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 import {
+  Box,
+  CircularProgress,
   Paper,
   SortDirection,
   Table,
@@ -16,6 +18,7 @@ import { kialiStyle } from '../../styles/StyleUtils';
 import { Namespace } from '../../types/Namespace';
 import { NamespaceInfo } from '../../types/NamespaceInfo';
 import { SortField } from '../../types/SortFilters';
+import { ENTITY } from '../../types/types';
 import { StatefulFiltersProps } from '../Filters/StatefulFilters';
 import { config, RenderResource, Resource, ResourceType } from './Config';
 import { VirtualItem } from './VirtualItem';
@@ -44,6 +47,7 @@ type VirtualListProps<R> = {
   tableToolbar?: React.ReactNode;
   type: string;
   view?: string;
+  loading: boolean;
 };
 
 export const VirtualList = <R extends RenderResource>(
@@ -71,6 +75,16 @@ export const VirtualList = <R extends RenderResource>(
   const typeDisplay =
     listProps.type === 'istio' ? 'Istio config' : listProps.type;
 
+  const tableEntityHeaderStyle: any = {
+    minWidth: '100px',
+    fontWeight: '700',
+    color: 'grey',
+    borderTop: '1px solid #d5d5d5',
+    borderBottom: '1px solid #d5d5d5',
+    whiteSpace: 'nowrap',
+    padding: '15px',
+  };
+
   const tableHeaderStyle: any = {
     minWidth: '120px',
     fontWeight: '700',
@@ -141,7 +155,11 @@ export const VirtualList = <R extends RenderResource>(
                   <TableCell
                     key={`column_${index}`}
                     align="center"
-                    style={tableHeaderStyle}
+                    style={
+                      listProps.view === ENTITY
+                        ? tableEntityHeaderStyle
+                        : tableHeaderStyle
+                    }
                     sortDirection={
                       column.sortable && orderBy === column.title.toLowerCase()
                         ? order
@@ -158,14 +176,28 @@ export const VirtualList = <R extends RenderResource>(
                         handleRequestSort(e, column.title.toLowerCase())
                       }
                     >
-                      {column.title.toUpperCase()}
+                      {listProps.view === ENTITY &&
+                      column.title === 'Configuration'
+                        ? 'CONFIG'
+                        : column.title.toUpperCase()}
                     </TableSortLabel>
                   </TableCell>
                 ))}
               </TableRow>
             </TableHead>
             <TableBody>
-              {listProps.rows.length > 0 ? (
+              {/* eslint-disable-next-line no-nested-ternary */}
+              {listProps.loading === true ? (
+                <Box
+                  display="flex"
+                  justifyContent="center"
+                  alignItems="center"
+                  minHeight="10vh"
+                  marginLeft="60vh"
+                >
+                  <CircularProgress />
+                </Box>
+              ) : listProps.rows.length > 0 ? (
                 stableSort(rows, getComparator()).map(
                   (row: RenderResource, index: number) => (
                     <VirtualItem

diff --git a/plugins/kiali/src/pages/AppList/AppListPage.tsx b/plugins/kiali/src/pages/AppList/AppListPage.tsx
@@ -31,6 +31,7 @@ export const AppListPage = (props: { view?: string }): React.JSX.Element => {
   const activeNs = kialiState.namespaces.activeNamespaces.map(ns => ns.name);
   const prevActiveNs = useRef(activeNs);
   const prevDuration = useRef(duration);
+  const [loadingD, setLoading] = React.useState<boolean>(true);
 
   const hiddenColumns = isMultiCluster ? [] : ['cluster'];
   if (props.view === ENTITY) {
@@ -96,6 +97,9 @@ export const AppListPage = (props: { view?: string }): React.JSX.Element => {
       setNamespaces(namespaceInfos);
       fetchApps(namespaceInfos, duration);
     });
+    setTimeout(() => {
+      setLoading(false);
+    }, 400);
   };
 
   const [_, refresh] = useAsyncFn(
@@ -112,6 +116,7 @@ export const AppListPage = (props: { view?: string }): React.JSX.Element => {
       duration !== prevDuration.current ||
       !nsEqual(activeNs, prevActiveNs.current)
     ) {
+      setLoading(true);
       getNS();
       prevDuration.current = duration;
       prevActiveNs.current = activeNs;
@@ -134,6 +139,7 @@ export const AppListPage = (props: { view?: string }): React.JSX.Element => {
           type="applications"
           hiddenColumns={hiddenColumns}
           view={props.view}
+          loading={loadingD}
         />
       </Content>
     </div>

diff --git a/plugins/kiali/src/pages/IstioConfigList/IstioConfigListPage.tsx b/plugins/kiali/src/pages/IstioConfigList/IstioConfigListPage.tsx
@@ -29,6 +29,7 @@ export const IstioConfigListPage = (props: {
   );
   const activeNs = kialiState.namespaces.activeNamespaces.map(ns => ns.name);
   const prevActiveNs = React.useRef(activeNs);
+  const [loadingD, setLoading] = React.useState<boolean>(true);
 
   const fetchIstioConfigs = async (nss: NamespaceInfo[]): Promise<void> => {
     return kialiClient
@@ -62,6 +63,9 @@ export const IstioConfigListPage = (props: {
       setNamespaces(nsl);
       fetchIstioConfigs(nsl);
     });
+    setTimeout(() => {
+      setLoading(false);
+    }, 400);
   };
 
   const [{ loading }, refresh] = useAsyncFn(
@@ -76,6 +80,7 @@ export const IstioConfigListPage = (props: {
 
   React.useEffect(() => {
     if (!nsEqual(activeNs, prevActiveNs.current)) {
+      setLoading(true);
       load();
       prevActiveNs.current = activeNs;
     }
@@ -100,6 +105,7 @@ export const IstioConfigListPage = (props: {
           type="istio"
           hiddenColumns={hiddenColumns}
           view={props.view}
+          loading={loadingD}
         />
       </Content>
     </div>

diff --git a/plugins/kiali/src/pages/Overview/ListView/ListViewPage.tsx b/plugins/kiali/src/pages/Overview/ListView/ListViewPage.tsx
@@ -4,7 +4,6 @@ import { CardTab, TabbedCard } from '@backstage/core-components';
 
 import { ENTITY } from '../../../types/types';
 import { AppListPage } from '../../AppList/AppListPage';
-import { IstioConfigListPage } from '../../IstioConfigList/IstioConfigListPage';
 import { ServiceListPage } from '../../ServiceList/ServiceListPage';
 import { WorkloadListPage } from '../../WorkloadList/WorkloadListPage';
 
@@ -36,11 +35,6 @@ export const ListViewPage = () => {
             <AppListPage view={ENTITY} />
           </div>
         </CardTab>
-        <CardTab label="Istio Config">
-          <div style={tabStyle}>
-            <IstioConfigListPage view={ENTITY} />
-          </div>
-        </CardTab>
       </TabbedCard>
     </div>
   );

diff --git a/plugins/kiali/src/pages/Overview/OverviewPage.tsx b/plugins/kiali/src/pages/Overview/OverviewPage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 
 import { CardTab, Content, TabbedCard } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
@@ -8,6 +8,7 @@ import _ from 'lodash';
 
 import * as FilterHelper from '../../components/FilterList/FilterHelper';
 import { isMultiCluster, serverConfig } from '../../config';
+import { nsEqual } from '../../helpers/namespaces';
 import { getErrorString, kialiApiRef } from '../../services/Api';
 import { computePrometheusRateParams } from '../../services/Prometheus';
 import { KialiAppState, KialiContext } from '../../store';
@@ -69,6 +70,10 @@ export const getNamespaces = (
 export const OverviewPage = (props: { entity?: boolean }) => {
   const kialiClient = useApi(kialiApiRef);
   const kialiState = React.useContext(KialiContext) as KialiAppState;
+  const activeNsName = kialiState.namespaces.activeNamespaces.map(
+    ns => ns.name,
+  );
+  const prevActiveNs = useRef(activeNsName);
   const promises = new PromisesRegistry();
   const [namespaces, setNamespaces] = React.useState<NamespaceInfo[]>([]);
   const [outboundTrafficPolicy, setOutboundTrafficPolicy] =
@@ -87,6 +92,7 @@ export const OverviewPage = (props: { entity?: boolean }) => {
   const [directionType, setDirectionType] = React.useState<DirectionType>(
     currentDirectionType(),
   );
+  const [activeNs, setActiveNs] = React.useState<NamespaceInfo[]>([]);
 
   const sortedNamespaces = (nss: NamespaceInfo[]) => {
     nss.sort((a, b) => {
@@ -340,7 +346,7 @@ export const OverviewPage = (props: { entity?: boolean }) => {
     });
   };
 
-  const fetchMetricsChunk = (chunk: NamespaceInfo[]) => {
+  const fetchMetricsChunk = async (chunk: NamespaceInfo[]) => {
     const rateParams = computePrometheusRateParams(duration, 10);
     const options: IstioMetricsOptions = {
       filters: ['request_count', 'request_error_count'],
@@ -379,22 +385,24 @@ export const OverviewPage = (props: { entity?: boolean }) => {
     );
   };
 
-  const fetchMetrics = (nss: NamespaceInfo[]) => {
+  const filterActiveNamespaces = (nss: NamespaceInfo[]) => {
+    return nss.filter(ns => activeNsName.includes(ns.name));
+  };
+
+  const fetchMetrics = async (nss: NamespaceInfo[]) => {
     // debounce async for back-pressure, ten by ten
     _.chunk(nss, 10).forEach(chunk => {
       promises
         .registerChained('metricschunks', undefined, () =>
           fetchMetricsChunk(chunk),
         )
-        .then(() => nss.slice());
+        .then(() => {
+          nss.slice();
+          setActiveNs(filterActiveNamespaces(nss));
+        });
     });
   };
 
-  const filterActiveNamespaces = () => {
-    const activeNs = kialiState.namespaces.activeNamespaces.map(ns => ns.name);
-    return namespaces.filter(ns => activeNs.includes(ns.name));
-  };
-
   const load = async () => {
     await kialiClient.getNamespaces().then(namespacesResponse => {
       const allNamespaces: NamespaceInfo[] = getNamespaces(
@@ -420,6 +428,14 @@ export const OverviewPage = (props: { entity?: boolean }) => {
     });
   };
 
+  React.useEffect(() => {
+    if (!nsEqual(activeNsName, prevActiveNs.current)) {
+      prevActiveNs.current = activeNsName;
+      load();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeNsName]);
+
   React.useEffect(() => {
     load();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -434,7 +450,7 @@ export const OverviewPage = (props: { entity?: boolean }) => {
       {props.entity ? (
         <div style={{ marginBottom: '20px' }}>
           <TabbedCard title="Overview">
-            {filterActiveNamespaces().map(ns => (
+            {activeNs.map(ns => (
               <CardTab label={ns.name} key={`card_ns_${ns.name}`}>
                 <OverviewCard
                   entity
@@ -470,7 +486,7 @@ export const OverviewPage = (props: { entity?: boolean }) => {
               setDuration={setDuration}
             />
             <Grid container spacing={2}>
-              {filterActiveNamespaces().map((ns, i) => (
+              {activeNs.map((ns, i) => (
                 <Grid
                   key={`Card_${ns.name}_${i}`}
                   item

diff --git a/plugins/kiali/src/pages/ServiceList/ServiceListPage.tsx b/plugins/kiali/src/pages/ServiceList/ServiceListPage.tsx
@@ -41,6 +41,7 @@ export const ServiceListPage = (props: {
   const prevActiveNs = useRef(activeNs);
   const prevDuration = useRef(duration);
   const activeToggles: ActiveTogglesInfo = Toggles.getToggles();
+  const [loadingD, setLoading] = React.useState<boolean>(true);
 
   const hiddenColumns = isMultiCluster ? [] : ['cluster'];
   if (props.view === ENTITY) {
@@ -162,30 +163,34 @@ export const ServiceListPage = (props: {
       setNamespaces(nsl);
       fetchServices(nsl, duration, activeToggles);
     });
+    setTimeout(() => {
+      setLoading(false);
+    }, 400);
   };
 
-  const [{ loading }, refresh] = useAsyncFn(
-    async () => {
-      // Check if the config is loaded
-      await load();
-    },
-    [],
-    { loading: true },
-  );
-  useDebounce(refresh, 10);
-
   React.useEffect(() => {
     if (
       duration !== prevDuration.current ||
       !nsEqual(activeNs, prevActiveNs.current)
     ) {
+      setLoading(true);
       load();
       prevDuration.current = duration;
       prevActiveNs.current = activeNs;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeNs, duration]);
 
+  const [{ loading }, refresh] = useAsyncFn(
+    async () => {
+      // Check if the config is loaded
+      await load();
+    },
+    [],
+    { loading: true },
+  );
+  useDebounce(refresh, 10);
+
   if (loading) {
     return <CircularProgress />;
   }
@@ -205,6 +210,7 @@ export const ServiceListPage = (props: {
           type="services"
           hiddenColumns={hiddenColumns}
           view={props.view}
+          loading={loadingD}
         />
       </Content>
     </div>

diff --git a/plugins/kiali/src/pages/WorkloadList/WorkloadListPage.tsx b/plugins/kiali/src/pages/WorkloadList/WorkloadListPage.tsx
@@ -32,6 +32,7 @@ export const WorkloadListPage = (props: { view?: string }) => {
   const activeNs = kialiState.namespaces.activeNamespaces.map(ns => ns.name);
   const prevActiveNs = useRef(activeNs);
   const prevDuration = useRef(duration);
+  const [loadingData, setLoadingData] = React.useState<boolean>(true);
 
   const fetchWorkloads = (
     nss: NamespaceInfo[],
@@ -70,6 +71,10 @@ export const WorkloadListPage = (props: { view?: string }) => {
       setNamespaces(nsl);
       fetchWorkloads(nsl, duration);
     });
+    // Add a delay so it doesn't look like a flash
+    setTimeout(() => {
+      setLoadingData(false);
+    }, 400);
   };
 
   const [{ loading }, refresh] = useAsyncFn(
@@ -87,6 +92,7 @@ export const WorkloadListPage = (props: { view?: string }) => {
       duration !== prevDuration.current ||
       !nsEqual(activeNs, prevActiveNs.current)
     ) {
+      setLoadingData(true);
       load();
       prevDuration.current = duration;
       prevActiveNs.current = activeNs;
@@ -133,6 +139,7 @@ export const WorkloadListPage = (props: { view?: string }) => {
           type="workloads"
           hiddenColumns={hiddenColumns}
           view={props.view}
+          loading={loadingData}
         />
       </Content>
     </div>