Merge branch '31202-timeago-loops' into 'master'

app/assets/javascripts/commit/pipelines/pipelines_table.js

@@ -106,15 +106,6 @@ export default Vue.component('pipelines-table', {
     eventHub.$on('refreshPipelines', this.fetchPipelines);
   },
 
-  beforeUpdate() {
-    if (this.state.pipelines.length &&
-        this.$children &&
-        !this.isMakingRequest &&
-        !this.isLoading) {
-      this.store.startTimeAgoLoops.call(this, Vue);
-    }
-  },
-
   beforeDestroyed() {
     eventHub.$off('refreshPipelines');
   },

app/assets/javascripts/pipelines/components/time_ago.js

@@ -2,68 +2,95 @@ import iconTimerSvg from 'icons/_icon_timer.svg';
 import '../../lib/utils/datetime_utility';
 
 export default {
+  props: {
+    finishedTime: {
+      type: String,
+      required: true,
+    },
+
+    duration: {
+      type: Number,
+      required: true,
+    },
+  },
+
   data() {
     return {
-      currentTime: new Date(),
       iconTimerSvg,
     };
   },
-  props: ['pipeline'],
+
+  updated() {
+    $(this.$refs.tooltip).tooltip('fixTitle');
+  },
+
   computed: {
-    timeAgo() {
-      return gl.utils.getTimeago();
+    hasDuration() {
+      return this.duration > 0;
     },
-    localTimeFinished() {
-      return gl.utils.formatDate(this.pipeline.details.finished_at);
+
+    hasFinishedTime() {
+      return this.finishedTime !== '';
     },
-    timeStopped() {
-      const changeTime = this.currentTime;
-      const options = {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      };
-      options.timeZoneName = 'short';
-      const finished = this.pipeline.details.finished_at;
-      if (!finished && changeTime) return false;
-      return ({ words: this.timeAgo.format(finished) });
+
+    localTimeFinished() {
+      return gl.utils.formatDate(this.finishedTime);
     },
-    duration() {
-      const { duration } = this.pipeline.details;
-      const date = new Date(duration * 1000);
+
+    durationFormated() {
+      const date = new Date(this.duration * 1000);
 
       let hh = date.getUTCHours();
       let mm = date.getUTCMinutes();
       let ss = date.getSeconds();
 
-      if (hh < 10) hh = `0${hh}`;
-      if (mm < 10) mm = `0${mm}`;
-      if (ss < 10) ss = `0${ss}`;
+      // left pad
+      if (hh < 10) {
+        hh = `0${hh}`;
+      }
+      if (mm < 10) {
+        mm = `0${mm}`;
+      }
+      if (ss < 10) {
+        ss = `0${ss}`;
+      }
 
-      if (duration !== null) return `${hh}:${mm}:${ss}`;
-      return false;
+      return `${hh}:${mm}:${ss}`;
     },
-  },
-  methods: {
-    changeTime() {
-      this.currentTime = new Date();
+
+    finishedTimeFormated() {
+      const timeAgo = gl.utils.getTimeago();
+
+      return timeAgo.format(this.finishedTime);
     },
   },
+
   template: `
     <td class="pipelines-time-ago">
-      <p class="duration" v-if='duration'>
-        <span v-html="iconTimerSvg"></span>
-        {{duration}}
+      <p
+        class="duration"
+        v-if="hasDuration">
+        <span
+          v-html="iconTimerSvg">
+        </span>
+        {{durationFormated}}
       </p>
-      <p class="finished-at" v-if='timeStopped'>
-        <i class="fa fa-calendar"></i>
+
+      <p
+        class="finished-at"
+        v-if="hasFinishedTime">
+
+        <i
+          class="fa fa-calendar"
+          aria-hidden="true" />
+
         <time
+          ref="tooltip"
           data-toggle="tooltip"
           data-placement="top"
           data-container="body"
-          :data-original-title='localTimeFinished'>
-          {{timeStopped.words}}
+          :title="localTimeFinished">
+          {{finishedTimeFormated}}
         </time>
       </p>
     </td>

app/assets/javascripts/pipelines/pipelines.js

-import Vue from 'vue';
 import Visibility from 'visibilityjs';
 import PipelinesService from './services/pipelines_service';
 import eventHub from './event_hub';
@@ -161,15 +160,6 @@ export default {
     eventHub.$on('refreshPipelines', this.fetchPipelines);
   },
 
-  beforeUpdate() {
-    if (this.state.pipelines.length &&
-        this.$children &&
-        !this.isMakingRequest &&
-        !this.isLoading) {
-      this.store.startTimeAgoLoops.call(this, Vue);
-    }
-  },
-
   beforeDestroyed() {
     eventHub.$off('refreshPipelines');
   },

app/assets/javascripts/pipelines/stores/pipelines_store.js

-/* eslint-disable no-underscore-dangle*/
-import VueRealtimeListener from '../../vue_realtime_listener';
-
 export default class PipelinesStore {
   constructor() {
     this.state = {};
@@ -30,32 +27,4 @@ export default class PipelinesStore {
 
     this.state.pageInfo = paginationInfo;
   }
-
-  /**
-   * FIXME: Move this inside the component.
-   *
-   * Once the data is received we will start the time ago loops.
-   *
-   * Everytime a request is made like retry or cancel a pipeline, every 10 seconds we
-   * update the time to show how long as passed.
-   *
-   */
-  startTimeAgoLoops() {
-    const startTimeLoops = () => {
-      this.timeLoopInterval = setInterval(() => {
-        this.$children[0].$children.reduce((acc, component) => {
-          const timeAgoComponent = component.$children.filter(el => el.$options._componentTag === 'time-ago')[0];
-          acc.push(timeAgoComponent);
-          return acc;
-        }, []).forEach(e => e.changeTime());
-      }, 10000);
-    };
-
-    startTimeLoops();
-
-    const removeIntervals = () => clearInterval(this.timeLoopInterval);
-    const startIntervals = () => startTimeLoops();
-
-    VueRealtimeListener(removeIntervals, startIntervals);
-  }
 }

app/assets/javascripts/vue_realtime_listener/index.js

-export default (removeIntervals, startIntervals) => {
-  window.removeEventListener('focus', startIntervals);
-  window.removeEventListener('blur', removeIntervals);
-  window.removeEventListener('onbeforeload', removeIntervals);
-
-  window.addEventListener('focus', startIntervals);
-  window.addEventListener('blur', removeIntervals);
-  window.addEventListener('onbeforeload', removeIntervals);
-};

app/assets/javascripts/vue_shared/components/pipelines_table_row.js

 /* eslint-disable no-param-reassign */
-
 import AsyncButtonComponent from '../../pipelines/components/async_button.vue';
 import PipelinesActionsComponent from '../../pipelines/components/pipelines_actions';
 import PipelinesArtifactsComponent from '../../pipelines/components/pipelines_artifacts';
@@ -166,6 +165,32 @@ export default {
       }
       return undefined;
     },
+
+    /**
+     * Timeago components expects a number
+     *
+     * @return {type}  description
+     */
+    pipelineDuration() {
+      if (this.pipeline.details && this.pipeline.details.duration) {
+        return this.pipeline.details.duration;
+      }
+
+      return 0;
+    },
+
+    /**
+     * Timeago component expects a String.
+     *
+     * @return {String}
+     */
+    pipelineFinishedAt() {
+      if (this.pipeline.details && this.pipeline.details.finished_at) {
+        return this.pipeline.details.finished_at;
+      }
+
+      return '';
+    },
   },
 
   template: `
@@ -192,7 +217,9 @@ export default {
         </div>
       </td>
 
-      <time-ago :pipeline="pipeline"/>
+      <time-ago
+        :duration="pipelineDuration"
+        :finished-time="pipelineFinishedAt" />
 
       <td class="pipeline-actions">
         <div class="pull-right btn-group">

spec/javascripts/pipelines/time_ago_spec.js

+import Vue from 'vue';
+import timeAgo from '~/pipelines/components/time_ago';
+
+describe('Timeago component', () => {
+  let TimeAgo;
+  beforeEach(() => {
+    TimeAgo = Vue.extend(timeAgo);
+  });
+
+  describe('with duration', () => {
+    it('should render duration and timer svg', () => {
+      const component = new TimeAgo({
+        propsData: {
+          duration: 10,
+          finishedTime: '',
+        },
+      }).$mount();
+
+      expect(component.$el.querySelector('.duration')).toBeDefined();
+      expect(component.$el.querySelector('.duration svg')).toBeDefined();
+    });
+  });
+
+  describe('without duration', () => {
+    it('should not render duration and timer svg', () => {
+      const component = new TimeAgo({
+        propsData: {
+          duration: 0,
+          finishedTime: '',
+        },
+      }).$mount();
+
+      expect(component.$el.querySelector('.duration')).toBe(null);
+    });
+  });
+
+  describe('with finishedTime', () => {
+    it('should render time and calendar icon', () => {
+      const component = new TimeAgo({
+        propsData: {
+          duration: 0,
+          finishedTime: '2017-04-26T12:40:23.277Z',
+        },
+      }).$mount();
+
+      expect(component.$el.querySelector('.finished-at')).toBeDefined();
+      expect(component.$el.querySelector('.finished-at i.fa-calendar')).toBeDefined();
+      expect(component.$el.querySelector('.finished-at time')).toBeDefined();
+    });
+  });
+
+  describe('without finishedTime', () => {
+    it('should not render time and calendar icon', () => {
+      const component = new TimeAgo({
+        propsData: {
+          duration: 0,
+          finishedTime: '',
+        },
+      }).$mount();
+
+      expect(component.$el.querySelector('.finished-at')).toBe(null);
+    });
+  });
+});