Commit 93a56ba0 authored by Jose Vargas's avatar Jose Vargas

Replace single chart component with panel_type

This changes the use of individual chart components
inside the embed.vue component, this way the component
by using panel_type.vue can render multiple chart
types for embedded charts
parent 54506cc8
......@@ -18,8 +18,6 @@ import Icon from '~/vue_shared/components/icon.vue';
import { getParameterValues, mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
import invalidUrl from '~/lib/utils/invalid_url';
import DateTimePicker from './date_time_picker/date_time_picker.vue';
import MonitorTimeSeriesChart from './charts/time_series.vue';
import MonitorSingleStatChart from './charts/single_stat.vue';
import GraphGroup from './graph_group.vue';
import EmptyState from './empty_state.vue';
import TrackEventDirective from '~/vue_shared/directives/track_event';
......@@ -28,8 +26,6 @@ import { getTimeDiff, isValidDate, getAddMetricTrackingOptions } from '../utils'
export default {
components: {
VueDraggable,
MonitorTimeSeriesChart,
MonitorSingleStatChart,
PanelType,
GraphGroup,
EmptyState,
......
<script>
import { mapActions, mapState } from 'vuex';
import { getParameterValues, removeParams } from '~/lib/utils/url_utility';
import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
import GraphGroup from './graph_group.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,
MonitorTimeSeriesChart,
PanelType,
},
props: {
dashboardUrl: {
......@@ -92,16 +92,13 @@ 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-time-series-chart
v-for="graphData in charts"
:key="graphData.title"
<panel-type
v-for="(graphData, graphIndex) in charts"
:key="`panel-type-${graphIndex}`"
class="w-100"
clipboard-text=""
:graph-data="graphData"
:container-width="elWidth"
:group-id="dashboardUrl"
:project-path="null"
:show-border="true"
:single-embed="isSingleChart"
/>
</div>
</div>
......
......@@ -47,6 +47,11 @@ export default {
required: false,
default: '',
},
groupId: {
type: String,
required: false,
default: 'panel-type-chart',
},
},
computed: {
...mapState('monitoringDashboard', ['deploymentData', 'projectPath']),
......@@ -117,7 +122,7 @@ export default {
:deployment-data="deploymentData"
:project-path="projectPath"
:thresholds="getGraphAlertValues(graphData.metrics)"
group-id="panel-type-chart"
:group-id="groupId"
>
<div class="d-flex align-items-center">
<alert-widget
......
......@@ -20,6 +20,11 @@ export default {
required: false,
default: false,
},
groupId: {
type: String,
required: false,
default: 'panel-type-chart',
},
},
data() {
return {
......
import { createLocalVue, shallowMount } from '@vue/test-utils';
import Vuex from 'vuex';
import Embed from '~/monitoring/components/embed.vue';
import MonitorTimeSeriesChart from '~/monitoring/components/charts/time_series.vue';
import PanelType from 'ee_else_ce/monitoring/components/panel_type.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(MonitorTimeSeriesChart).exists()).toBe(false);
expect(wrapper.find(PanelType).exists()).toBe(false);
});
});
......@@ -71,12 +71,12 @@ describe('Embed', () => {
it('shows a chart when metrics are present', () => {
wrapper.setProps({});
expect(wrapper.find('.metrics-embed').exists()).toBe(true);
expect(wrapper.find(MonitorTimeSeriesChart).exists()).toBe(true);
expect(wrapper.findAll(MonitorTimeSeriesChart).length).toBe(2);
expect(wrapper.find(PanelType).exists()).toBe(true);
expect(wrapper.findAll(PanelType).length).toBe(2);
});
it('includes groupId with dashboardUrl', () => {
expect(wrapper.find(MonitorTimeSeriesChart).props('groupId')).toBe(TEST_HOST);
expect(wrapper.find(PanelType).props('groupId')).toBe(TEST_HOST);
});
});
});
......@@ -102,6 +102,10 @@ describe('Panel Type component', () => {
expect(clipboardText()).toBe(exampleText);
});
it('includes a default group id', () => {
expect(panelType.vm.groupId).toBe('panel-type-chart');
});
});
describe('Anomaly Chart panel type', () => {
......
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