Merge branch 'jivanvl-updated-embed-charts-component' into 'master'

Update the monitoring/embed.vue component

See merge request gitlab-org/gitlab!19787

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -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,

app/assets/javascripts/monitoring/components/embed.vue

 <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>

app/assets/javascripts/monitoring/components/panel_type.vue

@@ -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

ee/app/assets/javascripts/monitoring/components/panel_type.vue

@@ -20,6 +20,11 @@ export default {
       required: false,
       default: false,
     },
+    groupId: {
+      type: String,
+      required: false,
+      default: 'panel-type-chart',
+    },
   },
   data() {
     return {

spec/frontend/monitoring/embed/embed_spec.js

 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);
     });
   });
 });

spec/frontend/monitoring/panel_type_spec.js

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