Fix empty charts in collapsed sections

Using resize observer to listen to chart containers
width. Removed other listeners to window resize

app/assets/javascripts/monitoring/components/charts/time_series.vue

 <script>
 import { s__, __ } from '~/locale';
-import { GlLink, GlButton, GlTooltip } from '@gitlab/ui';
+import { GlLink, GlButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
-import { debounceByAnimationFrame, roundOffFloat } from '~/lib/utils/common_utils';
+import { roundOffFloat } from '~/lib/utils/common_utils';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import Icon from '~/vue_shared/components/icon.vue';
 import { chartHeight, graphTypes, lineTypes, symbolSizes, dateFormats } from '../../constants';
 import { makeDataSeries } from '~/helpers/monitor_helper';
 import { graphDataValidatorForValues } from '../../utils';
 
-let debouncedResize;
-
 export default {
   components: {
     GlAreaChart,
@@ -22,6 +20,9 @@ export default {
     GlLink,
     Icon,
   },
+  directives: {
+    GlResizeObserverDirective,
+  },
   inheritAttrs: false,
   props: {
     graphData: {
@@ -29,10 +30,6 @@ export default {
       required: true,
       validator: graphDataValidatorForValues.bind(null, false),
     },
-    containerWidth: {
-      type: Number,
-      required: true,
-    },
     deploymentData: {
       type: Array,
       required: false,
@@ -206,21 +203,13 @@ export default {
       return `${this.graphData.y_label}`;
     },
   },
-  watch: {
-    containerWidth: 'onResize',
-  },
   mounted() {
     const graphTitleEl = this.$refs.graphTitle;
     if (graphTitleEl && graphTitleEl.scrollWidth > graphTitleEl.offsetWidth) {
       this.showTitleTooltip = true;
     }
   },
-  beforeDestroy() {
-    window.removeEventListener('resize', debouncedResize);
-  },
   created() {
-    debouncedResize = debounceByAnimationFrame(this.onResize);
-    window.addEventListener('resize', debouncedResize);
     this.setSvg('rocket');
     this.setSvg('scroll-handle');
   },
@@ -276,7 +265,7 @@ export default {
 </script>
 
 <template>
-  <div class="prometheus-graph">
+  <div v-gl-resize-observer-directive="onResize" class="prometheus-graph">
     <div class="prometheus-graph-header">
       <h5
         ref="graphTitle"

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

@@ -22,12 +22,9 @@ 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 { sidebarAnimationDuration } from '../constants';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import { getTimeDiff, isValidDate, downloadCSVOptions, generateLinkToChartOptions } from '../utils';
 
-let sidebarMutationObserver;
-
 export default {
   components: {
     VueDraggable,
@@ -167,7 +164,6 @@ export default {
   data() {
     return {
       state: 'gettingStarted',
-      elWidth: 0,
       formIsValid: null,
       selectedTimeWindow: {},
       isRearrangingPanels: false,
@@ -214,11 +210,6 @@ export default {
       projectPath: this.projectPath,
     });
   },
-  beforeDestroy() {
-    if (sidebarMutationObserver) {
-      sidebarMutationObserver.disconnect();
-    }
-  },
   mounted() {
     if (!this.hasMetrics) {
       this.setGettingStartedEmptyState();
@@ -239,13 +230,6 @@ export default {
       } else {
         this.fetchData(range);
       }
-
-      sidebarMutationObserver = new MutationObserver(this.onSidebarMutation);
-      sidebarMutationObserver.observe(document.querySelector('.layout-page'), {
-        attributes: true,
-        childList: false,
-        subtree: false,
-      });
     }
   },
   methods: {
@@ -306,11 +290,6 @@ export default {
     hideAddMetricModal() {
       this.$refs.addMetricModal.hide();
     },
-    onSidebarMutation() {
-      setTimeout(() => {
-        this.elWidth = this.$el.clientWidth;
-      }, sidebarAnimationDuration);
-    },
     toggleRearrangingPanels() {
       this.isRearrangingPanels = !this.isRearrangingPanels;
     },
@@ -503,7 +482,6 @@ export default {
                     generateLink(groupData.group, graphData.title, graphData.y_label)
                   "
                   :graph-data="graphData"
-                  :dashboard-width="elWidth"
                   :alerts-endpoint="alertsEndpoint"
                   :prometheus-alerts-available="prometheusAlertsAvailable"
                   :index="`${index}-${graphIndex}`"
@@ -520,7 +498,6 @@ export default {
             :graph-data="graphData"
             :deployment-data="deploymentData"
             :thresholds="getGraphAlertValues(graphData.queries)"
-            :container-width="elWidth"
             :project-path="projectPath"
             group-id="monitor-time-series-chart"
           >

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

@@ -45,7 +45,7 @@ export default {
   <div v-if="showPanels" class="card prometheus-panel">
     <div class="card-header d-flex align-items-center">
       <h4 class="flex-grow-1">{{ name }}</h4>
-      <a role="button" @click="collapse">
+      <a role="button" class="js-graph-group-toggle" @click="collapse">
         <icon :size="16" :aria-label="__('Toggle collapse')" :name="caretIcon" />
       </a>
     </div>

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

@@ -40,10 +40,6 @@ export default {
       type: Object,
       required: true,
     },
-    dashboardWidth: {
-      type: Number,
-      required: true,
-    },
     index: {
       type: String,
       required: false,
@@ -103,7 +99,6 @@ export default {
     :deployment-data="deploymentData"
     :project-path="projectPath"
     :thresholds="getGraphAlertValues(graphData.queries)"
-    :container-width="dashboardWidth"
     group-id="monitor-area-chart"
   >
     <div class="d-flex align-items-center">

changelogs/unreleased/33268-updated-operations-metrics-charts-do-not-load-properly.yml

+---
+title: Fix empty chart in collapsed sections
+merge_request: 18699
+author:
+type: fixed

spec/javascripts/monitoring/components/dashboard_spec.js

@@ -539,42 +539,67 @@ describe('Dashboard', () => {
     });
   });
 
-  describe('when the window resizes', () => {
+  describe('responds to window resizes', () => {
+    let promPanel;
+    let promGroup;
+    let panelToggle;
+    let chart;
     beforeEach(() => {
       mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
-      jasmine.clock().install();
-    });
 
-    afterEach(() => {
-      jasmine.clock().uninstall();
-    });
-
-    it('sets elWidth to page width when the sidebar is resized', done => {
       component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: {
           ...propsData,
           hasMetrics: true,
-          showPanels: false,
+          showPanels: true,
         },
         store,
       });
 
-      expect(component.elWidth).toEqual(0);
+      component.$store.dispatch('monitoringDashboard/setFeatureFlags', {
+        prometheusEndpoint: false,
+      });
 
-      const pageLayoutEl = document.querySelector('.layout-page');
-      pageLayoutEl.classList.add('page-with-icon-sidebar');
+      component.$store.commit(
+        `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
+        environmentData,
+      );
 
-      Vue.nextTick()
-        .then(() => {
-          jasmine.clock().tick(1000);
-          return Vue.nextTick();
-        })
-        .then(() => {
-          expect(component.elWidth).toEqual(pageLayoutEl.clientWidth);
-          done();
-        })
-        .catch(done.fail);
+      component.$store.commit(
+        `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
+        singleGroupResponse,
+      );
+
+      component.$store.commit(
+        `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,
+        dashboardGitResponse,
+      );
+
+      return Vue.nextTick().then(() => {
+        promPanel = component.$el.querySelector('.prometheus-panel');
+        promGroup = promPanel.querySelector('.prometheus-graph-group');
+        panelToggle = promPanel.querySelector('.js-graph-group-toggle');
+        chart = promGroup.querySelector('.position-relative svg');
+      });
+    });
+
+    it('setting chart size to zero when panel group is hidden', () => {
+      expect(promGroup.style.display).toBe('');
+      expect(chart.clientWidth).toBeGreaterThan(0);
+
+      panelToggle.click();
+      return Vue.nextTick().then(() => {
+        expect(promGroup.style.display).toBe('none');
+        expect(chart.clientWidth).toBe(0);
+        promPanel.style.width = '500px';
+      });
+    });
+
+    it('expanding chart panel group after resize displays chart', () => {
+      panelToggle.click();
+
+      expect(chart.clientWidth).toBeGreaterThan(0);
     });
   });