ayanova/src/views/ops-metrics.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-row v-if="this.formState.ready" v-resize="onResize">
+  <v-row v-if="this.formState.ready">
     <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
     <v-col cols="3">
       <v-select
@@ -13,14 +13,14 @@
       <v-btn @click="getDataFromApi">
         <v-icon>fa-sync</v-icon>
       </v-btn>
-      <!-- {{ $vuetify.breakpoint.name }} -->
+      {{ $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-col cols="12" class="my-1" v-resize="onResize">
       <v-sheet elevation="4">
         <gz-chart-line :chartData="cpuChartData" :options="mmChartOptions" />
       </v-sheet>
@@ -93,6 +93,7 @@ export default {
       selectLists: {
         dateFilterTokens: []
       },
+      lastFetchBreakPoint: null,
       formState: {
         ready: false,
         loading: false,
@@ -167,8 +168,22 @@ export default {
 
   methods: {
     onResize() {
- 
+      let breakPoint = "xl";
-      this.getDataFromApi();
+      if (window.innerWidth < 1904) {
+        breakPoint = "lg";
+      }
+      if (window.innerWidth < 1264) {
+        breakPoint = "md";
+      }
+      if (window.innerWidth < 960) {
+        breakPoint = "sm";
+      }
+      if (window.innerWidth < 600) {
+        breakPoint = "xs";
+      }
+      if (breakPoint != this.lastFetchBreakPoint) {
+        this.getDataFromApi(breakPoint);
+      }
     },
     timePeriodChanged: function() {
       this.getDataFromApi();
@@ -176,7 +191,7 @@ export default {
     form() {
       return window.$gz.form;
     },
-    getDataFromApi() {
+    getDataFromApi(breakPoint) {
       let vm = this;
       if (vm.formState.loading) {
         return;
@@ -186,6 +201,9 @@ export default {
       );
 
       vm.formState.loading = true;
+      if (breakPoint == null) {
+        breakPoint = vm.$vuetify.breakpoint.name;
+      }
       //##########################################################################################################################################
       //Visually, 200 points max looks best on full screen widths and 40 on galaxy s9 minimum standard
       //there is no relevant loss of fidelity with this downsampling
@@ -194,7 +212,8 @@ export default {
       //Note: used geometric progression of 1.5 for this
       //40*1.5=60, 60*1.5=90 etc etc etc
       //wanted it to fit between 40 at lowest end and 200 at highest end
-      switch (vm.$vuetify.breakpoint.name) {
+
+      switch (breakPoint) {
         case "xs":
           max = 40;
           break;
@@ -240,7 +259,7 @@ export default {
             window.$gz.form.setErrorBoxErrors(vm);
           } else {
             vm.obj = res.data;
-
+            vm.lastFetchBreakPoint = breakPoint;
             window.$gz.form.setFormState({
               vm: vm,
               dirty: false,