diff --git a/integration/__tests__/cluster-pages.tests.ts b/integration/__tests__/cluster-pages.tests.ts index 0027588298..981628b1ba 100644 --- a/integration/__tests__/cluster-pages.tests.ts +++ b/integration/__tests__/cluster-pages.tests.ts @@ -39,6 +39,11 @@ utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => { await frame.waitForSelector(`.Menu >> text="Remove"`); }); + it("opens cluster settings by clicking link in no-metrics area", async () => { + await frame.locator("text=Open cluster settings >> nth=0").click(); + await window.waitForSelector(`[data-testid="metrics-header"]`); + }); + it( "should navigate around common cluster pages", diff --git a/src/renderer/components/+cluster/cluster-no-metrics.module.scss b/src/renderer/components/+cluster/cluster-no-metrics.module.scss new file mode 100644 index 0000000000..2ad031f434 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/renderer/components/+cluster/cluster-no-metrics.tsx b/src/renderer/components/+cluster/cluster-no-metrics.tsx index c8638c2602..5c981008be 100644 --- a/src/renderer/components/+cluster/cluster-no-metrics.tsx +++ b/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 ( -
+

Metrics are not available due to missing or invalid Prometheus configuration.

-

Right click cluster icon to open cluster settings.

+

Open cluster settings

); } + +export const ClusterNoMetrics = withInjectables( + NonInjectedClusterNoMetrics, + + { + getProps: (di, props) => { + const cluster = di.inject(hostedClusterInjectable); + + return { + navigateToEntitySettings: di.inject(navigateToEntitySettingsInjectable), + clusterId: cluster?.id, + ...props, + }; + }, + }, +); diff --git a/src/renderer/components/+cluster/cluster-pie-charts.module.scss b/src/renderer/components/+cluster/cluster-pie-charts.module.scss index abedbb7038..9ec9564da0 100644 --- a/src/renderer/components/+cluster/cluster-pie-charts.module.scss +++ b/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; +} diff --git a/src/renderer/components/+cluster/cluster-pie-charts.tsx b/src/renderer/components/+cluster/cluster-pie-charts.tsx index 259a0e4741..3121904e08 100644 --- a/src/renderer/components/+cluster/cluster-pie-charts.tsx +++ b/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 ; + return ( +
+ +
+ ); } return renderCharts();