Merge branch '31368-support-different-time-windows-for-performance-dashboard' into 'master'

Resolve "Support different time windows for performance dashboard"

Closes #31368

See merge request gitlab-org/gitlab-ce!26047

1 files changed, 65 insertions, 15 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index f5019bc627e..f2bd4150b6d 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -10,6 +10,8 @@ import MonitorAreaChart from './charts/area.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
 import MonitoringStore from '../stores/monitoring_store';
+import { timeWindows } from '../constants';
+import { getTimeDiff } from '../utils';
 
 const sidebarAnimationDuration = 150;
 let sidebarMutationObserver;
@@ -88,6 +90,10 @@ export default {
       type: String,
       required: true,
     },
+    showTimeWindowDropdown: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -95,6 +101,7 @@ export default {
       state: 'gettingStarted',
       showEmptyState: true,
       elWidth: 0,
+      selectedTimeWindow: '',
     };
   },
   created() {
@@ -103,6 +110,9 @@ export default {
       deploymentEndpoint: this.deploymentEndpoint,
       environmentsEndpoint: this.environmentsEndpoint,
     });
+
+    this.timeWindows = timeWindows;
+    this.selectedTimeWindow = this.timeWindows.eightHours;
   },
   beforeDestroy() {
     if (sidebarMutationObserver) {
@@ -166,33 +176,73 @@ export default {
           this.state = 'unableToConnect';
         });
     },
+    getGraphsDataWithTime(timeFrame) {
+      this.state = 'loading';
+      this.showEmptyState = true;
+      this.service
+        .getGraphsData(getTimeDiff(this.timeWindows[timeFrame]))
+        .then(data => {
+          this.store.storeMetrics(data);
+          this.selectedTimeWindow = this.timeWindows[timeFrame];
+        })
+        .catch(() => {
+          Flash(s__('Metrics|Not enough data to display'));
+        })
+        .finally(() => {
+          this.showEmptyState = false;
+        });
+    },
     onSidebarMutation() {
       setTimeout(() => {
         this.elWidth = this.$el.clientWidth;
       }, sidebarAnimationDuration);
     },
+    activeTimeWindow(key) {
+      return this.timeWindows[key] === this.selectedTimeWindow;
+    },
   },
 };
 </script>
 
 <template>
   <div v-if="!showEmptyState" class="prometheus-graphs prepend-top-default">
-    <div v-if="environmentsEndpoint" class="environments d-flex align-items-center">
-      <strong>{{ s__('Metrics|Environment') }}</strong>
-      <gl-dropdown
-        class="prepend-left-10 js-environments-dropdown"
-        toggle-class="dropdown-menu-toggle"
-        :text="currentEnvironmentName"
-        :disabled="store.environmentsData.length === 0"
-      >
-        <gl-dropdown-item
-          v-for="environment in store.environmentsData"
-          :key="environment.id"
-          :active="environment.name === currentEnvironmentName"
-          active-class="is-active"
-          >{{ environment.name }}</gl-dropdown-item
+    <div
+      v-if="environmentsEndpoint"
+      class="dropdowns d-flex align-items-center justify-content-between"
+    >
+      <div class="d-flex align-items-center">
+        <strong>{{ s__('Metrics|Environment') }}</strong>
+        <gl-dropdown
+          class="prepend-left-10 js-environments-dropdown"
+          toggle-class="dropdown-menu-toggle"
+          :text="currentEnvironmentName"
+          :disabled="store.environmentsData.length === 0"
+        >
+          <gl-dropdown-item
+            v-for="environment in store.environmentsData"
+            :key="environment.id"
+            :active="environment.name === currentEnvironmentName"
+            active-class="is-active"
+            >{{ environment.name }}</gl-dropdown-item
+          >
+        </gl-dropdown>
+      </div>
+      <div v-if="showTimeWindowDropdown" class="d-flex align-items-center">
+        <strong>{{ s__('Metrics|Show last') }}</strong>
+        <gl-dropdown
+          class="prepend-left-10 js-time-window-dropdown"
+          toggle-class="dropdown-menu-toggle"
+          :text="selectedTimeWindow"
         >
-      </gl-dropdown>
+          <gl-dropdown-item
+            v-for="(value, key) in timeWindows"
+            :key="key"
+            :active="activeTimeWindow(key)"
+            @click="getGraphsDataWithTime(key)"
+            >{{ value }}</gl-dropdown-item
+          >
+        </gl-dropdown>
+      </div>
     </div>
     <graph-group
       v-for="(groupData, index) in store.groups"