diff --git a/ayanova/package-lock.json b/ayanova/package-lock.json
index 36685ffa..9f878d2a 100644
--- a/ayanova/package-lock.json
+++ b/ayanova/package-lock.json
@@ -7848,6 +7848,11 @@
         "moment": "^2.10.2"
       }
     },
+    "chartjs-adapter-luxon": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/chartjs-adapter-luxon/-/chartjs-adapter-luxon-0.2.1.tgz",
+      "integrity": "sha512-UVaoEwJXXKjkFgu9Db76P13jVCe3Co3lU6tJxXLriI/C7p6KjV8yzFP3KNcOqByqr+qSaTqB6i5er9ZvMd24Jw=="
+    },
     "chartjs-color": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
diff --git a/ayanova/package.json b/ayanova/package.json
index d9d618f8..a6d64774 100644
--- a/ayanova/package.json
+++ b/ayanova/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "chart.js": "^2.9.3",
+    "chartjs-adapter-luxon": "^0.2.1",
     "core-js": "^3.6.4",
     "dompurify": "^2.0.8",
     "github-markdown-css": "^4.0.0",
diff --git a/ayanova/src/main.js b/ayanova/src/main.js
index 2e60e8f5..83f4c00f 100644
--- a/ayanova/src/main.js
+++ b/ayanova/src/main.js
@@ -15,6 +15,7 @@ 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 c09ca87b..6aa96d16 100644
--- a/ayanova/src/views/ops-metrics.vue
+++ b/ayanova/src/views/ops-metrics.vue
@@ -1,21 +1,212 @@
 <template>
-  <UnderConstruction />
+  <v-row v-if="this.formState.ready">
+    <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
+    <!-- <v-col>
+      {{ obj }}
+    </v-col> -->
+    <v-col>
+      <gz-chart-line :chartdata="chartData" :options="chartOptions" />
+    </v-col>
+  </v-row>
 </template>
 
 <script>
-import UnderConstruction from "../components/underconstruction.vue";
-
+//https://medium.com/javascript-in-plain-english/exploring-chart-js-e3ba70b07aa4
+const FORM_KEY = "ops-metrics";
 export default {
-  components: {
-    UnderConstruction
+  created() {
+    let vm = this;
+    initForm(vm)
+      .then(() => {
+        window.$gz.eventBus.$on("menu-click", clickHandler);
+        generateMenu(vm);
+        vm.getDataFromApi();
+      })
+      .catch(err => {
+        vm.formState.ready = true;
+        window.$gz.errorHandler.handleFormError(err, vm);
+      });
   },
-  beforeCreate() {
-    window.$gz.eventBus.$emit("menu-change", {
-      isMain: true,
-      icon: "fa-file-medical-alt",
-      title: this.$ay.t("ServerMetrics"),
-      helpUrl: "form-ops-metrics"
-    });
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  data() {
+    return {
+      obj: {},
+      chartData: {
+        labels: [],
+
+        datasets: [
+          {
+            label: "CPU %",
+            borderColor: "indigo",
+            fill: false,
+            data: []
+          }
+        ]
+      },
+      chartOptions: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          xAxes: [
+            {
+              type: "time"
+            }
+          ]
+        }
+      },
+      formState: {
+        ready: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      }
+    };
+  },
+  methods: {
+    onResize() {
+      this.logCardHeight = window.innerHeight * 0.7;
+    },
+    // 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;
+
+      vm.formState.loading = true;
+      let url = "server-metric"; //?maxRecords=100
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+      window.$gz.api
+        .get(url)
+        .then(res => {
+          if (res.error) {
+            if (res.error.code == "2010") {
+              window.$gz.eventBus.$emit(
+                "notify-error",
+                vm.$ay.t("ErrorAPI2010")
+              );
+              window.$gz._.delay(function() {
+                vm.$router.go(-1);
+              }, 2000);
+            }
+            vm.formState.serverError = res.error;
+            window.$gz.form.setErrorBoxErrors(vm);
+          } else {
+            if (res) {
+              vm.chartData.labels = res.data.metricMM.labels;
+              //vm.obj = res.data;
+              //vm.chartData.datasets[0].data = res.data.cpu;
+            } else {
+              vm.log = vm.$ay.t("NoData");
+            }
+
+            window.$gz.form.setFormState({
+              vm: vm,
+              dirty: false,
+              valid: true,
+              loading: false
+            });
+
+            vm.formState.ready = true;
+            // generateMenu(vm);
+          }
+        })
+        .catch(function handleGetDataFromAPIError(error) {
+          window.$gz.form.setFormState({
+            vm: vm,
+            loading: false
+          });
+          window.$gz.errorHandler.handleFormError(error, vm);
+        });
+    }
   }
 };
+
+//////////////////////
+//
+//
+function generateMenu(vm) {
+  let menuOptions = {
+    isMain: true,
+    icon: "fa-file-medical-alt",
+    title: vm.$ay.t("ServerMetrics"),
+    helpUrl: "form-ops-metrics",
+    menuItems: [
+      {
+        title: vm.$ay.t("Copy"),
+        icon: "fa-copy",
+        surface: false,
+        key: FORM_KEY + ":copylog",
+        vm: vm
+      }
+    ]
+  };
+
+  window.$gz.eventBus.$emit("menu-change", menuOptions);
+}
+
+/////////////////////////////
+//
+//
+function clickHandler(menuItem) {
+  if (!menuItem) {
+    return;
+  }
+  let m = window.$gz.menu.parseMenuItem(menuItem);
+  if (m.owner == FORM_KEY && !m.disabled) {
+    switch (m.key) {
+      case "copylog":
+        //put the log info on the clipboard:
+        window.$gz.util.copyToClipboard("SERVER LOG\n" + m.vm.log);
+        break;
+      default:
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          FORM_KEY + "::context click: [" + m.key + "]"
+        );
+    }
+  }
+}
+
+/////////////////////////////////
+//
+//
+function initForm(vm) {
+  return new Promise(function(resolve, reject) {
+    (async function() {
+      try {
+        await fetchTranslatedText(vm);
+      } catch (err) {
+        reject(err);
+      }
+      resolve();
+    })();
+  });
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+function fetchTranslatedText(vm) {
+  let tKeysRequired = ["HelpAboutAyaNova"];
+
+  return window.$gz.translation.fetch(tKeysRequired);
+}
 </script>