Add refresh dashboard button

This adds the refresh dashboard button
to the monitoring dashboard, this only
refreshes the page for this iteration

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

@@ -19,7 +19,7 @@ import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
+import { mergeUrlParams, redirectTo, refreshCurrentPage } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
 import Icon from '~/vue_shared/components/icon.vue';
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
@@ -351,6 +351,10 @@ export default {
       };
       redirectTo(mergeUrlParams(params, window.location.href));
     },
+
+    refreshDashboard() {
+      refreshCurrentPage();
+    },
   },
   addMetric: {
     title: s__('Metrics|Add metric'),
@@ -438,7 +442,7 @@ export default {
           :label="s__('Metrics|Show last')"
           label-size="sm"
           label-for="monitor-time-window-dropdown"
-          class="col-sm-6 col-md-6 col-lg-4"
+          class="col-sm-auto col-md-auto col-lg-auto"
         >
           <date-time-picker
             ref="dateTimePicker"
@@ -449,6 +453,18 @@ export default {
           />
         </gl-form-group>
 
+        <gl-form-group class="col-sm-2 col-md-2 col-lg-1 refresh-dashboard-button">
+          <gl-button
+            ref="refreshDashboardBtn"
+            v-gl-tooltip
+            variant="default"
+            :title="s__('Metrics|Reload this page')"
+            @click="refreshDashboard"
+          >
+            <icon name="repeat" />
+          </gl-button>
+        </gl-form-group>
+
         <gl-form-group
           v-if="hasHeaderButtons"
           label-for="prometheus-graphs-dropdown-buttons"

app/assets/stylesheets/pages/environments.scss

@@ -98,6 +98,14 @@
   }
 }
 
+.refresh-dashboard-button {
+  margin-top: 22px;
+
+  @media(max-width: map-get($grid-breakpoints, sm)) {
+    margin-top: 0;
+  }
+}
+
 .metric-area {
   opacity: 0.25;
 }

changelogs/unreleased/jivavnvl-add-refresh-button-monitoring-dashboard.yml

+---
+title: Add refresh dashboard button
+merge_request: 25716
+author:
+type: changed

locale/gitlab.pot

@@ -12381,6 +12381,9 @@ msgstr ""
 msgid "Metrics|Prometheus Query Documentation"
 msgstr ""
 
+msgid "Metrics|Reload this page"
+msgstr ""
+
 msgid "Metrics|Show last"
 msgstr ""
 

spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap

@@ -72,7 +72,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
       </gl-form-group-stub>
        
       <gl-form-group-stub
-        class="col-sm-6 col-md-6 col-lg-4"
+        class="col-sm-auto col-md-auto col-lg-auto"
         label="Show last"
         label-for="monitor-time-window-dropdown"
         label-size="sm"
@@ -83,6 +83,21 @@ exports[`Dashboard template matches the default snapshot 1`] = `
         />
       </gl-form-group-stub>
        
+      <gl-form-group-stub
+        class="col-sm-2 col-md-2 col-lg-1 refresh-dashboard-button"
+      >
+        <gl-button-stub
+          size="md"
+          title="Reload this page"
+          variant="default"
+        >
+          <icon-stub
+            name="repeat"
+            size="16"
+          />
+        </gl-button-stub>
+      </gl-form-group-stub>
+       
       <!---->
     </div>
   </div>

spec/frontend/monitoring/components/dashboard_spec.js

@@ -214,6 +214,19 @@ describe('Dashboard', () => {
     });
   });
 
+  it('renders the refresh dashboard button', () => {
+    createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
+
+    setupComponentStore(wrapper);
+
+    return wrapper.vm.$nextTick().then(() => {
+      const refreshBtn = wrapper.findAll({ ref: 'refreshDashboardBtn' });
+
+      expect(refreshBtn).toHaveLength(1);
+      expect(refreshBtn.is(GlButton)).toBe(true);
+    });
+  });
+
   describe('when one of the metrics is missing', () => {
     beforeEach(() => {
       createShallowWrapper({ hasMetrics: true });