2 |
3 |
JenkinsPipelineGraphVue
4 |
5 |
11 |
12 |
13 |
14 |
15 |
151 |
152 |
153 |
173 |
--------------------------------------------------------------------------------
/src/components/support/SvgStatus.vue:
--------------------------------------------------------------------------------
1 |
109 |
112 |
--------------------------------------------------------------------------------
/src/components/support/TruncatingLabel.vue:
--------------------------------------------------------------------------------
1 |
156 |
159 |
--------------------------------------------------------------------------------
/src/components/PipelineGraphLayout.js:
--------------------------------------------------------------------------------
1 | export const sequentialStagesLabelOffset = 70;
2 |
3 | /**
4 | * Main process for laying out the graph. Creates and positions markers for each component, but creates no components.
5 | *
6 | * 1. Creates nodes for each stage in the pipeline
7 | * 2. Position the nodes in columns for each top stage, and in rows within each column based on execution order
8 | * 3. Create all the connections between nodes that need to be rendered
9 | * 4. Create a bigLabel per column, and a smallLabel for any child nodes
10 | * 5. Measure the extents of the graph
11 | */
12 | export function layoutGraph(newStages, layout) {
13 | const stageNodeColumns = createNodeColumns(newStages);
14 | const {nodeSpacingH, ypStart} = layout;
15 | const startNode = {
16 | x: 0,
17 | y: 0,
18 | name: 'Start',
19 | id: -1,
20 | isPlaceholder: true,
21 | key: 'start-node',
22 | type: 'start',
23 | };
24 | const endNode = {
25 | x: 0,
26 | y: 0,
27 | name: 'End',
28 | id: -2,
29 | isPlaceholder: true,
30 | key: 'end-node',
31 | type: 'end',
32 | };
33 | const allNodeColumns = [
34 | {rows: [[startNode]], centerX: 0, hasBranchLabels: false, startX: 0},
35 | ...stageNodeColumns,
36 | {rows: [[endNode]], centerX: 0, hasBranchLabels: false, startX: 0},
37 | ];
38 | positionNodes(allNodeColumns, layout);
39 | const bigLabels = createBigLabels(allNodeColumns);
40 | const smallLabels = createSmallLabels(allNodeColumns);
41 | const branchLabels = createBranchLabels(allNodeColumns);
42 | const connections = createConnections(allNodeColumns);
43 | // Calculate the size of the graph
44 | let measuredWidth = 0;
45 | let measuredHeight = 200;
46 | for (const column of allNodeColumns) {
47 | for (const row of column.rows) {
48 | for (const node of row) {
49 | measuredWidth = Math.max(measuredWidth, node.x + nodeSpacingH / 2);
50 | measuredHeight = Math.max(measuredHeight, node.y + ypStart);
51 | }
52 | }
53 | }
54 | return {
55 | nodeColumns: allNodeColumns,
56 | connections,
57 | bigLabels,
58 | smallLabels,
59 | branchLabels,
60 | measuredWidth,
61 | measuredHeight,
62 | };
63 | }
64 |
65 | /**
66 | * Generate an array of columns, based on the top-level stages
67 | */
68 | function createNodeColumns(topLevelStages = []) {
69 | const nodeColumns = [];
70 | for (const topStage of topLevelStages) {
71 | // If stage has children, we don't draw a node for it, just its children
72 | const stagesForColumn = topStage.children && topStage.children.length ? topStage.children : [topStage];
73 | const column = {
74 | topStage,
75 | rows: [],
76 | centerX: 0,
77 | startX: 0,
78 | hasBranchLabels: false,
79 | };
80 | for (const firstStageForRow of stagesForColumn) {
81 | const rowNodes = [];
82 | let nodeStage = firstStageForRow;
83 | while (nodeStage) {
84 | if (nodeStage.seqContainerName) {
85 | column.hasBranchLabels = true;
86 | }
87 | rowNodes.push({
88 | x: 0,
89 | y: 0,
90 | name: nodeStage.name,
91 | id: nodeStage.id,
92 | stage: nodeStage,
93 | isPlaceholder: false,
94 | key: 'n_' + nodeStage.id,
95 | });
96 | nodeStage = nodeStage.nextSibling;
97 | }
98 | column.rows.push(rowNodes);
99 | }
100 | nodeColumns.push(column);
101 | }
102 | return nodeColumns;
103 | }
104 |
105 | /**
106 | * Walks the columns of nodes giving them x and y positions. Mutates the node objects in place for now.
107 | */
108 | function positionNodes(nodeColumns, {nodeSpacingH, parallelSpacingH, nodeSpacingV, ypStart}) {
109 | let xp = nodeSpacingH / 2;
110 | let previousTopNode;
111 | for (const column of nodeColumns) {
112 | const topNode = column.rows[0][0];
113 | let yp = ypStart; // Reset Y to top for each column
114 | if (previousTopNode) {
115 | // Advance X position
116 | if (previousTopNode.isPlaceholder || topNode.isPlaceholder) {
117 | // Don't space placeholder nodes (start/end) as wide as normal.
118 | xp += Math.floor(nodeSpacingH * 0.7);
119 | } else {
120 | xp += nodeSpacingH;
121 | }
122 | }
123 | let widestRow = 0;
124 | for (const row of column.rows) {
125 | widestRow = Math.max(widestRow, row.length);
126 | }
127 | const xpStart = xp; // Remember the left-most position in this column
128 | // Make room for row labels
129 | if (column.hasBranchLabels) {
130 | xp += sequentialStagesLabelOffset;
131 | }
132 | let maxX = xp;
133 | for (const row of column.rows) {
134 | let nodeX = xp; // Start nodes at current column xp (not xpstart as that includes branch label)
135 | // Offset the beginning of narrower rows towards column center
136 | nodeX += Math.round((widestRow - row.length) * parallelSpacingH * 0.5);
137 | for (const node of row) {
138 | maxX = Math.max(maxX, nodeX);
139 | node.x = nodeX;
140 | node.y = yp;
141 | nodeX += parallelSpacingH; // Space out nodes in each row
142 | }
143 | yp += nodeSpacingV; // LF
144 | }
145 | column.centerX = Math.round((xpStart + maxX) / 2);
146 | column.startX = xpStart; // Record on column for use later to position branch labels
147 | xp = maxX; // Make sure we're at the end of the widest row for this column before next loop
148 | previousTopNode = topNode;
149 | }
150 | }
151 |
152 | /**
153 | * Generate label descriptions for big labels at the top of each column
154 | */
155 | function createBigLabels(columns) {
156 | const labels = [];
157 | for (const column of columns) {
158 | const node = column.rows[0][0];
159 | const stage = column.topStage;
160 | const text = stage ? stage.name : node.name;
161 | const key = 'l_b_' + node.key;
162 | // bigLabel is located above center of column, but offset if there's branch labels
163 | let x = column.centerX;
164 | if (column.hasBranchLabels) {
165 | x += Math.floor(sequentialStagesLabelOffset / 2);
166 | }
167 | labels.push({
168 | x,
169 | y: node.y,
170 | node,
171 | stage,
172 | text,
173 | key,
174 | });
175 | }
176 | return labels;
177 | }
178 |
179 | /**
180 | * Generate label descriptions for small labels under the nodes
181 | */
182 | function createSmallLabels(columns) {
183 | const labels = [];
184 | for (const column of columns) {
185 | for (const row of column.rows) {
186 | for (const node of row) {
187 | // We add small labels to parallel nodes only so skip others
188 | if (node.isPlaceholder || node.stage === column.topStage) {
189 | continue;
190 | }
191 | const label = {
192 | x: node.x,
193 | y: node.y,
194 | text: node.name,
195 | key: 'l_s_' + node.key,
196 | node,
197 | };
198 | if (node.isPlaceholder === false) {
199 | label.stage = node.stage;
200 | }
201 | labels.push(label);
202 | }
203 | }
204 | }
205 | return labels;
206 | }
207 |
208 | /**
209 | * Generate label descriptions for named sequential parallels
210 | */
211 | function createBranchLabels(columns) {
212 | const labels = [];
213 | let count = 0;
214 | for (const column of columns) {
215 | if (column.hasBranchLabels) {
216 | for (const row of column.rows) {
217 | const firstNode = row[0];
218 | if (!firstNode.isPlaceholder && firstNode.stage.seqContainerName) {
219 | labels.push({
220 | x: column.startX,
221 | y: firstNode.y,
222 | key: `branchLabel-${++count}`,
223 | node: firstNode,
224 | text: firstNode.stage.seqContainerName,
225 | });
226 | }
227 | }
228 | }
229 | }
230 | return labels;
231 | }
232 |
233 | /**
234 | * Generate connection information from column to column
235 | */
236 | function createConnections(columns) {
237 | const connections = [];
238 | let sourceNodes = [];
239 | let skippedNodes = [];
240 | for (const column of columns) {
241 | if (column.topStage && column.topStage.state === 'skipped') {
242 | skippedNodes.push(column.rows[0][0]);
243 | continue;
244 | }
245 | // Connections to each row in this column
246 | if (sourceNodes.length) {
247 | connections.push({
248 | sourceNodes,
249 | destinationNodes: column.rows.map(row => row[0]),
250 | skippedNodes: skippedNodes,
251 | hasBranchLabels: column.hasBranchLabels,
252 | });
253 | }
254 | // Simple horizontal connections between nodes within each row
255 | for (const row of column.rows) {
256 | for (let i = 0; i < row.length - 1; i++) {
257 | connections.push({
258 | sourceNodes: [row[i]],
259 | destinationNodes: [row[i + 1]],
260 | skippedNodes: [],
261 | hasBranchLabels: false,
262 | });
263 | }
264 | }
265 | sourceNodes = column.rows.map(row => row[row.length - 1]); // Last node of each row
266 | skippedNodes = [];
267 | }
268 | return connections;
269 | }
270 |
--------------------------------------------------------------------------------
/src/components/PipelineGraph.vue:
--------------------------------------------------------------------------------
1 |
599 |
602 |
--------------------------------------------------------------------------------
4 |