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
This commit is contained in:
parent
38775a7f31
commit
9cbb1b1093
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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', () => {
|
||||
|
|
Loading…
Reference in New Issue