ui: Use dashboard UIDs for stable links

TODO: add a simple unit-test to verify the UIDs are aligned with `charts/grafana_dashboard_uids.json` Fixes: #3475
scality · Aug 5, 2021 · fc0fa3b · fc0fa3b
1 parent a6f8b5f
commit fc0fa3b
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 8 deletions.
diff --git a/ui/cypress/integration/node/nodetabs.spec.js b/ui/cypress/integration/node/nodetabs.spec.js
@@ -87,7 +87,7 @@ describe('Node page metrics tab', () => {
       .should('have.attr', 'href')
       .and(
         'to.have.string',
-        'grafana/dashboard/db/nodes-detailed?var-DS_PROMETHEUS=Prometheus&var-job=node-exporter&var-name=zenkotda-master-0.novalocal',
+        'grafana/d/node-exporter-full?var-DS_PROMETHEUS=Prometheus&var-job=node-exporter&var-name=zenkotda-master-0.novalocal',
       );
   });
 

diff --git a/ui/cypress/integration/volume/volumetabs.spec.js b/ui/cypress/integration/volume/volumetabs.spec.js
@@ -97,7 +97,7 @@ describe('Volume page metrics tab', () => {
       .should('have.attr', 'href')
       .and(
         'to.have.string',
-        'grafana/dashboard/db/kubernetes-persistent-volumes?var-namespace=metalk8s-monitoring&var-volume=alertmanager-prometheus-operator-alertmanager-db-alertmanager-prometheus-operator-alertmanager-0',
+        'grafana/d/919b92a8e8041bd567af9edab12c840c?var-namespace=metalk8s-monitoring&var-volume=alertmanager-prometheus-operator-alertmanager-db-alertmanager-prometheus-operator-alertmanager-0',
       );
   });
 

diff --git a/ui/src/components/DashboardMetrics.js b/ui/src/components/DashboardMetrics.js
@@ -19,6 +19,7 @@ import {
   lineColor4,
   SAMPLE_DURATION_LAST_SEVEN_DAYS,
   REFRESH_METRICS_GRAPH,
+  GRAFANA_DASHBOARDS,
 } from '../constants';
 import { getTooltipConfig } from './LinechartSpec';
 import {
@@ -168,7 +169,7 @@ const DashboardMetrics = () => {
             variant={'buttonSecondary'}
             icon={<i className="fas fa-external-link-alt" />}
             size={'small'}
-            href={`${configQuery.data.url_grafana}/dashboard/db/nodes-detailed`}
+            href={`${configQuery.data.url_grafana}/d/${GRAFANA_DASHBOARDS.nodes}`}
             target="_blank"
             rel="noopener noreferrer"
             data-cy="advanced_metrics_node_detailed"

diff --git a/ui/src/components/NodePagePartitionTab.js b/ui/src/components/NodePagePartitionTab.js
@@ -6,7 +6,7 @@ import { NodeTab } from './style/CommonLayoutStyle';
 import { useIntl } from 'react-intl';
 import { padding } from '@scality/core-ui/dist/style/theme';
 import NodePartitionTable from './NodePartitionTable';
-import { PORT_NODE_EXPORTER } from '../constants';
+import { GRAFANA_DASHBOARDS, PORT_NODE_EXPORTER } from '../constants';
 import { useTypedSelector } from '../hooks';
 
 const TitleContainer = styled.div`
@@ -43,7 +43,7 @@ const NodePagePartitionTab = (props: Object) => {
             size={'small'}
             // We can't redirect to the Node(detailed) Filesystem Detail catagory.
             // So we hardcode the panel ID to redirect to 'File Nodes Free' chart
-            href={`${api.url_grafana}/dashboard/db/nodes-detailed?var-DS_PROMETHEUS=Prometheus&var-job=node-exporter&var-name=${hostnameLabel}&viewPanel=41`}
+            href={`${api.url_grafana}/d/${GRAFANA_DASHBOARDS.nodes}?var-DS_PROMETHEUS=Prometheus&var-job=node-exporter&var-name=${hostnameLabel}&viewPanel=41`}
             target="_blank"
             rel="noopener noreferrer"
             data-cy="advanced_metrics_node_detailed_file_node_free"

diff --git a/ui/src/components/NodePagePodsTab.js b/ui/src/components/NodePagePodsTab.js
@@ -13,6 +13,7 @@ import {
   STATUS_PENDING,
   STATUS_FAILED,
   STATUS_UNKNOWN,
+  GRAFANA_DASHBOARDS,
 } from '../constants';
 import { useIntl } from 'react-intl';
 
@@ -199,7 +200,7 @@ const NodePagePodsTab = (props) => {
               }
             >
               <ExternalLink
-                href={`${config.api.url_grafana}/dashboard/db/logs?orgId=1&var-logs=Loki&var-logmetrics=Prometheus&var-metrics=Prometheus&var-podlogs=.*&var-systemlogs=.%2B&var-deployment=calico-kube-controllers&var-pod=${value}`}
+                href={`${config.api.url_grafana}/d/${GRAFANA_DASHBOARDS.logs}?orgId=1&var-logs=Loki&var-logmetrics=Prometheus&var-metrics=Prometheus&var-podlogs=.*&var-systemlogs=.%2B&var-deployment=calico-kube-controllers&var-pod=${value}`}
                 target="_blank"
                 rel="noopener noreferrer"
               >

diff --git a/ui/src/components/VolumeMetricsTab.js b/ui/src/components/VolumeMetricsTab.js
@@ -26,6 +26,7 @@ import {
   SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
   SAMPLE_FREQUENCY_LAST_ONE_HOUR,
   queryTimeSpansCodes,
+  GRAFANA_DASHBOARDS,
 } from '../constants';
 import { useIntl } from 'react-intl';
 import {
@@ -320,7 +321,7 @@ const MetricsTab = (props) => {
               onClick={() => {}}
               icon={<i className="fas fa-external-link-alt" />}
               size={'small'}
-              href={`${config.api.url_grafana}/dashboard/db/kubernetes-persistent-volumes?var-namespace=${volumeNamespace}&var-volume=${volumePVCName}`}
+              href={`${config.api.url_grafana}/d/${GRAFANA_DASHBOARDS.volumes}?var-namespace=${volumeNamespace}&var-volume=${volumePVCName}`}
               target="_blank"
               rel="noopener noreferrer"
               data-cy="advanced_metrics_volume_detailed"

diff --git a/ui/src/constants.js b/ui/src/constants.js
@@ -124,3 +124,10 @@ export const lineColor1 = '#245A83';
 export const lineColor2 = '#808080';
 export const lineColor3 = '#A04EC9';
 export const lineColor4 = '#C6B38A';
+
+// Grafana dashboard UIDs (for stable links)
+export const GRAFANA_DASHBOARDS = {
+  logs: "a7e130cb82be229d6f3edbfd0a438001",
+  nodes: "node-exporter-full",
+  volumes: "919b92a8e8041bd567af9edab12c840c",
+};
diff --git a/ui/src/containers/NodePageMetricsTab.js b/ui/src/containers/NodePageMetricsTab.js
@@ -38,6 +38,7 @@ import {
   SAMPLE_FREQUENCY_LAST_ONE_HOUR,
   queryTimeSpansCodes,
   PORT_NODE_EXPORTER,
+  GRAFANA_DASHBOARDS,
 } from '../constants';
 import { useIntl } from 'react-intl';
 import { useTypedSelector } from '../hooks';
@@ -531,7 +532,7 @@ const NodePageMetricsTab = ({
             variant={'buttonSecondary'}
             icon={<i className="fas fa-external-link-alt" />}
             size={'small'}
-            href={`${api.url_grafana}/dashboard/db/nodes-detailed?var-DS_PROMETHEUS=Prometheus&var-job=node-exporter&var-name=${hostnameLabel}`}
+            href={`${api.url_grafana}/d/${GRAFANA_DASHBOARDS.nodes}?var-DS_PROMETHEUS=Prometheus&var-job=node-exporter&var-name=${hostnameLabel}`}
             target="_blank"
             rel="noopener noreferrer"
             data-cy="advanced_metrics_node_detailed"