tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add resource details to instance article

Browse Source
This commit is contained in:
Arthur Lu 2022-12-14 17:20:31 -08:00
parent 08dca0cb9e
commit f12454a56c
3 changed files with 50 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
css/instance.css
View File

@ -10,13 +10,29 @@ article {
justify-content: space-between; justify-content: space-between;
} }
.summary-sub-div { .summary-div div {
display: flex; display: flex;
column-gap: 10px; column-gap: 10px;
align-items: center; align-items: center;
width: fit-content; width: fit-content;
} }
.summary-sub-div img { .summary-div div img {
height: 16px;
}
.resource-div {
display: flex;
align-items: center;
justify-content: flex-start;
}
.resource-div div {
display: flex;
column-gap: 10px;
align-items: center;
width: fit-content;
}
.resource-div div img {
height: 16px; height: 16px;
} }

22
index.html
View File

@ -15,16 +15,34 @@
<template id="instance-template"> <template id="instance-template">
<article> <article>
<div class="summary-div"> <div class="summary-div">
<div class="summary-sub-div"> <div>
<img id="instance-type"> <img id="instance-type">
<p id="instance-id"></p> <p id="instance-id"></p>
<p id="instance-name"></p> <p id="instance-name"></p>
</div> </div>
<div class="summary-sub-div"> <div>
<img id="node-status"> <img id="node-status">
<p id="node-name"></p> <p id="node-name"></p>
</div> </div>
</div> </div>
<div class="resource-div">
<div>
<img src="images/resources/cpu.svg">
<p id="resource-cpu"></p>
</div>
<div>
<img src="images/resources/ram.svg">
<p id="resource-ram"></p>
</div>
<div>
<img src="images/resources/swap.svg">
<p id="resource-swap"></p>
</div>
<div>
<img src="images/resources/disk.svg">
<p id="resource-disk"></p>
</div>
</div>
</article> </article>
</template> </template>
</html> </html>

14
scripts/elements.js
View File

@ -23,8 +23,6 @@ class Instance extends HTMLElement {
} }
set data (data) { set data (data) {
let instanceArticle = this.shadowElement.querySelector("article");
let typeImg = this.shadowElement.querySelector("#instance-type"); let typeImg = this.shadowElement.querySelector("#instance-type");
typeImg.src = `images/instances/${data.type}/${data.status}.svg`; typeImg.src = `images/instances/${data.type}/${data.status}.svg`;
@ -39,6 +37,18 @@ class Instance extends HTMLElement {
let nodeParagraph = this.shadowElement.querySelector("#node-name"); let nodeParagraph = this.shadowElement.querySelector("#node-name");
nodeParagraph.innerText = data.node.name; nodeParagraph.innerText = data.node.name;
let resourceCPU = this.shadowElement.querySelector("#resource-cpu");
resourceCPU.innerText = data.cpus;
let resourceRAM = this.shadowElement.querySelector("#resource-ram");
resourceRAM.innerText = (data.maxmem / 1073741824).toFixed(3);
let resourceSWAP = this.shadowElement.querySelector("#resource-swap");
resourceSWAP.innerText = (data.maxswap / 1073741824).toFixed(3);
let resourceDISK = this.shadowElement.querySelector("#resource-disk");
resourceRAM.innerText = (data.maxdisk / 1073741824).toFixed(3);
} }
} }