Repository: kiali/kiali
Pull request #8170: Multi-cluster Istio components status
Author: login: hhovsepy
Created: 2025-02-17T15:09:26Z | Merged: 2025-03-28T12:56:55Z

### Describe the change

Kiali Masthead which shows Home cluster name and the components statuses are merged now.
It shows single icon with tooltip:
![Screenshot from 2025-03-17 14-39-49](https://github.com/user-attachments/assets/015ec3f2-a590-40de-9037-6e22bed21e11)
Added multicluster support of components statuses:
![Screenshot from 2025-03-17 12-12-44](https://github.com/user-attachments/assets/3ebe5f96-72ce-4a06-b667-6b4da3ca52f5)
![Screenshot from 2025-03-17 12-13-23](https://github.com/user-attachments/assets/2c7caca8-30e5-47d2-931f-fa4ba5eb2611)
Always showing sorted the worst status cluster the first.

From Control plane card removed "Remote Cluster" label as all cluster's are listed in Masthead.

### Steps to test the PR

Test for primary-remote and multy-primary cases.
Regression test for single cluster case.

### Automation testing
Modified the cypress and unit tests.

### Issue reference
https://github.com/kiali/kiali/issues/7724


Diff:
diff --git a/business/istio_status.go b/business/istio_status.go
index b1ba4de204..5db386b92f 100644
--- a/business/istio_status.go
+++ b/business/istio_status.go
@@ -54,15 +54,21 @@ func (iss *IstioStatusService) GetStatus(ctx context.Context) (kubernetes.IstioC
 	if !iss.conf.ExternalServices.Istio.ComponentStatuses.Enabled || !iss.conf.ExternalServices.Istio.IstioAPIEnabled {
 		return kubernetes.IstioComponentStatus{}, nil
 	}
+	result := kubernetes.IstioComponentStatus{}
 
-	// TODO: Multi-primary and external controlplane support.
-	// Right now this only gets the status of the control plane in the home cluster.
-	ics, err := iss.getIstioComponentStatus(ctx, iss.conf.KubernetesConfig.ClusterName)
-	if err != nil {
-		return nil, err
+	for cluster := range iss.userClients {
+		ics, err := iss.getIstioComponentStatus(ctx, cluster)
+		if err != nil {
+			// istiod should be running
+			return nil, err
+		}
+		result.Merge(ics)
 	}
 
-	return ics.Merge(iss.getAddonComponentStatus()), nil
+	// for local cluster only get addons
+	result.Merge(iss.getAddonComponentStatus(iss.conf.KubernetesConfig.ClusterName))
+
+	return result, nil
 }
 
 func (iss *IstioStatusService) getIstioComponentStatus(ctx context.Context, cluster string) (kubernetes.IstioComponentStatus, error) {
@@ -86,6 +92,7 @@ func (iss *IstioStatusService) getIstioComponentStatus(ctx context.Context, clus
 	}
 
 	var istiodStatus kubernetes.IstioComponentStatus
+	var isManaged = false
 	for _, cp := range mesh.ControlPlanes {
 		if cp.Cluster.Name == cluster {
 			istiodStatus = append(istiodStatus, kubernetes.ComponentStatus{
@@ -96,8 +103,16 @@ func (iss *IstioStatusService) getIstioComponentStatus(ctx context.Context, clus
 				IsCore:    true,
 			})
 		}
+		for _, cl := range cp.ManagedClusters {
+			if cl.Name == cluster {
+				isManaged = true
+				break
+			}
+		}
 	}
-	if len(istiodStatus) == 0 {
+
+	// if no control plane and no any other control plane which manages this cluster
+	if len(istiodStatus) == 0 && !isManaged {
 		istiodStatus = append(istiodStatus, kubernetes.ComponentStatus{
 			Cluster:   cluster,
 			Name:      "istiod",
@@ -282,7 +297,7 @@ func GetWorkloadStatus(wl models.Workload) string {
 	return status
 }
 
-func (iss *IstioStatusService) getAddonComponentStatus() kubernetes.IstioComponentStatus {
+func (iss *IstioStatusService) getAddonComponentStatus(cluster string) kubernetes.IstioComponentStatus {
 	var wg sync.WaitGroup
 	wg.Add(4)
 
@@ -296,16 +311,16 @@ func (iss *IstioStatusService) getAddonComponentStatus() kubernetes.IstioCompone
 
 	ics := kubernetes.IstioComponentStatus{}
 
-	go iss.getAddonStatus("prometheus", true, extServices.Prometheus.IsCore, &extServices.Prometheus.Auth, extServices.Prometheus.URL, extServices.Prometheus.HealthCheckUrl, staChan, &wg)
-	go iss.getAddonStatus("grafana", extServices.Grafana.Enabled, extServices.Grafana.IsCore, &extServices.Grafana.Auth, extServices.Grafana.InternalURL, extServices.Grafana.HealthCheckUrl, staChan, &wg)
-	go iss.getTracingStatus("tracing", extServices.Tracing.Enabled, extServices.Tracing.IsCore, staChan, &wg)
+	go iss.getAddonStatus(cluster, "prometheus", true, extServices.Prometheus.IsCore, &extServices.Prometheus.Auth, extServices.Prometheus.URL, extServices.Prometheus.HealthCheckUrl, staChan, &wg)
+	go iss.getAddonStatus(cluster, "grafana", extServices.Grafana.Enabled, extServices.Grafana.IsCore, &extServices.Grafana.Auth, extServices.Grafana.InternalURL, extServices.Grafana.HealthCheckUrl, staChan, &wg)
+	go iss.getTracingStatus(cluster, "tracing", extServices.Tracing.Enabled, extServices.Tracing.IsCore, staChan, &wg)
 
 	// Custom dashboards may use the main Prometheus config
 	customProm := extServices.CustomDashboards.Prometheus
 	if customProm.URL == "" {
 		customProm = extServices.Prometheus
 	}
-	go iss.getAddonStatus("custom dashboards", extServices.CustomDashboards.Enabled, extServices.CustomDashboards.IsCore, &customProm.Auth, customProm.URL, customProm.HealthCheckUrl, staChan, &wg)
+	go iss.getAddonStatus(cluster, "custom dashboards", extServices.CustomDashboards.Enabled, extServices.CustomDashboards.IsCore, &customProm.Auth, customProm.URL, customProm.HealthCheckUrl, staChan, &wg)
 
 	wg.Wait()
 
@@ -317,7 +332,7 @@ func (iss *IstioStatusService) getAddonComponentStatus() kubernetes.IstioCompone
 	return ics
 }
 
-func (iss *IstioStatusService) getAddonStatus(name string, enabled bool, isCore bool, auth *config.Auth, url string, healthCheckUrl string, staChan chan<- kubernetes.IstioComponentStatus, wg *sync.WaitGroup) {
+func (iss *IstioStatusService) getAddonStatus(cluster string, name string, enabled bool, isCore bool, auth *config.Auth, url string, healthCheckUrl string, staChan chan<- kubernetes.IstioComponentStatus, wg *sync.WaitGroup) {
 	defer wg.Done()
 
 	// When the addOn is disabled, don't perform any check
@@ -331,7 +346,7 @@ func (iss *IstioStatusService) getAddonStatus(name string, enabled bool, isCore
 	}
 
 	if auth.UseKialiToken {
-		auth.Token = iss.homeClusterSAClient.GetToken()
+		auth.Token = iss.userClients[cluster].GetToken()
 	}
 
 	status := kubernetes.ComponentHealthy
@@ -344,14 +359,15 @@ func (iss *IstioStatusService) getAddonStatus(name string, enabled bool, isCore
 
 	staChan <- kubernetes.IstioComponentStatus{
 		kubernetes.ComponentStatus{
-			Name:   name,
-			Status: status,
-			IsCore: isCore,
+			Cluster: cluster,
+			Name:    name,
+			Status:  status,
+			IsCore:  isCore,
 		},
 	}
 }
 
-func (iss *IstioStatusService) getTracingStatus(name string, enabled bool, isCore bool, staChan chan<- kubernetes.IstioComponentStatus, wg *sync.WaitGroup) {
+func (iss *IstioStatusService) getTracingStatus(cluster string, name string, enabled bool, isCore bool, staChan chan<- kubernetes.IstioComponentStatus, wg *sync.WaitGroup) {
 	defer wg.Done()
 
 	if !enabled {
@@ -368,9 +384,10 @@ func (iss *IstioStatusService) getTracingStatus(name string, enabled bool, isCor
 
 	staChan <- kubernetes.IstioComponentStatus{
 		kubernetes.ComponentStatus{
-			Name:   name,
-			Status: status,
-			IsCore: isCore,
+			Cluster: cluster,
+			Name:    name,
+			Status:  status,
+			IsCore:  isCore,
 		},
 	}
 }
diff --git a/frontend/cypress/integration/common/masthead.ts b/frontend/cypress/integration/common/masthead.ts
new file mode 100644
index 0000000000..44d840f50f
--- /dev/null
+++ b/frontend/cypress/integration/common/masthead.ts
@@ -0,0 +1,35 @@
+import { After, Then, When } from '@badeball/cypress-cucumber-preprocessor';
+
+Then('user sees {string} cluster label with a {string} icon', (clusterName: string, iconType: string) => {
+  cy.get('[data-test="cluster-icon"]').should('contain', clusterName);
+  cy.get(`[data-test="istio-status-${iconType}"]`).should('be.visible');
+});
+
+When('user hovers over the cluster icon', () => {
+  cy.get('[data-test="cluster-icon"]').trigger('mouseenter');
+});
+
+Then('user sees a tooltip with text {string}', (text: string) => {
+  cy.get('[data-test="component-status-tooltip"]').within(() => {
+    cy.contains(text).should('be.visible');
+  });
+});
+
+Then('user does not see any {string} in the tooltip', (status: string) => {
+  cy.get('[data-test="component-status-tooltip"]').within(() => {
+    cy.contains(status).should('not.exist');
+  });
+});
+
+When(
+  'user scales to {string} the {string} in namespace {string}',
+  (scale: string, targetWorkload: string, targetNamespace: string) => {
+    cy.exec(`kubectl scale -n ${targetNamespace} --replicas=${scale} deployment/${targetWorkload}`);
+    cy.exec(`kubectl rollout status deployment ${targetWorkload} -n ${targetNamespace}`);
+  }
+);
+
+After({ tags: '@component-health-upscale' }, () => {
+  cy.exec(`kubectl scale -n istio-system --replicas=1 deployment/grafana`);
+  cy.exec(`kubectl rollout status deployment prometheus -n istio-system`);
+});
diff --git a/frontend/cypress/integration/featureFiles/masthead.feature b/frontend/cypress/integration/featureFiles/masthead.feature
new file mode 100644
index 0000000000..71a7fd7812
--- /dev/null
+++ b/frontend/cypress/integration/featureFiles/masthead.feature
@@ -0,0 +1,35 @@
+@masthead
+@multi-cluster
+# don't change first line of this file - the tag is used for the test scripts to identify the test suite
+
+Feature: Kiali masthead cluster components status
+
+  User wants to verify the Kiali masthead content
+
+  Background:
+    Given user is at administrator perspective
+    And user is at the "overview" page
+
+  @multi-cluster
+  Scenario: Cluster components healthy
+    Then user sees "east" cluster label with a "success" icon
+    When user hovers over the cluster icon
+    Then user sees a tooltip with text "east"
+    Then user sees a tooltip with text "west"
+    Then user does not see any "Not" in the tooltip
+    Then user does not see any "Unreachable" in the tooltip
+
+  @multi-cluster
+  @component-health-upscale
+  Scenario: Istio components unhealthy
+    When user scales to "0" the "grafana" in namespace "istio-system"
+    Then the user refreshes the page
+    Then user sees "east" cluster label with a "warning" icon
+    When user hovers over the cluster icon
+    Then user sees a tooltip with text "Unreachable"
+    When user scales to "1" the "grafana" in namespace "istio-system"
+    Then the user refreshes the page
+    Then user sees "east" cluster label with a "success" icon
+    When user hovers over the cluster icon
+    Then user does not see any "Not" in the tooltip
+    Then user does not see any "Unreachable" in the tooltip
diff --git a/frontend/cypress/integration/featureFiles/overview.feature b/frontend/cypress/integration/featureFiles/overview.feature
index 7f9627ed39..d2b4744475 100644
--- a/frontend/cypress/integration/featureFiles/overview.feature
+++ b/frontend/cypress/integration/featureFiles/overview.feature
@@ -119,7 +119,6 @@ Feature: Kiali Overview page
     Then user sees the "istio-system" namespace card in cluster "east"
     And user sees the "istio-system" namespace card in cluster "west"
     And user sees the "Control plane" label in both "istio-system" namespace cards
-    And user sees the "Remote Cluster" label in the "west" "istio-system" namespace card
     And the toggle on the right side of both "istio-system" namespace cards exists
     And Istio config should not be available for the "west" "istio-system"
     And health should be different for "east" and "west" "istio-system"
diff --git a/frontend/public/locales/zh/translation.json b/frontend/public/locales/zh/translation.json
index 5b42c60a9a..8d16dfe760 100644
--- a/frontend/public/locales/zh/translation.json
+++ b/frontend/public/locales/zh/translation.json
@@ -72,6 +72,7 @@
   "Close Legend": "Close Legend",
   "Close Replay": "关闭重放",
   "Cluster": "集群",
+  "Cluster Status": "Cluster Status",
   "Clusters": "Clusters",
   "Clusters: {{num}}": "Clusters: {{num}}",
   "Compact view": "紧凑视图",
@@ -200,7 +201,6 @@
   "Istio {{type}} created": "Istio {{type}} created",
   "Istio Ambient ztunnel detected in the Control plane": "在Istio的控制平面中检测到环境ztunnel",
   "Istio Component List": "Istio Component List",
-  "Istio Components Status": "Istio Components Status",
   "Istio config": "Istio配置",
   "Istio Config": "Istio配置",
   "Istio control plane": "Istio控制面板",
@@ -216,7 +216,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/actions/IstioStatusActions.ts b/frontend/src/actions/IstioStatusActions.ts
index ba7910f82d..4c81cf8d3e 100644
--- a/frontend/src/actions/IstioStatusActions.ts
+++ b/frontend/src/actions/IstioStatusActions.ts
@@ -1,9 +1,9 @@
 import { ActionType, createStandardAction } from 'typesafe-actions';
 import { ActionKeys } from './ActionKeys';
-import { ComponentStatus } from '../types/IstioStatus';
+import { ClusterStatusMap } from '../components/IstioStatus/IstioStatus';
 
 export const IstioStatusActions = {
-  setinfo: createStandardAction(ActionKeys.ISTIO_STATUS_SET_INFO)<ComponentStatus[]>()
+  setinfo: createStandardAction(ActionKeys.ISTIO_STATUS_SET_INFO)<ClusterStatusMap>()
 };
 
 export type IstioStatusAction = ActionType<typeof IstioStatusActions>;
diff --git a/frontend/src/components/IstioStatus/IstioStatus.tsx b/frontend/src/components/IstioStatus/IstioStatus.tsx
index 1e0b3e2ac1..e1f2f599df 100644
--- a/frontend/src/components/IstioStatus/IstioStatus.tsx
+++ b/frontend/src/components/IstioStatus/IstioStatus.tsx
@@ -3,36 +3,45 @@ import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
 import * as API from '../../services/Api';
 import * as AlertUtils from '../../utils/AlertUtils';
 import { TimeInMilliseconds } from '../../types/Common';
-import { ComponentStatus, Status } from '../../types/IstioStatus';
+import { ComponentStatus, Status, statusSeverity } from '../../types/IstioStatus';
 import { MessageType } from '../../types/MessageCenter';
 import { Namespace } from '../../types/Namespace';
 import { KialiAppState } from '../../store/Store';
 import { istioStatusSelector, namespaceItemsSelector } from '../../store/Selectors';
-import { bindActionCreators } from 'redux';
 import { IstioStatusActions } from '../../actions/IstioStatusActions';
 import { connect } from 'react-redux';
-import { Tooltip, TooltipPosition } from '@patternfly/react-core';
+import { Text, TextVariants, TextContent, Tooltip, TooltipPosition, Label } from '@patternfly/react-core';
 import { IstioStatusList } from './IstioStatusList';
 import { PFColors } from '../Pf/PfColors';
-import { ResourcesFullIcon } from '@patternfly/react-icons';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InfoCircleIcon,
+  QuestionCircleIcon
+} from '@patternfly/react-icons';
 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 { homeCluster } from '../../config';
+import { PFBadge, PFBadges } from '../Pf/PfBadges';
+
+export type ClusterStatusMap = { [cluster: string]: ComponentStatus[] };
 
 type ReduxStateProps = {
   namespaces?: Namespace[];
-  status: ComponentStatus[];
+  statusMap: ClusterStatusMap; // map of clusters to ComponentStatus[]
 };
 
 type ReduxDispatchProps = {
   refreshNamespaces: () => void;
-  setIstioStatus: (istioStatus: ComponentStatus[]) => void;
+  setIstioStatus: (statusMap: ClusterStatusMap) => void;
 };
 
 type StatusIcons = {
@@ -44,7 +53,6 @@ type StatusIcons = {
 
 type Props = ReduxStateProps &
   ReduxDispatchProps & {
-    cluster?: string;
     icons?: StatusIcons;
     lastRefreshAt: TimeInMilliseconds;
     location?: string;
@@ -62,17 +70,30 @@ const ValidToColor = {
 };
 
 const defaultIcons = {
-  ErrorIcon: ResourcesFullIcon,
-  HealthyIcon: ResourcesFullIcon,
-  InfoIcon: ResourcesFullIcon,
-  WarningIcon: ResourcesFullIcon
+  ErrorIcon: ExclamationCircleIcon,
+  HealthyIcon: CheckCircleIcon,
+  InfoIcon: InfoCircleIcon,
+  WarningIcon: ExclamationTriangleIcon
 };
 
 const iconStyle = kialiStyle({
-  marginLeft: '2rem',
+  marginLeft: '0.5rem',
   fontSize: '1rem'
 });
 
+const clusterStyle = kialiStyle({
+  display: 'flex',
+  alignItems: 'center'
+});
+
+const labelStyle = kialiStyle({
+  $nest: {
+    '& .pf-v5-c-label__icon': {
+      marginRight: '0.5rem'
+    }
+  }
+});
+
 export const meshLinkStyle = kialiStyle({
   display: 'flex',
   justifyContent: 'center',
@@ -87,16 +108,25 @@ export const meshLinkStyle = kialiStyle({
 export const IstioStatusComponent: React.FC<Props> = (props: Props) => {
   const { t } = useKialiTranslation();
 
-  const { cluster, namespaces, setIstioStatus, refreshNamespaces, lastRefreshAt } = props;
+  const { namespaces, setIstioStatus, refreshNamespaces, lastRefreshAt } = props;
 
   React.useEffect(() => {
     refreshNamespaces();
   }, [refreshNamespaces]);
 
   const fetchStatus = React.useCallback((): void => {
-    API.getIstioStatus(cluster)
+    API.getIstioStatus()
       .then(response => {
-        setIstioStatus(response.data);
+        const statusMap: ClusterStatusMap = {};
+
+        response.data.forEach(status => {
+          if (!statusMap[status.cluster]) {
+            statusMap[status.cluster] = [];
+          }
+          statusMap[status.cluster].push(status);
+        });
+
+        setIstioStatus(statusMap);
       })
       .catch(error => {
         // User without namespaces can't have access to mTLS information. Reduce severity to info.
@@ -108,23 +138,54 @@ export const IstioStatusComponent: React.FC<Props> = (props: Props) => {
           AlertUtils.addError(t('Error fetching Istio deployment status.'), error, 'default', MessageType.ERROR);
         }
       });
-  }, [cluster, namespaces, setIstioStatus, t]);
+  }, [namespaces, setIstioStatus, t]);
 
   React.useEffect(() => {
+    // retrieve status for all clusters
     fetchStatus();
   }, [lastRefreshAt, fetchStatus]);
 
+  const getSeverity = (components: ComponentStatus[]): number =>
+    Math.max(
+      ...components.map(
+        cs =>
+          statusSeverity[cs.status] +
+          (cs.is_core && statusSeverity[cs.status] !== statusSeverity[Status.Healthy] ? 10 : 0)
+      )
+    ); // non health core component has much higher severity
+
+  const sortedClusters = Object.keys(props.statusMap).sort((a, b) => {
+    const worstA = getSeverity(props.statusMap[a]);
+    const worstB = getSeverity(props.statusMap[b]);
+    return worstB - worstA;
+  });
+
   const tooltipContent = (): React.ReactNode => {
     return (
       <>
-        <IstioStatusList status={props.status} />
-
-        {!props.location?.endsWith('/mesh') && isControlPlaneAccessible() && (
-          <div className={meshLinkStyle}>
-            <span>{t('More info at')}</span>
-            <Link to="/mesh">{t('Mesh page')}</Link>
-          </div>
-        )}
+        <TextContent style={{ color: PFColors.White }}>
+          <Text component={TextVariants.h4}>{t('Cluster Status')}</Text>
+          {sortedClusters.map(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() && (
+            <div className={meshLinkStyle}>
+              <span>{t('More info at')}</span>
+              <Link to="/mesh">{t('Mesh page')}</Link>
+            </div>
+          )}
+        </TextContent>
       </>
     );
   };
@@ -133,9 +194,10 @@ export const IstioStatusComponent: React.FC<Props> = (props: Props) => {
     let coreUnhealthy = false;
     let addonUnhealthy = false;
     let notReady = false;
+    const values = Object.values(props.statusMap).flat();
 
-    Object.keys(props.status ?? {}).forEach((compKey: string) => {
-      const { status, is_core } = props.status[compKey];
+    Object.keys(values ?? {}).forEach((compKey: string) => {
+      const { status, is_core } = values[compKey];
       const isNotReady: boolean = status === Status.NotReady;
       const isUnhealthy: boolean = status !== Status.Healthy && !isNotReady;
 
@@ -152,15 +214,20 @@ export const IstioStatusComponent: React.FC<Props> = (props: Props) => {
   };
 
   const healthyComponents = (): boolean => {
-    return props.status.reduce((healthy: boolean, compStatus: ComponentStatus) => {
+    const values = Object.values(props.statusMap).flat();
+    return values.reduce((healthy: boolean, compStatus: ComponentStatus) => {
       return healthy && compStatus.status === Status.Healthy;
     }, true);
   };
 
+  const tooltipPosition = props.location === MASTHEAD ? TooltipPosition.bottom : TooltipPosition.top;
+
+  let statusIcon: React.ReactElement;
+
   if (!healthyComponents()) {
     const icons = props.icons ? { ...defaultIcons, ...props.icons } : defaultIcons;
     const iconColor = tooltipColor();
-    let icon = ResourcesFullIcon;
+    let icon = QuestionCircleIcon;
     let dataTest = 'istio-status';
 
     if (iconColor === PFColors.Danger) {
@@ -182,25 +249,45 @@ export const IstioStatusComponent: React.FC<Props> = (props: Props) => {
       dataTest: dataTest
     };
 
-    const tooltipPosition = props.location === MASTHEAD ? TooltipPosition.bottom : TooltipPosition.top;
+    statusIcon = createIcon(iconProps, icon, iconColor);
+  } else {
+    const iconProps: IconProps = {
+      className: iconStyle,
+      dataTest: 'istio-status-success'
+    };
 
-    return (
-      <Tooltip position={tooltipPosition} enableFlip={true} content={tooltipContent()} maxWidth="25rem">
-        {createIcon(iconProps, icon, iconColor)}
-      </Tooltip>
-    );
+    statusIcon = createIcon(iconProps, defaultIcons.HealthyIcon, ValidToColor['false-false-false']);
   }
 
-  return null;
+  return (
+    <Tooltip
+      data-test="component-status-tooltip"
+      position={tooltipPosition}
+      enableFlip={true}
+      content={tooltipContent()}
+      maxWidth="25rem"
+    >
+      <>
+        {homeCluster?.name && (
+          <Label className={labelStyle} data-test="cluster-icon" color="blue" icon={<KialiIcon.Cluster />}>
+            {homeCluster?.name}
+            {isControlPlaneAccessible() && statusIcon}
+          </Label>
+        )}
+      </>
+    </Tooltip>
+  );
 };
 
 const mapStateToProps = (state: KialiAppState): ReduxStateProps => ({
-  status: istioStatusSelector(state),
+  statusMap: istioStatusSelector(state),
   namespaces: namespaceItemsSelector(state)
 });
 
 const mapDispatchToProps = (dispatch: KialiDispatch): ReduxDispatchProps => ({
-  setIstioStatus: bindActionCreators(IstioStatusActions.setinfo, dispatch),
+  setIstioStatus: (statusMap: ClusterStatusMap) => {
+    dispatch(IstioStatusActions.setinfo(statusMap));
+  },
   refreshNamespaces: () => {
     dispatch(NamespaceThunkActions.fetchNamespacesIfNeeded());
   }
diff --git a/frontend/src/components/IstioStatus/IstioStatusList.tsx b/frontend/src/components/IstioStatus/IstioStatusList.tsx
index 55a976827d..749fc8b022 100644
--- a/frontend/src/components/IstioStatus/IstioStatusList.tsx
+++ b/frontend/src/components/IstioStatus/IstioStatusList.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { List, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { List } from '@patternfly/react-core';
 import { ComponentStatus, Status } from '../../types/IstioStatus';
 import { IstioComponentStatus } from './IstioComponentStatus';
-import { PFColors } from '../Pf/PfColors';
 import { kialiStyle } from 'styles/StyleUtils';
 import { useKialiTranslation } from 'utils/I18nUtils';
 
 type Props = {
+  cluster: string;
   status: ComponentStatus[];
 };
 
@@ -49,12 +49,8 @@ export const IstioStatusList: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <TextContent style={{ color: PFColors.White }}>
-      <Text component={TextVariants.h4}>{t('Istio Components Status')}</Text>
-
-      <List id="istio-status" aria-label={t('Istio Component List')} className={listStyle}>
-        {renderComponentList()}
-      </List>
-    </TextContent>
+    <List id="istio-status" aria-label={t('Istio Component List')} className={listStyle}>
+      {renderComponentList()}
+    </List>
   );
 };
diff --git a/frontend/src/components/IstioStatus/__tests__/IstioComponentStatus.test.tsx b/frontend/src/components/IstioStatus/__tests__/IstioComponentStatus.test.tsx
index eefd559700..cab5775fb8 100644
--- a/frontend/src/components/IstioStatus/__tests__/IstioComponentStatus.test.tsx
+++ b/frontend/src/components/IstioStatus/__tests__/IstioComponentStatus.test.tsx
@@ -2,15 +2,17 @@ import * as React from 'react';
 import { ComponentStatus, Status } from '../../../types/IstioStatus';
 import { IstioComponentStatus } from '../IstioComponentStatus';
 import { shallowToJson } from 'enzyme-to-json';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { CLUSTER_DEFAULT } from '../../../types/Graph';
 
-const mockComponent = (cs: ComponentStatus) => {
+const mockComponent = (cs: ComponentStatus): ShallowWrapper => {
   return shallow(<IstioComponentStatus componentStatus={cs} />);
 };
 
 describe('IstioComponentStatus renders', () => {
   it('success icon when core component is running', () => {
     const wrapper = mockComponent({
+      cluster: CLUSTER_DEFAULT,
       name: 'isito-ingress',
       status: Status.Healthy,
       is_core: true
@@ -22,6 +24,7 @@ describe('IstioComponentStatus renders', () => {
 
   it('error icon when core component is not running', () => {
     const wrapper = mockComponent({
+      cluster: CLUSTER_DEFAULT,
       name: 'isito-ingress',
       status: Status.Unhealthy,
       is_core: true
@@ -33,6 +36,7 @@ describe('IstioComponentStatus renders', () => {
 
   it('error icon when core component is not found', () => {
     const wrapper = mockComponent({
+      cluster: CLUSTER_DEFAULT,
       name: 'isito-ingress',
       status: Status.NotFound,
       is_core: true
@@ -44,6 +48,7 @@ describe('IstioComponentStatus renders', () => {
 
   it('success icon when core component is running', () => {
     const wrapper = mockComponent({
+      cluster: CLUSTER_DEFAULT,
       name: 'prometheus',
       status: Status.Healthy,
       is_core: false
@@ -55,6 +60,7 @@ describe('IstioComponentStatus renders', () => {
 
   it('warning icon when core component is not running', () => {
     const wrapper = mockComponent({
+      cluster: CLUSTER_DEFAULT,
       name: 'prometheus',
       status: Status.Unhealthy,
       is_core: false
@@ -66,6 +72,7 @@ describe('IstioComponentStatus renders', () => {
 
   it('warning icon when core component is not found', () => {
     const wrapper = mockComponent({
+      cluster: CLUSTER_DEFAULT,
       name: 'prometheus',
       status: Status.NotFound,
       is_core: false
@@ -77,6 +84,7 @@ describe('IstioComponentStatus renders', () => {
 
   it('minus icon when core component is not ready', () => {
     const wrapper = mockComponent({
+      cluster: CLUSTER_DEFAULT,
       name: 'core',
       status: Status.NotReady,
       is_core: true
@@ -88,6 +96,7 @@ describe('IstioComponentStatus renders', () => {
 
   it('minus icon when addon component is not ready', () => {
     const wrapper = mockComponent({
+      cluster: CLUSTER_DEFAULT,
       name: 'addon',
       status: Status.NotReady,
       is_core: false
diff --git a/frontend/src/components/IstioStatus/__tests__/IstioStatus.test.tsx b/frontend/src/components/IstioStatus/__tests__/IstioStatus.test.tsx
index af7544e068..5afc056f15 100644
--- a/frontend/src/components/IstioStatus/__tests__/IstioStatus.test.tsx
+++ b/frontend/src/components/IstioStatus/__tests__/IstioStatus.test.tsx
@@ -3,13 +3,19 @@ import { ShallowWrapper, shallow } from 'enzyme';
 import { ComponentStatus, Status } from '../../../types/IstioStatus';
 import { IstioStatusComponent } from '../IstioStatus';
 import { shallowToJson } from 'enzyme-to-json';
+import { CLUSTER_DEFAULT } from '../../../types/Graph';
+import { serverConfig } from '../../../config';
+import { setServerConfig } from '../../../config/ServerConfig';
 
 const mockIcon = (componentList: ComponentStatus[]): ShallowWrapper => {
   return shallow(
     <IstioStatusComponent
-      status={componentList}
+      statusMap={{ Kubernetes: componentList }}
       lastRefreshAt={848152}
-      namespaces={[{ name: 'bookinfo' }, { name: 'istio-system' }]}
+      namespaces={[
+        { name: 'bookinfo', cluster: CLUSTER_DEFAULT },
+        { name: 'istio-system', cluster: CLUSTER_DEFAULT }
+      ]}
       setIstioStatus={jest.fn()}
       refreshNamespaces={jest.fn()}
     />
@@ -25,25 +31,47 @@ const testTooltip = (wrapper: any): void => {
   expect(wrapper.name()).toEqual('Tooltip');
   expect(wrapper.props().position).toEqual('top');
   expect(wrapper.props().enableFlip).toEqual(true);
-  expect(wrapper.children().length).toEqual(1);
+  expect(wrapper.children.length).toEqual(1);
 };
 
-const testIcon = (wrapper: any, dataTest: string): void => {
-  const icon = wrapper.childAt(0);
+const testIcon = (wrapper: any, dataTest: string, iconName: string): void => {
+  const clusterIcon = wrapper.childAt(0);
+  expect(clusterIcon).toBeDefined();
+  const icon = clusterIcon.childAt(1);
   expect(icon).toBeDefined();
   expect(icon.props()['data-test']).toEqual(dataTest);
-  expect(icon.childAt(0).name()).toEqual('ResourcesFullIcon');
+  expect(icon.childAt(0).name()).toEqual(iconName);
 };
 
+jest.mock('../../../utils/MeshUtils', () => ({
+  isControlPlaneAccessible: () => true
+}));
+
 describe('When core component has a problem', () => {
+  beforeEach(() => {
+    serverConfig.clusters = {
+      CLUSTER_DEFAULT: {
+        accessible: true,
+        apiEndpoint: '',
+        isKialiHome: true,
+        kialiInstances: [],
+        name: CLUSTER_DEFAULT,
+        secretName: 'test-secret'
+      }
+    };
+    setServerConfig(serverConfig);
+  });
+
   it('the Icon shows is displayed in Red', () => {
     const wrapper = mockIcon([
       {
+        cluster: CLUSTER_DEFAULT,
         name: 'grafana',
         status: Status.Healthy,
         is_core: false
       },
       {
+        cluster: CLUSTER_DEFAULT,
         name: 'istio-egressgateway',
         status: Status.Unhealthy,
         is_core: true
@@ -52,7 +80,7 @@ describe('When core component has a problem', () => {
 
     testSnapshot(wrapper);
     testTooltip(wrapper);
-    testIcon(wrapper, 'istio-status-danger');
+    testIcon(wrapper, 'istio-status-danger', 'ExclamationCircleIcon');
   });
 });
 
@@ -60,11 +88,13 @@ describe('When addon component has a problem', () => {
   it('the Icon shows is displayed in orange', () => {
     const wrapper = mockIcon([
       {
+        cluster: CLUSTER_DEFAULT,
         name: 'grafana',
         status: Status.Unhealthy,
         is_core: false
       },
       {
+        cluster: CLUSTER_DEFAULT,
         name: 'istio-egressgateway',
         status: Status.Healthy,
         is_core: true
@@ -73,7 +103,7 @@ describe('When addon component has a problem', () => {
 
     testSnapshot(wrapper);
     testTooltip(wrapper);
-    testIcon(wrapper, 'istio-status-warning');
+    testIcon(wrapper, 'istio-status-warning', 'ExclamationTriangleIcon');
   });
 });
 
@@ -82,11 +112,13 @@ describe('When both core and addon component have problems', () => {
     it('the Icon shows is displayed in red', () => {
       const wrapper = mockIcon([
         {
+          cluster: CLUSTER_DEFAULT,
           name: 'grafana',
           status: Status.Unhealthy,
           is_core: false
         },
         {
+          cluster: CLUSTER_DEFAULT,
           name: 'istio-egressgateway',
           status: Status.Unhealthy,
           is_core: true
@@ -95,7 +127,7 @@ describe('When both core and addon component have problems', () => {
 
       testSnapshot(wrapper);
       testTooltip(wrapper);
-      testIcon(wrapper, 'istio-status-danger');
+      testIcon(wrapper, 'istio-status-danger', 'ExclamationCircleIcon');
     });
   });
 });
@@ -106,11 +138,13 @@ describe('When there are not-ready components', () => {
       it('the Icon is displayed in red', () => {
         const wrapper = mockIcon([
           {
+            cluster: CLUSTER_DEFAULT,
             name: 'istio-egressgateway',
             status: Status.Unhealthy,
             is_core: true
           },
           {
+            cluster: CLUSTER_DEFAULT,
             name: 'istio-ingressgateway',
             status: Status.NotReady,
             is_core: true
@@ -119,7 +153,7 @@ describe('When there are not-ready components', () => {
 
         testSnapshot(wrapper);
         testTooltip(wrapper);
-        testIcon(wrapper, 'istio-status-danger');
+        testIcon(wrapper, 'istio-status-danger', 'ExclamationCircleIcon');
       });
     });
 
@@ -127,11 +161,13 @@ describe('When there are not-ready components', () => {
       it('the Icon is displayed in orange', () => {
         const wrapper = mockIcon([
           {
+            cluster: CLUSTER_DEFAULT,
             name: 'grafana',
             status: Status.Unhealthy,
             is_core: false
           },
           {
+            cluster: CLUSTER_DEFAULT,
             name: 'jaeger',
             status: Status.NotReady,
             is_core: false
@@ -140,7 +176,7 @@ describe('When there are not-ready components', () => {
 
         testSnapshot(wrapper);
         testTooltip(wrapper);
-        testIcon(wrapper, 'istio-status-warning');
+        testIcon(wrapper, 'istio-status-warning', 'ExclamationTriangleIcon');
       });
     });
 
@@ -148,21 +184,25 @@ describe('When there are not-ready components', () => {
       it('the Icon shows is displayed in red', () => {
         const wrapper = mockIcon([
           {
+            cluster: CLUSTER_DEFAULT,
             name: 'grafana',
             status: Status.Unhealthy,
             is_core: false
           },
           {
+            cluster: CLUSTER_DEFAULT,
             name: 'jaeger',
             status: Status.NotReady,
             is_core: false
           },
           {
+            cluster: CLUSTER_DEFAULT,
             name: 'istio-egressgateway',
             status: Status.Unhealthy,
             is_core: true
           },
           {
+            cluster: CLUSTER_DEFAULT,
             name: 'istio-ingressgateway',
             status: Status.NotReady,
             is_core: true
@@ -171,7 +211,7 @@ describe('When there are not-ready components', () => {
 
         testSnapshot(wrapper);
         testTooltip(wrapper);
-        testIcon(wrapper, 'istio-status-danger');
+        testIcon(wrapper, 'istio-status-danger', 'ExclamationCircleIcon');
       });
     });
   });
@@ -181,6 +221,7 @@ describe('When there are not-ready components', () => {
       it('renders the Icon in blue', () => {
         const wrapper = mockIcon([
           {
+            cluster: CLUSTER_DEFAULT,
             name: 'jaeger',
             status: Status.NotReady,
             is_core: false
@@ -189,7 +230,7 @@ describe('When there are not-ready components', () => {
 
         testSnapshot(wrapper);
         testTooltip(wrapper);
-        testIcon(wrapper, 'istio-status-info');
+        testIcon(wrapper, 'istio-status-info', 'InfoCircleIcon');
       });
     });
 
@@ -197,6 +238,7 @@ describe('When there are not-ready components', () => {
       it('renders the Icon in blue', () => {
         const wrapper = mockIcon([
           {
+            cluster: CLUSTER_DEFAULT,
             name: 'istiod',
             status: Status.NotReady,
             is_core: true
@@ -205,7 +247,7 @@ describe('When there are not-ready components', () => {
 
         testSnapshot(wrapper);
         testTooltip(wrapper);
-        testIcon(wrapper, 'istio-status-info');
+        testIcon(wrapper, 'istio-status-info', 'InfoCircleIcon');
       });
     });
   });
@@ -215,17 +257,19 @@ describe('When all components are good', () => {
   it('the Icon shows is displayed in green', () => {
     const wrapper = mockIcon([
       {
+        cluster: CLUSTER_DEFAULT,
         name: 'grafana',
         status: Status.Healthy,
         is_core: false
       },
       {
+        cluster: CLUSTER_DEFAULT,
         name: 'istio-egressgateway',
         status: Status.Healthy,
         is_core: true
       }
     ]);
 
-    expect(wrapper.isEmptyRender()).toBeTruthy();
+    testIcon(wrapper, 'istio-status-success', 'CheckCircleIcon');
   });
 });
diff --git a/frontend/src/components/IstioStatus/__tests__/IstioStatusList.test.tsx b/frontend/src/components/IstioStatus/__tests__/IstioStatusList.test.tsx
index 7c78d88ace..56b4529892 100644
--- a/frontend/src/components/IstioStatus/__tests__/IstioStatusList.test.tsx
+++ b/frontend/src/components/IstioStatus/__tests__/IstioStatusList.test.tsx
@@ -3,32 +3,37 @@ import { shallow } from 'enzyme';
 import { ComponentStatus, Status } from '../../../types/IstioStatus';
 import { IstioStatusList } from '../IstioStatusList';
 import { shallowToJson } from 'enzyme-to-json';
+import { CLUSTER_DEFAULT } from '../../../types/Graph';
 
 it('lists all the components grouped', () => {
   const components: ComponentStatus[] = [
     {
+      cluster: CLUSTER_DEFAULT,
       name: 'grafana',
       status: Status.NotFound,
       is_core: false
     },
     {
+      cluster: CLUSTER_DEFAULT,
       name: 'prometheus',
       status: Status.Unhealthy,
       is_core: false
     },
     {
+      cluster: CLUSTER_DEFAULT,
       name: 'istiod',
       status: Status.NotFound,
       is_core: true
     },
     {
+      cluster: CLUSTER_DEFAULT,
       name: 'istio-egressgateway',
       status: Status.Unhealthy,
       is_core: true
     }
   ];
 
-  const wrapper = shallow(<IstioStatusList status={components} />);
+  const wrapper = shallow(<IstioStatusList status={components} cluster={'Kubernetes'} />);
 
   expect(shallowToJson(wrapper)).toBeDefined();
   expect(shallowToJson(wrapper)).toMatchSnapshot();
diff --git a/frontend/src/components/IstioStatus/__tests__/__snapshots__/IstioStatus.test.tsx.snap b/frontend/src/components/IstioStatus/__tests__/__snapshots__/IstioStatus.test.tsx.snap
index 1872a9133a..7695f625d0 100644
--- a/frontend/src/components/IstioStatus/__tests__/__snapshots__/IstioStatus.test.tsx.snap
+++ b/frontend/src/components/IstioStatus/__tests__/__snapshots__/IstioStatus.test.tsx.snap
@@ -4,34 +4,99 @@ exports[`When addon component has a problem the Icon shows is displayed in orang
 <Tooltip
   content={
     <React.Fragment>
-      <IstioStatusList
-        status={
-          Array [
-            Object {
-              "is_core": false,
-              "name": "grafana",
-              "status": "Unhealthy",
-            },
-            Object {
-              "is_core": true,
-              "name": "istio-egressgateway",
-              "status": "Healthy",
-            },
-          ]
+      <TextContent
+        style={
+          Object {
+            "color": "var(--pf-v5-global--palette--white)",
+          }
         }
-      />
+      >
+        <Text
+          component="h4"
+        >
+          Cluster Status
+        </Text>
+        <React.Fragment>
+          <div
+            className="kiali_f8qnpeg"
+          >
+            <PFBadge
+              badge={
+                Object {
+                  "badge": "C",
+                  "style": Object {
+                    "backgroundColor": "var(--pf-v5-global--palette--blue-300)",
+                  },
+                  "tt": "Cluster",
+                }
+              }
+              size="sm"
+            />
+            Kubernetes
+            <span
+              style={
+                Object {
+                  "marginLeft": "0.25rem",
+                }
+              }
+            >
+              <Star />
+            </span>
+          </div>
+          <IstioStatusList
+            cluster="Kubernetes"
+            status={
+              Array [
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": false,
+                  "name": "grafana",
+                  "status": "Unhealthy",
+                },
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": true,
+                  "name": "istio-egressgateway",
+                  "status": "Healthy",
+                },
+              ]
+            }
+          />
+        </React.Fragment>
+        <div
+          className="kiali_f1kewvaf"
+        >
+          <span>
+            More info at
+          </span>
+          <Link
+            to="/mesh"
+          >
+            Mesh page
+          </Link>
+        </div>
+      </TextContent>
     </React.Fragment>
   }
+  data-test="component-status-tooltip"
   enableFlip={true}
   maxWidth="25rem"
   position="top"
 >
-  <Icon
-    className="kiali_f1wuoq20 kiali_frkkrth"
-    data-test="istio-status-warning"
+  <Label
+    className="kiali_frds3np"
+    color="blue"
+    data-test="cluster-icon"
+    icon={<Cluster />}
   >
-    <ResourcesFullIcon />
-  </Icon>
+    Kubernetes
+    <Icon
+      className="kiali_f10wsz75 kiali_frkkrth"
+      data-test="istio-status-warning"
+    >
+      <ExclamationTriangleIcon />
+    </Icon>
+  </Label>
 </Tooltip>
 `;
 
@@ -39,34 +104,99 @@ exports[`When both core and addon component have problems any component is in no
 <Tooltip
   content={
     <React.Fragment>
-      <IstioStatusList
-        status={
-          Array [
-            Object {
-              "is_core": false,
-              "name": "grafana",
-              "status": "Unhealthy",
-            },
-            Object {
-              "is_core": true,
-              "name": "istio-egressgateway",
-              "status": "Unhealthy",
-            },
-          ]
+      <TextContent
+        style={
+          Object {
+            "color": "var(--pf-v5-global--palette--white)",
+          }
         }
-      />
+      >
+        <Text
+          component="h4"
+        >
+          Cluster Status
+        </Text>
+        <React.Fragment>
+          <div
+            className="kiali_f8qnpeg"
+          >
+            <PFBadge
+              badge={
+                Object {
+                  "badge": "C",
+                  "style": Object {
+                    "backgroundColor": "var(--pf-v5-global--palette--blue-300)",
+                  },
+                  "tt": "Cluster",
+                }
+              }
+              size="sm"
+            />
+            Kubernetes
+            <span
+              style={
+                Object {
+                  "marginLeft": "0.25rem",
+                }
+              }
+            >
+              <Star />
+            </span>
+          </div>
+          <IstioStatusList
+            cluster="Kubernetes"
+            status={
+              Array [
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": false,
+                  "name": "grafana",
+                  "status": "Unhealthy",
+                },
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": true,
+                  "name": "istio-egressgateway",
+                  "status": "Unhealthy",
+                },
+              ]
+            }
+          />
+        </React.Fragment>
+        <div
+          className="kiali_f1kewvaf"
+        >
+          <span>
+            More info at
+          </span>
+          <Link
+            to="/mesh"
+          >
+            Mesh page
+          </Link>
+        </div>
+      </TextContent>
     </React.Fragment>
   }
+  data-test="component-status-tooltip"
   enableFlip={true}
   maxWidth="25rem"
   position="top"
 >
-  <Icon
-    className="kiali_f1wuoq20 kiali_f1h37jb8"
-    data-test="istio-status-danger"
+  <Label
+    className="kiali_frds3np"
+    color="blue"
+    data-test="cluster-icon"
+    icon={<Cluster />}
   >
-    <ResourcesFullIcon />
-  </Icon>
+    Kubernetes
+    <Icon
+      className="kiali_f10wsz75 kiali_f1h37jb8"
+      data-test="istio-status-danger"
+    >
+      <ExclamationCircleIcon />
+    </Icon>
+  </Label>
 </Tooltip>
 `;
 
@@ -74,34 +204,99 @@ exports[`When core component has a problem the Icon shows is displayed in Red 1`
 <Tooltip
   content={
     <React.Fragment>
-      <IstioStatusList
-        status={
-          Array [
-            Object {
-              "is_core": false,
-              "name": "grafana",
-              "status": "Healthy",
-            },
-            Object {
-              "is_core": true,
-              "name": "istio-egressgateway",
-              "status": "Unhealthy",
-            },
-          ]
+      <TextContent
+        style={
+          Object {
+            "color": "var(--pf-v5-global--palette--white)",
+          }
         }
-      />
+      >
+        <Text
+          component="h4"
+        >
+          Cluster Status
+        </Text>
+        <React.Fragment>
+          <div
+            className="kiali_f8qnpeg"
+          >
+            <PFBadge
+              badge={
+                Object {
+                  "badge": "C",
+                  "style": Object {
+                    "backgroundColor": "var(--pf-v5-global--palette--blue-300)",
+                  },
+                  "tt": "Cluster",
+                }
+              }
+              size="sm"
+            />
+            Kubernetes
+            <span
+              style={
+                Object {
+                  "marginLeft": "0.25rem",
+                }
+              }
+            >
+              <Star />
+            </span>
+          </div>
+          <IstioStatusList
+            cluster="Kubernetes"
+            status={
+              Array [
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": false,
+                  "name": "grafana",
+                  "status": "Healthy",
+                },
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": true,
+                  "name": "istio-egressgateway",
+                  "status": "Unhealthy",
+                },
+              ]
+            }
+          />
+        </React.Fragment>
+        <div
+          className="kiali_f1kewvaf"
+        >
+          <span>
+            More info at
+          </span>
+          <Link
+            to="/mesh"
+          >
+            Mesh page
+          </Link>
+        </div>
+      </TextContent>
     </React.Fragment>
   }
+  data-test="component-status-tooltip"
   enableFlip={true}
   maxWidth="25rem"
   position="top"
 >
-  <Icon
-    className="kiali_f1wuoq20 kiali_f1h37jb8"
-    data-test="istio-status-danger"
+  <Label
+    className="kiali_frds3np"
+    color="blue"
+    data-test="cluster-icon"
+    icon={<Cluster />}
   >
-    <ResourcesFullIcon />
-  </Icon>
+    Kubernetes
+    <Icon
+      className="kiali_f10wsz75 kiali_f1h37jb8"
+      data-test="istio-status-danger"
+    >
+      <ExclamationCircleIcon />
+    </Icon>
+  </Label>
 </Tooltip>
 `;
 
@@ -109,34 +304,99 @@ exports[`When there are not-ready components mixed with other not healthy compon
 <Tooltip
   content={
     <React.Fragment>
-      <IstioStatusList
-        status={
-          Array [
-            Object {
-              "is_core": false,
-              "name": "grafana",
-              "status": "Unhealthy",
-            },
-            Object {
-              "is_core": false,
-              "name": "jaeger",
-              "status": "NotReady",
-            },
-          ]
+      <TextContent
+        style={
+          Object {
+            "color": "var(--pf-v5-global--palette--white)",
+          }
         }
-      />
+      >
+        <Text
+          component="h4"
+        >
+          Cluster Status
+        </Text>
+        <React.Fragment>
+          <div
+            className="kiali_f8qnpeg"
+          >
+            <PFBadge
+              badge={
+                Object {
+                  "badge": "C",
+                  "style": Object {
+                    "backgroundColor": "var(--pf-v5-global--palette--blue-300)",
+                  },
+                  "tt": "Cluster",
+                }
+              }
+              size="sm"
+            />
+            Kubernetes
+            <span
+              style={
+                Object {
+                  "marginLeft": "0.25rem",
+                }
+              }
+            >
+              <Star />
+            </span>
+          </div>
+          <IstioStatusList
+            cluster="Kubernetes"
+            status={
+              Array [
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": false,
+                  "name": "grafana",
+                  "status": "Unhealthy",
+                },
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": false,
+                  "name": "jaeger",
+                  "status": "NotReady",
+                },
+              ]
+            }
+          />
+        </React.Fragment>
+        <div
+          className="kiali_f1kewvaf"
+        >
+          <span>
+            More info at
+          </span>
+          <Link
+            to="/mesh"
+          >
+            Mesh page
+          </Link>
+        </div>
+      </TextContent>
     </React.Fragment>
   }
+  data-test="component-status-tooltip"
   enableFlip={true}
   maxWidth="25rem"
   position="top"
 >
-  <Icon
-    className="kiali_f1wuoq20 kiali_frkkrth"
-    data-test="istio-status-warning"
+  <Label
+    className="kiali_frds3np"
+    color="blue"
+    data-test="cluster-icon"
+    icon={<Cluster />}
   >
-    <ResourcesFullIcon />
-  </Icon>
+    Kubernetes
+    <Icon
+      className="kiali_f10wsz75 kiali_frkkrth"
+      data-test="istio-status-warning"
+    >
+      <ExclamationTriangleIcon />
+    </Icon>
+  </Label>
 </Tooltip>
 `;
 
@@ -144,44 +404,111 @@ exports[`When there are not-ready components mixed with other not healthy compon
 <Tooltip
   content={
     <React.Fragment>
-      <IstioStatusList
-        status={
-          Array [
-            Object {
-              "is_core": false,
-              "name": "grafana",
-              "status": "Unhealthy",
-            },
-            Object {
-              "is_core": false,
-              "name": "jaeger",
-              "status": "NotReady",
-            },
-            Object {
-              "is_core": true,
-              "name": "istio-egressgateway",
-              "status": "Unhealthy",
-            },
-            Object {
-              "is_core": true,
-              "name": "istio-ingressgateway",
-              "status": "NotReady",
-            },
-          ]
+      <TextContent
+        style={
+          Object {
+            "color": "var(--pf-v5-global--palette--white)",
+          }
         }
-      />
+      >
+        <Text
+          component="h4"
+        >
+          Cluster Status
+        </Text>
+        <React.Fragment>
+          <div
+            className="kiali_f8qnpeg"
+          >
+            <PFBadge
+              badge={
+                Object {
+                  "badge": "C",
+                  "style": Object {
+                    "backgroundColor": "var(--pf-v5-global--palette--blue-300)",
+                  },
+                  "tt": "Cluster",
+                }
+              }
+              size="sm"
+            />
+            Kubernetes
+            <span
+              style={
+                Object {
+                  "marginLeft": "0.25rem",
+                }
+              }
+            >
+              <Star />
+            </span>
+          </div>
+          <IstioStatusList
+            cluster="Kubernetes"
+            status={
+              Array [
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": false,
+                  "name": "grafana",
+                  "status": "Unhealthy",
+                },
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": false,
+                  "name": "jaeger",
+                  "status": "NotReady",
+                },
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": true,
+                  "name": "istio-egressgateway",
+                  "status": "Unhealthy",
+                },
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": true,
+                  "name": "istio-ingressgateway",
+                  "status": "NotReady",
+                },
+              ]
+            }
+          />
+        </React.Fragment>
+        <div
+          className="kiali_f1kewvaf"
+        >
+          <span>
+            More info at
+          </span>
+          <Link
+            to="/mesh"
+          >
+            Mesh page
+          </Link>
+        </div>
+      </TextContent>
     </React.Fragment>
   }
+  data-test="component-status-tooltip"
   enableFlip={true}
   maxWidth="25rem"
   position="top"
 >
-  <Icon
-    className="kiali_f1wuoq20 kiali_f1h37jb8"
-    data-test="istio-status-danger"
+  <Label
+    className="kiali_frds3np"
+    color="blue"
+    data-test="cluster-icon"
+    icon={<Cluster />}
   >
-    <ResourcesFullIcon />
-  </Icon>
+    Kubernetes
+    <Icon
+      className="kiali_f10wsz75 kiali_f1h37jb8"
+      data-test="istio-status-danger"
+    >
+      <ExclamationCircleIcon />
+    </Icon>
+  </Label>
 </Tooltip>
 `;
 
@@ -189,34 +516,99 @@ exports[`When there are not-ready components mixed with other not healthy compon
 <Tooltip
   content={
     <React.Fragment>
-      <IstioStatusList
-        status={
-          Array [
-            Object {
-              "is_core": true,
-              "name": "istio-egressgateway",
-              "status": "Unhealthy",
-            },
-            Object {
-              "is_core": true,
-              "name": "istio-ingressgateway",
-              "status": "NotReady",
-            },
-          ]
+      <TextContent
+        style={
+          Object {
+            "color": "var(--pf-v5-global--palette--white)",
+          }
         }
-      />
+      >
+        <Text
+          component="h4"
+        >
+          Cluster Status
+        </Text>
+        <React.Fragment>
+          <div
+            className="kiali_f8qnpeg"
+          >
+            <PFBadge
+              badge={
+                Object {
+                  "badge": "C",
+                  "style": Object {
+                    "backgroundColor": "var(--pf-v5-global--palette--blue-300)",
+                  },
+                  "tt": "Cluster",
+                }
+              }
+              size="sm"
+            />
+            Kubernetes
+            <span
+              style={
+                Object {
+                  "marginLeft": "0.25rem",
+                }
+              }
+            >
+              <Star />
+            </span>
+          </div>
+          <IstioStatusList
+            cluster="Kubernetes"
+            status={
+              Array [
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": true,
+                  "name": "istio-egressgateway",
+                  "status": "Unhealthy",
+                },
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": true,
+                  "name": "istio-ingressgateway",
+                  "status": "NotReady",
+                },
+              ]
+            }
+          />
+        </React.Fragment>
+        <div
+          className="kiali_f1kewvaf"
+        >
+          <span>
+            More info at
+          </span>
+          <Link
+            to="/mesh"
+          >
+            Mesh page
+          </Link>
+        </div>
+      </TextContent>
     </React.Fragment>
   }
+  data-test="component-status-tooltip"
   enableFlip={true}
   maxWidth="25rem"
   position="top"
 >
-  <Icon
-    className="kiali_f1wuoq20 kiali_f1h37jb8"
-    data-test="istio-status-danger"
+  <Label
+    className="kiali_frds3np"
+    color="blue"
+    data-test="cluster-icon"
+    icon={<Cluster />}
   >
-    <ResourcesFullIcon />
-  </Icon>
+    Kubernetes
+    <Icon
+      className="kiali_f10wsz75 kiali_f1h37jb8"
+      data-test="istio-status-danger"
+    >
+      <ExclamationCircleIcon />
+    </Icon>
+  </Label>
 </Tooltip>
 `;
 
@@ -224,29 +616,93 @@ exports[`When there are not-ready components not mixed with other unhealthy comp
 <Tooltip
   content={
     <React.Fragment>
-      <IstioStatusList
-        status={
-          Array [
-            Object {
-              "is_core": true,
-              "name": "istiod",
-              "status": "NotReady",
-            },
-          ]
+      <TextContent
+        style={
+          Object {
+            "color": "var(--pf-v5-global--palette--white)",
+          }
         }
-      />
+      >
+        <Text
+          component="h4"
+        >
+          Cluster Status
+        </Text>
+        <React.Fragment>
+          <div
+            className="kiali_f8qnpeg"
+          >
+            <PFBadge
+              badge={
+                Object {
+                  "badge": "C",
+                  "style": Object {
+                    "backgroundColor": "var(--pf-v5-global--palette--blue-300)",
+                  },
+                  "tt": "Cluster",
+                }
+              }
+              size="sm"
+            />
+            Kubernetes
+            <span
+              style={
+                Object {
+                  "marginLeft": "0.25rem",
+                }
+              }
+            >
+              <Star />
+            </span>
+          </div>
+          <IstioStatusList
+            cluster="Kubernetes"
+            status={
+              Array [
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": true,
+                  "name": "istiod",
+                  "status": "NotReady",
+                },
+              ]
+            }
+          />
+        </React.Fragment>
+        <div
+          className="kiali_f1kewvaf"
+        >
+          <span>
+            More info at
+          </span>
+          <Link
+            to="/mesh"
+          >
+            Mesh page
+          </Link>
+        </div>
+      </TextContent>
     </React.Fragment>
   }
+  data-test="component-status-tooltip"
   enableFlip={true}
   maxWidth="25rem"
   position="top"
 >
-  <Icon
-    className="kiali_f1wuoq20 kiali_f1elceoh"
-    data-test="istio-status-info"
+  <Label
+    className="kiali_frds3np"
+    color="blue"
+    data-test="cluster-icon"
+    icon={<Cluster />}
   >
-    <ResourcesFullIcon />
-  </Icon>
+    Kubernetes
+    <Icon
+      className="kiali_f10wsz75 kiali_f1elceoh"
+      data-test="istio-status-info"
+    >
+      <InfoCircleIcon />
+    </Icon>
+  </Label>
 </Tooltip>
 `;
 
@@ -254,28 +710,92 @@ exports[`When there are not-ready components not mixed with other unhealthy comp
 <Tooltip
   content={
     <React.Fragment>
-      <IstioStatusList
-        status={
-          Array [
-            Object {
-              "is_core": false,
-              "name": "jaeger",
-              "status": "NotReady",
-            },
-          ]
+      <TextContent
+        style={
+          Object {
+            "color": "var(--pf-v5-global--palette--white)",
+          }
         }
-      />
+      >
+        <Text
+          component="h4"
+        >
+          Cluster Status
+        </Text>
+        <React.Fragment>
+          <div
+            className="kiali_f8qnpeg"
+          >
+            <PFBadge
+              badge={
+                Object {
+                  "badge": "C",
+                  "style": Object {
+                    "backgroundColor": "var(--pf-v5-global--palette--blue-300)",
+                  },
+                  "tt": "Cluster",
+                }
+              }
+              size="sm"
+            />
+            Kubernetes
+            <span
+              style={
+                Object {
+                  "marginLeft": "0.25rem",
+                }
+              }
+            >
+              <Star />
+            </span>
+          </div>
+          <IstioStatusList
+            cluster="Kubernetes"
+            status={
+              Array [
+                Object {
+                  "cluster": "Kubernetes",
+                  "is_core": false,
+                  "name": "jaeger",
+                  "status": "NotReady",
+                },
+              ]
+            }
+          />
+        </React.Fragment>
+        <div
+          className="kiali_f1kewvaf"
+        >
+          <span>
+            More info at
+          </span>
+          <Link
+            to="/mesh"
+          >
+            Mesh page
+          </Link>
+        </div>
+      </TextContent>
     </React.Fragment>
   }
+  data-test="component-status-tooltip"
   enableFlip={true}
   maxWidth="25rem"
   position="top"
 >
-  <Icon
-    className="kiali_f1wuoq20 kiali_f1elceoh"
-    data-test="istio-status-info"
+  <Label
+    className="kiali_frds3np"
+    color="blue"
+    data-test="cluster-icon"
+    icon={<Cluster />}
   >
-    <ResourcesFullIcon />
-  </Icon>
+    Kubernetes
+    <Icon
+      className="kiali_f10wsz75 kiali_f1elceoh"
+      data-test="istio-status-info"
+    >
+      <InfoCircleIcon />
+    </Icon>
+  </Label>
 </Tooltip>
 `;
diff --git a/frontend/src/components/IstioStatus/__tests__/__snapshots__/IstioStatusList.test.tsx.snap b/frontend/src/components/IstioStatus/__tests__/__snapshots__/IstioStatusList.test.tsx.snap
index 92f066e4d5..cd13dba6d9 100644
--- a/frontend/src/components/IstioStatus/__tests__/__snapshots__/IstioStatusList.test.tsx.snap
+++ b/frontend/src/components/IstioStatus/__tests__/__snapshots__/IstioStatusList.test.tsx.snap
@@ -1,63 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`lists all the components grouped 1`] = `
-<TextContent
-  style={
-    Object {
-      "color": "var(--pf-v5-global--palette--white)",
-    }
-  }
+<List
+  aria-label="Istio Component List"
+  className="kiali_f6tdqla"
+  id="istio-status"
 >
-  <Text
-    component="h4"
-  >
-    Istio Components Status
-  </Text>
-  <List
-    aria-label="Istio Component List"
-    className="kiali_f6tdqla"
-    id="istio-status"
-  >
-    <IstioComponentStatus
-      componentStatus={
-        Object {
-          "is_core": true,
-          "name": "istiod",
-          "status": "NotFound",
-        }
+  <IstioComponentStatus
+    componentStatus={
+      Object {
+        "cluster": "Kubernetes",
+        "is_core": true,
+        "name": "istiod",
+        "status": "NotFound",
       }
-      key="status-core-istiod"
-    />
-    <IstioComponentStatus
-      componentStatus={
-        Object {
-          "is_core": true,
-          "name": "istio-egressgateway",
-          "status": "Unhealthy",
-        }
+    }
+    key="status-core-istiod"
+  />
+  <IstioComponentStatus
+    componentStatus={
+      Object {
+        "cluster": "Kubernetes",
+        "is_core": true,
+        "name": "istio-egressgateway",
+        "status": "Unhealthy",
       }
-      key="status-core-istio-egressgateway"
-    />
-    <IstioComponentStatus
-      componentStatus={
-        Object {
-          "is_core": false,
-          "name": "grafana",
-          "status": "NotFound",
-        }
+    }
+    key="status-core-istio-egressgateway"
+  />
+  <IstioComponentStatus
+    componentStatus={
+      Object {
+        "cluster": "Kubernetes",
+        "is_core": false,
+        "name": "grafana",
+        "status": "NotFound",
       }
-      key="status-addon-grafana"
-    />
-    <IstioComponentStatus
-      componentStatus={
-        Object {
-          "is_core": false,
-          "name": "prometheus",
-          "status": "Unhealthy",
-        }
+    }
+    key="status-addon-grafana"
+  />
+  <IstioComponentStatus
+    componentStatus={
+      Object {
+        "cluster": "Kubernetes",
+        "is_core": false,
+        "name": "prometheus",
+        "status": "Unhealthy",
       }
-      key="status-addon-prometheus"
-    />
-  </List>
-</TextContent>
+    }
+    key="status-addon-prometheus"
+  />
+</List>
 `;
diff --git a/frontend/src/components/Nav/Masthead/Masthead.tsx b/frontend/src/components/Nav/Masthead/Masthead.tsx
index 0eee15ac44..a16e8951a4 100644
--- a/frontend/src/components/Nav/Masthead/Masthead.tsx
+++ b/frontend/src/components/Nav/Masthead/Masthead.tsx
@@ -1,17 +1,14 @@
 import * as React from 'react';
-import { Label, Flex, FlexItem, Tooltip, Toolbar, ToolbarItem } from '@patternfly/react-core';
+import { Flex, FlexItem, Toolbar, ToolbarItem } from '@patternfly/react-core';
 
-import { homeCluster, serverConfig } from '../../../config';
+import { serverConfig } from '../../../config';
 import { IstioStatus } from '../../IstioStatus/IstioStatus';
 import { UserDropdown } from './UserDropdown';
 import { HelpDropdown } from './HelpDropdown';
 import { MessageCenterTrigger } from '../../../components/MessageCenter/MessageCenterTrigger';
 import { ThemeSwitch } from './ThemeSwitch';
 import { LanguageSwitch } from './LanguageSwitch';
-import { KialiIcon } from 'config/KialiIcon';
-import { useKialiTranslation } from 'utils/I18nUtils';
 import { PfSpinner } from 'components/Pf/PfSpinner';
-import { isControlPlaneAccessible } from '../../../utils/MeshUtils';
 import { kialiStyle } from 'styles/StyleUtils';
 
 export const MASTHEAD = 'masthead';
@@ -25,9 +22,13 @@ const toolbarStyle = kialiStyle({
   }
 });
 
+const istioStatusStyle = kialiStyle({
+  marginRight: '2.5rem'
+});
+
 const themeSwitchStyle = kialiStyle({
-  marginLeft: '1.5rem',
-  marginRight: 0
+  marginLeft: 0,
+  marginRight: '1.5rem'
 });
 
 const messageCenterStyle = kialiStyle({
@@ -49,34 +50,23 @@ const userDropdownStyle = kialiStyle({
 });
 
 export const MastheadItems: React.FC = () => {
-  const { t } = useKialiTranslation();
-
   return (
     <>
       <PfSpinner />
       <Toolbar>
         <ToolbarItem className={toolbarStyle}>
           <Flex>
-            <FlexItem align={{ default: 'alignRight' }}>
-              {homeCluster?.name && (
-                <Tooltip
-                  entryDelay={0}
-                  position="bottom"
-                  content={<div>{t('Kiali home cluster: {{name}}', { name: homeCluster?.name })}</div>}
-                >
-                  <Label data-test="cluster-icon" color="blue" icon={<KialiIcon.Cluster />}>
-                    {homeCluster?.name}
-                  </Label>
-                </Tooltip>
-              )}
+            <FlexItem className={istioStatusStyle}>
+              <IstioStatus location={MASTHEAD} />
             </FlexItem>
 
             <FlexItem className={themeSwitchStyle}>
               <ThemeSwitch />
             </FlexItem>
-            {isControlPlaneAccessible() && (
-              <FlexItem>
-                <IstioStatus location={MASTHEAD} />
+
+            {serverConfig.kialiFeatureFlags.uiDefaults?.i18n?.showSelector && (
+              <FlexItem className={languageSwitchStyle}>
+                <LanguageSwitch />
               </FlexItem>
             )}
 
@@ -88,12 +78,6 @@ export const MastheadItems: React.FC = () => {
               <HelpDropdown />
             </FlexItem>
 
-            {serverConfig.kialiFeatureFlags.uiDefaults?.i18n?.showSelector && (
-              <FlexItem className={languageSwitchStyle}>
-                <LanguageSwitch />
-              </FlexItem>
-            )}
-
             <FlexItem data-test="user-dropdown" className={userDropdownStyle}>
               <UserDropdown />
             </FlexItem>
diff --git a/frontend/src/components/VirtualList/Renderers.tsx b/frontend/src/components/VirtualList/Renderers.tsx
index c57d901227..d903de89c7 100644
--- a/frontend/src/components/VirtualList/Renderers.tsx
+++ b/frontend/src/components/VirtualList/Renderers.tsx
@@ -260,9 +260,7 @@ export const nsItem: Renderer<NamespaceInfo> = (ns: NamespaceInfo, _config: Reso
     >
       <PFBadge badge={badge} />
       {ns.name}
-      {ns.name === serverConfig.istioNamespace && (
-        <ControlPlaneBadge cluster={ns.cluster} annotations={ns.annotations} />
-      )}
+      {ns.name === serverConfig.istioNamespace && <ControlPlaneBadge />}
     </Td>
   );
 };
diff --git a/frontend/src/pages/Overview/ControlPlaneBadge.tsx b/frontend/src/pages/Overview/ControlPlaneBadge.tsx
index 9f15997986..84a02d3299 100644
--- a/frontend/src/pages/Overview/ControlPlaneBadge.tsx
+++ b/frontend/src/pages/Overview/ControlPlaneBadge.tsx
@@ -2,25 +2,11 @@ import { Label, Tooltip } from '@patternfly/react-core';
 import * as React from 'react';
 import { serverConfig } from '../../config';
 import { AmbientBadge } from '../../components/Ambient/AmbientBadge';
-import { RemoteClusterBadge } from './RemoteClusterBadge';
 import { Link, useLocation } from 'react-router-dom-v5-compat';
-import { IstioStatus, meshLinkStyle } from 'components/IstioStatus/IstioStatus';
-import {
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  ExclamationTriangleIcon,
-  MinusCircleIcon
-} from '@patternfly/react-icons';
+import { meshLinkStyle } from 'components/IstioStatus/IstioStatus';
 import { useKialiTranslation } from 'utils/I18nUtils';
-import { isControlPlaneAccessible } from '../../utils/MeshUtils';
-import { isRemoteCluster } from 'pages/Mesh/target/TargetPanelControlPlane';
 
-type Props = {
-  annotations?: { [key: string]: string };
-  cluster?: string;
-};
-
-export const ControlPlaneBadge: React.FC<Props> = (props: Props) => {
+export const ControlPlaneBadge: React.FC = () => {
   const { t } = useKialiTranslation();
   const { pathname } = useLocation();
 
@@ -46,24 +32,9 @@ export const ControlPlaneBadge: React.FC<Props> = (props: Props) => {
         </Label>
       </Tooltip>
 
-      {isRemoteCluster(props.annotations) && <RemoteClusterBadge />}
-
       {serverConfig.ambientEnabled && (
         <AmbientBadge tooltip={t('Istio Ambient ztunnel detected in the Control plane')}></AmbientBadge>
       )}
-
-      {!isRemoteCluster(props.annotations) && props.cluster && isControlPlaneAccessible(props.cluster) && (
-        <IstioStatus
-          icons={{
-            ErrorIcon: ExclamationCircleIcon,
-            HealthyIcon: CheckCircleIcon,
-            InfoIcon: MinusCircleIcon,
-            WarningIcon: ExclamationTriangleIcon
-          }}
-          cluster={props.cluster}
-          location={pathname}
-        />
-      )}
     </>
   );
 };
diff --git a/frontend/src/pages/Overview/OverviewPage.tsx b/frontend/src/pages/Overview/OverviewPage.tsx
index 782222c995..5552b9bab7 100644
--- a/frontend/src/pages/Overview/OverviewPage.tsx
+++ b/frontend/src/pages/Overview/OverviewPage.tsx
@@ -1313,9 +1313,7 @@ export class OverviewPageComponent extends React.Component<OverviewProps, State>
   renderNamespaceBadges = (ns: NamespaceInfo, tooltip: boolean): React.ReactNode => {
     return (
       <>
-        {ns.name === serverConfig.istioNamespace && (
-          <ControlPlaneBadge cluster={ns.cluster} annotations={ns.annotations}></ControlPlaneBadge>
-        )}
+        {ns.name === serverConfig.istioNamespace && <ControlPlaneBadge />}
 
         {ns.name !== serverConfig.istioNamespace && ns.revision && <ControlPlaneVersionBadge version={ns.revision} />}
 
diff --git a/frontend/src/pages/Overview/RemoteClusterBadge.tsx b/frontend/src/pages/Overview/RemoteClusterBadge.tsx
deleted file mode 100644
index fa86f62306..0000000000
--- a/frontend/src/pages/Overview/RemoteClusterBadge.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Label } from '@patternfly/react-core';
-import * as React from 'react';
-
-export const RemoteClusterBadge: React.FC = () => {
-  return (
-    <Label style={{ marginLeft: '0.5rem' }} color="grey" isCompact>
-      Remote Cluster
-    </Label>
-  );
-};
diff --git a/frontend/src/pages/Overview/__tests__/ControlPlaneBadge.test.tsx b/frontend/src/pages/Overview/__tests__/ControlPlaneBadge.test.tsx
index 77739da309..4dfaaa3c5e 100644
--- a/frontend/src/pages/Overview/__tests__/ControlPlaneBadge.test.tsx
+++ b/frontend/src/pages/Overview/__tests__/ControlPlaneBadge.test.tsx
@@ -3,12 +3,10 @@ import { ControlPlaneBadge } from '../ControlPlaneBadge';
 import { MemoryRouter } from 'react-router-dom-v5-compat';
 
 describe('ControlPlaneBadge', () => {
-  const controlPlaneAnnotation = 'topology.istio.io/controlPlaneClusters';
-
   it('does not show istio status for remote clusters', () => {
     const wrapper = shallow(
       <MemoryRouter>
-        <ControlPlaneBadge annotations={{ [controlPlaneAnnotation]: 'primary' }} cluster="remote" />
+        <ControlPlaneBadge />
       </MemoryRouter>
     );
 
diff --git a/frontend/src/reducers/IstioStatusState.ts b/frontend/src/reducers/IstioStatusState.ts
index 958c23d222..72f4fe9658 100644
--- a/frontend/src/reducers/IstioStatusState.ts
+++ b/frontend/src/reducers/IstioStatusState.ts
@@ -1,15 +1,12 @@
-import { ComponentStatus } from '../types/IstioStatus';
 import { KialiAppAction } from '../actions/KialiAppAction';
 import { IstioStatusActions } from '../actions/IstioStatusActions';
 import { getType } from 'typesafe-actions';
+import { ClusterStatusMap } from '../components/IstioStatus/IstioStatus';
 
-export const INITIAL_ISTIO_STATUS_STATE: ComponentStatus[] = [];
+export const INITIAL_ISTIO_STATUS_STATE: ClusterStatusMap = {};
 
 // This Reducer allows changes to the 'graphDataState' portion of Redux Store
-export const IstioStatusStateReducer = (
-  state: ComponentStatus[] = INITIAL_ISTIO_STATUS_STATE,
-  action: KialiAppAction
-): ComponentStatus[] => {
+export const IstioStatusStateReducer = (state: ClusterStatusMap = {}, action: KialiAppAction): ClusterStatusMap => {
   switch (action.type) {
     case getType(IstioStatusActions.setinfo):
       return action.payload;
diff --git a/frontend/src/services/Api.ts b/frontend/src/services/Api.ts
index e0bd6cb361..7d46f35b53 100644
--- a/frontend/src/services/Api.ts
+++ b/frontend/src/services/Api.ts
@@ -308,14 +308,8 @@ export const getOutboundTrafficPolicyMode = (): Promise<ApiResponse<OutboundTraf
   return newRequest<OutboundTrafficPolicy>(HTTP_VERBS.GET, urls.outboundTrafficPolicyMode(), {}, {});
 };
 
-export const getIstioStatus = (cluster?: string): Promise<ApiResponse<ComponentStatus[]>> => {
-  const queryParams: ClusterParam = {};
-
-  if (cluster) {
-    queryParams.clusterName = cluster;
-  }
-
-  return newRequest<ComponentStatus[]>(HTTP_VERBS.GET, urls.istioStatus(), queryParams, {});
+export const getIstioStatus = (): Promise<ApiResponse<ComponentStatus[]>> => {
+  return newRequest<ComponentStatus[]>(HTTP_VERBS.GET, urls.istioStatus(), {}, {});
 };
 
 export const getIstioCertsInfo = (): Promise<ApiResponse<CertsInfo[]>> => {
diff --git a/frontend/src/store/Selectors.ts b/frontend/src/store/Selectors.ts
index 9bc86a7192..c37d3c882c 100644
--- a/frontend/src/store/Selectors.ts
+++ b/frontend/src/store/Selectors.ts
@@ -115,7 +115,7 @@ const meshwideMTLSEnabled = (state: KialiAppState): boolean => state.meshTLSStat
 
 export const meshWideMTLSEnabledSelector = createIdentitySelector(meshwideMTLSEnabled);
 
-const istioStatus = (state: KialiAppState): ComponentStatus[] => state.istioStatus;
+const istioStatus = (state: KialiAppState): { [cluster: string]: ComponentStatus[] } => state.istioStatus;
 
 export const istioStatusSelector = createIdentitySelector(istioStatus);
 
diff --git a/frontend/src/store/Store.ts b/frontend/src/store/Store.ts
index b50c47596e..78aab5eb72 100644
--- a/frontend/src/store/Store.ts
+++ b/frontend/src/store/Store.ts
@@ -184,7 +184,7 @@ export interface KialiAppState {
   globalState: GlobalState;
   graph: GraphState;
   istioCertsInfo: CertsInfo[];
-  istioStatus: ComponentStatus[];
+  istioStatus: { [cluster: string]: ComponentStatus[] };
   mesh: MeshState;
   /** Tracing Settings */
   meshTLSStatus: TLSStatus;
diff --git a/frontend/src/types/IstioStatus.ts b/frontend/src/types/IstioStatus.ts
index 584143695c..76ba77594c 100644
--- a/frontend/src/types/IstioStatus.ts
+++ b/frontend/src/types/IstioStatus.ts
@@ -16,7 +16,16 @@ export const statusMsg = {
   [Status.Unreachable]: t('Unreachable')
 };
 
+export const statusSeverity: Record<Status, number> = {
+  [Status.Unhealthy]: 5,
+  [Status.Unreachable]: 4,
+  [Status.NotReady]: 3,
+  [Status.NotFound]: 2,
+  [Status.Healthy]: 1
+};
+
 export interface ComponentStatus {
+  cluster: string;
   is_core: boolean;
   name: string;
   status: Status;
diff --git a/handlers/istio_status.go b/handlers/istio_status.go
index d63c86fca7..c0e742eea5 100644
--- a/handlers/istio_status.go
+++ b/handlers/istio_status.go
@@ -2,9 +2,6 @@ package handlers
 
 import (
 	"net/http"
-
-	"github.com/kiali/kiali/kubernetes"
-	"github.com/kiali/kiali/util/sliceutil"
 )
 
 // IstioStatus returns a list of istio components and its status
@@ -22,13 +19,5 @@ func IstioStatus(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	queryParams := r.URL.Query()
-	cluster := clusterNameFromQuery(queryParams)
-
-	istioStatus = sliceutil.Filter(istioStatus, func(status kubernetes.ComponentStatus) bool {
-		// empty Cluster for addons
-		return status.Cluster == "" || status.Cluster == cluster
-	})
-
 	RespondWithJSON(w, http.StatusOK, istioStatus)
 }
diff --git a/kubernetes/istio.go b/kubernetes/istio.go
index 561620ea29..706a1bb1ac 100644
--- a/kubernetes/istio.go
+++ b/kubernetes/istio.go
@@ -31,8 +31,8 @@ const (
 
 type ComponentStatus struct {
 	// Cluster where this component is deployed.
-	// Can be unknown or external for external services.
-	Cluster string `json:"-"`
+	// Can be the name of external cluster
+	Cluster string `json:"cluster"`
 
 	// Namespace where the component is deployed.
 	// This field is ignored when marshalling to JSON.
diff --git a/mesh/api/api_test.go b/mesh/api/api_test.go
index 7c43a7b718..955c3f0c1b 100644
--- a/mesh/api/api_test.go
+++ b/mesh/api/api_test.go
@@ -281,26 +281,31 @@ type fakeMeshStatusGetter struct{}
 
 // mock GetStatus function to obtain fake graph component status
 func (f *fakeMeshStatusGetter) GetStatus(ctx context.Context) (kubernetes.IstioComponentStatus, error) {
+	cluster := config.Get().KubernetesConfig.ClusterName
 	return kubernetes.IstioComponentStatus{
 		kubernetes.ComponentStatus{
-			Name:   "istiod",
-			Status: kubernetes.ComponentHealthy,
-			IsCore: true,
+			Name:    "istiod",
+			Cluster: cluster,
+			Status:  kubernetes.ComponentHealthy,
+			IsCore:  true,
 		},
 		kubernetes.ComponentStatus{
-			Name:   "prometheus",
-			Status: kubernetes.ComponentHealthy,
-			IsCore: false,
+			Name:    "prometheus",
+			Cluster: cluster,
+			Status:  kubernetes.ComponentHealthy,
+			IsCore:  false,
 		},
 		kubernetes.ComponentStatus{
-			Name:   "grafana",
-			Status: kubernetes.ComponentHealthy,
-			IsCore: false,
+			Name:    "grafana",
+			Cluster: cluster,
+			Status:  kubernetes.ComponentHealthy,
+			IsCore:  false,
 		},
 		kubernetes.ComponentStatus{
-			Name:   "tracing",
-			Status: kubernetes.ComponentHealthy,
-			IsCore: false,
+			Name:    "tracing",
+			Cluster: cluster,
+			Status:  kubernetes.ComponentHealthy,
+			IsCore:  false,
 		},
 	}, nil
 }


Reviews:
user: login: nrfox
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T14:28:21Z
user: login: hhovsepy
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T14:48:16Z
user: login: nrfox
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T15:20:39Z
user: login: hhovsepy
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T16:25:57Z
user: login: hhovsepy
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T12:45:12Z
user: login: hhovsepy
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T12:45:32Z
user: login: nrfox
body: code looks good. Any new multi-cluster cypress tests that should be added for this to test the new masthead functionality?
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T15:19:09Z
user: login: nrfox
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T15:20:45Z
user: login: nrfox
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T02:18:27Z
user: login: hhovsepy
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T15:25:20Z
user: login: hhovsepy
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T15:26:33Z
user: login: hhovsepy
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T08:38:02Z
user: login: hhovsepy
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T08:38:10Z
user: login: hhovsepy
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T08:40:00Z
user: login: nrfox
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-28T09:57:31Z
user: login: ferhoyos
body: I reviewed the code and tested locally, everything looks fine for me, good job @hhovsepy :slightly_smiling_face: 

However, clarifying that this is not related to this PR, when I forced Grafana to be unreachable to trigger a warning, the Mesh page did not show this warning. Instead, it displayed a valid connection.

![image](https://github.com/user-attachments/assets/51e30963-5b1a-4b24-bcd2-f8d559d77a9d)

Does it happen the same to you?
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-28T12:54:01Z

Review comments:
diff_hunk: @@ -96,8 +108,13 @@ func (iss *IstioStatusService) getIstioComponentStatus(ctx context.Context, clus
 				IsCore:    true,
 			})
 		}
+		if cp.ManagesExternal {
+			managesExternal = true
+		}
 	}
-	if len(istiodStatus) == 0 {
+
+	// if no control plane and no any other control plane which manages external
+	if len(istiodStatus) == 0 && !managesExternal {
path: business/istio_status.go
user: login: nrfox
body: I don't think this covers the case where a controlplane may be managing an external cluster but it's not the current cluster. e.g.

You have 3 clusters: A, B, C. A manages B but nothing manages C.

I don't think you need to look at `ManagesExternal`. You just need to know if there's a controlplane managing _this_ cluster or not e.g. `if cluster not in controlPlanes.managedClusters`.
created_at: 2025-03-17T14:10:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -96,8 +108,13 @@ func (iss *IstioStatusService) getIstioComponentStatus(ctx context.Context, clus
 				IsCore:    true,
 			})
 		}
+		if cp.ManagesExternal {
+			managesExternal = true
+		}
 	}
-	if len(istiodStatus) == 0 {
+
+	// if no control plane and no any other control plane which manages external
+	if len(istiodStatus) == 0 && !managesExternal {
path: business/istio_status.go
user: login: nrfox
body: I'm also not sure if this is always an error. You could have an "observability" cluster for instance where the observability components live separate from any istio components.
created_at: 2025-03-17T14:13:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -44,25 +45,35 @@ type IstioStatusService struct {
 	workloads           *WorkloadService
 }
 
-func (iss *IstioStatusService) GetStatus(ctx context.Context) (kubernetes.IstioComponentStatus, error) {
+func (iss *IstioStatusService) GetStatus(ctx context.Context, cluster string) (kubernetes.IstioComponentStatus, error) {
path: business/istio_status.go
user: login: nrfox
body: Do we need to always pass `cluster`? This would mean that anything calling this, like the frontend, would first need the full list of clusters to pass in. For example, the `api/mesh` handler now seems like it's not working as it was before:
```
 // @ TODO multi-cluster support, loop over control planes
 gi.IstioStatusGetter.GetStatus(ctx, config.Get().KubernetesConfig.ClusterName)
```

Can we instead loop over the `iss.userClients` to get the cluster list inside of this method and always return the complete `kubernetes.IstioComponentStatus`?
created_at: 2025-03-17T14:25:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -96,8 +108,13 @@ func (iss *IstioStatusService) getIstioComponentStatus(ctx context.Context, clus
 				IsCore:    true,
 			})
 		}
+		if cp.ManagesExternal {
+			managesExternal = true
+		}
 	}
-	if len(istiodStatus) == 0 {
+
+	// if no control plane and no any other control plane which manages external
+	if len(istiodStatus) == 0 && !managesExternal {
path: business/istio_status.go
user: login: nrfox
body: A problem with showing an error when the istiod is not found is that a user may not have access to the cluster where the istiod lives so this would show an error even though the istiod does exist.
created_at: 2025-03-17T14:27:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -44,25 +45,35 @@ type IstioStatusService struct {
 	workloads           *WorkloadService
 }
 
-func (iss *IstioStatusService) GetStatus(ctx context.Context) (kubernetes.IstioComponentStatus, error) {
+func (iss *IstioStatusService) GetStatus(ctx context.Context, cluster string) (kubernetes.IstioComponentStatus, error) {
path: business/istio_status.go
user: login: hhovsepy
body: I kept the cluster param for a reason of not to change the REST API call format, where in most of the calls we provide clusterName param, also to keep the result JSON format of arrays of component statuses.
created_at: 2025-03-17T14:48:16Z
author_association: CONTRIBUTOR
diff_hunk: @@ -44,25 +45,35 @@ type IstioStatusService struct {
 	workloads           *WorkloadService
 }
 
-func (iss *IstioStatusService) GetStatus(ctx context.Context) (kubernetes.IstioComponentStatus, error) {
+func (iss *IstioStatusService) GetStatus(ctx context.Context, cluster string) (kubernetes.IstioComponentStatus, error) {
path: business/istio_status.go
user: login: nrfox
body: It can still be an array of component status. Isn't `Cluster` a field of each component status? So we don't need to separate by cluster before returning to the frontend.
created_at: 2025-03-17T15:20:39Z
author_association: CONTRIBUTOR
diff_hunk: @@ -96,8 +108,13 @@ func (iss *IstioStatusService) getIstioComponentStatus(ctx context.Context, clus
 				IsCore:    true,
 			})
 		}
+		if cp.ManagesExternal {
+			managesExternal = true
+		}
 	}
-	if len(istiodStatus) == 0 {
+
+	// if no control plane and no any other control plane which manages external
+	if len(istiodStatus) == 0 && !managesExternal {
path: business/istio_status.go
user: login: hhovsepy
body: do we have somewhere documented all those combinations? or it is only here? https://istio.io/latest/docs/setup/install/multicluster/
created_at: 2025-03-17T16:25:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -44,25 +45,35 @@ type IstioStatusService struct {
 	workloads           *WorkloadService
 }
 
-func (iss *IstioStatusService) GetStatus(ctx context.Context) (kubernetes.IstioComponentStatus, error) {
+func (iss *IstioStatusService) GetStatus(ctx context.Context, cluster string) (kubernetes.IstioComponentStatus, error) {
path: business/istio_status.go
user: login: hhovsepy
body: approached
created_at: 2025-03-18T12:45:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -96,8 +108,13 @@ func (iss *IstioStatusService) getIstioComponentStatus(ctx context.Context, clus
 				IsCore:    true,
 			})
 		}
+		if cp.ManagesExternal {
+			managesExternal = true
+		}
 	}
-	if len(istiodStatus) == 0 {
+
+	// if no control plane and no any other control plane which manages external
+	if len(istiodStatus) == 0 && !managesExternal {
path: business/istio_status.go
user: login: hhovsepy
body: have changed the logic
created_at: 2025-03-18T12:45:31Z
author_association: CONTRIBUTOR
diff_hunk: @@ -96,8 +108,13 @@ func (iss *IstioStatusService) getIstioComponentStatus(ctx context.Context, clus
 				IsCore:    true,
 			})
 		}
+		if cp.ManagesExternal {
+			managesExternal = true
+		}
 	}
-	if len(istiodStatus) == 0 {
+
+	// if no control plane and no any other control plane which manages external
+	if len(istiodStatus) == 0 && !managesExternal {
path: business/istio_status.go
user: login: nrfox
body: > do we have somewhere documented all those combinations? or it is only here? https://istio.io/latest/docs/setup/install/multicluster/

It's just there but there but you can also combine some of those e.g. external control plane + primary-remote.
created_at: 2025-03-18T15:20:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,38 @@
+@masthead
+@multi-cluster
+# don't change first line of this file - the tag is used for the test scripts to identify the test suite
+
+Feature: Kiali masthead cluster components status
+
+  User wants to verify the Kiali masthead content
+
+  Background:
+    Given user is at administrator perspective
+    And user is at the "overview" page
+
+  @multi-cluster
+  Scenario: Cluster components healthy
+    Then user sees "east" cluster label with a "success" icon
+    When user hovers over the cluster icon
+    Then user sees a tooltip with text "east"
+    Then user sees a tooltip with text "west"
+    Then user does not see any "Not" in the tooltip
+    Then user does not see any "Unreachable" in the tooltip
+    Then user hovers out the cluster icon
path: frontend/cypress/integration/featureFiles/masthead.feature
user: login: nrfox
body: What is this last assertion testing? Seems like it performs an action but does no assertions afterward?
created_at: 2025-03-26T02:10:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,38 @@
+@masthead
+@multi-cluster
+# don't change first line of this file - the tag is used for the test scripts to identify the test suite
+
+Feature: Kiali masthead cluster components status
+
+  User wants to verify the Kiali masthead content
+
+  Background:
+    Given user is at administrator perspective
+    And user is at the "overview" page
+
+  @multi-cluster
+  Scenario: Cluster components healthy
+    Then user sees "east" cluster label with a "success" icon
+    When user hovers over the cluster icon
+    Then user sees a tooltip with text "east"
+    Then user sees a tooltip with text "west"
+    Then user does not see any "Not" in the tooltip
+    Then user does not see any "Unreachable" in the tooltip
+    Then user hovers out the cluster icon
+
+  @multi-cluster
+  @component-health
+  Scenario: Istio components unhealthy
+    When user scales to "0" the "prometheus" in namespace "istio-system"
path: frontend/cypress/integration/featureFiles/masthead.feature
user: login: nrfox
body: A faster way to do this is to just intercept and mock the status response to change one of them to unhealthy. I'm worried that actually scaling prom up/down could affect other tests after this one that rely on metrics data like graph tests.
created_at: 2025-03-26T02:11:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,38 @@
+@masthead
+@multi-cluster
+# don't change first line of this file - the tag is used for the test scripts to identify the test suite
+
+Feature: Kiali masthead cluster components status
+
+  User wants to verify the Kiali masthead content
+
+  Background:
+    Given user is at administrator perspective
+    And user is at the "overview" page
+
+  @multi-cluster
+  Scenario: Cluster components healthy
+    Then user sees "east" cluster label with a "success" icon
+    When user hovers over the cluster icon
+    Then user sees a tooltip with text "east"
+    Then user sees a tooltip with text "west"
+    Then user does not see any "Not" in the tooltip
+    Then user does not see any "Unreachable" in the tooltip
+    Then user hovers out the cluster icon
+
+  @multi-cluster
+  @component-health
+  Scenario: Istio components unhealthy
+    When user scales to "0" the "prometheus" in namespace "istio-system"
+    Then the user refreshes the page
+    Then user sees "east" cluster label with a "warning" icon
+    When user hovers over the cluster icon
+    Then user sees a tooltip with text "Unreachable"
+    Then user hovers out the cluster icon
+    When user scales to "1" the "prometheus" in namespace "istio-system"
+    Then the user refreshes the page
+    Then user sees "east" cluster label with a "success" icon
+    When user hovers over the cluster icon
+    Then user does not see any "Not" in the tooltip
+    Then user does not see any "Unreachable" in the tooltip
+    Then user hovers out the cluster icon
path: frontend/cypress/integration/featureFiles/masthead.feature
user: login: nrfox
body: Same question here about this action at the end. Seems like it's not being used.
created_at: 2025-03-26T02:14:16Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,38 @@
+@masthead
+@multi-cluster
+# don't change first line of this file - the tag is used for the test scripts to identify the test suite
+
+Feature: Kiali masthead cluster components status
+
+  User wants to verify the Kiali masthead content
+
+  Background:
+    Given user is at administrator perspective
+    And user is at the "overview" page
+
+  @multi-cluster
+  Scenario: Cluster components healthy
+    Then user sees "east" cluster label with a "success" icon
+    When user hovers over the cluster icon
+    Then user sees a tooltip with text "east"
+    Then user sees a tooltip with text "west"
+    Then user does not see any "Not" in the tooltip
+    Then user does not see any "Unreachable" in the tooltip
+    Then user hovers out the cluster icon
+
+  @multi-cluster
+  @component-health
+  Scenario: Istio components unhealthy
+    When user scales to "0" the "prometheus" in namespace "istio-system"
path: frontend/cypress/integration/featureFiles/masthead.feature
user: login: hhovsepy
body: by mocking, we could not really test all those changes in the backend, it will be only UI functionality check,
but I agree that up/down of prometheus can cause some flake tests in backend, maybe I can up/down another component which is less sensitive, for instance 'grafana'
created_at: 2025-03-26T15:25:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,38 @@
+@masthead
+@multi-cluster
+# don't change first line of this file - the tag is used for the test scripts to identify the test suite
+
+Feature: Kiali masthead cluster components status
+
+  User wants to verify the Kiali masthead content
+
+  Background:
+    Given user is at administrator perspective
+    And user is at the "overview" page
+
+  @multi-cluster
+  Scenario: Cluster components healthy
+    Then user sees "east" cluster label with a "success" icon
+    When user hovers over the cluster icon
+    Then user sees a tooltip with text "east"
+    Then user sees a tooltip with text "west"
+    Then user does not see any "Not" in the tooltip
+    Then user does not see any "Unreachable" in the tooltip
+    Then user hovers out the cluster icon
path: frontend/cypress/integration/featureFiles/masthead.feature
user: login: hhovsepy
body: This was like a cleanup, to close the tooltip, will move it to separate after
created_at: 2025-03-26T15:26:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,38 @@
+@masthead
+@multi-cluster
+# don't change first line of this file - the tag is used for the test scripts to identify the test suite
+
+Feature: Kiali masthead cluster components status
+
+  User wants to verify the Kiali masthead content
+
+  Background:
+    Given user is at administrator perspective
+    And user is at the "overview" page
+
+  @multi-cluster
+  Scenario: Cluster components healthy
+    Then user sees "east" cluster label with a "success" icon
+    When user hovers over the cluster icon
+    Then user sees a tooltip with text "east"
+    Then user sees a tooltip with text "west"
+    Then user does not see any "Not" in the tooltip
+    Then user does not see any "Unreachable" in the tooltip
+    Then user hovers out the cluster icon
+
+  @multi-cluster
+  @component-health
+  Scenario: Istio components unhealthy
+    When user scales to "0" the "prometheus" in namespace "istio-system"
+    Then the user refreshes the page
+    Then user sees "east" cluster label with a "warning" icon
+    When user hovers over the cluster icon
+    Then user sees a tooltip with text "Unreachable"
+    Then user hovers out the cluster icon
+    When user scales to "1" the "prometheus" in namespace "istio-system"
+    Then the user refreshes the page
+    Then user sees "east" cluster label with a "success" icon
+    When user hovers over the cluster icon
+    Then user does not see any "Not" in the tooltip
+    Then user does not see any "Unreachable" in the tooltip
+    Then user hovers out the cluster icon
path: frontend/cypress/integration/featureFiles/masthead.feature
user: login: hhovsepy
body: removed
created_at: 2025-03-27T08:38:02Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,38 @@
+@masthead
+@multi-cluster
+# don't change first line of this file - the tag is used for the test scripts to identify the test suite
+
+Feature: Kiali masthead cluster components status
+
+  User wants to verify the Kiali masthead content
+
+  Background:
+    Given user is at administrator perspective
+    And user is at the "overview" page
+
+  @multi-cluster
+  Scenario: Cluster components healthy
+    Then user sees "east" cluster label with a "success" icon
+    When user hovers over the cluster icon
+    Then user sees a tooltip with text "east"
+    Then user sees a tooltip with text "west"
+    Then user does not see any "Not" in the tooltip
+    Then user does not see any "Unreachable" in the tooltip
+    Then user hovers out the cluster icon
path: frontend/cypress/integration/featureFiles/masthead.feature
user: login: hhovsepy
body: removed
created_at: 2025-03-27T08:38:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,38 @@
+@masthead
+@multi-cluster
+# don't change first line of this file - the tag is used for the test scripts to identify the test suite
+
+Feature: Kiali masthead cluster components status
+
+  User wants to verify the Kiali masthead content
+
+  Background:
+    Given user is at administrator perspective
+    And user is at the "overview" page
+
+  @multi-cluster
+  Scenario: Cluster components healthy
+    Then user sees "east" cluster label with a "success" icon
+    When user hovers over the cluster icon
+    Then user sees a tooltip with text "east"
+    Then user sees a tooltip with text "west"
+    Then user does not see any "Not" in the tooltip
+    Then user does not see any "Unreachable" in the tooltip
+    Then user hovers out the cluster icon
+
+  @multi-cluster
+  @component-health
+  Scenario: Istio components unhealthy
+    When user scales to "0" the "prometheus" in namespace "istio-system"
path: frontend/cypress/integration/featureFiles/masthead.feature
user: login: hhovsepy
body: @nrfox thanks for the review, made 'grafana' up/down scale instead of 'prometheus', and '@component-health-upscale' after operaton upscales it.
created_at: 2025-03-27T08:40:00Z
author_association: CONTRIBUTOR

PR comments:
user: login: hhovsepy
created_at: 2025-03-12T11:27:45Z
body: ![Screenshot from 2025-03-12 12-27-22](https://github.com/user-attachments/assets/51a9aa12-8082-4854-9520-cce29144aa14)
![Screenshot from 2025-03-12 12-27-17](https://github.com/user-attachments/assets/ffc159d8-ce88-4b21-92fa-51c56cf9a630)

author_association: CONTRIBUTOR
user: login: hhovsepy
created_at: 2025-03-17T11:23:37Z
body: ![Screenshot from 2025-03-17 12-13-23](https://github.com/user-attachments/assets/c18ba1d2-dfc4-4547-86ba-947dcd3f2e5c)
![Screenshot from 2025-03-17 12-12-44](https://github.com/user-attachments/assets/316d0a20-4baf-474d-8e9f-2fbf85744fc6)

author_association: CONTRIBUTOR
user: login: hhovsepy
created_at: 2025-03-18T15:21:12Z
body: > code looks good. Any new multi-cluster cypress tests that should be added for this to test the new masthead functionality?

there are existing multicluster tests which are passing now, when all components are running fine, can be added a new ones to check that all cluster are in tooltip

author_association: CONTRIBUTOR
user: login: nrfox
created_at: 2025-03-18T19:54:36Z
body: > can be added a new ones to check that all cluster are in tooltip

Since we're adding new functionality, it'd be good to also add new tests to cover it.
author_association: CONTRIBUTOR
user: login: hhovsepy
created_at: 2025-03-28T12:56:43Z
body: > I reviewed the code and tested locally, everything looks fine for me, good job @hhovsepy 🙂
> 
> However, clarifying that this is not related to this PR, when I forced Grafana to be unreachable to trigger a warning, the Mesh page did not show this warning. Instead, it displayed a valid connection.
> Does it happen the same to you?

Thanks for the review and cooperation @ferhoyos , yes this happens to me as well. Probably we need another issue logged.

author_association: CONTRIBUTOR