Merge branch '66073-use-time-series-chart-instead-of-area-chart-in-panel_types' into 'master'

Enable line charts in dashbaord panels and embedded charts

Closes #66073

See merge request gitlab-org/gitlab-ce!31920

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>