UI enhancements and Docker dependency management

docker-compose.yml

@@ -9,7 +9,7 @@ services:
       host:
         ipv4_address: 172.29.0.2
     ports:
-      - "5000:5000"
+      - "5001:5000"
     depends_on:
         - dicomhawk
 

flask_logging_server/Dockerfile

@@ -5,12 +5,15 @@ COPY . .
 
 
 # Set the working directory in the container
-WORKDIR /.
+ WORKDIR /.
+ COPY requirements.txt .
+ RUN pip install --user -r requirements.txt
 
 RUN pip install flask
 
 # Expose the DICOM
 EXPOSE 5000
 
 # Run the app
-CMD ["python","-u", "logserver.py"]
+CMD ["python","-u", "logserver.py"]
+

flask_logging_server/logserver.py

@@ -109,4 +109,17 @@ def handle_exception(e):
     exception_logger.error(f"Unhandled exception: {e}")
     return jsonify({"error": "Internal Server Error"}), 500
 
+
+@app.route('/clear_logs', methods=['POST'])
+def clear_logs():
+    try:
+        with open(log_file_path, 'w') as f:
+            f.write('')
+        with open(simplified_log_file_path, 'w') as f:
+            f.write('')
+        return jsonify({"success": True})
+    except Exception as e:
+        exception_logger.error(f"Error clearing logs: {e}")
+        return jsonify({"success": False, "error": str(e)}), 500
+
 app.run(host='172.29.0.2',debug=True,port=5000)

flask_logging_server/requirements.txt

@@ -0,0 +1,3 @@
+Flask==2.3.2
+pynetdicom==2.0.2
+pydicom==2.4.4

flask_logging_server/static/all_logs.js

@@ -14,3 +14,46 @@ document.addEventListener("DOMContentLoaded", function () {
     // Set interval to fetch logs every 5 seconds
     setInterval(fetchLogs, 5000);
 });
+
+
+document.addEventListener("DOMContentLoaded", function () {
+    const refreshButton = document.getElementById('refresh-logs');
+    const clearButton = document.getElementById('clear-logs');
+
+    // Function to fetch logs
+    function fetchLogs() {
+        fetch('/logs/all')
+            .then(response => response.text())
+            .then(data => {
+                document.getElementById('logs').innerHTML = data;
+            })
+            .catch(error => console.error('Error fetching logs:', error));
+    }
+
+    // Refresh logs
+    if (refreshButton) {
+        refreshButton.addEventListener('click', function () {
+            fetchLogs();
+        });
+    }
+
+    // Clear logs
+    if (clearButton) {
+        clearButton.addEventListener('click', function () {
+            fetch('/clear_logs', { method: 'POST' })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        fetchLogs();
+                    }
+                })
+                .catch(error => console.error('Error clearing logs:', error));
+        });
+    }
+
+    // Fetch logs initially
+    fetchLogs();
+
+    // Set interval to fetch logs every 5 seconds
+    setInterval(fetchLogs, 5000);
+});

flask_logging_server/static/logs.js

@@ -91,3 +91,77 @@ document.addEventListener("DOMContentLoaded", function () {
     // Set interval to fetch logs every 5 seconds
     setInterval(fetchLogs, 5000);
 });
+
+document.addEventListener("DOMContentLoaded", function () {
+    const themeToggle = document.getElementById('theme-toggle');
+
+    if (themeToggle) {
+        // Load saved theme preference
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'dark') {
+            document.body.classList.add('dark-mode');
+            themeToggle.innerHTML = '<span class="icon">☀️</span> Toggle Light Mode';
+        }
+
+        // Add event listener to the button
+        themeToggle.addEventListener('click', function () {
+            document.body.classList.toggle('dark-mode');
+            const isDarkMode = document.body.classList.contains('dark-mode');
+            localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+            themeToggle.innerHTML = isDarkMode ? '<span class="icon">☀️</span> Toggle Light Mode' : '<span class="icon">🌙</span> Toggle Dark Mode';
+        });
+    }
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    // Session ID Search Functionality
+    const searchButton = document.getElementById('search-button');
+    const sessionIdInput = document.getElementById('session-id-search');
+
+    searchButton.addEventListener('click', function() {
+        const searchTerm = sessionIdInput.value.trim().toLowerCase();
+        const rows = document.querySelectorAll("#logs-table tbody tr");
+        let hasMatches = false;
+
+        rows.forEach(row => {
+            const sessionCell = row.querySelector("td:nth-child(1)"); // Adjust index if needed
+            if (sessionCell) {
+                const sessionId = sessionCell.textContent.toLowerCase();
+                if (sessionId.includes(searchTerm)) {
+                    row.style.display = "";
+                    row.classList.add('highlight-match');
+                    hasMatches = true;
+                } else {
+                    row.style.display = "none";
+                    row.classList.remove('highlight-match');
+                }
+            }
+        });
+
+        if (!hasMatches && searchTerm) {
+            showToast('No matching sessions found!', 'warning');
+        }
+    });
+
+    // Clear Search
+    sessionIdInput.addEventListener('input', function(e) {
+        if (e.target.value === '') {
+            document.querySelectorAll("#logs-table tbody tr").forEach(row => {
+                row.style.display = "";
+                row.classList.remove('highlight-match');
+            });
+        }
+    });
+});
+
+// Toast Notification System
+function showToast(message, type = 'info') {
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+    toast.textContent = message;
+
+    document.body.appendChild(toast);
+    setTimeout(() => toast.remove(), 3000);
+}
+
+