Use flexbox for prometheus graph row grouping instead of bootstrap classes

5 files changed, 13 insertions, 81 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 74244faa5d9..b596c4f383f 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -4,7 +4,7 @@
   import statusCodes from '../../lib/utils/http_status';
   import MonitoringService from '../services/monitoring_service';
   import GraphGroup from './graph_group.vue';
-  import GraphRow from './graph_row.vue';
+  import Graph from './graph.vue';
   import EmptyState from './empty_state.vue';
   import MonitoringStore from '../stores/monitoring_store';
   import eventHub from '../event_hub';
@@ -32,8 +32,8 @@
     },
 
     components: {
+      Graph,
       GraphGroup,
-      GraphRow,
       EmptyState,
     },
 
@@ -127,10 +127,10 @@
       :key="index"
       :name="groupData.group"
     >
-      <graph-row
-        v-for="(row, index) in groupData.metrics"
+      <graph
+        v-for="(graphData, index) in groupData.metrics"
         :key="index"
-        :row-data="row"
+        :graph-data="graphData"
         :update-aspect-ratio="updateAspectRatio"
         :deployment-data="store.deploymentData"
       />
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 9c785f4ada8..cde2ff7ca2a 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -19,10 +19,6 @@
         type: Object,
         required: true,
       },
-      classType: {
-        type: String,
-        required: true,
-      },
       updateAspectRatio: {
         type: Boolean,
         required: true,
@@ -207,12 +203,11 @@
     },
   };
 </script>
+
 <template>
-  <div
-    :class="classType">
-    <h5
-      class="text-center graph-title">
-        {{graphData.title}}
+  <div class="prometheus-graph">
+    <h5 class="text-center graph-title">
+      {{graphData.title}}
     </h5>
     <div
       class="prometheus-svg-container"
@@ -243,7 +238,7 @@
           class="graph-data"
           :viewBox="innerViewBox"
           ref="graphData">
-            <monitoring-paths 
+            <monitoring-paths
               v-for="(path, index) in timeSeries"
               :key="index"
               :generated-line-path="path.linePath"
diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue
index 32c90fda8cc..958f537d31b 100644
--- a/app/assets/javascripts/monitoring/components/graph_group.vue
+++ b/app/assets/javascripts/monitoring/components/graph_group.vue
@@ -14,7 +14,7 @@ export default {
     <div class="panel-heading">
       <h4>{{name}}</h4>
     </div>
-    <div class="panel-body">
+    <div class="panel-body prometheus-graph-group">
       <slot />
     </div>
   </div>
diff --git a/app/assets/javascripts/monitoring/components/graph_row.vue b/app/assets/javascripts/monitoring/components/graph_row.vue
deleted file mode 100644
index bdb9149c3b4..00000000000
--- a/app/assets/javascripts/monitoring/components/graph_row.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-  import Graph from './graph.vue';
-
-  export default {
-    props: {
-      rowData: {
-        type: Array,
-        required: true,
-      },
-      updateAspectRatio: {
-        type: Boolean,
-        required: true,
-      },
-      deploymentData: {
-        type: Array,
-        required: true,
-      },
-    },
-    components: {
-      Graph,
-    },
-    computed: {
-      bootstrapClass() {
-        return this.rowData.length >= 2 ? 'col-md-6' : 'col-md-12';
-      },
-    },
-  };
-</script>
-
-<template>
-  <div class="prometheus-row row">
-    <graph
-      v-for="(graphData, index) in rowData"
-      :graph-data="graphData"
-      :class-type="bootstrapClass"
-      :key="index"
-      :update-aspect-ratio="updateAspectRatio"
-      :deployment-data="deploymentData"
-    />
-  </div>
-</template>
diff --git a/app/assets/javascripts/monitoring/stores/monitoring_store.js b/app/assets/javascripts/monitoring/stores/monitoring_store.js
index 0a4cdd88044..7592af5878e 100644
--- a/app/assets/javascripts/monitoring/stores/monitoring_store.js
+++ b/app/assets/javascripts/monitoring/stores/monitoring_store.js
@@ -20,22 +20,6 @@ function normalizeMetrics(metrics) {
   }));
 }
 
-function collate(array, rows = 2) {
-  const collatedArray = [];
-  let row = [];
-  array.forEach((value, index) => {
-    row.push(value);
-    if ((index + 1) % rows === 0) {
-      collatedArray.push(row);
-      row = [];
-    }
-  });
-  if (row.length > 0) {
-    collatedArray.push(row);
-  }
-  return collatedArray;
-}
-
 export default class MonitoringStore {
   constructor() {
     this.groups = [];
@@ -45,7 +29,7 @@ export default class MonitoringStore {
   storeMetrics(groups = []) {
     this.groups = groups.map(group => ({
       ...group,
-      metrics: collate(normalizeMetrics(sortMetrics(group.metrics))),
+      metrics: normalizeMetrics(sortMetrics(group.metrics)),
     }));
   }
 
@@ -54,12 +38,6 @@ export default class MonitoringStore {
   }
 
   getMetricsCount() {
-    let metricsCount = 0;
-    this.groups.forEach((group) => {
-      group.metrics.forEach((metric) => {
-        metricsCount = metricsCount += metric.length;
-      });
-    });
-    return metricsCount;
+    return this.groups.reduce((count, group) => count + group.metrics.length, 0);
   }
 }