feat(cc-tile-metrics)!: add the ability to hide the grafana link

BREAKING CHANGE: the smart context has changed
- `grafanaLink` optional object property has been added,
- `consoleGrafanaLink` property has been moved to `grafanaLink.console`,
- `grafanaBaseLink` property has been moved to `grafanaLink.base`.

Author: pdesoyres-cc

src/components/cc-tile-metrics/cc-tile-metrics.js

@@ -281,7 +281,22 @@ export class CcTileMetrics extends LitElement {
     const cpuColorType = this.metricsState.type === 'loaded' ? this._getColorLegend(lastCpuValue) : SKELETON_COLOR;
     const memColorType = this.metricsState.type === 'loaded' ? this._getColorLegend(lastMemValue) : SKELETON_COLOR;
 
-    const grafanaLink = this.grafanaLinkState.type === 'loaded' ? this.grafanaLinkState.link : null;
+    const links = [];
+    if (this.grafanaLinkState.type === 'loaded') {
+      links.push(
+        ccLink(
+          this.grafanaLinkState.link,
+          i18n('cc-tile-metrics.grafana'),
+          skeleton,
+          i18n('cc-tile-metrics.link-to-grafana'),
+        ),
+      );
+    }
+    if (!isStringEmpty(this.metricsLink)) {
+      links.push(
+        ccLink(this.metricsLink, i18n('cc-tile-metrics.metrics-link'), false, i18n('cc-tile-metrics.link-to-metrics')),
+      );
+    }
 
     const panel = this._getCurrentPanel();
 
@@ -375,26 +390,14 @@ export class CcTileMetrics extends LitElement {
 
       <div class="tile_docs ${classMap({ 'tile--hidden': panel !== 'docs' })}">
         ${i18n('cc-tile-metrics.docs.msg')}
-        <div class="docs-links">
-          <p>${i18n('cc-tile-metrics.docs.more-metrics')}</p>
-          <ul>
-            <li>
-              ${ccLink(grafanaLink, i18n('cc-tile-metrics.grafana'), skeleton, i18n('cc-tile-metrics.link-to-grafana'))}
-            </li>
-            ${!isStringEmpty(this.metricsLink)
-              ? html`
-                  <li>
-                    ${ccLink(
-                      this.metricsLink,
-                      i18n('cc-tile-metrics.metrics-link'),
-                      false,
-                      i18n('cc-tile-metrics.link-to-metrics'),
-                    )}
-                  </li>
-                `
-              : ''}
-          </ul>
-        </div>
+        ${links.length > 0
+          ? html`<div class="docs-links">
+              <p>${i18n('cc-tile-metrics.docs.more-metrics')}</p>
+              <ul>
+                ${links.map((link) => html`<li>${link}</li>`)}
+              </ul>
+            </div>`
+          : ''}
       </div>
     `;
   }

src/components/cc-tile-metrics/cc-tile-metrics.smart.js

@@ -21,14 +21,13 @@ defineSmartComponent({
     apiConfig: { type: Object },
     ownerId: { type: String },
     appId: { type: String },
-    consoleGrafanaLink: { type: String },
-    grafanaBaseLink: { type: String },
+    grafanaLink: { type: Object, optional: true },
   },
   /**
    * @param {OnContextUpdateArgs} args
    */
   onContextUpdate({ context, updateComponent, signal }) {
-    const { apiConfig, ownerId, appId, grafanaBaseLink, consoleGrafanaLink } = context;
+    const { apiConfig, ownerId, appId, grafanaLink } = context;
 
     updateComponent('metricsState', { type: 'loading' });
 
@@ -48,14 +47,19 @@ defineSmartComponent({
         updateComponent('metricsState', { type: 'error' });
       });
 
-    fetchGrafanaAppLink({ apiConfig, ownerId, appId, grafanaBaseLink, signal })
-      .then((grafanaAppLink) => {
-        updateComponent('grafanaLinkState', { type: 'loaded', link: grafanaAppLink });
-      })
-      .catch(() => {
-        // If Grafana is not enabled we fallback to the Console Grafana page
-        updateComponent('grafanaLinkState', { type: 'loaded', link: consoleGrafanaLink });
-      });
+    if (grafanaLink == null) {
+      updateComponent('grafanaLinkState', { type: 'hidden' });
+    } else {
+      updateComponent('grafanaLinkState', { type: 'loading' });
+      fetchGrafanaAppLink({ apiConfig, ownerId, appId, grafanaBaseLink: grafanaLink.base, signal })
+        .then((grafanaAppLink) => {
+          updateComponent('grafanaLinkState', { type: 'loaded', link: grafanaAppLink });
+        })
+        .catch(() => {
+          // If Grafana is not enabled we fallback to the Console Grafana page
+          updateComponent('grafanaLinkState', { type: 'loaded', link: grafanaLink.console });
+        });
+    }
   },
 });
 

src/components/cc-tile-metrics/cc-tile-metrics.stories.js

@@ -105,6 +105,52 @@ export const defaultStory = makeStory(conf, {
   })),
 });
 
+export const hiddenGrafanaLink = makeStory(conf, {
+  /** @type {Array<Partial<CcTileMetrics>>} */
+  items: baseItems.map((item) => ({
+    ...item,
+    grafanaLinkState: { type: 'hidden' },
+    metricsState: {
+      type: 'loaded',
+      metricsData: {
+        cpuMetrics: addTimestamp(fakeMetricData(24, 25)),
+        memMetrics: addTimestamp(fakeMetricData(24, 16)),
+      },
+    },
+  })),
+});
+
+export const hiddenMetricsLink = makeStory(conf, {
+  /** @type {Array<Partial<CcTileMetrics>>} */
+  items: baseItems.map((item) => ({
+    ...item,
+    metricsLink: null,
+    metricsState: {
+      type: 'loaded',
+      metricsData: {
+        cpuMetrics: addTimestamp(fakeMetricData(24, 25)),
+        memMetrics: addTimestamp(fakeMetricData(24, 16)),
+      },
+    },
+  })),
+});
+
+export const hiddenGrafanaAndMetricsLink = makeStory(conf, {
+  /** @type {Array<Partial<CcTileMetrics>>} */
+  items: baseItems.map((item) => ({
+    ...item,
+    grafanaLinkState: { type: 'hidden' },
+    metricsLink: null,
+    metricsState: {
+      type: 'loaded',
+      metricsData: {
+        cpuMetrics: addTimestamp(fakeMetricData(24, 25)),
+        memMetrics: addTimestamp(fakeMetricData(24, 16)),
+      },
+    },
+  })),
+});
+
 export const loading = makeStory(conf, {
   /** @type {Array<Partial<CcTileMetrics>>} */
   items: baseItems.map((item) => ({

src/components/cc-tile-metrics/cc-tile-metrics.types.d.ts

@@ -33,7 +33,10 @@ export interface MetricsData {
   memMetrics: Metric[];
 }
 
-export type TileMetricsGrafanaLinkState = TileMetricsGrafanaLinkStateLoaded | TileMetricsGrafanaLinkStateLoading;
+export type TileMetricsGrafanaLinkState =
+  | TileMetricsGrafanaLinkStateLoaded
+  | TileMetricsGrafanaLinkStateLoading
+  | TileMetricsGrafanaLinkStateHidden;
 
 export interface TileMetricsGrafanaLinkStateLoaded {
   type: 'loaded';
@@ -44,6 +47,10 @@ export interface TileMetricsGrafanaLinkStateLoading {
   type: 'loading';
 }
 
+export interface TileMetricsGrafanaLinkStateHidden {
+  type: 'hidden';
+}
+
 // this is what we retrieve directly from the API
 export interface RawMetric {
   data: { timestamp: number; value: string }[];