Skip to content

Commit

Permalink
feat: build pipeline visualizer (#731)
Browse files Browse the repository at this point in the history
  • Loading branch information
@plyr4
plyr4 authored Nov 3, 2023
1 parent b155c3a commit 8cf3f88
Show file tree
Hide file tree
Showing 33 changed files with 3,684 additions and 25 deletions.
184 changes: 184 additions & 0 deletions cypress/fixtures/build_graph.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
{
"build_id": 4,
"nodes": {
"0": {
"id": 0,
"cluster": 0,
"name": "postgres",
"status": "pending",
"started_at": 1698069639,
"finished_at": 1698069655,
"steps": []
},
"1": {
"id": 1,
"cluster": 0,
"name": "kafka",
"status": "running",
"started_at": 1698069638,
"finished_at": 1698069655,
"steps": []
},
"2": {
"id": 2,
"cluster": 0,
"name": "zookeeper",
"status": "canceled",
"started_at": 1698069638,
"finished_at": 1698069655,
"steps": []
},
"3": {
"id": 3,
"cluster": 1,
"name": "init",
"status": "success",
"started_at": 1697565012,
"finished_at": 1697565012,
"steps": [
{
"id": 1,
"build_id": 4,
"repo_id": 1,
"number": 1,
"name": "init",
"stage": "",
"status": "success",
"error": "",
"exit_code": 1,
"created": 1572029883,
"started": 1572029935,
"finished": 1572029937,
"host": "",
"runtime": "docker",
"distribution": "linux"
}
]
},
"4": {
"id": 4,
"cluster": 1,
"name": "clone",
"status": "failure",
"started_at": 1697565012,
"finished_at": 1697565017,
"steps": [
{
"id": 3,
"build_id": 4,
"repo_id": 1,
"number": 3,
"name": "clone",
"stage": "",
"status": "failure",
"error": "",
"exit_code": 2,
"created": 1572029883,
"started": 1572029928,
"finished": 0,
"host": "",
"runtime": "docker",
"distribution": "linux"
}
]
},
"5": {
"id": 5,
"cluster": 1,
"name": "stage-a",
"status": "killed",
"started_at": 1697565017,
"finished_at": 1697565028,
"steps": [
{
"id": 5,
"build_id": 4,
"repo_id": 1,
"number": 5,
"name": "sleep",
"stage": "",
"status": "killed",
"error": "",
"exit_code": 2,
"created": 1572029883,
"started": 1572029928,
"finished": 0,
"host": "",
"runtime": "docker",
"distribution": "linux"
}
]
},
"6": {
"id": 6,
"cluster": 1,
"name": "stage-b",
"status": "running",
"started_at": 1697565017,
"finished_at": 1697565028,
"steps": [
{
"id": 4,
"build_id": 4,
"repo_id": 1,
"number": 4,
"name": "publish",
"stage": "",
"status": "running",
"error": "",
"exit_code": 2,
"created": 1572029883,
"started": 1572029928,
"finished": 0,
"host": "",
"runtime": "docker",
"distribution": "linux"
}
]
}
},
"edges": [
{
"cluster": 0,
"source": 0,
"destination": 1,
"status": "canceled"
},
{
"cluster": 0,
"source": 1,
"destination": 2,
"status": "canceled"
},
{
"cluster": 0,
"source": 2,
"destination": 3,
"status": "canceled"
},
{
"cluster": 1,
"source": 4,
"destination": 5,
"status": "success"
},
{
"cluster": 1,
"source": 5,
"destination": 6,
"status": "success"
},
{
"cluster": 1,
"source": 3,
"destination": 4,
"status": "success"
},
{
"cluster": 1,
"source": 4,
"destination": 5,
"status": "success"
}
]
}
183 changes: 183 additions & 0 deletions cypress/integration/graph.spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
/*
* SPDX-License-Identifier: Apache-2.0
*/

context('Build Graph', () => {
context('logged in and server returning build graph error', () => {
beforeEach(() => {
cy.server();
cy.stubBuildErrors();
cy.stubBuildsErrors();
cy.stubStepsErrors();
cy.login('/github/octocat/1/graph');
});
it('error alert should show', () => {
cy.get('[data-test=alerts]').should('exist').contains('Error');
});
});
context(
'logged in and server returning a build graph, build and steps',
() => {
beforeEach(() => {
cy.server();
cy.route('GET', '*api/v1/repos/*/*/builds*', 'fixture:builds_5.json');
cy.route(
'GET',
'*api/v1/repos/*/*/builds/*',
'fixture:build_success.json',
);
cy.route(
'GET',
'*api/v1/repos/*/*/builds/*/graph',
'fixture:build_graph.json',
);
cy.route('GET', '*api/v1/repos/*/octocat', 'fixture:repository.json');
cy.login('/github/octocat/4/graph');
});
it('build graph root should be visible', () => {
cy.get('.elm-build-graph-root').should('be.visible');
});
it('node should reflect build information', () => {
cy.get('.elm-build-graph-node-3').should(
'have.id',
'#3,init,success,false',
);
cy.get('.d3-build-graph-node-outline-3').should(
'have.class',
'-success',
);
});
it('edge should contain build information', () => {
cy.get('.elm-build-graph-edge-3-4').should(
'have.id',
'#3,4,success,false',
);
cy.get('.d3-build-graph-edge-path-3-4').should(
'have.class',
'-success',
);
});
it('click node should apply focus', () => {
cy.get('.elm-build-graph-node-3')
.should('have.id', '#3,init,success,false')
.within(e => {
cy.get('a').first().click({ force: true });
});
cy.get('.elm-build-graph-node-3').should(
'have.id',
'#3,init,success,true',
);
cy.get('.d3-build-graph-node-outline-3').should('have.class', '-focus');
});

it('node styles should reflect status', () => {
// services
cy.get('.d3-build-graph-node-outline-0').should(
'have.class',
'-pending',
);
cy.get('.d3-build-graph-node-outline-1').should(
'have.class',
'-running',
);
cy.get('.d3-build-graph-node-outline-2').should(
'have.class',
'-canceled',
);

// stages
cy.get('.d3-build-graph-node-outline-3').should(
'have.class',
'-success',
);
cy.get('.d3-build-graph-node-outline-4').should(
'have.class',
'-failure',
);
cy.get('.d3-build-graph-node-outline-5').should(
'have.class',
'-killed',
);
});
it('legend should show', () => {
cy.get('.elm-build-graph-legend').should('be.visible');
cy.get('.elm-build-graph-legend-node').should('have.length', 7);
});
it('actions should show', () => {
cy.get('.elm-build-graph-actions').should('be.visible');
cy.get('[data-test=build-graph-action-toggle-services]').should(
'be.visible',
);
cy.get('[data-test=build-graph-action-toggle-steps]').should(
'be.visible',
);
cy.get('[data-test=build-graph-action-filter]').should('be.visible');
cy.get('[data-test=build-graph-action-filter-clear]').should(
'be.visible',
);
});
it('click "show services" should hide services', () => {
cy.get('.elm-build-graph-node-0').should('contain', 'postgres');
cy.get('[data-test=build-graph-action-toggle-services]')
.should('be.visible')
.click({ force: true });
cy.get('.elm-build-graph-node-0').should('not.contain', 'postgres');
cy.get('[data-test=build-graph-action-toggle-services]')
.should('be.visible')
.click({ force: true });
cy.get('.elm-build-graph-node-0').should('contain', 'postgres');
});
it('click "show steps" should hide steps', () => {
cy.get('.elm-build-graph-node-5').should('contain', 'sleep');
cy.get('[data-test=build-graph-action-toggle-steps]')
.should('be.visible')
.click({ force: true });
cy.get('.elm-build-graph-node-5').should('not.contain', 'sleep');
cy.get('[data-test=build-graph-action-toggle-steps]')
.should('be.visible')
.click({ force: true });
cy.get('.elm-build-graph-node-5').should('contain', 'sleep');
});
it('filter input and clear button should control focus', () => {
cy.get('.elm-build-graph-node-5').should(
'have.id',
'#5,stage-a,killed,false',
);
cy.get('.d3-build-graph-node-outline-5').should(
'not.have.class',
'-focus',
);
cy.get('[data-test=build-graph-action-filter]')
.should('be.visible')
.type('stage-a');
cy.get('.elm-build-graph-node-5').should(
'have.id',
'#5,stage-a,killed,true',
);
cy.get('.d3-build-graph-node-outline-5').should('have.class', '-focus');
// clear button
cy.get('[data-test=build-graph-action-filter-clear]')
.should('be.visible')
.click({ force: true });
cy.get('.d3-build-graph-node-outline-5').should(
'not.have.class',
'-focus',
);
});
it('click on step row should redirect to step logs', () => {
cy.location('pathname').should('eq', '/github/octocat/4/graph');
cy.get('.d3-build-graph-node-step-a').first().click({ force: true });
cy.location('pathname').should('eq', '/github/octocat/4');
cy.hash().should('eq', '#step:5');
});
it('step should reflect build information', () => {
cy.get('.d3-build-graph-node-step-a svg')
.first()
.should('have.class', '-killed');
cy.get('.d3-build-graph-node-step-a svg')
.last()
.should('have.class', '-success');
});
},
);
});
7 changes: 6 additions & 1 deletion elm.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@
"elm/svg": "1.0.1",
"elm/time": "1.0.0",
"elm/url": "1.0.0",
"elm-community/graph": "6.0.0",
"elm-community/json-extra": "4.3.0",
"elm-community/list-extra": "8.7.0",
"elm-community/maybe-extra": "5.3.0",
"elm-community/string-extra": "4.0.1",
Expand All @@ -29,11 +31,14 @@
"vito/elm-ansi": "9.0.2"
},
"indirect": {
"avh4/elm-fifo": "1.0.4",
"elm/parser": "1.1.0",
"elm/random": "1.0.0",
"elm/regex": "1.0.0",
"elm/virtual-dom": "1.0.3",
"myrho/elm-round": "1.0.5"
"elm-community/intdict": "3.0.0",
"myrho/elm-round": "1.0.5",
"rtfeldman/elm-iso8601-date-strings": "1.1.4"
}
},
"test-dependencies": {
Expand Down
Loading

0 comments on commit 8cf3f88

Please sign in to comment.