Merge pull request #2682 from codyrancher/extra-metrics

Adding metrics to workloads, pods and nodes

assets/translations/en-us.yaml

@@ -1856,6 +1856,7 @@ node:
     tab:
       conditions: Conditions
       images: Images
+      metrics: Metrics
       info:
         label: Info
         key:
@@ -3492,6 +3493,7 @@ workload:
       networkSettings: Network Settings
       podAnnotations: Pod Annotations
       podLabels: Pod Labels
+      metrics: Metrics
       podScheduling: Pod Scheduling
       nodeScheduling: Node Scheduling
       ports: Ports

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>

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;

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() {
+  async fetch() {
-    this.$store.dispatch('cluster/findAll', { type: POD });
+    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"

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>

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>

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,
-    };
+      externalLinks: [
-  },
-
-  computed: {
-    ...mapGetters(['currentCluster']),
-    externalLinks() {
-      return [
         {
           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: {