blob: 8366f72a6310e02422d0085d988600002e6a225e [file] [log] [blame]
import { html, render } from 'lit-html'
import 'elements-sk/error-toast-sk'
import { errorMessage } from 'elements-sk/errorMessage'
import { upgradeProperty } from 'elements-sk/upgradeProperty'
import { fromObject } from 'common-sk/modules/query'
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'
import 'infra-sk/modules/systemd-unit-status-sk'
const listUnits = (ele) => ele._units.map(
unit => html`<systemd-unit-status-sk machine="${ele._hostname}" .value=${unit}></systemd-unit-status-sk>`
);
const template = (ele) => html`
<header>
<h1>pulld - ${ele._hostname}</h1>
</header>
<main>
<div @unit-action=${ele._unitAction}>
${listUnits(ele)}
</div>
</main>
<footer>
<error-toast-sk></error-toast-sk>
</footer>
`;
// The <pulld-app-sk> custom element declaration.
//
// Attributes:
// None
//
// Properties:
// None
//
// Events:
// None
//
// Methods:
// None
//
window.customElements.define('pulld-app-sk', class extends HTMLElement {
constructor() {
super();
// The systemd units, an array of systemd.UnitStatus.
this._units = [];
// The hostname of the server.
this._hostname = '';
}
connectedCallback() {
this._loadData();
}
_render() {
render(template(this), this, {eventContext: this});
}
_loadData() {
fetch('/_/list', {
credentials: 'include',
}).then(jsonOrThrow).then(json => {
this._units = json.units;
this._hostname = json.hostname;
this._render();
}).catch(errorMessage);
this._render();
}
_unitAction(e) {
let params = {
name: e.detail.name,
action: e.detail.action,
}
fetch('/_/change?' + fromObject(params), {
credentials: 'include',
method: 'POST',
headers: new Headers({
'Content-Type': 'application/json'
})
}).then(jsonOrThrow).then(json => {
errorMessage(e.detail.name + ": " + json.result);
this._loadData();
}).catch(errorMessage);
}
});