|
<script>
|
|
class ContainerDialogComponent extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this._channelUid = null;
|
|
this._dialog = null;
|
|
this._closeButton = null;
|
|
this._startButton = null;
|
|
this._restartButton = null;
|
|
this._stopButton = null;
|
|
this._statusSpan = null;
|
|
this._actions = null;
|
|
this._containerList = null;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this._channelUid = this.getAttribute('channel');
|
|
// Render template
|
|
this.innerHTML = `
|
|
<dialog class="container-dialog">
|
|
<div class="dialog-backdrop">
|
|
<div class="dialog-box">
|
|
<div class="dialog-title"><h2>Container</h2></div>
|
|
<div class="dialog-content">
|
|
<table class="container-properties">
|
|
<tr>
|
|
<th>Name</th>
|
|
<td><span class="container-name"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Image</th>
|
|
<td><span class="container-image"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<th>CPUs</th>
|
|
<td><span class="container-cpus"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Memory</th>
|
|
<td><span class="container-memory"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Status</th>
|
|
<td><span class="container-status"></span></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="dialog-actions">
|
|
|
|
<button class="dialog-button secondary btn-container-restart">Restart</button>
|
|
<button class="dialog-button secondary btn-container-stop">Stop</button>
|
|
<button class="dialog-button secondary btn-container-start">Start</button>
|
|
<button class="dialog-button primary btn-container-close">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
`;
|
|
|
|
this._dialog = this.querySelector('dialog');
|
|
this._closeButton = this.querySelector('.btn-container-close');
|
|
this._startButton = this.querySelector('.btn-container-start');
|
|
this._restartButton = this.querySelector('.btn-container-restart');
|
|
this._stopButton = this.querySelector('.btn-container-stop');
|
|
this._statusSpan = this.querySelector('.container-status');
|
|
this._imageSpan = this.querySelector('.container-image');
|
|
this._memorySpan = this.querySelector('.container-memory');
|
|
this._cpusSpan = this.querySelector('.container-cpus');
|
|
this._nameSpan = this.querySelector('.container-name');
|
|
this._actions = this.querySelector('.dialog-actions');
|
|
|
|
this._initEventListeners();
|
|
}
|
|
|
|
set channelUid(val) {
|
|
this._channelUid = val;
|
|
}
|
|
|
|
get channelUid() {
|
|
return this._channelUid;
|
|
}
|
|
|
|
_initEventListeners() {
|
|
if (this._closeButton) {
|
|
this._closeButton.addEventListener('click', () => this.close());
|
|
}
|
|
if (this._startButton) {
|
|
this._startButton.addEventListener('click', () => this.startContainer());
|
|
}
|
|
if (this._restartButton) {
|
|
this._restartButton.addEventListener('click', () => this.restartContainer());
|
|
}
|
|
if (this._stopButton) {
|
|
this._stopButton.addEventListener('click', () => this.stopContainer());
|
|
}
|
|
}
|
|
|
|
async openWithStatus() {
|
|
if (!this._channelUid) return;
|
|
const container = await (window.app?.rpc?.getContainer?.(this._channelUid) ?? Promise.resolve('unknown'));
|
|
this.updateContainerInfo(container);
|
|
}
|
|
|
|
updateContainerInfo(container) {
|
|
this.updateStatus(container['status']);
|
|
this.updateCpus(container['cpus']);
|
|
this.updateMemory(container['memory']);
|
|
this.updateImage(container['image']);
|
|
this.updateName(container['name']);
|
|
this._dialog.showModal();
|
|
this._closeButton.focus();
|
|
}
|
|
|
|
updateStatus(status) {
|
|
this._statusSpan.innerText = status;
|
|
if (status === 'running') {
|
|
this._stopButton.disabled = false;
|
|
this._startButton.disabled = true;
|
|
this._restartButton.disabled = false;
|
|
} else {
|
|
this._stopButton.disabled = true;
|
|
this._startButton.disabled = false;
|
|
this._restartButton.disabled = true;
|
|
}
|
|
}
|
|
|
|
updateCpus(cpus) {
|
|
if (this._cpusSpan) {
|
|
this._cpusSpan.innerText = cpus;
|
|
}
|
|
}
|
|
|
|
updateMemory(memory) {
|
|
if (this._memorySpan) {
|
|
this._memorySpan.innerText = memory;
|
|
}
|
|
}
|
|
|
|
updateImage(image) {
|
|
if (this._imageSpan) {
|
|
this._imageSpan.innerText = image;
|
|
}
|
|
}
|
|
|
|
updateName(name) {
|
|
if (this._nameSpan) {
|
|
this._nameSpan.innerText = name;
|
|
}
|
|
}
|
|
|
|
close() {
|
|
this._dialog.close();
|
|
}
|
|
|
|
// Placeholder for container operations
|
|
async startContainer() {
|
|
if (!this._channelUid) return;
|
|
if (window.app?.rpc?.startContainer) {
|
|
await window.app.rpc.startContainer(this._channelUid);
|
|
await this.openWithStatus();
|
|
}
|
|
}
|
|
|
|
async stopContainer() {
|
|
if (!this._channelUid) return;
|
|
if (window.app?.rpc?.stopContainer) {
|
|
await window.app.rpc.stopContainer(this._channelUid);
|
|
await this.openWithStatus();
|
|
}
|
|
}
|
|
|
|
async restartContainer() {
|
|
if (!this._channelUid) return;
|
|
if (window.app?.rpc?.restartContainer) {
|
|
await window.app.rpc.restartContainer(this._channelUid);
|
|
await this.openWithStatus();
|
|
}
|
|
}
|
|
}
|
|
customElements.define('container-dialog', ContainerDialogComponent);
|
|
</script>
|
|
<container-dialog id="container-dialog" channel="{{ channel.uid.value }}"></container-dialog>
|
|
<script>
|
|
const containerDialog = document.getElementById('container-dialog');
|
|
</script>
|