adding multiple new Views, components and models

src/App.tsx

@@ -1,12 +1,16 @@
+'use client';
 /**
  * App file for running and defining all the routes of the Homelab Dashboard
  * @author: ooemperor
  */
 import React from 'react';
 import './App.css';
 import {BrowserRouter, Route, Routes} from "react-router-dom";
-import Home from "./views/Home";
+import Home from "./views/Home/Home";
 import NavLayout from "./components/NavLayout";
+import Nodes from "./views/Proxmox/Nodes";
+import VMs from "./views/Proxmox/VMs";
+import LXCs from "./views/Proxmox/LXCs";
 
 function App() {
     return (
@@ -17,6 +21,9 @@ function App() {
                     </NavLayout>
                 }>
                     <Route path="/" element={<Home/>}/>
+                    <Route path="/proxmox/nodes" element={<Nodes/>}/>
+                    <Route path="/proxmox/lxc" element={<LXCs/>}/>
+                    <Route path="/proxmox/vm" element={<VMs/>}/>
                 </Route>
             </Routes>
         </BrowserRouter>

src/components/NavLayout.tsx

@@ -17,10 +17,10 @@ const NavLayout: React.FC<LayoutWithNav> = () => {
             <TopNavBar/>
             <div className={"container-xxl bd-gutter my-md-3 mt-3 bd-layout"}>
                 <div className={"row"}>
-                    <div className="col">
+                    <div className="col-2 col-sm-1">
                         <SideNav/>
                     </div>
-                    <div className="col-md-9">
+                    <div className="col">
                         <main className="bd-main order-1">
                             <Outlet/>
                         </main>

src/components/OffCanvasSideBar.tsx

@@ -16,6 +16,5 @@ export default function OffCanvasSideBar(id: string, contentBody: ReactNode) {
                 {contentBody}
             </div>
         </div>
-
     )
 }

src/components/SideNav.tsx

@@ -4,7 +4,7 @@
  */
 
 import OffCanvasSideBar from "./OffCanvasSideBar";
-import {ReactNode} from "react";
+import React, {ReactNode} from "react";
 
 /**
  * Funtion to render a the specific sideNav
@@ -17,12 +17,20 @@ export default function SideNav() {
         <ul className={"bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2"}>
             <li className={"bd-links-group py-2"}>
                 <strong className="bd-links-heading d-flex w-100 align-items-center fw-semibold">
-                    Getting started
+                    Proxmox
                 </strong>
+                <ul className="list-unstyled fw-normal pb-2 small">
+                    <li className="ps-2">
+                        <a className={"nav-link d-inline-block"} href={"/proxmox/nodes"}>Nodes</a>
+                    </li>
+                    <li className="ps-2">
+                        <a className={"nav-link d-inline-block"} href={"/proxmox/lxc"}>LXC</a>
+                    </li>
+                    <li className="ps-2">
+                        <a className={"nav-link d-inline-block"} href={"/proxmox/vm"}>VM</a>
+                    </li>
+                </ul>
             </li>
-            <ul className="list-unstyled fw-normal pb-2 small">
-                <li className={"bd-links-item"}>Getting started</li>
-            </ul>
         </ul>
     </nav>
     return (

src/components/TopNavBar.tsx

@@ -12,7 +12,7 @@ export default function TopNavBar() {
                     <button className={"navbar-toggler p-2"} data-bs-toggle="offcanvas" data-bs-target="#sideNavBar">
                         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
                              className="bi bi-list" viewBox="0 0 16 16">
-                            <path fill-rule="evenodd"
+                            <path fillRule="evenodd"
                                   d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
                         </svg>
                     </button>

src/hooks/useNodes.tsx

@@ -0,0 +1,32 @@
+/**
+ * useNodes
+ * @author: ooemperor
+ */
+import {useState} from "react";
+import {ErrorMessage} from "../models/ErrorMessage";
+import {NodesResponse} from "../models/proxmox/Node";
+import {proxmoxService} from "../services/ProxmoxService";
+
+/**
+ * useNodes for Proxmox
+ * Method used in loading the data in the Route
+ * Helper method for later use in useEffect for loading data from the thingy
+ */
+export const useNodes = () => {
+    const [errorMessage, setErrorMessageProps] = useState<ErrorMessage>({error: false, message: ''});
+    const [isLoading, setIsLoading] = useState<Boolean>(false);
+
+    const getNodes = async () => {
+        setIsLoading(true);
+        setErrorMessageProps({error: false, message:''});
+
+        const nodesResponse: NodesResponse = await proxmoxService.getNodes();
+        if (!nodesResponse.success) {
+            setErrorMessageProps({error: false, message: nodesResponse.message});
+        }
+        setIsLoading(false);
+        return nodesResponse;
+    }
+
+    return {getNodes, isLoading, errorMessage};
+}

src/models/ErrorMessage.tsx

@@ -0,0 +1,4 @@
+export interface ErrorMessage {
+    error: boolean | null;
+    message: string;
+}

src/services/ProxmoxService.tsx

@@ -1,3 +1,4 @@
+'use client';
 /**
  * Service Class for defining how to interact with a proxmox API
  * For more information about the proxmox api see:
@@ -24,10 +25,10 @@ class ProxmoxService {
      * Get method to get all Nodes of proxmox cluster
      */
     async getNodes(): Promise<NodesResponse> {
-        let nodeResponse: any = {success: false, nodes: false, message: ''};
+        let nodeResponse: any = {success: false, nodes: [], message: ''};
 
         try {
-            const response: Response = await fetch(`${this.baseUrl}/api2/json/nodes}`, {
+            const response: Response = await fetch(`${this.baseUrl}/api2/json/nodes`, {
                 method: 'GET',
                 headers: {'Content-Type': 'application/json', 'Authorization': this.apiToken},
             });

src/views/Proxmox/LXCs.tsx

@@ -0,0 +1,17 @@
+/**
+ * Rendering of the Proxmox LXC view
+ * @author ooemperor
+ */
+import React from "react";
+
+export default function LXCs() {
+    return (
+        <div className="container">
+            <div className={"row"}>
+                <div className="col">
+                    <h1>LXC's</h1>
+                </div>
+            </div>
+        </div>
+    )
+}

src/views/Proxmox/Nodes.tsx

@@ -0,0 +1,59 @@
+/**
+ * Rendering of the Proxmox Nodes view
+ * @author ooemperor
+ */
+import React, {useEffect, useState} from "react";
+import {useNodes} from "../../hooks/useNodes";
+import {Node} from "../../models/proxmox/Node";
+
+/**
+ * Render the main content of the Nodes page
+ * @constructor
+ */
+export default function Nodes() {
+
+    const {getNodes, errorMessage, isLoading} = useNodes();
+
+    const [nodes, setNodes] = useState<Node[]>([]);
+
+    useEffect(() => {
+        const loadNodes = async () => {
+            const nodesData = await getNodes();
+            setNodes(nodesData.nodes);
+        }
+
+        loadNodes();
+
+    }, []);
+
+    return (
+        <div className="container">
+            <div className={"row"}>
+                <div className="col">
+                    <h1>Nodes</h1>
+                </div>
+            </div>
+            <div className="row">
+                <div className="col">
+                    <table className="table table-hover">
+                        <thead>
+                        <tr>
+                            <th>Node</th>
+                            <th>Status</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+
+                        {!isLoading && nodes.map((node) => (
+                            <tr className="clickable-row" key={node.node}>
+                                <td>{node.node}</td>
+                                <td>{node.status}</td>
+                            </tr>
+                        ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    )
+}

src/views/Proxmox/VMs.tsx

@@ -0,0 +1,17 @@
+/**
+ * Rendering of the Proxmox VMs view
+ * @author ooemperor
+ */
+import React from "react";
+
+export default function VMs() {
+    return (
+        <div className="container">
+            <div className={"row"}>
+                <div className="col">
+                    <h1>VM's</h1>
+                </div>
+            </div>
+        </div>
+    )
+}