diff --git a/ayanova/src/api/relative-date-filter-calculator.js b/ayanova/src/api/relative-date-filter-calculator.js
index 44955090..294c7fd5 100644
--- a/ayanova/src/api/relative-date-filter-calculator.js
+++ b/ayanova/src/api/relative-date-filter-calculator.js
@@ -327,6 +327,21 @@ export default {
         ret.before = dtBefore.toUTC().toString();
         break;
 
+      case "*past7days*":
+        //From Now minus 7 days
+        dtAfter = dtNow.plus({ days: -7 });
+
+        //Before now
+        dtBefore = dtNow;
+
+        //move after back a second for boundary
+        dtAfter = dtAfter.plus({ seconds: -1 });
+
+        //set return values from calculated values
+        ret.after = dtAfter.toUTC().toString();
+        ret.before = dtBefore.toUTC().toString();
+        break;
+
       case "*past24hours*":
         //From Now minus 24 hours
         dtAfter = dtNow.plus({ hours: -24 });
@@ -342,6 +357,21 @@ export default {
         ret.before = dtBefore.toUTC().toString();
         break;
 
+      case "*past6hours*":
+        //From Now minus 6 hours
+        dtAfter = dtNow.plus({ hours: -6 });
+
+        //Before now
+        dtBefore = dtNow;
+
+        //move after back a second for boundary
+        dtAfter = dtAfter.plus({ seconds: -1 });
+
+        //set return values from calculated values
+        ret.after = dtAfter.toUTC().toString();
+        ret.before = dtBefore.toUTC().toString();
+        break;
+
       default:
         throw "realtive-date-time-filter-calculater: Date token [" +
           token +
diff --git a/ayanova/src/main.js b/ayanova/src/main.js
index 83f4c00f..2e60e8f5 100644
--- a/ayanova/src/main.js
+++ b/ayanova/src/main.js
@@ -15,7 +15,6 @@ import { DateTime } from "luxon";
 import VueCurrencyInput from "vue-currency-input";
 import lodash from "./libs/lodash.min.js";
 
-
 //my libs
 import errorhandler from "./api/errorhandler";
 import ayaNovaVersion from "./api/ayanova-version";
diff --git a/ayanova/src/views/ops-metrics.vue b/ayanova/src/views/ops-metrics.vue
index 2d5d48ae..8dda1f7c 100644
--- a/ayanova/src/views/ops-metrics.vue
+++ b/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) {