Move backoff function to utils file

app/assets/javascripts/environments/components/deploy_board_component.js.es6

+/* eslint-disable no-new */
 /**
  * Renders a deploy board.
  *
@@ -19,6 +20,8 @@
 
 const Vue = require('vue');
 const instanceComponent = require('./deploy_board_instance_component');
+require('../../lib/utils/common_utils');
+const Flash = require('../../flash');
 
 module.exports = Vue.component('deploy_boards_components', {
 
@@ -57,64 +60,9 @@ module.exports = Vue.component('deploy_boards_components', {
   },
 
   created() {
-    /**
-     * Back Off exponential algorithm
-     * backOff :: (Function<next, stop>, Number) -> Promise<Any, Error>
-     *
-     * @param {Function<next, stop>} fn function to be called
-     * @param {Number} timeout
-     * @return {Promise<Any, Error>}
-     * @example
-     * ```
-     *  backOff(function (next, stop) {
-     *    // Let's perform this function repeatedly for 60s
-     *    doSomething()
-     *      .then(function (importantValue) {
-     *        // importantValue is not exactly what we
-     *        // need so we need to try again
-     *        next();
-     *
-     *        // importantValue is exactly what we are expecting so
-     *        // let's stop with the repetions and jump out of the cycle
-     *        stop(importantValue);
-     *      })
-     *      .catch(function (error) {
-     *        // there was an error, let's stop this with an error too
-     *        stop(error);
-     *      })
-     *  }, 60000)
-     *  .then(function (importantValue) {})
-     *  .catch(function (error) {
-     *    // deal with errors passed to stop()
-     *  })
-     * ```
-     */
-    const backOff = (fn, timeout = 600000) => {
-      let nextInterval = 2000;
-
-      const checkTimedOut = (timeoutMax, startTime) => currentTime =>
-      (currentTime - startTime > timeoutMax);
-      const hasTimedOut = checkTimedOut(timeout, (+new Date()));
-
-      return new Promise((resolve, reject) => {
-        const stop = arg => ((arg instanceof Error) ? reject(arg) : resolve(arg));
-
-        const next = () => {
-          if (!hasTimedOut((+new Date()))) {
-            setTimeout(fn.bind(null, next, stop), nextInterval);
-            nextInterval *= 2;
-          } else {
-            reject(new Error('BACKOFF_TIMEOUT'));
-          }
-        };
-
-        fn(next, stop);
-      });
-    };
-
     this.isLoading = true;
 
-    backOff((next, stop) => {
+    gl.utils.backOff((next, stop) => {
       this.service.getDeployBoard(this.environmentID)
         .then((resp) => {
           if (resp.status === 204) {

app/assets/javascripts/lib/utils/common_utils.js.es6

@@ -296,5 +296,60 @@
      * @returns {Boolean}
      */
     w.gl.utils.convertPermissionToBoolean = permission => permission === 'true';
+
+    /**
+     * Back Off exponential algorithm
+     * backOff :: (Function<next, stop>, Number) -> Promise<Any, Error>
+     *
+     * @param {Function<next, stop>} fn function to be called
+     * @param {Number} timeout
+     * @return {Promise<Any, Error>}
+     * @example
+     * ```
+     *  backOff(function (next, stop) {
+     *    // Let's perform this function repeatedly for 60s
+     *    doSomething()
+     *      .then(function (importantValue) {
+     *        // importantValue is not exactly what we
+     *        // need so we need to try again
+     *        next();
+     *
+     *        // importantValue is exactly what we are expecting so
+     *        // let's stop with the repetions and jump out of the cycle
+     *        stop(importantValue);
+     *      })
+     *      .catch(function (error) {
+     *        // there was an error, let's stop this with an error too
+     *        stop(error);
+     *      })
+     *  }, 60000)
+     *  .then(function (importantValue) {})
+     *  .catch(function (error) {
+     *    // deal with errors passed to stop()
+     *  })
+     * ```
+     */
+    w.gl.utils.backOff = (fn, timeout = 600000) => {
+      let nextInterval = 2000;
+
+      const checkTimedOut = (timeoutMax, startTime) => currentTime =>
+      (currentTime - startTime > timeoutMax);
+      const hasTimedOut = checkTimedOut(timeout, (+new Date()));
+
+      return new Promise((resolve, reject) => {
+        const stop = arg => ((arg instanceof Error) ? reject(arg) : resolve(arg));
+
+        const next = () => {
+          if (!hasTimedOut((+new Date()))) {
+            setTimeout(fn.bind(null, next, stop), nextInterval);
+            nextInterval *= 2;
+          } else {
+            reject(new Error('BACKOFF_TIMEOUT'));
+          }
+        };
+
+        fn(next, stop);
+      });
+    };
   })(window);
 }).call(this);

app/assets/javascripts/vue_shared/vue_resource_interceptor.js.es6

@@ -26,6 +26,111 @@ Vue.http.interceptors.push((request, next) => {
 Vue.http.interceptors.push((request, next) => {
   const deployBoardData = {
     instances: [
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
       { status: 'finished', tooltip: 'tanuki-2334 Finished' },
       { status: 'finished', tooltip: 'tanuki-2335 Finished' },
       { status: 'finished', tooltip: 'tanuki-2336 Finished' },
@@ -74,6 +179,12 @@ Vue.http.interceptors.push((request, next) => {
       { status: 'failed', tooltip: 'tanuki-2344 Failed' },
       { status: 'ready', tooltip: 'tanuki-2345 Ready' },
       { status: 'ready', tooltip: 'tanuki-2346 Ready' },
+      { status: 'ready', tooltip: 'tanuki-2345 Ready' },
+      { status: 'ready', tooltip: 'tanuki-2346 Ready' },
+      { status: 'ready', tooltip: 'tanuki-2345 Ready' },
+      { status: 'ready', tooltip: 'tanuki-2346 Ready' },
+      { status: 'ready', tooltip: 'tanuki-2345 Ready' },
+      { status: 'ready', tooltip: 'tanuki-2346 Ready' },
       { status: 'ready', tooltip: 'tanuki-2347 Ready' },
       { status: 'preparing', tooltip: 'tanuki-2348 Preparing' },
       { status: 'preparing', tooltip: 'tanuki-2349 Preparing' },
@@ -81,6 +192,29 @@ Vue.http.interceptors.push((request, next) => {
       { status: 'preparing', tooltip: 'tanuki-2351 Preparing' },
       { status: 'preparing', tooltip: 'tanuki-2352 Preparing' },
       { status: 'preparing', tooltip: 'tanuki-2353 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2348 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2349 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2350 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2351 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2352 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2353 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2348 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2349 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2350 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2351 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2352 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2353 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2348 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2349 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2350 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2351 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2352 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2353 Preparing' },
+      { status: 'waiting', tooltip: 'tanuki-2354 Waiting' },
+      { status: 'waiting', tooltip: 'tanuki-2355 Waiting' },
+      { status: 'waiting', tooltip: 'tanuki-2356 Waiting' },
+      { status: 'waiting', tooltip: 'tanuki-2357 Waiting' },
+      { status: 'waiting', tooltip: 'tanuki-2358 Waiting' },
       { status: 'waiting', tooltip: 'tanuki-2354 Waiting' },
       { status: 'waiting', tooltip: 'tanuki-2355 Waiting' },
       { status: 'waiting', tooltip: 'tanuki-2356 Waiting' },
@@ -95,8 +229,8 @@ Vue.http.interceptors.push((request, next) => {
   };
 
   if (request.url === 'environments/{id}/status.json') {
-    next(request.respondWith(JSON.stringify({}), {
-      status: 204,
+    next(request.respondWith(JSON.stringify(deployBoardData), {
+      status: 200,
     }));
   }
 

app/assets/stylesheets/pages/environments.scss

@@ -159,7 +159,7 @@
     width: 80px;
     flex-wrap: wrap;
     justify-content: center;
-    margin: auto 10px;
+    margin: 20px 10px;
 
     .percentage {
       color: $gl-text-color;
@@ -183,6 +183,7 @@
       display: flex;
       flex-wrap: wrap;
       flex-direction: row;
+      margin-top: -8px;
     }
   }