From 786b67c9e0a80c4ae830ba356a0b1d929acc0035 Mon Sep 17 00:00:00 2001
From: Cody Jackson <sxenog@gmail.com>
Date: Thu, 18 Mar 2021 13:49:21 -0700
Subject: [PATCH 1/2] Adding grafana graphs to the explorer index

---
 components/Accordion.vue | 53 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 components/Accordion.vue

diff --git a/components/Accordion.vue b/components/Accordion.vue
new file mode 100644
index 0000000000..1306c39ab8
--- /dev/null
+++ b/components/Accordion.vue
@@ -0,0 +1,53 @@
+<script>
+export default {
+  props:      {
+    expandedInitially: {
+      type:     Boolean,
+      default: false
+    },
+    title: {
+      type:     String,
+      default: null
+    },
+  },
+
+  data() {
+    return {
+      expanded:     this.expandedInitially,
+      expandedOnce: this.expandedInitially
+    };
+  },
+
+  methods: {
+    toggle(ev) {
+      ev.preventDefault();
+      this.$set(this, 'expanded', !this.expanded);
+      this.$set(this, 'expandedOnce', !this.expanded || this.expandedOnce);
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="accordion">
+    <div class="heading" @click="toggle">
+      <h3>{{ title }}</h3>
+      <a v-if="expanded" href="#">COLLAPSE</a>
+      <a v-else href="#">EXPAND</a>
+    </div>
+    <hr class="divider" />
+    <div v-if="expanded || expandedOnce" v-show="expanded" class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.heading {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+}
+</style>

From 5a3a86149aeb3d40a2951e88cad511a9bd827098 Mon Sep 17 00:00:00 2001
From: Cody Jackson <sxenog@gmail.com>
Date: Tue, 13 Apr 2021 08:58:19 -0700
Subject: [PATCH 2/2] Adding metrics to workloads, pods and nodes

rancher/dashboard#2678
---
 assets/translations/en-us.yaml        |  2 +
 components/Accordion.vue              | 53 ---------------------------
 components/DashboardMetrics.vue       |  6 +++
 components/GrafanaDashboard.vue       | 12 ++++++
 detail/node.vue                       | 40 +++++++++++++++++---
 detail/pod.vue                        | 44 +++++++++++++++++++++-
 detail/workload/index.vue             | 47 ++++++++++++++++++++++--
 pages/c/_cluster/monitoring/index.vue | 47 +++++++++++-------------
 8 files changed, 163 insertions(+), 88 deletions(-)
 delete mode 100644 components/Accordion.vue

diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index 8f62c6abd0..c878895365 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -1832,6 +1832,7 @@ node:
     tab:
       conditions: Conditions
       images: Images
+      metrics: Metrics
       info:
         label: Info
         key:
@@ -3468,6 +3469,7 @@ workload:
       networkSettings: Network Settings
       podAnnotations: Pod Annotations
       podLabels: Pod Labels
+      metrics: Metrics
       podScheduling: Pod Scheduling
       nodeScheduling: Node Scheduling
       ports: Ports
diff --git a/components/Accordion.vue b/components/Accordion.vue
deleted file mode 100644
index 1306c39ab8..0000000000
--- a/components/Accordion.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-export default {
-  props:      {
-    expandedInitially: {
-      type:     Boolean,
-      default: false
-    },
-    title: {
-      type:     String,
-      default: null
-    },
-  },
-
-  data() {
-    return {
-      expanded:     this.expandedInitially,
-      expandedOnce: this.expandedInitially
-    };
-  },
-
-  methods: {
-    toggle(ev) {
-      ev.preventDefault();
-      this.$set(this, 'expanded', !this.expanded);
-      this.$set(this, 'expandedOnce', !this.expanded || this.expandedOnce);
-    }
-  }
-};
-</script>
-
-<template>
-  <div class="accordion">
-    <div class="heading" @click="toggle">
-      <h3>{{ title }}</h3>
-      <a v-if="expanded" href="#">COLLAPSE</a>
-      <a v-else href="#">EXPAND</a>
-    </div>
-    <hr class="divider" />
-    <div v-if="expanded || expandedOnce" v-show="expanded" class="content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style lang='scss' scoped>
-.heading {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-}
-</style>
diff --git a/components/DashboardMetrics.vue b/components/DashboardMetrics.vue
index d31d9d5762..e099fb5549 100644
--- a/components/DashboardMetrics.vue
+++ b/components/DashboardMetrics.vue
@@ -14,6 +14,10 @@ export default {
       type:     String,
       required: true,
     },
+    vars: {
+      type:    Object,
+      default: () => ({})
+    },
     graphHeight: {
       type:     String,
       required: true
@@ -55,6 +59,7 @@ export default {
         :refresh-rate="graphOptions.refreshRate"
         :range="graphOptions.range"
         :url="detailUrl"
+        :vars="vars"
       />
       <GrafanaDashboard
         v-else
@@ -64,6 +69,7 @@ export default {
         :refresh-rate="graphOptions.refreshRate"
         :range="graphOptions.range"
         :url="summaryUrl"
+        :vars="vars"
       />
     </div>
   </div>
diff --git a/components/GrafanaDashboard.vue b/components/GrafanaDashboard.vue
index f1cae8b4fa..cce69135d9 100644
--- a/components/GrafanaDashboard.vue
+++ b/components/GrafanaDashboard.vue
@@ -10,6 +10,10 @@ export default {
       type:     String,
       required: true,
     },
+    vars: {
+      type:    Object,
+      default: () => ({})
+    },
     range: {
       type:    String,
       default: null
@@ -127,6 +131,14 @@ export default {
         params.refresh = this.refreshRate;
       }
 
+      if (Object.keys(this.vars).length > 0) {
+        Object.entries(this.vars).forEach((entry) => {
+          const paramName = `var-${ entry[0] }`;
+
+          params[paramName] = entry[1];
+        });
+      }
+
       params.theme = this.theme;
 
       return params;
diff --git a/detail/node.vue b/detail/node.vue
index 6479b71fc4..c1cba213c6 100644
--- a/detail/node.vue
+++ b/detail/node.vue
@@ -15,7 +15,13 @@ import Poller from '@/utils/poller';
 import { METRIC, POD } from '@/config/types';
 import createEditView from '@/mixins/create-edit-view';
 import { formatSi, exponentNeeded, UNITS } from '@/utils/units';
+import DashboardMetrics from '@/components/DashboardMetrics';
+import { mapGetters } from 'vuex';
+import { allDashboardsExist } from '@/utils/grafana';
+import Loading from '@/components/Loading';
 
+const NODE_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-node-detail-1/rancher-node-detail?orgId=1';
+const NODE_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-node-1/rancher-node?orgId=1';
 const METRICS_POLL_RATE_MS = 30000;
 const MAX_FAILURES = 2;
 
@@ -25,6 +31,8 @@ export default {
   components: {
     Alert,
     ConsumptionGauge,
+    DashboardMetrics,
+    Loading,
     ResourceTabs,
     Tab,
     SortableTable,
@@ -39,8 +47,10 @@ export default {
     },
   },
 
-  fetch() {
-    this.$store.dispatch('cluster/findAll', { type: POD });
+  async fetch() {
+    this.showMetrics = await allDashboardsExist(this.$store.dispatch, this.currentCluster.id, [NODE_METRICS_DETAIL_URL, NODE_METRICS_SUMMARY_URL]);
+
+    return this.$store.dispatch('cluster/findAll', { type: POD });
   },
 
   data() {
@@ -70,11 +80,15 @@ export default {
         VALUE,
         EFFECT
       ],
-      podTableHeaders: this.$store.getters['type-map/headersFor'](podSchema)
+      podTableHeaders: this.$store.getters['type-map/headersFor'](podSchema),
+      NODE_METRICS_DETAIL_URL,
+      NODE_METRICS_SUMMARY_URL,
+      showMetrics:     false
     };
   },
 
   computed: {
+    ...mapGetters(['currentCluster']),
     memoryUnits() {
       const exponent = exponentNeeded(this.value.ramCapacity, 1024);
 
@@ -118,6 +132,10 @@ export default {
     taintTableRows() {
       return this.value.spec.taints || [];
     },
+
+    graphVars() {
+      return { instance: `${ this.value.internalIp }:9796` };
+    }
   },
 
   mounted() {
@@ -160,7 +178,8 @@ export default {
 </script>
 
 <template>
-  <div class="node">
+  <Loading v-if="$fetchState.pending" />
+  <div v-else class="node">
     <div class="spacer"></div>
     <div class="alerts">
       <Alert class="mr-10" :status="pidPressureStatus" :message="t('node.detail.glance.pidPressure')" />
@@ -175,7 +194,7 @@ export default {
     </div>
     <div class="spacer"></div>
     <ResourceTabs v-model="value" :mode="mode">
-      <Tab name="pods" :label="t('node.detail.tab.pods')" :weight="3">
+      <Tab name="pods" :label="t('node.detail.tab.pods')" :weight="4">
         <SortableTable
           key-field="_key"
           :headers="podTableHeaders"
@@ -185,6 +204,17 @@ export default {
           :search="false"
         />
       </Tab>
+      <Tab v-if="showMetrics" :label="t('node.detail.tab.metrics')" name="node-metrics" :weight="3">
+        <template #default="props">
+          <DashboardMetrics
+            v-if="props.active"
+            :detail-url="NODE_METRICS_DETAIL_URL"
+            :summary-url="NODE_METRICS_SUMMARY_URL"
+            :vars="graphVars"
+            graph-height="825px"
+          />
+        </template>
+      </Tab>
       <Tab name="info" :label="t('node.detail.tab.info.label')" class="bordered-table" :weight="2">
         <SortableTable
           key-field="_key"
diff --git a/detail/pod.vue b/detail/pod.vue
index 5f71aec019..c60cd05b9d 100644
--- a/detail/pod.vue
+++ b/detail/pod.vue
@@ -6,11 +6,20 @@ import SortableTable from '@/components/SortableTable';
 import { STATE, SIMPLE_NAME, IMAGE } from '@/config/table-headers';
 import { sortableNumericSuffix } from '@/utils/sort';
 import { findBy } from '@/utils/array';
+import DashboardMetrics from '@/components/DashboardMetrics';
+import { mapGetters } from 'vuex';
+import { allDashboardsExist } from '@/utils/grafana';
+import Loading from '@/components/Loading';
+
+const POD_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-pod-containers-1/rancher-pod-containers?orgId=1';
+const POD_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-pod-1/rancher-pod?orgId=1';
 
 export default {
   name: 'PodDetail',
 
   components: {
+    DashboardMetrics,
+    Loading,
     ResourceTabs,
     Tab,
     SortableTable,
@@ -18,7 +27,20 @@ export default {
 
   mixins: [CreateEditView],
 
+  async fetch() {
+    this.showMetrics = await allDashboardsExist(this.$store.dispatch, this.currentCluster.id, [POD_METRICS_DETAIL_URL, POD_METRICS_SUMMARY_URL]);
+  },
+
+  data() {
+    return {
+      POD_METRICS_DETAIL_URL,
+      POD_METRICS_SUMMARY_URL,
+      showMetrics: false
+    };
+  },
+
   computed:   {
+    ...mapGetters(['currentCluster']),
     containers() {
       const { containerStatuses = [] } = this.value.status;
 
@@ -68,12 +90,21 @@ export default {
         }
       ];
     },
+
+    graphVars() {
+      return {
+        namespace: this.value.namespace,
+        pod:       this.value.name
+      };
+    },
+
   },
 };
 </script>
 
 <template>
-  <ResourceTabs mode="view" class="mt-20" :value="value">
+  <Loading v-if="$fetchState.pending" />
+  <ResourceTabs v-else mode="view" class="mt-20" :value="value">
     <Tab :label="t('workload.container.titles.containers')" name="containers" :weight="3">
       <SortableTable
         :rows="containers"
@@ -85,5 +116,16 @@ export default {
         :table-actions="false"
       />
     </Tab>
+    <Tab v-if="showMetrics" :label="t('workload.container.titles.metrics')" name="pod-metrics" :weight="2.5">
+      <template #default="props">
+        <DashboardMetrics
+          v-if="props.active"
+          :detail-url="POD_METRICS_DETAIL_URL"
+          :summary-url="POD_METRICS_SUMMARY_URL"
+          :vars="graphVars"
+          graph-height="550px"
+        />
+      </template>
+    </Tab>
   </ResourceTabs>
 </template>
diff --git a/detail/workload/index.vue b/detail/workload/index.vue
index 576f3446dd..78290f220e 100644
--- a/detail/workload/index.vue
+++ b/detail/workload/index.vue
@@ -9,9 +9,26 @@ import ResourceTabs from '@/components/form/ResourceTabs';
 import CountGauge from '@/components/CountGauge';
 import { allHash } from '@/utils/promise';
 import { get } from '@/utils/object';
+import DashboardMetrics from '@/components/DashboardMetrics';
+import { mapGetters } from 'vuex';
+import { allDashboardsExist } from '@/utils/grafana';
+
+const WORKLOAD_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-workload-pods-1/rancher-workload-pods?orgId=1';
+const WORKLOAD_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-workload-1/rancher-workload?orgId=1';
+
+export const WORKLOAD_TYPE_TO_KIND_MAPPING = {
+  [WORKLOAD_TYPES.DEPLOYMENT]:             'Deployment',
+  [WORKLOAD_TYPES.CRON_JOB]:               'CronJob',
+  [WORKLOAD_TYPES.DAEMON_SET]:             'DaemonSet',
+  [WORKLOAD_TYPES.JOB]:                    'Job',
+  [WORKLOAD_TYPES.STATEFUL_SET]:           'StatefulSet',
+  [WORKLOAD_TYPES.REPLICA_SET]:            'ReplicaSet',
+  [WORKLOAD_TYPES.REPLICATION_CONTROLLER]: 'ReplicationController',
+};
 
 export default {
   components: {
+    DashboardMetrics,
     Tab,
     Loading,
     ResourceTabs,
@@ -32,13 +49,18 @@ export default {
     for ( const k in res ) {
       this[k] = res[k];
     }
+
+    this.showMetrics = await allDashboardsExist(this.$store.dispatch, this.currentCluster.id, [WORKLOAD_METRICS_DETAIL_URL, WORKLOAD_METRICS_SUMMARY_URL]);
   },
 
   data() {
-    return { allPods: null, allJobs: [] };
+    return {
+      allPods: null, allJobs: [], WORKLOAD_METRICS_DETAIL_URL, WORKLOAD_METRICS_SUMMARY_URL, showMetrics: false
+    };
   },
 
   computed:   {
+    ...mapGetters(['currentCluster']),
     pods() {
       const relationships = get(this.value, 'metadata.relationships') || [];
       const podRelationship = relationships.filter(relationship => relationship.toType === POD)[0];
@@ -200,6 +222,14 @@ export default {
         POD_IMAGES
       ];
     },
+
+    graphVars() {
+      return {
+        namespace: this.value.namespace,
+        kind:      WORKLOAD_TYPE_TO_KIND_MAPPING[this.value.type],
+        workload:  this.value.id
+      };
+    }
   },
 };
 </script>
@@ -233,7 +263,7 @@ export default {
       </template>
     </div>
     <ResourceTabs :value="value">
-      <Tab v-if="isCronJob" name="jobs" :label="t('tableHeaders.jobs')">
+      <Tab v-if="isCronJob" name="jobs" :label="t('tableHeaders.jobs')" :weight="4">
         <SortableTable
           :rows="jobs"
           :headers="jobHeaders"
@@ -243,7 +273,7 @@ export default {
           :search="false"
         />
       </Tab>
-      <Tab v-else name="pods" :label="t('tableHeaders.pods')">
+      <Tab v-else name="pods" :label="t('tableHeaders.pods')" :weight="4">
         <SortableTable
           v-if="pods"
           :rows="pods"
@@ -255,6 +285,17 @@ export default {
           :search="false"
         />
       </Tab>
+      <Tab v-if="showMetrics" :label="t('workload.container.titles.metrics')" name="workload-metrics" :weight="3">
+        <template #default="props">
+          <DashboardMetrics
+            v-if="props.active"
+            :detail-url="WORKLOAD_METRICS_DETAIL_URL"
+            :summary-url="WORKLOAD_METRICS_SUMMARY_URL"
+            :vars="graphVars"
+            graph-height="550px"
+          />
+        </template>
+      </Tab>
     </ResourceTabs>
   </div>
 </template>
diff --git a/pages/c/_cluster/monitoring/index.vue b/pages/c/_cluster/monitoring/index.vue
index 16f00aae6b..33b6b868b9 100644
--- a/pages/c/_cluster/monitoring/index.vue
+++ b/pages/c/_cluster/monitoring/index.vue
@@ -1,5 +1,4 @@
 <script>
-import { mapGetters } from 'vuex';
 import isEmpty from 'lodash/isEmpty';
 
 import InstallRedirect from '@/utils/install-redirect';
@@ -25,74 +24,70 @@ export default {
 
   middleware: InstallRedirect(NAME, CHART_NAME),
 
+  async fetch() {
+    await this.fetchDeps();
+  },
+
   data() {
+    const grafanaSrc = require('~/assets/images/vendor/grafana.svg');
+    const prometheusSrc = require('~/assets/images/vendor/prometheus.svg');
+    const currentCluster = this.$store.getters['currentCluster'];
+
     return {
       availableLinks: {
         alertmanager: false,
         grafana:      false,
         prometheus:   false,
       },
-      grafanaSrc:    require('~/assets/images/vendor/grafana.svg'),
-      prometheusSrc: require('~/assets/images/vendor/prometheus.svg'),
       resources:     [MONITORING.ALERTMANAGER, MONITORING.PROMETHEUS],
       v1Installed:   false,
-    };
-  },
-
-  computed: {
-    ...mapGetters(['currentCluster']),
-    externalLinks() {
-      return [
+      externalLinks: [
         {
           enabled:     false,
           group:       'alertmanager',
-          iconSrc:     this.prometheusSrc,
+          iconSrc:     prometheusSrc,
           label:       'monitoring.overview.linkedList.alertManager.label',
           description:
             'monitoring.overview.linkedList.alertManager.description',
-          link: `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-alertmanager:9093/proxy`,
+          link: `/k8s/clusters/${ currentCluster.id }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-alertmanager:9093/proxy`,
         },
         {
           enabled:     false,
           group:       'grafana',
-          iconSrc:     this.grafanaSrc,
+          iconSrc:     grafanaSrc,
           label:       'monitoring.overview.linkedList.grafana.label',
           description: 'monitoring.overview.linkedList.grafana.description',
-          link:        `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy`,
+          link:        `/k8s/clusters/${ currentCluster.id }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy`,
         },
         {
           enabled:     false,
           group:       'prometheus',
-          iconSrc:     this.prometheusSrc,
+          iconSrc:     prometheusSrc,
           label:       'monitoring.overview.linkedList.prometheusPromQl.label',
           description:
             'monitoring.overview.linkedList.prometheusPromQl.description',
-          link: `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-prometheus:9090/proxy/graph`,
+          link: `/k8s/clusters/${ currentCluster.id }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-prometheus:9090/proxy/graph`,
         },
         {
           enabled:     false,
           group:       'prometheus',
-          iconSrc:     this.prometheusSrc,
+          iconSrc:     prometheusSrc,
           label:       'monitoring.overview.linkedList.prometheusRules.label',
           description:
             'monitoring.overview.linkedList.prometheusRules.description',
-          link: `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-prometheus:9090/proxy/rules`,
+          link: `/k8s/clusters/${ currentCluster.id }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-prometheus:9090/proxy/rules`,
         },
         {
           enabled:     false,
           group:       'prometheus',
-          iconSrc:     this.prometheusSrc,
+          iconSrc:     prometheusSrc,
           label:       'monitoring.overview.linkedList.prometheusTargets.label',
           description:
             'monitoring.overview.linkedList.prometheusTargets.description',
-          link: `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-prometheus:9090/proxy/targets`,
+          link: `/k8s/clusters/${ currentCluster.id }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-prometheus:9090/proxy/targets`,
         },
-      ];
-    },
-  },
-
-  mounted() {
-    this.fetchDeps();
+      ]
+    };
   },
 
   methods: {