diff options
| -rw-r--r-- | app/assets/javascripts/monitoring/components/charts/area.vue | 97 | ||||
| -rw-r--r-- | app/assets/javascripts/monitoring/components/dashboard.vue | 10 | ||||
| -rw-r--r-- | app/controllers/projects/environments_controller.rb | 4 | ||||
| -rw-r--r-- | config/dependency_decisions.yml | 7 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | yarn.lock | 8 |
6 files changed, 119 insertions, 10 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue new file mode 100644 index 00000000000..12224e36ba2 --- /dev/null +++ b/app/assets/javascripts/monitoring/components/charts/area.vue @@ -0,0 +1,97 @@ +<script> +import { GlAreaChart } from '@gitlab/ui'; +import dateFormat from 'dateformat'; + +export default { + components: { + GlAreaChart, + }, + props: { + graphData: { + type: Object, + required: true, + validator(data) { + return ( + data.queries && + Array.isArray(data.queries) && + data.queries.filter(query => { + if (Array.isArray(query.result)) { + return ( + query.result.filter(res => Array.isArray(res.values)).length === query.result.length + ); + } + return false; + }).length === data.queries.length + ); + }, + }, + }, + computed: { + chartData() { + return this.graphData.queries.reduce((accumulator, query) => { + const xLabel = `${query.unit}`; + accumulator[xLabel] = {}; + query.result.forEach(res => + res.values.forEach(v => { + accumulator[xLabel][v.time.toISOString()] = v.value; + }), + ); + return accumulator; + }, {}); + }, + chartOptions() { + return { + xAxis: { + name: 'Time', + type: 'time', + axisLabel: { + formatter: date => dateFormat(date, 'h:MMtt'), + }, + nameTextStyle: { + padding: [18, 0, 0, 0], + }, + }, + yAxis: { + name: this.graphData.y_label, + axisLabel: { + formatter: value => value.toFixed(3), + }, + nameTextStyle: { + padding: [0, 0, 36, 0], + }, + }, + legend: { + formatter: this.xAxisLabel, + }, + }; + }, + xAxisLabel() { + return this.graphData.queries.map(query => query.label).join(', '); + }, + }, + methods: { + formatTooltipText(params) { + const [date, value] = params; + return [dateFormat(date, 'dd mmm yyyy, h:MMtt'), value.toFixed(3)]; + }, + onCreated(chart) { + this.$emit('created', chart); + }, + }, +}; +</script> + +<template> + <div class="prometheus-graph"> + <div class="prometheus-graph-header"> + <h5 class="prometheus-graph-title">{{ graphData.title }}</h5> + <div class="prometheus-graph-widgets"><slot></slot></div> + </div> + <gl-area-chart + :data="chartData" + :option="chartOptions" + :format-tooltip-text="formatTooltipText" + @created="onCreated" + /> + </div> +</template> diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 218c508a608..2d9c5050c9b 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -4,6 +4,7 @@ import { s__ } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; import Flash from '../../flash'; import MonitoringService from '../services/monitoring_service'; +import MonitorAreaChart from './charts/area.vue'; import GraphGroup from './graph_group.vue'; import Graph from './graph.vue'; import EmptyState from './empty_state.vue'; @@ -12,6 +13,7 @@ import eventHub from '../event_hub'; export default { components: { + MonitorAreaChart, Graph, GraphGroup, EmptyState, @@ -102,6 +104,9 @@ export default { }; }, computed: { + graphComponent() { + return gon.features && gon.features.areaChart ? MonitorAreaChart : Graph; + }, forceRedraw() { return this.elWidth; }, @@ -207,7 +212,8 @@ export default { :name="groupData.group" :show-panels="showPanels" > - <graph + <component + :is="graphComponent" v-for="(graphData, graphIndex) in groupData.metrics" :key="graphIndex" :graph-data="graphData" @@ -220,7 +226,7 @@ export default { > <!-- EE content --> {{ null }} - </graph> + </component> </graph-group> </div> <empty-state diff --git a/app/controllers/projects/environments_controller.rb b/app/controllers/projects/environments_controller.rb index e940f382a19..a63eea0ca0e 100644 --- a/app/controllers/projects/environments_controller.rb +++ b/app/controllers/projects/environments_controller.rb @@ -11,6 +11,10 @@ class Projects::EnvironmentsController < Projects::ApplicationController before_action :verify_api_request!, only: :terminal_websocket_authorize before_action :expire_etag_cache, only: [:index] + before_action do + push_frontend_feature_flag(:area_chart, project) + end + def index @environments = project.environments .with_state(params[:scope] || :available) diff --git a/config/dependency_decisions.yml b/config/dependency_decisions.yml index 6e4f7ce30a0..af76bace577 100644 --- a/config/dependency_decisions.yml +++ b/config/dependency_decisions.yml @@ -592,9 +592,10 @@ in compiled/distributed product so attribution not needed. :versions: [] :when: 2018-10-02 19:23:54.840151000 Z -- - :approve +- - :license - echarts - - :who: Mike Greiling + - Apache 2.0 + - :who: Adriel Santiago :why: https://github.com/apache/incubator-echarts/blob/master/LICENSE :versions: [] - :when: 2018-12-05 22:12:30.550027000 Z + :when: 2018-12-07 20:46:12.421256000 Z diff --git a/package.json b/package.json index 80e27e5bf86..7352375f78c 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.40.0", - "@gitlab/ui": "^1.14.0", + "@gitlab/ui": "^1.15.0", "apollo-boost": "^0.1.20", "apollo-client": "^2.4.5", "autosize": "^4.0.0", @@ -58,6 +58,7 @@ "diff": "^3.4.0", "document-register-element": "1.3.0", "dropzone": "^4.2.0", + "echarts": "^4.2.0-rc.2", "emoji-unicode-version": "^0.2.1", "exports-loader": "^0.7.0", "file-loader": "^2.0.0", diff --git a/yarn.lock b/yarn.lock index 21111235fe8..1d10b9d5403 100644 --- a/yarn.lock +++ b/yarn.lock @@ -641,10 +641,10 @@ resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.41.0.tgz#f80e3a0e259f3550af00685556ea925e471276d3" integrity sha512-tKUXyqe54efWBsjQBUcvNF0AvqmE2NI2No3Bnix/gKDRImzIlcgIkM67Y8zoJv1D0w4CO87WcaG5GLpIFIT1Pg== -"@gitlab/ui@^1.14.0": - version "1.14.0" - resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-1.14.0.tgz#f0fd7c0e6c45a36ab3be18d00e2908a8cb405f90" - integrity sha512-jkBTN8qO41A894kcLo6b/mfLIgL8YNn+ZzjgzEXaZ3PyeQ3mKBdrBoSYkzH556qviroBvk/+3yyZz96VUo08qQ== +"@gitlab/ui@^1.15.0": + version "1.15.0" + resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-1.15.0.tgz#288e189cb99de354aeb4598f9ac8cced5f47e139" + integrity sha512-Aiv/WABr8lBVJk0eoanSoO07Lr5Nnvuq82IjDnNzcw9enB1DAKvlstC2r9iiMfg1pVgV/uLdDeRFqH9eI1X4Rg== dependencies: babel-standalone "^6.26.0" bootstrap-vue "^2.0.0-rc.11" |