ayanova/src/views/ops-metrics.vue

@@ -55,9 +55,10 @@
               />
             </v-sheet>
           </v-col>
-          <v-col cols="12" class="my-1">
+          <v-col cols="3" class="my-1">
+            {{ dbTopTablesChartData }}
             <v-sheet elevation="4">
-              <gz-chart-pie :chartData="dbTopTenChartData" />
+              <gz-chart-pie :chartData="dbTopTablesChartData" />
             </v-sheet>
           </v-col>
         </v-tab-item>
@@ -102,7 +103,7 @@ 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_COLOR = {
+const CHART_PALETTE = {
   blue: "#1f77b4",
   red: "#d62728",
   orange: "#fe7f0e",
@@ -291,7 +292,7 @@ export default {
         datasets: [
           {
             label: "CPU %",
-            borderColor: CHART_COLOR.teal,
+            borderColor: CHART_PALETTE.teal,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -306,7 +307,7 @@ export default {
         datasets: [
           {
             label: "DB Size  (MB)",
-            borderColor: CHART_COLOR.blue,
+            borderColor: CHART_PALETTE.blue,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -316,27 +317,22 @@ export default {
         ]
       };
     },
-    dbTopTenChartData() {
+    dbTopTablesChartData() {
+      // debugger;
       return {
+        //  These labels appear in the legend and in the tooltips when hovering different arcs
+        //_.map(users, 'user');
+        labels: window.$gz._.map(this.db.topTables, "name"),
         datasets: [
           {
-            data: [10, 20, 30]
+            label: "Table size (MB)",
+            data: window.$gz._.map(this.db.topTables, "value"),
+            backgroundColor: getPalette(
+              this.db.topTables ? this.db.topTables.length : 3
+            )
+            // getPalette( this.db.topTables ? this.db.topTables.length : 3 )
           }
-        ],
+        ]
-
-        // These labels appear in the legend and in the tooltips when hovering different arcs
-        labels: ["Red", "Yellow", "Blue"]
-        // datasets: [
-        //   {
-        //     label: "Table size (MB)",
-        //     borderColor: CHART_COLOR.blue,
-        //     fill: false,
-        //     radius: 0,
-        //     hoverRadius: 10,
-        //     hitRadius: 4,
-        //     data: this.db.topTen
-        //   }
-        // ]
       };
     },
     gcAllChartData() {
@@ -344,7 +340,7 @@ export default {
         datasets: [
           {
             label: "GC Gen0",
-            borderColor: CHART_COLOR.blue,
+            borderColor: CHART_PALETTE.blue,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -353,7 +349,7 @@ export default {
           },
           {
             label: "GC Gen1",
-            borderColor: CHART_COLOR.red,
+            borderColor: CHART_PALETTE.red,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -362,7 +358,7 @@ export default {
           },
           {
             label: "GC Gen2",
-            borderColor: CHART_COLOR.green,
+            borderColor: CHART_PALETTE.green,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -377,7 +373,7 @@ export default {
         datasets: [
           {
             label: "Allocated (MB)",
-            borderColor: CHART_COLOR.purple,
+            borderColor: CHART_PALETTE.purple,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -386,7 +382,7 @@ export default {
           },
           {
             label: "Working set (MB)",
-            borderColor: CHART_COLOR.green,
+            borderColor: CHART_PALETTE.green,
             //borderWidth:4,
             // pointStyle: "rectRot",
             radius: 0,
@@ -398,7 +394,7 @@ export default {
           },
           {
             label: "Private (MB)",
-            borderColor: CHART_COLOR.orange,
+            borderColor: CHART_PALETTE.orange,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -413,7 +409,7 @@ export default {
         datasets: [
           {
             label: "Attachments (MB)",
-            borderColor: CHART_COLOR.purple,
+            borderColor: CHART_PALETTE.purple,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -423,7 +419,7 @@ export default {
 
           {
             label: "Available space (MB)",
-            borderColor: CHART_COLOR.green,
+            borderColor: CHART_PALETTE.green,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -438,7 +434,7 @@ export default {
         datasets: [
           {
             label: "Backup (MB)",
-            borderColor: CHART_COLOR.orange,
+            borderColor: CHART_PALETTE.orange,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -448,7 +444,7 @@ export default {
 
           {
             label: "Available space (MB)",
-            borderColor: CHART_COLOR.green,
+            borderColor: CHART_PALETTE.green,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -463,7 +459,7 @@ export default {
         datasets: [
           {
             label: "Attachment files",
-            borderColor: CHART_COLOR.purple,
+            borderColor: CHART_PALETTE.purple,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -473,7 +469,7 @@ export default {
 
           {
             label: "Backup files",
-            borderColor: CHART_COLOR.orange,
+            borderColor: CHART_PALETTE.orange,
             fill: false,
             radius: 0,
             hoverRadius: 10,
@@ -486,6 +482,27 @@ export default {
   }
 };
 
+///////////////////////
+//
+function getPalette(size) {
+  let palette = [
+    CHART_PALETTE.blue,
+    CHART_PALETTE.red,
+    CHART_PALETTE.green,
+    CHART_PALETTE.orange,
+    CHART_PALETTE.purple,
+    CHART_PALETTE.cyan,
+    CHART_PALETTE.teal,
+    CHART_PALETTE.black
+  ];
+  let paletteLength = palette.length;
+  let ret = [];
+  for (let i = 0; i < size; i++) {
+    ret.push(palette[i % paletteLength]);
+  }
+  return ret;
+}
+
 //////////////////////
 //
 //

ayanova/src/views/ops-profile.vue

@@ -8,7 +8,7 @@
     </v-col>
     <v-col cols="12">
       <v-card elevation="4">
-        <v-card :height="cardHeight" >
+        <v-card :height="cardHeight">
           <iframe
             id="profileFrame"
             style="width:100%;height:100%"