From ba7f0fcd330ad63c9d0364a2c1469bb4e1105a43 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Fri, 29 May 2020 16:21:24 +0000
Subject: [PATCH]

---
 ayanova/devdocs/todo.txt          |  2 ++
 ayanova/src/views/ops-metrics.vue | 56 ++++++++++++++++++++++---------
 2 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 6dc4d11a..b98cb9a1 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -39,6 +39,8 @@ todo: OPS view metrics
 				BANDWIDTH (PUBLIC)
 
 
+todo: remove search option from metrics / logs etc as it implies you can search those things and you can't
+
 todo: document how to use chart as it's not all obvious
 	i.e. can hover, can hide line by clicking on legend etc
 
diff --git a/ayanova/src/views/ops-metrics.vue b/ayanova/src/views/ops-metrics.vue
index 60454fd8..66297147 100644
--- a/ayanova/src/views/ops-metrics.vue
+++ b/ayanova/src/views/ops-metrics.vue
@@ -15,21 +15,44 @@
       </v-btn>
       <!-- {{ $vuetify.breakpoint.name }} -->
     </v-col>
-    <v-col cols="12" class="my-1">
-      <v-sheet elevation="4">
-        <gz-chart-line :chartData="memAllChartData" :options="mmChartOptions" />
-      </v-sheet>
-    </v-col>
-    <v-col cols="12" class="my-1" v-resize="onResize">
-      <v-sheet elevation="4">
-        <gz-chart-line :chartData="cpuChartData" :options="mmChartOptions" />
-      </v-sheet>
-    </v-col>
-    <v-col cols="12" class="my-1">
-      <v-sheet elevation="4">
-        <gz-chart-line :chartData="gcAllChartData" :options="mmChartOptions" />
-      </v-sheet>
-    </v-col>
+
+    <v-tabs v-model="tab" color="primary" fixed-tabs>
+      <v-tabs-slider></v-tabs-slider>
+      <v-tab key="dd"><v-icon>fa-folder</v-icon></v-tab>
+      <v-tab key="hh"><v-icon>fa-paperclip</v-icon></v-tab>
+      <v-tab key="mm"><v-icon>fa-paperclip</v-icon></v-tab>
+      <v-tabs-items v-model="tab">
+        <v-tab-item key="dd"> </v-tab-item>
+        <v-tab-item key="hh"> </v-tab-item>
+        <v-tab-item key="mm">
+          <v-col cols="12" class="my-1">
+            <v-sheet elevation="4">
+              <gz-chart-line
+                :chartData="memAllChartData"
+                :options="mmChartOptions"
+              />
+            </v-sheet>
+          </v-col>
+          <v-col cols="12" class="my-1" v-resize="onResize">
+            <v-sheet elevation="4">
+              <gz-chart-line
+                :chartData="cpuChartData"
+                :options="mmChartOptions"
+              />
+            </v-sheet>
+          </v-col>
+          <v-col cols="12" class="my-1">
+            <v-sheet elevation="4">
+              <gz-chart-line
+                :chartData="gcAllChartData"
+                :options="mmChartOptions"
+              />
+            </v-sheet>
+          </v-col>
+        </v-tab-item>
+      </v-tabs-items>
+    </v-tabs>
+
   </v-row>
 </template>
 
@@ -94,6 +117,7 @@ export default {
         dateFilterTokens: []
       },
       lastFetchBreakPoint: null,
+      tab: null,
       formState: {
         ready: false,
         loading: false,
@@ -256,7 +280,7 @@ export default {
         default:
           max = 200;
       }
- 
+
       let url =
         "server-metric/mm?maxRecords=" +
         max +