Use GitLab UI area chart
Replace the metrics dashboard graph with GitLab UI's area chart component
This commit is contained in:
parent
a27ba8edfa
commit
f053a02f68
|
@ -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>
|
|
@ -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
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
"@babel/plugin-syntax-import-meta": "^7.0.0",
|
||||
"@babel/preset-env": "^7.1.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",
|
||||
|
@ -57,6 +57,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",
|
||||
|
|
|
@ -634,10 +634,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"
|
||||
|
|
Loading…
Reference in New Issue