Compare commits

..

1 Commits

Author SHA1 Message Date
renovate[bot]
cf062bc2b9 Update dependency bcryptjs to v3 2025-11-18 18:17:21 +00:00
17 changed files with 357 additions and 692 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -1,6 +1,6 @@
{
"name": "patchmon-backend",
"version": "1.3.6",
"version": "1.3.5",
"description": "Backend API for Linux Patch Monitoring System",
"license": "AGPL-3.0",
"main": "src/server.js",
@@ -18,7 +18,7 @@
"@bull-board/express": "^6.13.1",
"@prisma/client": "^6.1.0",
"axios": "^1.7.9",
"bcryptjs": "^2.4.3",
"bcryptjs": "^3.0.0",
"bullmq": "^5.61.0",
"cookie-parser": "^1.4.7",
"cors": "^2.8.5",
@@ -37,7 +37,7 @@
"ws": "^8.18.0"
},
"devDependencies": {
"@types/bcryptjs": "^2.4.6",
"@types/bcryptjs": "^3.0.0",
"nodemon": "^3.1.9",
"prisma": "^6.1.0"
},

View File

@@ -103,7 +103,6 @@ model hosts {
gateway_ip String?
hostname String?
kernel_version String?
installed_kernel_version String?
load_average Json?
network_interfaces Json?
ram_installed Int?

View File

@@ -506,10 +506,6 @@ router.post(
.optional()
.isString()
.withMessage("Kernel version must be a string"),
body("installedKernelVersion")
.optional()
.isString()
.withMessage("Installed kernel version must be a string"),
body("selinuxStatus")
.optional()
.isIn(["enabled", "disabled", "permissive"])
@@ -591,8 +587,6 @@ router.post(
// System Information
if (req.body.kernelVersion)
updateData.kernel_version = req.body.kernelVersion;
if (req.body.installedKernelVersion)
updateData.installed_kernel_version = req.body.installedKernelVersion;
if (req.body.selinuxStatus)
updateData.selinux_status = req.body.selinuxStatus;
if (req.body.systemUptime)

View File

@@ -6,5 +6,5 @@ VITE_API_URL=http://localhost:3001/api/v1
# Application Metadata
VITE_APP_NAME=PatchMon
VITE_APP_VERSION=1.3.6
VITE_APP_VERSION=1.3.5

View File

@@ -1,7 +1,7 @@
{
"name": "patchmon-frontend",
"private": true,
"version": "1.3.6",
"version": "1.3.5",
"license": "AGPL-3.0",
"type": "module",
"scripts": {

View File

@@ -215,7 +215,7 @@ const GlobalSearch = () => {
<input
ref={inputRef}
type="text"
className="block w-full rounded-lg border border-secondary-200 bg-white py-2.5 sm:py-2 pl-10 pr-10 text-sm text-secondary-900 placeholder-secondary-500 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:border-secondary-600 dark:bg-secondary-700 dark:text-white dark:placeholder-secondary-400 min-h-[44px]"
className="block w-full rounded-lg border border-secondary-200 bg-white py-2 pl-10 pr-10 text-sm text-secondary-900 placeholder-secondary-500 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:border-secondary-600 dark:bg-secondary-700 dark:text-white dark:placeholder-secondary-400"
placeholder="Search hosts, packages, repos, users..."
value={query}
onChange={handleInputChange}
@@ -228,8 +228,7 @@ const GlobalSearch = () => {
<button
type="button"
onClick={handleClear}
className="absolute inset-y-0 right-0 flex items-center pr-3 text-secondary-400 hover:text-secondary-600 min-w-[44px] min-h-[44px] justify-center"
aria-label="Clear search"
className="absolute inset-y-0 right-0 flex items-center pr-3 text-secondary-400 hover:text-secondary-600"
>
<X className="h-4 w-4" />
</button>
@@ -238,9 +237,9 @@ const GlobalSearch = () => {
{/* Dropdown Results */}
{isOpen && (
<div className="absolute z-50 mt-2 w-full sm:w-[calc(100vw-2rem)] sm:max-w-md rounded-lg border border-secondary-200 bg-white shadow-lg dark:border-secondary-600 dark:bg-secondary-800 left-0 sm:left-auto right-0 sm:right-auto">
<div className="absolute z-50 mt-2 w-full rounded-lg border border-secondary-200 bg-white shadow-lg dark:border-secondary-600 dark:bg-secondary-800">
{isLoading ? (
<div className="px-4 py-2 text-center text-sm text-secondary-500 dark:text-white/70">
<div className="px-4 py-2 text-center text-sm text-secondary-500">
Searching...
</div>
) : hasResults ? (
@@ -248,7 +247,7 @@ const GlobalSearch = () => {
{/* Hosts */}
{results.hosts?.length > 0 && (
<div>
<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-white/80">
<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-secondary-400">
Hosts
</div>
{results.hosts.map((host, _idx) => {
@@ -261,7 +260,7 @@ const GlobalSearch = () => {
type="button"
key={host.id}
onClick={() => handleResultClick(host)}
className={`flex w-full items-center gap-2 px-3 py-3 sm:py-1.5 text-left transition-colors min-h-[44px] ${
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors ${
globalIdx === selectedIndex
? "bg-primary-50 dark:bg-primary-900/20"
: "hover:bg-secondary-50 dark:hover:bg-secondary-700"
@@ -272,14 +271,12 @@ const GlobalSearch = () => {
<span className="text-sm font-medium text-secondary-900 dark:text-white truncate">
{display.primary}
</span>
<span className="text-xs text-secondary-400 dark:text-white/50">
</span>
<span className="text-xs text-secondary-500 dark:text-white/70 truncate">
<span className="text-xs text-secondary-400"></span>
<span className="text-xs text-secondary-500 dark:text-secondary-400 truncate">
{display.secondary}
</span>
</div>
<div className="flex-shrink-0 text-xs text-secondary-400 dark:text-white/60">
<div className="flex-shrink-0 text-xs text-secondary-400">
{host.os_type}
</div>
</button>
@@ -291,7 +288,7 @@ const GlobalSearch = () => {
{/* Packages */}
{results.packages?.length > 0 && (
<div>
<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-white/80">
<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-secondary-400">
Packages
</div>
{results.packages.map((pkg, _idx) => {
@@ -304,7 +301,7 @@ const GlobalSearch = () => {
type="button"
key={pkg.id}
onClick={() => handleResultClick(pkg)}
className={`flex w-full items-center gap-2 px-3 py-3 sm:py-1.5 text-left transition-colors min-h-[44px] ${
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors ${
globalIdx === selectedIndex
? "bg-primary-50 dark:bg-primary-900/20"
: "hover:bg-secondary-50 dark:hover:bg-secondary-700"
@@ -320,13 +317,13 @@ const GlobalSearch = () => {
<span className="text-xs text-secondary-400">
</span>
<span className="text-xs text-secondary-500 dark:text-white/70 truncate">
<span className="text-xs text-secondary-500 dark:text-secondary-400 truncate">
{display.secondary}
</span>
</>
)}
</div>
<div className="flex-shrink-0 text-xs text-secondary-400 dark:text-white/60">
<div className="flex-shrink-0 text-xs text-secondary-400">
{pkg.host_count} hosts
</div>
</button>
@@ -338,7 +335,7 @@ const GlobalSearch = () => {
{/* Repositories */}
{results.repositories?.length > 0 && (
<div>
<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-white/80">
<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-secondary-400">
Repositories
</div>
{results.repositories.map((repo, _idx) => {
@@ -351,7 +348,7 @@ const GlobalSearch = () => {
type="button"
key={repo.id}
onClick={() => handleResultClick(repo)}
className={`flex w-full items-center gap-2 px-3 py-3 sm:py-1.5 text-left transition-colors min-h-[44px] ${
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors ${
globalIdx === selectedIndex
? "bg-primary-50 dark:bg-primary-900/20"
: "hover:bg-secondary-50 dark:hover:bg-secondary-700"
@@ -362,14 +359,12 @@ const GlobalSearch = () => {
<span className="text-sm font-medium text-secondary-900 dark:text-white truncate">
{display.primary}
</span>
<span className="text-xs text-secondary-400 dark:text-white/50">
</span>
<span className="text-xs text-secondary-500 dark:text-white/70 truncate">
<span className="text-xs text-secondary-400"></span>
<span className="text-xs text-secondary-500 dark:text-secondary-400 truncate">
{display.secondary}
</span>
</div>
<div className="flex-shrink-0 text-xs text-secondary-400 dark:text-white/60">
<div className="flex-shrink-0 text-xs text-secondary-400">
{repo.host_count} hosts
</div>
</button>
@@ -381,7 +376,7 @@ const GlobalSearch = () => {
{/* Users */}
{results.users?.length > 0 && (
<div>
<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-white/80">
<div className="sticky top-0 z-10 bg-secondary-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-secondary-500 dark:bg-secondary-700 dark:text-secondary-400">
Users
</div>
{results.users.map((user, _idx) => {
@@ -394,7 +389,7 @@ const GlobalSearch = () => {
type="button"
key={user.id}
onClick={() => handleResultClick(user)}
className={`flex w-full items-center gap-2 px-3 py-3 sm:py-1.5 text-left transition-colors min-h-[44px] ${
className={`flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors ${
globalIdx === selectedIndex
? "bg-primary-50 dark:bg-primary-900/20"
: "hover:bg-secondary-50 dark:hover:bg-secondary-700"
@@ -405,14 +400,12 @@ const GlobalSearch = () => {
<span className="text-sm font-medium text-secondary-900 dark:text-white truncate">
{display.primary}
</span>
<span className="text-xs text-secondary-400 dark:text-white/50">
</span>
<span className="text-xs text-secondary-500 dark:text-white/70 truncate">
<span className="text-xs text-secondary-400"></span>
<span className="text-xs text-secondary-500 dark:text-secondary-400 truncate">
{display.secondary}
</span>
</div>
<div className="flex-shrink-0 text-xs text-secondary-400 dark:text-white/60">
<div className="flex-shrink-0 text-xs text-secondary-400">
{user.role}
</div>
</button>
@@ -422,7 +415,7 @@ const GlobalSearch = () => {
)}
</div>
) : query.trim() ? (
<div className="px-4 py-2 text-center text-sm text-secondary-500 dark:text-white/70">
<div className="px-4 py-2 text-center text-sm text-secondary-500">
No results found for "{query}"
</div>
) : null}

File diff suppressed because one or more lines are too long

View File

@@ -22,6 +22,7 @@ import {
Server,
Settings,
Shield,
TrendingUp,
Users,
WifiOff,
} from "lucide-react";
@@ -58,7 +59,6 @@ const Dashboard = () => {
const [packageTrendsHost, setPackageTrendsHost] = useState("all"); // host filter
const [systemStatsJobId, setSystemStatsJobId] = useState(null); // Track job ID for system statistics
const [isTriggeringJob, setIsTriggeringJob] = useState(false);
const [isMobile, setIsMobile] = useState(window.innerWidth < 640);
const navigate = useNavigate();
const { isDark } = useTheme();
const { user } = useAuth();
@@ -312,15 +312,6 @@ const Dashboard = () => {
};
}, []);
// Track window size for responsive chart options
useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth < 640);
};
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
// Helper function to check if a card should be displayed
const isCardEnabled = (cardId) => {
const card = cardPreferences.find((c) => c.cardId === cardId);
@@ -367,11 +358,11 @@ const Dashboard = () => {
const getGroupClassName = (cardType) => {
switch (cardType) {
case "stats":
return "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4";
return "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4";
case "charts":
return "grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6";
return "grid grid-cols-1 lg:grid-cols-3 gap-6";
case "widecharts":
return "grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6";
return "grid grid-cols-1 lg:grid-cols-3 gap-6";
case "fullwidth":
return "space-y-6";
default:
@@ -386,7 +377,7 @@ const Dashboard = () => {
return (
<button
type="button"
className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleNeedsRebootClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
@@ -414,7 +405,7 @@ const Dashboard = () => {
return (
<button
type="button"
className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleTotalHostsClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
@@ -443,7 +434,7 @@ const Dashboard = () => {
return (
<button
type="button"
className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleHostsNeedingUpdatesClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
@@ -472,7 +463,7 @@ const Dashboard = () => {
return (
<button
type="button"
className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleUpToDateClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
@@ -501,7 +492,7 @@ const Dashboard = () => {
return (
<button
type="button"
className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleOutdatedPackagesClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
@@ -530,7 +521,7 @@ const Dashboard = () => {
return (
<button
type="button"
className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleSecurityUpdatesClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
@@ -559,7 +550,7 @@ const Dashboard = () => {
return (
<button
type="button"
className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleHostGroupsClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
@@ -588,7 +579,7 @@ const Dashboard = () => {
return (
<button
type="button"
className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleUsersClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
@@ -617,7 +608,7 @@ const Dashboard = () => {
return (
<button
type="button"
className="card p-3 sm:p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left min-h-[44px]"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleRepositoriesClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
@@ -750,7 +741,7 @@ const Dashboard = () => {
case "osDistribution":
return (
<div className="card p-4 sm:p-6 w-full">
<div className="card p-6 w-full">
<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
OS Distribution
</h3>
@@ -764,7 +755,7 @@ const Dashboard = () => {
case "osDistributionDoughnut":
return (
<div className="card p-4 sm:p-6 w-full">
<div className="card p-6 w-full">
<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
OS Distribution
</h3>
@@ -778,7 +769,7 @@ const Dashboard = () => {
case "osDistributionBar":
return (
<div className="card p-4 sm:p-6 w-full">
<div className="card p-6 w-full">
<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
OS Distribution
</h3>
@@ -792,7 +783,7 @@ const Dashboard = () => {
return (
<button
type="button"
className="card p-4 sm:p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleUpdateStatusClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
@@ -817,7 +808,7 @@ const Dashboard = () => {
case "packagePriority":
return (
<div className="card p-4 sm:p-6 w-full">
<div className="card p-6 w-full">
<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
Outdated Packages by Priority
</h3>
@@ -834,13 +825,13 @@ const Dashboard = () => {
case "packageTrends":
return (
<div className="card p-4 sm:p-6 w-full">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
<div className="card p-6 w-full">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-medium text-secondary-900 dark:text-white">
Package Trends Over Time
</h3>
<div className="flex flex-col gap-2">
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3">
<div className="flex items-center gap-3">
{/* Refresh Button */}
<button
type="button"
@@ -878,7 +869,7 @@ const Dashboard = () => {
}
}}
disabled={packageTrendsFetching || isTriggeringJob}
className="px-3 py-2.5 sm:py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white hover:bg-secondary-50 dark:hover:bg-secondary-700 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 min-h-[44px]"
className="px-3 py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white hover:bg-secondary-50 dark:hover:bg-secondary-700 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
title={
packageTrendsHost === "all"
? "Trigger system statistics collection"
@@ -899,7 +890,7 @@ const Dashboard = () => {
<select
value={packageTrendsPeriod}
onChange={(e) => setPackageTrendsPeriod(e.target.value)}
className="px-3 py-2.5 sm:py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500 min-h-[44px]"
className="px-3 py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
>
<option value="1">Last 24 hours</option>
<option value="7">Last 7 days</option>
@@ -917,7 +908,7 @@ const Dashboard = () => {
// Clear job ID message when host selection changes
setSystemStatsJobId(null);
}}
className="px-3 py-2.5 sm:py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500 min-h-[44px]"
className="px-3 py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
>
<option value="all">All Hosts</option>
{packageTrendsData?.hosts?.length > 0 ? (
@@ -937,7 +928,7 @@ const Dashboard = () => {
</div>
{/* Job ID Message */}
{systemStatsJobId && packageTrendsHost === "all" && (
<p className="text-xs text-secondary-600 dark:text-white/70 ml-1">
<p className="text-xs text-secondary-600 dark:text-secondary-400 ml-1">
Ran collection job #{systemStatsJobId}
</p>
)}
@@ -955,7 +946,7 @@ const Dashboard = () => {
options={packageTrendsChartOptions}
/>
) : (
<div className="flex items-center justify-center h-full text-secondary-500 dark:text-white/70">
<div className="flex items-center justify-center h-full text-secondary-500 dark:text-secondary-400">
No data available
</div>
)}
@@ -993,7 +984,7 @@ const Dashboard = () => {
: 0;
return (
<div className="card p-4 sm:p-6">
<div className="card p-6">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-medium text-secondary-900 dark:text-white">
System Overview
@@ -1004,10 +995,10 @@ const Dashboard = () => {
<div className="text-2xl font-bold text-primary-600">
{updatePercentage}%
</div>
<div className="text-sm text-secondary-500 dark:text-white/70">
<div className="text-sm text-secondary-500 dark:text-secondary-300">
Need Updates
</div>
<div className="text-xs text-secondary-400 dark:text-white/60">
<div className="text-xs text-secondary-400 dark:text-secondary-500">
{stats.cards.hostsNeedingUpdates}/{stats.cards.totalHosts}{" "}
hosts
</div>
@@ -1016,10 +1007,10 @@ const Dashboard = () => {
<div className="text-2xl font-bold text-danger-600">
{stats.cards.securityUpdates}
</div>
<div className="text-sm text-secondary-500 dark:text-white/70">
<div className="text-sm text-secondary-500 dark:text-secondary-300">
Security Issues
</div>
<div className="text-xs text-secondary-400 dark:text-white/60">
<div className="text-xs text-secondary-400 dark:text-secondary-500">
{securityPercentage}% of updates
</div>
</div>
@@ -1027,10 +1018,10 @@ const Dashboard = () => {
<div className="text-2xl font-bold text-success-600">
{onlinePercentage}%
</div>
<div className="text-sm text-secondary-500 dark:text-white/70">
<div className="text-sm text-secondary-500 dark:text-secondary-300">
Online
</div>
<div className="text-xs text-secondary-400 dark:text-white/60">
<div className="text-xs text-secondary-400 dark:text-secondary-500">
{onlineHosts}/{stats.cards.totalHosts} hosts
</div>
</div>
@@ -1038,10 +1029,10 @@ const Dashboard = () => {
<div className="text-2xl font-bold text-secondary-600">
{avgPackagesPerHost}
</div>
<div className="text-sm text-secondary-500 dark:text-white/70">
<div className="text-sm text-secondary-500 dark:text-secondary-300">
Avg per Host
</div>
<div className="text-xs text-secondary-400 dark:text-white/60">
<div className="text-xs text-secondary-400 dark:text-secondary-500">
outdated packages
</div>
</div>
@@ -1052,7 +1043,7 @@ const Dashboard = () => {
case "recentUsers":
return (
<div className="card p-4 sm:p-6">
<div className="card p-6">
<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
Recent Users Logged in
</h3>
@@ -1066,7 +1057,7 @@ const Dashboard = () => {
<div className="text-sm font-medium text-secondary-900 dark:text-white">
{u.username}
</div>
<div className="text-sm text-secondary-500 dark:text-white/70">
<div className="text-sm text-secondary-500 dark:text-secondary-400">
{u.last_login
? formatRelativeTime(u.last_login)
: "Never"}
@@ -1074,7 +1065,7 @@ const Dashboard = () => {
</div>
))}
{(!recentUsers || recentUsers.length === 0) && (
<div className="text-center text-secondary-500 dark:text-white/70 py-4">
<div className="text-center text-secondary-500 dark:text-secondary-400 py-4">
No users found
</div>
)}
@@ -1085,7 +1076,7 @@ const Dashboard = () => {
case "recentCollection":
return (
<div className="card p-4 sm:p-6">
<div className="card p-6">
<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
Recent Collection
</h3>
@@ -1103,7 +1094,7 @@ const Dashboard = () => {
>
{host.friendly_name || host.hostname}
</button>
<div className="text-sm text-secondary-500 dark:text-white/70">
<div className="text-sm text-secondary-500 dark:text-secondary-400">
{host.last_update
? formatRelativeTime(host.last_update)
: "Never"}
@@ -1111,7 +1102,7 @@ const Dashboard = () => {
</div>
))}
{(!recentCollection || recentCollection.length === 0) && (
<div className="text-center text-secondary-500 dark:text-white/70 py-4">
<div className="text-center text-secondary-500 dark:text-secondary-400 py-4">
No hosts found
</div>
)}
@@ -1163,13 +1154,13 @@ const Dashboard = () => {
maintainAspectRatio: false,
plugins: {
legend: {
position: isMobile ? "bottom" : "right",
position: "right",
labels: {
color: isDark ? "#ffffff" : "#374151",
font: {
size: isMobile ? 10 : 12,
size: 12,
},
padding: isMobile ? 10 : 15,
padding: 15,
usePointStyle: true,
pointStyle: "circle",
},
@@ -1177,7 +1168,7 @@ const Dashboard = () => {
},
layout: {
padding: {
right: isMobile ? 10 : 20,
right: 20,
},
},
onClick: handleOSChartClick,
@@ -1188,13 +1179,13 @@ const Dashboard = () => {
maintainAspectRatio: false,
plugins: {
legend: {
position: isMobile ? "bottom" : "right",
position: "right",
labels: {
color: isDark ? "#ffffff" : "#374151",
font: {
size: isMobile ? 10 : 12,
size: 12,
},
padding: isMobile ? 10 : 15,
padding: 15,
usePointStyle: true,
pointStyle: "circle",
},
@@ -1202,7 +1193,7 @@ const Dashboard = () => {
},
layout: {
padding: {
right: isMobile ? 10 : 20,
right: 20,
},
},
onClick: handleOSChartClick,
@@ -1593,10 +1584,10 @@ const Dashboard = () => {
{/* Page Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-xl sm:text-2xl font-semibold text-secondary-900 dark:text-white">
<h1 className="text-2xl font-semibold text-secondary-900 dark:text-white">
Welcome back, {user?.first_name || user?.username || "User"} 👋
</h1>
<p className="text-sm text-secondary-600 dark:text-white/80 mt-1">
<p className="text-sm text-secondary-600 dark:text-secondary-400 mt-1">
Overview of your PatchMon infrastructure
</p>
</div>
@@ -1604,7 +1595,7 @@ const Dashboard = () => {
<button
type="button"
onClick={() => setShowSettingsModal(true)}
className="hidden md:flex btn-outline items-center gap-2"
className="btn-outline flex items-center gap-2"
title="Customize dashboard layout"
>
<Settings className="h-4 w-4" />
@@ -1613,7 +1604,7 @@ const Dashboard = () => {
type="button"
onClick={() => refetch()}
disabled={isFetching}
className="btn-outline flex items-center gap-2 min-h-[44px] min-w-[44px] justify-center"
className="btn-outline flex items-center gap-2"
title="Refresh dashboard data"
>
<RefreshCw

View File

@@ -1013,9 +1013,12 @@ const HostDetail = () => {
</div>
)}
{(host.kernel_version ||
host.installed_kernel_version) && (
<div className="flex flex-col gap-2">
{host.kernel_version && (
<div>
<p className="text-xs text-secondary-500 dark:text-secondary-300">
<p className="text-xs text-secondary-500 dark:text-secondary-300 mb-1">
Running Kernel
</p>
<p className="font-medium text-secondary-900 dark:text-white font-mono text-sm break-all">
@@ -1023,10 +1026,9 @@ const HostDetail = () => {
</p>
</div>
)}
{host.installed_kernel_version && (
<div>
<p className="text-xs text-secondary-500 dark:text-secondary-300">
<p className="text-xs text-secondary-500 dark:text-secondary-300 mb-1">
Installed Kernel
</p>
<p className="font-medium text-secondary-900 dark:text-white font-mono text-sm break-all">
@@ -1034,6 +1036,8 @@ const HostDetail = () => {
</p>
</div>
)}
</div>
)}
{host.selinux_status && (
<div>

View File

@@ -13,7 +13,6 @@ import {
Eye as EyeIcon,
EyeOff as EyeOffIcon,
Filter,
FolderPlus,
GripVertical,
Plus,
RefreshCw,
@@ -22,6 +21,7 @@ import {
Server,
Square,
Trash2,
Users,
Wifi,
X,
} from "lucide-react";
@@ -94,8 +94,8 @@ const AddHostModal = ({ isOpen, onClose, onSuccess }) => {
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white dark:bg-secondary-800 rounded-lg p-4 sm:p-6 w-full max-w-md max-h-[90vh] overflow-y-auto">
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white dark:bg-secondary-800 rounded-lg p-6 w-full max-w-md">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-medium text-secondary-900 dark:text-white">
Add New Host
@@ -125,7 +125,7 @@ const AddHostModal = ({ isOpen, onClose, onSuccess }) => {
onChange={(e) =>
setFormData({ ...formData, friendly_name: e.target.value })
}
className="block w-full px-3 py-3 sm:py-2.5 text-base border-2 border-secondary-300 dark:border-secondary-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white transition-all duration-200 min-h-[44px]"
className="block w-full px-3 py-2.5 text-base border-2 border-secondary-300 dark:border-secondary-600 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white transition-all duration-200"
placeholder="server.example.com"
/>
<p className="mt-2 text-sm text-secondary-500 dark:text-secondary-400">
@@ -197,18 +197,18 @@ const AddHostModal = ({ isOpen, onClose, onSuccess }) => {
</div>
)}
<div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-3 pt-2">
<div className="flex justify-end space-x-3 pt-2">
<button
type="button"
onClick={onClose}
className="px-6 py-3 text-sm font-medium text-secondary-700 dark:text-secondary-200 bg-white dark:bg-secondary-700 border-2 border-secondary-300 dark:border-secondary-600 rounded-lg hover:bg-secondary-50 dark:hover:bg-secondary-600 transition-all duration-200 min-h-[44px] w-full sm:w-auto"
className="px-6 py-3 text-sm font-medium text-secondary-700 dark:text-secondary-200 bg-white dark:bg-secondary-700 border-2 border-secondary-300 dark:border-secondary-600 rounded-lg hover:bg-secondary-50 dark:hover:bg-secondary-600 transition-all duration-200"
>
Cancel
</button>
<button
type="submit"
disabled={isSubmitting}
className="px-6 py-3 text-sm font-medium text-white bg-primary-600 border-2 border-transparent rounded-lg hover:bg-primary-700 disabled:opacity-50 transition-all duration-200 min-h-[44px] w-full sm:w-auto"
className="px-6 py-3 text-sm font-medium text-white bg-primary-600 border-2 border-transparent rounded-lg hover:bg-primary-700 disabled:opacity-50 transition-all duration-200"
>
{isSubmitting ? "Creating..." : "Create Host"}
</button>
@@ -649,27 +649,11 @@ const Hosts = () => {
);
};
const handleSelectAll = (hostsToSelect) => {
const hostIdsToSelect = hostsToSelect.map((host) => host.id);
const allSelected = hostIdsToSelect.every((id) =>
selectedHosts.includes(id),
);
if (allSelected) {
// Deselect all hosts in this group
setSelectedHosts((prev) =>
prev.filter((id) => !hostIdsToSelect.includes(id)),
);
const handleSelectAll = () => {
if (selectedHosts.length === hosts.length) {
setSelectedHosts([]);
} else {
// Select all hosts in this group (merge with existing selections)
setSelectedHosts((prev) => {
const newSelection = [...prev];
hostIdsToSelect.forEach((id) => {
if (!newSelection.includes(id)) {
newSelection.push(id);
}
});
return newSelection;
});
setSelectedHosts(hosts.map((host) => host.id));
}
};
@@ -1122,17 +1106,11 @@ const Hosts = () => {
}
>
<div
className={`w-2 h-2 rounded-full ${wsStatus.connected ? "mr-1.5" : "mr-1.5 md:mr-0"} ${
className={`w-2 h-2 rounded-full mr-1.5 ${
wsStatus.connected ? "bg-green-500 animate-pulse" : "bg-red-500"
}`}
></div>
<span className="hidden md:inline">
{wsStatus.connected
? wsStatus.secure
? "WSS"
: "WS"
: "Offline"}
</span>
{wsStatus.connected ? (wsStatus.secure ? "WSS" : "WS") : "Offline"}
</span>
);
}
@@ -1307,14 +1285,14 @@ const Hosts = () => {
}
return (
<div className="min-h-0 flex flex-col md:h-[calc(100vh-7rem)] md:overflow-hidden">
<div className="h-[calc(100vh-7rem)] flex flex-col overflow-hidden">
{/* Page Header */}
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-semibold text-secondary-900 dark:text-white">
Hosts
</h1>
<p className="text-sm text-secondary-600 dark:text-white/80 mt-1">
<p className="text-sm text-secondary-600 dark:text-secondary-400 mt-1">
Manage and monitor your connected hosts
</p>
</div>
@@ -1342,7 +1320,7 @@ const Hosts = () => {
</div>
{/* Stats Summary */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-6">
<div className="grid grid-cols-1 sm:grid-cols-4 gap-4 mb-6">
<button
type="button"
className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 text-left w-full"
@@ -1426,7 +1404,7 @@ const Hosts = () => {
<span className="text-sm font-medium text-secondary-900 dark:text-white">
{connectedCount}
</span>
<span className="text-xs text-secondary-500 dark:text-secondary-400 hidden sm:inline">
<span className="text-xs text-secondary-500 dark:text-secondary-400">
Connected
</span>
</div>
@@ -1435,7 +1413,7 @@ const Hosts = () => {
<span className="text-sm font-medium text-secondary-900 dark:text-white">
{offlineCount}
</span>
<span className="text-xs text-secondary-500 dark:text-secondary-400 hidden sm:inline">
<span className="text-xs text-secondary-500 dark:text-secondary-400">
Offline
</span>
</div>
@@ -1448,39 +1426,37 @@ const Hosts = () => {
</div>
{/* Hosts List */}
<div className="card flex-1 flex flex-col md:overflow-hidden min-h-0">
<div className="px-4 py-4 sm:p-4 flex-1 flex flex-col md:overflow-hidden min-h-0">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-end gap-3 mb-4">
<div className="card flex-1 flex flex-col overflow-hidden min-h-0">
<div className="px-4 py-4 sm:p-4 flex-1 flex flex-col overflow-hidden min-h-0">
<div className="flex items-center justify-end mb-4">
{selectedHosts.length > 0 && (
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
<span className="text-sm text-secondary-600 dark:text-white/80 flex-shrink-0">
<div className="flex items-center gap-3">
<span className="text-sm text-secondary-600">
{selectedHosts.length} host
{selectedHosts.length !== 1 ? "s" : ""} selected
</span>
<button
type="button"
onClick={() => setShowBulkAssignModal(true)}
className="btn-outline flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-2 min-h-[44px] text-xs sm:text-sm"
className="btn-outline flex items-center gap-2"
>
<FolderPlus className="h-4 w-4 flex-shrink-0" />
<span className="hidden sm:inline">Assign to Group</span>
<span className="sm:hidden">Assign</span>
<Users className="h-4 w-4" />
Assign to Group
</button>
<button
type="button"
onClick={() => setShowBulkDeleteModal(true)}
className="btn-danger flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-2 min-h-[44px] text-xs sm:text-sm"
className="btn-danger flex items-center gap-2"
>
<Trash2 className="h-4 w-4 flex-shrink-0" />
<span>Delete</span>
<Trash2 className="h-4 w-4" />
Delete
</button>
<button
type="button"
onClick={() => setSelectedHosts([])}
className="text-xs sm:text-sm text-secondary-500 dark:text-white/70 hover:text-secondary-700 dark:hover:text-white/90 min-h-[44px] px-2"
className="text-sm text-secondary-500 hover:text-secondary-700"
>
<span className="hidden sm:inline">Clear Selection</span>
<span className="sm:hidden">Clear</span>
Clear Selection
</button>
</div>
)}
@@ -1502,28 +1478,28 @@ const Hosts = () => {
/>
</div>
</div>
<div className="flex flex-wrap gap-2">
<div className="flex gap-2">
<button
type="button"
onClick={() => setShowFilters(!showFilters)}
className={`btn-outline flex items-center gap-1.5 sm:gap-2 px-2 sm:px-4 py-2 min-h-[44px] text-xs sm:text-sm ${showFilters ? "bg-primary-50 border-primary-300" : ""}`}
className={`btn-outline flex items-center gap-2 ${showFilters ? "bg-primary-50 border-primary-300" : ""}`}
>
<Filter className="h-4 w-4 flex-shrink-0" />
<span className="hidden sm:inline">Filters</span>
<Filter className="h-4 w-4" />
Filters
</button>
<button
type="button"
onClick={() => setShowColumnSettings(true)}
className="btn-outline flex items-center gap-1.5 sm:gap-2 px-2 sm:px-4 py-2 min-h-[44px] text-xs sm:text-sm"
className="btn-outline flex items-center gap-2"
>
<Columns className="h-4 w-4 flex-shrink-0" />
<span className="hidden sm:inline">Columns</span>
<Columns className="h-4 w-4" />
Columns
</button>
<div className="relative">
<select
value={groupBy}
onChange={(e) => setGroupBy(e.target.value)}
className="appearance-none bg-white dark:bg-secondary-800 border-2 border-secondary-300 dark:border-secondary-600 rounded-lg px-2 py-2 pr-6 text-xs sm:text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-secondary-900 dark:text-white hover:border-secondary-400 dark:hover:border-secondary-500 transition-colors min-w-[100px] sm:min-w-[120px] min-h-[44px]"
className="appearance-none bg-white dark:bg-secondary-800 border-2 border-secondary-300 dark:border-secondary-600 rounded-lg px-2 py-2 pr-6 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-secondary-900 dark:text-white hover:border-secondary-400 dark:hover:border-secondary-500 transition-colors min-w-[120px]"
>
<option value="none">No Grouping</option>
<option value="group">By Group</option>
@@ -1535,18 +1511,18 @@ const Hosts = () => {
<button
type="button"
onClick={() => setHideStale(!hideStale)}
className={`btn-outline flex items-center gap-1.5 sm:gap-2 px-2 sm:px-4 py-2 min-h-[44px] text-xs sm:text-sm ${hideStale ? "bg-primary-50 border-primary-300" : ""}`}
className={`btn-outline flex items-center gap-2 ${hideStale ? "bg-primary-50 border-primary-300" : ""}`}
>
<AlertTriangle className="h-4 w-4 flex-shrink-0" />
<span className="hidden sm:inline">Hide Stale</span>
<AlertTriangle className="h-4 w-4" />
Hide Stale
</button>
</div>
</div>
{/* Advanced Filters */}
{showFilters && (
<div className="bg-secondary-50 dark:bg-secondary-700 p-3 sm:p-4 rounded-lg border dark:border-secondary-600">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
<div className="bg-secondary-50 dark:bg-secondary-700 p-4 rounded-lg border dark:border-secondary-600">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div>
<label
htmlFor={hostGroupFilterId}
@@ -1558,7 +1534,7 @@ const Hosts = () => {
id={hostGroupFilterId}
value={groupFilter}
onChange={(e) => setGroupFilter(e.target.value)}
className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2.5 sm:py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white min-h-[44px]"
className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white"
>
<option value="all">All Groups</option>
<option value="ungrouped">Ungrouped</option>
@@ -1580,7 +1556,7 @@ const Hosts = () => {
id={statusFilterId}
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2.5 sm:py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white min-h-[44px]"
className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white"
>
<option value="all">All Status</option>
<option value="active">Active</option>
@@ -1600,7 +1576,7 @@ const Hosts = () => {
id={osFilterId}
value={osFilter}
onChange={(e) => setOsFilter(e.target.value)}
className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2.5 sm:py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white min-h-[44px]"
className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white"
>
<option value="all">All OS</option>
{uniqueOsTypes.map((osType) => (
@@ -1621,7 +1597,7 @@ const Hosts = () => {
setGroupBy("none");
setHideStale(false);
}}
className="btn-outline w-full min-h-[44px]"
className="btn-outline w-full"
>
Clear Filters
</button>
@@ -1631,7 +1607,7 @@ const Hosts = () => {
)}
</div>
<div className="flex-1 md:overflow-hidden">
<div className="flex-1 overflow-hidden">
{!hosts || hosts.length === 0 ? (
<div className="text-center py-8">
<Server className="h-12 w-12 text-secondary-400 mx-auto mb-4" />
@@ -1652,7 +1628,7 @@ const Hosts = () => {
</p>
</div>
) : (
<div className="md:h-full overflow-auto">
<div className="h-full overflow-auto">
<div className="space-y-6">
{Object.entries(groupedHosts).map(
([groupName, groupHosts]) => (
@@ -1666,246 +1642,24 @@ const Hosts = () => {
</div>
)}
{/* Mobile Card Layout */}
<div className="md:hidden space-y-3">
{groupHosts.map((host) => {
const isInactive =
(host.effectiveStatus || host.status) ===
"inactive";
const isSelected = selectedHosts.includes(host.id);
const wsStatus = wsStatusMap[host.api_id];
const groupIds =
host.host_group_memberships?.map(
(membership) => membership.host_groups.id,
) || [];
const groups =
hostGroups?.filter((g) =>
groupIds.includes(g.id),
) || [];
return (
<div
key={host.id}
className={`card p-4 space-y-3 ${
isSelected
? "ring-2 ring-primary-500 bg-primary-50 dark:bg-primary-900/20"
: isInactive
? "bg-red-50 dark:bg-red-900/20"
: ""
}`}
>
{/* Header with select and main info */}
<div className="flex items-start justify-between gap-3">
<div className="flex items-center gap-2 flex-1 min-w-0">
{visibleColumns.some(
(col) => col.id === "select",
) && (
<button
type="button"
onClick={() =>
handleSelectHost(host.id)
}
className="flex-shrink-0 min-w-[44px] min-h-[44px] flex items-center justify-center"
>
{isSelected ? (
<CheckSquare className="h-5 w-5 text-primary-600" />
) : (
<Square className="h-5 w-5 text-secondary-400" />
)}
</button>
)}
<div className="flex-1 min-w-0">
{visibleColumns.some(
(col) => col.id === "host",
) && (
<Link
to={`/hosts/${host.id}`}
className="text-base font-semibold text-secondary-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 block truncate"
>
{host.friendly_name || "Unnamed Host"}
</Link>
)}
{visibleColumns.some(
(col) => col.id === "hostname",
) &&
host.hostname && (
<div className="text-sm text-secondary-500 dark:text-secondary-400 font-mono truncate">
{host.hostname}
</div>
)}
</div>
</div>
{visibleColumns.some(
(col) => col.id === "actions",
) && (
<Link
to={`/hosts/${host.id}`}
className="btn-primary text-sm px-3 py-2 min-h-[44px] flex items-center gap-1 flex-shrink-0"
>
View
<ExternalLink className="h-4 w-4" />
</Link>
)}
</div>
{/* Status and connection info */}
<div className="flex flex-wrap items-center gap-2">
{visibleColumns.some(
(col) => col.id === "status",
) && (
<span className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-secondary-100 text-secondary-700 dark:bg-secondary-700 dark:text-secondary-300">
{(host.effectiveStatus || host.status)
.charAt(0)
.toUpperCase() +
(
host.effectiveStatus || host.status
).slice(1)}
</span>
)}
{visibleColumns.some(
(col) => col.id === "ws_status",
) &&
wsStatus && (
<span
className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${
wsStatus.connected
? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
}`}
>
<div
className={`w-2 h-2 rounded-full ${wsStatus.connected ? "mr-1.5" : "mr-1.5 md:mr-0"} ${
wsStatus.connected
? "bg-green-500 animate-pulse"
: "bg-red-500"
}`}
></div>
<span className="hidden md:inline">
{wsStatus.connected
? wsStatus.secure
? "WSS"
: "WS"
: "Offline"}
</span>
</span>
)}
{visibleColumns.some(
(col) => col.id === "needs_reboot",
) &&
(host.needs_reboot ? (
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
<RotateCcw className="h-3 w-3" />
Reboot Required
</span>
) : null)}
</div>
{/* OS and Group info */}
<div className="flex flex-wrap items-center gap-3 text-sm">
{visibleColumns.some(
(col) => col.id === "os",
) && (
<div className="flex items-center gap-2">
<OSIcon
osType={host.os_type}
className="h-4 w-4"
/>
<span className="text-secondary-700 dark:text-secondary-300">
{getOSDisplayName(host.os_type)}
</span>
</div>
)}
{visibleColumns.some(
(col) => col.id === "group",
) &&
groups.length > 0 && (
<div className="flex items-center gap-1 flex-wrap">
<span className="text-secondary-500 dark:text-secondary-400">
Groups:
</span>
{groups.map((g, idx) => (
<span
key={g.id}
className="text-secondary-700 dark:text-secondary-300"
>
{g.name}
{idx < groups.length - 1 ? "," : ""}
</span>
))}
</div>
)}
</div>
{/* Updates info */}
<div className="flex items-center gap-4 pt-2 border-t border-secondary-200 dark:border-secondary-600">
{visibleColumns.some(
(col) => col.id === "updates",
) && (
<button
type="button"
onClick={() =>
navigate(
`/packages?host=${host.id}&filter=outdated`,
)
}
className="text-sm text-primary-600 hover:text-primary-900 dark:text-primary-400 dark:hover:text-primary-300 font-medium min-h-[44px] flex items-center"
>
{host.updatesCount || 0} Updates
</button>
)}
{visibleColumns.some(
(col) => col.id === "security_updates",
) && (
<button
type="button"
onClick={() =>
navigate(
`/packages?host=${host.id}&filter=security-updates`,
)
}
className="text-sm text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 font-medium min-h-[44px] flex items-center"
>
{host.securityUpdatesCount || 0} Security
</button>
)}
{visibleColumns.some(
(col) => col.id === "last_update",
) && (
<div className="text-xs text-secondary-500 dark:text-secondary-400 ml-auto">
Updated{" "}
{formatRelativeTime(host.last_update)}
</div>
)}
</div>
</div>
);
})}
</div>
{/* Desktop Table Layout */}
<div className="hidden md:block overflow-x-auto">
<table
className="min-w-full divide-y divide-secondary-200 dark:divide-secondary-600"
style={{ minWidth: "max-content" }}
>
{/* Table for this group */}
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-secondary-200 dark:divide-secondary-600">
<thead className="bg-secondary-50 dark:bg-secondary-700">
<tr>
{visibleColumns.map((column) => (
<th
key={column.id}
className="px-3 sm:px-4 py-2 text-center text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider whitespace-nowrap"
className="px-4 py-2 text-center text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider"
>
{column.id === "select" ? (
<button
type="button"
onClick={() =>
handleSelectAll(groupHosts)
}
onClick={handleSelectAll}
className="flex items-center gap-2 hover:text-secondary-700"
>
{groupHosts.every((host) =>
selectedHosts.includes(host.id),
) ? (
{selectedHosts.length ===
groupHosts.length ? (
<CheckSquare className="h-4 w-4" />
) : (
<Square className="h-4 w-4" />
@@ -2069,7 +1823,7 @@ const Hosts = () => {
{visibleColumns.map((column) => (
<td
key={column.id}
className="px-3 sm:px-4 py-2 whitespace-nowrap text-center"
className="px-4 py-2 whitespace-nowrap text-center"
>
{renderCellContent(column, host)}
</td>
@@ -2411,6 +2165,7 @@ const ColumnSettingsModal = ({
key={column.id}
type="button"
draggable
tabIndex={0}
aria-label={`Drag to reorder ${column.label} column`}
onDragStart={(e) => handleDragStart(e, index)}
onDragOver={handleDragOver}
@@ -2421,7 +2176,7 @@ const ColumnSettingsModal = ({
// Focus handling for keyboard users
}
}}
className={`flex items-center justify-between p-2.5 border rounded-lg cursor-move w-full transition-colors ${
className={`flex items-center justify-between p-2.5 border rounded-lg cursor-move w-full text-left transition-colors ${
draggedIndex === index
? "opacity-50"
: "hover:bg-secondary-50 dark:hover:bg-secondary-700"
@@ -2435,20 +2190,12 @@ const ColumnSettingsModal = ({
</div>
<button
type="button"
onClick={(e) => {
e.stopPropagation();
onToggleVisibility(column.id);
}}
className={`p-1 rounded transition-colors flex-shrink-0 min-w-[44px] min-h-[44px] flex items-center justify-center ${
onClick={() => onToggleVisibility(column.id)}
className={`p-1 rounded transition-colors flex-shrink-0 ${
column.visible
? "text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
: "text-secondary-400 hover:text-secondary-600 dark:text-secondary-500 dark:hover:text-secondary-300"
}`}
aria-label={
column.visible
? `Hide ${column.label} column`
: `Show ${column.label} column`
}
>
{column.visible ? (
<EyeIcon className="h-4 w-4" />

View File

@@ -1586,7 +1586,7 @@ const Integrations = () => {
<div className="flex items-center gap-2">
<input
type="text"
value={`curl ${curl_flags} "${getEnrollmentUrl()}" | ${selected_script_type === "proxmox-lxc" ? "bash" : "sh"}`}
value={`curl ${curl_flags} "${getEnrollmentUrl()}" | sh`}
readOnly
className="flex-1 px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md bg-secondary-50 dark:bg-secondary-900 text-secondary-900 dark:text-white font-mono text-xs"
/>
@@ -1594,7 +1594,7 @@ const Integrations = () => {
type="button"
onClick={() =>
copy_to_clipboard(
`curl ${curl_flags} "${getEnrollmentUrl()}" | ${selected_script_type === "proxmox-lxc" ? "bash" : "sh"}`,
`curl ${curl_flags} "${getEnrollmentUrl()}" | sh`,
"enrollment-command",
)
}

171
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "patchmon",
"version": "1.3.4",
"version": "1.3.5",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "patchmon",
"version": "1.3.4",
"version": "1.3.5",
"license": "AGPL-3.0",
"workspaces": [
"backend",
@@ -23,14 +23,14 @@
},
"backend": {
"name": "patchmon-backend",
"version": "1.3.4",
"version": "1.3.5",
"license": "AGPL-3.0",
"dependencies": {
"@bull-board/api": "^6.13.1",
"@bull-board/express": "^6.13.1",
"@prisma/client": "^6.1.0",
"axios": "^1.7.9",
"bcryptjs": "^2.4.3",
"bcryptjs": "^3.0.0",
"bullmq": "^5.61.0",
"cookie-parser": "^1.4.7",
"cors": "^2.8.5",
@@ -49,7 +49,7 @@
"ws": "^8.18.0"
},
"devDependencies": {
"@types/bcryptjs": "^2.4.6",
"@types/bcryptjs": "^3.0.0",
"nodemon": "^3.1.9",
"prisma": "^6.1.0"
},
@@ -59,7 +59,7 @@
},
"frontend": {
"name": "patchmon-frontend",
"version": "1.3.4",
"version": "1.3.5",
"license": "AGPL-3.0",
"dependencies": {
"@dnd-kit/core": "^6.3.1",
@@ -134,6 +134,7 @@
"version": "7.28.4",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.3",
@@ -547,6 +548,7 @@
"node_modules/@bull-board/ui": {
"version": "6.13.1",
"license": "MIT",
"peer": true,
"dependencies": {
"@bull-board/api": "6.13.1"
}
@@ -580,6 +582,7 @@
"node_modules/@dnd-kit/core": {
"version": "6.3.1",
"license": "MIT",
"peer": true,
"dependencies": {
"@dnd-kit/accessibility": "^3.1.1",
"@dnd-kit/utilities": "^3.2.2",
@@ -988,9 +991,15 @@
}
},
"node_modules/@types/bcryptjs": {
"version": "2.4.6",
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-3.0.0.tgz",
"integrity": "sha512-WRZOuCuaz8UcZZE4R5HXTco2goQSI2XxjGY3hbM/xDvwmqFWd4ivooImsMx65OKM6CtNKbnZ5YL+YwAwK7c1dg==",
"deprecated": "This is a stub types definition. bcryptjs provides its own type definitions, so you do not need this installed.",
"dev": true,
"license": "MIT"
"license": "MIT",
"dependencies": {
"bcryptjs": "*"
}
},
"node_modules/@types/estree": {
"version": "1.0.8",
@@ -1020,6 +1029,7 @@
"version": "18.3.24",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
@@ -1183,8 +1193,13 @@
}
},
"node_modules/bcryptjs": {
"version": "2.4.3",
"license": "MIT"
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.3.tgz",
"integrity": "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g==",
"license": "BSD-3-Clause",
"bin": {
"bcrypt": "bin/bcrypt"
}
},
"node_modules/binary-extensions": {
"version": "2.3.0",
@@ -1267,6 +1282,7 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.8.3",
"caniuse-lite": "^1.0.30001741",
@@ -1456,6 +1472,7 @@
"node_modules/chart.js": {
"version": "4.5.0",
"license": "MIT",
"peer": true,
"dependencies": {
"@kurkle/color": "^0.3.0"
},
@@ -2030,6 +2047,7 @@
"node_modules/express": {
"version": "4.21.2",
"license": "MIT",
"peer": true,
"dependencies": {
"accepts": "~1.3.8",
"array-flatten": "1.1.1",
@@ -2795,6 +2813,76 @@
"lefthook-windows-x64": "1.13.5"
}
},
"node_modules/lefthook-darwin-arm64": {
"version": "1.13.5",
"resolved": "https://registry.npmjs.org/lefthook-darwin-arm64/-/lefthook-darwin-arm64-1.13.5.tgz",
"integrity": "sha512-BYt5CnAOXasVCS6i+A4ljUo9xru/B5uMFD6EWHhs3R26jGF7mBSDxM3ErzXTUaJRTP0kQI/XBmgqBryBqoqZOQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
]
},
"node_modules/lefthook-darwin-x64": {
"version": "1.13.5",
"resolved": "https://registry.npmjs.org/lefthook-darwin-x64/-/lefthook-darwin-x64-1.13.5.tgz",
"integrity": "sha512-ZDtLBzvI5e26C/RZ4irOHpELTd22x9lDTgF2+eCYcnrBWOkB7800V8tuAvBybsLGvg6JwKjFxn+NTRNZnCC2hw==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
]
},
"node_modules/lefthook-freebsd-arm64": {
"version": "1.13.5",
"resolved": "https://registry.npmjs.org/lefthook-freebsd-arm64/-/lefthook-freebsd-arm64-1.13.5.tgz",
"integrity": "sha512-uQ/kQZSSedw74aGCpsfOPN4yVt3klg8grOP6gHQOCRUMv5oK/Lj3pe1PylpTuuhxWORWRzkauPMot26J0OZZdA==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
]
},
"node_modules/lefthook-freebsd-x64": {
"version": "1.13.5",
"resolved": "https://registry.npmjs.org/lefthook-freebsd-x64/-/lefthook-freebsd-x64-1.13.5.tgz",
"integrity": "sha512-6czek8XagVrI7ExURawkfrfX40Qjc/wktc8bLq/iXfRlmdvKDMrx2FrA82mDfEVCAEz+tTvkteK1TfR3icYF3Q==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
]
},
"node_modules/lefthook-linux-arm64": {
"version": "1.13.5",
"resolved": "https://registry.npmjs.org/lefthook-linux-arm64/-/lefthook-linux-arm64-1.13.5.tgz",
"integrity": "sha512-MjWtiuW1br+rpTtgG1KGV53mSGtL5MWQwgafYzrFleJ89fKb86F4TD/4mVNzk5thmZ+HVPZw9bRZGUHFBnNJWg==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/lefthook-linux-x64": {
"version": "1.13.5",
"cpu": [
@@ -2807,6 +2895,62 @@
"linux"
]
},
"node_modules/lefthook-openbsd-arm64": {
"version": "1.13.5",
"resolved": "https://registry.npmjs.org/lefthook-openbsd-arm64/-/lefthook-openbsd-arm64-1.13.5.tgz",
"integrity": "sha512-lYXrWf0/hBrwtG8ceaHq886bcqRKh3Lfv+jZJs+ykMLB6L/kaqk8tA4V2NHWydQ5h56o45ugs/580nMz36ZdRg==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"openbsd"
]
},
"node_modules/lefthook-openbsd-x64": {
"version": "1.13.5",
"resolved": "https://registry.npmjs.org/lefthook-openbsd-x64/-/lefthook-openbsd-x64-1.13.5.tgz",
"integrity": "sha512-Ba1JrsRbfan4WKd8Q7gUhTxCUuppXzirDObd3JxpLRSLxA47yxhjMv7KByDunRDTvzTgsXoykZI6mPupkc1JiQ==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"openbsd"
]
},
"node_modules/lefthook-windows-arm64": {
"version": "1.13.5",
"resolved": "https://registry.npmjs.org/lefthook-windows-arm64/-/lefthook-windows-arm64-1.13.5.tgz",
"integrity": "sha512-Y/CpmEIb0hlFe+kTT/efWgX6+/gUTp5NItTF+gmUrY1/G/bTLIxdIRS7WpodVM0MEN24sOrQVTSi9DN9FvGoGg==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
]
},
"node_modules/lefthook-windows-x64": {
"version": "1.13.5",
"resolved": "https://registry.npmjs.org/lefthook-windows-x64/-/lefthook-windows-x64-1.13.5.tgz",
"integrity": "sha512-WJBqGNBlFJnunRwy12QyaDHdGULtostPqpYSZSS4boFJDY0lP5qtz9lAGmJ49aA5GQ19jrnDjGLwVPFiwIqksQ==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
]
},
"node_modules/lilconfig": {
"version": "3.1.3",
"dev": true,
@@ -3419,6 +3563,7 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@@ -3548,6 +3693,7 @@
"devOptional": true,
"hasInstallScript": true,
"license": "Apache-2.0",
"peer": true,
"dependencies": {
"@prisma/config": "6.16.2",
"@prisma/engines": "6.16.2"
@@ -3737,6 +3883,7 @@
"node_modules/react": {
"version": "18.3.1",
"license": "MIT",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0"
},
@@ -3755,6 +3902,7 @@
"node_modules/react-dom": {
"version": "18.3.1",
"license": "MIT",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.2"
@@ -4472,6 +4620,7 @@
"version": "4.0.3",
"dev": true,
"license": "MIT",
"peer": true,
"engines": {
"node": ">=12"
},
@@ -4624,6 +4773,7 @@
"version": "7.1.7",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.25.0",
"fdir": "^6.5.0",
@@ -4713,6 +4863,7 @@
"version": "4.0.3",
"dev": true,
"license": "MIT",
"peer": true,
"engines": {
"node": ">=12"
},

View File

@@ -1,6 +1,6 @@
{
"name": "patchmon",
"version": "1.3.6",
"version": "1.3.5",
"description": "Linux Patch Monitoring System",
"license": "AGPL-3.0",
"private": true,