From a1fd99e102ac5ae8bbf149f5346a30e38e2f071f Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Wed, 14 Dec 2022 13:37:30 -0800 Subject: [PATCH] simplify instance display --- index.html | 2 +- scripts/elements.js | 68 ++++----------------------------------------- scripts/index.js | 24 ++++++++-------- 3 files changed, 20 insertions(+), 74 deletions(-) diff --git a/index.html b/index.html index 15af73d..36b40b3 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,6 @@ -
+
\ No newline at end of file diff --git a/scripts/elements.js b/scripts/elements.js index f5792c1..2da33d9 100644 --- a/scripts/elements.js +++ b/scripts/elements.js @@ -1,65 +1,10 @@ -class Node extends HTMLElement { - constructor () { // - super(); - let shadowRoot = this.attachShadow({mode: "open"}); - - let nodeArticle = document.createElement("article"); - shadowRoot.append(nodeArticle); - - let styleLink = document.createElement("link"); - styleLink.rel = "stylesheet"; - styleLink.href = "css/style.css"; - styleLink.type = "text/css"; - shadowRoot.append(styleLink); - - this.shadowElement = shadowRoot; - } - - set data (data) { - let articleElement = this.shadowElement.querySelector("article"); - - let nodeName = document.createElement("h2"); - nodeName.innerText = data.node; - articleElement.append(nodeName); - - let onlineLabel = document.createElement("h3"); - onlineLabel.innerText = data.status; - onlineLabel.style.color = data.status === "online" ? "#00ff00" : "#ff0000"; - articleElement.append(onlineLabel); - } - - set qemu (qemu) { - let articleElement = this.shadowElement.querySelector("article"); - - let qemuDiv = document.createElement("div"); - for (let i = 0; i < qemu.length; i++) { - let newInstance = document.createElement("instance-div"); - newInstance.data = qemu[i]; - qemuDiv.append(newInstance); - } - articleElement.append(qemuDiv); - } - - set lxc (lxc) { - let articleElement = this.shadowElement.querySelector("article"); - - let lxcDiv = document.createElement("div"); - for (let i = 0; i < lxc.length; i++) { - let newInstance = document.createElement("instance-div"); - newInstance.data = lxc[i]; - lxcDiv.append(newInstance); - } - articleElement.append(lxcDiv); - } -} - class Instance extends HTMLElement { constructor () { super(); let shadowRoot = this.attachShadow({mode: "open"}); - let instanceDiv = document.createElement("div"); - shadowRoot.append(instanceDiv); + let instanceArticle = document.createElement("article"); + shadowRoot.append(instanceArticle); let styleLink = document.createElement("link"); styleLink.rel = "stylesheet"; @@ -71,14 +16,13 @@ class Instance extends HTMLElement { } set data (data) { - let instanceDiv = this.shadowElement.querySelector("div"); + let instanceArticle = this.shadowElement.querySelector("article"); let instanceParagraph = document.createElement("p"); - instanceParagraph.innerText = `${data.type} | ${data.vmid} | ${data.name} | ${data.status}`; + instanceParagraph.innerText = `${data.type} | ${data.vmid} | ${data.name} | ${data.status} | ${data.node.name} (${data.node.status})`; instanceParagraph.style.color = data.status === "running" ? "#00ff00" : "#ff0000"; - instanceDiv.append(instanceParagraph); + instanceArticle.append(instanceParagraph); } } -customElements.define("node-article", Node); -customElements.define("instance-div", Instance); \ No newline at end of file +customElements.define("instance-article", Instance); \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index bbbbba6..3fc5692 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -9,20 +9,22 @@ async function init () { } let nodes = await request("/nodes", "GET", null); - nodes.data.sort((a, b) => (a.node > b.node) ? 1 : -1); + let instances = []; - let nodeContainer = document.getElementById("node-container") - for (let i = 0; i < nodes.data.length; i++) { - let newNode = document.createElement("node-article"); - newNode.data = nodes.data[i]; - + let instanceContainer = document.getElementById("instance-container") + + for (let i = 0; i < nodes.data.length; i++) { let qemu = await request(`/nodes/${nodes.data[i].node}/qemu`, "GET"); - qemu.data.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1); + instances.concat(qemu.data); let lxc = await request(`/nodes/${nodes.data[i].node}/lxc`, "GET"); - lxc.data.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1); - newNode.qemu = qemu.data; - newNode.lxc = lxc.data; + instances.concat(lxc.data); + } - nodeContainer.append(newNode); + instances.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1); + + for(let i = 0; i < instances.length; i++) { + let newInstance = document.createElement("instance-article"); + newInstance.data = instances[i]; + instanceContainer.append(newInstance); } } \ No newline at end of file