ayanova/src/views/ops-metrics.vue

@@ -1,7 +1,16 @@
 <template>
   <v-row v-if="this.formState.ready">
     <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
-
+    <v-col cols="12">
+      <v-select
+        v-model="selectedTimePeriod"
+        :items="selectLists.dateFilterTokens"
+        item-text="name"
+        item-value="id"
+        prepend-icon="fa-filter"
+        @input="timePeriodChanged"
+      ></v-select>
+    </v-col>
     <!-- <v-col cols="12">
       <gz-chart-line :chartdata="memChartData" :options="chartOptions" />
     </v-col> -->
@@ -55,12 +64,13 @@ export default {
           ]
         }
       },
+      selectedTimePeriod: "*past6hours*",
       selectLists: {
         dateFilterTokens: []
       },
       formState: {
         ready: false,
-        loading: true,
+        loading: false,
         errorBoxMessage: null,
         appError: null,
         serverError: {}
@@ -136,30 +146,22 @@ export default {
   },
   methods: {
     onResize() {
-      this.logCardHeight = window.innerHeight * 0.7;
+      this.getDataFromApi();
+    },
+    timePeriodChanged: function() {
+      this.getDataFromApi();
     },
-    // translation() {
-    //   return window.$gz.translation;
-    // },
-    // locale() {
-    //   return window.$gz.locale;
-    // },
     form() {
       return window.$gz.form;
     },
-    fieldValueChanged(ref) {
-      if (!this.formState.loading && !this.formState.readOnly) {
-        window.$gz.form.fieldValueChanged(this, ref);
-      }
-    },
-    logSelected: function() {
-      this.getDataFromApi();
-    },
     getDataFromApi() {
       let vm = this;
-
-      let filterDates = relativeDatefilterCalculator.tokenToDates("*pastyear*");//TODO: FROM UI
-      TODO: ADD last 7 days last 6 hours to relative date filter calculator
+      if (vm.formState.loading) {
+        return;
+      }
+      let filterDates = relativeDatefilterCalculator.tokenToDates(
+        vm.selectedTimePeriod
+      );
 
       vm.formState.loading = true;
       //##########################################################################################################################################
@@ -186,7 +188,14 @@ export default {
           max = 400;
       }
 
-      let url = "server-metric?maxRecords=" + max; // //2000 will cover all for now 2020-05-26 15:24:14
+      let url =
+        "server-metric?maxRecords=" +
+        max +
+        "&tsStart=" +
+        filterDates.after +
+        "&tsEnd=" +
+        filterDates.before;
+
       window.$gz.form.deleteAllErrorBoxErrors(vm);
       window.$gz.api
         .get(url)
@@ -214,7 +223,6 @@ export default {
             });
 
             vm.formState.ready = true;
-            // generateMenu(vm);
           }
         })
         .catch(function handleGetDataFromAPIError(error) {