Commit 70bff97c authored by Mike Greiling's avatar Mike Greiling Committed by Phil Hughes

Use flexbox for prometheus graph row grouping instead of bootstrap classes

parent 6a831b52
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
import statusCodes from '../../lib/utils/http_status'; import statusCodes from '../../lib/utils/http_status';
import MonitoringService from '../services/monitoring_service'; import MonitoringService from '../services/monitoring_service';
import GraphGroup from './graph_group.vue'; import GraphGroup from './graph_group.vue';
import GraphRow from './graph_row.vue'; import Graph from './graph.vue';
import EmptyState from './empty_state.vue'; import EmptyState from './empty_state.vue';
import MonitoringStore from '../stores/monitoring_store'; import MonitoringStore from '../stores/monitoring_store';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
...@@ -32,8 +32,8 @@ ...@@ -32,8 +32,8 @@
}, },
components: { components: {
Graph,
GraphGroup, GraphGroup,
GraphRow,
EmptyState, EmptyState,
}, },
...@@ -127,10 +127,10 @@ ...@@ -127,10 +127,10 @@
:key="index" :key="index"
:name="groupData.group" :name="groupData.group"
> >
<graph-row <graph
v-for="(row, index) in groupData.metrics" v-for="(graphData, index) in groupData.metrics"
:key="index" :key="index"
:row-data="row" :graph-data="graphData"
:update-aspect-ratio="updateAspectRatio" :update-aspect-ratio="updateAspectRatio"
:deployment-data="store.deploymentData" :deployment-data="store.deploymentData"
/> />
......
...@@ -19,10 +19,6 @@ ...@@ -19,10 +19,6 @@
type: Object, type: Object,
required: true, required: true,
}, },
classType: {
type: String,
required: true,
},
updateAspectRatio: { updateAspectRatio: {
type: Boolean, type: Boolean,
required: true, required: true,
...@@ -207,11 +203,10 @@ ...@@ -207,11 +203,10 @@
}, },
}; };
</script> </script>
<template> <template>
<div <div class="prometheus-graph">
:class="classType"> <h5 class="text-center graph-title">
<h5
class="text-center graph-title">
{{graphData.title}} {{graphData.title}}
</h5> </h5>
<div <div
......
...@@ -14,7 +14,7 @@ export default { ...@@ -14,7 +14,7 @@ export default {
<div class="panel-heading"> <div class="panel-heading">
<h4>{{name}}</h4> <h4>{{name}}</h4>
</div> </div>
<div class="panel-body"> <div class="panel-body prometheus-graph-group">
<slot /> <slot />
</div> </div>
</div> </div>
......
<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>
...@@ -20,22 +20,6 @@ function normalizeMetrics(metrics) { ...@@ -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 { export default class MonitoringStore {
constructor() { constructor() {
this.groups = []; this.groups = [];
...@@ -45,7 +29,7 @@ export default class MonitoringStore { ...@@ -45,7 +29,7 @@ export default class MonitoringStore {
storeMetrics(groups = []) { storeMetrics(groups = []) {
this.groups = groups.map(group => ({ this.groups = groups.map(group => ({
...group, ...group,
metrics: collate(normalizeMetrics(sortMetrics(group.metrics))), metrics: normalizeMetrics(sortMetrics(group.metrics)),
})); }));
} }
...@@ -54,12 +38,6 @@ export default class MonitoringStore { ...@@ -54,12 +38,6 @@ export default class MonitoringStore {
} }
getMetricsCount() { getMetricsCount() {
let metricsCount = 0; return this.groups.reduce((count, group) => count + group.metrics.length, 0);
this.groups.forEach((group) => {
group.metrics.forEach((metric) => {
metricsCount = metricsCount += metric.length;
});
});
return metricsCount;
} }
} }
...@@ -227,6 +227,26 @@ ...@@ -227,6 +227,26 @@
margin-top: 20px; 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 { .prometheus-svg-container {
position: relative; position: relative;
height: 0; height: 0;
...@@ -297,9 +317,3 @@ ...@@ -297,9 +317,3 @@
} }
} }
} }
.prometheus-row {
h5 {
font-size: 16px;
}
}
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);
});
});
...@@ -5,10 +5,10 @@ describe('MonitoringStore', () => { ...@@ -5,10 +5,10 @@ describe('MonitoringStore', () => {
this.store = new MonitoringStore(); this.store = new MonitoringStore();
this.store.storeMetrics(MonitoringMock.data); 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).toBeDefined();
expect(this.store.groups.length).toEqual(1); 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', () => { it('gets the metrics count for every group', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment