🔥 chore(frontend): remove xterm.js component

✨ feat(frontend): enhance ReactFlow environment

📦 feat(frontend): add Proxmox component integration

frontend/src/components/Proxmox/proxmox.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useRef } from 'react';
+import { Terminal } from 'xterm';
+import 'xterm/css/xterm.css';
+import socket from './socket';
+
+const ProxmoxVM = ({ vmAddress }) => {
+    const terminalRef = useRef(null);
+    const terminal = useRef(new Terminal());
+
+    useEffect(() => {
+        terminal.current.open(terminalRef.current);
+        terminal.current.writeln('Connecting to VM...');
+
+        socket.emit('fetchVmData', { vm_address: vmAddress });
+
+        socket.on('vmData', (data) => {
+            terminal.current.writeln(data);
+        });
+
+        return () => {
+            socket.off('vmData');
+            terminal.current.dispose();
+        };
+    }, [vmAddress]);
+
+    return <div ref={terminalRef} />;
+};
+
+export default ProxmoxVM;

frontend/src/components/Proxmox/socket.js

@@ -0,0 +1,3 @@
+import io from "socket.io-client";
+export const socket = io("http://localhost:5000");
+export default socket;

frontend/src/components/Proxmox/xterm.js

@@ -0,0 +1,30 @@
+import React, { useEffect, useRef } from 'react';
+import { Terminal } from 'xterm';
+import './xterm.css';
+
+const TerminalComponent = ({ socket }) => {
+    const terminalRef = useRef(null);
+    useEffect(() => {
+        const terminal = new Terminal();
+        terminal.open(terminalRef.current);
+
+        const ws = new WebSocket('ws://localhost:8080');
+        ws.onopen = () => {
+            console.log('Connected to WebSocket');
+            ws.send('fetchVmData'); // Request VM data on connection
+        };
+        ws.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            terminal.write(JSON.stringify(data, null, 2)); // Display VM data in terminal
+        };
+
+        return () => {
+            ws.close();
+            socket.off('data');
+        };
+    }, []);
+
+    return <div ref={terminalRef} />;
+};
+
+export default TerminalComponent;

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -17,9 +17,11 @@ import { useThemeDetector } from '../../helper/visual'
 import {CgMoreVerticalAlt} from 'react-icons/cg'
 import {BsFillEraserFill} from 'react-icons/bs' 
 import {FaRegSave} from 'react-icons/fa'
+import ProxmoxVM from '../Proxmox/proxmox.js';
 
 const NODE = {
     custom : CustomNodeIframe,
+    proxmoxVM: ProxmoxVM,
   }
 
 const EDGE = {
@@ -35,6 +37,7 @@ export default function ReactEnviorment() {
     const [reactFlowInstance, setReactFlowInstance] = useState(null);
     const reactFlowWrapper = useRef(null);
     const [tool, setTool] = useState(false)
+    const [showProxmoxForm, setShowProxmoxForm] = useState(false);
 
     const deleteNodeContains = useCallback((id) => setNodes((nds) => nds.filter(n => !n.id.includes(`${id}-`))), [setNodes]);
     const deleteEdge = useCallback((id) => setEdges((eds) => eds.filter(e => e.id !== id)), [setEdges]);
@@ -134,19 +137,40 @@ export default function ReactEnviorment() {
             y: event.clientY - reactFlowBounds.top,
           });
 
-          const newNode = {
-            id: `${item.name}-${nodes.length+1}`,
-            type,
-            position,
-            dragHandle : `#draggable`,
-            data: { label: `${item.name}`, host : `${item.host}`, colour : `${style.colour}`, emoji : `${style.emoji}`, delete : deleteNode },
-          };
-
-          setNodes((nds) => nds.concat(newNode));
+          if (type === 'customProxmox') {
+            const newNode = {
+                id: `proxmox-vm-${nodes.length + 1}`,
+                type: 'customProxmox',
+                position,
+                data: { vmAddress: item.vmAddress },
+            };
+            setNodes((nds) => nds.concat(newNode));
+          } else {
+            const newNode = {
+              id: `${item.name}-${nodes.length+1}`,
+              type,
+              position,
+              dragHandle : `#draggable`,
+              data: { label: `${item.name}`, host : `${item.host}`, colour : `${style.colour}`, emoji : `${style.emoji}`, delete : deleteNode },
+            };
+  
+            setNodes((nds) => nds.concat(newNode));
+          }
       }
       },
       [reactFlowInstance, nodes, deleteNode]);
 
+    const addProxmoxVMNode = (vmAddress) => {
+        const newNode = {
+            id: `proxmox-vm-${nodes.length + 1}`,
+            type: 'proxmoxVM',
+            position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight },
+            data: { vmAddress },
+        };
+        setNodes((nds) => nds.concat(newNode));
+        setShowProxmoxForm(false);
+    };
+
     return (
       <div className={`${theme ? "dark" : ""}`}>          
         <div className={` absolute text-center ${tool ? "h-[203.3333px]" : "h-[41px]"} overflow-hidden w-[41px] text-4xl top-4 right-5 z-50 cursor-default select-none bg-white dark:bg-stone-900 rounded-full border border-black dark:border-white duration-500`}  >
@@ -155,6 +179,16 @@ export default function ReactEnviorment() {
           <FaRegSave title="Save" className={`mt-6 text-black dark:text-white ${tool ? "visible" : " invisible"} ml-auto mr-auto `} onClick={() => onSave()}/> 
           <BsFillEraserFill title="Erase" className={`mt-6 text-black dark:text-white ml-auto mr-auto ${tool ? "visible" : " invisible"} `} onClick={() => onErase()}/>
         </div>
+        {showProxmoxForm && (
+            <form onSubmit={(e) => {
+                e.preventDefault();
+                addProxmoxVMNode(e.target.vmAddress.value);
+            }} className="absolute top-10 left-10 z-50">
+                <input name="vmAddress" type="text" placeholder="Enter Proxmox VM Address" required className="p-2"/>
+                <button type="submit" className="p-2 bg-blue-500 text-white">Add VM</button>
+            </form>
+        )}
+        <button onClick={() => setShowProxmoxForm(true)} className="absolute top-10 right-10 z-50 p-2 bg-green-500 text-white">Add Proxmox VM</button>
         <div className={`flex h-screen w-screen ${theme ? "dark" : ""} transition-all`}>    
           <ReactFlowProvider>
           <Navbar onDelete={deleteNodeContains} colour={JSON.parse(localStorage.getItem('colour'))} emoji={JSON.parse(localStorage.getItem('emoji'))}/>