Show status on agents list page

Author: santiagolizardo

src/components/agents/AgentDetailsPage.jsx

@@ -1,22 +1,28 @@
-import { useQueryClient } from "@tanstack/react-query";
 import { useAgentQuery } from "api/agents.js";
 import NativeButtonGroup from "components/form/NativeButtonGroup.jsx";
+import Breadcrumb from "components/ui/Breadcrumb.jsx";
 import PrimaryButton from "components/ui/buttons/Primary.jsx";
 import CommandTerminal from "components/ui/CommandTerminal.jsx";
-import { WebsocketContext } from "contexts/WebsocketContext.jsx";
-import { useContext, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import Tag from "components/ui/Tag.jsx";
+import { useState } from "react";
+import { Link, useParams } from "react-router-dom";
 import Loading from "../ui/Loading.jsx";
 
+const pingedRecently = (lastPingAt) => {
+    if (!lastPingAt) return false;
+    const lastPingDate = new Date(lastPingAt);
+    const now = new Date();
+    const diffMinutes = (now - lastPingDate) / 1000 / 60;
+    return diffMinutes < 5; // Consider online if pinged within the last 5 minutes
+}
+
+
 const AgentDetailsPage = () => {
     const { agentId } = useParams();
-    const navigate = useNavigate();
-    const queryClient = useQueryClient();
 
     const { data: agent, isLoading } = useAgentQuery(agentId);
 
     const [terminalVisibility, setTerminalVisibility] = useState(false);
-    const wsContextData = useContext(WebsocketContext);
 
     const connect = () => {
         setTerminalVisibility(true);
@@ -29,9 +35,34 @@ const AgentDetailsPage = () => {
 
     return (
         <div>
-            {agent.os}
+            <Breadcrumb>
+                <Link to="/agents">Agents</Link>
+                <Link>{agent.name}</Link>
+            </Breadcrumb>
+
+
+            <Tag>{agent.os}</Tag>                {pingedRecently(agent.lastPingAt) ? (<span className="tag is-success">Online</span>) : (
+                <span className="tag is-warning">Offline</span>
+            )}
+
+            <h3 className="title is-3">Agent: {agent.name}</h3>
+
+            <dl className="content">
+                <dt>Hostname:</dt>
+                <dd>{agent.hostname}</dd>
+
+                <dt>IP Address:</dt>
+                <dd>{agent.ip}</dd>
+
+                <dt>Listen Address:</dt>
+                <dd>{agent.listenAddr}</dd>
+
+                <dt>Last Booted At:</dt>
+                <dd>{agent.lastBootAt}</dd>
 
-            <h3 className="title is-3">Agent terminal</h3>
+                <dt>Last Pinged At:</dt>
+                <dd>{agent.lastPingAt}</dd>
+            </dl>
 
             <NativeButtonGroup>
                 <PrimaryButton onClick={connect} disabled={terminalVisibility === true}>

src/components/agents/AgentsListPage.jsx

@@ -1,9 +1,20 @@
 import { useAgentsQuery } from "api/agents.js";
 import { requestAgentDelete, requestAgentPost } from "api/requests/agents.js";
+import HorizontalLabelledField from "components/form/HorizontalLabelledField.jsx";
+import NativeButton from "components/form/NativeButton.jsx";
+import NativeInput from "components/form/NativeInput.jsx";
 import NativeTable from "components/ui/tables/NativeTable.jsx";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 
+const pingedRecently = (lastPingAt) => {
+    if (!lastPingAt) return false;
+    const lastPingDate = new Date(lastPingAt);
+    const now = new Date();
+    const diffMinutes = (now - lastPingDate) / 1000 / 60;
+    return diffMinutes < 5; // Consider online if pinged within the last 5 minutes
+}
+
 const AgentsListPage = () => {
     const { data: agents, isLoading, refetch } = useAgentsQuery();
 
@@ -16,30 +27,51 @@ const AgentsListPage = () => {
         const formData = new FormData(event.target);
         const data = Object.fromEntries(formData.entries());
         requestAgentPost(data).then((response) => {
-            if (response.ok) {
-                event.target.reset();
-                setAgentCredentials(response.data);
-                alert("Agent added successfully");
-                refetch();
+            if (response.status === 201) {
+                return response.json();
             } else {
                 alert("Failed to add agent");
             }
+        }).then((data) => {
+            if (data) {
+                event.target.reset();
+                setAgentCredentials(data);
+                refetch();
+                alert("Agent added successfully");
+            }
         });
     }
 
     const columns = [
+        {
+            header: "Status",
+            cell: (agent) => <>
+                {pingedRecently(agent.lastPingAt) ? (<span className="tag is-success">Online</span>) : (
+                    <span className="tag is-warning">Offline</span>
+                )}
+            </>
+        },
         {
             header: "Enabled",
             cell: (agent) => (agent.active ? <>True</> : <>False</>),
+            enabled: false
         },
         {
-            header: "Name",
+            header: "Client ID",
             cell: (agent) => (
                 <>
                     <Link to={`/agents/${agent.id}`}>{agent.clientId}</Link>
                 </>
             ),
         },
+        {
+            header: "Name",
+            cell: (agent) => (
+                <>
+                    <Link to={`/agents/${agent.id}`}>{agent.name}</Link>
+                </>
+            ),
+        },
         {
             header: "Hostname",
             property: "hostname",
@@ -84,8 +116,8 @@ const AgentsListPage = () => {
                         if (window.confirm("Are you sure you want to delete this agent?")) {
                             requestAgentDelete(agent.id).then((response) => {
                                 if (response.ok) {
-                                    alert("Agent deleted successfully");
                                     refetch();
+                                    alert("Agent deleted successfully");
                                 } else {
                                     alert("Failed to delete agent");
                                 }
@@ -98,23 +130,29 @@ const AgentsListPage = () => {
     ];
 
     return <>
-        <NativeTable columns={columns} rows={agents} rowId={(agent) => agent.id}></NativeTable>;
+        <NativeTable columns={columns} rows={agents} rowId={(agent) => agent.id}></NativeTable>
 
         {agentCredentials && (
             <div>
-                The agent credentials are:
+                The agent credentials are (please copy them as they are only displayed once):
                 <pre>{JSON.stringify(agentCredentials, null, 2)}</pre>
-                Please copy them, they are only displayed once.
+
             </div>
         )}
 
-        <form method="POST" action="/api/agents" onSubmit={onSubmit}>
-            <input type="text" name="clientId" placeholder="Client ID" required />
-            <input type="text" name="hostname" placeholder="Hostname" required />
-            <input type="text" name="listenAddr" placeholder="Listen Address" required />
-            <input type="submit" value="Add new agent" />
-        </form>
+        <details>
+            <summary>Add agent</summary>
+            <form method="POST" action="/api/agents" onSubmit={onSubmit}>
+                <HorizontalLabelledField label="Name" control={<NativeInput type="text" name="name" placeholder="Name" required />} />
+
+                <HorizontalLabelledField label="Hostname" control={<NativeInput type="text" name="hostname" placeholder="Hostname" required />} />
+
+                <HorizontalLabelledField label="Listen Address" control={<NativeInput type="text" name="listenAddr" placeholder="Listen Address" required />} />
+
+                <NativeButton type="submit" className="button is-primary">Add new agent</NativeButton>
+            </form>
+        </details>
     </>
-};
+}
 
 export default AgentsListPage;