Refs #21906: Show status and results in the Front-end

Signed-off-by: eProsima <jesuspoderoso@eprosima.com>
eProsima · Oct 22, 2024 · 3760a9c · 3760a9c
1 parent 370f6c5
commit 3760a9c
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 1 deletion.
diff --git a/sustainml_modules/sustainml_modules/sustainml-wp4/frontend_node.py b/sustainml_modules/sustainml_modules/sustainml-wp4/frontend_node.py
@@ -237,5 +237,23 @@ def send_pd():
     except Exception as e:
         return jsonify({'error': str(e)}), 500
 
+@app.route('/get_status', methods=['GET'])
+def get_status():
+    try:
+        # pipe the information to the backend
+        response = requests.get('http://127.0.0.1:5001/status')
+        return jsonify(response.json()), 200
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/get_results', methods=['GET'])
+def get_results():
+    try:
+        # pipe the information to the backend
+        response = requests.get('http://127.0.0.1:5001/results')
+        return jsonify(response.json()), 200
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
 if __name__ == '__main__':
     app.run(debug=True)
diff --git a/sustainml_modules/sustainml_modules/sustainml-wp4/index.html b/sustainml_modules/sustainml_modules/sustainml-wp4/index.html
@@ -42,6 +42,18 @@
         <div id="submit-pd" class="hidden">
             <button class="response-button">Submit PD Info</button>
         </div>
+        <div id="node-status" class="hidden">
+            <!-- JSON data will be displayed here -->
+        </div>
+        <div id="refresh-status" class="hidden">
+            <button class="status-button">Refresh Node Status</button>
+        </div>
+        <div id="framework-results" class="hidden">
+            <!-- JSON data will be displayed here -->
+        </div>
+        <div id="refresh-results" class="hidden">
+            <button class="results-button">Refresh Results</button>
+        </div>
     </div>
     <!-- Environment section -->
     <div id="env-section" class="hidden">
@@ -216,8 +228,40 @@ <h2>Environment Information</h2>
             })
             .then(response => response.json())
             .then(data => {
-                // Show results ?
+                // Show results
+                document.getElementById("refresh-status").style.display = 'block';
+                document.getElementById("refresh-results").style.display = 'block';
+                refreshStatusNode();
+                refreshResults();
+            })
+        });
+
+        function refreshStatusNode() {
+            fetch('/get_status', { method: 'GET' })
+            .then(response => response.json())
+            .then(data => {
+                document.getElementById("node-status").style.display = 'block';
+                document.querySelector('#node-status').innerHTML = JSON.stringify(data, null, 6)
+                    .replace(/\n/g, "<br>");
+            })
+        }
+
+        document.getElementById('refresh-status').addEventListener('click', function() {
+            refreshStatusNode();
+        });
+
+        function refreshResults() {
+            fetch('/get_results', { method: 'GET' })
+            .then(response => response.json())
+            .then(data => {
+                document.getElementById("framework-results").style.display = 'block';
+                document.querySelector('#framework-results').innerHTML = JSON.stringify(data, null, 6)
+                    .replace(/\n/g, "<br>");
             })
+        }
+
+        document.getElementById('refresh-results').addEventListener('click', function() {
+            refreshResults();
         });
 
         // Handle the environment submission