From f77ff0c7bdc0b3a18406bf256dc5814833c14d23 Mon Sep 17 00:00:00 2001
From: Jose Vargas <jvargas@gitlab.com>
Date: Tue, 12 Mar 2019 12:55:43 -0600
Subject: Add support for time windows for the performance dashbooards

The performance dashboards will now display the data
from a set amount of time windows that are defined
on a constants file
---
 .../monitoring/components/dashboard.vue            | 58 ++++++++++++++++------
 1 file changed, 44 insertions(+), 14 deletions(-)

(limited to 'app/assets/javascripts/monitoring/components')

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index ba6a17827f7..917dc1b73b5 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -9,6 +9,7 @@ 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';
 
 const sidebarAnimationDuration = 150;
 let sidebarMutationObserver;
@@ -94,6 +95,7 @@ export default {
       state: 'gettingStarted',
       showEmptyState: true,
       elWidth: 0,
+      selectedTimeWindow: '',
     };
   },
   created() {
@@ -102,6 +104,9 @@ export default {
       deploymentEndpoint: this.deploymentEndpoint,
       environmentsEndpoint: this.environmentsEndpoint,
     });
+
+    this.timeWindows = timeWindows;
+    this.selectedTimeWindow = this.timeWindows.eightHours;
   },
   beforeDestroy() {
     if (sidebarMutationObserver) {
@@ -160,11 +165,17 @@ export default {
           this.state = 'unableToConnect';
         });
     },
+    getGraphsDataWithTime(timeFrame) {
+      this.selectedTimeWindow = this.timeWindows[timeFrame];
+    },
     onSidebarMutation() {
       setTimeout(() => {
         this.elWidth = this.$el.clientWidth;
       }, sidebarAnimationDuration);
     },
+    activeTimeWindow(key) {
+      return this.timeWindows[key] === this.selectedTimeWindow;
+    },
   },
 };
 </script>
@@ -172,21 +183,40 @@ export default {
 <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 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 class="d-flex align-items-center">
+        <span class="font-weight-bold">{{ s__('Metrics|Show Last') }}</span>
+        <gl-dropdown
+          id="time-window-dropdown"
+          class="prepend-left-10"
+          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"
-- 
cgit v1.2.1


From 268b727a5c7723d2beb057fbf985ba0b854e4d9f Mon Sep 17 00:00:00 2001
From: Jose Vargas <jvargas@gitlab.com>
Date: Wed, 20 Mar 2019 12:52:37 -0600
Subject: Modify the service to support the extra parameters

Added the logic to allow the start and end dates to be created
---
 .../javascripts/monitoring/components/dashboard.vue | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

(limited to 'app/assets/javascripts/monitoring/components')

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 917dc1b73b5..1a4bf70ab97 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/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(() => {
-- 
cgit v1.2.1


From 481d25bf482941c48c335f8895a828544a7df873 Mon Sep 17 00:00:00 2001
From: Jose Vargas <jvargas@gitlab.com>
Date: Wed, 20 Mar 2019 13:52:24 -0600
Subject: Add feature flag

Also added relevant tests that make use of a stubbed feature flag,
prettified files
---
 .../javascripts/monitoring/components/dashboard.vue       | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

(limited to 'app/assets/javascripts/monitoring/components')

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 1a4bf70ab97..dd8e899d3d3 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -99,6 +99,11 @@ export default {
       selectedTimeWindow: '',
     };
   },
+  computed: {
+    getTimeWindowFlagStatus() {
+      return gon.features.metricsTimeWindow;
+    },
+  },
   created() {
     this.service = new MonitoringService({
       metricsEndpoint: this.metricsEndpoint,
@@ -201,7 +206,10 @@ export default {
 
 <template>
   <div v-if="!showEmptyState" class="prometheus-graphs prepend-top-default">
-    <div v-if="environmentsEndpoint" class="environments d-flex align-items-center">
+    <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
@@ -219,11 +227,10 @@ export default {
           >
         </gl-dropdown>
       </div>
-      <div class="d-flex align-items-center">
+      <div v-if="getTimeWindowFlagStatus" class="d-flex align-items-center float-right">
         <span class="font-weight-bold">{{ s__('Metrics|Show Last') }}</span>
         <gl-dropdown
-          id="time-window-dropdown"
-          class="prepend-left-10"
+          class="prepend-left-10 js-time-window-dropdown"
           toggle-class="dropdown-menu-toggle"
           :text="selectedTimeWindow"
         >
-- 
cgit v1.2.1


From 217e9e4db1a81125a06830b9dbf270a15fb9c284 Mon Sep 17 00:00:00 2001
From: Jose Vargas <jvargas@gitlab.com>
Date: Mon, 1 Apr 2019 12:38:26 -0600
Subject: Created `getTimeDiff` utility function

Updated i18n strings and changed the
monitoring service graph data params
---
 .../monitoring/components/dashboard.vue            | 24 ++++++++--------------
 1 file changed, 9 insertions(+), 15 deletions(-)

(limited to 'app/assets/javascripts/monitoring/components')

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index dd8e899d3d3..21105d886fb 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -9,8 +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, msPerMinute } from '../constants';
-import { getTimeDifferenceMinutes } from '../utils';
+import { timeWindows } from '../constants';
+import { getTimeDiff } from '../utils';
 
 const sidebarAnimationDuration = 150;
 let sidebarMutationObserver;
@@ -100,7 +100,7 @@ export default {
     };
   },
   computed: {
-    getTimeWindowFlagStatus() {
+    showTimeWindowDropdown() {
       return gon.features.metricsTimeWindow;
     },
   },
@@ -113,7 +113,6 @@ export default {
 
     this.timeWindows = timeWindows;
     this.selectedTimeWindow = this.timeWindows.eightHours;
-    this.msPerMinute = msPerMinute;
   },
   beforeDestroy() {
     if (sidebarMutationObserver) {
@@ -173,23 +172,18 @@ 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,
-        })
+        .getGraphsData(getTimeDiff(this.timeWindows[timeFrame]))
         .then(data => {
           this.store.storeMetrics(data);
+          this.selectedTimeWindow = this.timeWindows[timeFrame];
           this.showEmptyState = false;
         })
         .catch(() => {
-          this.state = 'unableToConnect';
+          this.showEmptyState = false;
+          Flash(s__('Metrics|Not enough data to display'));
         });
     },
     onSidebarMutation() {
@@ -227,8 +221,8 @@ export default {
           >
         </gl-dropdown>
       </div>
-      <div v-if="getTimeWindowFlagStatus" class="d-flex align-items-center float-right">
-        <span class="font-weight-bold">{{ s__('Metrics|Show Last') }}</span>
+      <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"
-- 
cgit v1.2.1


From a6f9f79b73ec1893e00a41ae20c3e17bd33cccb4 Mon Sep 17 00:00:00 2001
From: Jose Vargas <jvargas@gitlab.com>
Date: Tue, 2 Apr 2019 14:02:29 -0600
Subject: Changed the feature flag usage

In order for the dashboard component not to fail, the feature flag
is now required by default
---
 app/assets/javascripts/monitoring/components/dashboard.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'app/assets/javascripts/monitoring/components')

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 21105d886fb..529f82b4ae1 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -89,6 +89,10 @@ export default {
       type: String,
       required: true,
     },
+    showTimeWindowDropdown: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -99,11 +103,6 @@ export default {
       selectedTimeWindow: '',
     };
   },
-  computed: {
-    showTimeWindowDropdown() {
-      return gon.features.metricsTimeWindow;
-    },
-  },
   created() {
     this.service = new MonitoringService({
       metricsEndpoint: this.metricsEndpoint,
-- 
cgit v1.2.1


From 976f1feb28265bfc427a00e7031275f49aa7f877 Mon Sep 17 00:00:00 2001
From: Jose Vargas <jvargas@gitlab.com>
Date: Wed, 3 Apr 2019 16:10:39 -0600
Subject: Document getTimeDifferenceMinutes usage

Also added a finally clause to the getGraphsDataWithTime promise
---
 app/assets/javascripts/monitoring/components/dashboard.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'app/assets/javascripts/monitoring/components')

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 529f82b4ae1..d7055097a63 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -178,11 +178,12 @@ export default {
         .then(data => {
           this.store.storeMetrics(data);
           this.selectedTimeWindow = this.timeWindows[timeFrame];
-          this.showEmptyState = false;
         })
         .catch(() => {
-          this.showEmptyState = false;
           Flash(s__('Metrics|Not enough data to display'));
+        })
+        .finally(() => {
+          this.showEmptyState = false;
         });
     },
     onSidebarMutation() {
-- 
cgit v1.2.1