From f89e5ceec65b0ec175f335d421eb98523b5956df Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Thu, 6 Apr 2023 21:21:11 +0000 Subject: [PATCH] add icons to instance and node status Signed-off-by: Arthur Lu --- images/instances/lxc/loading.svg | 1 - images/instances/lxc/running.svg | 1 - images/instances/lxc/stopped.svg | 1 - images/instances/qemu/loading.svg | 1 - images/instances/qemu/running.svg | 1 - images/instances/qemu/stopped.svg | 1 - images/nodes/offline.svg | 1 - images/nodes/online.svg | 1 - images/status/active.svg | 1 + images/status/inactive.svg | 1 + images/{actions => status}/loading.svg | 0 scripts/config.js | 10 +++++----- scripts/instance.js | 14 +++++++++++--- scripts/utils.js | 23 ++++++++++++++++++++++- 14 files changed, 40 insertions(+), 17 deletions(-) delete mode 100644 images/instances/lxc/loading.svg delete mode 100644 images/instances/lxc/running.svg delete mode 100644 images/instances/lxc/stopped.svg delete mode 100644 images/instances/qemu/loading.svg delete mode 100644 images/instances/qemu/running.svg delete mode 100644 images/instances/qemu/stopped.svg delete mode 100644 images/nodes/offline.svg delete mode 100644 images/nodes/online.svg create mode 100644 images/status/active.svg create mode 100644 images/status/inactive.svg rename images/{actions => status}/loading.svg (100%) diff --git a/images/instances/lxc/loading.svg b/images/instances/lxc/loading.svg deleted file mode 100644 index a4669ad..0000000 --- a/images/instances/lxc/loading.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/images/instances/lxc/running.svg b/images/instances/lxc/running.svg deleted file mode 100644 index 8ecbf42..0000000 --- a/images/instances/lxc/running.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/images/instances/lxc/stopped.svg b/images/instances/lxc/stopped.svg deleted file mode 100644 index 4c641c3..0000000 --- a/images/instances/lxc/stopped.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/images/instances/qemu/loading.svg b/images/instances/qemu/loading.svg deleted file mode 100644 index a4669ad..0000000 --- a/images/instances/qemu/loading.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/images/instances/qemu/running.svg b/images/instances/qemu/running.svg deleted file mode 100644 index 10cd7e6..0000000 --- a/images/instances/qemu/running.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/images/instances/qemu/stopped.svg b/images/instances/qemu/stopped.svg deleted file mode 100644 index 426c89a..0000000 --- a/images/instances/qemu/stopped.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/images/nodes/offline.svg b/images/nodes/offline.svg deleted file mode 100644 index 6c26c00..0000000 --- a/images/nodes/offline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/images/nodes/online.svg b/images/nodes/online.svg deleted file mode 100644 index d72edef..0000000 --- a/images/nodes/online.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/images/status/active.svg b/images/status/active.svg new file mode 100644 index 0000000..ccc2f7b --- /dev/null +++ b/images/status/active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/status/inactive.svg b/images/status/inactive.svg new file mode 100644 index 0000000..92e7bd4 --- /dev/null +++ b/images/status/inactive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/actions/loading.svg b/images/status/loading.svg similarity index 100% rename from images/actions/loading.svg rename to images/status/loading.svg diff --git a/scripts/config.js b/scripts/config.js index 0760373..bb7ef72 100644 --- a/scripts/config.js +++ b/scripts/config.js @@ -178,7 +178,7 @@ async function handleDiskDetach () { dialog.callback = async (result, form) => { if (result === "confirm") { - document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/actions/loading.svg"; + document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/status/loading.svg"; let body = { node: node, type: type, @@ -213,7 +213,7 @@ async function handleDiskAttach () { dialog.callback = async (result, form) => { if (result === "confirm") { let device = form.get("device"); - document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/actions/loading.svg"; + document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/status/loading.svg"; let body = { node: node, type: type, @@ -246,7 +246,7 @@ async function handleDiskResize () { dialog.callback = async (result, form) => { if (result === "confirm") { - document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/actions/loading.svg"; + document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/status/loading.svg"; let body = { node: node, type: type, @@ -295,7 +295,7 @@ async function handleDiskMove () { dialog.callback = async (result, form) => { if (result === "confirm") { - document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/actions/loading.svg"; + document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/status/loading.svg"; let body = { node: node, type: type, @@ -329,7 +329,7 @@ async function handleDiskDelete () { dialog.callback = async (result, form) => { if (result === "confirm") { - document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/actions/loading.svg"; + document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/status/loading.svg"; let body = { node: node, type: type, diff --git a/scripts/instance.js b/scripts/instance.js index c2d64af..a140a69 100644 --- a/scripts/instance.js +++ b/scripts/instance.js @@ -1,4 +1,4 @@ -import {requestPVE, requestAPI, goToPage, goToURL, instances} from "./utils.js"; +import {requestPVE, requestAPI, goToPage, goToURL, instances, nodes} from "./utils.js"; import { Dialog } from "./dialog.js"; export class Instance extends HTMLElement { @@ -13,9 +13,9 @@ export class Instance extends HTMLElement {

-

+

-

+

@@ -54,12 +54,20 @@ export class Instance extends HTMLElement { let statusParagraph = this.shadowElement.querySelector("#instance-status"); statusParagraph.innerText = this.status; + let statusIcon = this.shadowElement.querySelector("#instance-status-icon"); + statusIcon.src = instances[this.status].statusSrc; + statusIcon.alt = instances[this.status].statusAlt; + let nodeNameParagraph = this.shadowElement.querySelector("#node-name"); nodeNameParagraph.innerText = this.node.name; let nodeStatusParagraph = this.shadowElement.querySelector("#node-status"); nodeStatusParagraph.innerText = this.node.status; + let nodeStatusIcon = this.shadowElement.querySelector("#node-status-icon"); + nodeStatusIcon.src = nodes[this.node.status].statusSrc; + nodeStatusIcon.alt = nodes[this.node.status].statusAlt; + let powerButton = this.shadowElement.querySelector("#power-btn"); powerButton.src = instances[this.status].powerButtonSrc; powerButton.alt = instances[this.status].powerButtonAlt; diff --git a/scripts/utils.js b/scripts/utils.js index 3622abf..dc2769e 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -34,6 +34,8 @@ export const resources = { export const instances = { running: { + statusSrc: "images/status/active.svg", + statusAlt: "Instance is running", powerButtonSrc: "images/actions/instance/stop.svg", powerButtonAlt: "Shutdown Instance", configButtonSrc: "images/actions/instance/config-inactive.svg", @@ -44,6 +46,8 @@ export const instances = { deleteButtonAlt: "Delete Instance (Inactive)" }, stopped: { + statusSrc: "images/status/inactive.svg", + statusAlt: "Instance is stopped", powerButtonSrc: "images/actions/instance/start.svg", powerButtonAlt: "Start Instance", configButtonSrc: "images/actions/instance/config-active.svg", @@ -54,7 +58,9 @@ export const instances = { deleteButtonAlt: "Delete Instance" }, loading: { - powerButtonSrc: "images/actions/loading.svg", + statusSrc: "images/status/loading.svg", + statusAlt: "Instance is loading", + powerButtonSrc: "images/status/loading.svg", powerButtonAlt: "Loading Instance", configButtonSrc: "images/actions/instance/config-inactive.svg", configButtonAlt: "Change Configuration (Inactive)", @@ -65,6 +71,21 @@ export const instances = { } } +export const nodes = { + online: { + statusSrc: "images/status/active.svg", + statusAlt: "Node is online", + }, + offline: { + statusSrc: "images/status/inactive.svg", + statusAlt: "Node is offline", + }, + uknown: { + statusSrc: "images/status/inactive.svg", + statusAlt: "Node status is unknown", + } +} + export function getCookie(cname) { let name = cname + "="; let decodedCookie = decodeURIComponent(document.cookie);