summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAdriel Santiago <asantiago@gitlab.com>2019-01-07 19:07:25 +0000
committerTim Zallmann <tzallmann@gitlab.com>2019-01-07 19:07:25 +0000
commitef5d7bb9398048217ef827908be6a4ca2963a26e (patch)
tree7c74301f78563dbb4c27b6ee88435574ba7cc879
parent0c1d6be13cb52afb32d23d625a6400e28f0a991e (diff)
downloadgitlab-ce-ef5d7bb9398048217ef827908be6a4ca2963a26e.tar.gz
Add threshold lines in metrics graph
-rw-r--r--app/assets/javascripts/monitoring/components/charts/area.vue12
-rw-r--r--app/assets/javascripts/monitoring/components/dashboard.vue5
-rw-r--r--package.json2
-rw-r--r--yarn.lock8
4 files changed, 18 insertions, 9 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue
index 12224e36ba2..e2cffe0b4b4 100644
--- a/app/assets/javascripts/monitoring/components/charts/area.vue
+++ b/app/assets/javascripts/monitoring/components/charts/area.vue
@@ -6,6 +6,7 @@ export default {
components: {
GlAreaChart,
},
+ inheritAttrs: false,
props: {
graphData: {
type: Object,
@@ -25,6 +26,11 @@ export default {
);
},
},
+ alertData: {
+ type: Object,
+ required: false,
+ default: () => ({}),
+ },
},
computed: {
chartData() {
@@ -74,9 +80,6 @@ export default {
const [date, value] = params;
return [dateFormat(date, 'dd mmm yyyy, h:MMtt'), value.toFixed(3)];
},
- onCreated(chart) {
- this.$emit('created', chart);
- },
},
};
</script>
@@ -88,10 +91,11 @@ export default {
<div class="prometheus-graph-widgets"><slot></slot></div>
</div>
<gl-area-chart
+ v-bind="$attrs"
:data="chartData"
:option="chartOptions"
:format-tooltip-text="formatTooltipText"
- @created="onCreated"
+ :thresholds="alertData"
/>
</div>
</template>
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 2d9c5050c9b..cea5c1a56ca 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -144,6 +144,9 @@ export default {
}
},
methods: {
+ getGraphAlerts(graphId) {
+ return this.alertData ? this.alertData[graphId] || {} : {};
+ },
getGraphsData() {
this.state = 'loading';
Promise.all([
@@ -223,6 +226,8 @@ export default {
:tags-path="tagsPath"
:show-legend="showLegend"
:small-graph="forceSmallGraph"
+ :alert-data="getGraphAlerts(graphData.id)"
+ group-id="monitor-area-chart"
>
<!-- EE content -->
{{ null }}
diff --git a/package.json b/package.json
index bc7bc0880de..ff1140128f8 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
"@babel/preset-env": "^7.1.0",
"@gitlab/csslab": "^1.8.0",
"@gitlab/svgs": "^1.47.0",
- "@gitlab/ui": "^1.18.0",
+ "@gitlab/ui": "^1.20.0",
"apollo-boost": "^0.1.20",
"apollo-client": "^2.4.5",
"autosize": "^4.0.0",
diff --git a/yarn.lock b/yarn.lock
index 1068d4a68ef..fb1854265b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -641,10 +641,10 @@
resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.47.0.tgz#c03dda41aefd3889cbfed95a391836106ae2ac4d"
integrity sha512-0Bx/HxqR8xpqqaLnZiFAHIh1jTAFQPFToVZ6Wi3QyhsAwmXRAbgw1SlkRMZ7w3e6l+G71Wnw+GnI4rx1gK8JLQ==
-"@gitlab/ui@^1.18.0":
- version "1.18.0"
- resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-1.18.0.tgz#5cc591b2c7958e59fa7b1b443d4235e0e8f956c9"
- integrity sha512-JqmiRSGYmK0DbGBQJBpjeRrcgjK25rCqG6QW6/GPTVLtRjbPPZYGvVg5PyA6nJUGAnwFoeApUZVML6X3OpnV1Q==
+"@gitlab/ui@^1.20.0":
+ version "1.20.0"
+ resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-1.20.0.tgz#50bd4b092646a2c6337f0f462779af8e702dda05"
+ integrity sha512-EJgrqon/tYCUPoOgnNNAXbrDXOEAajJwKHr4aR2R6vkJI3kVZiq66RNIe5ftGIUoNqYCDnRIkpLyo7MqzJPgcw==
dependencies:
babel-standalone "^6.26.0"
bootstrap-vue "^2.0.0-rc.11"