Fix misleading no metrics message (#5240)

* Add NoMetrics style module

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Add Open Cluster Settings link

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fine-tune NoMetrics layout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Add test for clicking Open Settings link

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Add data-testid

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Use navigateToEntitySettings instead of broadcastMessage

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix test selector

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+cluster/cluster-no-metrics.module.scss

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.ClusterNoMetrics {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.7;
+  flex-grow: 1;
+
+  .link {
+    color: var(--blue);
+    cursor: pointer;
+  }
+}

src/renderer/components/+cluster/cluster-no-metrics.tsx

@@ -3,20 +3,53 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import styles from "./cluster-no-metrics.module.scss";
+
 import React from "react";
 import { Icon } from "../icon";
 import { cssNames } from "../../utils";
+import type { NavigateToEntitySettings } from "../../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import navigateToEntitySettingsInjectable from "../../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
+import hostedClusterInjectable from "../../../common/cluster-store/hosted-cluster.injectable";
 
 export interface ClusterNoMetricsProps {
   className: string;
 }
 
-export function ClusterNoMetrics({ className }: ClusterNoMetricsProps) {
+interface Dependencies {
+  navigateToEntitySettings: NavigateToEntitySettings;
+  clusterId: string | undefined;
+}
+
+export function NonInjectedClusterNoMetrics({ className, navigateToEntitySettings, clusterId }: Dependencies & ClusterNoMetricsProps) {
+  function openMetricSettingsPage() {
+    if (clusterId) {
+      navigateToEntitySettings(clusterId, "metrics");
+    }
+  }
+
   return (
-    <div className={cssNames("ClusterNoMetrics flex column box grow justify-center align-center", className)}>
+    <div className={cssNames(styles.ClusterNoMetrics, className)} data-testid="no-metrics-message">
       <Icon material="info"/>
       <p>Metrics are not available due to missing or invalid Prometheus configuration.</p>
-      <p>Right click cluster icon to open cluster settings.</p>
+      <p><span className={styles.link} onClick={openMetricSettingsPage}>Open cluster settings</span></p>
     </div>
   );
 }
+
+export const ClusterNoMetrics = withInjectables<Dependencies, ClusterNoMetricsProps>(
+  NonInjectedClusterNoMetrics,
+
+  {
+    getProps: (di, props) => {
+      const cluster = di.inject(hostedClusterInjectable);
+
+      return {
+        navigateToEntitySettings: di.inject(navigateToEntitySettingsInjectable),
+        clusterId: cluster?.id,
+        ...props,
+      };
+    },
+  },
+);

src/renderer/components/+cluster/cluster-pie-charts.module.scss

@@ -7,7 +7,7 @@
   background: var(--contentColor);
   min-height: 280px;
   text-align: center;
-  padding: calc(var(--padding) * 2) 0;
+  padding: calc(var(--padding) * 2);
 }
 
 .chart {
@@ -15,3 +15,8 @@
   background: var(--contentColor);
   padding: calc(var(--padding) * 2) var(--padding);
 }
+
+.noMetrics {
+  display: flex;
+  flex-grow: 1;
+}

src/renderer/components/+cluster/cluster-pie-charts.tsx

@@ -232,7 +232,11 @@ const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependen
     const { memoryCapacity, cpuCapacity, podCapacity } = getMetricLastPoints(clusterOverviewStore.metrics);
 
     if (!memoryCapacity || !cpuCapacity || !podCapacity) {
-      return <ClusterNoMetrics className={styles.empty}/>;
+      return (
+        <div className={styles.noMetrics}>
+          <ClusterNoMetrics className={styles.empty}/>
+        </div>
+      );
     }
 
     return renderCharts();