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

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>

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"

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>

changelogs/unreleased/66073-use-time-series-chart-instead-of-area-chart-in-panel_types.yml

+---
+title: Enable line charts in dashbaord panels and embedded charts
+merge_request: 31920
+author:
+type: added

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

spec/javascripts/monitoring/panel_type_spec.js

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