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> <html>
<head> <head>
<title>Runboat build</title> <title>Runboat build</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head> </head>
<body> <body>
<runboat-build id="build"></runboat-build> <runboat-build id="build"></runboat-build>

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

@ -2,12 +2,15 @@
<head> <head>
<title>Runboat builds</title> <title>Runboat builds</title>
<style> <style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
runboat-build { runboat-build {
flex: 0 0 15em; margin: 0.25em;
} }
</style> </style>
</head> </head>
@ -27,8 +30,8 @@
const evtSource = new EventSource(url); const evtSource = new EventSource(url);
evtSource.onmessage = function(event) { evtSource.onmessage = function(event) {
var oEvent = JSON.parse(event.data); var oEvent = JSON.parse(event.data);
var buildElement = document.getElementById(oEvent.build.name);
if (oEvent.event == "upd") { if (oEvent.event == "upd") {
var buildElement = document.getElementById(oEvent.build.name);
if (buildElement) { if (buildElement) {
// update event element // update event element
buildElement.build = oEvent.build; buildElement.build = oEvent.build;
@ -53,7 +56,6 @@
rowElement.insertBefore(buildElement, rowElement.firstChild); rowElement.insertBefore(buildElement, rowElement.firstChild);
} }
} else if (oEvent.event == "del") { } else if (oEvent.event == "del") {
const buildElement = document.getElementById(oEvent.build.name);
if (buildElement) { if (buildElement) {
buildElement.remove(); 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 { class RunboatBuildElement extends LitElement {
static get properties() { static get properties() {
@ -12,35 +12,60 @@ class RunboatBuildElement extends LitElement {
this.build = {}; 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() { render() {
return html` return html`
<div> <div class="build-card build-status-${this.build.status}">
<p>${this.build.name}</p> <p class="build-name">${this.build.name}</p>
<p> <p>
${this.build.repo} ${this.build.repo}
${this.build.pr? ${this.build.pr?
html`PR <a href="${this.build.repo_link}">${this.build.pr}</a> to`:"" html`PR <a href="${this.build.repo_link}">${this.build.pr}</a> to`:""
} }
<a href="${this.build.repo_link}">${this.build.target_branch}</a> <a href="${this.build.repo_link}">${this.build.target_branch}</a>
<br>
${this.build.git_commit? ${this.build.git_commit?
html`(<a href="${this.build.repo_commit_link}">${this.build.git_commit.substring(0, 8)}</a>)`:"" html`(<a href="${this.build.repo_commit_link}">${this.build.git_commit.substring(0, 8)}</a>)`:""
} }
</p> </p>
<p>Status: ${this.build.status}</p> <p>
<p>Logs: ${this.build.status}
<a href="/api/v1/builds/${this.build.name}/init-log">init log</a> | <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>`:""
} }
${this.build.status == "started"?
html`| <a href="${this.build.deploy_link}">🚪 live</a>`:""
}
</p> </p>
<p> <p>
<button @click="${this.stopHandler}" ?disabled="${this.build.status != "started"}">stop</button> <button @click="${this.stopHandler}" ?disabled="${this.build.status != "started"}">stop</button>
<button @click="${this.startHandler}" ?disabled="${this.build.status != "stopped"}">start</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> </p>
<div> </div>
`; `;
} }