Merge branch 'master' into 30286-vue-loadin-icon30286-vue-loadin-icon

* master: (62 commits)
  Fix broken test - load correct data
  Remove redirect for old issue url containing id instead of iid
  Use vue file for table pagination component
  stub error handlers where uncaught Promise rejections currently exist
  Revert "Fix OpenID spec failure that assumed current_sign_in_at would be set"
  Add :redis keyword to some specs clear state of trackable attributes
  Fix OpenID spec failure that assumed current_sign_in_at would be set
  Kubernetes Helm Chart Install docs
  Add Repository subnav to 'Find files'
  Make tree, blob and blame pages more consistent
  Add screenshots to Triggered Build docs
  Add Prometheus memory sparkline to MR widget
  Fix test failure in job vue componenFix test failure in job vue componentt
  Remove unnecessary if check
  Fix links in code review docs
  Improve readability of code
  Remove some unused Gitlab::Git code
  Use Rails 'delegate'
  Remove CI/CD models directory from `eager_load_paths`
  Don't make Commit#raw_deltas private
  ...

1 files changed, 60 insertions, 44 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
index 395cc9e91fc..486b13e60af 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
@@ -5,8 +5,6 @@ import MRWidgetService from '../services/mr_widget_service';
 export default {
   name: 'MemoryUsage',
   props: {
-    mr: { type: Object, required: true },
-    service: { type: Object, required: true },
     metricsUrl: { type: String, required: true },
   },
   data() {
@@ -14,6 +12,7 @@ export default {
       // memoryFrom: 0,
       // memoryTo: 0,
       memoryMetrics: [],
+      deploymentTime: 0,
       hasMetrics: false,
       loadFailed: false,
       loadingMetrics: true,
@@ -23,8 +22,22 @@ export default {
   components: {
     'mr-memory-graph': MemoryGraph,
   },
+  computed: {
+    shouldShowLoading() {
+      return this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
+    },
+    shouldShowMemoryGraph() {
+      return !this.loadingMetrics && this.hasMetrics && !this.loadFailed;
+    },
+    shouldShowLoadFailure() {
+      return !this.loadingMetrics && !this.hasMetrics && this.loadFailed;
+    },
+    shouldShowMetricsUnavailable() {
+      return !this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
+    },
+  },
   methods: {
-    computeGraphData(metrics) {
+    computeGraphData(metrics, deploymentTime) {
       this.loadingMetrics = false;
       const { memory_values } = metrics;
       // if (memory_previous.length > 0) {
@@ -38,70 +51,73 @@ export default {
       if (memory_values.length > 0) {
         this.hasMetrics = true;
         this.memoryMetrics = memory_values[0].values;
+        this.deploymentTime = deploymentTime;
       }
     },
-  },
-  mounted() {
-    this.$props.loadingMetrics = true;
-    gl.utils.backOff((next, stop) => {
-      MRWidgetService.fetchMetrics(this.$props.metricsUrl)
-        .then((res) => {
-          if (res.status === statusCodes.NO_CONTENT) {
-            this.backOffRequestCounter = this.backOffRequestCounter += 1;
-            if (this.backOffRequestCounter < 3) {
-              next();
+    loadMetrics() {
+      gl.utils.backOff((next, stop) => {
+        MRWidgetService.fetchMetrics(this.metricsUrl)
+          .then((res) => {
+            if (res.status === statusCodes.NO_CONTENT) {
+              this.backOffRequestCounter = this.backOffRequestCounter += 1;
+              /* eslint-disable no-unused-expressions */
+              this.backOffRequestCounter < 3 ? next() : stop(res);
             } else {
               stop(res);
             }
-          } else {
-            stop(res);
+          })
+          .catch(stop);
+      })
+        .then((res) => {
+          if (res.status === statusCodes.NO_CONTENT) {
+            return res;
           }
-        })
-        .catch(stop);
-    })
-    .then((res) => {
-      if (res.status === statusCodes.NO_CONTENT) {
-        return res;
-      }
 
-      return res.json();
-    })
-    .then((res) => {
-      this.computeGraphData(res.metrics);
-      return res;
-    })
-    .catch(() => {
-      this.$props.loadFailed = true;
-    });
+          return res.json();
+        })
+        .then((res) => {
+          this.computeGraphData(res.metrics, res.deployment_time);
+          return res;
+        })
+        .catch(() => {
+          this.loadFailed = true;
+          this.loadingMetrics = false;
+        });
+    },
+  },
+  mounted() {
+    this.loadingMetrics = true;
+    this.loadMetrics();
   },
   template: `
-    <div class="mr-info-list mr-memory-usage">
+    <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage">
       <div class="legend"></div>
       <p
-        v-if="loadingMetrics"
-        class="usage-info usage-info-loading">
+        v-if="shouldShowLoading"
+        class="usage-info js-usage-info usage-info-loading">
         <i
           class="fa fa-spinner fa-spin usage-info-load-spinner"
           aria-hidden="true" />Loading deployment statistics.
       </p>
       <p
-        v-if="!hasMetrics && !loadingMetrics"
-        class="usage-info usage-info-loading">
-        Deployment statistics are not available currently.
-      </p>
-      <p
-        v-if="hasMetrics"
-        class="usage-info">
+        v-if="shouldShowMemoryGraph"
+        class="usage-info js-usage-info">
         Deployment memory usage:
       </p>
       <p
-        v-if="loadFailed"
-        class="usage-info">
+        v-if="shouldShowLoadFailure"
+        class="usage-info js-usage-info usage-info-failed">
         Failed to load deployment statistics.
       </p>
+      <p
+        v-if="shouldShowMetricsUnavailable"
+        class="usage-info js-usage-info usage-info-unavailable">
+        Deployment statistics are not available currently.
+      </p>
       <mr-memory-graph
-        v-if="hasMetrics"
+        v-if="shouldShowMemoryGraph"
         :metrics="memoryMetrics"
+        :deploymentTime="deploymentTime"
         height="25"
         width="100" />
     </div>