ayanova/src/views/ops-metrics.vue

@@ -19,17 +19,44 @@
     <v-tabs v-model="tab" color="primary" fixed-tabs>
       <v-tabs-slider></v-tabs-slider>
       <v-tab key="routes">routes</v-tab>
-      <v-tab key="disk">storage</v-tab>
-      <v-tab key="cpu">cpu & memory</v-tab>
+      <v-tab key="storage">storage</v-tab>
+      <v-tab key="memcpu">cpu & memory</v-tab>
       <v-tabs-items v-model="tab">
         <v-tab-item key="routes"> </v-tab-item>
-        <v-tab-item key="disk"> </v-tab-item>
+        <v-tab-item key="storage">
+          attachment size and available space utility size and available space
+          filecounts
+          <v-col cols="12" class="my-1">
+            <v-sheet elevation="4">
+              <gz-chart-line
+                :chartData="attachSizeChartData"
+                :options="timeLineChartOptions"
+              />
+            </v-sheet>
+          </v-col>
+          <v-col cols="12" class="my-1" v-resize="onResize">
+            <v-sheet elevation="4">
+              <gz-chart-line
+                :chartData="utilitySizeChartData"
+                :options="timeLineChartOptions"
+              />
+            </v-sheet>
+          </v-col>
+          <v-col cols="12" class="my-1">
+            <v-sheet elevation="4">
+              <gz-chart-line
+                :chartData="fileCountChartData"
+                :options="timeLineChartOptions"
+              />
+            </v-sheet>
+          </v-col>
+        </v-tab-item>
         <v-tab-item key="cpu">
           <v-col cols="12" class="my-1">
             <v-sheet elevation="4">
               <gz-chart-line
                 :chartData="memAllChartData"
-                :options="mmChartOptions"
+                :options="timeLineChartOptions"
               />
             </v-sheet>
           </v-col>
@@ -37,7 +64,7 @@
             <v-sheet elevation="4">
               <gz-chart-line
                 :chartData="cpuChartData"
-                :options="mmChartOptions"
+                :options="timeLineChartOptions"
               />
             </v-sheet>
           </v-col>
@@ -45,14 +72,13 @@
             <v-sheet elevation="4">
               <gz-chart-line
                 :chartData="gcAllChartData"
-                :options="mmChartOptions"
+                :options="timeLineChartOptions"
               />
             </v-sheet>
           </v-col>
         </v-tab-item>
       </v-tabs-items>
     </v-tabs>
-
   </v-row>
 </template>
 
@@ -99,8 +125,9 @@ export default {
   },
   data() {
     return {
-      obj: {},
-      mmChartOptions: {
+      storage: null,
+      memcpu: null,
+      timeLineChartOptions: {
         responsive: true,
         maintainAspectRatio: false,
         scales: {
@@ -282,7 +309,9 @@ export default {
       }
 
       let url =
-        "server-metric/mm?maxRecords=" +
+        "server-metric/" +
+        vm.tab +
+        "?maxRecords=" +
         max +
         "&tsStart=" +
         filterDates.after +
@@ -306,7 +335,7 @@ export default {
             vm.formState.serverError = res.error;
             window.$gz.form.setErrorBoxErrors(vm);
           } else {
-            vm.obj = res.data;
+            vm[vm.tab] = res.data;
             vm.lastFetchBreakPoint = breakPoint;
             window.$gz.form.setFormState({
               vm: vm,