🔧 Modified backend and frontend for enhanced functionality

backend/app.py

@@ -1,5 +1,4 @@
 from flask import Flask, jsonify, request
-from flask_socketio import SocketIO, emit
 from flask_cors import CORS
 import socket
 import argparse
@@ -7,11 +6,9 @@ import argparse
 # import asyncio 
 # from multiprocessing import Process
 import gradio as gr
-import requests
 
 app = Flask(__name__)
 CORS(app)
-socketio = SocketIO(app, cors_allowed_origins="*")
 
 def portConnection(port : int):
     s = socket.socket(
@@ -100,49 +97,9 @@ def remove_port():
 
 @app.route("/api/open/ports", methods=["GET"])
 def open_ports():
-    # Assuming 'visable' is a list of open ports information
     return jsonify(visable)
 
-## Proxmox API
-
-@app.route('/api/addProxmoxVM', methods=['POST'])
-def add_proxmox_vm():
-    data = request.json
-    # Placeholder for saving or processing Proxmox VM data
-    # This should include logic to handle the data received from the frontend
-    return jsonify({"status": "VM added"}), 200
-
-@app.route('/api/getVncUrl', methods=['GET'])
-def get_vnc_url():
-    vm_address = request.args.get('vmAddress')
-    # Placeholder for fetching VNC URL based on VM address
-    # This should include logic to retrieve the VNC URL for the specified VM
-    vnc_url = "https://example.com/vnc/" + vm_address  # Example VNC URL
-    return jsonify({"vncUrl": vnc_url})
-
-@socketio.on('connect')
-def handle_connect():
-    print('Client connected')
-
-@socketio.on('disconnect')
-def handle_disconnect():
-    print('Client disconnected')
-
-@socketio.on('fetchVmData')
-def handle_fetch_vm_data(data):
-    # Fetch VM data from Proxmox using the provided VM address
-    # The actual fetching should be adapted to match your Proxmox setup and API
-    try:
-        vm_data = requests.get(f"http://{data['vm_address']}/api2/json", verify=False)  # Example request
-        emit('vmData', vm_data.json())
-    except requests.exceptions.RequestException as e:
-        print(f"Error fetching VM data: {e}")
-        emit('vmData', {'error': 'Failed to fetch VM data'})
-
-if __name__ == '__main__':
-    socketio.run(app, debug=True, host='0.0.0.0')
-
-## Gradio API
+
 if __name__ == "__main__":
 
     parser = argparse.ArgumentParser()
@@ -152,3 +109,5 @@ if __name__ == "__main__":
 
    
 
+   
+

backend/requirements.txt

@@ -71,4 +71,5 @@ urllib3==1.26.10
 uvicorn==0.18.2
 Werkzeug==2.2.0
 yarl==1.7.2
-zipp==3.8.1
+zipp==3.8.1
+flask-socketio

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -18,10 +18,12 @@ import {CgMoreVerticalAlt} from 'react-icons/cg'
 import {BsFillEraserFill} from 'react-icons/bs' 
 import {FaRegSave} from 'react-icons/fa'
 import ProxmoxVM from '../Proxmox/proxmox.js';
+import EmbedNode from "../Nodes/EmbedNode.js"; 
 
 const NODE = {
     custom : CustomNodeIframe,
     proxmoxVM: ProxmoxVM,
+    embed: EmbedNode, 
   }
 
 const EDGE = {
@@ -137,23 +139,32 @@ export default function ReactEnviorment() {
             y: event.clientY - reactFlowBounds.top,
           });
 
-          if (type === 'customProxmox') {
-            const newNode = {
+          let newNode;
+          if (type === 'embed') {
+            newNode = {
+              id: `embed-${nodes.length + 1}`,
+              type: 'embed',
+              position,
+              data: { url: item.url, width: item.width, height: item.height },
+            };
+          } else if (type === 'customProxmox') {
+            newNode = {
                 id: `proxmox-vm-${nodes.length + 1}`,
                 type: 'customProxmox',
                 position,
                 data: { vmAddress: item.vmAddress },
             };
-            setNodes((nds) => nds.concat(newNode));
           } else {
-            const newNode = {
+            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 },
             };
+          }
   
+          if (newNode) {
             setNodes((nds) => nds.concat(newNode));
           }
       }