add icons to instance and node status

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-04-06 21:21:11 +00:00
parent d8a5bba412
commit 41bcedc4df
14 changed files with 40 additions and 17 deletions

View File

@ -1 +0,0 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 204.481 204.481"><path d="M162.116 38.31a7.43 7.43 0 00.454-.67c.033-.055.068-.109.1-.164a7.72 7.72 0 00.419-.857c.014-.034.024-.069.038-.104a7.492 7.492 0 00.314-1.008c.068-.288.124-.581.157-.881l.008-.052a7.48 7.48 0 00.043-.796V7.5a7.5 7.5 0 00-7.5-7.5H48.332a7.5 7.5 0 00-7.5 7.5v26.279c0 .269.016.534.043.796l.008.052c.034.3.089.593.157.881.016.069.035.138.053.207.073.273.159.541.261.801.013.034.024.069.038.104.121.296.262.581.419.857.032.056.067.109.1.164.14.232.291.455.454.67.027.035.047.074.074.109l50.255 63.821-50.255 63.821c-.028.035-.047.074-.074.109a7.43 7.43 0 00-.454.67c-.033.055-.068.109-.1.164a7.72 7.72 0 00-.419.857c-.014.034-.024.069-.038.104a7.492 7.492 0 00-.314 1.008 7.308 7.308 0 00-.157.881l-.008.052a7.48 7.48 0 00-.043.796v26.279a7.5 7.5 0 007.5 7.5h107.817a7.5 7.5 0 007.5-7.5v-26.279c0-.269-.016-.534-.043-.796l-.008-.052a7.51 7.51 0 00-.157-.881c-.016-.069-.035-.138-.053-.207a7.492 7.492 0 00-.261-.801c-.013-.034-.024-.069-.038-.104a7.383 7.383 0 00-.419-.857c-.032-.056-.067-.109-.1-.164a7.646 7.646 0 00-.454-.67c-.027-.035-.047-.074-.074-.109l-50.255-63.821 50.255-63.821c.028-.035.047-.074.074-.11zM148.649 15v11.279H55.832V15h92.817zM55.832 189.481v-11.279h92.817v11.279H55.832zm84.866-26.279H63.784l38.457-48.838 38.457 48.838zm-38.457-73.084L63.784 41.279h76.914l-38.457 48.839z" fill="#000"/></svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><g stroke-width="0" stroke-miterlimit="10" fill="#0f0"><path d="M53.42 83.487l74.437-36.193 74.436 36.193-74.436 36.164z"/><path d="M127.857 119.651v88.768l74.436-36.193v-88.74z"/><path d="M127.857 125.271a5.62 5.62 0 01-2.456-.564L50.964 88.533a5.619 5.619 0 010-10.11L125.4 42.247a5.603 5.603 0 014.912 0l74.434 36.176a5.621 5.621 0 010 10.11l-74.434 36.174a5.62 5.62 0 01-2.456.564zM66.278 83.478l61.579 29.924 61.578-29.924-61.578-29.926-61.579 29.926z"/><path d="M127.857 214.03a5.62 5.62 0 01-2.456-.564L50.964 177.29a5.62 5.62 0 01-3.164-5.055V83.478c0-1.936.997-3.737 2.638-4.763a5.633 5.633 0 015.438-.292l71.98 34.979 71.979-34.979a5.619 5.619 0 018.076 5.055v88.757a5.625 5.625 0 01-3.164 5.055l-74.434 36.176a5.62 5.62 0 01-2.456.565zM59.04 168.718l68.817 33.444 68.814-33.444V92.459l-66.358 32.248a5.603 5.603 0 01-4.912 0L59.04 92.459v76.258z"/><path d="M127.857 214.03a5.622 5.622 0 01-5.62-5.62v-88.759c0-3.102 2.517-5.62 5.62-5.62s5.62 2.518 5.62 5.62v88.76a5.622 5.622 0 01-5.62 5.62zM239.51 176.017a5.622 5.622 0 01-5.62-5.62v-19.94c0-3.102 2.517-5.62 5.62-5.62s5.62 2.518 5.62 5.62v19.94a5.62 5.62 0 01-5.62 5.62zM239.51 130.147a5.622 5.622 0 01-5.62-5.62V64.806l-106.033-51.53L18.66 66.343a5.622 5.622 0 01-7.511-2.6 5.62 5.62 0 012.6-7.51L125.4 1.97a5.603 5.603 0 014.912 0l111.652 54.262a5.621 5.621 0 013.164 5.055v63.239a5.618 5.618 0 01-5.62 5.62zM16.204 109.78a5.622 5.622 0 01-5.62-5.62V84.22c0-3.102 2.518-5.62 5.62-5.62s5.62 2.518 5.62 5.62v19.94a5.62 5.62 0 01-5.62 5.62z"/><path d="M127.857 254.307a5.62 5.62 0 01-2.456-.565L13.748 199.478a5.62 5.62 0 01-3.164-5.055V130.09c0-3.103 2.518-5.62 5.62-5.62s5.62 2.517 5.62 5.62v60.816l106.033 51.53 109.196-53.07a5.626 5.626 0 017.511 2.6 5.624 5.624 0 01-2.599 7.51l-111.652 54.265a5.62 5.62 0 01-2.456.565z"/></g></svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><g stroke-width="0" stroke-miterlimit="10" fill="red"><path d="M53.42 83.487l74.437-36.193 74.436 36.193-74.436 36.164z"/><path d="M127.857 119.651v88.768l74.436-36.193v-88.74z"/><path d="M127.857 125.271a5.62 5.62 0 01-2.456-.564L50.964 88.533a5.619 5.619 0 010-10.11L125.4 42.247a5.603 5.603 0 014.912 0l74.434 36.176a5.621 5.621 0 010 10.11l-74.434 36.174a5.62 5.62 0 01-2.456.564zM66.278 83.478l61.579 29.924 61.578-29.924-61.578-29.926-61.579 29.926z"/><path d="M127.857 214.03a5.62 5.62 0 01-2.456-.564L50.964 177.29a5.62 5.62 0 01-3.164-5.055V83.478c0-1.936.997-3.737 2.638-4.763a5.633 5.633 0 015.438-.292l71.98 34.979 71.979-34.979a5.619 5.619 0 018.076 5.055v88.757a5.625 5.625 0 01-3.164 5.055l-74.434 36.176a5.62 5.62 0 01-2.456.565zM59.04 168.718l68.817 33.444 68.814-33.444V92.459l-66.358 32.248a5.603 5.603 0 01-4.912 0L59.04 92.459v76.258z"/><path d="M127.857 214.03a5.622 5.622 0 01-5.62-5.62v-88.759c0-3.102 2.517-5.62 5.62-5.62s5.62 2.518 5.62 5.62v88.76a5.622 5.622 0 01-5.62 5.62zM239.51 176.017a5.622 5.622 0 01-5.62-5.62v-19.94c0-3.102 2.517-5.62 5.62-5.62s5.62 2.518 5.62 5.62v19.94a5.62 5.62 0 01-5.62 5.62zM239.51 130.147a5.622 5.622 0 01-5.62-5.62V64.806l-106.033-51.53L18.66 66.343a5.622 5.622 0 01-7.511-2.6 5.62 5.62 0 012.6-7.51L125.4 1.97a5.603 5.603 0 014.912 0l111.652 54.262a5.621 5.621 0 013.164 5.055v63.239a5.618 5.618 0 01-5.62 5.62zM16.204 109.78a5.622 5.622 0 01-5.62-5.62V84.22c0-3.102 2.518-5.62 5.62-5.62s5.62 2.518 5.62 5.62v19.94a5.62 5.62 0 01-5.62 5.62z"/><path d="M127.857 254.307a5.62 5.62 0 01-2.456-.565L13.748 199.478a5.62 5.62 0 01-3.164-5.055V130.09c0-3.103 2.518-5.62 5.62-5.62s5.62 2.517 5.62 5.62v60.816l106.033 51.53 109.196-53.07a5.626 5.626 0 017.511 2.6 5.624 5.624 0 01-2.599 7.51l-111.652 54.265a5.62 5.62 0 01-2.456.565z"/></g></svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -1 +0,0 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 204.481 204.481"><path d="M162.116 38.31a7.43 7.43 0 00.454-.67c.033-.055.068-.109.1-.164a7.72 7.72 0 00.419-.857c.014-.034.024-.069.038-.104a7.492 7.492 0 00.314-1.008c.068-.288.124-.581.157-.881l.008-.052a7.48 7.48 0 00.043-.796V7.5a7.5 7.5 0 00-7.5-7.5H48.332a7.5 7.5 0 00-7.5 7.5v26.279c0 .269.016.534.043.796l.008.052c.034.3.089.593.157.881.016.069.035.138.053.207.073.273.159.541.261.801.013.034.024.069.038.104.121.296.262.581.419.857.032.056.067.109.1.164.14.232.291.455.454.67.027.035.047.074.074.109l50.255 63.821-50.255 63.821c-.028.035-.047.074-.074.109a7.43 7.43 0 00-.454.67c-.033.055-.068.109-.1.164a7.72 7.72 0 00-.419.857c-.014.034-.024.069-.038.104a7.492 7.492 0 00-.314 1.008 7.308 7.308 0 00-.157.881l-.008.052a7.48 7.48 0 00-.043.796v26.279a7.5 7.5 0 007.5 7.5h107.817a7.5 7.5 0 007.5-7.5v-26.279c0-.269-.016-.534-.043-.796l-.008-.052a7.51 7.51 0 00-.157-.881c-.016-.069-.035-.138-.053-.207a7.492 7.492 0 00-.261-.801c-.013-.034-.024-.069-.038-.104a7.383 7.383 0 00-.419-.857c-.032-.056-.067-.109-.1-.164a7.646 7.646 0 00-.454-.67c-.027-.035-.047-.074-.074-.109l-50.255-63.821 50.255-63.821c.028-.035.047-.074.074-.11zM148.649 15v11.279H55.832V15h92.817zM55.832 189.481v-11.279h92.817v11.279H55.832zm84.866-26.279H63.784l38.457-48.838 38.457 48.838zm-38.457-73.084L63.784 41.279h76.914l-38.457 48.839z" fill="#000"/></svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><path d="M237.005 21.765H18.708c-9.554 0-17.301 7.747-17.301 17.301v137.898c0 9.554 7.747 17.301 17.3 17.301H98.6v23.163H77.344a8.26 8.26 0 000 16.517h101.03a8.26 8.26 0 000-16.517H157.12v-23.163h79.891c9.554 0 17.301-7.747 17.301-17.3V39.065c-.005-9.554-7.753-17.301-17.307-17.301z" fill="#0f0" stroke-width="0" stroke-miterlimit="10"/></svg>

Before

Width:  |  Height:  |  Size: 408 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><path d="M237.005 21.765H18.708c-9.554 0-17.301 7.747-17.301 17.301v137.898c0 9.554 7.747 17.301 17.3 17.301H98.6v23.163H77.344a8.26 8.26 0 000 16.517h101.03a8.26 8.26 0 000-16.517H157.12v-23.163h79.891c9.554 0 17.301-7.747 17.301-17.3V39.065c-.005-9.554-7.753-17.301-17.307-17.301z" fill="red" stroke-width="0" stroke-miterlimit="10"/></svg>

Before

Width:  |  Height:  |  Size: 407 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><g stroke-width="0" stroke-miterlimit="10" fill="red"><path d="M241.454 12.099H14.26c-7.099 0-12.853 5.755-12.853 12.853v45.842c0 7.098 5.754 12.853 12.853 12.853h227.19c7.099 0 12.854-5.755 12.854-12.853V24.952c.003-7.098-5.752-12.853-12.85-12.853zM130.852 64.033H28.287c-2.33 0-4.215-1.885-4.215-4.215s1.886-4.215 4.215-4.215h102.565a4.215 4.215 0 110 8.43zm0-23.885H28.287c-2.33 0-4.215-1.885-4.215-4.215s1.886-4.215 4.215-4.215h102.565a4.215 4.215 0 110 8.43zm80.92 23.38c-8.644 0-15.652-7.009-15.652-15.652s7.008-15.652 15.652-15.652 15.651 7.008 15.651 15.652-7.005 15.651-15.651 15.651zM241.454 92.08H14.26c-7.099 0-12.853 5.755-12.853 12.855v45.843c0 7.098 5.754 12.853 12.853 12.853h227.19c7.099 0 12.854-5.755 12.854-12.853v-45.843c.003-7.1-5.752-12.855-12.85-12.855zm-110.602 51.934H28.287a4.215 4.215 0 110-8.43h102.565a4.215 4.215 0 110 8.43zm0-23.885H28.287c-2.33 0-4.215-1.885-4.215-4.215s1.886-4.215 4.215-4.215h102.565a4.215 4.215 0 110 8.43zm80.92 23.38c-8.644 0-15.652-7.009-15.652-15.652 0-8.644 7.008-15.652 15.652-15.652s15.651 7.008 15.651 15.652c.003 8.643-7.005 15.651-15.651 15.651zM241.454 172.064H14.26c-7.099 0-12.853 5.754-12.853 12.852v45.843c0 7.098 5.754 12.856 12.853 12.856h227.19c7.099 0 12.854-5.755 12.854-12.856v-45.843c.003-7.098-5.752-12.852-12.85-12.852zm-110.602 51.931H28.287a4.215 4.215 0 110-8.43h102.565a4.215 4.215 0 110 8.43zm0-23.882H28.287a4.215 4.215 0 110-8.43h102.565a4.215 4.215 0 110 8.43zm80.92 23.38c-8.644 0-15.652-7.009-15.652-15.653 0-8.643 7.008-15.651 15.652-15.651s15.651 7.008 15.651 15.651c.003 8.644-7.005 15.652-15.651 15.652z"/></g></svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><g stroke-width="0" stroke-miterlimit="10" fill="#0f0"><path d="M241.454 12.099H14.26c-7.099 0-12.853 5.755-12.853 12.853v45.842c0 7.098 5.754 12.853 12.853 12.853h227.19c7.099 0 12.854-5.755 12.854-12.853V24.952c.003-7.098-5.752-12.853-12.85-12.853zM130.852 64.033H28.287c-2.33 0-4.215-1.885-4.215-4.215s1.886-4.215 4.215-4.215h102.565a4.215 4.215 0 110 8.43zm0-23.885H28.287c-2.33 0-4.215-1.885-4.215-4.215s1.886-4.215 4.215-4.215h102.565a4.215 4.215 0 110 8.43zm80.92 23.38c-8.644 0-15.652-7.009-15.652-15.652s7.008-15.652 15.652-15.652 15.651 7.008 15.651 15.652-7.005 15.651-15.651 15.651zM241.454 92.08H14.26c-7.099 0-12.853 5.755-12.853 12.855v45.843c0 7.098 5.754 12.853 12.853 12.853h227.19c7.099 0 12.854-5.755 12.854-12.853v-45.843c.003-7.1-5.752-12.855-12.85-12.855zm-110.602 51.934H28.287a4.215 4.215 0 110-8.43h102.565a4.215 4.215 0 110 8.43zm0-23.885H28.287c-2.33 0-4.215-1.885-4.215-4.215s1.886-4.215 4.215-4.215h102.565a4.215 4.215 0 110 8.43zm80.92 23.38c-8.644 0-15.652-7.009-15.652-15.652 0-8.644 7.008-15.652 15.652-15.652s15.651 7.008 15.651 15.652c.003 8.643-7.005 15.651-15.651 15.651zM241.454 172.064H14.26c-7.099 0-12.853 5.754-12.853 12.852v45.843c0 7.098 5.754 12.856 12.853 12.856h227.19c7.099 0 12.854-5.755 12.854-12.856v-45.843c.003-7.098-5.752-12.852-12.85-12.852zm-110.602 51.931H28.287a4.215 4.215 0 110-8.43h102.565a4.215 4.215 0 110 8.43zm0-23.882H28.287a4.215 4.215 0 110-8.43h102.565a4.215 4.215 0 110 8.43zm80.92 23.38c-8.644 0-15.652-7.009-15.652-15.653 0-8.643 7.008-15.651 15.652-15.651s15.651 7.008 15.651 15.651c.003 8.644-7.005 15.652-15.651 15.652z"/></g></svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

1
images/status/active.svg Normal file
View File

@ -0,0 +1 @@
<svg width="16" height="16" fill="#0f0" stroke="#none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8"/></svg>

After

Width:  |  Height:  |  Size: 125 B

View File

@ -0,0 +1 @@
<svg width="16" height="16" fill="#f00" stroke="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8"/></svg>

After

Width:  |  Height:  |  Size: 124 B

View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -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,

View File

@ -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 {
<p id="instance-id"></p>
<p id="instance-name"></p>
<p id="instance-type"></p>
<p id="instance-status"></p>
<div><img id="instance-status-icon"><p id="instance-status"></p></div>
<p id="node-name"></p>
<p id="node-status"></p>
<div><img id="node-status-icon"><p id="node-status"></p></div>
<div class="hidden"></div>
<div class="btn-group">
<img id="power-btn" class="clickable">
@ -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;

View File

@ -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);