diff options
author | Miguel Rincon <mrincon@gitlab.com> | 2019-08-17 01:30:05 +0300 |
---|---|---|
committer | Miguel Rincon <mrincon@gitlab.com> | 2019-08-21 17:32:51 +0300 |
commit | 9cbb1b10935ce036316279ff056e817f215c9baa (patch) | |
tree | ccadd683fc28ddbb29b28e344f5cacf3df5a2d1c /app | |
parent | 38775a7f31db23fae3c39cb3f56c387de6e7c216 (diff) |
Replace the area with time series where used
- Replace in panel_type.vue
- Replace in embed.vue
- Port changes to support embed in 2 cols in large screens
- Update specs
Diffstat (limited to 'app')
3 files changed, 16 insertions, 8 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> |