[Part 2] Display logs for client and server

.github/workflows/static_code_checks.yaml

@@ -62,12 +62,6 @@ jobs:
         uses: pypa/[email protected]
         with:
           virtual-environment: .venv/
-          # Skipping 3 cryptography issues that can't be patched because of FL4Health
           # Skipping 1 cryptography issue that can't be patched because of Flower
-          # Skipping 1 torch issue that can't be ugraded because of torchvision
           ignore-vulns: |
-            GHSA-3ww4-gg4f-jr7f
-            GHSA-9v9h-cgj8-h64p
-            GHSA-6vqw-3v5j-54x4
             GHSA-h4gh-qq45-vh27
-            GHSA-pg7h-5qx3-wjr3

florist/app/assets/css/florist.css

@@ -76,7 +76,7 @@
     background-color: lightgray !important;
 }
 
-.job-expand-button a.btn {
+.job-details-button a.btn {
     padding: 0;
     margin: 0;
 }
@@ -148,3 +148,44 @@
 .job-client-progress .job-progress-bar .progress .progress-bar {
     height: max-content;
 }
+
+.log-viewer.show {
+    display: block;
+    z-index: 10000;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.log-viewer .modal-dialog {
+    max-width: 90%;
+}
+
+.log-viewer .modal-content {
+    height: 100%;
+}
+
+.log-viewer .btn-close {
+    color: black;
+    font-size: 30px;
+    margin-top: -25px;
+}
+
+.log-viewer a.refresh-button,
+.log-viewer a.download-button {
+    cursor: pointer;
+    margin-left: 15px;
+    margin-top: 10px;
+}
+
+.log-viewer .modal-body {
+    white-space: pre;
+    font-family: monospace;
+    font-size: 14px;
+}
+
+.log-viewer .loading-container {
+    height: 100%;
+    width: 100%;
+    display: inline-grid;
+    align-content: center;
+    justify-content: center;
+}

florist/app/assets/js/material-dashboard.js

@@ -617,11 +617,12 @@ const observer = new MutationObserver((mutationList) => {
         if (mutationList[i].type === "childList") {
             for (var j = 0; j < mutationList[i].addedNodes.length; j++) {
                 const addedNode = mutationList[i].addedNodes[j];
-                const inputs = addedNode.querySelectorAll("select");
-                const selects = addedNode.querySelectorAll("input");
-                const btns = addedNode.querySelectorAll(".btn");
-
-                hasTargetElementTypes = inputs.length > 0 || selects.length > 0 || btns.length > 0;
+                if (addedNode.querySelectorAll) {
+                    const inputs = addedNode.querySelectorAll("select");
+                    const selects = addedNode.querySelectorAll("input");
+                    const btns = addedNode.querySelectorAll(".btn");
+                    hasTargetElementTypes = inputs.length > 0 || selects.length > 0 || btns.length > 0;
+                }
             }
         }
     }

florist/app/jobs/details/page.tsx

@@ -6,7 +6,7 @@ import Image from "next/image";
 import { useState } from "react";
 import { ReactElement } from "react/React";
 
-import { useGetJob } from "../hooks";
+import { useGetJob, getServerLogsKey, getClientLogsKey, useSWRWithKey } from "../hooks";
 import { validStatuses, ClientInfo } from "../definitions";
 import loading_gif from "../../assets/img/loading.gif";
 
@@ -113,7 +113,13 @@ export function JobDetailsBody(): ReactElement {
                 </div>
             </div>
 
-            <JobProgressBar metrics={job.server_metrics} totalEpochs={totalEpochs} status={job.status} />
+            <JobProgressBar
+                metrics={job.server_metrics}
+                totalEpochs={totalEpochs}
+                status={job.status}
+                jobId={job._id}
+                clientIndex={null}
+            />
 
             <JobDetailsTable
                 Component={JobDetailsServerConfigTable}
@@ -125,7 +131,7 @@ export function JobDetailsBody(): ReactElement {
                 Component={JobDetailsClientsInfoTable}
                 title="Clients Configuration"
                 data={job.clients_info}
-                properties={{ localEpochs }}
+                properties={{ localEpochs, jobId: job._id }}
             />
         </div>
     );
@@ -177,10 +183,14 @@ export function JobProgressBar({
     metrics,
     totalEpochs,
     status,
+    jobId,
+    clientIndex,
 }: {
     metrics: string;
     totalEpochs: number;
     status: status;
+    jobId: string;
+    clientIndex: number;
 }): ReactElement {
     const [collapsed, setCollapsed] = useState(true);
 
@@ -257,7 +267,7 @@ export function JobProgressBar({
                                 <strong>{Math.floor(progressPercent)}%</strong>
                             </div>
                         </div>
-                        <div className="job-details-toggle col-sm job-expand-button">
+                        <div className="job-details-toggle col-sm job-details-button">
                             <a className="btn btn-link" onClick={() => setCollapsed(!collapsed)}>
                                 {collapsed ? (
                                     <span>
@@ -273,14 +283,28 @@ export function JobProgressBar({
                             </a>
                         </div>
                     </div>
-                    <div className="row pb-2">{!collapsed ? <JobProgressDetails metrics={metricsJson} /> : null}</div>
+                    <div className="row pb-2">
+                        {!collapsed ? (
+                            <JobProgressDetails metrics={metricsJson} jobId={jobId} clientIndex={clientIndex} />
+                        ) : null}
+                    </div>
                 </div>
             </div>
         </div>
     );
 }
 
-export function JobProgressDetails({ metrics }: { metrics: Object }): ReactElement {
+export function JobProgressDetails({
+    metrics,
+    jobId,
+    clientIndex,
+}: {
+    metrics: Object;
+    jobId: string;
+    clientIndex: number;
+}): ReactElement {
+    const [showLogs, setShowLogs] = useState(false);
+
     if (!metrics) {
         return null;
     }
@@ -339,6 +363,26 @@ export function JobProgressDetails({ metrics }: { metrics: Object }): ReactEleme
             {roundMetricsArray.map((roundMetrics, i) => (
                 <JobProgressRound roundMetrics={roundMetrics} key={i} index={i} />
             ))}
+
+            <div className="row">
+                <div className="col-sm-2">
+                    <strong className="text-dark">Logs:</strong>
+                </div>
+                <div className="col-sm job-details-button">
+                    <a className="btn btn-link show-logs-button" onClick={() => setShowLogs(true)}>
+                        Show Logs
+                    </a>
+                </div>
+            </div>
+
+            {showLogs ? (
+                <JobLogsModal
+                    hostType={metrics.host_type}
+                    jobId={jobId}
+                    clientIndex={clientIndex}
+                    setShowLogs={setShowLogs}
+                />
+            ) : null}
         </div>
     );
 }
@@ -356,7 +400,7 @@ export function JobProgressRound({ roundMetrics, index }: { roundMetrics: Object
                 <div className="col-sm-2">
                     <strong className="text-dark">Round {index + 1}</strong>
                 </div>
-                <div className={`job-round-toggle-${index} col-sm job-expand-button`}>
+                <div className={`job-round-toggle-${index} col-sm job-details-button`}>
                     <a className="btn btn-link" onClick={() => setCollapsed(!collapsed)}>
                         {collapsed ? (
                             <span>
@@ -623,6 +667,8 @@ export function JobDetailsClientsInfoTable({
                                         <JobProgressBar
                                             metrics={clientInfo.metrics}
                                             totalEpochs={properties.localEpochs}
+                                            jobId={properties.jobId}
+                                            clientIndex={i}
                                         />
                                     </span>
                                 </div>
@@ -635,6 +681,69 @@ export function JobDetailsClientsInfoTable({
     );
 }
 
+export function JobLogsModal({
+    hostType,
+    jobId,
+    clientIndex,
+    showLogs,
+    setShowLogs,
+}: {
+    type: string;
+    jobId: string;
+    clientIndex: number;
+    setShowLogs: Callable;
+}): ReactElement {
+    let apiKey, fileName;
+    if (hostType === "server") {
+        apiKey = getServerLogsKey(jobId);
+        fileName = "server.log";
+    }
+    if (hostType === "client") {
+        apiKey = getClientLogsKey(jobId, clientIndex);
+        fileName = `client-${clientIndex}.log`;
+    }
+
+    const { data, error, isLoading, isValidating, mutate } = useSWRWithKey(apiKey);
+
+    let dataURL = null;
+    if (data) {
+        dataURL = window.URL.createObjectURL(new Blob([data]));
+    }
+
+    return (
+        <div className="log-viewer modal show" tabIndex="-1">
+            <div className="modal-dialog modal-dialog-scrollable">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <h1 className="modal-title fs-5">Log Viewer</h1>
+                        <a className="refresh-button" onClick={() => mutate(apiKey)}>
+                            <i className="material-icons">refresh</i>
+                        </a>
+                        <a className="download-button" title="Download" href={dataURL} download={fileName}>
+                            <i className="material-icons">download</i>
+                        </a>
+                        <button type="button" className="btn-close" onClick={() => setShowLogs(false)}>
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+
+                    <div className="modal-body">
+                        {isLoading || isValidating ? (
+                            <div className="loading-container">
+                                <Image src={loading_gif} alt="Loading Logs" height={64} width={64} />
+                            </div>
+                        ) : error ? (
+                            "Error loading logs"
+                        ) : (
+                            data
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
 export function getTimeString(timeInMiliseconds: number): string {
     const hours = Math.floor(timeInMiliseconds / 1000 / 60 / 60);
     const minutes = Math.floor((timeInMiliseconds / 1000 / 60 / 60 - hours) * 60);

florist/app/jobs/hooks.tsx

@@ -23,6 +23,18 @@ export function useGetClients() {
     return useSWR("/api/server/clients", fetcher);
 }
 
+export function getServerLogsKey(jobId: string) {
+    return `/api/server/job/get_server_log/${jobId}`;
+}
+
+export function getClientLogsKey(jobId: string, clientIndex: number) {
+    return `/api/server/job/get_client_log/${jobId}/${clientIndex}`;
+}
+
+export function useSWRWithKey(key: string) {
+    return useSWR(key, fetcher);
+}
+
 export const usePost = () => {
     const [error, setError] = useState(null);
     const [isLoading, setIsLoading] = useState(null);