diff --git a/scripts/config.js b/scripts/config.js
index 8cd39e5..78238c3 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -140,16 +140,17 @@ function addDiskLine(fieldset, busPrefix, busName, device, diskDetails) {
let actionDiv = document.createElement("div");
diskMetaData.actionBarOrder.forEach((element) => {
let action = document.createElement("img");
- action.classList.add("clickable");
if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")) { // attach
action.src = "images/actions/disk/attach.svg";
action.title = "Attach Disk";
action.addEventListener("click", handleDiskAttach);
+ action.classList.add("clickable");
}
else if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("detach")) { // detach
action.src = "images/actions/disk/detach.svg";
action.title = "Detach Disk";
action.addEventListener("click", handleDiskDetach);
+ action.classList.add("clickable");
}
else if (element === "delete") {
let active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize
@@ -157,6 +158,7 @@ function addDiskLine(fieldset, busPrefix, busName, device, diskDetails) {
action.title = "Delete Disk";
if (active === "active") {
action.addEventListener("click", handleDiskDelete);
+ action.classList.add("clickable");
}
}
else {
@@ -170,6 +172,7 @@ function addDiskLine(fieldset, busPrefix, busName, device, diskDetails) {
else if (element === "resize") {
action.addEventListener("click", handleDiskResize);
}
+ action.classList.add("clickable");
}
}
action.dataset.disk = diskID;
diff --git a/scripts/index.js b/scripts/index.js
index 7e9a392..41ee54d 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -224,10 +224,10 @@ class Instance {
`;
@@ -261,8 +261,8 @@ class Instance {
statusParagraph.innerText = this.status;
let statusIcon = this.shadowElement.querySelector("#instance-status-icon");
- statusIcon.src = instances_config[this.status].statusSrc;
- statusIcon.alt = instances_config[this.status].statusAlt;
+ statusIcon.src = instances_config[this.status].status.src;
+ statusIcon.alt = instances_config[this.status].status.alt;
let nodeNameParagraph = this.shadowElement.querySelector("#node-name");
nodeNameParagraph.innerText = this.node.name;
@@ -271,32 +271,44 @@ class Instance {
nodeStatusParagraph.innerText = this.node.status;
let nodeStatusIcon = this.shadowElement.querySelector("#node-status-icon");
- nodeStatusIcon.src = nodes_config[this.node.status].statusSrc;
- nodeStatusIcon.alt = nodes_config[this.node.status].statusAlt;
+ nodeStatusIcon.src = nodes_config[this.node.status].status.src;
+ nodeStatusIcon.alt = nodes_config[this.node.status].status.src;
let powerButton = this.shadowElement.querySelector("#power-btn");
- powerButton.src = instances_config[this.status].powerButtonSrc;
- powerButton.alt = instances_config[this.status].powerButtonAlt;
- powerButton.title = instances_config[this.status].powerButtonAlt;
- powerButton.onclick = this.handlePowerButton.bind(this)
+ powerButton.src = instances_config[this.status].power.src;
+ powerButton.alt = instances_config[this.status].power.alt;
+ powerButton.title = instances_config[this.status].power.alt;
+ if (instances_config[this.status].power.clickable) {
+ powerButton.classList.add("clickable");
+ powerButton.onclick = this.handlePowerButton.bind(this)
+ }
let configButton = this.shadowElement.querySelector("#configure-btn");
- configButton.src = instances_config[this.status].configButtonSrc;
- configButton.alt = instances_config[this.status].configButtonAlt;
- configButton.title = instances_config[this.status].configButtonAlt;
- configButton.onclick = this.handleConfigButton.bind(this);
+ configButton.src = instances_config[this.status].config.src;
+ configButton.alt = instances_config[this.status].config.alt;
+ configButton.title = instances_config[this.status].config.alt;
+ if (instances_config[this.status].config.clickable) {
+ configButton.classList.add("clickable");
+ configButton.onclick = this.handleConfigButton.bind(this);
+ }
let consoleButton = this.shadowElement.querySelector("#console-btn");
- consoleButton.src = instances_config[this.status].consoleButtonSrc;
- consoleButton.alt = instances_config[this.status].consoleButtonAlt;
- consoleButton.title = instances_config[this.status].consoleButtonAlt;
- consoleButton.onclick = this.handleConsoleButton.bind(this);
+ consoleButton.src = instances_config[this.status].console.src;
+ consoleButton.alt = instances_config[this.status].console.alt;
+ consoleButton.title = instances_config[this.status].console.alt;
+ if (instances_config[this.status].console.clickable) {
+ consoleButton.classList.add("clickable");
+ consoleButton.onclick = this.handleConsoleButton.bind(this);
+ }
let deleteButton = this.shadowElement.querySelector("#delete-btn");
- deleteButton.src = instances_config[this.status].deleteButtonSrc;
- deleteButton.alt = instances_config[this.status].deleteButtonAlt;
- deleteButton.title = instances_config[this.status].deleteButtonAlt;
- deleteButton.onclick = this.handleDeleteButton.bind(this);
+ deleteButton.src = instances_config[this.status].delete.src;
+ deleteButton.alt = instances_config[this.status].delete.alt;
+ deleteButton.title = instances_config[this.status].delete.alt;
+ if (instances_config[this.status].delete.clickable) {
+ deleteButton.classList.add("clickable");
+ deleteButton.onclick = this.handleDeleteButton.bind(this);
+ }
if (this.node.status !== "online") {
powerButton.classList.add("hidden");
diff --git a/scripts/utils.js b/scripts/utils.js
index bb0f198..456de7e 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -26,55 +26,106 @@ export const resources_config = {
export const instances_config = {
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",
- configButtonAlt: "Change Configuration (Inactive)",
- consoleButtonSrc: "images/actions/instance/console-active.svg",
- consoleButtonAlt: "Open Console",
- deleteButtonSrc: "images/actions/delete-inactive.svg",
- deleteButtonAlt: "Delete Instance (Inactive)"
+ status: {
+ src: "images/status/active.svg",
+ alt: "Instance is running",
+ clickable: false
+ },
+ power: {
+ src: "images/actions/instance/stop.svg",
+ alt: "Shutdown Instance",
+ clickable: true,
+ },
+ config: {
+ src: "images/actions/instance/config-inactive.svg",
+ alt: "Change Configuration (Inactive)",
+ clickable: false,
+ },
+ console: {
+ src: "images/actions/instance/console-active.svg",
+ alt: "Open Console",
+ clickable: true,
+ },
+ delete: {
+ src: "images/actions/delete-inactive.svg",
+ alt: "Delete Instance (Inactive)",
+ clickable: false,
+ }
},
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",
- configButtonAlt: "Change Configuration",
- consoleButtonSrc: "images/actions/instance/console-inactive.svg",
- consoleButtonAlt: "Open Console (Inactive)",
- deleteButtonSrc: "images/actions/delete-active.svg",
- deleteButtonAlt: "Delete Instance"
+ status: {
+ src: "images/status/inactive.svg",
+ alt: "Instance is stopped",
+ clickable: false
+ },
+ power: {
+ src: "images/actions/instance/start.svg",
+ alt: "Start Instance",
+ clickable: true,
+ },
+ config: {
+ src: "images/actions/instance/config-active.svg",
+ alt: "Change Configuration",
+ clickable: true,
+ },
+ console: {
+ src: "images/actions/instance/console-inactive.svg",
+ alt: "Open Console (Inactive)",
+ clickable: false,
+ },
+ delete: {
+ src: "images/actions/delete-active.svg",
+ alt: "Delete Instance",
+ clickable: true,
+ }
},
loading: {
- 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)",
- consoleButtonSrc: "images/actions/instance/console-inactive.svg",
- consoleButtonAlt: "Open Console (Inactive)",
- deleteButtonSrc: "images/actions/delete-inactive.svg",
- deleteButtonAlt: "Delete Instance (Inactive)"
+ status: {
+ src: "images/status/loading.svg",
+ alt: "Instance is loading",
+ clickable: false
+ },
+ power: {
+ src: "images/status/loading.svg",
+ alt: "Loading Instance",
+ clickable: false,
+ },
+ config: {
+ src: "images/actions/instance/config-inactive.svg",
+ alt: "Change Configuration (Inactive)",
+ clickable: false,
+ },
+ console: {
+ src: "images/actions/instance/console-inactive.svg",
+ alt: "Open Console (Inactive)",
+ clickable: false,
+ },
+ delete: {
+ src: "images/actions/delete-inactive.svg",
+ alt: "Delete Instance (Inactive)",
+ clickable: false,
+ }
}
}
export const nodes_config = {
online: {
- statusSrc: "images/status/active.svg",
- statusAlt: "Node is online",
+ status: {
+ src: "images/status/active.svg",
+ alt: "Node is online"
+ }
},
offline: {
- statusSrc: "images/status/inactive.svg",
- statusAlt: "Node is offline",
+ status: {
+ src: "images/status/inactive.svg",
+ alt: "Node is offline"
+ }
},
uknown: {
- statusSrc: "images/status/inactive.svg",
- statusAlt: "Node status is unknown",
+ status: {
+ src: "images/status/inactive.svg",
+ alt: "Node is offline"
+ }
}
}