ayanova/src/views/ops-metrics.vue

@@ -16,14 +16,14 @@
       <!-- {{ $vuetify.breakpoint.name }} -->
     </v-col>
 
-    <v-tabs v-model="tab" color="primary" fixed-tabs>
+    <v-tabs v-model="tab" color="primary" fixed-tabs @change="tabChanged">
       <v-tabs-slider></v-tabs-slider>
-      <v-tab key="routes">routes</v-tab>
+      <v-tab>routes</v-tab>
-      <v-tab key="storage">storage</v-tab>
+      <v-tab>storage</v-tab>
-      <v-tab key="memcpu">cpu & memory</v-tab>
+      <v-tab>cpu & memory</v-tab>
       <v-tabs-items v-model="tab">
-        <v-tab-item key="routes"> </v-tab-item>
+        <v-tab-item> </v-tab-item>
-        <v-tab-item key="storage">
+        <v-tab-item>
           attachment size and available space utility size and available space
           filecounts
           <v-col cols="12" class="my-1">
@@ -51,7 +51,8 @@
             </v-sheet>
           </v-col>
         </v-tab-item>
-        <v-tab-item key="cpu">
+
+        <v-tab-item>
           <v-col cols="12" class="my-1">
             <v-sheet elevation="4">
               <gz-chart-line
@@ -125,8 +126,9 @@ export default {
   },
   data() {
     return {
-      storage: null,
+      storage: { isnew: true },
-      memcpu: null,
+      memcpu: { isnew: true },
+      routes: { isnew: true },
       timeLineChartOptions: {
         responsive: true,
         maintainAspectRatio: false,
@@ -144,7 +146,7 @@ export default {
         dateFilterTokens: []
       },
       lastFetchBreakPoint: null,
-      tab: null,
+      tab: 2,
       formState: {
         ready: false,
         loading: false,
@@ -154,92 +156,6 @@ export default {
       }
     };
   },
-  computed: {
-    cpuChartData() {
-      return {
-        datasets: [
-          {
-            label: "CPU %",
-            borderColor: CHART_COLOR.teal,
-            fill: false,
-            radius: 0,
-            hoverRadius: 10,
-            hitRadius: 4,
-            data: this.obj.metricMM.cpu
-          }
-        ]
-      };
-    },
-    gcAllChartData() {
-      return {
-        datasets: [
-          {
-            label: "GC Gen0",
-            borderColor: CHART_COLOR.blue,
-            fill: false,
-            radius: 0,
-            hoverRadius: 10,
-            hitRadius: 4,
-            data: this.obj.metricMM.gen0
-          },
-          {
-            label: "GC Gen1",
-            borderColor: CHART_COLOR.red,
-            fill: false,
-            radius: 0,
-            hoverRadius: 10,
-            hitRadius: 4,
-            data: this.obj.metricMM.gen1
-          },
-          {
-            label: "GC Gen2",
-            borderColor: CHART_COLOR.green,
-            fill: false,
-            radius: 0,
-            hoverRadius: 10,
-            hitRadius: 4,
-            data: this.obj.metricMM.gen2
-          }
-        ]
-      };
-    },
-    memAllChartData() {
-      return {
-        datasets: [
-          {
-            label: "Allocated (MB)",
-            borderColor: CHART_COLOR.purple,
-            fill: false,
-            radius: 0,
-            hoverRadius: 10,
-            hitRadius: 4,
-            data: this.obj.metricMM.allocated
-          },
-          {
-            label: "Working set (MB)",
-            borderColor: CHART_COLOR.green,
-            //borderWidth:4,
-            // pointStyle: "rectRot",
-            radius: 0,
-            hoverRadius: 10,
-            hitRadius: 4,
-            // borderDash: [20, 3, 3, 3, 3, 3, 3, 3],
-            fill: false,
-            data: this.obj.metricMM.workingSet
-          },
-          {
-            label: "Private (MB)",
-            borderColor: CHART_COLOR.orange,
-            fill: false,
-            radius: 0,
-            hoverRadius: 10,
-            hitRadius: 4,
-            data: this.obj.metricMM.privateBytes
-          }
-        ]
-      };
-    }
-  },
 
   methods: {
     onResize() {
@@ -263,9 +179,13 @@ export default {
     timePeriodChanged: function() {
       this.getDataFromApi();
     },
-    form() {
+    tabChanged: function(tab) {
-      return window.$gz.form;
+      let vm = this;
+      if (vm[tabIndexToRoute(vm.tab)].isnew) {
+        vm.getDataFromApi();
+      }
     },
+
     getDataFromApi(breakPoint) {
       let vm = this;
       if (vm.formState.loading) {
@@ -310,7 +230,7 @@ export default {
 
       let url =
         "server-metric/" +
-        vm.tab +
+        tabIndexToRoute(vm.tab) +
         "?maxRecords=" +
         max +
         "&tsStart=" +
@@ -335,7 +255,7 @@ export default {
             vm.formState.serverError = res.error;
             window.$gz.form.setErrorBoxErrors(vm);
           } else {
-            vm[vm.tab] = res.data;
+            vm[tabIndexToRoute(vm.tab)] = res.data;
             vm.lastFetchBreakPoint = breakPoint;
             window.$gz.form.setFormState({
               vm: vm,
@@ -355,9 +275,183 @@ export default {
           window.$gz.errorHandler.handleFormError(error, vm);
         });
     }
+  },
+  computed: {
+    cpuChartData() {
+      return {
+        datasets: [
+          {
+            label: "CPU %",
+            borderColor: CHART_COLOR.teal,
+            fill: false,
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            data: this.memcpu.cpu
+          }
+        ]
+      };
+    },
+    gcAllChartData() {
+      return {
+        datasets: [
+          {
+            label: "GC Gen0",
+            borderColor: CHART_COLOR.blue,
+            fill: false,
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            data: this.memcpu.gen0
+          },
+          {
+            label: "GC Gen1",
+            borderColor: CHART_COLOR.red,
+            fill: false,
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            data: this.memcpu.gen1
+          },
+          {
+            label: "GC Gen2",
+            borderColor: CHART_COLOR.green,
+            fill: false,
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            data: this.memcpu.gen2
+          }
+        ]
+      };
+    },
+    memAllChartData() {
+      return {
+        datasets: [
+          {
+            label: "Allocated (MB)",
+            borderColor: CHART_COLOR.purple,
+            fill: false,
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            data: this.memcpu.allocated
+          },
+          {
+            label: "Working set (MB)",
+            borderColor: CHART_COLOR.green,
+            //borderWidth:4,
+            // pointStyle: "rectRot",
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            // borderDash: [20, 3, 3, 3, 3, 3, 3, 3],
+            fill: false,
+            data: this.memcpu.workingSet
+          },
+          {
+            label: "Private (MB)",
+            borderColor: CHART_COLOR.orange,
+            fill: false,
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            data: this.memcpu.privateBytes
+          }
+        ]
+      };
+    },
+    attachSizeChartData() {
+      return {
+        datasets: [
+          {
+            label: "Attachments (MB)",
+            borderColor: CHART_COLOR.purple,
+            fill: false,
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            data: this.storage.attachmentFileSize
+          },
+
+          {
+            label: "Available space (MB)",
+            borderColor: CHART_COLOR.orange,
+            fill: false,
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            data: this.storage.attachmentFilesAvailableSpace
+          }
+        ]
+      };
+    },
+    utilitySizeChartData() {
+      return {
+        datasets: [
+          {
+            label: "Backups / utility (MB)",
+            borderColor: CHART_COLOR.purple,
+            fill: false,
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            data: this.storage.utilityFileSize
+          },
+
+          {
+            label: "Available space (MB)",
+            borderColor: CHART_COLOR.orange,
+            fill: false,
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            data: this.storage.utilityFilesAvailableSpace
+          }
+        ]
+      };
+    },
+    fileCountChartData() {
+      return {
+        datasets: [
+          {
+            label: "Attachments",
+            borderColor: CHART_COLOR.purple,
+            fill: false,
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            data: this.storage.attachmentFileCount
+          },
+
+          {
+            label: "Backup / utility",
+            borderColor: CHART_COLOR.orange,
+            fill: false,
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            data: this.storage.utilityFileCount
+          }
+        ]
+      };
+    }
   }
 };
 
+//////////////////////
+//
+//
+function tabIndexToRoute(tabIndex) {
+  switch (tabIndex) {
+    case 0:
+      return "routes";
+    case 1:
+      return "storage";
+    case 2:
+      return "memcpu";
+  }
+}
 //////////////////////
 //
 //