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
 

ayanova/src/views/ops-metrics.vue

@@ -15,21 +15,44 @@
       </v-btn>
       <!-- {{ $vuetify.breakpoint.name }} -->
     </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" />
+              <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" />
+              <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" />
+              <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,