feat(dashboard): show scenario configuration in config-btn

Author: FerTV

nebula/frontend/app.py

@@ -284,6 +284,26 @@ async def get_notes_for_scenario(scenario_name: str):
         return JSONResponse({"status": "error", "message": "Notes not found for the specified scenario"})
 
 
+@app.get("/nebula/dashboard/{scenario_name}/config")
+async def get_config_for_scenario(scenario_name: str):
+    json_path = os.path.join(os.environ.get("NEBULA_CONFIG_DIR"), scenario_name, "scenario.json")
+    logging.info(f"[FER] json_path: {json_path}")
+
+    try:
+        with open(json_path) as file:
+            scenarios_data = json.load(file)
+
+        if scenarios_data:
+            return JSONResponse({"status": "success", "config": scenarios_data})
+        else:
+            return JSONResponse({"status": "error", "message": "Configuration not found for the specified scenario"})
+
+    except FileNotFoundError:
+        return JSONResponse({"status": "error", "message": "scenario.json file not found"})
+    except json.JSONDecodeError:
+        return JSONResponse({"status": "error", "message": "Error decoding JSON file"})
+
+
 @app.post("/nebula/login")
 async def nebula_login(
     request: Request,

nebula/frontend/templates/dashboard.html

@@ -147,6 +147,8 @@ <h3>Scenarios in the database</h3>
                                 class="label btn btn-dark">Real-time metrics</a>
                             <a id="note-btn-{{ name }}" data-scenario-name="{{ name }}" class="label btn btn-dark"><i
                                     class="fa fa-sticky-note" style="color: white;"></i></a>
+                            <a id="config-btn-{{ name }}" data-scenario-name="{{ name }}" class="label btn btn-dark"><i
+                                class="fa fa-sliders" style="color: white;"></i></a>
                             {% if status == "running" %}
                             <a href="{{ url_for('nebula_stop_scenario', scenario_name=name, stop_all=False) }}"
                                 class="label btn btn-danger">Stop scenario</a>
@@ -169,6 +171,12 @@ <h3>Scenarios in the database</h3>
                                 class="btn btn-dark mt-2 save-note-btn" style="float: right;">Save</button>
                         </td>
                     </tr>
+                    <tr id="config-row-{{ name }}" class="config-row" style="display: none;">
+                        <td colspan="4">
+                            <textarea id="config-text-{{ name }}" class="form-control" rows="20"
+                                style="font-size: small; width: 100%;"></textarea>
+                        </td>
+                    </tr>
                     {% endfor %}
                 </table>
             </div>
@@ -238,6 +246,12 @@ <h3>Scenarios in the database</h3>
                 saveNotes(this.dataset.scenarioName);
             });
         });
+
+        document.querySelectorAll('[id^=config-btn]').forEach(button => {
+            button.addEventListener('click', function () {
+                toggleConfigRow(this.dataset.scenarioName);
+            });
+        });
     });
 
     async function toggleNotesRow(scenarioName) {
@@ -265,6 +279,31 @@ <h3>Scenarios in the database</h3>
         notesRow.style.display = notesRow.style.display === 'none' ? '' : 'none';
     }
 
+    async function toggleConfigRow(scenarioName) {
+        const configRow = document.getElementById('config-row-' + scenarioName);
+        const configTextElement = document.getElementById('config-text-' + scenarioName);
+
+        if (configRow.style.display === 'none') {
+            try {
+                const response = await fetch(`/nebula/dashboard/${scenarioName}/config`);
+                const data = await response.json();
+
+                console.log("[FER] ", data.config)
+
+                if (data.status === 'success') {
+                    configTextElement.value = JSON.stringify(data.config, null, 2);
+                } else {
+                    configTextElement.value = 'No configuration available.';
+                }
+            } catch (error) {
+                console.error('Error:', error);
+                alert('An error occurred while retrieving the configuration.');
+                return;
+            }
+        }
+        configRow.style.display = configRow.style.display === 'none' ? '' : 'none';
+    }
+
     async function saveNotes(scenarioName) {
         const notesText = document.getElementById('notes-text-' + scenarioName).value;