merged home cluster with component status

kiali · Feb 20, 2025 · 0f5e8bb · 0f5e8bb
1 parent 331709b
commit 0f5e8bb
Show file tree

Hide file tree

Showing 7 changed files with 426 additions and 256 deletions.
diff --git a/frontend/public/locales/zh/translation.json b/frontend/public/locales/zh/translation.json
@@ -71,6 +71,7 @@
   "Close Legend": "Close Legend",
   "Close Replay": "关闭重放",
   "Cluster": "集群",
+  "Cluster Status": "Cluster Status",
   "Clusters": "Clusters",
   "Clusters: {{num}}": "Clusters: {{num}}",
   "Compact view": "紧凑视图",
@@ -216,7 +217,6 @@
   "K8s Reference Grant": "K8s Reference Grant",
   "Kiali Config": "Kiali配置",
   "Kiali home cluster": "Kiali home cluster",
-  "Kiali home cluster: {{name}}": "Kiali主集群: {{name}}",
   "Kiali on GitHub": "Kiali on GitHub",
   "Kiali: {{num}}": "Kiali: {{num}}",
   "kubernetes version: {{version}}": "kubernetes version: {{version}}",

diff --git a/frontend/src/components/IstioStatus/IstioStatus.tsx b/frontend/src/components/IstioStatus/IstioStatus.tsx
@@ -18,12 +18,13 @@ import { KialiDispatch } from 'types/Redux';
 import { NamespaceThunkActions } from '../../actions/NamespaceThunkActions';
 import { connectRefresh } from '../Refresh/connectRefresh';
 import { kialiStyle } from 'styles/StyleUtils';
-import { IconProps, createIcon } from 'config/KialiIcon';
+import { IconProps, createIcon, KialiIcon } from 'config/KialiIcon';
 import { Link } from 'react-router-dom-v5-compat';
 import { useKialiTranslation } from 'utils/I18nUtils';
 import { MASTHEAD } from 'components/Nav/Masthead/Masthead';
 import { isControlPlaneAccessible } from '../../utils/MeshUtils';
-import { serverConfig } from '../../config';
+import { homeCluster, serverConfig } from '../../config';
+import { PFBadge, PFBadges } from '../Pf/PfBadges';
 
 export type ClusterStatusMap = { [cluster: string]: ComponentStatus[] };
 
@@ -75,6 +76,11 @@ const iconStyle = kialiStyle({
   fontSize: '1rem'
 });
 
+const clusterStyle = kialiStyle({
+  display: 'flex',
+  alignItems: 'center'
+});
+
 export const meshLinkStyle = kialiStyle({
   display: 'flex',
   justifyContent: 'center',
@@ -128,12 +134,38 @@ export const IstioStatusComponent: React.FC<Props> = (props: Props) => {
     return (
       <>
         <TextContent style={{ color: PFColors.White }}>
-          <Text component={TextVariants.h4}>{t('Istio Components Status')}</Text>
           {cluster ? (
-            <IstioStatusList status={props.statusMap[cluster] || []} cluster={cluster} />
+            <Text component={TextVariants.h4}>{t('Istio Components Status')}</Text>
+          ) : (
+            <Text component={TextVariants.h4}>{t('Cluster Status')}</Text>
+          )}
+          {cluster ? (
+            // for Overview page
+            <>
+              <div className={clusterStyle}>
+                <PFBadge badge={PFBadges.Cluster} size="sm" />
+                {cluster}
+                <span style={{ marginLeft: '0.25rem' }}>
+                  <KialiIcon.Star />
+                </span>
+              </div>
+              <IstioStatusList status={props.statusMap[cluster] || []} cluster={cluster} />
+            </>
           ) : (
+            // for Masthead
             Object.keys(props.statusMap).map(cl => (
-              <IstioStatusList key={cl} status={props.statusMap[cl] || []} cluster={cl} />
+              <>
+                <div className={clusterStyle}>
+                  <PFBadge badge={PFBadges.Cluster} size="sm" />
+                  {cl}
+                  {cl === homeCluster?.name && (
+                    <span style={{ marginLeft: '0.25rem' }}>
+                      <KialiIcon.Star />
+                    </span>
+                  )}
+                </div>
+                <IstioStatusList key={cl} status={props.statusMap[cl] || []} cluster={cl} />
+              </>
             ))
           )}
           {!props.location?.endsWith('/mesh') && isControlPlaneAccessible() && (
@@ -179,6 +211,8 @@ export const IstioStatusComponent: React.FC<Props> = (props: Props) => {
     }, true);
   };
 
+  const tooltipPosition = props.location === MASTHEAD ? TooltipPosition.bottom : TooltipPosition.top;
+
   if (!healthyComponents()) {
     const icons = props.icons ? { ...defaultIcons, ...props.icons } : defaultIcons;
     const iconColor = tooltipColor();
@@ -204,13 +238,21 @@ export const IstioStatusComponent: React.FC<Props> = (props: Props) => {
       dataTest: dataTest
     };
 
-    const tooltipPosition = props.location === MASTHEAD ? TooltipPosition.bottom : TooltipPosition.top;
-
     return (
       <Tooltip position={tooltipPosition} enableFlip={true} content={tooltipContent()} maxWidth="25rem">
         {createIcon(iconProps, icon, iconColor)}
       </Tooltip>
     );
+  } else if (!cluster) {
+    const iconProps: IconProps = {
+      className: iconStyle,
+      dataTest: 'istio-status-success'
+    };
+    return (
+      <Tooltip position={tooltipPosition} enableFlip={true} content={tooltipContent()} maxWidth="25rem">
+        {createIcon(iconProps, defaultIcons.HealthyIcon, ValidToColor['false-false-false'])}
+      </Tooltip>
+    );
   }
 
   return null;

diff --git a/frontend/src/components/IstioStatus/IstioStatusList.tsx b/frontend/src/components/IstioStatus/IstioStatusList.tsx
@@ -4,7 +4,6 @@ import { ComponentStatus, Status } from '../../types/IstioStatus';
 import { IstioComponentStatus } from './IstioComponentStatus';
 import { kialiStyle } from 'styles/StyleUtils';
 import { useKialiTranslation } from 'utils/I18nUtils';
-import { PFBadge, PFBadges } from '../Pf/PfBadges';
 
 type Props = {
   cluster: string;
@@ -50,12 +49,8 @@ export const IstioStatusList: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <>
-      <PFBadge badge={PFBadges.Cluster} size="sm" />
-      {props.cluster}
-      <List id="istio-status" aria-label={t('Istio Component List')} className={listStyle}>
-        {renderComponentList()}
-      </List>
-    </>
+    <List id="istio-status" aria-label={t('Istio Component List')} className={listStyle}>
+      {renderComponentList()}
+    </List>
   );
 };
diff --git a/frontend/src/components/IstioStatus/__tests__/IstioStatus.test.tsx b/frontend/src/components/IstioStatus/__tests__/IstioStatus.test.tsx
@@ -245,6 +245,6 @@ describe('When all components are good', () => {
       }
     ]);
 
-    expect(wrapper.isEmptyRender()).toBeTruthy();
+    testIcon(wrapper, 'istio-status-success');
   });
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -245,6 +245,6 @@ describe('When all components are good', () => { @@
           }
         ]);
-        expect(wrapper.isEmptyRender()).toBeTruthy();
+        testIcon(wrapper, 'istio-status-success');
       });
     });