improve UI and physical selection

Author: enriquetomasmb

nebula/frontend/static/images/physical-device.png

@@ -4,6 +4,7 @@ const HelpContent = (function() {
         const tooltipElements = {
             'processHelpIcon': 'Process deployment allows you to deploy participants in the same machine using different processes.',
             'dockerHelpIcon': 'Docker deployment allows you to deploy participants in different containers.',
+            'physicalDevicesHelpIcon': 'Physical devices deployment allows you to deploy participants in physical devices.',
             'architectureHelpIcon': architecture,
             'topologyCustomIcon': topology.custom,
             'topologyPredefinedIcon': topology.predefined,

nebula/frontend/static/js/deployment/help-content.js

@@ -36,6 +36,8 @@ const DeploymentManager = (function() {
         window.MobilityManager = MobilityManager;
         window.ReputationManager = ReputationManager;
         window.GraphSettings = GraphSettings;
+        window.DeploymentManager = DeploymentManager;
+        window.Utils = Utils;
     }
 
     function getGraphWidth() {
@@ -71,7 +73,8 @@ const DeploymentManager = (function() {
     function setupDeploymentButtons() {
         const runBtn = document.getElementById("run-btn");
         if (runBtn) {
-            runBtn.addEventListener("click", () => {
+            runBtn.addEventListener("click", (event) => {
+                event.stopPropagation();
                 if (!validateScenario()) {
                     return;
                 }
@@ -81,6 +84,15 @@ const DeploymentManager = (function() {
     }
 
     function validateScenario() {
+        const physicalDevicesRadio = document.getElementById('physical-devices-radio');
+        if (physicalDevicesRadio && physicalDevicesRadio.checked) {
+            if (!window.lastPhysicalDevicesAlert || Date.now() - window.lastPhysicalDevicesAlert > 1000) {
+                Utils.showAlert('danger', 'Physical devices deployment is not supported in this version');
+                window.lastPhysicalDevicesAlert = Date.now();
+            }
+            return false;
+        }
+
         // Validate topology
         if (!TopologyManager.getData().nodes.length) {
             Utils.showAlert('error', 'Please create a topology with at least one node');
@@ -250,7 +262,8 @@ const DeploymentManager = (function() {
     }
 
     return {
-        initialize
+        initialize,
+        validateScenario
     };
 })();
 

nebula/frontend/static/js/deployment/main.js

@@ -53,7 +53,7 @@ const MobilityManager = {
         document.getElementById("mobility-btn").addEventListener("click", () => {
             mobilityOptionsDiv.style.display = "block";
             if (this.map) {
-                this.addMapCircle();
+                this.updateMapCircle();
             }
         });
 

nebula/frontend/static/js/deployment/mobility.js

@@ -38,6 +38,15 @@ const TopologyManager = (function() {
             generatePredefinedTopology();
         });
 
+        document.querySelectorAll('input[name="deploymentRadioOptions"]').forEach(radio => {
+            radio.addEventListener('change', () => {
+                if (Graph) {
+                    Graph.nodeThreeObject(node => createNodeObject(node));
+                    Graph.graphData(gData);
+                }
+            });
+        });
+
         // Add federation architecture change listener
         document.getElementById('federationArchitecture').addEventListener('change', function() {
             const federationType = this.value;
@@ -398,6 +407,15 @@ const TopologyManager = (function() {
     function createNodeObject(node) {
         let geometry;
         let main_color;
+        const isPhysical = document.getElementById("physical-devices-radio").checked;
+
+        if (isPhysical) {
+            const texture = new THREE.TextureLoader().load('/platform/static/images/physical-device.png');
+            const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
+            const sprite = new THREE.Sprite(spriteMaterial);
+            sprite.scale.set(20, 15, 0);
+            return sprite;
+        }
 
         if (node.malicious) {
             geometry = new THREE.TorusGeometry(5, 2, 16, 100);

nebula/frontend/static/js/deployment/topology.js

@@ -276,6 +276,11 @@ const UIControls = (function() {
     }
 
     async function handleDeployment() {
+        // First check validation
+        if (!window.DeploymentManager.validateScenario()) {
+            return;
+        }
+
         const confirmModal = document.getElementById('confirm-modal');
         const confirmModalBody = document.getElementById('confirm-modal-body');
         const yesButton = document.getElementById("yes-button");
@@ -295,6 +300,11 @@ const UIControls = (function() {
         yesButton.disabled = false;
 
         const modal = new bootstrap.Modal(confirmModal);
+        
+        confirmModal.addEventListener('hidden.bs.modal', function () {
+            cleanupModal(confirmModal);
+        });
+        
         modal.show();
 
         yesButton.onclick = async () => {
@@ -371,21 +381,25 @@ const UIControls = (function() {
 
         // Add event listener for when modal is hidden
         infoModal.addEventListener('hidden.bs.modal', function () {
-            document.querySelector(".overlay").style.display = "none";
-            // Remove the modal backdrop
-            const backdrop = document.querySelector('.modal-backdrop');
-            if (backdrop) {
-                backdrop.remove();
-            }
-            // Remove the modal-open class from body
-            document.body.classList.remove('modal-open');
-            document.body.style.overflow = '';
-            document.body.style.paddingRight = '';
+            cleanupModal(infoModal);
         });
 
         modal.show();
     }
 
+    function cleanupModal(modal) {
+        document.querySelector(".overlay").style.display = "none";
+        // Remove the modal backdrop
+        const backdrop = document.querySelector('.modal-backdrop');
+        if (backdrop) {
+            backdrop.remove();
+        }
+        // Remove the modal-open class from body
+        document.body.classList.remove('modal-open');
+        document.body.style.overflow = '';
+        document.body.style.paddingRight = '';
+    }
+
     function hideLoadingIndicators() {
         document.querySelector(".overlay").style.display = "none";
         document.getElementById("spinner").style.display = "none";

nebula/frontend/static/js/deployment/ui-controls.js

@@ -1,10 +1,5 @@
 // Utility Functions Module
 const Utils = (function() {
-    function showAlert(type, message) {
-        // Implementation of alert display
-        console.log(`${type}: ${message}`);
-    }
-
     function greaterThan0(input) {
         const value = parseInt(input.value);
         if(value < 1 && !isNaN(value)) {

nebula/frontend/static/js/deployment/utils.js

@@ -206,15 +206,18 @@ <h5 class="step-title">Deployment type</h5>
                     <div class="form-check form-check-inline">
                         <input class="form-check-input" type="radio" name="deploymentRadioOptions" id="docker-radio"
                             value="docker" checked>
-                        <label class="form-check-label" for="docker-radio">Docker containers</label>
+                        <label class="form-check-label" for="docker-radio">Virtual devices</label>
                         <small id="dockerHelp" class="form-text text-muted"></small>
                             <i id="dockerHelpIcon" class="fa fa-info-circle" style="cursor: pointer;"></i>
                         </small>
                     </div>
                     <div class="form-check form-check-inline">
                         <input class="form-check-input" type="radio" name="deploymentRadioOptions" id="physical-devices-radio"
-                            value="physical" disabled>
+                            value="physical">
                         <label class="form-check-label" for="physical-devices-radio">Physical devices</label>
+                        <small id="physicalDevicesHelp" class="form-text text-muted">
+                            <i id="physicalDevicesHelpIcon" class="fa fa-info-circle" style="cursor: pointer;"></i>
+                        </small>
                     </div>
                 </div>
                 <div class="form-group row container-shadow tiny grey">
@@ -682,7 +685,7 @@ <h5 class="step-title">Scheme of mobility</h5>
                         <div class="form-check form-check-inline">
                             <select class="form-control" id="schemeMobilitySelect" name="schemeMobility"
                                 style="display: inline" disabled>
-                                <option value="random" selected>Random</option>
+                                <option value="random" selected>Realistic mobility</option>
                             </select>
                         </div>
                         <h5 class="step-title">Each participant moves every (rounds)</h5>
@@ -696,6 +699,13 @@ <h5 class="step-title">% mobile participants</h5>
                                 placeholder="% of mobile participants" min="0" value="100"
                                 style="display: inline; width: 80%">
                         </div>
+                        <h5 class="step-title">Mobility adaptation</h5>
+                        <div class="form-check form-check-inline">
+                            <select class="form-control" id="mobilityAdaptationSelect" name="mobilityAdaptation" style="display: inline">
+                                <option value="sa" selected>Situational Awareness</option>
+                                <option value="static">Static</option>
+                            </select>
+                        </div>
                         <hr class="styled">
                         <h5 class="step-title">Number of additional participants (deployed during
                             federation)</h5>

nebula/frontend/templates/deployment.html

@@ -815,13 +815,17 @@ def load_configurations_and_start_nodes(self, additional_participants=None, sche
         dataset.initialize_dataset()
         logging.info(f"Splitting {dataset_name} dataset... Done")
 
-        if self.scenario.deployment in ["docker", "process"]:
+        if self.scenario.deployment in ["docker", "process", "physical"]:
             if self.use_blockchain:
                 self.start_blockchain()
             if self.scenario.deployment == "docker":
                 self.start_nodes_docker()
-            else:
+            elif self.scenario.deployment == "physical":
+                self.start_nodes_physical()
+            elif self.scenario.deployment == "process":
                 self.start_nodes_process()
+            else:
+                raise ValueError(f"Unknown deployment type: {self.scenario.deployment}")
         else:
             logging.info(
                 f"Virtualization mode is disabled for scenario '{self.scenario_name}' with {self.n_nodes} nodes. Waiting for nodes to start manually..."
@@ -1097,6 +1101,15 @@ def start_nodes_process(self):
 
         except Exception as e:
             raise Exception(f"Error starting nodes as processes: {e}")
+        
+    def start_nodes_physical(self):
+        logging.info("Starting nodes as physical devices...")
+        logging.info(f"env path: {self.env_path}")
+
+        for idx, node in enumerate(self.config.participants):
+            pass
+
+        logging.info("Physical devices deployment is not implemented publicly. Please use docker or process deployment.")
 
     @classmethod
     def remove_files_by_scenario(cls, scenario_name):