diff options
author | Tim Zallmann <tzallmann@gitlab.com> | 2019-08-24 10:26:17 +0300 |
---|---|---|
committer | Tim Zallmann <tzallmann@gitlab.com> | 2019-08-24 10:26:17 +0300 |
commit | b15f03883e59ca83a6c4b4896df463316630a5f7 (patch) | |
tree | 2772eaf07dc0c294170ef3801bf284a19484e8bf | |
parent | 892e4c0da818006159cc26bc79f1fa48b76c9b3f (diff) | |
parent | 2e9c4e9156b1906c36ec72f49ff26779d5654a19 (diff) |
Merge branch '66073-use-time-series-chart-instead-of-area-chart-in-panel_types' into 'master'
Enable line charts in dashbaord panels and embedded charts
Closes #66073
See merge request gitlab-org/gitlab-ce!31920
6 files changed, 29 insertions, 15 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue index 2fdc75f63ca..02e7a7ba0a6 100644 --- a/app/assets/javascripts/monitoring/components/charts/time_series.vue +++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue @@ -48,6 +48,11 @@ export default { required: false, default: false, }, + singleEmbed: { + type: Boolean, + required: false, + default: false, + }, thresholds: { type: Array, required: false, @@ -267,7 +272,10 @@ export default { </script> <template> - <div class="prometheus-graph col-12 col-lg-6" :class="[showBorder ? 'p-2' : 'p-0']"> + <div + class="prometheus-graph col-12" + :class="[showBorder ? 'p-2' : 'p-0', { 'col-lg-6': !singleEmbed }]" + > <div :class="{ 'prometheus-graph-embed w-100 p-3': showBorder }"> <div class="prometheus-graph-header"> <h5 class="prometheus-graph-title js-graph-title">{{ graphData.title }}</h5> diff --git a/app/assets/javascripts/monitoring/components/embed.vue b/app/assets/javascripts/monitoring/components/embed.vue index e3256147618..b516a82c170 100644 --- a/app/assets/javascripts/monitoring/components/embed.vue +++ b/app/assets/javascripts/monitoring/components/embed.vue @@ -2,7 +2,7 @@ import { mapActions, mapState } from 'vuex'; import { getParameterValues, removeParams } from '~/lib/utils/url_utility'; import GraphGroup from './graph_group.vue'; -import MonitorAreaChart from './charts/area.vue'; +import MonitorTimeSeriesChart from './charts/time_series.vue'; import { sidebarAnimationDuration } from '../constants'; import { getTimeDiff } from '../utils'; @@ -11,7 +11,7 @@ let sidebarMutationObserver; export default { components: { GraphGroup, - MonitorAreaChart, + MonitorTimeSeriesChart, }, props: { dashboardUrl: { @@ -92,7 +92,7 @@ export default { <template> <div class="metrics-embed" :class="{ 'd-inline-flex col-lg-6 p-0': isSingleChart }"> <div v-if="charts.length" class="row w-100 m-n2 pb-4"> - <monitor-area-chart + <monitor-time-series-chart v-for="graphData in charts" :key="graphData.title" :graph-data="graphData" diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue index 96f62bc85ee..73ff651d510 100644 --- a/app/assets/javascripts/monitoring/components/panel_type.vue +++ b/app/assets/javascripts/monitoring/components/panel_type.vue @@ -10,14 +10,14 @@ import { GlTooltipDirective, } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; -import MonitorAreaChart from './charts/area.vue'; +import MonitorTimeSeriesChart from './charts/time_series.vue'; import MonitorSingleStatChart from './charts/single_stat.vue'; import MonitorEmptyChart from './charts/empty_chart.vue'; export default { components: { - MonitorAreaChart, MonitorSingleStatChart, + MonitorTimeSeriesChart, MonitorEmptyChart, Icon, GlDropdown, @@ -92,7 +92,7 @@ export default { v-if="isPanelType('single-stat') && graphDataHasMetrics" :graph-data="graphData" /> - <monitor-area-chart + <monitor-time-series-chart v-else-if="graphDataHasMetrics" :graph-data="graphData" :deployment-data="deploymentData" @@ -136,6 +136,6 @@ export default { </gl-dropdown-item> </gl-dropdown> </div> - </monitor-area-chart> + </monitor-time-series-chart> <monitor-empty-chart v-else :graph-title="graphData.title" /> </template> diff --git a/changelogs/unreleased/66073-use-time-series-chart-instead-of-area-chart-in-panel_types.yml b/changelogs/unreleased/66073-use-time-series-chart-instead-of-area-chart-in-panel_types.yml new file mode 100644 index 00000000000..8d7af96a7d8 --- /dev/null +++ b/changelogs/unreleased/66073-use-time-series-chart-instead-of-area-chart-in-panel_types.yml @@ -0,0 +1,5 @@ +--- +title: Enable line charts in dashbaord panels and embedded charts +merge_request: 31920 +author: +type: added diff --git a/spec/frontend/monitoring/embed/embed_spec.js b/spec/frontend/monitoring/embed/embed_spec.js index 3b18a0f77c7..1ce14e2418a 100644 --- a/spec/frontend/monitoring/embed/embed_spec.js +++ b/spec/frontend/monitoring/embed/embed_spec.js @@ -1,7 +1,7 @@ import { createLocalVue, shallowMount } from '@vue/test-utils'; import Vuex from 'vuex'; import Embed from '~/monitoring/components/embed.vue'; -import MonitorAreaChart from '~/monitoring/components/charts/area.vue'; +import MonitorTimeSeriesChart from '~/monitoring/components/charts/time_series.vue'; import { TEST_HOST } from 'helpers/test_constants'; import { groups, initialState, metricsData, metricsWithData } from './mock_data'; @@ -55,7 +55,7 @@ describe('Embed', () => { it('shows an empty state when no metrics are present', () => { expect(wrapper.find('.metrics-embed').exists()).toBe(true); - expect(wrapper.find(MonitorAreaChart).exists()).toBe(false); + expect(wrapper.find(MonitorTimeSeriesChart).exists()).toBe(false); }); }); @@ -71,8 +71,8 @@ describe('Embed', () => { it('shows a chart when metrics are present', () => { wrapper.setProps({}); expect(wrapper.find('.metrics-embed').exists()).toBe(true); - expect(wrapper.find(MonitorAreaChart).exists()).toBe(true); - expect(wrapper.findAll(MonitorAreaChart).length).toBe(2); + expect(wrapper.find(MonitorTimeSeriesChart).exists()).toBe(true); + expect(wrapper.findAll(MonitorTimeSeriesChart).length).toBe(2); }); }); }); diff --git a/spec/javascripts/monitoring/panel_type_spec.js b/spec/javascripts/monitoring/panel_type_spec.js index 086be628093..a2366e74d43 100644 --- a/spec/javascripts/monitoring/panel_type_spec.js +++ b/spec/javascripts/monitoring/panel_type_spec.js @@ -1,7 +1,7 @@ import { shallowMount } from '@vue/test-utils'; import PanelType from '~/monitoring/components/panel_type.vue'; import EmptyChart from '~/monitoring/components/charts/empty_chart.vue'; -import AreaChart from '~/monitoring/components/charts/area.vue'; +import TimeSeriesChart from '~/monitoring/components/charts/time_series.vue'; import { graphDataPrometheusQueryRange } from './mock_data'; import { createStore } from '~/monitoring/stores'; @@ -62,9 +62,10 @@ describe('Panel Type component', () => { }); }); - describe('Area Chart panel type', () => { + describe('Time Series Chart panel type', () => { it('is rendered', () => { - expect(panelType.find(AreaChart).exists()).toBe(true); + expect(panelType.find(TimeSeriesChart).isVueInstance()).toBe(true); + expect(panelType.find(TimeSeriesChart).exists()).toBe(true); }); it('sets clipboard text on the dropdown', () => { |