feat(relays): healthcheck

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx

@@ -199,7 +199,10 @@ export const SecretSyncReviewFields = () => {
                 </p>
                 {duplicateProjectId && (
                   <p className="mt-1 text-xs text-yellow-200">
-                    Duplicate found in project ID: <code className="rounded bg-yellow-800/50 px-1 py-0.5">{duplicateProjectId}</code>
+                    Duplicate found in project ID:{" "}
+                    <code className="rounded bg-yellow-800/50 px-1 py-0.5">
+                      {duplicateProjectId}
+                    </code>
                   </p>
                 )}
               </div>

frontend/src/hooks/api/relays/types.ts

@@ -6,6 +6,7 @@ export type TRelay = {
   identityId: string | null;
   name: string;
   host: string;
+  heartbeat: string;
 };
 
 export type TDeleteRelayDTO = {

frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx

@@ -48,7 +48,7 @@ import { useDeleteGatewayV2ById } from "@app/hooks/api/gateways-v2";
 
 import { EditGatewayDetailsModal } from "./components/EditGatewayDetailsModal";
 
-const GatewayHealthStatus = ({ heartbeat }: { heartbeat?: string }) => {
+export const GatewayHealthStatus = ({ heartbeat }: { heartbeat?: string }) => {
   const heartbeatDate = heartbeat ? new Date(heartbeat) : null;
   const now = new Date();
   const oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000);

frontend/src/pages/organization/NetworkingPage/components/RelayTab/RelayTab.tsx

@@ -5,6 +5,7 @@ import {
   faCopy,
   faDoorClosed,
   faEllipsisV,
+  faInfoCircle,
   faMagnifyingGlass,
   faSearch,
   faTrash
@@ -41,6 +42,8 @@ import { withPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
 import { useDeleteRelayById, useGetRelays } from "@app/hooks/api/relays";
 
+import { GatewayHealthStatus } from "../GatewayTab/GatewayTab";
+
 export const RelayTab = withPermission(
   () => {
     const [search, setSearch] = useState("");
@@ -106,6 +109,16 @@ export const RelayTab = withPermission(
                   <Th className="w-1/3">Name</Th>
                   <Th>Host</Th>
                   <Th>Created</Th>
+                  <Th>
+                    Health Check
+                    <Tooltip
+                      asChild={false}
+                      className="normal-case"
+                      content="The last known healthcheck. Triggers every 1 hour."
+                    >
+                      <FontAwesomeIcon icon={faInfoCircle} className="ml-2" />
+                    </Tooltip>
+                  </Th>
                   <Th className="w-5" />
                 </Tr>
               </THead>
@@ -129,6 +142,9 @@ export const RelayTab = withPermission(
                     </Td>
                     <Td>{el.host}</Td>
                     <Td>{formatRelative(new Date(el.createdAt), new Date())}</Td>
+                    <Td>
+                      <GatewayHealthStatus heartbeat={el.heartbeat} />
+                    </Td>
                     <Td className="w-5">
                       <Tooltip className="max-w-sm text-center" content="Options">
                         <DropdownMenu>