Commit 5fc492de authored by Clement Ho's avatar Clement Ho

Merge branch '53147-utilize-new-charting-library-for-metrics-dashboard' into 'master'

Resolve "Utilize new charting library for metrics dashboard"

See merge request gitlab-org/gitlab-ce!23459
parents a22e01ae f053a02f
<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>
......@@ -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
......
......@@ -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)
......
......@@ -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
......@@ -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"
......
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