Add retry to metrics panel preview page

This page adds a refresh icon in the panel preview
page in the metrics dashboard

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

@@ -8,6 +8,7 @@ import {
   GlButton,
   GlSprintf,
   GlAlert,
+  GlTooltipDirective,
 } from '@gitlab/ui';
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 import { timeRanges } from '~/vue_shared/constants';
@@ -34,6 +35,9 @@ export default {
     DashboardPanel,
     DateTimePicker,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   data() {
     return {
       yml: initialYml,
@@ -67,6 +71,13 @@ export default {
         this.fetchPanelPreviewMetrics();
       }
     },
+    onRefresh() {
+      // refetch data only if preview has been clicked
+      // and there are no errors
+      if (this.panelPreviewIsShown && !this.panelPreviewError) {
+        this.fetchPanelPreviewMetrics();
+      }
+    },
   },
   timeRanges,
 };
@@ -171,11 +182,18 @@ export default {
     </gl-alert>
     <date-time-picker
       ref="dateTimePicker"
-      class="gl-flex-grow-1 preview-date-time-picker"
+      class="gl-flex-grow-1 preview-date-time-picker gl-xs-mb-3"
       :value="panelPreviewTimeRange"
       :options="$options.timeRanges"
       @input="onDateTimePickerInput"
     />
+    <gl-button
+      v-gl-tooltip
+      data-testid="previewRefreshButton"
+      icon="retry"
+      :title="s__('Metrics|Refresh Prometheus data')"
+      @click="onRefresh"
+    />
     <dashboard-panel :graph-data="panelPreviewGraphData" />
   </div>
 </template>

locale/gitlab.pot

@@ -15346,6 +15346,9 @@ msgstr ""
 msgid "Metrics|Prometheus Query Documentation"
 msgstr ""
 
+msgid "Metrics|Refresh Prometheus data"
+msgstr ""
+
 msgid "Metrics|Refresh dashboard"
 msgstr ""
 

spec/frontend/monitoring/components/dashboard_panel_builder_spec.js

@@ -40,6 +40,7 @@ describe('dashboard invalid url parameters', () => {
   const findOpenRepositoryBtn = () => wrapper.find({ ref: 'openRepositoryBtn' });
   const findPanel = () => wrapper.find(DashboardPanel);
   const findTimeRangePicker = () => wrapper.find(DateTimePicker);
+  const findRefreshButton = () => wrapper.find('[data-testid="previewRefreshButton"]');
 
   beforeEach(() => {
     mockShowToast = jest.fn();
@@ -138,6 +139,35 @@ describe('dashboard invalid url parameters', () => {
     });
   });
 
+  describe('refresh', () => {
+    it('is visible by default', () => {
+      expect(findRefreshButton().exists()).toBe(true);
+    });
+
+    it('when clicked does not trigger data fetch unless preview panel button is clicked', () => {
+      // mimic initial state where SET_PANEL_PREVIEW_IS_SHOWN is set to false
+      store.commit(`monitoringDashboard/${types.SET_PANEL_PREVIEW_IS_SHOWN}`, false);
+
+      return wrapper.vm.$nextTick(() => {
+        expect(store.dispatch).not.toHaveBeenCalled();
+      });
+    });
+
+    it('when clicked triggers data fetch if preview panel button is clicked', () => {
+      // mimic state where preview is visible. SET_PANEL_PREVIEW_IS_SHOWN is set to true
+      store.commit(`monitoringDashboard/${types.SET_PANEL_PREVIEW_IS_SHOWN}`, true);
+
+      findRefreshButton().vm.$emit('click');
+
+      return wrapper.vm.$nextTick(() => {
+        expect(store.dispatch).toHaveBeenCalledWith(
+          'monitoringDashboard/fetchPanelPreviewMetrics',
+          undefined,
+        );
+      });
+    });
+  });
+
   describe('instructions card', () => {
     const mockDocsPath = '/docs-path';
     const mockProjectPath = '/project-path';