diff options
author | Mike Greiling <mgreiling@gitlab.com> | 2017-09-06 10:42:47 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-09-06 10:42:47 +0300 |
commit | 70bff97c2760cbe554f7b82047bc9186ccf3dfaf (patch) | |
tree | ff2f87d3594c696f5a61223906bd2deaac828cf9 /app/assets/javascripts/monitoring | |
parent | 6a831b520a98380f45c7b632dc8209b3a528167a (diff) |
Use flexbox for prometheus graph row grouping instead of bootstrap classes
Diffstat (limited to 'app/assets/javascripts/monitoring')
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); } } |