@@ -19,7 +19,41 @@ export default {
19
19
20
20
data () {
21
21
return {
22
- pipelineView: null
22
+ pipelineView: null ,
23
+ nodes: null ,
24
+ edges: null ,
25
+ lastRedraw: false ,
26
+ pipelineViewOptions: {
27
+ physics: { stabilization: true },
28
+ layout: {
29
+ hierarchical: {
30
+ enabled: true ,
31
+ levelSeparation: 200 ,
32
+ direction: ' LR' ,
33
+ sortMethod: ' directed'
34
+ }
35
+ },
36
+ nodes: {
37
+ borderWidth: 4 ,
38
+ size: 40 ,
39
+ color: {
40
+ border: ' #222222'
41
+ },
42
+ font: { color: ' #eeeeee' }
43
+ },
44
+ edges: {
45
+ smooth: {
46
+ type: ' cubicBezier' ,
47
+ forceDirection: ' vertical' ,
48
+ roundness: 0.4
49
+ },
50
+ color: {
51
+ color: ' whitesmoke' ,
52
+ highlight: ' #4da2fc'
53
+ },
54
+ arrows: {to: true }
55
+ }
56
+ }
23
57
}
24
58
},
25
59
@@ -43,26 +77,37 @@ export default {
43
77
// runID is optional
44
78
var runID = this .$route .query .runid
45
79
46
- // Get all information from this specific pipeline
47
- var pipeline = null
48
- this .$http
49
- .get (' /api/v1/pipelines/detail/' + pipelineID)
50
- .then (response => {
51
- this .pipeline = response .data
52
- })
53
-
54
80
// If runid was set, look up this run
55
- var pipelineRun = null
56
81
if (runID) {
57
- this .$http
58
- .get (' /api/v1/pipelines/detail/' + pipelineID + ' /' + runID)
59
- .then (response => {
60
- this .pipelineRun = response .data
82
+ // Run ID specified. Do concurrent request
83
+ this .$http .all ([this .getPipeline (pipelineID), this .getPipelineRun (pipelineID, runID)])
84
+ .then (this .$http .spread (function (pipeline , pipelineRun ) {
85
+ // We only redraw the pipeline if pipeline is running
86
+ if (pipelineRun .data .status !== ' running' && ! this .lastRedraw ) {
87
+ this .drawPipelineDetail (pipeline .data , pipelineRun .data )
88
+ this .lastRedraw = true
89
+ } else if (pipelineRun .data .status === ' running' ) {
90
+ this .lastRedraw = false
91
+ this .drawPipelineDetail (pipeline .data , pipelineRun .data )
92
+ }
93
+ }.bind (this )))
94
+ } else {
95
+ this .getPipeline (pipelineID)
96
+ .then ((response ) => {
97
+ if (! this .lastRedraw ) {
98
+ this .drawPipelineDetail (response .data , null )
99
+ this .lastRedraw = true
100
+ }
61
101
})
62
102
}
103
+ },
104
+
105
+ getPipeline (pipelineID ) {
106
+ return this .$http .get (' /api/v1/pipelines/detail/' + pipelineID, { showProgressBar: false })
107
+ },
63
108
64
- // Draw pipeline view
65
- this .drawPipelineDetail (pipeline, pipelineRun )
109
+ getPipelineRun ( pipelineID , runID ) {
110
+ return this .$http . get ( ' /api/v1/pipelines/detail/ ' + pipelineID + ' / ' + runID, { showProgressBar : false } )
66
111
},
67
112
68
113
drawPipelineDetail (pipeline , pipelineRun ) {
@@ -73,23 +118,25 @@ export default {
73
118
} else {
74
119
jobs = pipeline .jobs
75
120
}
76
-
77
- // prepare data object for vis
78
- var data = {
79
- nodes : [],
80
- edges : []
81
- }
121
+ console . log (pipeline)
122
+ console . log (pipelineRun)
123
+ console . log (jobs)
124
+ // Initiate data structure
125
+ var nodesArray = []
126
+ var edgesArray = []
82
127
83
128
// Iterate all jobs of the pipeline
84
129
for (let i = 0 , l = jobs .length ; i < l; i++ ) {
85
130
// Choose the image for this node
86
131
var nodeImage = require (' assets/questionmark.png' )
87
132
if (jobs[i].status ) {
88
133
switch (jobs[i].status ) {
89
- case ' success' :
134
+ case ' success' :
90
135
nodeImage = require (' assets/success.png' )
136
+ break
91
137
case ' failed' :
92
- nodeImage = require (' assets/failed.png' )
138
+ nodeImage = require (' assets/fail.png' )
139
+ break
93
140
}
94
141
}
95
142
@@ -102,7 +149,7 @@ export default {
102
149
}
103
150
104
151
// Add node to nodes list
105
- data . nodes .push (node)
152
+ nodesArray .push (node)
106
153
107
154
// Iterate all jobs again to find the next highest job priority
108
155
var highestPrio = null
@@ -123,53 +170,34 @@ export default {
123
170
}
124
171
125
172
// add edge to edges list
126
- data . edges .push (edge)
173
+ edgesArray .push (edge)
127
174
}
128
175
}
129
176
}
130
177
}
131
178
132
- // Define vis options
133
- var options = {
134
- physics: { stabilization: true },
135
- layout: {
136
- hierarchical: {
137
- enabled: true ,
138
- levelSeparation: 200 ,
139
- direction: ' LR' ,
140
- sortMethod: ' directed'
141
- }
142
- },
143
- nodes: {
144
- borderWidth: 4 ,
145
- size: 40 ,
146
- color: {
147
- border: ' #222222'
148
- },
149
- font: { color: ' #eeeeee' }
150
- },
151
- edges: {
152
- smooth: {
153
- type: ' cubicBezier' ,
154
- forceDirection: ' vertical' ,
155
- roundness: 0.4
156
- },
157
- color: {
158
- color: ' whitesmoke' ,
159
- highlight: ' #4da2fc'
160
- },
161
- arrows: {to: true }
162
- }
163
- }
164
-
165
179
// If pipelineView already exist, just update it
166
180
if (this .pipelineView ) {
167
181
// Redraw
168
- this .pipelineView .Redraw ()
182
+ this .nodes .clear ()
183
+ this .edges .clear ()
184
+ this .nodes .add (nodesArray)
185
+ this .edges .add (edgesArray)
186
+ this .pipelineView .stabilize ()
169
187
} else {
188
+ // translate to vis data structure
189
+ this .nodes = new Vis.DataSet (nodesArray)
190
+ this .edges = new Vis.DataSet (edgesArray)
191
+
192
+ // prepare data object for vis
193
+ var data = {
194
+ nodes: this .nodes ,
195
+ edges: this .edges
196
+ }
197
+
170
198
// Find container
171
199
var container = document .getElementById (' pipeline-detail' )
172
- this .pipelineView = new Vis.Network (container, data, options )
200
+ this .pipelineView = new Vis.Network (container, data, this . pipelineViewOptions )
173
201
}
174
202
}
175
203
}
0 commit comments