fix(kiali): show username when auth is anonymous (#1139)

* fix(kiali): show username when auth is anonymous

* Fix render first time metrics

* Align toolbar

* Align kiali head

Author: aljesusg

plugins/kiali/src/pages/Kiali/Header/Header.tsx

@@ -42,7 +42,7 @@ export const KialiHeader = (props: { title: string }) => {
 
   const title = props.title.charAt(0).toUpperCase() + props.title.slice(1);
   return (
-    <>
+    <div style={{ marginLeft: '20px' }}>
       <Select
         label="Namespaces Selected"
         placeholder="Select namespaces"
@@ -65,8 +65,9 @@ export const KialiHeader = (props: { title: string }) => {
 
       <ContentHeader title={title}>
         <Grid container spacing={1}>
+          <Grid item xs={homeCluster ? 2 : 3} />
           {homeCluster && (
-            <Grid item>
+            <Grid item xs={3}>
               <Tooltip
                 title={<div>Kiali home cluster: {homeCluster?.name}</div>}
               >
@@ -78,12 +79,12 @@ export const KialiHeader = (props: { title: string }) => {
               </Tooltip>
             </Grid>
           )}
-          <Grid item>
-            <Button onClick={handleClick}>
+          <Grid item xs={1}>
+            <Button onClick={handleClick} style={{ marginTop: '5px' }}>
               <QuestionCircleIcon />
             </Button>
           </Grid>
-          <Grid item>
+          <Grid item xs={1}>
             <MessageCenter />
           </Grid>
           <Grid item>
@@ -94,8 +95,8 @@ export const KialiHeader = (props: { title: string }) => {
               <MenuItem onClick={openAbout}>About</MenuItem>
             </Menu>
           </Grid>
-          <Grid item>
-            {kialiState.authentication.session && (
+          {kialiState.authentication.session && (
+            <Grid item>
               <div
                 style={{
                   display: 'flex',
@@ -105,11 +106,11 @@ export const KialiHeader = (props: { title: string }) => {
               >
                 <span style={{ margin: '10px' }}>
                   <b>User : </b>
-                  {kialiState.authentication.session.username}
+                  {kialiState.authentication.session.username || 'anonymous'}
                 </span>
               </div>
-            )}
-          </Grid>
+            </Grid>
+          )}
         </Grid>
       </ContentHeader>
       <AboutUIModal
@@ -124,6 +125,6 @@ export const KialiHeader = (props: { title: string }) => {
         showDebug={showDebug}
         setShowDebug={setShowDebug}
       />
-    </>
+    </div>
   );
 };

plugins/kiali/src/pages/Overview/OverviewPage.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useAsyncFn, useDebounce } from 'react-use';
 
 import { Content, Page } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
@@ -78,7 +77,7 @@ export const OverviewPage = () => {
     return nss;
   };
 
-  const fetchHealthChunk = (chunk: NamespaceInfo[]): Promise<void> => {
+  const fetchHealthChunk = async (chunk: NamespaceInfo[]): Promise<void> => {
     const apiFunc = switchType(
       overviewType,
       kialiClient.getNamespaceAppHealth,
@@ -87,7 +86,7 @@ export const OverviewPage = () => {
     );
 
     return Promise.all(
-      chunk.map(nsInfo => {
+      chunk.map(async nsInfo => {
         const healthPromise: Promise<
           NamespaceAppHealth | NamespaceWorkloadHealth | NamespaceServiceHealth
         > = apiFunc(nsInfo.name, duration, nsInfo.cluster);
@@ -161,9 +160,9 @@ export const OverviewPage = () => {
     });
   };
 
-  const fetchTLSChunk = (chunk: NamespaceInfo[]): Promise<void> => {
+  const fetchTLSChunk = async (chunk: NamespaceInfo[]): Promise<void> => {
     return Promise.all(
-      chunk.map(nsInfo => {
+      chunk.map(async nsInfo => {
         return kialiClient
           .getNamespaceTls(nsInfo.name, nsInfo.cluster)
           .then(rs => ({ status: rs, nsInfo: nsInfo }));
@@ -226,7 +225,7 @@ export const OverviewPage = () => {
       });
   };
 
-  const fetchCanariesStatus = async () =>
+  const fetchCanariesStatus = () =>
     kialiClient
       .getCanaryUpgradeStatus()
       .then(response => {
@@ -260,7 +259,7 @@ export const OverviewPage = () => {
       });
   };
 
-  const fetchValidationResultForCluster = (
+  const fetchValidationResultForCluster = async (
     nss: NamespaceInfo[],
     cluster: string,
   ) => {
@@ -377,7 +376,7 @@ export const OverviewPage = () => {
   };
 
   const load = async () => {
-    kialiClient.getNamespaces().then(namespacesResponse => {
+    await kialiClient.getNamespaces().then(namespacesResponse => {
       const allNamespaces: NamespaceInfo[] = namespacesResponse.map(ns => {
         const previous = namespaces.find(prev => prev.name === ns.name);
         return {
@@ -405,31 +404,20 @@ export const OverviewPage = () => {
       fetchTLS(sortNs, isAscending, sortField);
       fetchValidations(sortNs, isAscending, sortField);
       fetchMetrics(sortNs);
-
       fetchOutboundTrafficPolicyMode();
       fetchCanariesStatus();
       fetchIstiodResourceThresholds();
-
+      promises.waitAll();
       setNamespaces(sortNs);
     });
   };
 
-  const [{ loading }, refresh] = useAsyncFn(
-    async () => {
-      // Check if the config is loaded
-      await load();
-    },
-    [],
-    { loading: true },
-  );
-  useDebounce(refresh, 10);
-
   React.useEffect(() => {
     load();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [duration, overviewType, directionType]);
 
-  if (loading) {
+  if (namespaces.length === 0) {
     return <CircularProgress />;
   }
 

plugins/kiali/src/pages/Overview/OverviewToolbar.tsx

@@ -100,34 +100,34 @@ export const OverviewToolbar = (props: OverviewToolbarProps) => {
   };
 
   return (
-    <Grid container spacing={3} direction="row">
-      <Grid item xs={3}>
+    <Grid container spacing={1} direction="row">
+      <Grid item xs={1}>
         <Select
           onChange={e => updateOverviewType(e as String)}
           label="Health for"
           items={healthTypeItems}
           selected={props.overviewType}
         />
       </Grid>
-      <Grid item xs={3}>
+      <Grid item xs={1}>
         <Select
           onChange={e => updateDirectionType(e as String)}
           label="Traffic"
           items={directionTypeItems}
           selected={props.directionType}
         />
       </Grid>
-      <Grid item xs={3}>
+      <Grid item xs={1}>
         <Select
           onChange={e => updateDurationType(e as number)}
           label="Metrics from"
           items={getDurationType()}
           selected={props.duration.toString()}
         />
       </Grid>
-      <Grid item xs={2} />
+      <Grid item xs={8} />
       <Grid item xs={1}>
-        <Tooltip title="Refresh" style={{ marginTop: '20px' }}>
+        <Tooltip title="Refresh" style={{ marginTop: '35px', float: 'right' }}>
           <IconButton
             color="primary"
             aria-label="upload picture"