1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
/* global Vue, gl */
/* eslint-disable no-param-reassign, no-bitwise*/
((gl) => {
const REALTIME = false;
const SPREAD = '...';
const PREV = 'Prev';
const NEXT = 'Next';
const FIRST = '<< First';
const LAST = 'Last >>';
gl.VuePipelines = Vue.extend({
components: {
runningPipeline: gl.VueRunningPipeline,
pipelineActions: gl.VuePipelineActions,
stages: gl.VueStages,
commit: gl.CommitComponent,
pipelineUrl: gl.VuePipelineUrl,
pipelineHead: gl.VuePipelineHead,
glPagination: gl.VueGlPagination,
statusScope: gl.VueStatusScope,
timeAgo: gl.VueTimeAgo,
},
data() {
return {
pipelines: [],
allTimeIntervals: [],
intervalId: '',
updatedAt: '',
pagenum: 1,
count: {
all: 0,
running_or_pending: 0,
},
pageRequest: false,
};
},
props: [
'scope',
'store',
],
created() {
const url = window.location.toString();
if (~url.indexOf('?') && !~url.indexOf('scope=pipelines')) {
this.pagenum = url.split('?')[1].split('=')[1];
}
this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope);
},
methods: {
changepage(e, last) {
const text = e.target.innerText;
if (text === SPREAD) return;
if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) this.pagenum = +text;
if (text === LAST) this.pagenum = last;
if (text === NEXT) this.pagenum = +this.pagenum + 1;
if (text === PREV) this.pagenum = +this.pagenum - 1;
if (text === FIRST) this.pagenum = 1;
window.history.pushState({}, null, `?p=${this.pagenum}`);
if (REALTIME) clearInterval(this.intervalId);
this.pageRequest = true;
this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope);
},
author(pipeline) {
const author = pipeline.commit.author;
if (author) return author;
return ({});
},
addTimeInterval(id, that) {
this.allTimeIntervals.push({ id: id, component: that });
},
},
template: `
<div>
<div class="pipeline-loading-status" v-if='pipelines.length < 1'>
<i class="fa fa-spinner fa-spin"></i>
</div>
<div class="table-holder" v-if='pipelines.length > 0'>
<table class="table ci-table">
<pipeline-head></pipeline-head>
<tbody>
<tr class="commit" v-for='pipeline in pipelines'>
<status-scope :pipeline='pipeline'></status-scope>
<pipeline-url :pipeline='pipeline'></pipeline-url>
<td>
<commit
:tag="pipeline.ref['tag?']"
:author='pipeline.commit.author'
:title='pipeline.commit.title'
:ref='pipeline.ref'
:short_sha='pipeline.commit.short_id'
:commit_url='pipeline.commit.commit_url'
>
</commit>
</td>
<stages :pipeline='pipeline'></stages>
<time-ago
:pipeline='pipeline'
:addTimeInterval='addTimeInterval'
>
</time-ago>
<pipeline-actions :pipeline='pipeline'></pipeline-actions>
</tr>
</tbody>
</table>
</div>
<div class="pipeline-loading-status" v-if='pageRequest'>
<i class="fa fa-spinner fa-spin"></i>
</div>
<gl-pagination
v-if='count.all > 0'
:pagenum='pagenum'
:changepage='changepage'
:count='count.all'
>
</gl-pagination>
</div>
`,
});
})(window.gl || (window.gl = {}));
|
