Use flexbox for prometheus graph row grouping instead of bootstrap classes

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"
       />

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"

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>

app/assets/javascripts/monitoring/components/graph_row.vue

-<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>

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);
   }
 }

app/assets/stylesheets/pages/environments.scss

@@ -227,6 +227,26 @@
   margin-top: 20px;
 }
 
+.prometheus-graph-group {
+  display: flex;
+  flex-wrap: wrap;
+  padding: $gl-padding / 2;
+}
+
+.prometheus-graph {
+  flex: 1 0 auto;
+  min-width: 450px;
+  padding: $gl-padding / 2;
+
+  h5 {
+    font-size: 16px;
+  }
+
+  @media (max-width: $screen-sm-max) {
+    min-width: 100%;
+  }
+}
+
 .prometheus-svg-container {
   position: relative;
   height: 0;
@@ -297,9 +317,3 @@
     }
   }
 }
-
-.prometheus-row {
-  h5 {
-    font-size: 16px;
-  }
-}

spec/javascripts/monitoring/graph_row_spec.js

-import Vue from 'vue';
-import GraphRow from '~/monitoring/components/graph_row.vue';
-import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
-import { deploymentData, convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from './mock_data';
-
-const createComponent = (propsData) => {
-  const Component = Vue.extend(GraphRow);
-
-  return new Component({
-    propsData,
-  }).$mount();
-};
-
-const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
-describe('GraphRow', () => {
-  beforeEach(() => {
-    spyOn(MonitoringMixins.methods, 'formatDeployments').and.returnValue({});
-  });
-  describe('Computed props', () => {
-    it('bootstrapClass is set to col-md-6 when rowData is higher/equal to 2', () => {
-      const component = createComponent({
-        rowData: convertedMetrics,
-        updateAspectRatio: false,
-        deploymentData,
-      });
-
-      expect(component.bootstrapClass).toEqual('col-md-6');
-    });
-
-    it('bootstrapClass is set to col-md-12 when rowData is lower than 2', () => {
-      const component = createComponent({
-        rowData: [convertedMetrics[0]],
-        updateAspectRatio: false,
-        deploymentData,
-      });
-
-      expect(component.bootstrapClass).toEqual('col-md-12');
-    });
-  });
-
-  it('has one column', () => {
-    const component = createComponent({
-      rowData: convertedMetrics,
-      updateAspectRatio: false,
-      deploymentData,
-    });
-
-    expect(component.$el.querySelectorAll('.prometheus-svg-container').length)
-        .toEqual(component.rowData.length);
-  });
-
-  it('has two columns', () => {
-    const component = createComponent({
-      rowData: convertedMetrics,
-      updateAspectRatio: false,
-      deploymentData,
-    });
-
-    expect(component.$el.querySelectorAll('.col-md-6').length)
-        .toEqual(component.rowData.length);
-  });
-});

spec/javascripts/monitoring/monitoring_store_spec.js

@@ -5,10 +5,10 @@ describe('MonitoringStore', () => {
   this.store = new MonitoringStore();
   this.store.storeMetrics(MonitoringMock.data);
 
-  it('contains one group that contains two queries sorted by priority in one row', () => {
+  it('contains one group that contains two queries sorted by priority', () => {
     expect(this.store.groups).toBeDefined();
     expect(this.store.groups.length).toEqual(1);
-    expect(this.store.groups[0].metrics.length).toEqual(1);
+    expect(this.store.groups[0].metrics.length).toEqual(2);
   });
 
   it('gets the metrics count for every group', () => {