ayanova/src/views/ops-log.vue

@@ -14,7 +14,7 @@
     </v-col>
 
     <v-col cols="12">
-      <v-card>
+      <v-card elevation="4">
         <v-card
           :height="logCardHeight"
           style="overflow:auto;"

ayanova/src/views/ops-metrics.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-row v-if="this.formState.ready">
+  <v-row v-if="this.formState.ready" v-resize="onResize">
     <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
-    <v-col cols="12">
+    <v-col cols="3">
       <v-select
         v-model="selectedTimePeriod"
         :items="selectLists.dateFilterTokens"
@@ -13,16 +13,22 @@
       <v-btn @click="getDataFromApi">
         <v-icon>fa-sync</v-icon>
       </v-btn>
-      {{ $vuetify.breakpoint.name }}
+      <!-- {{ $vuetify.breakpoint.name }} -->
     </v-col>
     <v-col cols="12" class="my-1">
-      <gz-chart-line :chartData="memAllChartData" :options="mmChartOptions" />
+      <v-sheet elevation="4">
+        <gz-chart-line :chartData="memAllChartData" :options="mmChartOptions" />
+      </v-sheet>
     </v-col>
     <v-col cols="12" class="my-1">
-      <gz-chart-line :chartData="cpuChartData" :options="mmChartOptions" />
+      <v-sheet elevation="4">
+        <gz-chart-line :chartData="cpuChartData" :options="mmChartOptions" />
+      </v-sheet>
     </v-col>
     <v-col cols="12" class="my-1">
-      <gz-chart-line :chartData="gcAllChartData" :options="mmChartOptions" />
+      <v-sheet elevation="4">
+        <gz-chart-line :chartData="gcAllChartData" :options="mmChartOptions" />
+      </v-sheet>
     </v-col>
   </v-row>
 </template>
@@ -37,13 +43,18 @@ import relativeDatefilterCalculator from "../api/relative-date-filter-calculator
 const FORM_KEY = "ops-metrics";
 //Pleasing combo of contrasting colors for lines
 //from http://perceptualedge.com/articles/b-eye/choosing_colors.pdf
-const CHART_LINE_COLOR = {
+const CHART_COLOR = {
   blue: "#1f77b4",
   red: "#d62728",
   orange: "#fe7f0e",
   green: "#2ca02c",
   purple: "#9c27b0",
-  yellow: "#ffeb3b"
+  black: "#000000",
+  cyan: "#00BCD4",
+  teal: "#009688",
+  primary: "#00205B", //APP Canucks dark blue
+  secondary: "#00843D", //APP canucks green
+  accent: "#db7022" //APP lighter orangey red, more friendly looking though not as much clarity it seems
 };
 
 export default {
@@ -97,7 +108,7 @@ export default {
         datasets: [
           {
             label: "CPU %",
-            borderColor: "indigo",
+            borderColor: CHART_COLOR.teal,
             fill: false,
             data: this.obj.metricMM.cpu
           }
@@ -109,19 +120,19 @@ export default {
         datasets: [
           {
             label: "GC Gen0",
-            borderColor: "#972426",
+            borderColor: CHART_COLOR.blue,
             fill: false,
             data: this.obj.metricMM.gen0
           },
           {
             label: "GC Gen1",
-            borderColor: "#2a4158",
+            borderColor: CHART_COLOR.red,
             fill: false,
             data: this.obj.metricMM.gen1
           },
           {
             label: "GC Gen2",
-            borderColor: "#40817a",
+            borderColor: CHART_COLOR.green,
             fill: false,
             data: this.obj.metricMM.gen2
           }
@@ -133,19 +144,19 @@ export default {
         datasets: [
           {
             label: "Allocated (MB)",
-            borderColor: "#fe7f0e",
+            borderColor: CHART_COLOR.purple,
             fill: false,
             data: this.obj.metricMM.allocated
           },
           {
             label: "Working set (MB)",
-            borderColor: "#2ca02c",
+            borderColor: CHART_COLOR.green,
             fill: false,
             data: this.obj.metricMM.workingSet
           },
           {
             label: "Private (MB)",
-            borderColor: "#1f77b4",
+            borderColor: CHART_COLOR.orange,
             fill: false,
             data: this.obj.metricMM.privateBytes
           }
@@ -156,6 +167,7 @@ export default {
 
   methods: {
     onResize() {
+ 
       this.getDataFromApi();
     },
     timePeriodChanged: function() {