Factor out runboat-build custom element

This commit is contained in:
Stéphane Bidoul 2021-11-17 15:53:16 +01:00
parent 117851cbbb
commit 25b72d5a80
No known key found for this signature in database
GPG key ID: BCAB2555446B5B92
2 changed files with 57 additions and 55 deletions

View file

@ -5,61 +5,8 @@
<body> <body>
<runboat-build id="build"></runboat-build> <runboat-build id="build"></runboat-build>
<script type="module"> <script type="module">
import {LitElement, html} from 'https://unpkg.com/lit@2.0.2?module'; import {RunboatBuildElement} from './runboat-build-element.js'
customElements.define('runboat-build', RunboatBuildElement);
class RunboatBuild extends LitElement {
static get properties() {
return {
build: {}
}
}
constructor() {
super();
this.build = {};
}
render() {
return html`
<p>Build: ${this.build.name}
${this.build.status == "started"?
html`<a href="${this.build.deploy_link}">=&gt; live</a>`:""
}
</p>
<p>
Repo: ${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>
${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>
${this.build.status == "started"?
html`| <a href="/api/v1/builds/${this.build.name}/log">log</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>
</p>
`;
}
startHandler(e) {
fetch(`/api/v1/builds/${this.build.name}/start`, {method: 'POST'});
}
stopHandler(e) {
fetch(`/api/v1/builds/${this.build.name}/stop`, {method: 'POST'});
}
}
customElements.define('runboat-build', RunboatBuild);
const buildName = new URLSearchParams(window.location.search).get("name"); const buildName = new URLSearchParams(window.location.search).get("name");
const buildElement = document.getElementById("build"); const buildElement = document.getElementById("build");

View file

@ -0,0 +1,55 @@
import {LitElement, html} from 'https://unpkg.com/lit@2.0.2?module';
class RunboatBuildElement extends LitElement {
static get properties() {
return {
build: {}
}
}
constructor() {
super();
this.build = {};
}
render() {
return html`
<p>Build: ${this.build.name}
${this.build.status == "started"?
html`<a href="${this.build.deploy_link}">=&gt; live</a>`:""
}
</p>
<p>
Repo: ${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>
${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>
${this.build.status == "started"?
html`| <a href="/api/v1/builds/${this.build.name}/log">log</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>
</p>
`;
}
startHandler(e) {
fetch(`/api/v1/builds/${this.build.name}/start`, {method: 'POST'});
}
stopHandler(e) {
fetch(`/api/v1/builds/${this.build.name}/stop`, {method: 'POST'});
}
}
export {RunboatBuildElement};