From abec75f25a225e2589e1017e5067db5874077218 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Thu, 28 May 2020 15:39:18 +0000
Subject: [PATCH]

---
 ayanova/devdocs/todo.txt          | 10 ++++++++++
 ayanova/src/views/ops-metrics.vue | 28 ++++++++++++++++------------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 8cc2a591..a7ae35bf 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -7,6 +7,13 @@ WIFI change 5g channel to 44 and 2g channel to 8
 https://www.datadoghq.com/blog/monitoring-101-collecting-data/
 
 todo: OPS view metrics
+	combined timescale thing is fucked
+		it can only ever work if the individual items have x and y coords
+		my naive guess way of doing it doesn't work becuase it just plots the points in the same place which is clearly wrong as they come from different points in time
+		depending on how the ds algorithm picked them out
+		I need to have a full time scale for all still, but then x,y for each item
+
+	colourblind need alternate styles
 	Figure out what metrics to add to find bottlenecks and creeping issues and add them	
 		Am I running out of 
 		Disk space
@@ -54,6 +61,9 @@ todo: Are UTC filters really working properly?
 	I'm seeing weirdness with the metrics that makes me think the server is not filtering in UTC but converting the incoming datetime / assuming local
 	Make a date filterable record confirm it properly finds based on time
 
+todo: dark mode would be nice just for me and my eyes
+	look into it
+
 todo: Administration - License
 	- view
 	- Erase all biz data (new route and command needed at back as currently it erases ops data as well I think)
diff --git a/ayanova/src/views/ops-metrics.vue b/ayanova/src/views/ops-metrics.vue
index 3d8830f8..d1642ff8 100644
--- a/ayanova/src/views/ops-metrics.vue
+++ b/ayanova/src/views/ops-metrics.vue
@@ -13,16 +13,17 @@
       <v-btn @click="getDataFromApi">
         <v-icon>fa-sync</v-icon>
       </v-btn>
+      {{ $vuetify.breakpoint.name }}
     </v-col>
-    <v-col cols="12" class="mt-10">
-      <gz-chart-line :chartData="memAllChartData" :options="chartOptions" />
+    <v-col cols="12" class="my-1">
+      <gz-chart-line :chartData="memAllChartData" :options="mmChartOptions" />
     </v-col>
 
-    <v-col cols="12" class="mt-10">
-      <gz-chart-line :chartData="cpuChartData" :options="chartOptions" />
+    <v-col cols="12" class="my-1">
+      <gz-chart-line :chartData="cpuChartData" :options="mmChartOptions" />
     </v-col>
-    <v-col cols="12" class="mt-10">
-      <gz-chart-line :chartData="gcAllChartData" :options="chartOptions" />
+    <v-col cols="12" class="my-1">
+      <gz-chart-line :chartData="gcAllChartData" :options="mmChartOptions" />
     </v-col>
   </v-row>
 </template>
@@ -55,7 +56,7 @@ export default {
   data() {
     return {
       obj: {},
-      chartOptions: {
+      mmChartOptions: {
         responsive: true,
         maintainAspectRatio: false,
         scales: {
@@ -175,24 +176,27 @@ export default {
       //Max records depends upon the view but capped at 400
       let max = 400;
       //https://vuetifyjs.com/en/customization/breakpoints/#breakpoint-service-object
+      //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) {
         case "xs":
           max = 40;
           break;
         case "sm":
-          max = 130;
+          max = 60;
           break;
         case "md":
-          max = 220;
+          max = 90;
           break;
         case "lg":
-          max = 310;
+          max = 135;
           break;
         case "xl":
-          max = 400;
+          max = 200;
           break;
         default:
-          max = 400;
+          max = 200;
       }
 
       let url =