Commit 5c195199 authored by Phil Hughes's avatar Phil Hughes

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

Remove unused code

Closes #31202

See merge request !10897
parents 6ae76738 de489f97
......@@ -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');
},
......
......@@ -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>
......
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');
},
......
/* 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);
}
}
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);
};
/* 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">
......
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);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment