Merge pull request #2 from OpenMined/install_button

Dashboard button to install fl_client
OpenMined · Nov 18, 2024 · ed6e0c5 · ed6e0c5
2 parents f3f95a4 + 07caf63
commit ed6e0c5
Show file tree

Hide file tree

Showing 4 changed files with 580 additions and 14 deletions.
diff --git a/dashboard/index.html b/dashboard/index.html
@@ -95,26 +95,125 @@
             margin-top: 10px;
         }
 
-        .install-button {
+        /* Header Styles */
+        .app-header {
+            background: white;
+            border-bottom: 1px solid var(--gray-200);
+            padding: 1rem 0;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+
+        .header-content {
+            max-width: 1280px;
+            margin: 0 auto;
+            padding: 0 2rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .app-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: var(--gray-900);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .app-title::before {
+            content: "";
             display: inline-block;
-            margin: 0 10px 20px 10px;
-            padding: 10px 20px;
-            font-size: 1em;
-            color: white;
-            background-color: #4a90e2;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
+            width: 8px;
+            height: 8px;
+            background: var(--primary);
+            border-radius: 50%;
         }
+
+        /* Server Settings */
+        .server-input {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            background: white;
+            padding: 0.75rem 1rem;
+            border-radius: var(--radius-md);
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+        }
+
+        .server-input label {
+            color: var(--gray-700);
+            font-weight: 500;
+        }
+
+        .server-input input {
+            width: 80px;
+            padding: 0.375rem 0.5rem;
+            border: 1px solid var(--gray-300);
+            border-radius: var(--radius-sm);
+            text-align: center;
+            font-size: 0.875rem;
+        }
+
+        .server-input input:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        /* Status indicators */
+        #server-status {
+            font-size: 1rem;
+        }
+
+        #server-status.success {
+            color: var(--success);
+        }
+
+        #server-status.error {
+            color: var(--error);
+        }
+
+        #metadata-datasite {
+            padding: 0.25rem 0.75rem;
+            background: var(--gray-100);
+            border-radius: var(--radius-sm);
+            font-size: 0.875rem;
+            color: var(--gray-700);
+        }
+
     </style>
 </head>
 
 <body>
-    <div class="container">
-        <div class="header">
-            <h1>Training Results Dashboard</h1>
-            <button class="install-button" onclick="installFLClientApp()">Install FL Client App</button>
-        </div>
+        <header class="app-header">
+            <div class="header-content">
+            <h1 class="app-title">Federated Training Results</h1>
+            <div class="server-input">
+                <script src="syftbox-sdk.js"></script>
+                <div id="syftbox-api-badge"></div>
+                <script>
+                    document.addEventListener("DOMContentLoaded", async () => {
+                        await APIBadge.initialized;
+                        APIBadge.show("https://github.com/openmined/fl_client");
+                    });
+                </script>
+                <label for="server-port">localhost:</label>
+                <input
+                    type="number"
+                    id="server-port"
+                    value="8080"
+                    min="1"
+                    max="65535"
+                    onchange="savePort()"
+                />
+                <span id="server-status" class="status-icon">⏳</span>
+                <span id="metadata-datasite"></span>
+            </div>
+            </div>
+        </header>
 
         <div class="section-title">Participants Information</div>
         <div class="table-container">
@@ -293,6 +392,9 @@ <h1>Training Results Dashboard</h1>
         // Start the application
         initDashboard();
     </script>
+
+    <script src="syftbox-sdk.js"></script>
+    <script src="index.js"></script>
 </body>
 
 </html>
diff --git a/dashboard/index.js b/dashboard/index.js
@@ -0,0 +1,81 @@
+// Add this near the top of the file with other global variables
+let serverPort = 8080; // Default port
+let metadataDatasite = ""; // Placeholder for the datasite
+let logIntervals = {};
+let currentSortColumn = "status";
+let currentSortDirection = "desc";
+let completedProjectLogs = new Set();
+
+
+
+// Function to save the port to localStorage
+function savePort() {
+  try {
+    const portInput = document.getElementById("server-port").value;
+    localStorage.setItem("serverPort", portInput);
+    serverPort = portInput;
+    checkServerStatus();
+    fetchMetadata();
+  } catch (error) {
+    console.error("Error accessing localStorage:", error);
+  }
+}
+
+// Retrieve saved port from localStorage on page load
+document.addEventListener("DOMContentLoaded", () => {
+  try {
+    const savedPort = localStorage.getItem("serverPort");
+    if (savedPort) {
+      serverPort = savedPort;
+      document.getElementById("server-port").value = savedPort;
+    }
+  } catch (error) {
+    console.error("Error accessing localStorage:", error);
+  }
+
+  fetchMetadata();
+  checkServerStatus();
+
+});
+
+document.getElementById("server-port").addEventListener("input", (event) => {
+  serverPort = event.target.value;
+  checkServerStatus();
+  fetchMetadata();
+});
+
+async function fetchMetadata() {
+  try {
+    const response = await fetch(`http://localhost:${serverPort}/metadata`);
+    if (response.ok) {
+      const data = await response.json();
+      metadataDatasite = data.datasite || "";
+      console.log("Metadata datasite:", metadataDatasite);
+      document.getElementById("metadata-datasite").textContent =
+        metadataDatasite;
+    }
+  } catch (error) {
+    console.error("Error fetching metadata:", error);
+    document.getElementById("metadata-datasite").textContent = "";
+  }
+}
+
+
+async function checkServerStatus() {
+  const serverStatus = document.getElementById("server-status");
+  try {
+    const response = await fetch(`http://localhost:${serverPort}/apps/`);
+    if (response.ok) {
+      serverStatus.textContent = "✔️";
+      serverStatus.classList.remove("error");
+      serverStatus.classList.add("success");
+    } else {
+      throw new Error("Non-200 response");
+    }
+  } catch {
+    serverStatus.textContent = "❌";
+    serverStatus.classList.remove("success");
+    serverStatus.classList.add("error");
+  }
+}
+