simplify instance display
This commit is contained in:
parent
35dd1402b0
commit
3247edbbbb
@ -9,6 +9,6 @@
|
||||
<script src="scripts/elements.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="node-container" class="center-div"></div>
|
||||
<div id="instance-container" class="center-div"></div>
|
||||
</body>
|
||||
</html>
|
@ -1,65 +1,10 @@
|
||||
class Node extends HTMLElement {
|
||||
constructor () { // <link rel="stylesheet" href="style.css" type="text/css">
|
||||
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);
|
||||
customElements.define("instance-article", Instance);
|
@ -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 instanceContainer = document.getElementById("instance-container")
|
||||
|
||||
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 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);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user