Modify the service to support the extra parameters

Added the logic to allow the start and end dates to be created

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

@@ -9,7 +9,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 { timeWindows, msPerMinute } from '../constants';
+import { getTimeDifferenceMinutes } from '../utils';
 
 const sidebarAnimationDuration = 150;
 let sidebarMutationObserver;
@@ -107,6 +108,7 @@ export default {
 
     this.timeWindows = timeWindows;
     this.selectedTimeWindow = this.timeWindows.eightHours;
+    this.msPerMinute = msPerMinute;
   },
   beforeDestroy() {
     if (sidebarMutationObserver) {
@@ -167,6 +169,23 @@ export default {
     },
     getGraphsDataWithTime(timeFrame) {
       this.selectedTimeWindow = this.timeWindows[timeFrame];
+      this.state = 'loading';
+      this.showEmptyState = true;
+      const end = Date.now();
+      const timeDifferenceMinutes = getTimeDifferenceMinutes(this.selectedTimeWindow);
+      const start = new Date(end - timeDifferenceMinutes * this.msPerMinute).getTime();
+      this.service
+        .getGraphsData({
+          start,
+          end,
+        })
+        .then(data => {
+          this.store.storeMetrics(data);
+          this.showEmptyState = false;
+        })
+        .catch(() => {
+          this.state = 'unableToConnect';
+        });
     },
     onSidebarMutation() {
       setTimeout(() => {

app/assets/javascripts/monitoring/constants.js

@@ -16,3 +16,5 @@ export const timeWindows = {
   threeDays: '3 days',
   oneWeek: '1 week',
 };
+
+export const msPerMinute = 60000;

app/assets/javascripts/monitoring/services/monitoring_service.js

@@ -32,11 +32,15 @@ export default class MonitoringService {
     this.environmentsEndpoint = environmentsEndpoint;
   }
 
-  getGraphsData() {
-    return backOffRequest(() => axios.get(this.metricsEndpoint))
+  getGraphsData(params = {}) {
+    return backOffRequest(() => axios.get(this.metricsEndpoint, {
+      params: {
+        ...params
+      }
+    }))
       .then(resp => resp.data)
       .then(response => {
-        if (!response || !response.data) {
+        if (!response || !response.data || !response.success) {
           throw new Error(s__('Metrics|Unexpected metrics data response from prometheus endpoint'));
         }
         return response.data;

app/assets/javascripts/monitoring/utils.js

+import { timeWindows } from './constants'
+
+export const getTimeDifferenceMinutes = (timeWindow) => {
+  let timeDifferenceMinutes;
+  switch(timeWindow) {
+    case timeWindows.thirtyMinutes:
+      timeDifferenceMinutes = 30;
+      break;
+    case timeWindows.threeHours:
+      timeDifferenceMinutes = 60 * 3;
+      break;
+    case timeWindows.eightHours:
+      timeDifferenceMinutes = 60 * 8;
+      break;
+    case timeWindows.oneDay:
+      timeDifferenceMinutes = 60 * 24 * 1;
+      break;
+    case timeWindows.threeDays:
+      timeDifferenceMinutes = 60 * 24 * 3;
+      break;
+    case timeWindows.oneWeek:
+      timeDifferenceMinutes = 60 * 24 * 7 * 1;
+      break;
+    default:
+      timeDifferenceMinutes = 60 * 8;
+      break;
+  }
+
+  return timeDifferenceMinutes;
+};
+
+export default {};