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

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

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

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

@ -31,15 +31,13 @@
import {RunboatBuildElement} from './runboat-build-element.js'
customElements.define('runboat-build', RunboatBuildElement);
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}`
var evtSource = null;
function onopen(event) {
console.log("connected");
}
// TODO: evtSource error handling
const evtSource = new EventSource(url);
evtSource.onmessage = function(event) {
function onmessage(event) {
var oEvent = JSON.parse(event.data);
var buildElement = document.getElementById(oEvent.build.name);
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>
</body>
</html>

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

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