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

2 files changed, 8 insertions, 7 deletions

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', () => {