ayanova/src/views/ops-metrics.vue

@@ -5,7 +5,7 @@
     <!-- <v-col cols="12">
       <gz-chart-line :chartdata="memChartData" :options="chartOptions" />
     </v-col> -->
-
+    {{ $vuetify.breakpoint.name }}
     <v-col cols="12">
       <gz-chart-line :chartdata="cpuChartData" :options="chartOptions" />
     </v-col>
@@ -57,7 +57,7 @@ export default {
           xAxes: [
             {
               type: "time",
-              distribution: "series"
+              distribution: "linear"
             }
           ]
         }
@@ -162,8 +162,43 @@ export default {
     getDataFromApi() {
       let vm = this;
 
+      /*
+Date range keys for this:
+case "*pastyear*":
+"*last6months*"
+"*past30days*"
+"*past7days*" <-Need to add to relativeDatefilter
+"*past24hours*"
+DEFAULT: "*past6hours*" <-Need to add to relativeDatefilter
+
+*/
+
       vm.formState.loading = true;
-      let url = "server-metric?maxRecords=30"; // //2000 will cover all for now 2020-05-26 15:24:14
+      //##########################################################################################################################################
+      //Max records depends upon the view but capped at 400
+      let max = 400;
+      //https://vuetifyjs.com/en/customization/breakpoints/#breakpoint-service-object
+      switch (vm.$vuetify.breakpoint.name) {
+        case "xs":
+          max = 40;
+          break;
+        case "sm":
+          max = 130;
+          break;
+        case "md":
+          max = 220;
+          break;
+        case "lg":
+          max = 310;
+          break;
+        case "xl":
+          max = 400;
+          break;
+        default:
+          max = 400;
+      }
+
+      let url = "server-metric?maxRecords=" + max; // //2000 will cover all for now 2020-05-26 15:24:14
       window.$gz.form.deleteAllErrorBoxErrors(vm);
       window.$gz.api
         .get(url)
@@ -267,6 +302,25 @@ function initForm(vm) {
   });
 }
 
+/////////////////////////////////
+//
+//
+function populateSelectionLists(vm) {
+  vm.selectLists.dateFilterTokens.push(
+    ...[
+      { name: vm.$ay.t("DateRangePast6Hours"), id: "*past6hours*" },
+      { name: vm.$ay.t("DateRangePast24Hours"), id: "*past24hours*" },
+      { name: vm.$ay.t("DateRangePast7Days"), id: "*past7days*" },
+      { name: vm.$ay.t("DateRangePast30Days"), id: "*past30days*" },
+      {
+        name: vm.$ay.t("DateRangeInTheLastSixMonths"),
+        id: "*last6months*"
+      },
+      { name: vm.$ay.t("DateRangePastYear"), id: "*pastyear*" }
+    ]
+  );
+}
+
 //////////////////////////////////////////////////////////
 //
 // Ensures UI translated text is available