Move MemoryGraph and MemoryUsage vue components

1 files changed, 27 insertions, 11 deletions

diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.js b/app/assets/javascripts/vue_shared/components/memory_graph.vue
index f37ef1a5ca3..b07f6b07afe 100644
--- a/app/assets/javascripts/vue_shared/components/memory_graph.js
+++ b/app/assets/javascripts/vue_shared/components/memory_graph.vue
@@ -1,3 +1,4 @@
+<script>
 import { getTimeago } from '../../lib/utils/datetime_utility';
 
 export default {
@@ -22,6 +23,9 @@ export default {
       return `Deployed ${deployedSince}`;
     },
   },
+  mounted() {
+    this.renderGraph(this.deploymentTime, this.metrics);
+  },
   methods: {
     /**
      * Returns metric value index in metrics array
@@ -103,15 +107,27 @@ export default {
       this.dotY = dotY;
     },
   },
-  mounted() {
-    this.renderGraph(this.deploymentTime, this.metrics);
-  },
-  template: `
-    <div class="memory-graph-container">
-      <svg class="has-tooltip" :title="getFormattedMedian" :width="width" :height="height" xmlns="http://www.w3.org/2000/svg">
-        <path :d="pathD" :viewBox="pathViewBox" />
-        <circle r="1.5" :cx="dotX" :cy="dotY" tranform="translate(0 -1)" />
-      </svg>
-    </div>
-  `,
 };
+</script>
+
+<template>
+  <div class="memory-graph-container">
+    <svg
+      class="has-tooltip"
+      :title="getFormattedMedian"
+      :width="width"
+      :height="height"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        :d="pathD"
+        :viewBox="pathViewBox"
+      />
+      <circle
+        r="1.5"
+        :cx="dotX"
+        :cy="dotY"
+        tranform="translate(0 -1)"
+      />
+    </svg>
+  </div>
+</template>