itsulu/runboat
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reconnect in case of event source errors in build pages

Browse source 
Also improve build element in presence of
unset and undeployed builds.
This commit is contained in:
Stéphane Bidoul 2021-11-22 20:57:11 +01:00
parent 1b4333b102
commit a34a95dd32
No known key found for this signature in database
GPG key ID: BCAB2555446B5B92
3 changed files with 76 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/runboat/webui-templates/build.html.jinja
View file

@ -13,7 +13,7 @@
</head> </head>
<body> <body>
<runboat-build id="build"></runboat-build> <runboat-build id="build"></runboat-build>
<p>Other builds for <a href="" id="repolink">this repo</a>.</p> <p id="repolink"></p>
<div id="footer"> <div id="footer">
{{ footer_html }} {{ footer_html }}
{{ additional_footer_html }} {{ additional_footer_html }}
@ -22,18 +22,41 @@
import {RunboatBuildElement} from './runboat-build-element.js' import {RunboatBuildElement} from './runboat-build-element.js'
customElements.define('runboat-build', RunboatBuildElement); customElements.define('runboat-build', RunboatBuildElement);
const buildName = new URLSearchParams(window.location.search).get("name");
const buildElement = document.getElementById("build"); const buildElement = document.getElementById("build");
const evtSource = new EventSource(`/api/v1/build-events?build_name=${buildName}`); var evtSource = null;
evtSource.onmessage = function(event) {
function onopen(event) {
console.log("connected");
}
function onmessage(event) {
var oEvent = JSON.parse(event.data); var oEvent = JSON.parse(event.data);
const build = oEvent.build; const build = oEvent.build;
buildElement.build = oEvent.event == "upd" ? build : {}; if (oEvent.event == "upd") {
const repolinkElement = document.getElementById("repolink"); buildElement.build = build;
repolinkElement.href = `./builds.html?repo=${build.commit_info.repo}`; } else if (oEvent.event == "del") {
repolinkElement.text = build.commit_info.repo; buildElement.undeployed();
} }
// TODO: evtSource error handling const repolinkElement = document.getElementById("repolink");
repolinkElement.innerHTML = `Other builds for <a href="./builds.html?repo=${build.commit_info.repo}">this repo</a>.`;
}
function onerror(event) {
evtSource.close();
console.log("error, will attempt to reconnect");
setTimeout(connect, 10000);
}
function connect() {
console.log("connecting...")
const buildName = new URLSearchParams(window.location.search).get("name");
evtSource = new EventSource(`/api/v1/build-events?build_name=${buildName}`);
evtSource.onopen = onopen;
evtSource.onmessage = onmessage;
evtSource.onerror = onerror;
}
connect();
</script> </script>
</body> </body>
</html> </html>

37
src/runboat/webui-templates/builds.html.jinja
View file

@ -31,15 +31,13 @@
import {RunboatBuildElement} from './runboat-build-element.js' import {RunboatBuildElement} from './runboat-build-element.js'
customElements.define('runboat-build', RunboatBuildElement); customElements.define('runboat-build', RunboatBuildElement);
const repo = new URLSearchParams(window.location.search).get("repo"); var evtSource = null;
const target_branch = new URLSearchParams(window.location.search).get("target_branch");
var url = `/api/v1/build-events?repo=${repo}` function onopen(event) {
if (target_branch) { console.log("connected");
url += `&target_branch=${target_branch}`
} }
// TODO: evtSource error handling
const evtSource = new EventSource(url); function onmessage(event) {
evtSource.onmessage = function(event) {
var oEvent = JSON.parse(event.data); var oEvent = JSON.parse(event.data);
var buildElement = document.getElementById(oEvent.build.name); var buildElement = document.getElementById(oEvent.build.name);
if (oEvent.event == "upd") { if (oEvent.event == "upd") {
@ -72,6 +70,29 @@
} }
} }
} }
function onerror(event) {
evtSource.close();
console.log("error, will attempt to reconnect");
setTimeout(connect, 10000);
}
function connect() {
console.log("connecting...")
document.getElementById("builds").innerHTML = '';
const repo = new URLSearchParams(window.location.search).get("repo");
const target_branch = new URLSearchParams(window.location.search).get("target_branch");
var url = `/api/v1/build-events?repo=${repo}`
if (target_branch) {
url += `&target_branch=${target_branch}`
}
evtSource = new EventSource(url);
evtSource.onopen = onopen;
evtSource.onmessage = onmessage;
evtSource.onerror = onerror;
}
connect();
</script> </script>
</body> </body>
</html> </html>

23
src/runboat/webui-templates/runboat-build-element.js
View file

@ -12,6 +12,10 @@ class RunboatBuildElement extends LitElement {
this.build = {}; this.build = {};
} }
undeployed() {
this.build = {...this.build, status: null};
}
static styles = css` static styles = css`
.build-card { .build-card {
width: 16em; width: 16em;
@ -38,22 +42,27 @@ class RunboatBuildElement extends LitElement {
`; `;
render() { render() {
if (!this.build.name) {
return html`<div class="build-card"><p>Build not found...</p></div>`;
}
return html` return html`
<div class="build-card build-status-${this.build.status}"> <div class="build-card build-status-${this.build.status}">
<p class="build-name">${this.build.name}</p> <p class="build-name">${this.build.name}</p>
<p> <p>
<a href="${this.build.repo_target_branch_link}">${this.build.commit_info.repo} ${this.build.commit_info.target_branch}</a> <a href="${this.build.repo_target_branch_link}">${this.build.commit_info?.repo} ${this.build.commit_info?.target_branch}</a>
${this.build.commit_info.pr? ${this.build.commit_info?.pr?
html`PR <a href="${this.build.repo_pr_link}">${this.build.commit_info.pr}</a>`:"" html`PR <a href="${this.build.repo_pr_link}">${this.build.commit_info?.pr}</a>`:""
} }
<br> <br>
${this.build.commit_info.git_commit? ${this.build.commit_info?.git_commit?
html`(<a href="${this.build.repo_commit_link}">${this.build.commit_info.git_commit.substring(0, 8)}</a>)`:"" html`(<a href="${this.build.repo_commit_link}">${this.build.commit_info?.git_commit.substring(0, 8)}</a>)`:""
} }
</p> </p>
<p> <p>
${this.build.status} ${this.build.status || "undeployed"}
⦙ 🗒 <a href="/api/v1/builds/${this.build.name}/init-log">init log</a> ${this.build.status?
html`⦙ 🗒 <a href="/api/v1/builds/${this.build.name}/init-log">init log</a>`:""
}
${this.build.status == "started"? ${this.build.status == "started"?
html`⦙ 🗒 <a href="/api/v1/builds/${this.build.name}/log">log</a>`:"" html`⦙ 🗒 <a href="/api/v1/builds/${this.build.name}/log">log</a>`:""
} }