1 files changed, 50 insertions, 4 deletions
diff --git a/app/assets/javascripts/serverless/components/function_details.vue b/app/assets/javascripts/serverless/components/function_details.vue
index 4f89ad69129..b8906cfca4e 100644
--- a/app/assets/javascripts/serverless/components/function_details.vue
+++ b/app/assets/javascripts/serverless/components/function_details.vue
@@ -1,39 +1,77 @@
 <script>
+import _ from 'underscore';
+import { mapState, mapActions, mapGetters } from 'vuex';
 import PodBox from './pod_box.vue';
 import Url from './url.vue';
+import AreaChart from './area.vue';
+import MissingPrometheus from './missing_prometheus.vue';
 
 export default {
   components: {
     PodBox,
     Url,
+    AreaChart,
+    MissingPrometheus,
   },
   props: {
     func: {
       type: Object,
       required: true,
     },
+    hasPrometheus: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    clustersPath: {
+      type: String,
+      required: true,
+    },
+    helpPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      elWidth: 0,
+    };
   },
   computed: {
     name() {
       return this.func.name;
     },
     description() {
-      return this.func.description;
+      return _.isString(this.func.description) ? this.func.description : '';
     },
     funcUrl() {
       return this.func.url;
     },
     podCount() {
-      return this.func.podcount || 0;
+      return Number(this.func.podcount) || 0;
     },
+    ...mapState(['graphData', 'hasPrometheusData']),
+    ...mapGetters(['hasPrometheusMissingData']),
+  },
+  created() {
+    this.fetchMetrics({
+      metricsPath: this.func.metricsUrl,
+      hasPrometheus: this.hasPrometheus,
+    });
+  },
+  mounted() {
+    this.elWidth = this.$el.clientWidth;
+  },
+  methods: {
+    ...mapActions(['fetchMetrics']),
   },
 };
 </script>
 
 <template>
   <section id="serverless-function-details">
-    <h3>{{ name }}</h3>
-    <div class="append-bottom-default">
+    <h3 class="serverless-function-name">{{ name }}</h3>
+    <div class="append-bottom-default serverless-function-description">
       <div v-for="(line, index) in description.split('\n')" :key="index">{{ line }}</div>
     </div>
     <url :uri="funcUrl" />
@@ -52,5 +90,13 @@ export default {
       </p>
     </div>
     <div v-else><p>No pods loaded at this time.</p></div>
+
+    <area-chart v-if="hasPrometheusData" :graph-data="graphData" :container-width="elWidth" />
+    <missing-prometheus
+      v-if="!hasPrometheus || hasPrometheusMissingData"
+      :help-path="helpPath"
+      :clusters-path="clustersPath"
+      :missing-data="hasPrometheusMissingData"
+    />
   </section>
 </template>