adding status badge for node and initial models for lxc

src/components/proxmox/Node.tsx

@@ -0,0 +1,18 @@
+/**
+ * File to define components for using with Nodes
+ */
+import React from "react";
+import {NodeStatus} from "../../models/proxmox/Node";
+
+/**
+ * Function to render a Status Badge for a proxmox Node
+ * @param status
+ * @constructor
+ */
+export default function NodeStatusBadge(status: NodeStatus) {
+    if (status === NodeStatus.online) {
+        return <span className="badge text-bg-success">{status}</span>
+    } else {
+        return <span className="badge text-bg-danger">{status}</span>
+    }
+}

src/models/proxmox/LXC.tsx

@@ -0,0 +1,34 @@
+/**
+ * Defintions of Objects around LXC in proxmox
+ * @author: ooemperor
+ */
+
+/**
+ * enum of status of proxmox lxc
+ */
+export enum LXCStatus {
+    stopped = "stopped",
+    running = "running"
+}
+
+/**
+ * Data defintion for a lxc in proxmox
+ */
+export interface LXC {
+    vmid: number,
+    status: LXCStatus,
+    cpus: number | null,
+    disk: number | null,
+    diskread: number | null,
+    diskwrite: number | null,
+    lock: string | null,
+    maxdisk: number | null,
+    maxmem: number | null,
+    maxswap: number | null,
+    name: string | null,
+    netin: number | null,
+    netout: number | null,
+    tags: string | null,
+    template: boolean | null,
+    uptime: number | null
+}

src/models/proxmox/Node.tsx

@@ -6,9 +6,9 @@
  * enum of status of proxmox node
  */
 export enum NodeStatus {
-    unknown,
-    online,
-    offline
+    unknown = "unknown",
+    online = "online",
+    offline = "offline"
 }
 
 /**

src/views/Proxmox/Nodes.tsx

@@ -5,6 +5,7 @@
 import React, {useEffect, useState} from "react";
 import {useNodes} from "../../hooks/useNodes";
 import {Node} from "../../models/proxmox/Node";
+import NodeStatusBadge from "../../components/proxmox/Node";
 
 /**
  * Render the main content of the Nodes page
@@ -46,7 +47,7 @@ export default function Nodes() {
                         {!isLoading && nodes.map((node) => (
                             <tr className="clickable-row" key={node.node}>
                                 <td>{node.node}</td>
-                                <td>{node.status}</td>
+                                <td>{NodeStatusBadge(node.status)}</td>
                             </tr>
                         ))}
                         </tbody>