Add latest changes from gitlab-org/gitlab@master

1 files changed, 19 insertions, 1 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
index 44796d7926d..88d5a35146f 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
+++ b/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>