Warning: you will remove the scenario from the database
` + ); + + $('#confirm-modal #yes-button').off('click').on('click', () => { + this.executeRemove(scenarioName); + }); + }, + + async executeRelaunch(scenarioName) { + try { + const response = await fetch(`/platform/dashboard/${scenarioName}/relaunch`, { + method: 'GET' + }); + + if (response.redirected) { + window.location.href = response.url; + } else { + $('#confirm-modal').modal('hide'); + $('#confirm-modal').on('hidden.bs.modal', () => { + $('#info-modal-body').html('You are not allowed to relaunch a scenario with demo role.'); + $('#info-modal').modal('show'); + }); + } + } catch (error) { + console.error('Error:', error); + } + }, + + async executeRemove(scenarioName) { + try { + const response = await fetch(`/platform/dashboard/${scenarioName}/remove`, { + method: 'GET' + }); + + if (response.redirected) { + window.location.href = response.url; + } else { + $('#confirm-modal').modal('hide'); + $('#confirm-modal').on('hidden.bs.modal', () => { + $('#info-modal-body').html('You are not allowed to remove a scenario with demo role.'); + $('#info-modal').modal('show'); + }); + } + } catch (error) { + console.error('Error:', error); + } + } +}; + +export default ScenarioActions; \ No newline at end of file diff --git a/nebula/frontend/static/js/deployment/attack.js b/nebula/frontend/static/js/deployment/attack.js new file mode 100644 index 000000000..4bc208eb4 --- /dev/null +++ b/nebula/frontend/static/js/deployment/attack.js @@ -0,0 +1,226 @@ +// Attack Configuration Module +const AttackManager = (function() { + const ATTACK_TYPES = { + NO_ATTACK: 'No Attack', + LABEL_FLIPPING: 'Label Flipping', + SAMPLE_POISONING: 'Sample Poisoning', + MODEL_POISONING: 'Model Poisoning', + GLL_NEURON_INVERSION: 'GLL Neuron Inversion', + SWAPPING_WEIGHTS: 'Swapping Weights', + DELAYER: 'Delayer', + FLOODING: 'Flooding' + }; + + function updateAttackUI(attackType) { + const elements = { + poisonedNode: {title: document.getElementById("poisoned-node-title"), container: document.getElementById("poisoned-node-percent-container")}, + poisonedSample: {title: document.getElementById("poisoned-sample-title"), container: document.getElementById("poisoned-sample-percent-container")}, + poisonedNoise: {title: document.getElementById("poisoned-noise-title"), container: document.getElementById("poisoned-noise-percent-container")}, + noiseType: {title: document.getElementById("noise-type-title"), container: document.getElementById("noise-type-container")}, + targeted: {title: document.getElementById("targeted-title"), container: document.getElementById("targeted-container")}, + targetLabel: {title: document.getElementById("target_label-title"), container: document.getElementById("target_label-container")}, + targetChangedLabel: {title: document.getElementById("target_changed_label-title"), container: document.getElementById("target_changed_label-container")}, + layerIdx: {title: document.getElementById("layer_idx-title"), container: document.getElementById("layer_idx-container")}, + delay: {title: document.getElementById("delay-title"), container: document.getElementById("delay-container")}, + startAttack: {title: document.getElementById("start-attack-title"), container: document.getElementById("start-attack-container")}, + stopAttack: {title: document.getElementById("stop-attack-title"), container: document.getElementById("stop-attack-container")}, + attackInterval: {title: document.getElementById("attack-interval-title"), container: document.getElementById("attack-interval-container")}, + targetPercentage: {title: document.getElementById("target-percentage-title"), container: document.getElementById("target-percentage-container")}, + selectionInterval: {title: document.getElementById("selection-interval-title"), container: document.getElementById("selection-interval-container")}, + floodingFactor: {title: document.getElementById("flooding-factor-title"), container: document.getElementById("flooding-factor-container")} + }; + + // Hide all elements first + Object.values(elements).forEach(element => { + element.title.style.display = "none"; + element.container.style.display = "none"; + }); + + // Show relevant elements based on attack type + switch(attackType) { + case ATTACK_TYPES.NO_ATTACK: + break; + + case ATTACK_TYPES.LABEL_FLIPPING: + showElements(elements, ['poisonedNode', 'poisonedSample', 'targeted', 'startAttack', 'stopAttack', 'attackInterval']); + if(document.getElementById("targeted").checked) { + showElements(elements, ['targetLabel', 'targetChangedLabel']); + } + break; + + case ATTACK_TYPES.SAMPLE_POISONING: + showElements(elements, ['poisonedNode', 'poisonedSample', 'poisonedNoise', 'noiseType', 'targeted', 'startAttack', 'stopAttack', 'attackInterval']); + break; + + case ATTACK_TYPES.MODEL_POISONING: + showElements(elements, ['poisonedNode', 'poisonedNoise', 'noiseType', 'startAttack', 'stopAttack', 'attackInterval']); + break; + + case ATTACK_TYPES.GLL_NEURON_INVERSION: + showElements(elements, ['poisonedNode', 'startAttack', 'stopAttack', 'attackInterval']); + break; + + case ATTACK_TYPES.SWAPPING_WEIGHTS: + showElements(elements, ['poisonedNode', 'layerIdx', 'startAttack', 'stopAttack', 'attackInterval']); + break; + + case ATTACK_TYPES.DELAYER: + showElements(elements, ['poisonedNode', 'delay', 'startAttack', 'stopAttack', 'attackInterval', 'targetPercentage', 'selectionInterval']); + break; + + case ATTACK_TYPES.FLOODING: + showElements(elements, ['poisonedNode', 'startAttack', 'stopAttack', 'attackInterval', 'targetPercentage', 'selectionInterval', 'floodingFactor']); + break; + } + } + + function showElements(elements, elementKeys) { + elementKeys.forEach(key => { + elements[key].title.style.display = "block"; + elements[key].container.style.display = "block"; + }); + } + + function initializeEventListeners() { + document.getElementById("poisoning-attack-select").addEventListener("change", function() { + updateAttackUI(this.value); + }); + + document.getElementById("targeted").addEventListener("change", function() { + const attackType = document.getElementById("poisoning-attack-select").value; + updateAttackUI(attackType); + }); + + document.getElementById("malicious-nodes-select").addEventListener("change", function() { + const poisonedNodePercent = document.getElementById("poisoned-node-percent"); + if(this.value === "Manual") { + poisonedNodePercent.value = 0; + poisonedNodePercent.disabled = true; + } else { + poisonedNodePercent.disabled = false; + } + }); + } + + function getAttackConfig() { + const attackType = document.getElementById("poisoning-attack-select").value; + const config = { + type: attackType, + poisonedNodePercent: parseFloat(document.getElementById("poisoned-node-percent").value), + startRound: parseInt(document.getElementById("start-attack").value), + stopRound: parseInt(document.getElementById("stop-attack").value), + attackInterval: parseInt(document.getElementById("attack-interval").value) + }; + + switch(attackType) { + case ATTACK_TYPES.LABEL_FLIPPING: + config.poisonedSamplePercent = parseFloat(document.getElementById("poisoned-sample-percent").value); + config.targeted = document.getElementById("targeted").checked; + if(config.targeted) { + config.targetLabel = parseInt(document.getElementById("target_label").value); + config.targetChangedLabel = parseInt(document.getElementById("target_changed_label").value); + } + break; + + case ATTACK_TYPES.SAMPLE_POISONING: + config.poisonedSamplePercent = parseFloat(document.getElementById("poisoned-sample-percent").value); + config.poisonedNoisePercent = parseFloat(document.getElementById("poisoned-noise-percent").value); + config.noiseType = document.getElementById("noise_type").value; + config.targeted = document.getElementById("targeted").checked; + break; + + case ATTACK_TYPES.MODEL_POISONING: + config.poisonedNoisePercent = parseFloat(document.getElementById("poisoned-noise-percent").value); + config.noiseType = document.getElementById("noise_type").value; + break; + + case ATTACK_TYPES.SWAPPING_WEIGHTS: + config.layerIdx = parseInt(document.getElementById("layer_idx").value); + break; + + case ATTACK_TYPES.DELAYER: + config.delay = parseInt(document.getElementById("delay").value); + config.targetPercentage = parseFloat(document.getElementById("target-percentage").value); + config.selectionInterval = parseInt(document.getElementById("selection-interval").value); + break; + + case ATTACK_TYPES.FLOODING: + config.floodingFactor = parseInt(document.getElementById("flooding-factor").value); + config.targetPercentage = parseFloat(document.getElementById("target-percentage").value); + config.selectionInterval = parseInt(document.getElementById("selection-interval").value); + break; + } + + return config; + } + + function setAttackConfig(config) { + if (!config) return; + + // Set attack type and update UI + document.getElementById("poisoning-attack-select").value = config.type; + updateAttackUI(config.type); + + // Set common fields + document.getElementById("poisoned-node-percent").value = config.poisonedNodePercent || 0; + document.getElementById("start-attack").value = config.startRound || 1; + document.getElementById("stop-attack").value = config.stopRound || 10; + document.getElementById("attack-interval").value = config.attackInterval || 1; + + // Set attack-specific fields + switch(config.type) { + case ATTACK_TYPES.LABEL_FLIPPING: + document.getElementById("poisoned-sample-percent").value = config.poisonedSamplePercent || 0; + document.getElementById("targeted").checked = config.targeted || false; + if(config.targeted) { + document.getElementById("target_label").value = config.targetLabel || 4; + document.getElementById("target_changed_label").value = config.targetChangedLabel || 7; + } + break; + + case ATTACK_TYPES.SAMPLE_POISONING: + document.getElementById("poisoned-sample-percent").value = config.poisonedSamplePercent || 0; + document.getElementById("poisoned-noise-percent").value = config.poisonedNoisePercent || 0; + document.getElementById("noise_type").value = config.noiseType || "Salt"; + document.getElementById("targeted").checked = config.targeted || false; + break; + + case ATTACK_TYPES.MODEL_POISONING: + document.getElementById("poisoned-noise-percent").value = config.poisonedNoisePercent || 0; + document.getElementById("noise_type").value = config.noiseType || "Salt"; + break; + + case ATTACK_TYPES.SWAPPING_WEIGHTS: + document.getElementById("layer_idx").value = config.layerIdx || 0; + break; + + case ATTACK_TYPES.DELAYER: + document.getElementById("delay").value = config.delay || 10; + document.getElementById("target-percentage").value = config.targetPercentage || 100; + document.getElementById("selection-interval").value = config.selectionInterval || 1; + break; + + case ATTACK_TYPES.FLOODING: + document.getElementById("flooding-factor").value = config.floodingFactor || 100; + document.getElementById("target-percentage").value = config.targetPercentage || 100; + document.getElementById("selection-interval").value = config.selectionInterval || 1; + break; + } + } + + function resetAttackConfig() { + document.getElementById("poisoning-attack-select").value = ATTACK_TYPES.NO_ATTACK; + updateAttackUI(ATTACK_TYPES.NO_ATTACK); + } + + return { + ATTACK_TYPES, + initializeEventListeners, + updateAttackUI, + getAttackConfig, + setAttackConfig, + resetAttackConfig + }; +})(); + +export default AttackManager; \ No newline at end of file diff --git a/nebula/frontend/static/js/deployment/graph-settings.js b/nebula/frontend/static/js/deployment/graph-settings.js new file mode 100644 index 000000000..0c3d93be6 --- /dev/null +++ b/nebula/frontend/static/js/deployment/graph-settings.js @@ -0,0 +1,41 @@ +// Graph Settings Module +const GraphSettings = (function() { + const Settings = { + solidDistance: 50, + Distance: 50 + }; + + function initializeDistanceControls() { + const distanceInput = document.getElementById('distanceInput'); + const distanceValue = document.getElementById('distanceValue'); + + distanceInput.addEventListener('input', function() { + distanceValue.value = distanceInput.value; + Settings.Distance = distanceInput.value; + updateLinkDistance(); + }); + + distanceValue.addEventListener('input', function() { + distanceInput.value = distanceValue.value; + Settings.Distance = distanceValue.value; + updateLinkDistance(); + }); + } + + function updateLinkDistance() { + const Graph = window.TopologyManager.getGraph(); + if (Graph) { + Graph.d3Force('link') + .distance(link => link.color ? Settings.solidDistance : Settings.Distance); + Graph.numDimensions(3); // Re-heat simulation + } + } + + return { + initializeDistanceControls, + updateLinkDistance, + getSettings: () => Settings + }; +})(); + +export default GraphSettings; \ No newline at end of file diff --git a/nebula/frontend/static/js/deployment/help-content.js b/nebula/frontend/static/js/deployment/help-content.js new file mode 100644 index 000000000..afd53c50e --- /dev/null +++ b/nebula/frontend/static/js/deployment/help-content.js @@ -0,0 +1,177 @@ +// Help Content Module +const HelpContent = (function() { + function initializePopovers() { + 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.', + 'architectureHelpIcon': architecture, + 'topologyCustomIcon': topology.custom, + 'topologyPredefinedIcon': topology.predefined, + 'datasetHelpIcon': dataset, + 'iidHelpIcon': iid, + 'partitionMethodsHelpIcon': partitionMethods, + 'parameterSettingHelpIcon': parameterSetting, + 'modelHelpIcon': model, + 'maliciousHelpIcon': malicious + }; + + Object.entries(tooltipElements).forEach(([id, content]) => { + const element = document.getElementById(id); + if (element) { + new bootstrap.Tooltip(element, { + title: content, + html: true, + placement: 'right' + }); + } + }); + } + + const topology = { + custom: `Initial reputation value for all participants
+Use dynamic or static weighting factor for reputation
+ID: ${node.id} | Role: ${node.role} | ${node.malicious ? 'Malicious' : 'Honest'}
`) + .onNodeRightClick(handleNodeRightClick) + .onNodeClick(handleNodeClick) + .onBackgroundClick(handleBackgroundClick) + .onLinkClick(handleLinkClick) + .linkColor(link => link.color || '#999') + .linkWidth(2) + .linkOpacity(0.6) + .linkDirectionalParticles(2) + .linkDirectionalParticleWidth(2) + .linkDirectionalParticleSpeed(0.005) + .linkCurvature(0.25) + .linkDirectionalParticleResolution(2) + .linkDirectionalParticleColor(() => '#ff0000'); + } + + // Update neighbors + updateNeighbors(); + // Emit event when graph data changes + emitGraphDataUpdated(); + } + + function updateGraphData(newData) { + gData = newData; + Graph.graphData(gData); + emitGraphDataUpdated(); + } + + function emitGraphDataUpdated() { + document.dispatchEvent(new CustomEvent('graphDataUpdated')); + } + + function handleNodeRightClick(node, event) { + const dropdown = document.getElementById("node-dropdown"); + dropdown.innerHTML = ""; + dropdown.style.display = "block"; + dropdown.style.left = event.clientX + "px"; + dropdown.style.top = event.clientY + "px"; + dropdown.style.position = "absolute"; + dropdown.style.zIndex = "1000"; + dropdown.style.backgroundColor = "white"; + dropdown.style.border = "1px solid black"; + dropdown.style.padding = "10px"; + dropdown.style.borderRadius = "5px"; + dropdown.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)"; + dropdown.setAttribute("data-id", node.id); + + const title = document.createElement("h5"); + title.innerHTML = "Node " + node.id; + dropdown.appendChild(title); + + createDropdownOptions(dropdown, node); + } + + function createDropdownOptions(dropdown, node) { + const options = [ + { + label: "Add node", + icon: "fa-plus", + handler: () => addNode(node), + condition: () => document.getElementById("federationArchitecture").value !== "CFL" + }, + { + label: "Remove node", + icon: "fa-minus", + handler: () => removeNode(node), + condition: () => document.getElementById("federationArchitecture").value !== "CFL" + }, + { + label: "Change role", + icon: "fa-refresh", + handler: () => changeRole(node), + condition: () => document.getElementById("federationArchitecture").value !== "CFL" + }, + { + label: "Change malicious", + icon: "fa-exclamation-triangle", + handler: () => changeMalicious(node), + condition: () => true + }, + { + label: "Change proxy", + icon: "fa-exchange", + handler: () => changeProxy(node), + condition: () => document.getElementById("federationArchitecture").value !== "CFL" + } + ]; + + options.forEach(option => { + if (option.condition()) { + const element = createDropdownElement(option.label, option.icon, option.handler); + dropdown.appendChild(element); + } + }); + } + + function createDropdownElement(label, icon, handler) { + const element = document.createElement("a"); + element.innerHTML = ` ${label}`; + element.style.display = "block"; + element.style.cursor = "pointer"; + element.style.padding = "5px"; + element.style.borderRadius = "5px"; + element.style.marginBottom = "5px"; + element.classList.add("dropdown-item"); + element.addEventListener("click", handler); + return element; + } + + function handleNodeClick(node) { + if (!selectedNodes.has(node)) { + selectedNodes.add(node); + } else { + selectedNodes.delete(node); + } + + // Force graph update to show color change + Graph.nodeThreeObject(node => createNodeObject(node)); + + if (selectedNodes.size === 2) { + const [a, b] = selectedNodes; + if (document.getElementById("federationArchitecture").value !== "CFL") { + const link = { source: a, target: b }; + a.neighbors.push(b.id); + b.neighbors.push(a.id); + gData.links.push(link); + } + selectedNodes.clear(); + // Force another update after clearing selection + Graph.nodeThreeObject(node => createNodeObject(node)); + } + updateGraph(); + } + + function handleLinkClick(link) { + if (document.getElementById("federationArchitecture").value === "CFL") { + return; + } + + // Find and remove both directional links + const source = typeof link.source === 'object' ? link.source.id : link.source; + const target = typeof link.target === 'object' ? link.target.id : link.target; + + gData.links = gData.links.filter(l => { + const lSource = typeof l.source === 'object' ? l.source.id : l.source; + const lTarget = typeof l.target === 'object' ? l.target.id : l.target; + return !((lSource === source && lTarget === target) || (lSource === target && lTarget === source)); + }); + + // Remove from neighbors + gData.nodes[source].neighbors = gData.nodes[source].neighbors.filter(id => id !== target); + gData.nodes[target].neighbors = gData.nodes[target].neighbors.filter(id => id !== source); + + updateGraph(); + } + + function addNode(sourceNode) { + document.getElementById("custom-topology-btn").checked = true; + document.getElementById("predefined-topology").style.display = "none"; + + const newNode = { + id: gData.nodes.length, + ip: "127.0.0.1", + port: "45000", + role: 'aggregator', + malicious: false, + proxy: false, + start: false, + neighbors: [sourceNode.id], + links: [] + }; + + sourceNode.neighbors.push(newNode.id); + gData.nodes.push(newNode); + gData.links.push({ source: newNode.id, target: sourceNode.id }); + updateGraph(); + } + + function removeNode(node) { + if (gData.nodes.length <= 1) return; + + document.getElementById("custom-topology-btn").checked = true; + document.getElementById("predefined-topology").style.display = "none"; + + // Remove links connected to this node + gData.links = gData.links.filter(l => + l.source.id !== node.id && l.target.id !== node.id + ); + + // Remove node and update IDs + gData.nodes = gData.nodes.filter(n => n.id !== node.id); + gData.nodes.forEach((n, idx) => { + n.id = idx; + n.neighbors = n.neighbors.filter(id => id !== node.id) + .map(id => id > node.id ? id - 1 : id); + }); + + updateGraph(); + } + + function changeRole(node) { + node.role = node.role === 'trainer' ? 'aggregator' : 'trainer'; + updateGraph(); + } + + function changeMalicious(node) { + document.getElementById("malicious-nodes-select").value = "Manual"; + document.getElementById("malicious-nodes-select").dispatchEvent(new Event('change')); + node.malicious = !node.malicious; + // Force complete graph update + if (Graph) { + Graph.nodeThreeObject(node => createNodeObject(node)); + Graph.graphData(gData); + } + updateGraph(); + } + + function changeProxy(node) { + node.proxy = !node.proxy; + // Force complete graph update + if (Graph) { + Graph.nodeThreeObject(node => createNodeObject(node)); + Graph.graphData(gData); + } + updateGraph(); + } + + function createNodeObject(node) { + let geometry; + let main_color; + + if (node.malicious) { + geometry = new THREE.TorusGeometry(5, 2, 16, 100); + main_color = "#000000"; + } else { + switch (node.role) { + case 'aggregator': + geometry = new THREE.SphereGeometry(5); + main_color = "#d95f02"; + break; + case 'trainer': + geometry = new THREE.ConeGeometry(5, 12); + main_color = "#7570b3"; + break; + case 'server': + geometry = new THREE.BoxGeometry(10, 10, 10); + main_color = "#1b9e77"; + break; + default: + break; + } + } + + const isSelected = selectedNodes.has(node); + const color = isSelected ? '#ff0000' : main_color; + + const mesh = new THREE.Mesh( + geometry, + new THREE.MeshLambertMaterial({ + color: color, + transparent: false, + opacity: 0.75 + }) + ); + + if (node.proxy) { + // Add proxy indicator + const sprite = createProxySprite(); + mesh.add(sprite); + } + + return mesh; + } + + function createProxySprite() { + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + context.font = '80px Arial'; + context.fillText('PROXY', 0, 70); + + const texture = new THREE.CanvasTexture(canvas); + const spriteMaterial = new THREE.SpriteMaterial({ map: texture }); + const sprite = new THREE.Sprite(spriteMaterial); + sprite.scale.set(10, 10 * 0.7, 5); + sprite.position.set(0, 5, 0); + + return sprite; + } + + function updateGraph() { + gDataUpdate(); + if (Graph) { + Graph.graphData(gData); + // Update link visualization + Graph.linkColor(link => link.color || '#999') + .linkWidth(2) + .linkOpacity(0.6) + .linkDirectionalParticles(2) + .linkDirectionalParticleWidth(3) + .linkDirectionalParticleSpeed(0.01) + .linkCurvature(0.25) + .linkDirectionalParticleResolution(2) + .linkDirectionalParticleColor(() => '#ff0000'); + } + } + + function gDataUpdate() { + // Remove duplicated links + removeDuplicateLinks(); + // Update neighbors + updateNeighbors(); + // Update IPs and ports + updateIPsAndPorts(); + } + + function removeDuplicateLinks() { + for (let i = 0; i < gData.links.length; i++) { + for (let j = i + 1; j < gData.links.length; j++) { + if ((gData.links[i].source === gData.links[j].source && gData.links[i].target === gData.links[j].target) || + (gData.links[i].source === gData.links[j].target && gData.links[i].target === gData.links[j].source)) { + gData.links.splice(j, 1); + } + } + } + } + + function updateNeighbors() { + gData.links.forEach(link => { + for (let node of gData.nodes) { + if (node.id === link.source) { + node.neighbors.push(link.target); + } + if (node.id === link.target) { + node.neighbors.push(link.source); + } + } + }); + + // Clean up neighbors + for (let node of gData.nodes) { + node.neighbors = [...new Set(node.neighbors)].filter(id => id !== node.id); + } + } + + function updateIPsAndPorts() { + const isProcess = document.getElementById("process-radio").checked; + const baseIP = "192.168.50"; + + gData.nodes.forEach((node, index) => { + node.ip = isProcess ? "127.0.0.1" : `${baseIP}.${index + 2}`; + node.port = (45001 + index).toString(); + }); + } + + function getMatrix() { + const matrix = Array(gData.nodes.length).fill().map(() => Array(gData.nodes.length).fill(0)); + + gData.links.forEach(link => { + const source = typeof link.source === 'object' ? link.source.id : link.source; + const target = typeof link.target === 'object' ? link.target.id : link.target; + matrix[source][target] = 1; + matrix[target][source] = 1; + }); + + // Ensure diagonal is 0 + for (let i = 0; i < matrix.length; i++) { + matrix[i][i] = 0; + } + + return matrix; + } + + function handleBackgroundClick() { + // Clear selected nodes + selectedNodes.clear(); + // Hide node dropdown if visible + const dropdown = document.getElementById("node-dropdown"); + if (dropdown) { + dropdown.style.display = "none"; + } + // Update graph to reflect changes + updateGraph(); + } + + function assignRolesByFederationArchitecture() { + const federationType = document.getElementById("federationArchitecture").value; + const nodes = gData.nodes; + + if (nodes.length === 0) return; + + switch (federationType) { + case "CFL": + // First node as server, rest as trainers + nodes[0].role = "server"; + for (let i = 1; i < nodes.length; i++) { + nodes[i].role = "trainer"; + } + break; + + case "SDFL": + // All as trainers except one random node as aggregator + const randomIndex = Math.floor(Math.random() * nodes.length); + for (let i = 0; i < nodes.length; i++) { + nodes[i].role = i === randomIndex ? "aggregator" : "trainer"; + } + break; + + case "DFL": + // All as aggregators + for (let i = 0; i < nodes.length; i++) { + nodes[i].role = "aggregator"; + } + break; + } + + // Force complete graph update + if (Graph) { + Graph.nodeThreeObject(node => createNodeObject(node)); + Graph.graphData(gData); + } + updateGraph(); + } + + // Add event listener for federation architecture changes + document.getElementById("federationArchitecture").addEventListener("change", function() { + assignRolesByFederationArchitecture(); + }); + + return { + initializeGraph, + updateGraphData, + getGraph: () => Graph, + getData: () => gData, + setData: (data) => { + // Ensure data has the required structure + if (!data || !data.nodes || !data.links) { + // If data is invalid, generate a new predefined topology + generatePredefinedTopology(); + return; + } + + // Ensure each node has the required properties + data.nodes = data.nodes.map(node => ({ + id: node.id, + role: node.role || 'trainer', + malicious: node.malicious || false, + proxy: node.proxy || false, + neighbors: node.neighbors || [], + links: node.links || [] + })); + + // Ensure each link has the required properties + data.links = data.links.map(link => ({ + source: link.source, + target: link.target + })); + + gData = data; + updateGraph(); + }, + getMatrix, + generatePredefinedTopology, + updateGraph + }; +})(); + +export default TopologyManager; \ No newline at end of file diff --git a/nebula/frontend/static/js/deployment/ui-controls.js b/nebula/frontend/static/js/deployment/ui-controls.js new file mode 100644 index 000000000..c9db4f2f4 --- /dev/null +++ b/nebula/frontend/static/js/deployment/ui-controls.js @@ -0,0 +1,627 @@ +// UI Controls Module +const UIControls = (function() { + function initializeUIControls() { + setupModeButton(); + setupPartitionControls(); + setupMethodTip(); + setupReputationControls(); + setupActionButtons(); + setupDeploymentButtons(); + setupParticipantDisplay(); + setupParticipantModal(); + setupConfigButtons(); + // Initialize help icons + window.HelpContent.initializePopovers(); + } + + function setupModeButton() { + const modeBtn = document.getElementById('mode-btn'); + const expertContainer = document.getElementById('expert-container'); + const loggingLevel = document.getElementById('loggingLevel'); + + if (modeBtn) { + modeBtn.addEventListener('click', function() { + const isAdvancedMode = modeBtn.innerHTML.trim() === "Advanced mode"; + + if (isAdvancedMode) { + // Switch to advanced mode + modeBtn.innerHTML = "User mode"; + modeBtn.classList.remove("btn-dark"); + modeBtn.classList.add("btn-light"); + expertContainer.style.display = "block"; + expertContainer.style.visibility = "visible"; + expertContainer.style.opacity = "1"; + expertContainer.style.transition = "all 0.5s ease-in-out"; + loggingLevel.value = "true"; + } else { + // Switch back to user mode + resetModeBtn(); + } + }); + } + } + + function resetModeBtn() { + const modeBtn = document.getElementById('mode-btn'); + const expertContainer = document.getElementById('expert-container'); + const loggingLevel = document.getElementById('loggingLevel'); + + modeBtn.innerHTML = "Advanced mode"; + modeBtn.classList.remove("btn-light"); + modeBtn.classList.add("btn-dark"); + expertContainer.style.display = "none"; + expertContainer.style.visibility = "hidden"; + expertContainer.style.opacity = "0"; + expertContainer.style.transition = "all 0.5s ease-in-out"; + loggingLevel.value = "false"; + } + + function setupPartitionControls() { + const iidSelect = document.getElementById("iidSelect"); + const partitionSelect = document.getElementById("partitionSelect"); + const partitionBlock = document.getElementById("partitionBlock"); + const partitionParameter = document.getElementById("partitionParameter"); + + iidSelect.addEventListener("change", function() { + if (iidSelect.value === "false") { + // Set up for non-IID + partitionSelect.options[0].selected = true; + partitionSelect.options[2].selected = false; + partitionSelect.options[0].disabled = false; + partitionSelect.options[1].disabled = false; + partitionSelect.options[2].disabled = true; + partitionSelect.options[3].disabled = true; + + partitionSelect.options[0].style.display = "block"; + partitionSelect.options[1].style.display = "block"; + partitionSelect.options[2].style.display = "none"; + partitionSelect.options[3].style.display = "none"; + partitionBlock.style.display = "block"; + } else { + // Set up for IID + partitionSelect.options[0].selected = false; + partitionSelect.options[2].selected = true; + partitionSelect.options[0].disabled = true; + partitionSelect.options[1].disabled = true; + partitionSelect.options[2].disabled = false; + partitionSelect.options[3].disabled = false; + + partitionSelect.options[0].style.display = "none"; + partitionSelect.options[1].style.display = "none"; + partitionSelect.options[2].style.display = "block"; + partitionSelect.options[3].style.display = "block"; + partitionBlock.style.display = "none"; + } + }); + + partitionSelect.addEventListener("change", function() { + switch(partitionSelect.value) { + case "balancediid": + partitionBlock.style.display = "none"; + partitionParameter.value = "0.0"; + break; + case "unbalancediid": + partitionBlock.style.display = "block"; + partitionParameter.value = "2"; + partitionParameter.step = "0.1"; + partitionParameter.min = "1"; + break; + case "dirichlet": + partitionBlock.style.display = "block"; + partitionParameter.value = "0.5"; + partitionParameter.step = "0.1"; + partitionParameter.min = "0.1"; + break; + case "percentage": + partitionBlock.style.display = "block"; + partitionParameter.value = "50"; + partitionParameter.step = "1"; + partitionParameter.min = "10"; + partitionParameter.max = "100"; + break; + } + }); + } + + function setupMethodTip() { + const methodtip = document.getElementById('methodtip'); + const methodtipImage = document.getElementById('methodtipImage'); + const partitionSelect = document.getElementById('partitionSelect'); + + methodtip.addEventListener('mouseover', function() { + const imageMap = { + "dirichlet": "dirichlet_noniid.png", + "percent": "percentage.png", + "balancediid": "balancediid.png", + "unbalancediid": "unbalanceiid.png" + }; + + const imageName = imageMap[partitionSelect.value]; + if (imageName) { + methodtipImage.src = `/static/images/${imageName}`; + methodtipImage.style.display = "block"; + } + }); + + methodtip.addEventListener('mouseout', function() { + methodtipImage.style.display = "none"; + }); + } + + function setupReputationControls() { + const reputationSwitch = document.getElementById("reputationSwitch"); + const initialReputation = document.getElementById("initial-reputation"); + const weightingFactor = document.getElementById("weighting-factor"); + const weightInputs = document.querySelectorAll(".weight-input"); + + reputationSwitch.addEventListener("change", function() { + const elements = ["reputation-metrics", "reputation-settings", "weighting-settings"]; + elements.forEach(id => { + document.getElementById(id).style.display = this.checked ? "block" : "none"; + }); + }); + + initialReputation.addEventListener("blur", function() { + const min = parseFloat(this.min); + const max = parseFloat(this.max); + const value = parseFloat(this.value); + + if (value < min) this.value = min; + else if (value > max) this.value = max; + }); + + weightingFactor.addEventListener("change", function() { + const showWeights = this.value === "static"; + weightInputs.forEach(input => { + input.style.display = showWeights ? "inline-block" : "none"; + }); + }); + + weightInputs.forEach(input => { + input.addEventListener("input", validateWeights); + }); + } + + function validateWeights() { + let totalWeight = 0; + document.querySelectorAll(".weight-input").forEach(input => { + const checkbox = input.previousElementSibling.previousElementSibling; + if (checkbox.checked && input.style.display !== "none" && input.value) { + totalWeight += parseFloat(input.value); + } + }); + document.getElementById("weight-warning").style.display = totalWeight > 1 ? "block" : "none"; + } + + function setupActionButtons() { + // Add button + const addBtn = document.getElementById('add-btn'); + if (addBtn) { + addBtn.addEventListener('click', function() { + window.ScenarioManager.saveScenario(); + updateButtonVisibility(); + }); + } + + // Delete button + const delBtn = document.getElementById('del-btn'); + if (delBtn) { + delBtn.addEventListener('click', function() { + window.ScenarioManager.deleteScenario(); + if (window.ScenarioManager.getScenariosList().length < 1) { + window.ScenarioManager.clearFields(); + window.ScenarioManager.updateScenariosPosition(true); + updateButtonVisibility(true); + } else { + window.ScenarioManager.updateScenariosPosition(); + updateButtonVisibility(); + } + }); + } + + // Previous button + const prevBtn = document.getElementById('prev-btn'); + if (prevBtn) { + prevBtn.addEventListener('click', function() { + window.ScenarioManager.replaceScenario(); + window.ScenarioManager.setActualScenario(window.ScenarioManager.getActualScenario() - 1); + window.ScenarioManager.updateScenariosPosition(); + updateButtonVisibility(); + }); + } + + // Next button + const nextBtn = document.getElementById('next-btn'); + if (nextBtn) { + nextBtn.addEventListener('click', function() { + window.ScenarioManager.replaceScenario(); + window.ScenarioManager.setActualScenario(window.ScenarioManager.getActualScenario() + 1); + window.ScenarioManager.updateScenariosPosition(); + updateButtonVisibility(); + }); + } + } + + function updateButtonVisibility(isEmptyScenario = false) { + const prevBtn = document.getElementById("prev-btn"); + const nextBtn = document.getElementById("next-btn"); + const addBtn = document.getElementById("add-btn"); + const delBtn = document.getElementById("del-btn"); + const runBtn = document.getElementById("run-btn"); + + if (isEmptyScenario) { + prevBtn.style.display = "none"; + nextBtn.style.display = "none"; + delBtn.style.display = "none"; + runBtn.disabled = true; + addBtn.style.display = "inline-block"; + return; + } + + const scenarioCount = window.ScenarioManager.getScenariosList().length; + const currentScenario = window.ScenarioManager.getActualScenario(); + + prevBtn.style.display = currentScenario > 0 ? "inline-block" : "none"; + nextBtn.style.display = currentScenario < scenarioCount - 1 ? "inline-block" : "none"; + addBtn.style.display = currentScenario === scenarioCount - 1 ? "inline-block" : "none"; + delBtn.style.display = "inline-block"; + runBtn.disabled = false; + } + + function setupDeploymentButtons() { + const runBtn = document.getElementById('run-btn'); + if (runBtn) { + runBtn.addEventListener('click', handleDeployment); + } + } + + async function handleDeployment() { + const confirmModal = document.getElementById('confirm-modal'); + const confirmModalBody = document.getElementById('confirm-modal-body'); + const yesButton = document.getElementById("yes-button"); + + if (!document.querySelector(".participant-started")) { + confirmModalBody.innerHTML = 'Please select one "start" participant for the scenario'; + yesButton.disabled = true; + const modal = new bootstrap.Modal(confirmModal); + modal.show(); + return; + } + + const deploymentOption = document.querySelector('input[name="deploymentRadioOptions"]:checked'); + confirmModalBody.innerHTML = `Are you sure you want to run the scenario? +The scenario will be deployed using the selected deployment option: ${deploymentOption.value}
+Warning: you will stop the running scenario and start a new one
`; + yesButton.disabled = false; + + const modal = new bootstrap.Modal(confirmModal); + modal.show(); + + yesButton.onclick = async () => { + // If no scenarios exist, save the current one first + if (window.ScenarioManager.getScenariosList().length < 1) { + window.ScenarioManager.saveScenario(); + } else { + window.ScenarioManager.replaceScenario(); + } + + // Ensure all scenarios have a title + window.ScenarioManager.getScenariosList().forEach((scenario, index) => { + if (!scenario.scenario_title) { + scenario.scenario_title = "empty"; + } + if (!scenario.scenario_description) { + scenario.scenario_description = "empty"; + } + }); + + modal.hide(); + document.querySelector(".overlay").style.display = "block"; + document.getElementById("spinner").style.display = "block"; + + try { + const response = await fetch("/platform/dashboard/deployment/run", { + method: "POST", + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(window.ScenarioManager.getScenariosList()) + }); + + if (response.redirected) { + window.location.href = response.url; + } else if (!response.ok) { + handleDeploymentError(response.status); + } + } catch (error) { + console.error('Error:', error); + hideLoadingIndicators(); + handleDeploymentError(500, error); + } finally { + hideLoadingIndicators(); + } + }; + } + + function handleDeploymentError(status, error = null) { + hideLoadingIndicators(); + let errorMessage; + + switch(status) { + case 401: + errorMessage = "You are not authorized to run a scenario. Please log in."; + break; + case 503: + errorMessage = "Not enough resources to run a scenario. Please try again later."; + break; + default: + errorMessage = "An unexpected error occurred. See console for more details."; + } + if (error) { + console.error('Error:', error); + } + showErrorModal(errorMessage); + } + + function showErrorModal(message) { + const infoModal = document.getElementById('info-modal'); + const infoModalBody = document.getElementById('info-modal-body'); + infoModalBody.innerHTML = message; + const modal = new bootstrap.Modal(infoModal); + + // 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 = ''; + }); + + modal.show(); + } + + function hideLoadingIndicators() { + document.querySelector(".overlay").style.display = "none"; + document.getElementById("spinner").style.display = "none"; + } + + function setupParticipantDisplay() { + // Initial update of participants + updateParticipantDisplay(); + + // Listen for graph data changes + document.addEventListener('graphDataUpdated', updateParticipantDisplay); + } + + function updateParticipantDisplay() { + const participantItems = document.getElementById("participant-items"); + if (!participantItems) return; + + const graph = window.TopologyManager.getGraph(); + if (!graph) return; + + const nodes = graph.graphData().nodes; + const numberOfNodes = nodes.length; + + // Update the info-participants number + const infoParticipantsNumber = document.getElementById("info-participants-number"); + if (infoParticipantsNumber) { + infoParticipantsNumber.innerHTML = numberOfNodes; + } + + // Clear existing participants + participantItems.innerHTML = ""; + + // Create participant items + nodes.forEach((node, i) => { + const participantItem = createParticipantItem(node, i); + participantItems.appendChild(participantItem); + }); + + // If there is no participant-started, add the class to the first participant + if (document.getElementsByClassName("participant-started").length === 0 && nodes.length > 0) { + const firstStartBtn = document.getElementById("participant-0-start-btn"); + if (firstStartBtn) { + firstStartBtn.classList.add("participant-started"); + firstStartBtn.title = `Participant 0 (start node)`; + nodes[0].start = true; + } + } + } + + function createParticipantItem(node, index) { + const participantItem = document.createElement("div"); + participantItem.classList.add("col-md-2"); + participantItem.classList.add("participant-item"); + + // Create participant image + const participantImg = document.createElement("img"); + participantImg.id = `participant-img-${index}`; + participantImg.setAttribute("data-id", index.toString()); + participantImg.src = "/static/images/device.png"; + participantImg.width = 50; + participantImg.height = 50; + participantImg.style.marginRight = "10px"; + + // Create label + const label = document.createElement("label"); + label.setAttribute("for", `participant-${index}`); + label.setAttribute("data-id", index.toString()); + label.innerHTML = `Participant ${index}`; + label.style.marginRight = "10px"; + + // Create info button + const infoBtn = createInfoButton(node, index); + + // Create start button + const startBtn = createStartButton(node, index); + + // Add all elements to participant item + participantItem.appendChild(participantImg); + participantItem.appendChild(label); + participantItem.appendChild(infoBtn); + participantItem.appendChild(startBtn); + + return participantItem; + } + + function createInfoButton(node, index) { + const infoBtn = document.createElement("button"); + infoBtn.id = `participant-${index}-btn`; + infoBtn.setAttribute("data-id", index.toString()); + infoBtn.type = "button"; + infoBtn.classList.add("btn", "btn-info-participant"); + infoBtn.innerHTML = "Details"; + infoBtn.style.border = "none"; + infoBtn.style.cursor = "pointer"; + + infoBtn.addEventListener("click", () => { + showParticipantDetails(node, index); + }); + + return infoBtn; + } + + function createStartButton(node, index) { + const startBtn = document.createElement("button"); + startBtn.id = `participant-${index}-start-btn`; + startBtn.setAttribute("data-id", index.toString()); + startBtn.type = "button"; + startBtn.classList.add("btn"); + startBtn.innerHTML = "Start"; + startBtn.style.marginLeft = "10px"; + startBtn.style.border = "none"; + startBtn.style.cursor = "pointer"; + + if (node.start) { + startBtn.classList.add("participant-started"); + startBtn.title = `Participant ${index} (start node)`; + } else { + startBtn.classList.add("participant-not-started"); + startBtn.title = `Participant ${index} (not start node)`; + } + + startBtn.addEventListener("click", () => { + handleStartButtonClick(startBtn, node, index); + }); + + return startBtn; + } + + function showParticipantDetails(node, index) { + const modalTitle = document.getElementById("participant-modal-title"); + const modalContent = document.getElementById("participant-modal-content"); + + modalTitle.innerHTML = `Participant ${index}`; + modalContent.innerHTML = ""; + + // Add additional info + modalContent.innerHTML += `Neighbors: ${node.neighbors.length}
+ ID: ${node.id}
+ IP: ${node.ipport}
+ Role: ${node.role}
+
IP: ${ip}
+Location: ${Number(lat).toFixed(4)}, ${Number(lng).toFixed(4)}
+ ${neighborIPs.length > 0 ? `Neighbors: ${neighborIPs.length}
` : ''} +Distance: ${distance ? distance + ' m' : 'Calculating...'}
+Status: Online
+