mirror of
https://github.com/bunny-lab-io/Borealis.git
synced 2025-09-11 08:48:42 -06:00
Mass-Restructure of JSX Folder Structure
This commit is contained in:
503
Data/Server/WebUI/src/Devices/Device_Details.jsx
Normal file
503
Data/Server/WebUI/src/Devices/Device_Details.jsx
Normal file
@@ -0,0 +1,503 @@
|
||||
////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Device_Details.js
|
||||
|
||||
import React, { useState, useEffect, useMemo } from "react";
|
||||
import {
|
||||
Paper,
|
||||
Box,
|
||||
Tabs,
|
||||
Tab,
|
||||
Typography,
|
||||
Table,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableBody,
|
||||
Button,
|
||||
LinearProgress,
|
||||
TableSortLabel,
|
||||
TextField
|
||||
} from "@mui/material";
|
||||
|
||||
export default function DeviceDetails({ device, onBack }) {
|
||||
const [tab, setTab] = useState(0);
|
||||
const [agent, setAgent] = useState(device || {});
|
||||
const [details, setDetails] = useState({});
|
||||
const [softwareOrderBy, setSoftwareOrderBy] = useState("name");
|
||||
const [softwareOrder, setSoftwareOrder] = useState("asc");
|
||||
const [softwareSearch, setSoftwareSearch] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
|
||||
const statusFromHeartbeat = (tsSec, offlineAfter = 15) => {
|
||||
if (!tsSec) return "Offline";
|
||||
const now = Date.now() / 1000;
|
||||
return now - tsSec <= offlineAfter ? "Online" : "Offline";
|
||||
};
|
||||
|
||||
const statusColor = (s) => (s === "Online" ? "#00d18c" : "#ff4f4f");
|
||||
|
||||
const formatLastSeen = (tsSec, offlineAfter = 15) => {
|
||||
if (!tsSec) return "unknown";
|
||||
const now = Date.now() / 1000;
|
||||
if (now - tsSec <= offlineAfter) return "Currently Online";
|
||||
const d = new Date(tsSec * 1000);
|
||||
const date = d.toLocaleDateString("en-US", {
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
const time = d.toLocaleTimeString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
});
|
||||
return `${date} @ ${time}`;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!device || !device.hostname) return;
|
||||
const load = async () => {
|
||||
try {
|
||||
const [agentsRes, detailsRes] = await Promise.all([
|
||||
fetch("/api/agents"),
|
||||
fetch(`/api/device/details/${device.hostname}`)
|
||||
]);
|
||||
const agentsData = await agentsRes.json();
|
||||
if (agentsData && agentsData[device.id]) {
|
||||
setAgent({ id: device.id, ...agentsData[device.id] });
|
||||
}
|
||||
const detailData = await detailsRes.json();
|
||||
setDetails(detailData || {});
|
||||
setDescription(detailData?.summary?.description || "");
|
||||
} catch (e) {
|
||||
console.warn("Failed to load device info", e);
|
||||
}
|
||||
};
|
||||
load();
|
||||
}, [device]);
|
||||
|
||||
const saveDescription = async () => {
|
||||
if (!details.summary?.hostname) return;
|
||||
try {
|
||||
await fetch(`/api/device/description/${details.summary.hostname}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ description })
|
||||
});
|
||||
setDetails((d) => ({
|
||||
...d,
|
||||
summary: { ...(d.summary || {}), description }
|
||||
}));
|
||||
} catch (e) {
|
||||
console.warn("Failed to save description", e);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDateTime = (str) => {
|
||||
if (!str) return "unknown";
|
||||
try {
|
||||
const [datePart, timePart] = str.split(" ");
|
||||
const [y, m, d] = datePart.split("-").map(Number);
|
||||
let [hh, mm, ss] = timePart.split(":").map(Number);
|
||||
const ampm = hh >= 12 ? "PM" : "AM";
|
||||
hh = hh % 12 || 12;
|
||||
return `${m.toString().padStart(2, "0")}/${d.toString().padStart(2, "0")}/${y} @ ${hh}:${mm
|
||||
.toString()
|
||||
.padStart(2, "0")} ${ampm}`;
|
||||
} catch {
|
||||
return str;
|
||||
}
|
||||
};
|
||||
|
||||
const formatMac = (mac) => (mac ? mac.replace(/-/g, ":").toUpperCase() : "unknown");
|
||||
|
||||
const formatBytes = (val) => {
|
||||
if (val === undefined || val === null || val === "unknown") return "unknown";
|
||||
let num = Number(val);
|
||||
const units = ["B", "KB", "MB", "GB", "TB"];
|
||||
let i = 0;
|
||||
while (num >= 1024 && i < units.length - 1) {
|
||||
num /= 1024;
|
||||
i++;
|
||||
}
|
||||
return `${num.toFixed(1)} ${units[i]}`;
|
||||
};
|
||||
|
||||
const handleSoftwareSort = (col) => {
|
||||
if (softwareOrderBy === col) {
|
||||
setSoftwareOrder(softwareOrder === "asc" ? "desc" : "asc");
|
||||
} else {
|
||||
setSoftwareOrderBy(col);
|
||||
setSoftwareOrder("asc");
|
||||
}
|
||||
};
|
||||
|
||||
const softwareRows = useMemo(() => {
|
||||
const rows = details.software || [];
|
||||
const filtered = rows.filter((s) =>
|
||||
s.name.toLowerCase().includes(softwareSearch.toLowerCase())
|
||||
);
|
||||
const dir = softwareOrder === "asc" ? 1 : -1;
|
||||
return [...filtered].sort((a, b) => {
|
||||
const A = a[softwareOrderBy] || "";
|
||||
const B = b[softwareOrderBy] || "";
|
||||
return String(A).localeCompare(String(B)) * dir;
|
||||
});
|
||||
}, [details.software, softwareSearch, softwareOrderBy, softwareOrder]);
|
||||
|
||||
const summary = details.summary || {};
|
||||
const summaryItems = [
|
||||
{ label: "Device Name", value: summary.hostname || agent.hostname || device?.hostname || "unknown" },
|
||||
{ label: "Operating System", value: summary.operating_system || agent.agent_operating_system || "unknown" },
|
||||
{ label: "Last User", value: summary.last_user || "unknown" },
|
||||
{ label: "Internal IP", value: summary.internal_ip || "unknown" },
|
||||
{ label: "External IP", value: summary.external_ip || "unknown" },
|
||||
{ label: "Last Reboot", value: summary.last_reboot ? formatDateTime(summary.last_reboot) : "unknown" },
|
||||
{ label: "Created", value: summary.created ? formatDateTime(summary.created) : "unknown" },
|
||||
{ label: "Last Seen", value: formatLastSeen(agent.last_seen || device?.lastSeen) }
|
||||
];
|
||||
|
||||
const renderSummary = () => (
|
||||
<Box sx={{ maxHeight: 400, overflowY: "auto" }}>
|
||||
<Table size="small">
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell sx={{ fontWeight: 500 }}>Description</TableCell>
|
||||
<TableCell>
|
||||
<TextField
|
||||
size="small"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
onBlur={saveDescription}
|
||||
placeholder="Enter description"
|
||||
sx={{
|
||||
input: { color: "#fff" },
|
||||
"& .MuiOutlinedInput-root": {
|
||||
"& fieldset": { borderColor: "#555" },
|
||||
"&:hover fieldset": { borderColor: "#888" }
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{summaryItems.map((item) => (
|
||||
<TableRow key={item.label}>
|
||||
<TableCell sx={{ fontWeight: 500 }}>{item.label}</TableCell>
|
||||
<TableCell>{item.value}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box>
|
||||
);
|
||||
|
||||
const placeholderTable = (headers) => (
|
||||
<Box sx={{ maxHeight: 400, overflowY: "auto" }}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{headers.map((h) => (
|
||||
<TableCell key={h}>{h}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={headers.length} sx={{ color: "#888" }}>
|
||||
No data available.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box>
|
||||
);
|
||||
|
||||
const renderSoftware = () => {
|
||||
if (!softwareRows.length)
|
||||
return placeholderTable(["Software Name", "Version", "Action"]);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={{ mb: 1 }}>
|
||||
<TextField
|
||||
size="small"
|
||||
placeholder="Search software..."
|
||||
value={softwareSearch}
|
||||
onChange={(e) => setSoftwareSearch(e.target.value)}
|
||||
sx={{
|
||||
input: { color: "#fff" },
|
||||
"& .MuiOutlinedInput-root": {
|
||||
"& fieldset": { borderColor: "#555" },
|
||||
"&:hover fieldset": { borderColor: "#888" }
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ maxHeight: 400, overflowY: "auto" }}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell sortDirection={softwareOrderBy === "name" ? softwareOrder : false}>
|
||||
<TableSortLabel
|
||||
active={softwareOrderBy === "name"}
|
||||
direction={softwareOrderBy === "name" ? softwareOrder : "asc"}
|
||||
onClick={() => handleSoftwareSort("name")}
|
||||
>
|
||||
Software Name
|
||||
</TableSortLabel>
|
||||
</TableCell>
|
||||
<TableCell sortDirection={softwareOrderBy === "version" ? softwareOrder : false}>
|
||||
<TableSortLabel
|
||||
active={softwareOrderBy === "version"}
|
||||
direction={softwareOrderBy === "version" ? softwareOrder : "asc"}
|
||||
onClick={() => handleSoftwareSort("version")}
|
||||
>
|
||||
Version
|
||||
</TableSortLabel>
|
||||
</TableCell>
|
||||
<TableCell>Action</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{softwareRows.map((s, i) => (
|
||||
<TableRow key={`${s.name}-${i}`}>
|
||||
<TableCell>{s.name}</TableCell>
|
||||
<TableCell>{s.version}</TableCell>
|
||||
<TableCell></TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const renderMemory = () => {
|
||||
const rows = details.memory || [];
|
||||
if (!rows.length) return placeholderTable(["Slot", "Speed", "Serial Number", "Capacity"]);
|
||||
return (
|
||||
<Box sx={{ maxHeight: 400, overflowY: "auto" }}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Slot</TableCell>
|
||||
<TableCell>Speed</TableCell>
|
||||
<TableCell>Serial Number</TableCell>
|
||||
<TableCell>Capacity</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows.map((m, i) => (
|
||||
<TableRow key={`${m.slot}-${i}`}>
|
||||
<TableCell>{m.slot}</TableCell>
|
||||
<TableCell>{m.speed}</TableCell>
|
||||
<TableCell>{m.serial}</TableCell>
|
||||
<TableCell>{formatBytes(m.capacity)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const renderStorage = () => {
|
||||
const toNum = (val) => {
|
||||
if (val === undefined || val === null) return undefined;
|
||||
if (typeof val === "number") {
|
||||
return Number.isNaN(val) ? undefined : val;
|
||||
}
|
||||
const n = parseFloat(String(val).replace(/[^0-9.]+/g, ""));
|
||||
return Number.isNaN(n) ? undefined : n;
|
||||
};
|
||||
|
||||
const rows = (details.storage || []).map((d) => {
|
||||
const total = toNum(d.total);
|
||||
let usagePct = toNum(d.usage);
|
||||
let usedBytes = toNum(d.used);
|
||||
let freeBytes = toNum(d.free);
|
||||
let freePct;
|
||||
|
||||
if (usagePct !== undefined) {
|
||||
if (usagePct <= 1) usagePct *= 100;
|
||||
freePct = 100 - usagePct;
|
||||
}
|
||||
|
||||
if (usedBytes === undefined && total !== undefined && usagePct !== undefined) {
|
||||
usedBytes = (usagePct / 100) * total;
|
||||
}
|
||||
|
||||
if (freeBytes === undefined && total !== undefined && usedBytes !== undefined) {
|
||||
freeBytes = total - usedBytes;
|
||||
}
|
||||
|
||||
if (freePct === undefined && total !== undefined && freeBytes !== undefined) {
|
||||
freePct = (freeBytes / total) * 100;
|
||||
}
|
||||
|
||||
if (usagePct === undefined && freePct !== undefined) {
|
||||
usagePct = 100 - freePct;
|
||||
}
|
||||
|
||||
return {
|
||||
drive: d.drive,
|
||||
disk_type: d.disk_type,
|
||||
used: usedBytes,
|
||||
freePct,
|
||||
freeBytes,
|
||||
total,
|
||||
usage: usagePct,
|
||||
};
|
||||
});
|
||||
|
||||
if (!rows.length)
|
||||
return placeholderTable([
|
||||
"Drive Letter",
|
||||
"Disk Type",
|
||||
"Used",
|
||||
"Free %",
|
||||
"Free GB",
|
||||
"Total Size",
|
||||
"Usage",
|
||||
]);
|
||||
|
||||
return (
|
||||
<Box sx={{ maxHeight: 400, overflowY: "auto" }}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Drive Letter</TableCell>
|
||||
<TableCell>Disk Type</TableCell>
|
||||
<TableCell>Used</TableCell>
|
||||
<TableCell>Free %</TableCell>
|
||||
<TableCell>Free GB</TableCell>
|
||||
<TableCell>Total Size</TableCell>
|
||||
<TableCell>Usage</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows.map((d, i) => (
|
||||
<TableRow key={`${d.drive}-${i}`}>
|
||||
<TableCell>{d.drive}</TableCell>
|
||||
<TableCell>{d.disk_type}</TableCell>
|
||||
<TableCell>
|
||||
{d.used !== undefined && !Number.isNaN(d.used)
|
||||
? formatBytes(d.used)
|
||||
: "unknown"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{d.freePct !== undefined && !Number.isNaN(d.freePct)
|
||||
? `${d.freePct.toFixed(1)}%`
|
||||
: "unknown"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{d.freeBytes !== undefined && !Number.isNaN(d.freeBytes)
|
||||
? formatBytes(d.freeBytes)
|
||||
: "unknown"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{d.total !== undefined && !Number.isNaN(d.total)
|
||||
? formatBytes(d.total)
|
||||
: "unknown"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Box sx={{ flexGrow: 1, mr: 1 }}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={d.usage ?? 0}
|
||||
sx={{
|
||||
height: 10,
|
||||
bgcolor: "#333",
|
||||
"& .MuiLinearProgress-bar": { bgcolor: "#00d18c" }
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Typography variant="body2">
|
||||
{d.usage !== undefined && !Number.isNaN(d.usage)
|
||||
? `${d.usage.toFixed(1)}%`
|
||||
: "unknown"}
|
||||
</Typography>
|
||||
</Box>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const renderNetwork = () => {
|
||||
const rows = details.network || [];
|
||||
if (!rows.length) return placeholderTable(["Adapter", "IP Address", "MAC Address"]);
|
||||
return (
|
||||
<Box sx={{ maxHeight: 400, overflowY: "auto" }}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Adapter</TableCell>
|
||||
<TableCell>IP Address</TableCell>
|
||||
<TableCell>MAC Address</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows.map((n, i) => (
|
||||
<TableRow key={`${n.adapter}-${i}`}>
|
||||
<TableCell>{n.adapter}</TableCell>
|
||||
<TableCell>{(n.ips || []).join(", ")}</TableCell>
|
||||
<TableCell>{formatMac(n.mac)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const tabs = [
|
||||
{ label: "Summary", content: renderSummary() },
|
||||
{ label: "Software", content: renderSoftware() },
|
||||
{ label: "Memory", content: renderMemory() },
|
||||
{ label: "Storage", content: renderStorage() },
|
||||
{ label: "Network", content: renderNetwork() }
|
||||
];
|
||||
const status = statusFromHeartbeat(agent.last_seen || device?.lastSeen);
|
||||
|
||||
return (
|
||||
<Paper sx={{ m: 2, p: 2, bgcolor: "#1e1e1e" }} elevation={2}>
|
||||
<Box sx={{ mb: 2, display: "flex", alignItems: "center" }}>
|
||||
{onBack && (
|
||||
<Button variant="outlined" size="small" onClick={onBack} sx={{ mr: 2 }}>
|
||||
Back
|
||||
</Button>
|
||||
)}
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{ color: "#58a6ff", display: "flex", alignItems: "center" }}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
display: "inline-block",
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 10,
|
||||
background: statusColor(status),
|
||||
marginRight: 8,
|
||||
}}
|
||||
/>
|
||||
{agent.hostname || "Device Details"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Tabs
|
||||
value={tab}
|
||||
onChange={(e, v) => setTab(v)}
|
||||
sx={{ borderBottom: 1, borderColor: "#333" }}
|
||||
>
|
||||
{tabs.map((t) => (
|
||||
<Tab key={t.label} label={t.label} />
|
||||
))}
|
||||
</Tabs>
|
||||
<Box sx={{ mt: 2 }}>{tabs[tab].content}</Box>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
243
Data/Server/WebUI/src/Devices/Device_List.jsx
Normal file
243
Data/Server/WebUI/src/Devices/Device_List.jsx
Normal file
@@ -0,0 +1,243 @@
|
||||
////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Device_List.jsx
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import {
|
||||
Paper,
|
||||
Box,
|
||||
Typography,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableSortLabel,
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuItem
|
||||
} from "@mui/material";
|
||||
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
||||
import { DeleteDeviceDialog } from "../Dialogs.jsx";
|
||||
|
||||
function formatLastSeen(tsSec, offlineAfter = 15) {
|
||||
if (!tsSec) return "unknown";
|
||||
const now = Date.now() / 1000;
|
||||
if (now - tsSec <= offlineAfter) return "Currently Online";
|
||||
const d = new Date(tsSec * 1000);
|
||||
const date = d.toLocaleDateString("en-US", {
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
const time = d.toLocaleTimeString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
});
|
||||
return `${date} @ ${time}`;
|
||||
}
|
||||
|
||||
function statusFromHeartbeat(tsSec, offlineAfter = 15) {
|
||||
if (!tsSec) return "Offline";
|
||||
const now = Date.now() / 1000;
|
||||
return now - tsSec <= offlineAfter ? "Online" : "Offline";
|
||||
}
|
||||
|
||||
export default function DeviceList({ onSelectDevice }) {
|
||||
const [rows, setRows] = useState([]);
|
||||
const [orderBy, setOrderBy] = useState("status");
|
||||
const [order, setOrder] = useState("desc");
|
||||
const [menuAnchor, setMenuAnchor] = useState(null);
|
||||
const [selected, setSelected] = useState(null);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
|
||||
const fetchAgents = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch("/api/agents");
|
||||
const data = await res.json();
|
||||
const arr = Object.entries(data || {}).map(([id, a]) => ({
|
||||
id,
|
||||
hostname: a.hostname || id || "unknown",
|
||||
status: statusFromHeartbeat(a.last_seen),
|
||||
lastSeen: a.last_seen || 0,
|
||||
os: a.agent_operating_system || a.os || "-"
|
||||
}));
|
||||
setRows(arr);
|
||||
} catch (e) {
|
||||
console.warn("Failed to load agents:", e);
|
||||
setRows([]);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAgents();
|
||||
const t = setInterval(fetchAgents, 5000);
|
||||
return () => clearInterval(t);
|
||||
}, [fetchAgents]);
|
||||
|
||||
const sorted = useMemo(() => {
|
||||
const dir = order === "asc" ? 1 : -1;
|
||||
return [...rows].sort((a, b) => {
|
||||
const A = a[orderBy];
|
||||
const B = b[orderBy];
|
||||
if (orderBy === "lastSeen") return (A - B) * dir;
|
||||
return String(A).localeCompare(String(B)) * dir;
|
||||
});
|
||||
}, [rows, orderBy, order]);
|
||||
|
||||
const handleSort = (col) => {
|
||||
if (orderBy === col) setOrder(order === "asc" ? "desc" : "asc");
|
||||
else {
|
||||
setOrderBy(col);
|
||||
setOrder("asc");
|
||||
}
|
||||
};
|
||||
|
||||
const statusColor = (s) => (s === "Online" ? "#00d18c" : "#ff4f4f");
|
||||
|
||||
const openMenu = (e, row) => {
|
||||
setMenuAnchor(e.currentTarget);
|
||||
setSelected(row);
|
||||
};
|
||||
|
||||
const closeMenu = () => setMenuAnchor(null);
|
||||
|
||||
const confirmDelete = () => {
|
||||
closeMenu();
|
||||
setConfirmOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!selected) return;
|
||||
try {
|
||||
await fetch(`/api/agent/${selected.id}`, { method: "DELETE" });
|
||||
} catch (e) {
|
||||
console.warn("Failed to remove agent", e);
|
||||
}
|
||||
setRows((r) => r.filter((x) => x.id !== selected.id));
|
||||
setConfirmOpen(false);
|
||||
setSelected(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper sx={{ m: 2, p: 0, bgcolor: "#1e1e1e" }} elevation={2}>
|
||||
<Box sx={{ p: 2, pb: 1 }}>
|
||||
<Typography variant="h6" sx={{ color: "#58a6ff", mb: 0 }}>
|
||||
Devices
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: "#aaa" }}>
|
||||
Devices connected to Borealis via Agent and their last check-ins.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Table size="small" sx={{ minWidth: 680 }}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell sortDirection={orderBy === "status" ? order : false}>
|
||||
<TableSortLabel
|
||||
active={orderBy === "status"}
|
||||
direction={orderBy === "status" ? order : "asc"}
|
||||
onClick={() => handleSort("status")}
|
||||
>
|
||||
Status
|
||||
</TableSortLabel>
|
||||
</TableCell>
|
||||
<TableCell sortDirection={orderBy === "hostname" ? order : false}>
|
||||
<TableSortLabel
|
||||
active={orderBy === "hostname"}
|
||||
direction={orderBy === "hostname" ? order : "asc"}
|
||||
onClick={() => handleSort("hostname")}
|
||||
>
|
||||
Device Hostname
|
||||
</TableSortLabel>
|
||||
</TableCell>
|
||||
<TableCell sortDirection={orderBy === "lastSeen" ? order : false}>
|
||||
<TableSortLabel
|
||||
active={orderBy === "lastSeen"}
|
||||
direction={orderBy === "lastSeen" ? order : "asc"}
|
||||
onClick={() => handleSort("lastSeen")}
|
||||
>
|
||||
Last Seen
|
||||
</TableSortLabel>
|
||||
</TableCell>
|
||||
<TableCell sortDirection={orderBy === "os" ? order : false}>
|
||||
<TableSortLabel
|
||||
active={orderBy === "os"}
|
||||
direction={orderBy === "os" ? order : "asc"}
|
||||
onClick={() => handleSort("os")}
|
||||
>
|
||||
OS
|
||||
</TableSortLabel>
|
||||
</TableCell>
|
||||
<TableCell />
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{sorted.map((r, i) => (
|
||||
<TableRow key={r.id || i} hover>
|
||||
<TableCell>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 10,
|
||||
bgcolor: statusColor(r.status),
|
||||
mr: 1,
|
||||
}}
|
||||
/>
|
||||
{r.status}
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
onClick={() => onSelectDevice && onSelectDevice(r)}
|
||||
sx={{
|
||||
color: "#58a6ff",
|
||||
"&:hover": {
|
||||
cursor: onSelectDevice ? "pointer" : "default",
|
||||
textDecoration: onSelectDevice ? "underline" : "none",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{r.hostname}
|
||||
</TableCell>
|
||||
<TableCell>{formatLastSeen(r.lastSeen)}</TableCell>
|
||||
<TableCell>{r.os}</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openMenu(e, r);
|
||||
}}
|
||||
sx={{ color: "#ccc" }}
|
||||
>
|
||||
<MoreVertIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{sorted.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} sx={{ color: "#888" }}>
|
||||
No agents connected.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Menu
|
||||
anchorEl={menuAnchor}
|
||||
open={Boolean(menuAnchor)}
|
||||
onClose={closeMenu}
|
||||
PaperProps={{ sx: { bgcolor: "#1e1e1e", color: "#fff", fontSize: "13px" } }}
|
||||
>
|
||||
<MenuItem onClick={confirmDelete}>Delete</MenuItem>
|
||||
</Menu>
|
||||
<DeleteDeviceDialog
|
||||
open={confirmOpen}
|
||||
onCancel={() => setConfirmOpen(false)}
|
||||
onConfirm={handleDelete}
|
||||
/>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user