From 93ae25648bf9851cad6db561d4d626cdc2a82b2c Mon Sep 17 00:00:00 2001
From: Salah Aldeen Al Saleh <sg.alsaleh@gmail.com>
Date: Tue, 26 Nov 2024 12:13:30 -0800
Subject: [PATCH] fix web lint

---
 web/src/Root.tsx                 |  2 +-
 web/src/components/DebugInfo.jsx | 64 ++++++++++++++++++++++++++------
 2 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/web/src/Root.tsx b/web/src/Root.tsx
index 2bb027d8fb..d2d23d6484 100644
--- a/web/src/Root.tsx
+++ b/web/src/Root.tsx
@@ -31,7 +31,7 @@ import AppLicense from "@components/apps/AppLicense";
 import AppRegistrySettings from "@components/apps/AppRegistrySettings";
 import AppIdentityServiceSettings from "@components/apps/AppIdentityServiceSettings";
 import TroubleshootContainer from "@components/troubleshoot/TroubleshootContainer";
-import DebugInfo from '@components/DebugInfo';
+import DebugInfo from "@components/DebugInfo";
 
 import Footer from "./components/shared/Footer";
 import NavBar from "./components/shared/NavBar";
diff --git a/web/src/components/DebugInfo.jsx b/web/src/components/DebugInfo.jsx
index f4b525aaf7..aa92501641 100644
--- a/web/src/components/DebugInfo.jsx
+++ b/web/src/components/DebugInfo.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import classNames from "classnames";
 import { Utilities } from "@src/utilities/utilities";
 import "@src/scss/components/DebugInfo.scss";
@@ -35,10 +35,12 @@ const DebugInfo = () => {
       clientInfo.lastPingSent.time,
       clientInfo.lastPongRecv.time,
       clientInfo.lastPongRecv.time,
-      clientInfo.lastPingRecv.time
+      clientInfo.lastPingRecv.time,
     ];
-    return timestamps.some(timestamp => new Date() - new Date(timestamp) > 60 * 1000);
-  };
+    return timestamps.some(
+      (timestamp) => new Date() - new Date(timestamp) > 60 * 1000
+    );
+  }
 
   if (loading) {
     return <div className="loading">Loading debug information...</div>;
@@ -50,37 +52,75 @@ const DebugInfo = () => {
 
   return (
     <div className="u-padding--20">
-      <h2 className="u-fontSize--large u-fontWeight--bold card-title u-marginBottom--10">Websocket Clients</h2>
+      <h2 className="u-fontSize--large u-fontWeight--bold card-title u-marginBottom--10">
+        Websocket Clients
+      </h2>
       <div className="flex flexWrap--wrap">
         {Object.entries(debugData.wsClients).map(([nodeName, clientInfo]) => (
-          <div key={nodeName} className="card-bg u-marginBottom--20 u-marginRight--20" style={{ maxWidth: "50%" }}>
+          <div
+            key={nodeName}
+            className="card-bg u-marginBottom--20 u-marginRight--20"
+            style={{ maxWidth: "50%" }}
+          >
             <p className="u-fontSize--normal u-fontWeight--medium u-marginBottom--10 card-title">
-              <span className={classNames("node-status u-marginRight--5", { disconnected: isStale(clientInfo)})}/>
+              <span
+                className={classNames("node-status u-marginRight--5", {
+                  disconnected: isStale(clientInfo),
+                })}
+              />
               {nodeName}
             </p>
             <div className="card-item u-marginTop--5 u-marginBottom--5">
               <p className="u-fontSize--normal u-fontWeight--medium u-textColor--bodyCopy u-padding--5">
-                <strong>Connected At:</strong> {Utilities.dateFormat(clientInfo.connectedAt, "MM/DD/YY @ hh:mm a z")}
+                <strong>Connected At:</strong>{" "}
+                {Utilities.dateFormat(
+                  clientInfo.connectedAt,
+                  "MM/DD/YY @ hh:mm a z"
+                )}
               </p>
             </div>
             <div className="card-item u-marginTop--5 u-marginBottom--5">
               <p className="u-fontSize--normal u-fontWeight--medium u-textColor--bodyCopy u-padding--5">
-                <strong>Last Ping Sent:</strong> {Utilities.dateFormat(clientInfo.lastPingSent.time, "MM/DD/YY @ hh:mm:ss a z")} - (Message: <strong>{clientInfo.lastPingSent.message || "N/A"})</strong>
+                <strong>Last Ping Sent:</strong>{" "}
+                {Utilities.dateFormat(
+                  clientInfo.lastPingSent.time,
+                  "MM/DD/YY @ hh:mm:ss a z"
+                )}{" "}
+                (Message:{" "}
+                <strong>{clientInfo.lastPingSent.message || "N/A"})</strong>
               </p>
             </div>
             <div className="card-item u-marginTop--5 u-marginBottom--5">
               <p className="u-fontSize--normal u-fontWeight--medium u-textColor--bodyCopy u-padding--5">
-                <strong>Last Pong Received:</strong> {Utilities.dateFormat(clientInfo.lastPongRecv.time, "MM/DD/YY @ hh:mm:ss a z")} - (Message: <strong>{clientInfo.lastPongRecv.message || "N/A"})</strong>
+                <strong>Last Pong Received:</strong>{" "}
+                {Utilities.dateFormat(
+                  clientInfo.lastPongRecv.time,
+                  "MM/DD/YY @ hh:mm:ss a z"
+                )}{" "}
+                (Message:{" "}
+                <strong>{clientInfo.lastPongRecv.message || "N/A"})</strong>
               </p>
             </div>
             <div className="card-item u-marginTop--5 u-marginBottom--5">
               <p className="u-fontSize--normal u-fontWeight--medium u-textColor--bodyCopy u-padding--5">
-                <strong>Last Ping Received:</strong> {Utilities.dateFormat(clientInfo.lastPingRecv.time, "MM/DD/YY @ hh:mm:ss a z")} (Message: <strong>{clientInfo.lastPingRecv.message || "N/A"})</strong>
+                <strong>Last Ping Received:</strong>{" "}
+                {Utilities.dateFormat(
+                  clientInfo.lastPingRecv.time,
+                  "MM/DD/YY @ hh:mm:ss a z"
+                )}{" "}
+                (Message:{" "}
+                <strong>{clientInfo.lastPingRecv.message || "N/A"})</strong>
               </p>
             </div>
             <div className="card-item u-marginTop--5 u-marginBottom--5">
               <p className="u-fontSize--normal u-fontWeight--medium u-textColor--bodyCopy u-padding--5">
-                <strong>Last Pong Sent:</strong> {Utilities.dateFormat(clientInfo.lastPongSent.time, "MM/DD/YY @ hh:mm:ss a z")} - (Message: <strong>{clientInfo.lastPongSent.message || "N/A"})</strong>
+                <strong>Last Pong Sent:</strong>{" "}
+                {Utilities.dateFormat(
+                  clientInfo.lastPongSent.time,
+                  "MM/DD/YY @ hh:mm:ss a z"
+                )}{" "}
+                (Message:{" "}
+                <strong>{clientInfo.lastPongSent.message || "N/A"})</strong>
               </p>
             </div>
           </div>