diff options
author | Adriel Santiago <asantiago@gitlab.com> | 2019-01-07 19:07:25 +0000 |
---|---|---|
committer | Tim Zallmann <tzallmann@gitlab.com> | 2019-01-07 19:07:25 +0000 |
commit | ef5d7bb9398048217ef827908be6a4ca2963a26e (patch) | |
tree | 7c74301f78563dbb4c27b6ee88435574ba7cc879 | |
parent | 0c1d6be13cb52afb32d23d625a6400e28f0a991e (diff) | |
download | gitlab-ce-ef5d7bb9398048217ef827908be6a4ca2963a26e.tar.gz |
Add threshold lines in metrics graph
-rw-r--r-- | app/assets/javascripts/monitoring/components/charts/area.vue | 12 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/components/dashboard.vue | 5 | ||||
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | yarn.lock | 8 |
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" |