ayanova/src/views/ops-metrics.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-row v-if="this.formState.ready">
+  <v-row v-if="this.formState.ready" v-resize="onResize">
     <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
     <v-col cols="12" sm="6" lg="4" xl="3">
       <v-select
@@ -16,7 +16,7 @@
     <v-tabs v-model="tab" color="primary" grow @change="tabChanged">
       <v-tabs-slider></v-tabs-slider>
       <v-tab>cpu & memory</v-tab>
-      <v-tab>ITEM1</v-tab>
+      <v-tab>db</v-tab>
       <v-tab>storage</v-tab>
 
       <v-tabs-items v-model="tab">
@@ -29,7 +29,7 @@
               />
             </v-sheet>
           </v-col>
-          <v-col cols="12" class="my-1" v-resize="onResize">
+          <v-col cols="12" class="my-1">
             <v-sheet elevation="4">
               <gz-chart-line
                 :chartData="cpuChartData"
@@ -46,7 +46,16 @@
             </v-sheet>
           </v-col>
         </v-tab-item>
-        <v-tab-item> </v-tab-item>
+        <v-tab-item>
+          <v-col cols="12" class="my-1">
+            <v-sheet elevation="4">
+              <gz-chart-line
+                :chartData="dbChartData"
+                :options="timeLineChartOptions"
+              />
+            </v-sheet>
+          </v-col>
+        </v-tab-item>
         <v-tab-item>
           <v-col cols="12" class="my-1">
             <v-sheet elevation="4">
@@ -56,7 +65,7 @@
               />
             </v-sheet>
           </v-col>
-          <v-col cols="12" class="my-1" v-resize="onResize">
+          <v-col cols="12" class="my-1">
             <v-sheet elevation="4">
               <gz-chart-line
                 :chartData="utilitySizeChartData"
@@ -123,7 +132,7 @@ export default {
     return {
       storage: { isnew: true },
       memcpu: { isnew: true },
-      ITEM1: { isnew: true },
+      db: { isnew: true },
       timeLineChartOptions: {
         responsive: true,
         maintainAspectRatio: false,
@@ -286,6 +295,20 @@ export default {
           }
         ]
       };
+    },  dbChartData() {
+      return {
+        datasets: [
+          {
+            label: "DB Size  (MB)",
+            borderColor: CHART_COLOR.blue,
+            fill: false,
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            data: this.db.totalSize
+          }
+        ]
+      };
     },
     gcAllChartData() {
       return {
@@ -443,7 +466,7 @@ function tabIndexToRoute(tabIndex) {
       return "memcpu";
 
     case 1:
-      return "ITEM1";
+      return "db";
 
     case 2:
       return "storage";