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

Some UI style

Browse source
This commit is contained in:
Stéphane Bidoul 2021-11-20 19:39:07 +01:00
parent ce4ecc1a62
commit 4ee2f29dc7
No known key found for this signature in database
GPG key ID: BCAB2555446B5B92
3 changed files with 45 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/runboat/webui/build.html
View file

@ -1,6 +1,11 @@
<html>
<head>
<title>Runboat build</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<runboat-build id="build"></runboat-build>

8
src/runboat/webui/builds.html
View file

@ -2,12 +2,15 @@
<head>
<title>Runboat builds</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.row {
display: flex;
flex-direction: row;
}
runboat-build {
flex: 0 0 15em;
margin: 0.25em;
}
</style>
</head>
@ -27,8 +30,8 @@
const evtSource = new EventSource(url);
evtSource.onmessage = function(event) {
var oEvent = JSON.parse(event.data);
var buildElement = document.getElementById(oEvent.build.name);
if (oEvent.event == "upd") {
var buildElement = document.getElementById(oEvent.build.name);
if (buildElement) {
// update event element
buildElement.build = oEvent.build;
@ -53,7 +56,6 @@
rowElement.insertBefore(buildElement, rowElement.firstChild);
}
} else if (oEvent.event == "del") {
const buildElement = document.getElementById(oEvent.build.name);
if (buildElement) {
buildElement.remove();
}

45
src/runboat/webui/runboat-build-element.js
View file

@ -1,4 +1,4 @@
import {LitElement, html} from 'https://unpkg.com/lit@2.0.2?module';
import {LitElement, html, css} from 'https://unpkg.com/lit@2.0.2?module';
class RunboatBuildElement extends LitElement {
static get properties() {
@ -12,35 +12,60 @@ class RunboatBuildElement extends LitElement {
this.build = {};
}
static styles = css`
.build-card {
padding: 0.5em;
width: 15em;
background-color: lightgray;
}
.build-name {
font-size: x-small;
}
.build-status-stopped {
background-color: paleturquoise;
}
.build-status-started {
background-color: palegreen;
}
.build-status-failed {
background-color: palevioletred;
}
p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
`;
render() {
return html`
<div>
<p>${this.build.name}</p>
<div class="build-card build-status-${this.build.status}">
<p class="build-name">${this.build.name}</p>
<p>
${this.build.repo}
${this.build.pr?
html`PR <a href="${this.build.repo_link}">${this.build.pr}</a> to`:""
}
<a href="${this.build.repo_link}">${this.build.target_branch}</a>
<br>
${this.build.git_commit?
html`(<a href="${this.build.repo_commit_link}">${this.build.git_commit.substring(0, 8)}</a>)`:""
}
</p>
<p>Status: ${this.build.status}</p>
<p>Logs:
<a href="/api/v1/builds/${this.build.name}/init-log">init log</a>
<p>
${this.build.status}
| <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>`:""
}
${this.build.status == "started"?
html`| <a href="${this.build.deploy_link}">🚪 live</a>`:""
}
</p>
<p>
<button @click="${this.stopHandler}" ?disabled="${this.build.status != "started"}">stop</button>
<button @click="${this.startHandler}" ?disabled="${this.build.status != "stopped"}">start</button>
${this.build.status == "started"?
html`<a href="${this.build.deploy_link}">=&gt; live</a>`:""
}
</p>
<div>
</div>
`;
}