- {children}
-
-
-
- )
-}
+ return "PatchMon";
+ };
-export default Layout
\ No newline at end of file
+ const handleLogout = async () => {
+ await logout();
+ setUserMenuOpen(false);
+ };
+
+ const handleAddHost = () => {
+ // Navigate to hosts page with add modal parameter
+ window.location.href = "/hosts?action=add";
+ };
+
+ // Fetch GitHub stars count
+ const fetchGitHubStars = async () => {
+ try {
+ const response = await fetch(
+ "https://api.github.com/repos/9technologygroup/patchmon.net",
+ );
+ if (response.ok) {
+ const data = await response.json();
+ setGithubStars(data.stargazers_count);
+ }
+ } catch (error) {
+ console.error("Failed to fetch GitHub stars:", error);
+ }
+ };
+
+ // Short format for navigation area
+ const formatRelativeTimeShort = (date) => {
+ if (!date) return "Never";
+
+ const now = new Date();
+ const dateObj = new Date(date);
+
+ // Check if date is valid
+ if (isNaN(dateObj.getTime())) return "Invalid date";
+
+ const diff = now - dateObj;
+ const seconds = Math.floor(diff / 1000);
+ const minutes = Math.floor(seconds / 60);
+ const hours = Math.floor(minutes / 60);
+ const days = Math.floor(hours / 24);
+
+ if (days > 0) return `${days}d ago`;
+ if (hours > 0) return `${hours}h ago`;
+ if (minutes > 0) return `${minutes}m ago`;
+ return `${seconds}s ago`;
+ };
+
+ // Save sidebar collapsed state to localStorage
+ useEffect(() => {
+ localStorage.setItem("sidebarCollapsed", JSON.stringify(sidebarCollapsed));
+ }, [sidebarCollapsed]);
+
+ // Close user menu when clicking outside
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ if (userMenuRef.current && !userMenuRef.current.contains(event.target)) {
+ setUserMenuOpen(false);
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, []);
+
+ // Fetch GitHub stars on component mount
+ useEffect(() => {
+ fetchGitHubStars();
+ }, []);
+
+ return (
+ setSidebarOpen(false)} />
-
+ if (settingsItems.length > 0) {
+ nav.push({
+ section: "Settings",
+ items: settingsItems,
+ });
+ }
+ }
- {/* Desktop sidebar */}
-
-
-
-
-
-
-
-
-
-
- PatchMon
-
-
+ const navigation = buildNavigation();
- {/* Main content */}
-
-
-
- {sidebarCollapsed ? (
-
- ) : (
- <>
-
-
-
+ return nav;
+ };
- {/* Profile Section - Bottom of Sidebar */}
-
-
-
-
- )}
- PatchMon
-
- {!sidebarCollapsed ? (
-
-
- {/* User Info with Sign Out - Username is clickable */}
-
- ) : (
-
-
-
- {/* Updated info */}
- {stats && (
-
-
-
-
-
-
- {user?.first_name || user?.username}
-
- {user?.role === 'admin' && (
-
- Admin
-
- )}
-
-
-
- )}
-
-
-
-
-
- )}
-
-
- {versionInfo && (
-
- v{versionInfo.version}
-
- )}
-
- )}
-
- {/* Top bar */}
-
-
-
-
-
+ const isActive = (path) => location.pathname === path;
- {/* Separator */}
-
+ // Get page title based on current route
+ const getPageTitle = () => {
+ const path = location.pathname;
-
+ if (path === "/") return "Dashboard";
+ if (path === "/hosts") return "Hosts";
+ if (path === "/packages") return "Packages";
+ if (path === "/repositories" || path.startsWith("/repositories/"))
+ return "Repositories";
+ if (path === "/services") return "Services";
+ if (path === "/docker") return "Docker";
+ if (path === "/users") return "Users";
+ if (path === "/permissions") return "Permissions";
+ if (path === "/settings") return "Settings";
+ if (path === "/options") return "PatchMon Options";
+ if (path === "/audit-log") return "Audit Log";
+ if (path === "/profile") return "My Profile";
+ if (path.startsWith("/hosts/")) return "Host Details";
+ if (path.startsWith("/packages/")) return "Package Details";
-
-
-
-
- - {getPageTitle()} -
-
- {/* External Links */}
-
-
-
+ {/* Mobile sidebar */}
+
- {children}
-
- )
-}
+ // Check for admin users on initial load
+ useEffect(() => {
+ if (!token && !user) {
+ checkAdminUsersExist();
+ } else {
+ setCheckingSetup(false);
+ }
+ }, [token, user, checkAdminUsersExist]);
+
+ const setAuthState = (authToken, authUser) => {
+ setToken(authToken);
+ setUser(authUser);
+ localStorage.setItem("token", authToken);
+ localStorage.setItem("user", JSON.stringify(authUser));
+ };
+
+ const value = {
+ user,
+ token,
+ permissions,
+ isLoading: isLoading || permissionsLoading || checkingSetup,
+ needsFirstTimeSetup,
+ checkingSetup,
+ login,
+ logout,
+ updateProfile,
+ changePassword,
+ refreshPermissions,
+ setAuthState,
+ isAuthenticated,
+ isAdmin,
+ hasPermission,
+ canViewDashboard,
+ canViewHosts,
+ canManageHosts,
+ canViewPackages,
+ canManagePackages,
+ canViewUsers,
+ canManageUsers,
+ canViewReports,
+ canExportData,
+ canManageSettings,
+ };
+
+ return {children} ;
+};
diff --git a/frontend/src/contexts/ThemeContext.jsx b/frontend/src/contexts/ThemeContext.jsx
index a289b3c..d70a623 100644
--- a/frontend/src/contexts/ThemeContext.jsx
+++ b/frontend/src/contexts/ThemeContext.jsx
@@ -1,54 +1,52 @@
-import React, { createContext, useContext, useEffect, useState } from 'react'
+import React, { createContext, useContext, useEffect, useState } from "react";
-const ThemeContext = createContext()
+const ThemeContext = createContext();
export const useTheme = () => {
- const context = useContext(ThemeContext)
- if (!context) {
- throw new Error('useTheme must be used within a ThemeProvider')
- }
- return context
-}
+ const context = useContext(ThemeContext);
+ if (!context) {
+ throw new Error("useTheme must be used within a ThemeProvider");
+ }
+ return context;
+};
export const ThemeProvider = ({ children }) => {
- const [theme, setTheme] = useState(() => {
- // Check localStorage first, then system preference
- const savedTheme = localStorage.getItem('theme')
- if (savedTheme) {
- return savedTheme
- }
- // Check system preference
- if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
- return 'dark'
- }
- return 'light'
- })
+ const [theme, setTheme] = useState(() => {
+ // Check localStorage first, then system preference
+ const savedTheme = localStorage.getItem("theme");
+ if (savedTheme) {
+ return savedTheme;
+ }
+ // Check system preference
+ if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+ return "dark";
+ }
+ return "light";
+ });
- useEffect(() => {
- // Apply theme to document
- if (theme === 'dark') {
- document.documentElement.classList.add('dark')
- } else {
- document.documentElement.classList.remove('dark')
- }
-
- // Save to localStorage
- localStorage.setItem('theme', theme)
- }, [theme])
+ useEffect(() => {
+ // Apply theme to document
+ if (theme === "dark") {
+ document.documentElement.classList.add("dark");
+ } else {
+ document.documentElement.classList.remove("dark");
+ }
- const toggleTheme = () => {
- setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light')
- }
+ // Save to localStorage
+ localStorage.setItem("theme", theme);
+ }, [theme]);
- const value = {
- theme,
- toggleTheme,
- isDark: theme === 'dark'
- }
+ const toggleTheme = () => {
+ setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+ };
- return (
-
- {children}
-
- )
-}
+ const value = {
+ theme,
+ toggleTheme,
+ isDark: theme === "dark",
+ };
+
+ return (
+ {children}
+ );
+};
diff --git a/frontend/src/contexts/UpdateNotificationContext.jsx b/frontend/src/contexts/UpdateNotificationContext.jsx
index d4ad670..a8e9ac0 100644
--- a/frontend/src/contexts/UpdateNotificationContext.jsx
+++ b/frontend/src/contexts/UpdateNotificationContext.jsx
@@ -1,58 +1,64 @@
-import React, { createContext, useContext, useState } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { versionAPI, settingsAPI } from '../utils/api'
-import { useAuth } from './AuthContext'
+import { useQuery } from "@tanstack/react-query";
+import React, { createContext, useContext, useState } from "react";
+import { settingsAPI, versionAPI } from "../utils/api";
+import { useAuth } from "./AuthContext";
-const UpdateNotificationContext = createContext()
+const UpdateNotificationContext = createContext();
export const useUpdateNotification = () => {
- const context = useContext(UpdateNotificationContext)
- if (!context) {
- throw new Error('useUpdateNotification must be used within an UpdateNotificationProvider')
- }
- return context
-}
+ const context = useContext(UpdateNotificationContext);
+ if (!context) {
+ throw new Error(
+ "useUpdateNotification must be used within an UpdateNotificationProvider",
+ );
+ }
+ return context;
+};
export const UpdateNotificationProvider = ({ children }) => {
- const [dismissed, setDismissed] = useState(false)
- const { user, token } = useAuth()
+ const [dismissed, setDismissed] = useState(false);
+ const { user, token } = useAuth();
- // Ensure settings are loaded
- const { data: settings, isLoading: settingsLoading } = useQuery({
- queryKey: ['settings'],
- queryFn: () => settingsAPI.get().then(res => res.data),
- enabled: !!(user && token),
- retry: 1
- })
+ // Ensure settings are loaded
+ const { data: settings, isLoading: settingsLoading } = useQuery({
+ queryKey: ["settings"],
+ queryFn: () => settingsAPI.get().then((res) => res.data),
+ enabled: !!(user && token),
+ retry: 1,
+ });
- // Query for update information
- const { data: updateData, isLoading, error } = useQuery({
- queryKey: ['updateCheck'],
- queryFn: () => versionAPI.checkUpdates().then(res => res.data),
- staleTime: 10 * 60 * 1000, // Data stays fresh for 10 minutes
- refetchOnWindowFocus: false, // Don't refetch when window regains focus
- retry: 1,
- enabled: !!(user && token && settings && !settingsLoading) // Only run when authenticated and settings are loaded
- })
+ // Query for update information
+ const {
+ data: updateData,
+ isLoading,
+ error,
+ } = useQuery({
+ queryKey: ["updateCheck"],
+ queryFn: () => versionAPI.checkUpdates().then((res) => res.data),
+ staleTime: 10 * 60 * 1000, // Data stays fresh for 10 minutes
+ refetchOnWindowFocus: false, // Don't refetch when window regains focus
+ retry: 1,
+ enabled: !!(user && token && settings && !settingsLoading), // Only run when authenticated and settings are loaded
+ });
- const updateAvailable = updateData?.isUpdateAvailable && !dismissed
- const updateInfo = updateData
+ const updateAvailable = updateData?.isUpdateAvailable && !dismissed;
+ const updateInfo = updateData;
- const dismissNotification = () => {
- setDismissed(true)
- }
+ const dismissNotification = () => {
+ setDismissed(true);
+ };
- const value = {
- updateAvailable,
- updateInfo,
- dismissNotification,
- isLoading,
- error
- }
+ const value = {
+ updateAvailable,
+ updateInfo,
+ dismissNotification,
+ isLoading,
+ error,
+ };
- return (
-
- {children}
-
- )
-}
+ return (
+
+ {children}
+
+ );
+};
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 43fafdb..7f46f47 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3,125 +3,125 @@
@tailwind utilities;
@layer base {
- html {
- font-family: Inter, ui-sans-serif, system-ui;
- }
-
- body {
- @apply bg-secondary-50 dark:bg-secondary-800 text-secondary-900 dark:text-secondary-100 antialiased;
- }
+ html {
+ font-family: Inter, ui-sans-serif, system-ui;
+ }
+
+ body {
+ @apply bg-secondary-50 dark:bg-secondary-800 text-secondary-900 dark:text-secondary-100 antialiased;
+ }
}
@layer components {
- .btn {
- @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-150;
- }
-
- .btn-primary {
- @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
- }
-
- .btn-secondary {
- @apply btn bg-secondary-600 text-white hover:bg-secondary-700 focus:ring-secondary-500;
- }
-
- .btn-success {
- @apply btn bg-success-600 text-white hover:bg-success-700 focus:ring-success-500;
- }
-
- .btn-warning {
- @apply btn bg-warning-600 text-white hover:bg-warning-700 focus:ring-warning-500;
- }
-
- .btn-danger {
- @apply btn bg-danger-600 text-white hover:bg-danger-700 focus:ring-danger-500;
- }
-
- .btn-outline {
- @apply btn border-secondary-300 dark:border-secondary-600 text-secondary-700 dark:text-secondary-200 bg-white dark:bg-secondary-800 hover:bg-secondary-50 dark:hover:bg-secondary-700 focus:ring-secondary-500;
- }
-
- .card {
- @apply bg-white dark:bg-secondary-800 rounded-lg shadow-card dark:shadow-card-dark border border-secondary-200 dark:border-secondary-600;
- }
-
- .card-hover {
- @apply card hover:shadow-card-hover transition-shadow duration-150;
- }
-
- .input {
- @apply block w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm bg-white dark:bg-secondary-800 text-secondary-900 dark:text-secondary-100;
- }
-
- .label {
- @apply block text-sm font-medium text-secondary-700 dark:text-secondary-200;
- }
-
- .badge {
- @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
- }
-
- .badge-primary {
- @apply badge bg-primary-100 text-primary-800;
- }
-
- .badge-secondary {
- @apply badge bg-secondary-100 text-secondary-800;
- }
-
- .badge-success {
- @apply badge bg-success-100 text-success-800;
- }
-
- .badge-warning {
- @apply badge bg-warning-100 text-warning-800;
- }
-
- .badge-danger {
- @apply badge bg-danger-100 text-danger-800;
- }
+ .btn {
+ @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-150;
+ }
+
+ .btn-primary {
+ @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
+ }
+
+ .btn-secondary {
+ @apply btn bg-secondary-600 text-white hover:bg-secondary-700 focus:ring-secondary-500;
+ }
+
+ .btn-success {
+ @apply btn bg-success-600 text-white hover:bg-success-700 focus:ring-success-500;
+ }
+
+ .btn-warning {
+ @apply btn bg-warning-600 text-white hover:bg-warning-700 focus:ring-warning-500;
+ }
+
+ .btn-danger {
+ @apply btn bg-danger-600 text-white hover:bg-danger-700 focus:ring-danger-500;
+ }
+
+ .btn-outline {
+ @apply btn border-secondary-300 dark:border-secondary-600 text-secondary-700 dark:text-secondary-200 bg-white dark:bg-secondary-800 hover:bg-secondary-50 dark:hover:bg-secondary-700 focus:ring-secondary-500;
+ }
+
+ .card {
+ @apply bg-white dark:bg-secondary-800 rounded-lg shadow-card dark:shadow-card-dark border border-secondary-200 dark:border-secondary-600;
+ }
+
+ .card-hover {
+ @apply card hover:shadow-card-hover transition-shadow duration-150;
+ }
+
+ .input {
+ @apply block w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm bg-white dark:bg-secondary-800 text-secondary-900 dark:text-secondary-100;
+ }
+
+ .label {
+ @apply block text-sm font-medium text-secondary-700 dark:text-secondary-200;
+ }
+
+ .badge {
+ @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+ }
+
+ .badge-primary {
+ @apply badge bg-primary-100 text-primary-800;
+ }
+
+ .badge-secondary {
+ @apply badge bg-secondary-100 text-secondary-800;
+ }
+
+ .badge-success {
+ @apply badge bg-success-100 text-success-800;
+ }
+
+ .badge-warning {
+ @apply badge bg-warning-100 text-warning-800;
+ }
+
+ .badge-danger {
+ @apply badge bg-danger-100 text-danger-800;
+ }
}
@layer utilities {
- .text-shadow {
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
- }
-
- .scrollbar-thin {
- scrollbar-width: thin;
- scrollbar-color: #cbd5e1 #f1f5f9;
- }
-
- .dark .scrollbar-thin {
- scrollbar-color: #64748b #475569;
- }
-
- .scrollbar-thin::-webkit-scrollbar {
- width: 6px;
- }
-
- .scrollbar-thin::-webkit-scrollbar-track {
- background: #f1f5f9;
- }
-
- .dark .scrollbar-thin::-webkit-scrollbar-track {
- background: #475569;
- }
-
- .scrollbar-thin::-webkit-scrollbar-thumb {
- background-color: #cbd5e1;
- border-radius: 3px;
- }
-
- .dark .scrollbar-thin::-webkit-scrollbar-thumb {
- background-color: #64748b;
- }
-
- .scrollbar-thin::-webkit-scrollbar-thumb:hover {
- background-color: #94a3b8;
- }
-
- .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
- background-color: #94a3b8;
- }
-}
\ No newline at end of file
+ .text-shadow {
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+ }
+
+ .scrollbar-thin {
+ scrollbar-width: thin;
+ scrollbar-color: #cbd5e1 #f1f5f9;
+ }
+
+ .dark .scrollbar-thin {
+ scrollbar-color: #64748b #475569;
+ }
+
+ .scrollbar-thin::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ .scrollbar-thin::-webkit-scrollbar-track {
+ background: #f1f5f9;
+ }
+
+ .dark .scrollbar-thin::-webkit-scrollbar-track {
+ background: #475569;
+ }
+
+ .scrollbar-thin::-webkit-scrollbar-thumb {
+ background-color: #cbd5e1;
+ border-radius: 3px;
+ }
+
+ .dark .scrollbar-thin::-webkit-scrollbar-thumb {
+ background-color: #64748b;
+ }
+
+ .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+ background-color: #94a3b8;
+ }
+
+ .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+ background-color: #94a3b8;
+ }
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index a1e2515..7666468 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,27 +1,27 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import App from './App.jsx'
-import './index.css'
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App.jsx";
+import "./index.css";
// Create a client for React Query
const queryClient = new QueryClient({
- defaultOptions: {
- queries: {
- refetchOnWindowFocus: false,
- retry: 1,
- staleTime: 5 * 60 * 1000, // 5 minutes
- },
- },
-})
+ defaultOptions: {
+ queries: {
+ refetchOnWindowFocus: false,
+ retry: 1,
+ staleTime: 5 * 60 * 1000, // 5 minutes
+ },
+ },
+});
-ReactDOM.createRoot(document.getElementById('root')).render(
-
-
-
-
-
- ,
-)
\ No newline at end of file
+ReactDOM.createRoot(document.getElementById("root")).render(
+
+
+
+
+
+ ,
+);
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index a804e68..24aaaf6 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -1,928 +1,1082 @@
-import React, { useState, useEffect } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { useNavigate } from 'react-router-dom'
-import {
- Server,
- Package,
- AlertTriangle,
- Shield,
- TrendingUp,
- RefreshCw,
- Clock,
- WifiOff,
- Settings,
- Users,
- Folder,
- GitBranch
-} from 'lucide-react'
-import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, Title } from 'chart.js'
-import { Pie, Bar } from 'react-chartjs-2'
-import { dashboardAPI, dashboardPreferencesAPI, settingsAPI, formatRelativeTime } from '../utils/api'
-import DashboardSettingsModal from '../components/DashboardSettingsModal'
-import { useTheme } from '../contexts/ThemeContext'
-import { useAuth } from '../contexts/AuthContext'
+import { useQuery } from "@tanstack/react-query";
+import {
+ ArcElement,
+ BarElement,
+ CategoryScale,
+ Chart as ChartJS,
+ Legend,
+ LinearScale,
+ Title,
+ Tooltip,
+} from "chart.js";
+import {
+ AlertTriangle,
+ Clock,
+ Folder,
+ GitBranch,
+ Package,
+ RefreshCw,
+ Server,
+ Settings,
+ Shield,
+ TrendingUp,
+ Users,
+ WifiOff,
+} from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { Bar, Pie } from "react-chartjs-2";
+import { useNavigate } from "react-router-dom";
+import DashboardSettingsModal from "../components/DashboardSettingsModal";
+import { useAuth } from "../contexts/AuthContext";
+import { useTheme } from "../contexts/ThemeContext";
+import {
+ dashboardAPI,
+ dashboardPreferencesAPI,
+ formatRelativeTime,
+ settingsAPI,
+} from "../utils/api";
// Register Chart.js components
-ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, Title)
+ChartJS.register(
+ ArcElement,
+ Tooltip,
+ Legend,
+ CategoryScale,
+ LinearScale,
+ BarElement,
+ Title,
+);
const Dashboard = () => {
- const [showSettingsModal, setShowSettingsModal] = useState(false)
- const [cardPreferences, setCardPreferences] = useState([])
- const navigate = useNavigate()
- const { isDark } = useTheme()
- const { user } = useAuth()
+ const [showSettingsModal, setShowSettingsModal] = useState(false);
+ const [cardPreferences, setCardPreferences] = useState([]);
+ const navigate = useNavigate();
+ const { isDark } = useTheme();
+ const { user } = useAuth();
- // Navigation handlers
- const handleTotalHostsClick = () => {
- navigate('/hosts', { replace: true })
- }
+ // Navigation handlers
+ const handleTotalHostsClick = () => {
+ navigate("/hosts", { replace: true });
+ };
- const handleHostsNeedingUpdatesClick = () => {
- navigate('/hosts?filter=needsUpdates')
- }
+ const handleHostsNeedingUpdatesClick = () => {
+ navigate("/hosts?filter=needsUpdates");
+ };
- const handleOutdatedPackagesClick = () => {
- navigate('/packages?filter=outdated')
- }
+ const handleOutdatedPackagesClick = () => {
+ navigate("/packages?filter=outdated");
+ };
- const handleSecurityUpdatesClick = () => {
- navigate('/packages?filter=security')
- }
+ const handleSecurityUpdatesClick = () => {
+ navigate("/packages?filter=security");
+ };
- const handleErroredHostsClick = () => {
- navigate('/hosts?filter=inactive')
- }
+ const handleErroredHostsClick = () => {
+ navigate("/hosts?filter=inactive");
+ };
- const handleOfflineHostsClick = () => {
- navigate('/hosts?filter=offline')
- }
+ const handleOfflineHostsClick = () => {
+ navigate("/hosts?filter=offline");
+ };
- // New navigation handlers for top cards
- const handleUsersClick = () => {
- navigate('/users')
- }
+ // New navigation handlers for top cards
+ const handleUsersClick = () => {
+ navigate("/users");
+ };
- const handleHostGroupsClick = () => {
- navigate('/options')
- }
+ const handleHostGroupsClick = () => {
+ navigate("/options");
+ };
- const handleRepositoriesClick = () => {
- navigate('/repositories')
- }
+ const handleRepositoriesClick = () => {
+ navigate("/repositories");
+ };
- const handleOSDistributionClick = () => {
- navigate('/hosts?showFilters=true', { replace: true })
- }
+ const handleOSDistributionClick = () => {
+ navigate("/hosts?showFilters=true", { replace: true });
+ };
- const handleUpdateStatusClick = () => {
- navigate('/hosts?filter=needsUpdates', { replace: true })
- }
+ const handleUpdateStatusClick = () => {
+ navigate("/hosts?filter=needsUpdates", { replace: true });
+ };
- const handlePackagePriorityClick = () => {
- navigate('/packages?filter=security')
- }
+ const handlePackagePriorityClick = () => {
+ navigate("/packages?filter=security");
+ };
- // Chart click handlers
- const handleOSChartClick = (event, elements) => {
- if (elements.length > 0) {
- const elementIndex = elements[0].index
- const osName = stats.charts.osDistribution[elementIndex].name.toLowerCase()
- navigate(`/hosts?osFilter=${osName}&showFilters=true`, { replace: true })
- }
- }
+ // Chart click handlers
+ const handleOSChartClick = (event, elements) => {
+ if (elements.length > 0) {
+ const elementIndex = elements[0].index;
+ const osName =
+ stats.charts.osDistribution[elementIndex].name.toLowerCase();
+ navigate(`/hosts?osFilter=${osName}&showFilters=true`, { replace: true });
+ }
+ };
- const handleUpdateStatusChartClick = (event, elements) => {
- if (elements.length > 0) {
- const elementIndex = elements[0].index
- const statusName = stats.charts.updateStatusDistribution[elementIndex].name
-
- // Map status names to filter parameters
- let filter = ''
- if (statusName.toLowerCase().includes('needs updates')) {
- filter = 'needsUpdates'
- } else if (statusName.toLowerCase().includes('up to date')) {
- filter = 'upToDate'
- } else if (statusName.toLowerCase().includes('stale')) {
- filter = 'stale'
- }
-
- if (filter) {
- navigate(`/hosts?filter=${filter}`, { replace: true })
- }
- }
- }
+ const handleUpdateStatusChartClick = (event, elements) => {
+ if (elements.length > 0) {
+ const elementIndex = elements[0].index;
+ const statusName =
+ stats.charts.updateStatusDistribution[elementIndex].name;
- const handlePackagePriorityChartClick = (event, elements) => {
- if (elements.length > 0) {
- const elementIndex = elements[0].index
- const priorityName = stats.charts.packageUpdateDistribution[elementIndex].name
-
- // Map priority names to filter parameters
- if (priorityName.toLowerCase().includes('security')) {
- navigate('/packages?filter=security', { replace: true })
- } else if (priorityName.toLowerCase().includes('outdated')) {
- navigate('/packages?filter=outdated', { replace: true })
- }
- }
- }
+ // Map status names to filter parameters
+ let filter = "";
+ if (statusName.toLowerCase().includes("needs updates")) {
+ filter = "needsUpdates";
+ } else if (statusName.toLowerCase().includes("up to date")) {
+ filter = "upToDate";
+ } else if (statusName.toLowerCase().includes("stale")) {
+ filter = "stale";
+ }
- // Helper function to format the update interval threshold
- const formatUpdateIntervalThreshold = () => {
- if (!settings?.updateInterval) return '24 hours'
-
- const intervalMinutes = settings.updateInterval
- const thresholdMinutes = intervalMinutes * 2 // 2x the update interval
-
- if (thresholdMinutes < 60) {
- return `${thresholdMinutes} minutes`
- } else if (thresholdMinutes < 1440) {
- const hours = Math.floor(thresholdMinutes / 60)
- const minutes = thresholdMinutes % 60
- if (minutes === 0) {
- return `${hours} hour${hours > 1 ? 's' : ''}`
- }
- return `${hours}h ${minutes}m`
- } else {
- const days = Math.floor(thresholdMinutes / 1440)
- const hours = Math.floor((thresholdMinutes % 1440) / 60)
- if (hours === 0) {
- return `${days} day${days > 1 ? 's' : ''}`
- }
- return `${days}d ${hours}h`
- }
- }
+ if (filter) {
+ navigate(`/hosts?filter=${filter}`, { replace: true });
+ }
+ }
+ };
- const { data: stats, isLoading, error, refetch, isFetching } = useQuery({
- queryKey: ['dashboardStats'],
- queryFn: () => dashboardAPI.getStats().then(res => res.data),
- staleTime: 5 * 60 * 1000, // Data stays fresh for 5 minutes
- refetchOnWindowFocus: false, // Don't refetch when window regains focus
- })
+ const handlePackagePriorityChartClick = (event, elements) => {
+ if (elements.length > 0) {
+ const elementIndex = elements[0].index;
+ const priorityName =
+ stats.charts.packageUpdateDistribution[elementIndex].name;
- // Fetch recent users (permission protected server-side)
- const { data: recentUsers } = useQuery({
- queryKey: ['dashboardRecentUsers'],
- queryFn: () => dashboardAPI.getRecentUsers().then(res => res.data),
- staleTime: 60 * 1000,
- })
+ // Map priority names to filter parameters
+ if (priorityName.toLowerCase().includes("security")) {
+ navigate("/packages?filter=security", { replace: true });
+ } else if (priorityName.toLowerCase().includes("outdated")) {
+ navigate("/packages?filter=outdated", { replace: true });
+ }
+ }
+ };
- // Fetch recent collection (permission protected server-side)
- const { data: recentCollection } = useQuery({
- queryKey: ['dashboardRecentCollection'],
- queryFn: () => dashboardAPI.getRecentCollection().then(res => res.data),
- staleTime: 60 * 1000,
- })
+ // Helper function to format the update interval threshold
+ const formatUpdateIntervalThreshold = () => {
+ if (!settings?.updateInterval) return "24 hours";
- // Fetch settings to get the agent update interval
- const { data: settings } = useQuery({
- queryKey: ['settings'],
- queryFn: () => settingsAPI.get().then(res => res.data),
- })
+ const intervalMinutes = settings.updateInterval;
+ const thresholdMinutes = intervalMinutes * 2; // 2x the update interval
- // Fetch user's dashboard preferences
- const { data: preferences, refetch: refetchPreferences } = useQuery({
- queryKey: ['dashboardPreferences'],
- queryFn: () => dashboardPreferencesAPI.get().then(res => res.data),
- staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
- })
+ if (thresholdMinutes < 60) {
+ return `${thresholdMinutes} minutes`;
+ } else if (thresholdMinutes < 1440) {
+ const hours = Math.floor(thresholdMinutes / 60);
+ const minutes = thresholdMinutes % 60;
+ if (minutes === 0) {
+ return `${hours} hour${hours > 1 ? "s" : ""}`;
+ }
+ return `${hours}h ${minutes}m`;
+ } else {
+ const days = Math.floor(thresholdMinutes / 1440);
+ const hours = Math.floor((thresholdMinutes % 1440) / 60);
+ if (hours === 0) {
+ return `${days} day${days > 1 ? "s" : ""}`;
+ }
+ return `${days}d ${hours}h`;
+ }
+ };
- // Fetch default card configuration
- const { data: defaultCards } = useQuery({
- queryKey: ['dashboardDefaultCards'],
- queryFn: () => dashboardPreferencesAPI.getDefaults().then(res => res.data),
- })
+ const {
+ data: stats,
+ isLoading,
+ error,
+ refetch,
+ isFetching,
+ } = useQuery({
+ queryKey: ["dashboardStats"],
+ queryFn: () => dashboardAPI.getStats().then((res) => res.data),
+ staleTime: 5 * 60 * 1000, // Data stays fresh for 5 minutes
+ refetchOnWindowFocus: false, // Don't refetch when window regains focus
+ });
- // Merge preferences with default cards (normalize snake_case from API)
- useEffect(() => {
- if (preferences && defaultCards) {
- const normalizedPreferences = preferences.map((p) => ({
- cardId: p.cardId ?? p.card_id,
- enabled: p.enabled,
- order: p.order,
- }))
+ // Fetch recent users (permission protected server-side)
+ const { data: recentUsers } = useQuery({
+ queryKey: ["dashboardRecentUsers"],
+ queryFn: () => dashboardAPI.getRecentUsers().then((res) => res.data),
+ staleTime: 60 * 1000,
+ });
- const mergedCards = defaultCards
- .map((defaultCard) => {
- const userPreference = normalizedPreferences.find(
- (p) => p.cardId === defaultCard.cardId
- )
- return {
- ...defaultCard,
- enabled: userPreference ? userPreference.enabled : defaultCard.enabled,
- order: userPreference ? userPreference.order : defaultCard.order,
- }
- })
- .sort((a, b) => a.order - b.order)
+ // Fetch recent collection (permission protected server-side)
+ const { data: recentCollection } = useQuery({
+ queryKey: ["dashboardRecentCollection"],
+ queryFn: () => dashboardAPI.getRecentCollection().then((res) => res.data),
+ staleTime: 60 * 1000,
+ });
- setCardPreferences(mergedCards)
- } else if (defaultCards) {
- // If no preferences exist, use defaults
- setCardPreferences(defaultCards.sort((a, b) => a.order - b.order))
- }
- }, [preferences, defaultCards])
+ // Fetch settings to get the agent update interval
+ const { data: settings } = useQuery({
+ queryKey: ["settings"],
+ queryFn: () => settingsAPI.get().then((res) => res.data),
+ });
- // Listen for custom event from Layout component
- useEffect(() => {
- const handleOpenSettings = () => {
- setShowSettingsModal(true);
- };
+ // Fetch user's dashboard preferences
+ const { data: preferences, refetch: refetchPreferences } = useQuery({
+ queryKey: ["dashboardPreferences"],
+ queryFn: () => dashboardPreferencesAPI.get().then((res) => res.data),
+ staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
+ });
- window.addEventListener('openDashboardSettings', handleOpenSettings);
- return () => {
- window.removeEventListener('openDashboardSettings', handleOpenSettings);
- };
- }, [])
+ // Fetch default card configuration
+ const { data: defaultCards } = useQuery({
+ queryKey: ["dashboardDefaultCards"],
+ queryFn: () =>
+ dashboardPreferencesAPI.getDefaults().then((res) => res.data),
+ });
- // Helper function to check if a card should be displayed
- const isCardEnabled = (cardId) => {
- const card = cardPreferences.find(c => c.cardId === cardId);
- return card ? card.enabled : true; // Default to enabled if not found
- }
+ // Merge preferences with default cards (normalize snake_case from API)
+ useEffect(() => {
+ if (preferences && defaultCards) {
+ const normalizedPreferences = preferences.map((p) => ({
+ cardId: p.cardId ?? p.card_id,
+ enabled: p.enabled,
+ order: p.order,
+ }));
- // Helper function to get card type for layout grouping
- const getCardType = (cardId) => {
- if (['totalHosts', 'hostsNeedingUpdates', 'totalOutdatedPackages', 'securityUpdates', 'upToDateHosts', 'totalHostGroups', 'totalUsers', 'totalRepos'].includes(cardId)) {
- return 'stats';
- } else if (['osDistribution', 'osDistributionBar', 'updateStatus', 'packagePriority', 'recentUsers', 'recentCollection'].includes(cardId)) {
- return 'charts';
- } else if (['erroredHosts', 'quickStats'].includes(cardId)) {
- return 'fullwidth';
- }
- return 'fullwidth'; // Default to full width
- }
+ const mergedCards = defaultCards
+ .map((defaultCard) => {
+ const userPreference = normalizedPreferences.find(
+ (p) => p.cardId === defaultCard.cardId,
+ );
+ return {
+ ...defaultCard,
+ enabled: userPreference
+ ? userPreference.enabled
+ : defaultCard.enabled,
+ order: userPreference ? userPreference.order : defaultCard.order,
+ };
+ })
+ .sort((a, b) => a.order - b.order);
- // Helper function to get CSS class for card group
- const getGroupClassName = (cardType) => {
- switch (cardType) {
- case 'stats':
- return 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4';
- case 'charts':
- return 'grid grid-cols-1 lg:grid-cols-3 gap-6';
- case 'fullwidth':
- return 'space-y-6';
- default:
- return 'space-y-6';
- }
- }
+ setCardPreferences(mergedCards);
+ } else if (defaultCards) {
+ // If no preferences exist, use defaults
+ setCardPreferences(defaultCards.sort((a, b) => a.order - b.order));
+ }
+ }, [preferences, defaultCards]);
- // Helper function to render a card by ID
- const renderCard = (cardId) => {
- switch (cardId) {
- case 'upToDateHosts':
- return (
- updateFriendlyNameMutation.mutate({ hostId: host.id, friendlyName: newName })}
- placeholder="Enter friendly name..."
- maxLength={100}
- linkTo={`/hosts/${host.id}`}
- validate={(value) => {
- if (!value.trim()) return 'Friendly name is required';
- if (value.trim().length < 1) return 'Friendly name must be at least 1 character';
- if (value.trim().length > 100) return 'Friendly name must be less than 100 characters';
- return null;
- }}
- className="w-full"
- />
- )
- case 'hostname':
- return (
- updateHostGroupMutation.mutate({ hostId: host.id, hostGroupId: newGroupId })}
- options={hostGroups || []}
- placeholder="Select group..."
- className="w-full"
- />
- )
- case 'os':
- return (
-
+
+ );
+};
+
+export default Layout;
diff --git a/frontend/src/components/ProtectedRoute.jsx b/frontend/src/components/ProtectedRoute.jsx
index df3fb5c..0257df6 100644
--- a/frontend/src/components/ProtectedRoute.jsx
+++ b/frontend/src/components/ProtectedRoute.jsx
@@ -1,47 +1,59 @@
-import React from 'react'
-import { Navigate } from 'react-router-dom'
-import { useAuth } from '../contexts/AuthContext'
+import React from "react";
+import { Navigate } from "react-router-dom";
+import { useAuth } from "../contexts/AuthContext";
-const ProtectedRoute = ({ children, requireAdmin = false, requirePermission = null }) => {
- const { isAuthenticated, isAdmin, isLoading, hasPermission } = useAuth()
+const ProtectedRoute = ({
+ children,
+ requireAdmin = false,
+ requirePermission = null,
+}) => {
+ const { isAuthenticated, isAdmin, isLoading, hasPermission } = useAuth();
- if (isLoading) {
- return (
- setSidebarOpen(false)}
+ />
+
+
+ {/* Desktop sidebar */}
+
+
+
+
+
+
+
+
+
+
+ + PatchMon +
+
+
+
+ {/* Main content */}
+
+
+
+ {sidebarCollapsed ? (
+
+ ) : (
+ <>
+
+
+
+ {/* Profile Section - Bottom of Sidebar */}
+
+
+
+
+ )}
+ + PatchMon +
+
+ {!sidebarCollapsed ? (
+
+
+ {/* User Info with Sign Out - Username is clickable */}
+
+ ) : (
+
+
+
+ {/* Updated info */}
+ {stats && (
+
+
+
+
+
+
+ {user?.first_name || user?.username}
+
+ {user?.role === "admin" && (
+
+ Admin
+
+ )}
+
+
+
+ )}
+
+
+
+
+
+ )}
+
+
+ {versionInfo && (
+
+ v{versionInfo.version}
+
+ )}
+
+ )}
+
+ {/* Top bar */}
+
+
+
+
+
+
+ {/* Separator */}
+
+
+
+
+
+
+
+
+ + {getPageTitle()} +
+
+ {/* External Links */}
+
+
+ {children}
+
-
-
- )
- }
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
- if (!isAuthenticated()) {
- return
-
- )
- }
+ // Check admin requirement
+ if (requireAdmin && !isAdmin()) {
+ return (
+
-
- Access Denied
-You don't have permission to access this page.
-
+
+ );
+ }
- // Check specific permission requirement
- if (requirePermission && !hasPermission(requirePermission)) {
- return (
-
+
+ + Access Denied +
++ You don't have permission to access this page. +
+
-
- )
- }
+ // Check specific permission requirement
+ if (requirePermission && !hasPermission(requirePermission)) {
+ return (
+
-
- Access Denied
-You don't have permission to access this page.
-
+
+ );
+ }
- return children
-}
+ return children;
+};
-export default ProtectedRoute
+export default ProtectedRoute;
diff --git a/frontend/src/components/UpgradeNotificationIcon.jsx b/frontend/src/components/UpgradeNotificationIcon.jsx
index f605381..3add5e6 100644
--- a/frontend/src/components/UpgradeNotificationIcon.jsx
+++ b/frontend/src/components/UpgradeNotificationIcon.jsx
@@ -1,15 +1,15 @@
-import React from 'react'
-import { ArrowUpCircle } from 'lucide-react'
+import { ArrowUpCircle } from "lucide-react";
+import React from "react";
const UpgradeNotificationIcon = ({ className = "h-4 w-4", show = true }) => {
- if (!show) return null
+ if (!show) return null;
- return (
-
+
+ + Access Denied +
++ You don't have permission to access this page. +
+
-
- );
- case 'totalHosts':
- return (
-
-
-
-
-
-
- Up to date
-- {stats.cards.upToDateHosts}/{stats.cards.totalHosts} -
-
-
- );
-
- case 'hostsNeedingUpdates':
- return (
-
-
-
-
-
-
- Total Hosts
-- {stats.cards.totalHosts} -
-
-
- );
-
- case 'totalOutdatedPackages':
- return (
-
-
-
-
-
-
- Needs Updating
-- {stats.cards.hostsNeedingUpdates} -
-
-
- );
-
- case 'securityUpdates':
- return (
-
-
-
-
-
-
- Outdated Packages
-- {stats.cards.totalOutdatedPackages} -
-
-
- );
+ // Listen for custom event from Layout component
+ useEffect(() => {
+ const handleOpenSettings = () => {
+ setShowSettingsModal(true);
+ };
- case 'totalHostGroups':
- return (
-
-
-
-
-
-
- Security Updates
-- {stats.cards.securityUpdates} -
-
-
- );
+ window.addEventListener("openDashboardSettings", handleOpenSettings);
+ return () => {
+ window.removeEventListener("openDashboardSettings", handleOpenSettings);
+ };
+ }, []);
- case 'totalUsers':
- return (
-
-
-
-
-
-
- Host Groups
-- {stats.cards.totalHostGroups} -
-
-
- );
+ // Helper function to check if a card should be displayed
+ const isCardEnabled = (cardId) => {
+ const card = cardPreferences.find((c) => c.cardId === cardId);
+ return card ? card.enabled : true; // Default to enabled if not found
+ };
- case 'totalRepos':
- return (
-
-
-
-
-
-
- Users
-- {stats.cards.totalUsers} -
-
-
- );
-
- case 'erroredHosts':
- return (
-
-
-
-
-
-
- Repositories
-- {stats.cards.totalRepos} -
- 0
- ? 'bg-danger-50 border-danger-200'
- : 'bg-success-50 border-success-200'
- }`}
- onClick={handleErroredHostsClick}
- >
-
- );
-
- case 'offlineHosts':
- return (
-
- 0 ? 'text-danger-400' : 'text-success-400'
- }`} />
-
-
- {stats.cards.erroredHosts > 0 ? (
- <>
-
- - {stats.cards.erroredHosts} host{stats.cards.erroredHosts > 1 ? 's' : ''} haven't reported in {formatUpdateIntervalThreshold()}+ -
-- These hosts may be offline or experiencing connectivity issues. -
- - ) : ( - <> -- All hosts are reporting normally -
-- No hosts have failed to report in the last {formatUpdateIntervalThreshold()}. -
- - )} - 0
- ? 'bg-warning-50 border-warning-200'
- : 'bg-success-50 border-success-200'
- }`}
- onClick={handleOfflineHostsClick}
- >
-
- );
-
- case 'osDistribution':
- return (
-
- 0 ? 'text-warning-400' : 'text-success-400'
- }`} />
-
-
- {stats.cards.offlineHosts > 0 ? (
- <>
-
- - {stats.cards.offlineHosts} host{stats.cards.offlineHosts > 1 ? 's' : ''} offline/stale -
-- These hosts haven't reported in {formatUpdateIntervalThreshold() * 3}+ minutes. -
- - ) : ( - <> -- All hosts are online -
-- No hosts are offline or stale. -
- - )} -
-
- );
-
- case 'osDistributionBar':
- return (
- OS Distribution
-
-
-
-
- );
-
- case 'updateStatus':
- return (
- OS Distribution
-
-
-
-
- );
-
- case 'packagePriority':
- return (
- Update Status
-
-
-
-
- );
-
- case 'quickStats':
- // Calculate dynamic stats
- const updatePercentage = stats.cards.totalHosts > 0 ? ((stats.cards.hostsNeedingUpdates / stats.cards.totalHosts) * 100).toFixed(1) : 0;
- const onlineHosts = stats.cards.totalHosts - stats.cards.erroredHosts;
- const onlinePercentage = stats.cards.totalHosts > 0 ? ((onlineHosts / stats.cards.totalHosts) * 100).toFixed(0) : 0;
- const securityPercentage = stats.cards.totalOutdatedPackages > 0 ? ((stats.cards.securityUpdates / stats.cards.totalOutdatedPackages) * 100).toFixed(0) : 0;
- const avgPackagesPerHost = stats.cards.totalHosts > 0 ? Math.round(stats.cards.totalOutdatedPackages / stats.cards.totalHosts) : 0;
-
- return (
- Package Priority
-
-
-
-
- );
-
- case 'recentUsers':
- return (
-
-
- System Overview
-
-
-
-
-
- {updatePercentage}%
-
- Need Updates
-
- {stats.cards.hostsNeedingUpdates}/{stats.cards.totalHosts} hosts
-
-
-
-
- {stats.cards.securityUpdates}
-
- Security Issues
-
- {securityPercentage}% of updates
-
-
-
-
- {onlinePercentage}%
-
- Online
-
- {onlineHosts}/{stats.cards.totalHosts} hosts
-
-
-
-
- {avgPackagesPerHost}
-
- Avg per Host
-
- outdated packages
-
-
-
- );
-
- case 'recentCollection':
- return (
- Recent Users Logged in
-
-
-
- {(recentUsers || []).slice(0, 5).map(u => (
-
-
-
- ))}
- {(!recentUsers || recentUsers.length === 0) && (
-
- {u.username}
-
-
- {u.last_login ? formatRelativeTime(u.last_login) : 'Never'}
-
-
- No users found
-
- )}
-
-
- );
-
- default:
- return null;
- }
- }
+ // Helper function to get card type for layout grouping
+ const getCardType = (cardId) => {
+ if (
+ [
+ "totalHosts",
+ "hostsNeedingUpdates",
+ "totalOutdatedPackages",
+ "securityUpdates",
+ "upToDateHosts",
+ "totalHostGroups",
+ "totalUsers",
+ "totalRepos",
+ ].includes(cardId)
+ ) {
+ return "stats";
+ } else if (
+ [
+ "osDistribution",
+ "osDistributionBar",
+ "updateStatus",
+ "packagePriority",
+ "recentUsers",
+ "recentCollection",
+ ].includes(cardId)
+ ) {
+ return "charts";
+ } else if (["erroredHosts", "quickStats"].includes(cardId)) {
+ return "fullwidth";
+ }
+ return "fullwidth"; // Default to full width
+ };
- if (isLoading) {
- return (
- Recent Collection
-
-
-
- {(recentCollection || []).slice(0, 5).map(host => (
-
-
-
- ))}
- {(!recentCollection || recentCollection.length === 0) && (
-
- {host.friendly_name || host.hostname}
-
-
- {host.last_update ? formatRelativeTime(host.last_update) : 'Never'}
-
-
- No hosts found
-
- )}
-
-
- )
- }
+ // Helper function to get CSS class for card group
+ const getGroupClassName = (cardType) => {
+ switch (cardType) {
+ case "stats":
+ return "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4";
+ case "charts":
+ return "grid grid-cols-1 lg:grid-cols-3 gap-6";
+ case "fullwidth":
+ return "space-y-6";
+ default:
+ return "space-y-6";
+ }
+ };
- if (error) {
- return (
-
-
- )
- }
+ // Helper function to render a card by ID
+ const renderCard = (cardId) => {
+ switch (cardId) {
+ case "upToDateHosts":
+ return (
+
-
-
-
- Error loading dashboard
-- {error.message || 'Failed to load dashboard statistics'} -
- -
+
+ );
+ case "totalHosts":
+ return (
+
+
+
+
+
+
+ + Up to date +
++ {stats.cards.upToDateHosts}/{stats.cards.totalHosts} +
+
+
+ );
- const chartOptions = {
- responsive: true,
- plugins: {
- legend: {
- position: 'bottom',
- labels: {
- color: isDark ? '#ffffff' : '#374151',
- font: {
- size: 12
- }
- }
- },
- },
- onClick: handleOSChartClick,
- }
+ case "hostsNeedingUpdates":
+ return (
+
+
+
+
+
+
+ + Total Hosts +
++ {stats.cards.totalHosts} +
+
+
+ );
- const updateStatusChartOptions = {
- responsive: true,
- plugins: {
- legend: {
- position: 'bottom',
- labels: {
- color: isDark ? '#ffffff' : '#374151',
- font: {
- size: 12
- }
- }
- },
- },
- onClick: handleUpdateStatusChartClick,
- }
+ case "totalOutdatedPackages":
+ return (
+
+
+
+
+
+
+ + Needs Updating +
++ {stats.cards.hostsNeedingUpdates} +
+
+
+ );
- const packagePriorityChartOptions = {
- responsive: true,
- plugins: {
- legend: {
- position: 'bottom',
- labels: {
- color: isDark ? '#ffffff' : '#374151',
- font: {
- size: 12
- }
- }
- },
- },
- onClick: handlePackagePriorityChartClick,
- }
+ case "securityUpdates":
+ return (
+
+
+
+
+
+
+ + Outdated Packages +
++ {stats.cards.totalOutdatedPackages} +
+
+
+ );
- const barChartOptions = {
- responsive: true,
- indexAxis: 'y', // Make the chart horizontal
- plugins: {
- legend: {
- display: false
- },
- },
- scales: {
- x: {
- ticks: {
- color: isDark ? '#ffffff' : '#374151',
- font: {
- size: 12
- }
- },
- grid: {
- color: isDark ? '#374151' : '#e5e7eb'
- }
- },
- y: {
- ticks: {
- color: isDark ? '#ffffff' : '#374151',
- font: {
- size: 12
- }
- },
- grid: {
- color: isDark ? '#374151' : '#e5e7eb'
- }
- }
- }
- }
+ case "totalHostGroups":
+ return (
+
+
+
+
+
+
+ + Security Updates +
++ {stats.cards.securityUpdates} +
+
+
+ );
- const osChartData = {
- labels: stats.charts.osDistribution.map(item => item.name),
- datasets: [
- {
- data: stats.charts.osDistribution.map(item => item.count),
- backgroundColor: [
- '#3B82F6', // Blue
- '#10B981', // Green
- '#F59E0B', // Yellow
- '#EF4444', // Red
- '#8B5CF6', // Purple
- '#06B6D4', // Cyan
- ],
- borderWidth: 2,
- borderColor: '#ffffff',
- },
- ],
- }
+ case "totalUsers":
+ return (
+
+
+
+
+
+
+ + Host Groups +
++ {stats.cards.totalHostGroups} +
+
+
+ );
- const osBarChartData = {
- labels: stats.charts.osDistribution.map(item => item.name),
- datasets: [
- {
- label: 'Hosts',
- data: stats.charts.osDistribution.map(item => item.count),
- backgroundColor: [
- '#3B82F6', // Blue
- '#10B981', // Green
- '#F59E0B', // Yellow
- '#EF4444', // Red
- '#8B5CF6', // Purple
- '#06B6D4', // Cyan
- ],
- borderWidth: 1,
- borderColor: isDark ? '#374151' : '#ffffff',
- borderRadius: 4,
- borderSkipped: false,
- },
- ],
- }
+ case "totalRepos":
+ return (
+
+
+
+
+
+
+ + Users +
++ {stats.cards.totalUsers} +
+
+
+ );
- const updateStatusChartData = {
- labels: stats.charts.updateStatusDistribution.map(item => item.name),
- datasets: [
- {
- data: stats.charts.updateStatusDistribution.map(item => item.count),
- backgroundColor: [
- '#10B981', // Green - Up to date
- '#F59E0B', // Yellow - Needs updates
- '#EF4444', // Red - Errored
- ],
- borderWidth: 2,
- borderColor: '#ffffff',
- },
- ],
- }
+ case "erroredHosts":
+ return (
+
+
+
+
+
+
+ + Repositories +
++ {stats.cards.totalRepos} +
+ 0
+ ? "bg-danger-50 border-danger-200"
+ : "bg-success-50 border-success-200"
+ }`}
+ onClick={handleErroredHostsClick}
+ >
+
+ );
- const packagePriorityChartData = {
- labels: stats.charts.packageUpdateDistribution.map(item => item.name),
- datasets: [
- {
- data: stats.charts.packageUpdateDistribution.map(item => item.count),
- backgroundColor: [
- '#EF4444', // Red - Security
- '#3B82F6', // Blue - Regular
- ],
- borderWidth: 2,
- borderColor: '#ffffff',
- },
- ],
- }
+ case "offlineHosts":
+ return (
+
+ 0
+ ? "text-danger-400"
+ : "text-success-400"
+ }`}
+ />
+
+
+ {stats.cards.erroredHosts > 0 ? (
+ <>
+
+ + {stats.cards.erroredHosts} host + {stats.cards.erroredHosts > 1 ? "s" : ""} haven't reported + in {formatUpdateIntervalThreshold()}+ +
++ These hosts may be offline or experiencing connectivity + issues. +
+ + ) : ( + <> ++ All hosts are reporting normally +
++ No hosts have failed to report in the last{" "} + {formatUpdateIntervalThreshold()}. +
+ + )} + 0
+ ? "bg-warning-50 border-warning-200"
+ : "bg-success-50 border-success-200"
+ }`}
+ onClick={handleOfflineHostsClick}
+ >
+
+ );
- return (
-
+ 0
+ ? "text-warning-400"
+ : "text-success-400"
+ }`}
+ />
+
+
+ {stats.cards.offlineHosts > 0 ? (
+ <>
+
+ + {stats.cards.offlineHosts} host + {stats.cards.offlineHosts > 1 ? "s" : ""} offline/stale +
++ These hosts haven't reported in{" "} + {formatUpdateIntervalThreshold() * 3}+ minutes. +
+ + ) : ( + <> ++ All hosts are online +
++ No hosts are offline or stale. +
+ + )} +
- {/* Page Header */}
- setShowSettingsModal(false)}
- />
-
- )
-}
+ case "updateStatus":
+ return (
+
-
+ case "osDistribution":
+ return (
+
-
- - Welcome back, {user?.first_name || user?.username || 'User'} 👋 -
-- Overview of your PatchMon infrastructure -
-
-
-
-
-
+
+ );
- {/* Dynamically Rendered Cards - Unified Order */}
- {(() => {
- const enabledCards = cardPreferences
- .filter(card => isCardEnabled(card.cardId))
- .sort((a, b) => a.order - b.order);
-
- // Group consecutive cards of the same type for proper layout
- const cardGroups = [];
- let currentGroup = null;
-
- enabledCards.forEach(card => {
- const cardType = getCardType(card.cardId);
-
- if (!currentGroup || currentGroup.type !== cardType) {
- // Start a new group
- currentGroup = {
- type: cardType,
- cards: [card]
- };
- cardGroups.push(currentGroup);
- } else {
- // Add to existing group
- currentGroup.cards.push(card);
- }
- });
-
- return (
- <>
- {cardGroups.map((group, groupIndex) => (
- + OS Distribution +
+
+
+
- {group.cards.map(card => (
-
- ))}
-
- );
- })()}
+ case "osDistributionBar":
+ return (
+
- {renderCard(card.cardId)}
-
- ))}
-
+
+ );
- {/* Dashboard Settings Modal */}
- + OS Distribution +
+
+
+
+
+ );
-export default Dashboard
\ No newline at end of file
+ case "packagePriority":
+ return (
+ + Update Status +
+
+
+
+
+ );
+
+ case "quickStats": {
+ // Calculate dynamic stats
+ const updatePercentage =
+ stats.cards.totalHosts > 0
+ ? (
+ (stats.cards.hostsNeedingUpdates / stats.cards.totalHosts) *
+ 100
+ ).toFixed(1)
+ : 0;
+ const onlineHosts = stats.cards.totalHosts - stats.cards.erroredHosts;
+ const onlinePercentage =
+ stats.cards.totalHosts > 0
+ ? ((onlineHosts / stats.cards.totalHosts) * 100).toFixed(0)
+ : 0;
+ const securityPercentage =
+ stats.cards.totalOutdatedPackages > 0
+ ? (
+ (stats.cards.securityUpdates /
+ stats.cards.totalOutdatedPackages) *
+ 100
+ ).toFixed(0)
+ : 0;
+ const avgPackagesPerHost =
+ stats.cards.totalHosts > 0
+ ? Math.round(
+ stats.cards.totalOutdatedPackages / stats.cards.totalHosts,
+ )
+ : 0;
+
+ return (
+ + Package Priority +
+
+
+
+
+ );
+ }
+
+ case "recentUsers":
+ return (
+
+
+ + System Overview +
+
+
+
+
+
+ {updatePercentage}%
+
+
+ Need Updates
+
+
+ {stats.cards.hostsNeedingUpdates}/{stats.cards.totalHosts}{" "}
+ hosts
+
+
+
+
+ {stats.cards.securityUpdates}
+
+
+ Security Issues
+
+
+ {securityPercentage}% of updates
+
+
+
+
+ {onlinePercentage}%
+
+
+ Online
+
+
+ {onlineHosts}/{stats.cards.totalHosts} hosts
+
+
+
+
+ {avgPackagesPerHost}
+
+
+ Avg per Host
+
+
+ outdated packages
+
+
+
+ );
+
+ case "recentCollection":
+ return (
+ + Recent Users Logged in +
+
+
+
+ {(recentUsers || []).slice(0, 5).map((u) => (
+
+
+
+ ))}
+ {(!recentUsers || recentUsers.length === 0) && (
+
+ {u.username}
+
+
+ {u.last_login
+ ? formatRelativeTime(u.last_login)
+ : "Never"}
+
+
+ No users found
+
+ )}
+
+
+ );
+
+ default:
+ return null;
+ }
+ };
+
+ if (isLoading) {
+ return (
+ + Recent Collection +
+
+
+
+ {(recentCollection || []).slice(0, 5).map((host) => (
+
+
+
+ ))}
+ {(!recentCollection || recentCollection.length === 0) && (
+
+ {host.friendly_name || host.hostname}
+
+
+ {host.last_update
+ ? formatRelativeTime(host.last_update)
+ : "Never"}
+
+
+ No hosts found
+
+ )}
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ const chartOptions = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: "bottom",
+ labels: {
+ color: isDark ? "#ffffff" : "#374151",
+ font: {
+ size: 12,
+ },
+ },
+ },
+ },
+ onClick: handleOSChartClick,
+ };
+
+ const updateStatusChartOptions = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: "bottom",
+ labels: {
+ color: isDark ? "#ffffff" : "#374151",
+ font: {
+ size: 12,
+ },
+ },
+ },
+ },
+ onClick: handleUpdateStatusChartClick,
+ };
+
+ const packagePriorityChartOptions = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: "bottom",
+ labels: {
+ color: isDark ? "#ffffff" : "#374151",
+ font: {
+ size: 12,
+ },
+ },
+ },
+ },
+ onClick: handlePackagePriorityChartClick,
+ };
+
+ const barChartOptions = {
+ responsive: true,
+ indexAxis: "y", // Make the chart horizontal
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ scales: {
+ x: {
+ ticks: {
+ color: isDark ? "#ffffff" : "#374151",
+ font: {
+ size: 12,
+ },
+ },
+ grid: {
+ color: isDark ? "#374151" : "#e5e7eb",
+ },
+ },
+ y: {
+ ticks: {
+ color: isDark ? "#ffffff" : "#374151",
+ font: {
+ size: 12,
+ },
+ },
+ grid: {
+ color: isDark ? "#374151" : "#e5e7eb",
+ },
+ },
+ },
+ };
+
+ const osChartData = {
+ labels: stats.charts.osDistribution.map((item) => item.name),
+ datasets: [
+ {
+ data: stats.charts.osDistribution.map((item) => item.count),
+ backgroundColor: [
+ "#3B82F6", // Blue
+ "#10B981", // Green
+ "#F59E0B", // Yellow
+ "#EF4444", // Red
+ "#8B5CF6", // Purple
+ "#06B6D4", // Cyan
+ ],
+ borderWidth: 2,
+ borderColor: "#ffffff",
+ },
+ ],
+ };
+
+ const osBarChartData = {
+ labels: stats.charts.osDistribution.map((item) => item.name),
+ datasets: [
+ {
+ label: "Hosts",
+ data: stats.charts.osDistribution.map((item) => item.count),
+ backgroundColor: [
+ "#3B82F6", // Blue
+ "#10B981", // Green
+ "#F59E0B", // Yellow
+ "#EF4444", // Red
+ "#8B5CF6", // Purple
+ "#06B6D4", // Cyan
+ ],
+ borderWidth: 1,
+ borderColor: isDark ? "#374151" : "#ffffff",
+ borderRadius: 4,
+ borderSkipped: false,
+ },
+ ],
+ };
+
+ const updateStatusChartData = {
+ labels: stats.charts.updateStatusDistribution.map((item) => item.name),
+ datasets: [
+ {
+ data: stats.charts.updateStatusDistribution.map((item) => item.count),
+ backgroundColor: [
+ "#10B981", // Green - Up to date
+ "#F59E0B", // Yellow - Needs updates
+ "#EF4444", // Red - Errored
+ ],
+ borderWidth: 2,
+ borderColor: "#ffffff",
+ },
+ ],
+ };
+
+ const packagePriorityChartData = {
+ labels: stats.charts.packageUpdateDistribution.map((item) => item.name),
+ datasets: [
+ {
+ data: stats.charts.packageUpdateDistribution.map((item) => item.count),
+ backgroundColor: [
+ "#EF4444", // Red - Security
+ "#3B82F6", // Blue - Regular
+ ],
+ borderWidth: 2,
+ borderColor: "#ffffff",
+ },
+ ],
+ };
+
+ return (
+
+
+
+
+ + Error loading dashboard +
++ {error.message || "Failed to load dashboard statistics"} +
+ +
+ {/* Page Header */}
+ setShowSettingsModal(false)}
+ />
+
+ );
+};
+
+export default Dashboard;
diff --git a/frontend/src/pages/HostDetail.jsx b/frontend/src/pages/HostDetail.jsx
index b4b1b9b..5b8c1b5 100644
--- a/frontend/src/pages/HostDetail.jsx
+++ b/frontend/src/pages/HostDetail.jsx
@@ -1,837 +1,1043 @@
-import React, { useState } from 'react'
-import { useParams, Link, useNavigate } from 'react-router-dom'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import {
- Server,
- ArrowLeft,
- Package,
- Shield,
- Clock,
- CheckCircle,
- AlertTriangle,
- RefreshCw,
- Calendar,
- Monitor,
- HardDrive,
- Key,
- Trash2,
- X,
- Copy,
- Eye,
- Code,
- EyeOff,
- ToggleLeft,
- ToggleRight,
- Edit,
- Check,
- ChevronDown,
- ChevronUp,
- Cpu,
- MemoryStick,
- Globe,
- Wifi,
- Terminal,
- Activity
-} from 'lucide-react'
-import { dashboardAPI, adminHostsAPI, settingsAPI, formatRelativeTime, formatDate } from '../utils/api'
-import { OSIcon } from '../utils/osIcons.jsx'
-import InlineEdit from '../components/InlineEdit'
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+ Activity,
+ AlertTriangle,
+ ArrowLeft,
+ Calendar,
+ Check,
+ CheckCircle,
+ ChevronDown,
+ ChevronUp,
+ Clock,
+ Code,
+ Copy,
+ Cpu,
+ Edit,
+ Eye,
+ EyeOff,
+ Globe,
+ HardDrive,
+ Key,
+ MemoryStick,
+ Monitor,
+ Package,
+ RefreshCw,
+ Server,
+ Shield,
+ Terminal,
+ ToggleLeft,
+ ToggleRight,
+ Trash2,
+ Wifi,
+ X,
+} from "lucide-react";
+import React, { useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import InlineEdit from "../components/InlineEdit";
+import {
+ adminHostsAPI,
+ dashboardAPI,
+ formatDate,
+ formatRelativeTime,
+ settingsAPI,
+} from "../utils/api";
+import { OSIcon } from "../utils/osIcons.jsx";
const HostDetail = () => {
- const { hostId } = useParams()
- const navigate = useNavigate()
- const queryClient = useQueryClient()
- const [showCredentialsModal, setShowCredentialsModal] = useState(false)
- const [showDeleteModal, setShowDeleteModal] = useState(false)
- const [isEditingFriendlyName, setIsEditingFriendlyName] = useState(false)
- const [editedFriendlyName, setEditedFriendlyName] = useState('')
- const [showAllUpdates, setShowAllUpdates] = useState(false)
- const [activeTab, setActiveTab] = useState(() => {
- // Restore tab state from localStorage
- const savedTab = localStorage.getItem(`host-detail-tab-${hostId}`)
- return savedTab || 'host'
- })
-
- const { data: host, isLoading, error, refetch, isFetching } = useQuery({
- queryKey: ['host', hostId],
- queryFn: () => dashboardAPI.getHostDetail(hostId).then(res => res.data),
- staleTime: 5 * 60 * 1000, // 5 minutes - data stays fresh longer
- refetchOnWindowFocus: false, // Don't refetch when window regains focus
- })
+ const { hostId } = useParams();
+ const navigate = useNavigate();
+ const queryClient = useQueryClient();
+ const [showCredentialsModal, setShowCredentialsModal] = useState(false);
+ const [showDeleteModal, setShowDeleteModal] = useState(false);
+ const [isEditingFriendlyName, setIsEditingFriendlyName] = useState(false);
+ const [editedFriendlyName, setEditedFriendlyName] = useState("");
+ const [showAllUpdates, setShowAllUpdates] = useState(false);
+ const [activeTab, setActiveTab] = useState(() => {
+ // Restore tab state from localStorage
+ const savedTab = localStorage.getItem(`host-detail-tab-${hostId}`);
+ return savedTab || "host";
+ });
- // Save tab state to localStorage when it changes
- const handleTabChange = (tabName) => {
- setActiveTab(tabName)
- localStorage.setItem(`host-detail-tab-${hostId}`, tabName)
- }
+ const {
+ data: host,
+ isLoading,
+ error,
+ refetch,
+ isFetching,
+ } = useQuery({
+ queryKey: ["host", hostId],
+ queryFn: () => dashboardAPI.getHostDetail(hostId).then((res) => res.data),
+ staleTime: 5 * 60 * 1000, // 5 minutes - data stays fresh longer
+ refetchOnWindowFocus: false, // Don't refetch when window regains focus
+ });
- // Auto-show credentials modal for new/pending hosts
- React.useEffect(() => {
- if (host && host.status === 'pending') {
- setShowCredentialsModal(true)
- }
- }, [host])
+ // Save tab state to localStorage when it changes
+ const handleTabChange = (tabName) => {
+ setActiveTab(tabName);
+ localStorage.setItem(`host-detail-tab-${hostId}`, tabName);
+ };
- const deleteHostMutation = useMutation({
- mutationFn: (hostId) => adminHostsAPI.delete(hostId),
- onSuccess: () => {
- queryClient.invalidateQueries(['hosts'])
- navigate('/hosts')
- },
- })
+ // Auto-show credentials modal for new/pending hosts
+ React.useEffect(() => {
+ if (host && host.status === "pending") {
+ setShowCredentialsModal(true);
+ }
+ }, [host]);
- // Toggle auto-update mutation
- const toggleAutoUpdateMutation = useMutation({
- mutationFn: (auto_update) => adminHostsAPI.toggleAutoUpdate(hostId, auto_update).then(res => res.data),
- onSuccess: () => {
- queryClient.invalidateQueries(['host', hostId])
- queryClient.invalidateQueries(['hosts'])
- }
- })
+ const deleteHostMutation = useMutation({
+ mutationFn: (hostId) => adminHostsAPI.delete(hostId),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["hosts"]);
+ navigate("/hosts");
+ },
+ });
- const updateFriendlyNameMutation = useMutation({
- mutationFn: (friendlyName) => adminHostsAPI.updateFriendlyName(hostId, friendlyName).then(res => res.data),
- onSuccess: () => {
- queryClient.invalidateQueries(['host', hostId])
- queryClient.invalidateQueries(['hosts'])
- }
- })
+ // Toggle auto-update mutation
+ const toggleAutoUpdateMutation = useMutation({
+ mutationFn: (auto_update) =>
+ adminHostsAPI
+ .toggleAutoUpdate(hostId, auto_update)
+ .then((res) => res.data),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["host", hostId]);
+ queryClient.invalidateQueries(["hosts"]);
+ },
+ });
- const handleDeleteHost = async () => {
- if (window.confirm(`Are you sure you want to delete host "${host.friendly_name}"? This action cannot be undone.`)) {
- try {
- await deleteHostMutation.mutateAsync(hostId)
- } catch (error) {
- console.error('Failed to delete host:', error)
- alert('Failed to delete host')
- }
- }
- }
+ const updateFriendlyNameMutation = useMutation({
+ mutationFn: (friendlyName) =>
+ adminHostsAPI
+ .updateFriendlyName(hostId, friendlyName)
+ .then((res) => res.data),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["host", hostId]);
+ queryClient.invalidateQueries(["hosts"]);
+ },
+ });
- if (isLoading) {
- return (
-
+
+
+ {/* Dynamically Rendered Cards - Unified Order */}
+ {(() => {
+ const enabledCards = cardPreferences
+ .filter((card) => isCardEnabled(card.cardId))
+ .sort((a, b) => a.order - b.order);
+
+ // Group consecutive cards of the same type for proper layout
+ const cardGroups = [];
+ let currentGroup = null;
+
+ enabledCards.forEach((card) => {
+ const cardType = getCardType(card.cardId);
+
+ if (!currentGroup || currentGroup.type !== cardType) {
+ // Start a new group
+ currentGroup = {
+ type: cardType,
+ cards: [card],
+ };
+ cardGroups.push(currentGroup);
+ } else {
+ // Add to existing group
+ currentGroup.cards.push(card);
+ }
+ });
+
+ return (
+ <>
+ {cardGroups.map((group, groupIndex) => (
+
+
+ + Welcome back, {user?.first_name || user?.username || "User"} 👋 +
++ Overview of your PatchMon infrastructure +
+
+
+
+
+
+ {group.cards.map((card) => (
+
+ ))}
+
+ );
+ })()}
+
+ {/* Dashboard Settings Modal */}
+ {renderCard(card.cardId)}
+ ))}
+
-
- )
- }
+ const handleDeleteHost = async () => {
+ if (
+ window.confirm(
+ `Are you sure you want to delete host "${host.friendly_name}"? This action cannot be undone.`,
+ )
+ ) {
+ try {
+ await deleteHostMutation.mutateAsync(hostId);
+ } catch (error) {
+ console.error("Failed to delete host:", error);
+ alert("Failed to delete host");
+ }
+ }
+ };
- if (error) {
- return (
-
-
- )
- }
+ if (isLoading) {
+ return (
+
-
-
-
-
-
-
-
-
-
-
-
- Error loading host
-- {error.message || 'Failed to load host details'} -
- -
+
+ );
+ }
- if (!host) {
- return (
-
-
- )
- }
+ if (error) {
+ return (
+
-
-
-
-
-
-
-
- Host Not Found
-- The requested host could not be found. -
-
+
+ );
+ }
- const getStatusIcon = (isStale, needsUpdate) => {
- if (isStale) return
+
- const getStatusColor = (isStale, needsUpdate) => {
- if (isStale) return 'text-danger-600'
- if (needsUpdate) return 'text-warning-600'
- return 'text-success-600'
- }
+
+
+
+
+
+
+
+
+
+ + Error loading host +
++ {error.message || "Failed to load host details"} +
+ +
+
+ );
+ }
- const isStale = new Date() - new Date(host.last_update) > 24 * 60 * 60 * 1000
+ const getStatusColor = (isStale, needsUpdate) => {
+ if (isStale) return "text-danger-600";
+ if (needsUpdate) return "text-warning-600";
+ return "text-success-600";
+ };
- return (
-
+
- const getStatusText = (isStale, needsUpdate) => {
- if (isStale) return 'Stale'
- if (needsUpdate) return 'Needs Updates'
- return 'Up to Date'
- }
+
+
+
+
+
+ + Host Not Found +
++ The requested host could not be found. +
+
- {/* Header */}
- setShowCredentialsModal(false)}
+ />
+ )}
+
+ {/* Delete Confirmation Modal */}
+ {showDeleteModal && (
+ setShowDeleteModal(false)}
+ onConfirm={handleDeleteHost}
+ isLoading={deleteHostMutation.isPending}
+ />
+ )}
+
+ );
+};
// Credentials Modal Component
const CredentialsModal = ({ host, isOpen, onClose }) => {
- const [showApiKey, setShowApiKey] = useState(false)
- const [activeTab, setActiveTab] = useState('quick-install')
+ const [showApiKey, setShowApiKey] = useState(false);
+ const [activeTab, setActiveTab] = useState("quick-install");
- const { data: serverUrlData } = useQuery({
- queryKey: ['serverUrl'],
- queryFn: () => settingsAPI.getServerUrl().then(res => res.data),
- })
+ const { data: serverUrlData } = useQuery({
+ queryKey: ["serverUrl"],
+ queryFn: () => settingsAPI.getServerUrl().then((res) => res.data),
+ });
- const serverUrl = serverUrlData?.server_url || 'http://localhost:3001'
+ const serverUrl = serverUrlData?.server_url || "http://localhost:3001";
- const copyToClipboard = async (text) => {
- try {
- // Try modern clipboard API first
- if (navigator.clipboard && window.isSecureContext) {
- await navigator.clipboard.writeText(text)
- return
- }
-
- // Fallback for older browsers or non-secure contexts
- const textArea = document.createElement('textarea')
- textArea.value = text
- textArea.style.position = 'fixed'
- textArea.style.left = '-999999px'
- textArea.style.top = '-999999px'
- document.body.appendChild(textArea)
- textArea.focus()
- textArea.select()
-
- try {
- const successful = document.execCommand('copy')
- if (!successful) {
- throw new Error('Copy command failed')
- }
- } catch (err) {
- // If all else fails, show the text in a prompt
- prompt('Copy this command:', text)
- } finally {
- document.body.removeChild(textArea)
- }
- } catch (err) {
- console.error('Failed to copy to clipboard:', err)
- // Show the text in a prompt as last resort
- prompt('Copy this command:', text)
- }
- }
+ const copyToClipboard = async (text) => {
+ try {
+ // Try modern clipboard API first
+ if (navigator.clipboard && window.isSecureContext) {
+ await navigator.clipboard.writeText(text);
+ return;
+ }
- const getSetupCommands = () => {
- // Get current time for crontab scheduling
- const now = new Date()
- const currentMinute = now.getMinutes()
- const currentHour = now.getHours()
-
- return `# Run this on the target host: ${host?.friendly_name}
+ // Fallback for older browsers or non-secure contexts
+ const textArea = document.createElement("textarea");
+ textArea.value = text;
+ textArea.style.position = "fixed";
+ textArea.style.left = "-999999px";
+ textArea.style.top = "-999999px";
+ document.body.appendChild(textArea);
+ textArea.focus();
+ textArea.select();
+
+ try {
+ const successful = document.execCommand("copy");
+ if (!successful) {
+ throw new Error("Copy command failed");
+ }
+ } catch (err) {
+ // If all else fails, show the text in a prompt
+ prompt("Copy this command:", text);
+ } finally {
+ document.body.removeChild(textArea);
+ }
+ } catch (err) {
+ console.error("Failed to copy to clipboard:", err);
+ // Show the text in a prompt as last resort
+ prompt("Copy this command:", text);
+ }
+ };
+
+ const getSetupCommands = () => {
+ // Get current time for crontab scheduling
+ const now = new Date();
+ const currentMinute = now.getMinutes();
+ const currentHour = now.getHours();
+
+ return `# Run this on the target host: ${host?.friendly_name}
echo "🔄 Setting up PatchMon agent..."
@@ -855,336 +1061,403 @@ echo "📊 Sending initial package data..."
sudo /usr/local/bin/patchmon-agent.sh update
# Setup crontab starting at current time
-echo "⏰ Setting up hourly crontab starting at ${currentHour.toString().padStart(2, '0')}:${currentMinute.toString().padStart(2, '0')}..."
+echo "⏰ Setting up hourly crontab starting at ${currentHour.toString().padStart(2, "0")}:${currentMinute.toString().padStart(2, "0")}..."
echo "${currentMinute} * * * * /usr/local/bin/patchmon-agent.sh update >/dev/null 2>&1" | sudo crontab -
echo "✅ PatchMon agent setup complete!"
echo " - Agent installed: /usr/local/bin/patchmon-agent.sh"
echo " - Config directory: /etc/patchmon/"
-echo " - Updates: Every hour via crontab (starting at ${currentHour.toString().padStart(2, '0')}:${currentMinute.toString().padStart(2, '0')})"
-echo " - View logs: tail -f /var/log/patchmon-agent.log"`
- }
+echo " - Updates: Every hour via crontab (starting at ${currentHour.toString().padStart(2, "0")}:${currentMinute.toString().padStart(2, "0")})"
+echo " - View logs: tail -f /var/log/patchmon-agent.log"`;
+ };
- if (!isOpen || !host) return null
+ if (!isOpen || !host) return null;
- const commands = getSetupCommands()
+ const commands = getSetupCommands();
- return (
-
-
+ const getStatusIcon = (isStale, needsUpdate) => {
+ if (isStale) return
-
-
- {host.friendly_name}
- {host.system_uptime && ( -
-
- )}
-
-
- 0)}`}>
- {getStatusIcon(isStale, host.stats.outdated_packages > 0)}
- {getStatusText(isStale, host.stats.outdated_packages > 0)}
-
-
-
-
-
-
-
- {/* Left Column - System Details with Tabs */}
-
+
+ {/* Credentials Modal */}
+ {showCredentialsModal && (
+
- {/* Host Info, Hardware, Network, System Info in Tabs */}
-
+
+ {/* Right Column - Package Statistics */}
+
-
+
-
-
-
-
-
-
-
-
- {/* Host Information */}
- {activeTab === 'host' && (
-
+
-
- )}
+ const getStatusText = (isStale, needsUpdate) => {
+ if (isStale) return "Stale";
+ if (needsUpdate) return "Needs Updates";
+ return "Up to Date";
+ };
+ const isStale = new Date() - new Date(host.last_update) > 24 * 60 * 60 * 1000;
- {/* Network Information */}
- {activeTab === 'network' && (host.gateway_ip || host.dns_servers || host.network_interfaces) && (
-
-
-
- updateFriendlyNameMutation.mutate(newName)}
- placeholder="Enter friendly name..."
- maxLength={100}
- validate={(value) => {
- if (!value.trim()) return 'Friendly name is required';
- if (value.trim().length < 1) return 'Friendly name must be at least 1 character';
- if (value.trim().length > 100) return 'Friendly name must be less than 100 characters';
- return null;
- }}
- className="w-full text-sm"
- />
-
-
- {host.hostname && (
- Friendly Name
-
-
- )}
-
- System Hostname
-{host.hostname}
-
-
-
- Host Group
- {host.host_groups ? ( - - {host.host_groups.name} - - ) : ( - - Ungrouped - - )} -
-
-
-
- {host.agent_version && (
- Operating System
-
-
- {host.os_type} {host.os_version}
-
-
- )}
-
-
- Agent Version
-{host.agent_version}
-
- Auto-update
-
-
-
-
- )}
+ return (
+
- {host.gateway_ip && (
-
-
-
- )}
-
- {host.dns_servers && Array.isArray(host.dns_servers) && host.dns_servers.length > 0 && (
- Gateway IP
-{host.gateway_ip}
-
-
- )}
-
- {host.network_interfaces && Array.isArray(host.network_interfaces) && host.network_interfaces.length > 0 && (
- DNS Servers
-
- {host.dns_servers.map((dns, index) => (
-
- {dns}
- ))} -
-
- )}
- Network Interfaces
-
- {host.network_interfaces.map((iface, index) => (
-
- {iface.name}
- ))} -
+ {/* Header */}
+ setShowCredentialsModal(false)}
- />
- )}
+ {/* Network Information */}
+ {activeTab === "network" &&
+ (host.gateway_ip ||
+ host.dns_servers ||
+ host.network_interfaces) && (
+
+ )}
+
+ {/* System Information */}
+ {activeTab === "system" &&
+ (host.kernel_version ||
+ host.selinux_status ||
+ host.architecture) && (
+
+
- {/* System Information */}
- {activeTab === 'system' && (host.kernel_version || host.selinux_status || host.architecture) && (
-
+
+
+ + {host.friendly_name} +
+ {host.system_uptime && ( +
+
+ )}
+
+
+ 0)}`}
+ >
+ {getStatusIcon(isStale, host.stats.outdated_packages > 0)}
+ {getStatusText(isStale, host.stats.outdated_packages > 0)}
+
+
+
+
+
+
+
-
- )}
+ {/* Main Content Grid */}
+
- {host.architecture && (
-
-
-
- )}
-
- {host.kernel_version && (
- Architecture
-{host.architecture}
-
-
- )}
-
- {host.selinux_status && (
- Kernel Version
-{host.kernel_version}
-
-
- )}
-
-
- SELinux Status
- - {host.selinux_status} - -
+ {/* Left Column - System Details with Tabs */}
+
+ )}
- {/* Credentials Modal */}
- {showCredentialsModal && (
-
+ {/* Host Info, Hardware, Network, System Info in Tabs */}
+
+
+
+
+
+
+
+
+
+
-
- {activeTab === 'network' && !(host.gateway_ip || host.dns_servers || host.network_interfaces) && (
-
-
- )}
-
- {activeTab === 'system' && !(host.kernel_version || host.selinux_status || host.architecture) && (
- No network information available
-
-
- )}
+ No system information available
-
+ {/* Host Information */}
+ {activeTab === "host" && (
+
+
+
-
+
-
+
+ updateFriendlyNameMutation.mutate(newName)
+ }
+ placeholder="Enter friendly name..."
+ maxLength={100}
+ validate={(value) => {
+ if (!value.trim()) return "Friendly name is required";
+ if (value.trim().length < 1)
+ return "Friendly name must be at least 1 character";
+ if (value.trim().length > 100)
+ return "Friendly name must be less than 100 characters";
+ return null;
+ }}
+ className="w-full text-sm"
+ />
+
- {/* System Monitoring */}
- {activeTab === 'monitoring' && (
- + Friendly Name +
+
- {/* System Overview */}
-
- )}
+ {host.hostname && (
+
- {/* System Uptime */}
- {host.system_uptime && (
-
-
- {/* Disk Information */}
- {host.disk_details && Array.isArray(host.disk_details) && host.disk_details.length > 0 && (
-
-
- )}
-
- {/* CPU Model */}
- {host.cpu_model && (
-
-
- System Uptime
-{host.system_uptime}
-
-
- )}
-
- {/* CPU Cores */}
- {host.cpu_cores && (
-
-
- CPU Model
-{host.cpu_model}
-
-
- )}
-
- {/* RAM Installed */}
- {host.ram_installed && (
-
-
- CPU Cores
-{host.cpu_cores}
-
-
- )}
-
- {/* Swap Size */}
- {host.swap_size !== undefined && host.swap_size !== null && (
-
-
- RAM Installed
-{host.ram_installed} GB
-
-
- )}
-
- {/* Load Average */}
- {host.load_average && Array.isArray(host.load_average) && host.load_average.length > 0 && host.load_average.some(load => load != null) && (
-
-
- Swap Size
-{host.swap_size} GB
-
-
- )}
-
-
- Load Average
-- {host.load_average.filter(load => load != null).map((load, index) => ( - - {typeof load === 'number' ? load.toFixed(2) : String(load)} - {index < host.load_average.filter(load => load != null).length - 1 && ', '} - - ))} -
-
-
-
-
- )}
-
- {/* No Data State */}
- {!host.system_uptime && !host.cpu_model && !host.cpu_cores && !host.ram_installed && host.swap_size === undefined &&
- (!host.load_average || !Array.isArray(host.load_average) || host.load_average.length === 0 || !host.load_average.some(load => load != null)) &&
- (!host.disk_details || !Array.isArray(host.disk_details) || host.disk_details.length === 0) && (
-
-
-
- {host.disk_details.map((disk, index) => (
-
-
-
- ))}
-
-
- {disk.size && (
- Size: {disk.size}
- )} - {disk.mountpoint && ( -Mount: {disk.mountpoint}
- )} - {disk.usage && typeof disk.usage === 'number' && ( -
-
- )}
-
- Usage
- {disk.usage}%
-
-
-
-
-
-
- )}
- No monitoring data available
-- Monitoring data will appear once the agent collects system information -
-
+
+ )}
- {/* Update History */}
- {activeTab === 'history' && (
- + System Hostname +
++ {host.hostname} +
+
- {host.update_history?.length > 0 ? (
- <>
-
-
-
-
- {host.update_history.length > 5 && (
-
- )}
- | - Status - | -- Date - | -- Packages - | -- Security - | -
|---|---|---|---|
|
-
-
-
- {update.status === 'success' ? 'Success' : 'Failed'}
-
-
- |
- - {formatDate(update.timestamp)} - | -- {update.packages_count} - | -
- {update.security_count > 0 ? (
-
-
- ) : (
- -
- )}
- |
-
-
-
- )}
-
- ) : (
-
-
- )}
- No update history available
-
+
- {/* Right Column - Package Statistics */}
- + Host Group +
+ {host.host_groups ? ( + + {host.host_groups.name} + + ) : ( + + Ungrouped + + )} +
- {/* Package Statistics */}
-
-
-
-
-
- Package Statistics
-
-
-
-
-
-
-
-
-
-
+
+ {host.agent_version && (
+ + Operating System +
+
+
+ + {host.os_type} {host.os_version} +
+
+
+ )}
+
+
+ + Agent Version +
++ {host.agent_version} +
+
+
+ Auto-update
+
+
+
+
+
+
+ {host.gateway_ip && (
+ setShowDeleteModal(false)}
- onConfirm={handleDeleteHost}
- isLoading={deleteHostMutation.isPending}
- />
- )}
-
- )
-}
+ {host.dns_servers &&
+ Array.isArray(host.dns_servers) &&
+ host.dns_servers.length > 0 && (
+
+
+ )}
- {/* Delete Confirmation Modal */}
- {showDeleteModal && (
- + Gateway IP +
++ {host.gateway_ip} +
+
+
+ )}
+
+ {host.network_interfaces &&
+ Array.isArray(host.network_interfaces) &&
+ host.network_interfaces.length > 0 && (
+ + DNS Servers +
+
+ {host.dns_servers.map((dns, index) => (
+
+ + {dns} +
+ ))} +
+
+ )}
+ + Network Interfaces +
+
+ {host.network_interfaces.map((iface, index) => (
+
+ + {iface.name} +
+ ))} +
+
+ )}
+
+ {activeTab === "network" &&
+ !(
+ host.gateway_ip ||
+ host.dns_servers ||
+ host.network_interfaces
+ ) && (
+
+ {host.architecture && (
+
+
+
+ )}
+
+ {host.kernel_version && (
+ + Architecture +
++ {host.architecture} +
+
+
+ )}
+
+ {host.selinux_status && (
+ + Kernel Version +
++ {host.kernel_version} +
+
+
+ )}
+ + SELinux Status +
+ + {host.selinux_status} + +
+
+ )}
+
+ {activeTab === "system" &&
+ !(
+ host.kernel_version ||
+ host.selinux_status ||
+ host.architecture
+ ) && (
+ + No network information available +
+
+
+ )}
+
+ {/* System Monitoring */}
+ {activeTab === "monitoring" && (
+ + No system information available +
+
+ {/* System Overview */}
+
+ )}
+
+ {/* Update History */}
+ {activeTab === "history" && (
+
+ {/* System Uptime */}
+ {host.system_uptime && (
+
+
+ {/* Disk Information */}
+ {host.disk_details &&
+ Array.isArray(host.disk_details) &&
+ host.disk_details.length > 0 && (
+
+
+ )}
+
+ {/* CPU Model */}
+ {host.cpu_model && (
+
+
+ + System Uptime +
++ {host.system_uptime} +
+
+
+ )}
+
+ {/* CPU Cores */}
+ {host.cpu_cores && (
+
+
+ + CPU Model +
++ {host.cpu_model} +
+
+
+ )}
+
+ {/* RAM Installed */}
+ {host.ram_installed && (
+
+
+ + CPU Cores +
++ {host.cpu_cores} +
+
+
+ )}
+
+ {/* Swap Size */}
+ {host.swap_size !== undefined &&
+ host.swap_size !== null && (
+
+
+ + RAM Installed +
++ {host.ram_installed} GB +
+
+
+ )}
+
+ {/* Load Average */}
+ {host.load_average &&
+ Array.isArray(host.load_average) &&
+ host.load_average.length > 0 &&
+ host.load_average.some((load) => load != null) && (
+
+
+ + Swap Size +
++ {host.swap_size} GB +
+
+
+ )}
+
+
+ + Load Average +
++ {host.load_average + .filter((load) => load != null) + .map((load, index) => ( + + {typeof load === "number" + ? load.toFixed(2) + : String(load)} + {index < + host.load_average.filter( + (load) => load != null, + ).length - + 1 && ", "} + + ))} +
+
+
+
+
+ )}
+
+ {/* No Data State */}
+ {!host.system_uptime &&
+ !host.cpu_model &&
+ !host.cpu_cores &&
+ !host.ram_installed &&
+ host.swap_size === undefined &&
+ (!host.load_average ||
+ !Array.isArray(host.load_average) ||
+ host.load_average.length === 0 ||
+ !host.load_average.some((load) => load != null)) &&
+ (!host.disk_details ||
+ !Array.isArray(host.disk_details) ||
+ host.disk_details.length === 0) && (
+
+
+
+ {host.disk_details.map((disk, index) => (
+
+
+
+ ))}
+
+
+ {disk.size && (
+ + Size: {disk.size} +
+ )} + {disk.mountpoint && ( ++ Mount: {disk.mountpoint} +
+ )} + {disk.usage && typeof disk.usage === "number" && ( +
+
+ )}
+
+ Usage
+ {disk.usage}%
+
+
+
+
+
+
+ )}
+ + No monitoring data available +
++ Monitoring data will appear once the agent collects + system information +
+
+ {host.update_history?.length > 0 ? (
+ <>
+
+
+
+
+ {host.update_history.length > 5 && (
+
+ )}
+ | + Status + | ++ Date + | ++ Packages + | ++ Security + | +
|---|---|---|---|
|
+
+
+
+ {update.status === "success"
+ ? "Success"
+ : "Failed"}
+
+
+ |
+ + {formatDate(update.timestamp)} + | ++ {update.packages_count} + | +
+ {update.security_count > 0 ? (
+
+
+ ) : (
+
+ -
+
+ )}
+ |
+
+
+
+ )}
+
+ ) : (
+
+
+ )}
+ + No update history available +
+
+ {/* Package Statistics */}
+
+
+
+
+
+ + Package Statistics +
+
+
+
+
+
+
+
+
+
+
-
+ );
+};
// Delete Confirmation Modal Component
-const DeleteConfirmationModal = ({ host, isOpen, onClose, onConfirm, isLoading }) => {
- if (!isOpen || !host) return null
+const DeleteConfirmationModal = ({
+ host,
+ isOpen,
+ onClose,
+ onConfirm,
+ isLoading,
+}) => {
+ if (!isOpen || !host) return null;
- return (
-
-
+
-
+ return (
+ Host Setup - {host.friendly_name}
- -
+
- )
-}
+
+
-
+
- {/* Tabs */}
- + Host Setup - {host.friendly_name} +
+ +
-
-
+ {/* Tabs */}
+
+
+
- {/* Tab Content */}
- {activeTab === 'quick-install' && (
-
-
+ )}
- {activeTab === 'credentials' && (
-
-
+ {/* Tab Content */}
+ {activeTab === "quick-install" && (
+ One-Line Installation
-- Copy and run this command on the target host to automatically install and configure the PatchMon agent: -
-
-
-
-
-
+
+
+
- + One-Line Installation +
++ Copy and run this command on the target host to automatically + install and configure the PatchMon agent: +
+
+
+
+
+
-
+ Manual Installation
-- If you prefer to install manually, follow these steps: -
-
-
- )}
+
-
+ 1. Download Agent Script
-
-
-
-
-
+
- + Manual Installation +
++ If you prefer to install manually, follow these steps: +
+
+
-
+
- + 1. Download Agent Script +
+
+
+
+
+
-
+ 2. Install Agent
-
-
-
-
-
+
- + 2. Install Agent +
+
+
+
+
+
-
+ 3. Configure Credentials
-
-
-
-
-
+
- + 3. Configure Credentials +
+
+
+
+
+
-
+ 4. Test Configuration
-
-
-
-
-
+
- + 4. Test Configuration +
+
+
+
+
+
-
+ 5. Send Initial Data
-
-
-
-
-
+
- + 5. Send Initial Data +
+
+
+
+
+
-
- 6. Setup Crontab (Optional)
-
- /dev/null 2>&1" | sudo crontab -`}
- readOnly
- className="flex-1 px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-sm font-mono text-secondary-900 dark:text-white"
- />
-
-
-
+
+ + 6. Setup Crontab (Optional) +
+
+ /dev/null 2>&1" | sudo crontab -`}
+ readOnly
+ className="flex-1 px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-sm font-mono text-secondary-900 dark:text-white"
+ />
+
+
+
-
+ )}
-
-
+ {activeTab === "credentials" && (
+ API Credentials
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ + API Credentials +
+
+
- )}
+
+
+
-
+
+
+
+
-
-
-
-
-
- Security Notice
-- Keep these credentials secure. They provide full access to this host's monitoring data. -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Security Notice +
++ Keep these credentials secure. They provide full access to + this host's monitoring data. +
+
-
-
-
+
+
+
-
- )
-}
+ return (
+
-
-
-
-
-
-
-
-
- - Delete Host -
-- This action cannot be undone -
-
-
-
- - Are you sure you want to delete the host{' '} - "{host.friendly_name}"? -
-
-
- - Warning: This will permanently remove the host and all its associated data, - including package information and update history. -
-
-
-
-
-
+
+ );
+};
+
+export default HostDetail;
diff --git a/frontend/src/pages/HostGroups.jsx b/frontend/src/pages/HostGroups.jsx
index 1f4568c..8e67211 100644
--- a/frontend/src/pages/HostGroups.jsx
+++ b/frontend/src/pages/HostGroups.jsx
@@ -1,498 +1,501 @@
-import React, { useState } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import {
- Plus,
- Edit,
- Trash2,
- Server,
- Users,
- AlertTriangle,
- CheckCircle
-} from 'lucide-react'
-import { hostGroupsAPI } from '../utils/api'
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+ AlertTriangle,
+ CheckCircle,
+ Edit,
+ Plus,
+ Server,
+ Trash2,
+ Users,
+} from "lucide-react";
+import React, { useState } from "react";
+import { hostGroupsAPI } from "../utils/api";
const HostGroups = () => {
- const [showCreateModal, setShowCreateModal] = useState(false)
- const [showEditModal, setShowEditModal] = useState(false)
- const [selectedGroup, setSelectedGroup] = useState(null)
- const [showDeleteModal, setShowDeleteModal] = useState(false)
- const [groupToDelete, setGroupToDelete] = useState(null)
+ const [showCreateModal, setShowCreateModal] = useState(false);
+ const [showEditModal, setShowEditModal] = useState(false);
+ const [selectedGroup, setSelectedGroup] = useState(null);
+ const [showDeleteModal, setShowDeleteModal] = useState(false);
+ const [groupToDelete, setGroupToDelete] = useState(null);
- const queryClient = useQueryClient()
+ const queryClient = useQueryClient();
- // Fetch host groups
- const { data: hostGroups, isLoading, error } = useQuery({
- queryKey: ['hostGroups'],
- queryFn: () => hostGroupsAPI.list().then(res => res.data),
- })
+ // Fetch host groups
+ const {
+ data: hostGroups,
+ isLoading,
+ error,
+ } = useQuery({
+ queryKey: ["hostGroups"],
+ queryFn: () => hostGroupsAPI.list().then((res) => res.data),
+ });
- // Create host group mutation
- const createMutation = useMutation({
- mutationFn: (data) => hostGroupsAPI.create(data),
- onSuccess: () => {
- queryClient.invalidateQueries(['hostGroups'])
- setShowCreateModal(false)
- },
- onError: (error) => {
- console.error('Failed to create host group:', error)
- }
- })
+ // Create host group mutation
+ const createMutation = useMutation({
+ mutationFn: (data) => hostGroupsAPI.create(data),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["hostGroups"]);
+ setShowCreateModal(false);
+ },
+ onError: (error) => {
+ console.error("Failed to create host group:", error);
+ },
+ });
- // Update host group mutation
- const updateMutation = useMutation({
- mutationFn: ({ id, data }) => hostGroupsAPI.update(id, data),
- onSuccess: () => {
- queryClient.invalidateQueries(['hostGroups'])
- setShowEditModal(false)
- setSelectedGroup(null)
- },
- onError: (error) => {
- console.error('Failed to update host group:', error)
- }
- })
+ // Update host group mutation
+ const updateMutation = useMutation({
+ mutationFn: ({ id, data }) => hostGroupsAPI.update(id, data),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["hostGroups"]);
+ setShowEditModal(false);
+ setSelectedGroup(null);
+ },
+ onError: (error) => {
+ console.error("Failed to update host group:", error);
+ },
+ });
- // Delete host group mutation
- const deleteMutation = useMutation({
- mutationFn: (id) => hostGroupsAPI.delete(id),
- onSuccess: () => {
- queryClient.invalidateQueries(['hostGroups'])
- setShowDeleteModal(false)
- setGroupToDelete(null)
- },
- onError: (error) => {
- console.error('Failed to delete host group:', error)
- }
- })
+ // Delete host group mutation
+ const deleteMutation = useMutation({
+ mutationFn: (id) => hostGroupsAPI.delete(id),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["hostGroups"]);
+ setShowDeleteModal(false);
+ setGroupToDelete(null);
+ },
+ onError: (error) => {
+ console.error("Failed to delete host group:", error);
+ },
+ });
- const handleCreate = (data) => {
- createMutation.mutate(data)
- }
+ const handleCreate = (data) => {
+ createMutation.mutate(data);
+ };
- const handleEdit = (group) => {
- setSelectedGroup(group)
- setShowEditModal(true)
- }
+ const handleEdit = (group) => {
+ setSelectedGroup(group);
+ setShowEditModal(true);
+ };
- const handleUpdate = (data) => {
- updateMutation.mutate({ id: selectedGroup.id, data })
- }
+ const handleUpdate = (data) => {
+ updateMutation.mutate({ id: selectedGroup.id, data });
+ };
- const handleDeleteClick = (group) => {
- setGroupToDelete(group)
- setShowDeleteModal(true)
- }
+ const handleDeleteClick = (group) => {
+ setGroupToDelete(group);
+ setShowDeleteModal(true);
+ };
- const handleDeleteConfirm = () => {
- deleteMutation.mutate(groupToDelete.id)
- }
+ const handleDeleteConfirm = () => {
+ deleteMutation.mutate(groupToDelete.id);
+ };
- if (isLoading) {
- return (
-
+
+
+
-export default HostDetail
+
+
+
+
+ + Delete Host +
++ This action cannot be undone +
+
+
-
\ No newline at end of file
+ + Are you sure you want to delete the host{" "} + "{host.friendly_name}"? +
+
+
+ + Warning: This will permanently remove the host + and all its associated data, including package information and + update history. +
+
+
+
+
+
-
-
- )
- }
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
- if (error) {
- return (
-
-
- )
- }
+ if (error) {
+ return (
+
-
-
-
- - Error loading host groups -
-- {error.message || 'Failed to load host groups'} -
-
+
+ );
+ }
- return (
-
+
+
+
+ + Error loading host groups +
++ {error.message || "Failed to load host groups"} +
+
- {/* Header */}
- {
+ setShowEditModal(false);
+ setSelectedGroup(null);
+ }}
+ onSubmit={handleUpdate}
+ isLoading={updateMutation.isPending}
+ />
+ )}
+
+ {/* Delete Confirmation Modal */}
+ {showDeleteModal && groupToDelete && (
+ {
+ setShowDeleteModal(false);
+ setGroupToDelete(null);
+ }}
+ onConfirm={handleDeleteConfirm}
+ isLoading={deleteMutation.isPending}
+ />
+ )}
+
+ );
+};
// Create Host Group Modal
const CreateHostGroupModal = ({ onClose, onSubmit, isLoading }) => {
- const [formData, setFormData] = useState({
- name: '',
- description: '',
- color: '#3B82F6'
- })
+ const [formData, setFormData] = useState({
+ name: "",
+ description: "",
+ color: "#3B82F6",
+ });
- const handleSubmit = (e) => {
- e.preventDefault()
- onSubmit(formData)
- }
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ onSubmit(formData);
+ };
- const handleChange = (e) => {
- setFormData({
- ...formData,
- [e.target.name]: e.target.value
- })
- }
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ });
+ };
- return (
-
-
+ return (
+
-
-
- - Organize your hosts into logical groups for better management -
-
+ {/* Header */}
+ {
- setShowEditModal(false)
- setSelectedGroup(null)
- }}
- onSubmit={handleUpdate}
- isLoading={updateMutation.isPending}
- />
- )}
+ {/* Create Modal */}
+ {showCreateModal && (
+ setShowCreateModal(false)}
+ onSubmit={handleCreate}
+ isLoading={createMutation.isPending}
+ />
+ )}
- {/* Delete Confirmation Modal */}
- {showDeleteModal && groupToDelete && (
- {
- setShowDeleteModal(false)
- setGroupToDelete(null)
- }}
- onConfirm={handleDeleteConfirm}
- isLoading={deleteMutation.isPending}
- />
- )}
-
- )
-}
+ {/* Edit Modal */}
+ {showEditModal && selectedGroup && (
+
+
- {/* Host Groups Grid */}
- {hostGroups && hostGroups.length > 0 ? (
-
+
+
+ + Organize your hosts into logical groups for better management +
+
- {hostGroups.map((group) => (
-
- ) : (
-
-
- ))}
-
-
-
-
-
-
-
-
- - {group.name} -
- {group.description && ( -- {group.description} -
- )} -
-
-
-
-
-
-
-
-
-
- )}
+ {/* Host Groups Grid */}
+ {hostGroups && hostGroups.length > 0 ? (
+ - No host groups yet -
-- Create your first host group to organize your hosts -
- -
+ {hostGroups.map((group) => (
+
+ ) : (
+
+ setShowCreateModal(false)}
- onSubmit={handleCreate}
- isLoading={createMutation.isPending}
- />
- )}
+
+ ))}
+
+
- {/* Create Modal */}
- {showCreateModal && (
-
+
+
+
+
+ + {group.name} +
+ {group.description && ( ++ {group.description} +
+ )} +
+
+
+
+
+
+
+
+
+
+ )}
- {/* Edit Modal */}
- {showEditModal && selectedGroup && (
- + No host groups yet +
++ Create your first host group to organize your hosts +
+ +
-
- )
-}
+ return (
+
-
- - Create Host Group -
- - -
+
+ );
+};
// Edit Host Group Modal
const EditHostGroupModal = ({ group, onClose, onSubmit, isLoading }) => {
- const [formData, setFormData] = useState({
- name: group.name,
- description: group.description || '',
- color: group.color || '#3B82F6'
- })
+ const [formData, setFormData] = useState({
+ name: group.name,
+ description: group.description || "",
+ color: group.color || "#3B82F6",
+ });
- const handleSubmit = (e) => {
- e.preventDefault()
- onSubmit(formData)
- }
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ onSubmit(formData);
+ };
- const handleChange = (e) => {
- setFormData({
- ...formData,
- [e.target.name]: e.target.value
- })
- }
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ });
+ };
- return (
-
+
+ + Create Host Group +
+ + +
-
- )
-}
+ return (
+
-
- - Edit Host Group -
- - -
+
+ );
+};
// Delete Confirmation Modal
const DeleteHostGroupModal = ({ group, onClose, onConfirm, isLoading }) => {
- return (
-
+
+ + Edit Host Group +
+ + +
-
- )
-}
+ return (
+
-
-
-
-
-
-
-
-
- - Delete Host Group -
-- This action cannot be undone -
-
-
-
- - Are you sure you want to delete the host group{' '} - "{group.name}"? -
- {group._count.hosts > 0 && ( -
-
- )}
- - Warning: This group contains {group._count.hosts} host{group._count.hosts !== 1 ? 's' : ''}. - You must move or remove these hosts before deleting the group. -
-
-
-
-
-
+
+ );
+};
+
+export default HostGroups;
diff --git a/frontend/src/pages/Hosts.jsx b/frontend/src/pages/Hosts.jsx
index 7a0387b..971464a 100644
--- a/frontend/src/pages/Hosts.jsx
+++ b/frontend/src/pages/Hosts.jsx
@@ -1,295 +1,326 @@
-import React, { useState, useEffect } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { Link, useSearchParams, useNavigate } from 'react-router-dom'
-import {
- Server,
- AlertTriangle,
- CheckCircle,
- Clock,
- RefreshCw,
- ExternalLink,
- Plus,
- Key,
- Trash2,
- Copy,
- X,
- Eye,
- EyeOff,
- Users,
- CheckSquare,
- Square,
- Search,
- Filter,
- ArrowUpDown,
- ArrowUp,
- ArrowDown,
- ChevronDown,
- Settings,
- Columns,
- GripVertical,
- Eye as EyeIcon,
- EyeOff as EyeOffIcon
-} from 'lucide-react'
-import { dashboardAPI, adminHostsAPI, settingsAPI, hostGroupsAPI, formatRelativeTime } from '../utils/api'
-import { OSIcon } from '../utils/osIcons.jsx'
-import InlineEdit from '../components/InlineEdit'
-import InlineGroupEdit from '../components/InlineGroupEdit'
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+ AlertTriangle,
+ ArrowDown,
+ ArrowUp,
+ ArrowUpDown,
+ CheckCircle,
+ CheckSquare,
+ ChevronDown,
+ Clock,
+ Columns,
+ Copy,
+ ExternalLink,
+ Eye,
+ Eye as EyeIcon,
+ EyeOff,
+ EyeOff as EyeOffIcon,
+ Filter,
+ GripVertical,
+ Key,
+ Plus,
+ RefreshCw,
+ Search,
+ Server,
+ Settings,
+ Square,
+ Trash2,
+ Users,
+ X,
+} from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import InlineEdit from "../components/InlineEdit";
+import InlineGroupEdit from "../components/InlineGroupEdit";
+import {
+ adminHostsAPI,
+ dashboardAPI,
+ formatRelativeTime,
+ hostGroupsAPI,
+ settingsAPI,
+} from "../utils/api";
+import { OSIcon } from "../utils/osIcons.jsx";
// Add Host Modal Component
const AddHostModal = ({ isOpen, onClose, onSuccess }) => {
- const [formData, setFormData] = useState({
- friendly_name: '',
- hostGroupId: ''
- })
- const [isSubmitting, setIsSubmitting] = useState(false)
- const [error, setError] = useState('')
+ const [formData, setFormData] = useState({
+ friendly_name: "",
+ hostGroupId: "",
+ });
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [error, setError] = useState("");
- // Fetch host groups for selection
- const { data: hostGroups } = useQuery({
- queryKey: ['hostGroups'],
- queryFn: () => hostGroupsAPI.list().then(res => res.data),
- enabled: isOpen
- })
+ // Fetch host groups for selection
+ const { data: hostGroups } = useQuery({
+ queryKey: ["hostGroups"],
+ queryFn: () => hostGroupsAPI.list().then((res) => res.data),
+ enabled: isOpen,
+ });
- const handleSubmit = async (e) => {
- e.preventDefault()
- setIsSubmitting(true)
- setError('')
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setIsSubmitting(true);
+ setError("");
- console.log('Submitting form data:', formData)
+ console.log("Submitting form data:", formData);
- try {
- const response = await adminHostsAPI.create(formData)
- console.log('Host created successfully:', response.data)
- onSuccess(response.data)
- setFormData({ friendly_name: '', hostGroupId: '' })
- onClose()
- } catch (err) {
- console.error('Full error object:', err)
- console.error('Error response:', err.response)
-
- let errorMessage = 'Failed to create host'
-
- if (err.response?.data?.errors) {
- // Validation errors
- errorMessage = err.response.data.errors.map(e => e.msg).join(', ')
- } else if (err.response?.data?.error) {
- // Single error message
- errorMessage = err.response.data.error
- } else if (err.message) {
- // Network or other error
- errorMessage = err.message
- }
-
- setError(errorMessage)
- } finally {
- setIsSubmitting(false)
- }
- }
+ try {
+ const response = await adminHostsAPI.create(formData);
+ console.log("Host created successfully:", response.data);
+ onSuccess(response.data);
+ setFormData({ friendly_name: "", hostGroupId: "" });
+ onClose();
+ } catch (err) {
+ console.error("Full error object:", err);
+ console.error("Error response:", err.response);
- if (!isOpen) return null
+ let errorMessage = "Failed to create host";
- return (
-
+
+
+
-export default HostGroups
+
+
+
+
+ + Delete Host Group +
++ This action cannot be undone +
+
+
+
+ + Are you sure you want to delete the host group{" "} + "{group.name}"? +
+ {group._count.hosts > 0 && ( +
+
+ )}
+ + Warning: This group contains{" "} + {group._count.hosts} host{group._count.hosts !== 1 ? "s" : ""}. + You must move or remove these hosts before deleting the group. +
+
+
+
+
+
-
+ );
+};
// Credentials Modal Component
const CredentialsModal = ({ host, isOpen, onClose }) => {
- const [showApiKey, setShowApiKey] = useState(false)
- const [activeTab, setActiveTab] = useState(host?.isNewHost ? 'quick' : 'credentials')
+ const [showApiKey, setShowApiKey] = useState(false);
+ const [activeTab, setActiveTab] = useState(
+ host?.isNewHost ? "quick" : "credentials",
+ );
- // Update active tab when host changes
- React.useEffect(() => {
- if (host?.isNewHost) {
- setActiveTab('quick')
- } else {
- setActiveTab('credentials')
- }
- }, [host?.isNewHost])
+ // Update active tab when host changes
+ React.useEffect(() => {
+ if (host?.isNewHost) {
+ setActiveTab("quick");
+ } else {
+ setActiveTab("credentials");
+ }
+ }, [host?.isNewHost]);
- const copyToClipboard = async (text, label) => {
- try {
- // Try modern clipboard API first
- if (navigator.clipboard && window.isSecureContext) {
- await navigator.clipboard.writeText(text)
- alert(`${label} copied to clipboard!`)
- return
- }
-
- // Fallback for older browsers or non-secure contexts
- const textArea = document.createElement('textarea')
- textArea.value = text
- textArea.style.position = 'fixed'
- textArea.style.left = '-999999px'
- textArea.style.top = '-999999px'
- document.body.appendChild(textArea)
- textArea.focus()
- textArea.select()
-
- try {
- const successful = document.execCommand('copy')
- if (successful) {
- alert(`${label} copied to clipboard!`)
- } else {
- throw new Error('Copy command failed')
- }
- } catch (err) {
- // If all else fails, show the text in a prompt
- prompt(`Copy this ${label.toLowerCase()}:`, text)
- } finally {
- document.body.removeChild(textArea)
- }
- } catch (err) {
- console.error('Failed to copy to clipboard:', err)
- // Show the text in a prompt as last resort
- prompt(`Copy this ${label.toLowerCase()}:`, text)
- }
- }
+ const copyToClipboard = async (text, label) => {
+ try {
+ // Try modern clipboard API first
+ if (navigator.clipboard && window.isSecureContext) {
+ await navigator.clipboard.writeText(text);
+ alert(`${label} copied to clipboard!`);
+ return;
+ }
- // Fetch server URL from settings
- const { data: settings } = useQuery({
- queryKey: ['settings'],
- queryFn: () => settingsAPI.get().then(res => res.data),
- enabled: isOpen // Only fetch when modal is open
- })
+ // Fallback for older browsers or non-secure contexts
+ const textArea = document.createElement("textarea");
+ textArea.value = text;
+ textArea.style.position = "fixed";
+ textArea.style.left = "-999999px";
+ textArea.style.top = "-999999px";
+ document.body.appendChild(textArea);
+ textArea.focus();
+ textArea.select();
- const serverUrl = settings?.server_url || window.location.origin.replace(':3000', ':3001')
+ try {
+ const successful = document.execCommand("copy");
+ if (successful) {
+ alert(`${label} copied to clipboard!`);
+ } else {
+ throw new Error("Copy command failed");
+ }
+ } catch (err) {
+ // If all else fails, show the text in a prompt
+ prompt(`Copy this ${label.toLowerCase()}:`, text);
+ } finally {
+ document.body.removeChild(textArea);
+ }
+ } catch (err) {
+ console.error("Failed to copy to clipboard:", err);
+ // Show the text in a prompt as last resort
+ prompt(`Copy this ${label.toLowerCase()}:`, text);
+ }
+ };
- const getSetupCommands = () => {
- // Get current time for crontab scheduling
- const now = new Date()
- const currentMinute = now.getMinutes()
- const currentHour = now.getHours()
-
- return {
- oneLine: `curl -sSL ${serverUrl}/api/v1/hosts/install | bash -s -- ${serverUrl} "${host?.api_id}" "${host?.api_key}"`,
+ // Fetch server URL from settings
+ const { data: settings } = useQuery({
+ queryKey: ["settings"],
+ queryFn: () => settingsAPI.get().then((res) => res.data),
+ enabled: isOpen, // Only fetch when modal is open
+ });
- download: `# Download and setup PatchMon agent
+ const serverUrl =
+ settings?.server_url || window.location.origin.replace(":3000", ":3001");
+
+ const getSetupCommands = () => {
+ // Get current time for crontab scheduling
+ const now = new Date();
+ const currentMinute = now.getMinutes();
+ const currentHour = now.getHours();
+
+ return {
+ oneLine: `curl -sSL ${serverUrl}/api/v1/hosts/install | bash -s -- ${serverUrl} "${host?.api_id}" "${host?.api_key}"`,
+
+ download: `# Download and setup PatchMon agent
curl -o /tmp/patchmon-agent.sh ${serverUrl}/api/v1/hosts/agent/download
sudo mkdir -p /etc/patchmon
sudo mv /tmp/patchmon-agent.sh /usr/local/bin/patchmon-agent.sh
sudo chmod +x /usr/local/bin/patchmon-agent.sh`,
- configure: `# Configure API credentials
+ configure: `# Configure API credentials
sudo /usr/local/bin/patchmon-agent.sh configure "${host?.api_id}" "${host?.api_key}"`,
- test: `# Test the configuration
+ test: `# Test the configuration
sudo /usr/local/bin/patchmon-agent.sh test`,
- initialUpdate: `# Send initial package data
+ initialUpdate: `# Send initial package data
sudo /usr/local/bin/patchmon-agent.sh update`,
- crontab: `# Add to crontab for hourly updates starting at current time (run as root)
+ crontab: `# Add to crontab for hourly updates starting at current time (run as root)
echo "${currentMinute} * * * * /usr/local/bin/patchmon-agent.sh update >/dev/null 2>&1" | sudo crontab -`,
- fullSetup: `#!/bin/bash
+ fullSetup: `#!/bin/bash
# Complete PatchMon Agent Setup Script
# Run this on the target host: ${host?.friendly_name}
@@ -315,1720 +346,1959 @@ echo "📊 Sending initial package data..."
sudo /usr/local/bin/patchmon-agent.sh update
# Setup crontab starting at current time
-echo "⏰ Setting up hourly crontab starting at ${currentHour.toString().padStart(2, '0')}:${currentMinute.toString().padStart(2, '0')}..."
+echo "⏰ Setting up hourly crontab starting at ${currentHour.toString().padStart(2, "0")}:${currentMinute.toString().padStart(2, "0")}..."
echo "${currentMinute} * * * * /usr/local/bin/patchmon-agent.sh update >/dev/null 2>&1" | sudo crontab -
echo "✅ PatchMon agent setup complete!"
echo " - Agent installed: /usr/local/bin/patchmon-agent.sh"
echo " - Config directory: /etc/patchmon/"
-echo " - Updates: Every hour via crontab (starting at ${currentHour.toString().padStart(2, '0')}:${currentMinute.toString().padStart(2, '0')})"
-echo " - View logs: tail -f /var/log/patchmon-agent.log"`
- }
- }
+echo " - Updates: Every hour via crontab (starting at ${currentHour.toString().padStart(2, "0")}:${currentMinute.toString().padStart(2, "0")})"
+echo " - View logs: tail -f /var/log/patchmon-agent.log"`,
+ };
+ };
- if (!isOpen || !host) return null
+ if (!isOpen || !host) return null;
- const commands = getSetupCommands()
+ const commands = getSetupCommands();
- return (
-
-
+
-
+ if (err.response?.data?.errors) {
+ // Validation errors
+ errorMessage = err.response.data.errors.map((e) => e.msg).join(", ");
+ } else if (err.response?.data?.error) {
+ // Single error message
+ errorMessage = err.response.data.error;
+ } else if (err.message) {
+ // Network or other error
+ errorMessage = err.message;
+ }
-
+ Add New Host
- -
-
+ );
+};
const Hosts = () => {
- const [showAddModal, setShowAddModal] = useState(false)
- const [selectedHosts, setSelectedHosts] = useState([])
- const [showBulkAssignModal, setShowBulkAssignModal] = useState(false)
- const [showBulkDeleteModal, setShowBulkDeleteModal] = useState(false)
- const [searchParams] = useSearchParams()
- const navigate = useNavigate()
-
- // Table state
- const [searchTerm, setSearchTerm] = useState('')
- const [sortField, setSortField] = useState('hostname')
- const [sortDirection, setSortDirection] = useState('asc')
- const [groupFilter, setGroupFilter] = useState('all')
- const [statusFilter, setStatusFilter] = useState('all')
- const [osFilter, setOsFilter] = useState('all')
- const [showFilters, setShowFilters] = useState(false)
- const [groupBy, setGroupBy] = useState('none')
- const [showColumnSettings, setShowColumnSettings] = useState(false)
- const [hideStale, setHideStale] = useState(false)
+ const [showAddModal, setShowAddModal] = useState(false);
+ const [selectedHosts, setSelectedHosts] = useState([]);
+ const [showBulkAssignModal, setShowBulkAssignModal] = useState(false);
+ const [showBulkDeleteModal, setShowBulkDeleteModal] = useState(false);
+ const [searchParams] = useSearchParams();
+ const navigate = useNavigate();
- // Handle URL filter parameters
- useEffect(() => {
- const filter = searchParams.get('filter')
- const showFiltersParam = searchParams.get('showFilters')
- const osFilterParam = searchParams.get('osFilter')
-
- if (filter === 'needsUpdates') {
- setShowFilters(true)
- setStatusFilter('all')
- // We'll filter hosts with updates > 0 in the filtering logic
- } else if (filter === 'inactive') {
- setShowFilters(true)
- setStatusFilter('inactive')
- // We'll filter hosts with inactive status in the filtering logic
- } else if (filter === 'upToDate') {
- setShowFilters(true)
- setStatusFilter('active')
- // We'll filter hosts that are up to date in the filtering logic
- } else if (filter === 'stale') {
- setShowFilters(true)
- setStatusFilter('all')
- // We'll filter hosts that are stale in the filtering logic
- } else if (showFiltersParam === 'true') {
- setShowFilters(true)
- }
-
- // Handle OS filter parameter
- if (osFilterParam) {
- setShowFilters(true)
- setOsFilter(osFilterParam)
- }
-
- // Handle add host action from navigation
- const action = searchParams.get('action')
- if (action === 'add') {
- setShowAddModal(true)
- // Remove the action parameter from URL without triggering a page reload
- const newSearchParams = new URLSearchParams(searchParams)
- newSearchParams.delete('action')
- navigate(`/hosts${newSearchParams.toString() ? `?${newSearchParams.toString()}` : ''}`, { replace: true })
- }
+ // Table state
+ const [searchTerm, setSearchTerm] = useState("");
+ const [sortField, setSortField] = useState("hostname");
+ const [sortDirection, setSortDirection] = useState("asc");
+ const [groupFilter, setGroupFilter] = useState("all");
+ const [statusFilter, setStatusFilter] = useState("all");
+ const [osFilter, setOsFilter] = useState("all");
+ const [showFilters, setShowFilters] = useState(false);
+ const [groupBy, setGroupBy] = useState("none");
+ const [showColumnSettings, setShowColumnSettings] = useState(false);
+ const [hideStale, setHideStale] = useState(false);
- // Handle selected hosts from packages page
- const selected = searchParams.get('selected')
- if (selected) {
- const hostIds = selected.split(',').filter(Boolean)
- setSelectedHosts(hostIds)
- // Remove the selected parameter from URL without triggering a page reload
- const newSearchParams = new URLSearchParams(searchParams)
- newSearchParams.delete('selected')
- navigate(`/hosts${newSearchParams.toString() ? `?${newSearchParams.toString()}` : ''}`, { replace: true })
- }
- }, [searchParams, navigate])
+ // Handle URL filter parameters
+ useEffect(() => {
+ const filter = searchParams.get("filter");
+ const showFiltersParam = searchParams.get("showFilters");
+ const osFilterParam = searchParams.get("osFilter");
- // Column configuration
- const [columnConfig, setColumnConfig] = useState(() => {
- const defaultConfig = [
- { id: 'select', label: 'Select', visible: true, order: 0 },
- { id: 'host', label: 'Friendly Name', visible: true, order: 1 },
- { id: 'ip', label: 'IP Address', visible: false, order: 2 },
- { id: 'group', label: 'Group', visible: true, order: 3 },
- { id: 'os', label: 'OS', visible: true, order: 4 },
- { id: 'os_version', label: 'OS Version', visible: false, order: 5 },
- { id: 'agent_version', label: 'Agent Version', visible: true, order: 6 },
- { id: 'auto_update', label: 'Auto-update', visible: true, order: 7 },
- { id: 'status', label: 'Status', visible: true, order: 8 },
- { id: 'updates', label: 'Updates', visible: true, order: 9 },
- { id: 'last_update', label: 'Last Update', visible: true, order: 10 },
- { id: 'actions', label: 'Actions', visible: true, order: 11 }
- ]
+ if (filter === "needsUpdates") {
+ setShowFilters(true);
+ setStatusFilter("all");
+ // We'll filter hosts with updates > 0 in the filtering logic
+ } else if (filter === "inactive") {
+ setShowFilters(true);
+ setStatusFilter("inactive");
+ // We'll filter hosts with inactive status in the filtering logic
+ } else if (filter === "upToDate") {
+ setShowFilters(true);
+ setStatusFilter("active");
+ // We'll filter hosts that are up to date in the filtering logic
+ } else if (filter === "stale") {
+ setShowFilters(true);
+ setStatusFilter("all");
+ // We'll filter hosts that are stale in the filtering logic
+ } else if (showFiltersParam === "true") {
+ setShowFilters(true);
+ }
- const saved = localStorage.getItem('hosts-column-config')
- if (saved) {
- try {
- const savedConfig = JSON.parse(saved)
-
- // Check if we have old camelCase column IDs that need to be migrated
- const hasOldColumns = savedConfig.some(col =>
- col.id === 'agentVersion' || col.id === 'autoUpdate' || col.id === 'osVersion' || col.id === 'lastUpdate'
- )
-
- if (hasOldColumns) {
- // Clear the old configuration and use the default snake_case configuration
- localStorage.removeItem('hosts-column-config')
- return defaultConfig
- } else {
- // Use the existing configuration
- return savedConfig
- }
- } catch (error) {
- // If there's an error parsing the config, clear it and use default
- localStorage.removeItem('hosts-column-config')
- return defaultConfig
- }
- }
-
- return defaultConfig
- })
-
- const queryClient = useQueryClient()
+ // Handle OS filter parameter
+ if (osFilterParam) {
+ setShowFilters(true);
+ setOsFilter(osFilterParam);
+ }
- const { data: hosts, isLoading, error, refetch, isFetching } = useQuery({
- queryKey: ['hosts'],
- queryFn: () => dashboardAPI.getHosts().then(res => res.data),
- staleTime: 5 * 60 * 1000, // Data stays fresh for 5 minutes
- refetchOnWindowFocus: false, // Don't refetch when window regains focus
- })
+ // Handle add host action from navigation
+ const action = searchParams.get("action");
+ if (action === "add") {
+ setShowAddModal(true);
+ // Remove the action parameter from URL without triggering a page reload
+ const newSearchParams = new URLSearchParams(searchParams);
+ newSearchParams.delete("action");
+ navigate(
+ `/hosts${newSearchParams.toString() ? `?${newSearchParams.toString()}` : ""}`,
+ { replace: true },
+ );
+ }
- const { data: hostGroups } = useQuery({
- queryKey: ['hostGroups'],
- queryFn: () => hostGroupsAPI.list().then(res => res.data),
- })
+ // Handle selected hosts from packages page
+ const selected = searchParams.get("selected");
+ if (selected) {
+ const hostIds = selected.split(",").filter(Boolean);
+ setSelectedHosts(hostIds);
+ // Remove the selected parameter from URL without triggering a page reload
+ const newSearchParams = new URLSearchParams(searchParams);
+ newSearchParams.delete("selected");
+ navigate(
+ `/hosts${newSearchParams.toString() ? `?${newSearchParams.toString()}` : ""}`,
+ { replace: true },
+ );
+ }
+ }, [searchParams, navigate]);
- const bulkUpdateGroupMutation = useMutation({
- mutationFn: ({ hostIds, hostGroupId }) => adminHostsAPI.bulkUpdateGroup(hostIds, hostGroupId),
- onSuccess: (data) => {
- console.log('bulkUpdateGroupMutation success:', data);
-
- // Update the cache with the new host data
- if (data && data.hosts) {
- queryClient.setQueryData(['hosts'], (oldData) => {
- if (!oldData) return oldData;
- return oldData.map(host => {
- const updatedHost = data.hosts.find(h => h.id === host.id);
- if (updatedHost) {
- // Ensure hostGroupId is set correctly
- return {
- ...updatedHost,
- hostGroupId: updatedHost.host_groups?.id || null
- };
- }
- return host;
- });
- });
- }
-
- // Also invalidate to ensure consistency
- queryClient.invalidateQueries(['hosts'])
- setSelectedHosts([])
- setShowBulkAssignModal(false)
- },
- })
+ // Column configuration
+ const [columnConfig, setColumnConfig] = useState(() => {
+ const defaultConfig = [
+ { id: "select", label: "Select", visible: true, order: 0 },
+ { id: "host", label: "Friendly Name", visible: true, order: 1 },
+ { id: "ip", label: "IP Address", visible: false, order: 2 },
+ { id: "group", label: "Group", visible: true, order: 3 },
+ { id: "os", label: "OS", visible: true, order: 4 },
+ { id: "os_version", label: "OS Version", visible: false, order: 5 },
+ { id: "agent_version", label: "Agent Version", visible: true, order: 6 },
+ { id: "auto_update", label: "Auto-update", visible: true, order: 7 },
+ { id: "status", label: "Status", visible: true, order: 8 },
+ { id: "updates", label: "Updates", visible: true, order: 9 },
+ { id: "last_update", label: "Last Update", visible: true, order: 10 },
+ { id: "actions", label: "Actions", visible: true, order: 11 },
+ ];
- // Toggle auto-update mutation
- const toggleAutoUpdateMutation = useMutation({
- mutationFn: ({ hostId, auto_update }) => adminHostsAPI.toggleAutoUpdate(hostId, auto_update).then(res => res.data),
- onSuccess: () => {
- queryClient.invalidateQueries(['hosts'])
- }
- })
+ const saved = localStorage.getItem("hosts-column-config");
+ if (saved) {
+ try {
+ const savedConfig = JSON.parse(saved);
- const updateFriendlyNameMutation = useMutation({
- mutationFn: ({ hostId, friendlyName }) => adminHostsAPI.updateFriendlyName(hostId, friendlyName).then(res => res.data),
- onSuccess: () => {
- queryClient.invalidateQueries(['hosts'])
- }
- })
+ // Check if we have old camelCase column IDs that need to be migrated
+ const hasOldColumns = savedConfig.some(
+ (col) =>
+ col.id === "agentVersion" ||
+ col.id === "autoUpdate" ||
+ col.id === "osVersion" ||
+ col.id === "lastUpdate",
+ );
- const updateHostGroupMutation = useMutation({
- mutationFn: ({ hostId, hostGroupId }) => {
- console.log('updateHostGroupMutation called with:', { hostId, hostGroupId });
- return adminHostsAPI.updateGroup(hostId, hostGroupId).then(res => {
- console.log('updateGroup API response:', res);
- return res.data;
- });
- },
- onSuccess: (data) => {
-
- // Update the cache with the new host data
- queryClient.setQueryData(['hosts'], (oldData) => {
- console.log('Old cache data before update:', oldData);
- if (!oldData) return oldData;
- const updatedData = oldData.map(host => {
- if (host.id === data.host.id) {
- console.log('Updating host in cache:', host.id, 'with new data:', data.host);
- // Ensure hostGroupId is set correctly
- const updatedHost = {
- ...data.host,
- hostGroupId: data.host.host_groups?.id || null
- };
- console.log('Updated host with hostGroupId:', updatedHost);
- return updatedHost;
- }
- return host;
- });
- console.log('New cache data after update:', updatedData);
- return updatedData;
- });
-
- // Also invalidate to ensure consistency
- queryClient.invalidateQueries(['hosts'])
- },
- onError: (error) => {
- console.error('updateHostGroupMutation error:', error);
- }
- })
+ if (hasOldColumns) {
+ // Clear the old configuration and use the default snake_case configuration
+ localStorage.removeItem("hosts-column-config");
+ return defaultConfig;
+ } else {
+ // Use the existing configuration
+ return savedConfig;
+ }
+ } catch (error) {
+ // If there's an error parsing the config, clear it and use default
+ localStorage.removeItem("hosts-column-config");
+ return defaultConfig;
+ }
+ }
- const bulkDeleteMutation = useMutation({
- mutationFn: (hostIds) => adminHostsAPI.deleteBulk(hostIds),
- onSuccess: (data) => {
- console.log('Bulk delete success:', data);
- queryClient.invalidateQueries(['hosts']);
- setSelectedHosts([]);
- setShowBulkDeleteModal(false);
- },
- onError: (error) => {
- console.error('Bulk delete error:', error);
- }
- });
+ return defaultConfig;
+ });
- // Helper functions for bulk selection
- const handleSelectHost = (hostId) => {
- setSelectedHosts(prev =>
- prev.includes(hostId)
- ? prev.filter(id => id !== hostId)
- : [...prev, hostId]
- )
- }
+ const queryClient = useQueryClient();
- const handleSelectAll = () => {
- if (selectedHosts.length === hosts.length) {
- setSelectedHosts([])
- } else {
- setSelectedHosts(hosts.map(host => host.id))
- }
- }
+ const {
+ data: hosts,
+ isLoading,
+ error,
+ refetch,
+ isFetching,
+ } = useQuery({
+ queryKey: ["hosts"],
+ queryFn: () => dashboardAPI.getHosts().then((res) => res.data),
+ staleTime: 5 * 60 * 1000, // Data stays fresh for 5 minutes
+ refetchOnWindowFocus: false, // Don't refetch when window regains focus
+ });
- const handleBulkAssign = (hostGroupId) => {
- bulkUpdateGroupMutation.mutate({ hostIds: selectedHosts, hostGroupId })
- }
+ const { data: hostGroups } = useQuery({
+ queryKey: ["hostGroups"],
+ queryFn: () => hostGroupsAPI.list().then((res) => res.data),
+ });
- const handleBulkDelete = () => {
- bulkDeleteMutation.mutate(selectedHosts)
- }
+ const bulkUpdateGroupMutation = useMutation({
+ mutationFn: ({ hostIds, hostGroupId }) =>
+ adminHostsAPI.bulkUpdateGroup(hostIds, hostGroupId),
+ onSuccess: (data) => {
+ console.log("bulkUpdateGroupMutation success:", data);
- // Table filtering and sorting logic
- const filteredAndSortedHosts = React.useMemo(() => {
- if (!hosts) return []
+ // Update the cache with the new host data
+ if (data && data.hosts) {
+ queryClient.setQueryData(["hosts"], (oldData) => {
+ if (!oldData) return oldData;
+ return oldData.map((host) => {
+ const updatedHost = data.hosts.find((h) => h.id === host.id);
+ if (updatedHost) {
+ // Ensure hostGroupId is set correctly
+ return {
+ ...updatedHost,
+ hostGroupId: updatedHost.host_groups?.id || null,
+ };
+ }
+ return host;
+ });
+ });
+ }
- let filtered = hosts.filter(host => {
- // Search filter
- const matchesSearch = searchTerm === '' ||
- host.friendly_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
- host.ip?.toLowerCase().includes(searchTerm.toLowerCase()) ||
- host.os_type?.toLowerCase().includes(searchTerm.toLowerCase())
+ // Also invalidate to ensure consistency
+ queryClient.invalidateQueries(["hosts"]);
+ setSelectedHosts([]);
+ setShowBulkAssignModal(false);
+ },
+ });
- // Group filter
- const matchesGroup = groupFilter === 'all' ||
- (groupFilter === 'ungrouped' && !host.host_groups) ||
- (groupFilter !== 'ungrouped' && host.host_groups?.id === groupFilter)
+ // Toggle auto-update mutation
+ const toggleAutoUpdateMutation = useMutation({
+ mutationFn: ({ hostId, auto_update }) =>
+ adminHostsAPI
+ .toggleAutoUpdate(hostId, auto_update)
+ .then((res) => res.data),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["hosts"]);
+ },
+ });
- // Status filter
- const matchesStatus = statusFilter === 'all' || (host.effectiveStatus || host.status) === statusFilter
+ const updateFriendlyNameMutation = useMutation({
+ mutationFn: ({ hostId, friendlyName }) =>
+ adminHostsAPI
+ .updateFriendlyName(hostId, friendlyName)
+ .then((res) => res.data),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["hosts"]);
+ },
+ });
- // OS filter
- const matchesOs = osFilter === 'all' || host.os_type?.toLowerCase() === osFilter.toLowerCase()
+ const updateHostGroupMutation = useMutation({
+ mutationFn: ({ hostId, hostGroupId }) => {
+ console.log("updateHostGroupMutation called with:", {
+ hostId,
+ hostGroupId,
+ });
+ return adminHostsAPI.updateGroup(hostId, hostGroupId).then((res) => {
+ console.log("updateGroup API response:", res);
+ return res.data;
+ });
+ },
+ onSuccess: (data) => {
+ // Update the cache with the new host data
+ queryClient.setQueryData(["hosts"], (oldData) => {
+ console.log("Old cache data before update:", oldData);
+ if (!oldData) return oldData;
+ const updatedData = oldData.map((host) => {
+ if (host.id === data.host.id) {
+ console.log(
+ "Updating host in cache:",
+ host.id,
+ "with new data:",
+ data.host,
+ );
+ // Ensure hostGroupId is set correctly
+ const updatedHost = {
+ ...data.host,
+ hostGroupId: data.host.host_groups?.id || null,
+ };
+ console.log("Updated host with hostGroupId:", updatedHost);
+ return updatedHost;
+ }
+ return host;
+ });
+ console.log("New cache data after update:", updatedData);
+ return updatedData;
+ });
- // URL filter for hosts needing updates, inactive hosts, up-to-date hosts, or stale hosts
- const filter = searchParams.get('filter')
- const matchesUrlFilter =
- (filter !== 'needsUpdates' || (host.updatesCount && host.updatesCount > 0)) &&
- (filter !== 'inactive' || (host.effectiveStatus || host.status) === 'inactive') &&
- (filter !== 'upToDate' || (!host.isStale && host.updatesCount === 0)) &&
- (filter !== 'stale' || host.isStale)
+ // Also invalidate to ensure consistency
+ queryClient.invalidateQueries(["hosts"]);
+ },
+ onError: (error) => {
+ console.error("updateHostGroupMutation error:", error);
+ },
+ });
- // Hide stale filter
- const matchesHideStale = !hideStale || !host.isStale
+ const bulkDeleteMutation = useMutation({
+ mutationFn: (hostIds) => adminHostsAPI.deleteBulk(hostIds),
+ onSuccess: (data) => {
+ console.log("Bulk delete success:", data);
+ queryClient.invalidateQueries(["hosts"]);
+ setSelectedHosts([]);
+ setShowBulkDeleteModal(false);
+ },
+ onError: (error) => {
+ console.error("Bulk delete error:", error);
+ },
+ });
- return matchesSearch && matchesGroup && matchesStatus && matchesOs && matchesUrlFilter && matchesHideStale
- })
+ // Helper functions for bulk selection
+ const handleSelectHost = (hostId) => {
+ setSelectedHosts((prev) =>
+ prev.includes(hostId)
+ ? prev.filter((id) => id !== hostId)
+ : [...prev, hostId],
+ );
+ };
- // Sorting
- filtered.sort((a, b) => {
- let aValue, bValue
-
- switch (sortField) {
- case 'friendlyName':
- aValue = a.friendly_name.toLowerCase()
- bValue = b.friendly_name.toLowerCase()
- break
- case 'hostname':
- aValue = a.hostname?.toLowerCase() || 'zzz_no_hostname'
- bValue = b.hostname?.toLowerCase() || 'zzz_no_hostname'
- break
- case 'ip':
- aValue = a.ip?.toLowerCase() || 'zzz_no_ip'
- bValue = b.ip?.toLowerCase() || 'zzz_no_ip'
- break
- case 'group':
- aValue = a.host_groups?.name || 'zzz_ungrouped'
- bValue = b.host_groups?.name || 'zzz_ungrouped'
- break
- case 'os':
- aValue = a.os_type?.toLowerCase() || 'zzz_unknown'
- bValue = b.os_type?.toLowerCase() || 'zzz_unknown'
- break
- case 'os_version':
- aValue = a.os_version?.toLowerCase() || 'zzz_unknown'
- bValue = b.os_version?.toLowerCase() || 'zzz_unknown'
- break
- case 'agent_version':
- aValue = a.agent_version?.toLowerCase() || 'zzz_no_version'
- bValue = b.agent_version?.toLowerCase() || 'zzz_no_version'
- break
- case 'status':
- aValue = a.effectiveStatus || a.status
- bValue = b.effectiveStatus || b.status
- break
- case 'updates':
- aValue = a.updatesCount || 0
- bValue = b.updatesCount || 0
- break
- case 'last_update':
- aValue = new Date(a.last_update)
- bValue = new Date(b.last_update)
- break
- default:
- aValue = a[sortField]
- bValue = b[sortField]
- }
+ const handleSelectAll = () => {
+ if (selectedHosts.length === hosts.length) {
+ setSelectedHosts([]);
+ } else {
+ setSelectedHosts(hosts.map((host) => host.id));
+ }
+ };
- if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1
- if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1
- return 0
- })
+ const handleBulkAssign = (hostGroupId) => {
+ bulkUpdateGroupMutation.mutate({ hostIds: selectedHosts, hostGroupId });
+ };
- return filtered
- }, [hosts, searchTerm, groupFilter, statusFilter, osFilter, sortField, sortDirection, searchParams])
+ const handleBulkDelete = () => {
+ bulkDeleteMutation.mutate(selectedHosts);
+ };
- // Group hosts by selected field
- const groupedHosts = React.useMemo(() => {
- if (groupBy === 'none') {
- return { 'All Hosts': filteredAndSortedHosts }
- }
+ // Table filtering and sorting logic
+ const filteredAndSortedHosts = React.useMemo(() => {
+ if (!hosts) return [];
- const groups = {}
- filteredAndSortedHosts.forEach(host => {
- let groupKey
- switch (groupBy) {
- case 'group':
- groupKey = host.host_groups?.name || 'Ungrouped'
- break
- case 'status':
- groupKey = (host.effectiveStatus || host.status).charAt(0).toUpperCase() + (host.effectiveStatus || host.status).slice(1)
- break
- case 'os':
- groupKey = host.os_type || 'Unknown'
- break
- default:
- groupKey = 'All Hosts'
- }
-
- if (!groups[groupKey]) {
- groups[groupKey] = []
- }
- groups[groupKey].push(host)
- })
+ const filtered = hosts.filter((host) => {
+ // Search filter
+ const matchesSearch =
+ searchTerm === "" ||
+ host.friendly_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ host.ip?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ host.os_type?.toLowerCase().includes(searchTerm.toLowerCase());
- return groups
- }, [filteredAndSortedHosts, groupBy])
+ // Group filter
+ const matchesGroup =
+ groupFilter === "all" ||
+ (groupFilter === "ungrouped" && !host.host_groups) ||
+ (groupFilter !== "ungrouped" && host.host_groups?.id === groupFilter);
- const handleSort = (field) => {
- if (sortField === field) {
- setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
- } else {
- setSortField(field)
- setSortDirection('asc')
- }
- }
+ // Status filter
+ const matchesStatus =
+ statusFilter === "all" ||
+ (host.effectiveStatus || host.status) === statusFilter;
- const getSortIcon = (field) => {
- if (sortField !== field) return
-
+
-
+ return (
+ Host Setup - {host.friendly_name}
- -
+
- )
-}
+
+
+
-
+
- {/* Tabs */}
- + Host Setup - {host.friendly_name} +
+ +
-
-
-
-
-
+ {/* Tabs */}
+
+
+
+
+
+
- {/* Tab Content */}
- {activeTab === 'quick' && (
-
-
+ )}
- {activeTab === 'credentials' && (
-
-
+ {/* Tab Content */}
+ {activeTab === "quick" && (
+ 🚀 One-Line Installation
-- Copy and paste this single command on {host.friendly_name} to install and configure the PatchMon agent automatically. -
-
+
- )}
+
+
- + 🚀 One-Line Installation +
++ Copy and paste this single command on{" "} + {host.friendly_name} to install and configure + the PatchMon agent automatically. +
+
-
+ Installation Command
-
-
-
-
- {commands.oneLine}
-
- - This command will download, install, configure, and set up automatic updates for the PatchMon agent. -
-
+
- + Installation Command +
+
+
+
+
+
+ {commands.oneLine}
+
+
+ + This command will download, install, configure, and set up + automatic updates for the PatchMon agent. +
+
-
+ 📋 What This Command Does
--
-
- • Downloads the PatchMon installation script -
- • Installs the agent to
/usr/local/bin/patchmon-agent.sh
- - • Configures API credentials for {host.friendly_name} -
- • Tests the connection to PatchMon server -
- • Sends initial package data -
- • Sets up hourly automatic updates via crontab -
+
- + 📋 What This Command Does +
+-
+
- • Downloads the PatchMon installation script +
-
+ • Installs the agent to{" "}
+
/usr/local/bin/patchmon-agent.sh+
+ - + • Configures API credentials for{" "} + {host.friendly_name} + +
- • Tests the connection to PatchMon server +
- • Sends initial package data +
- • Sets up hourly automatic updates via crontab +
-
- ⚠️ Requirements
--
-
- • Must be run as root (use
sudo)
- - • Requires internet connection to download agent -
- • Requires
curlandbashto be installed
- - • Host must be able to reach the PatchMon server -
+
+ + ⚠️ Requirements +
+-
+
-
+ • Must be run as root (use
sudo) +
+ - • Requires internet connection to download agent +
-
+ • Requires
curlandbashto be + installed +
+ - • Host must be able to reach the PatchMon server +
-
+ )}
- {activeTab === 'setup' && (
-
-
-
+ {activeTab === "credentials" && (
+
-
-
-
-
+
- )}
+
+
+
-
+
+
+
+
-
-
+
-
-
-
-
-
+
+
-
+
+
+
+
+
-
- ⚠️ Security Note
-- Keep these credentials secure. They provide access to update package information for {host.friendly_name} only. -
-
+
+ + ⚠️ Security Note +
++ Keep these credentials secure. They provide access to update + package information for {host.friendly_name}{" "} + only. +
+
-
+ )}
- {activeTab === 'script' && (
-
-
+ {activeTab === "setup" && (
+ 📋 Step-by-Step Setup
-- Follow these commands on {host.friendly_name} to install and configure the PatchMon agent. -
-
+
- )}
+ {/* Step 5: Crontab */}
+
+
- {/* Step 1: Download & Install */}
- + 📋 Step-by-Step Setup +
++ Follow these commands on {host.friendly_name}{" "} + to install and configure the PatchMon agent. +
+
-
+ {/* Step 1: Download & Install */}
+ Step 1: Download & Install Agent
-
-
-
-
- {commands.download}
-
-
+
- {/* Step 2: Configure */}
- + Step 1: Download & Install Agent +
+
+
+
+
+
+ {commands.download}
+
+
+
-
+ {/* Step 2: Configure */}
+ Step 2: Configure API Credentials
-
-
-
-
- {commands.configure}
-
-
+
- {/* Step 3: Test */}
- + Step 2: Configure API Credentials +
+
+
+
+
+ {commands.configure}
+
+
-
+ {/* Step 3: Test */}
+ Step 3: Test Configuration
-
-
-
-
- {commands.test}
-
-
+
- {/* Step 4: Initial Update */}
- + Step 3: Test Configuration +
+
+
+
+
+ {commands.test}
+
+
-
+ {/* Step 4: Initial Update */}
+ Step 4: Send Initial Package Data
-- This will automatically detect and send system information (OS, IP, architecture) along with package data. -
-
-
-
-
- {commands.initialUpdate}
-
-
+
- {/* Step 5: Crontab */}
- + Step 4: Send Initial Package Data +
++ This will automatically detect and send system information (OS, + IP, architecture) along with package data. +
+
+
+
+
+ {commands.initialUpdate}
+
+
-
- Step 5: Setup Hourly Updates
-
-
-
-
- {commands.crontab}
-
- - This sets up automatic package updates every hour at the top of the hour. -
-
+
+ + Step 5: Setup Hourly Updates +
+
+
+
+
+ {commands.crontab}
+
+ + This sets up automatic package updates every hour at the top of + the hour. +
+
-
+ )}
-
-
-
+ {activeTab === "script" && (
+ 🚀 Automated Setup
-- Copy this complete setup script to {host.friendly_name} and run it to automatically install and configure everything. -
-
+
- )}
+
+
- + 🚀 Automated Setup +
++ Copy this complete setup script to{" "} + {host.friendly_name} and run it to + automatically install and configure everything. +
+
-
-
-
- Complete Setup Script
- -
-
- {commands.fullSetup}
-
-
- Usage:
-1. Copy the script above
-2. Save it to a file on {host.friendly_name} (e.g., setup-patchmon.sh)
3. Run: chmod +x setup-patchmon.sh && sudo ./setup-patchmon.sh
+
+
+
+ + Complete Setup Script +
+ +
+
+ {commands.fullSetup}
+
+
+ + Usage: +
+1. Copy the script above
+
+ 2. Save it to a file on {host.friendly_name} (e.g.,{" "}
+ setup-patchmon.sh)
+
+ 3. Run:{" "}
+
+ chmod +x setup-patchmon.sh && sudo ./setup-patchmon.sh
+
+
- {host.hostname || 'N/A'}
-
- )
- case 'ip':
- return (
-
- {host.ip || 'N/A'}
-
- )
- case 'group':
- return (
-
-
- )
- case 'os_version':
- return (
-
- {host.os_version || 'N/A'}
-
- )
- case 'agent_version':
- return (
-
- {host.agent_version || 'N/A'}
-
- )
- case 'auto_update':
- return (
-
- {host.auto_update ? 'Yes' : 'No'}
-
- )
- case 'status':
- return (
-
- {(host.effectiveStatus || host.status).charAt(0).toUpperCase() + (host.effectiveStatus || host.status).slice(1)}
-
- )
- case 'updates':
- return (
-
- )
- case 'last_update':
- return (
-
- {formatRelativeTime(host.last_update)}
-
- )
- case 'actions':
- return (
-
- View
-
-
- )
- }
+ const handleSort = (field) => {
+ if (sortField === field) {
+ setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+ } else {
+ setSortField(field);
+ setSortDirection("asc");
+ }
+ };
- if (error) {
- return (
-
-
- )
- }
+ const getSortIcon = (field) => {
+ if (sortField !== field) return
-
-
-
- Error loading hosts
-- {error.message || 'Failed to load hosts'} -
- -
- {/* Page Header */}
- setShowAddModal(false)}
- onSuccess={handleHostCreated}
- />
-
+ // Stats card click handlers
+ const handleTotalHostsClick = () => {
+ // Clear all filters to show all hosts
+ setSearchTerm("");
+ setGroupFilter("all");
+ setStatusFilter("all");
+ setOsFilter("all");
+ setGroupBy("none");
+ setHideStale(false);
+ setShowFilters(false);
+ // Clear URL parameters to ensure no filters are applied
+ navigate("/hosts", { replace: true });
+ };
- {/* Bulk Assign Modal */}
- {showBulkAssignModal && (
- setShowBulkAssignModal(false)}
- onAssign={handleBulkAssign}
- isLoading={bulkUpdateGroupMutation.isPending}
- />
- )}
+ const handleUpToDateClick = () => {
+ // Filter to show only up-to-date hosts
+ setStatusFilter("active");
+ setShowFilters(true);
+ // Use the upToDate URL filter
+ const newSearchParams = new URLSearchParams(window.location.search);
+ newSearchParams.set("filter", "upToDate");
+ navigate(`/hosts?${newSearchParams.toString()}`, { replace: true });
+ };
- {/* Bulk Delete Modal */}
- {showBulkDeleteModal && (
- setShowBulkDeleteModal(false)}
- onDelete={handleBulkDelete}
- isLoading={bulkDeleteMutation.isPending}
- />
- )}
+ const handleNeedsUpdatesClick = () => {
+ // Filter to show hosts needing updates (regardless of status)
+ setStatusFilter("all");
+ setShowFilters(true);
+ // We'll use the existing needsUpdates URL filter logic
+ const newSearchParams = new URLSearchParams(window.location.search);
+ newSearchParams.set("filter", "needsUpdates");
+ navigate(`/hosts?${newSearchParams.toString()}`, { replace: true });
+ };
- {/* Column Settings Modal */}
- {showColumnSettings && (
- setShowColumnSettings(false)}
- onToggleVisibility={toggleColumnVisibility}
- onReorder={reorderColumns}
- onReset={resetColumns}
- />
- )}
-
- )
-}
+ const handleStaleClick = () => {
+ // Filter to show stale/inactive hosts
+ setStatusFilter("inactive");
+ setShowFilters(true);
+ // We'll use the existing inactive URL filter logic
+ const newSearchParams = new URLSearchParams(window.location.search);
+ newSearchParams.set("filter", "inactive");
+ navigate(`/hosts?${newSearchParams.toString()}`, { replace: true });
+ };
+
+ if (isLoading) {
+ return (
+
-
+ // Update order values
+ const updatedConfig = newConfig.map((col, index) => ({
+ ...col,
+ order: index,
+ }));
+ updateColumnConfig(updatedConfig);
+ };
- {/* Stats Summary */}
-
-
- Hosts
-- Manage and monitor your connected hosts -
-
-
-
-
-
-
+ const resetColumns = () => {
+ const defaultConfig = [
+ { id: "select", label: "Select", visible: true, order: 0 },
+ { id: "host", label: "Friendly Name", visible: true, order: 1 },
+ { id: "hostname", label: "System Hostname", visible: true, order: 2 },
+ { id: "ip", label: "IP Address", visible: false, order: 3 },
+ { id: "group", label: "Group", visible: true, order: 4 },
+ { id: "os", label: "OS", visible: true, order: 5 },
+ { id: "os_version", label: "OS Version", visible: false, order: 6 },
+ { id: "status", label: "Status", visible: true, order: 7 },
+ { id: "updates", label: "Updates", visible: true, order: 8 },
+ { id: "last_update", label: "Last Update", visible: true, order: 9 },
+ { id: "actions", label: "Actions", visible: true, order: 10 },
+ ];
+ updateColumnConfig(defaultConfig);
+ };
- {/* Hosts List */}
-
-
-
-
-
-
- Total Hosts
-{hosts?.length || 0}
-
-
-
-
-
-
- Up to Date
-- {hosts?.filter(h => !h.isStale && h.updatesCount === 0).length || 0} -
-
-
-
-
-
-
- Needs Updates
-- {hosts?.filter(h => h.updatesCount > 0).length || 0} -
-
-
-
-
-
-
- Stale
-- {hosts?.filter(h => h.isStale).length || 0} -
-
-
+ const handleHostCreated = (newHost) => {
+ queryClient.invalidateQueries(["hosts"]);
+ // Navigate to host detail page to show credentials and setup instructions
+ navigate(`/hosts/${newHost.hostId}`);
+ };
- {/* Modals */}
-
-
+ updateFriendlyNameMutation.mutate({
+ hostId: host.id,
+ friendlyName: newName,
+ })
+ }
+ placeholder="Enter friendly name..."
+ maxLength={100}
+ linkTo={`/hosts/${host.id}`}
+ validate={(value) => {
+ if (!value.trim()) return "Friendly name is required";
+ if (value.trim().length < 1)
+ return "Friendly name must be at least 1 character";
+ if (value.trim().length > 100)
+ return "Friendly name must be less than 100 characters";
+ return null;
+ }}
+ className="w-full"
+ />
+ );
+ case "hostname":
+ return (
+
+ updateHostGroupMutation.mutate({
+ hostId: host.id,
+ hostGroupId: newGroupId,
+ })
+ }
+ options={hostGroups || []}
+ placeholder="Select group..."
+ className="w-full"
+ />
+ );
+ case "os":
+ return (
+
-
- {selectedHosts.length > 0 && (
-
-
- {/* Table Controls */}
-
-
- {selectedHosts.length} host{selectedHosts.length !== 1 ? 's' : ''} selected
-
-
-
-
-
- )}
-
- {/* Search and Filter Bar */}
-
+ // Helper function to render table cell content
+ const renderCellContent = (column, host) => {
+ switch (column.id) {
+ case "select":
+ return (
+
+ );
+ case "host":
+ return (
+
-
+ // Get visible columns in order
+ const visibleColumns = columnConfig
+ .filter((col) => col.visible)
+ .sort((a, b) => a.order - b.order);
- {/* Advanced Filters */}
- {showFilters && (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {host.hostname || "N/A"}
+
+ );
+ case "ip":
+ return (
+
+ {host.ip || "N/A"}
+
+ );
+ case "group":
+ return (
+
+
+ );
+ case "os_version":
+ return (
+
+ {host.os_version || "N/A"}
+
+ );
+ case "agent_version":
+ return (
+
+ {host.agent_version || "N/A"}
+
+ );
+ case "auto_update":
+ return (
+
+ {host.auto_update ? "Yes" : "No"}
+
+ );
+ case "status":
+ return (
+
+ {(host.effectiveStatus || host.status).charAt(0).toUpperCase() +
+ (host.effectiveStatus || host.status).slice(1)}
+
+ );
+ case "updates":
+ return (
+
+ );
+ case "last_update":
+ return (
+
+ {formatRelativeTime(host.last_update)}
+
+ );
+ case "actions":
+ return (
+
+ View
+
- {(!hosts || hosts.length === 0) ? (
-
-
-
- ) : filteredAndSortedHosts.length === 0 ? (
- No hosts registered yet
-- Click "Add Host" to manually register a new host and get API credentials -
-
-
- ) : (
- No hosts match your current filters
-- Try adjusting your search terms or filters to see more results -
-
-
- )}
-
- {Object.entries(groupedHosts).map(([groupName, groupHosts]) => (
-
-
- {/* Group Header */}
- {groupBy !== 'none' && (
-
- ))}
-
-
- )}
-
- {/* Table for this group */}
- - {groupName} ({groupHosts.length}) -
-
-
-
-
-
- |
- {column.id === 'select' ? (
-
- ) : column.id === 'host' ? (
-
- ) : column.id === 'hostname' ? (
-
- ) : column.id === 'ip' ? (
-
- ) : column.id === 'group' ? (
-
- ) : column.id === 'os' ? (
-
- ) : column.id === 'os_version' ? (
-
- ) : column.id === 'agent_version' ? (
-
- ) : column.id === 'auto_update' ? (
-
- {column.label}
-
- ) : column.id === 'status' ? (
-
- ) : column.id === 'updates' ? (
-
- ) : column.id === 'last_update' ? (
-
- ) : (
- column.label
- )}
- |
- ))}
-
|---|
| - {renderCellContent(column, host)} - | - ))} -
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ const getStatusColor = (host) => {
+ if (host.isStale) return "text-danger-600";
+ if (host.updatesCount > 0) return "text-warning-600";
+ return "text-success-600";
+ };
+
+ const getStatusIcon = (host) => {
+ if (host.isStale) return
+
+
+
+ + Error loading hosts +
++ {error.message || "Failed to load hosts"} +
+ +
+ {/* Page Header */}
+ setShowAddModal(false)}
+ onSuccess={handleHostCreated}
+ />
+
+ {/* Bulk Assign Modal */}
+ {showBulkAssignModal && (
+ setShowBulkAssignModal(false)}
+ onAssign={handleBulkAssign}
+ isLoading={bulkUpdateGroupMutation.isPending}
+ />
+ )}
+
+ {/* Bulk Delete Modal */}
+ {showBulkDeleteModal && (
+ setShowBulkDeleteModal(false)}
+ onDelete={handleBulkDelete}
+ isLoading={bulkDeleteMutation.isPending}
+ />
+ )}
+
+ {/* Column Settings Modal */}
+ {showColumnSettings && (
+ setShowColumnSettings(false)}
+ onToggleVisibility={toggleColumnVisibility}
+ onReorder={reorderColumns}
+ onReset={resetColumns}
+ />
+ )}
+
+ );
+};
// Bulk Assign Modal Component
-const BulkAssignModal = ({ selectedHosts, hosts, onClose, onAssign, isLoading }) => {
- const [selectedGroupId, setSelectedGroupId] = useState('')
+const BulkAssignModal = ({
+ selectedHosts,
+ hosts,
+ onClose,
+ onAssign,
+ isLoading,
+}) => {
+ const [selectedGroupId, setSelectedGroupId] = useState("");
- // Fetch host groups for selection
- const { data: hostGroups } = useQuery({
- queryKey: ['hostGroups'],
- queryFn: () => hostGroupsAPI.list().then(res => res.data),
- })
+ // Fetch host groups for selection
+ const { data: hostGroups } = useQuery({
+ queryKey: ["hostGroups"],
+ queryFn: () => hostGroupsAPI.list().then((res) => res.data),
+ });
- const selectedHostNames = hosts
- .filter(host => selectedHosts.includes(host.id))
- .map(host => host.friendly_name)
+ const selectedHostNames = hosts
+ .filter((host) => selectedHosts.includes(host.id))
+ .map((host) => host.friendly_name);
- const handleSubmit = (e) => {
- e.preventDefault()
- onAssign(selectedGroupId || null)
- }
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ onAssign(selectedGroupId || null);
+ };
- return (
-
+
+
+ {/* Stats Summary */}
+
+
+ + Hosts +
++ Manage and monitor your connected hosts +
+
+
+
+
+
+
+
+ {/* Hosts List */}
+
+
+
+
+
+
+ + Total Hosts +
++ {hosts?.length || 0} +
+
+
+
+
+
+
+ + Up to Date +
++ {hosts?.filter((h) => !h.isStale && h.updatesCount === 0) + .length || 0} +
+
+
+
+
+
+
+ + Needs Updates +
++ {hosts?.filter((h) => h.updatesCount > 0).length || 0} +
+
+
+
+
+
+
+ + Stale +
++ {hosts?.filter((h) => h.isStale).length || 0} +
+
+
+
+ {/* Modals */}
+
+
+
+ {selectedHosts.length > 0 && (
+
+
+ {/* Table Controls */}
+
+
+ {selectedHosts.length} host
+ {selectedHosts.length !== 1 ? "s" : ""} selected
+
+
+
+
+
+ )}
+
+ {/* Search and Filter Bar */}
+
+
+
+
+
+ {/* Advanced Filters */}
+ {showFilters && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!hosts || hosts.length === 0 ? (
+
+
+
+ ) : filteredAndSortedHosts.length === 0 ? (
+ No hosts registered yet
++ Click "Add Host" to manually register a new host and get API + credentials +
+
+
+ ) : (
+ + No hosts match your current filters +
++ Try adjusting your search terms or filters to see more results +
+
+
+ )}
+
+ {Object.entries(groupedHosts).map(
+ ([groupName, groupHosts]) => (
+
+
+ {/* Group Header */}
+ {groupBy !== "none" && (
+
+ ),
+ )}
+
+
+ )}
+
+ {/* Table for this group */}
+ + {groupName} ({groupHosts.length}) +
+
+
+
+
+
+ |
+ {column.id === "select" ? (
+
+ ) : column.id === "host" ? (
+
+ ) : column.id === "hostname" ? (
+
+ ) : column.id === "ip" ? (
+
+ ) : column.id === "group" ? (
+
+ ) : column.id === "os" ? (
+
+ ) : column.id === "os_version" ? (
+
+ ) : column.id === "agent_version" ? (
+
+ ) : column.id === "auto_update" ? (
+
+ {column.label}
+
+ ) : column.id === "status" ? (
+
+ ) : column.id === "updates" ? (
+
+ ) : column.id === "last_update" ? (
+
+ ) : (
+ column.label
+ )}
+ |
+ ))}
+
|---|
| + {renderCellContent(column, host)} + | + ))} +
-
+ );
+};
// Bulk Delete Modal Component
-const BulkDeleteModal = ({ selectedHosts, hosts, onClose, onDelete, isLoading }) => {
- const selectedHostNames = hosts
- .filter(host => selectedHosts.includes(host.id))
- .map(host => host.friendly_name || host.hostname || host.id)
+const BulkDeleteModal = ({
+ selectedHosts,
+ hosts,
+ onClose,
+ onDelete,
+ isLoading,
+}) => {
+ const selectedHostNames = hosts
+ .filter((host) => selectedHosts.includes(host.id))
+ .map((host) => host.friendly_name || host.hostname || host.id);
- const handleSubmit = (e) => {
- e.preventDefault()
- onDelete()
- }
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ onDelete();
+ };
- return (
-
-
+
-
+ return (
+ - Assign to Host Group -
- -
+
- )
-}
+
+
-
+
- + Assign to Host Group +
+ +
-
+ - Assigning {selectedHosts.length} host{selectedHosts.length !== 1 ? 's' : ''}: -
-
- {selectedHostNames.map((friendlyName, index) => (
-
-
- • {friendlyName}
-
- ))}
-
+
-
- + Assigning {selectedHosts.length} host + {selectedHosts.length !== 1 ? "s" : ""}: +
+
+ {selectedHostNames.map((friendlyName, index) => (
+
+
+ • {friendlyName}
+
+ ))}
+
+
+
+
+
+
-
+ );
+};
// Column Settings Modal Component
-const ColumnSettingsModal = ({ columnConfig, onClose, onToggleVisibility, onReorder, onReset }) => {
- const [draggedIndex, setDraggedIndex] = useState(null)
+const ColumnSettingsModal = ({
+ columnConfig,
+ onClose,
+ onToggleVisibility,
+ onReorder,
+ onReset,
+}) => {
+ const [draggedIndex, setDraggedIndex] = useState(null);
- const handleDragStart = (e, index) => {
- setDraggedIndex(index)
- e.dataTransfer.effectAllowed = 'move'
- }
+ const handleDragStart = (e, index) => {
+ setDraggedIndex(index);
+ e.dataTransfer.effectAllowed = "move";
+ };
- const handleDragOver = (e) => {
- e.preventDefault()
- e.dataTransfer.dropEffect = 'move'
- }
+ const handleDragOver = (e) => {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = "move";
+ };
- const handleDrop = (e, dropIndex) => {
- e.preventDefault()
- if (draggedIndex !== null && draggedIndex !== dropIndex) {
- onReorder(draggedIndex, dropIndex)
- }
- setDraggedIndex(null)
- }
+ const handleDrop = (e, dropIndex) => {
+ e.preventDefault();
+ if (draggedIndex !== null && draggedIndex !== dropIndex) {
+ onReorder(draggedIndex, dropIndex);
+ }
+ setDraggedIndex(null);
+ };
- return (
-
-
+
-
+ return (
+
-
- Delete Hosts
- -
+
+
+
- )
-}
+
+
+
-
+
+ + Delete Hosts +
+ +
-
-
-
+
-
- - Warning: This action cannot be undone -
-- You are about to permanently delete {selectedHosts.length} host{selectedHosts.length !== 1 ? 's' : ''}. - This will remove all host data, including package information, update history, and API credentials. -
-
+
-
+
-
+
+ + Warning: This action cannot be undone +
++ You are about to permanently delete {selectedHosts.length} host + {selectedHosts.length !== 1 ? "s" : ""}. This will remove all host + data, including package information, update history, and API + credentials. +
+
-
+ - Hosts to be deleted: -
-
- {selectedHostNames.map((friendlyName, index) => (
-
-
- • {friendlyName}
-
- ))}
-
+
-
- + Hosts to be deleted: +
+
+ {selectedHostNames.map((friendlyName, index) => (
+
+
+ • {friendlyName}
+
+ ))}
+
-
- )
-}
+ return (
+
-
-
-
-
-
-
- Column Settings
- -
-
- - Drag to reorder columns or toggle visibility -
- -
- {columnConfig.map((column, index) => (
-
-
- handleDragStart(e, index)}
- onDragOver={handleDragOver}
- onDrop={(e) => handleDrop(e, index)}
- className={`flex items-center justify-between p-3 border rounded-lg cursor-move ${
- draggedIndex === index ? 'opacity-50' : 'hover:bg-secondary-50 dark:hover:bg-secondary-700'
- } border-secondary-200 dark:border-secondary-600`}
- >
-
- ))}
-
-
-
-
-
-
-
-
+
+ );
+};
+
+export default Hosts;
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index fd557db..c81f6b9 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -1,450 +1,487 @@
-import React, { useState, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Eye, EyeOff, Lock, User, AlertCircle, Smartphone, ArrowLeft, Mail } from 'lucide-react'
-import { useAuth } from '../contexts/AuthContext'
-import { authAPI } from '../utils/api'
+import {
+ AlertCircle,
+ ArrowLeft,
+ Eye,
+ EyeOff,
+ Lock,
+ Mail,
+ Smartphone,
+ User,
+} from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../contexts/AuthContext";
+import { authAPI } from "../utils/api";
const Login = () => {
- const [isSignupMode, setIsSignupMode] = useState(false)
- const [formData, setFormData] = useState({
- username: '',
- email: '',
- password: '',
- firstName: '',
- lastName: ''
- })
- const [tfaData, setTfaData] = useState({
- token: ''
- })
- const [showPassword, setShowPassword] = useState(false)
- const [isLoading, setIsLoading] = useState(false)
- const [error, setError] = useState('')
- const [requiresTfa, setRequiresTfa] = useState(false)
- const [tfaUsername, setTfaUsername] = useState('')
- const [signupEnabled, setSignupEnabled] = useState(false)
+ const [isSignupMode, setIsSignupMode] = useState(false);
+ const [formData, setFormData] = useState({
+ username: "",
+ email: "",
+ password: "",
+ firstName: "",
+ lastName: "",
+ });
+ const [tfaData, setTfaData] = useState({
+ token: "",
+ });
+ const [showPassword, setShowPassword] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState("");
+ const [requiresTfa, setRequiresTfa] = useState(false);
+ const [tfaUsername, setTfaUsername] = useState("");
+ const [signupEnabled, setSignupEnabled] = useState(false);
- const navigate = useNavigate()
- const { login, setAuthState } = useAuth()
+ const navigate = useNavigate();
+ const { login, setAuthState } = useAuth();
- // Check if signup is enabled
- useEffect(() => {
- const checkSignupEnabled = async () => {
- try {
- const response = await fetch('/api/v1/auth/signup-enabled')
- if (response.ok) {
- const data = await response.json()
- setSignupEnabled(data.signupEnabled)
- }
- } catch (error) {
- console.error('Failed to check signup status:', error)
- // Default to disabled on error for security
- setSignupEnabled(false)
- }
- }
- checkSignupEnabled()
- }, [])
+ // Check if signup is enabled
+ useEffect(() => {
+ const checkSignupEnabled = async () => {
+ try {
+ const response = await fetch("/api/v1/auth/signup-enabled");
+ if (response.ok) {
+ const data = await response.json();
+ setSignupEnabled(data.signupEnabled);
+ }
+ } catch (error) {
+ console.error("Failed to check signup status:", error);
+ // Default to disabled on error for security
+ setSignupEnabled(false);
+ }
+ };
+ checkSignupEnabled();
+ }, []);
- const handleSubmit = async (e) => {
- e.preventDefault()
- setIsLoading(true)
- setError('')
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setIsLoading(true);
+ setError("");
- try {
- const response = await authAPI.login(formData.username, formData.password)
+ try {
+ const response = await authAPI.login(
+ formData.username,
+ formData.password,
+ );
- if (response.data.requiresTfa) {
- setRequiresTfa(true)
- setTfaUsername(formData.username)
- setError('')
- } else {
- // Regular login successful
- const result = await login(formData.username, formData.password)
- if (result.success) {
- navigate('/')
- } else {
- setError(result.error || 'Login failed')
- }
- }
- } catch (err) {
- setError(err.response?.data?.error || 'Login failed')
- } finally {
- setIsLoading(false)
- }
- }
+ if (response.data.requiresTfa) {
+ setRequiresTfa(true);
+ setTfaUsername(formData.username);
+ setError("");
+ } else {
+ // Regular login successful
+ const result = await login(formData.username, formData.password);
+ if (result.success) {
+ navigate("/");
+ } else {
+ setError(result.error || "Login failed");
+ }
+ }
+ } catch (err) {
+ setError(err.response?.data?.error || "Login failed");
+ } finally {
+ setIsLoading(false);
+ }
+ };
- const handleSignupSubmit = async (e) => {
- e.preventDefault()
- setIsLoading(true)
- setError('')
+ const handleSignupSubmit = async (e) => {
+ e.preventDefault();
+ setIsLoading(true);
+ setError("");
- try {
- const response = await authAPI.signup(formData.username, formData.email, formData.password, formData.firstName, formData.lastName)
- if (response.data && response.data.token) {
- // Update AuthContext state and localStorage
- setAuthState(response.data.token, response.data.user)
+ try {
+ const response = await authAPI.signup(
+ formData.username,
+ formData.email,
+ formData.password,
+ formData.firstName,
+ formData.lastName,
+ );
+ if (response.data && response.data.token) {
+ // Update AuthContext state and localStorage
+ setAuthState(response.data.token, response.data.user);
- // Redirect to dashboard
- navigate('/')
- } else {
- setError('Signup failed - invalid response')
- }
- } catch (err) {
- console.error('Signup error:', err)
- const errorMessage = err.response?.data?.error ||
- (err.response?.data?.errors && err.response.data.errors.length > 0
- ? err.response.data.errors.map(e => e.msg).join(', ')
- : err.message || 'Signup failed')
- setError(errorMessage)
- } finally {
- setIsLoading(false)
- }
- }
+ // Redirect to dashboard
+ navigate("/");
+ } else {
+ setError("Signup failed - invalid response");
+ }
+ } catch (err) {
+ console.error("Signup error:", err);
+ const errorMessage =
+ err.response?.data?.error ||
+ (err.response?.data?.errors && err.response.data.errors.length > 0
+ ? err.response.data.errors.map((e) => e.msg).join(", ")
+ : err.message || "Signup failed");
+ setError(errorMessage);
+ } finally {
+ setIsLoading(false);
+ }
+ };
- const handleTfaSubmit = async (e) => {
- e.preventDefault()
- setIsLoading(true)
- setError('')
+ const handleTfaSubmit = async (e) => {
+ e.preventDefault();
+ setIsLoading(true);
+ setError("");
- try {
- const response = await authAPI.verifyTfa(tfaUsername, tfaData.token)
+ try {
+ const response = await authAPI.verifyTfa(tfaUsername, tfaData.token);
- if (response.data && response.data.token) {
- // Store token and user data
- localStorage.setItem('token', response.data.token)
- localStorage.setItem('user', JSON.stringify(response.data.user))
+ if (response.data && response.data.token) {
+ // Store token and user data
+ localStorage.setItem("token", response.data.token);
+ localStorage.setItem("user", JSON.stringify(response.data.user));
- // Redirect to dashboard
- navigate('/')
- } else {
- setError('TFA verification failed - invalid response')
- }
- } catch (err) {
- console.error('TFA verification error:', err)
- const errorMessage = err.response?.data?.error || err.message || 'TFA verification failed'
- setError(errorMessage)
- // Clear the token input for security
- setTfaData({ token: '' })
- } finally {
- setIsLoading(false)
- }
- }
+ // Redirect to dashboard
+ navigate("/");
+ } else {
+ setError("TFA verification failed - invalid response");
+ }
+ } catch (err) {
+ console.error("TFA verification error:", err);
+ const errorMessage =
+ err.response?.data?.error || err.message || "TFA verification failed";
+ setError(errorMessage);
+ // Clear the token input for security
+ setTfaData({ token: "" });
+ } finally {
+ setIsLoading(false);
+ }
+ };
- const handleInputChange = (e) => {
- setFormData({
- ...formData,
- [e.target.name]: e.target.value
- })
- }
+ const handleInputChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ });
+ };
- const handleTfaInputChange = (e) => {
- setTfaData({
- ...tfaData,
- [e.target.name]: e.target.value.replace(/\D/g, '').slice(0, 6)
- })
- // Clear error when user starts typing
- if (error) {
- setError('')
- }
- }
+ const handleTfaInputChange = (e) => {
+ setTfaData({
+ ...tfaData,
+ [e.target.name]: e.target.value.replace(/\D/g, "").slice(0, 6),
+ });
+ // Clear error when user starts typing
+ if (error) {
+ setError("");
+ }
+ };
- const handleBackToLogin = () => {
- setRequiresTfa(false)
- setTfaData({ token: '' })
- setError('')
- }
+ const handleBackToLogin = () => {
+ setRequiresTfa(false);
+ setTfaData({ token: "" });
+ setError("");
+ };
- const toggleMode = () => {
- // Only allow signup mode if signup is enabled
- if (!signupEnabled && !isSignupMode) {
- return // Don't allow switching to signup if disabled
- }
- setIsSignupMode(!isSignupMode)
- setFormData({
- username: '',
- email: '',
- password: '',
- firstName: '',
- lastName: ''
- })
- setError('')
- }
+ const toggleMode = () => {
+ // Only allow signup mode if signup is enabled
+ if (!signupEnabled && !isSignupMode) {
+ return; // Don't allow switching to signup if disabled
+ }
+ setIsSignupMode(!isSignupMode);
+ setFormData({
+ username: "",
+ email: "",
+ password: "",
+ firstName: "",
+ lastName: "",
+ });
+ setError("");
+ };
- return (
-
+
+
+
-export default Hosts
\ No newline at end of file
+
+
+ + Column Settings +
+ +
+
+ + Drag to reorder columns or toggle visibility +
+ +
+ {columnConfig.map((column, index) => (
+
+
+ handleDragStart(e, index)}
+ onDragOver={handleDragOver}
+ onDrop={(e) => handleDrop(e, index)}
+ className={`flex items-center justify-between p-3 border rounded-lg cursor-move ${
+ draggedIndex === index
+ ? "opacity-50"
+ : "hover:bg-secondary-50 dark:hover:bg-secondary-700"
+ } border-secondary-200 dark:border-secondary-600`}
+ >
+
+ ))}
+
+
+
+
+
+
+
+
-
+ );
+};
-export default Login
+export default Login;
diff --git a/frontend/src/pages/Options.jsx b/frontend/src/pages/Options.jsx
index 0f8a9d0..dc0522c 100644
--- a/frontend/src/pages/Options.jsx
+++ b/frontend/src/pages/Options.jsx
@@ -1,571 +1,580 @@
-import React, { useState } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import {
- Plus,
- Edit,
- Trash2,
- Server,
- Users,
- AlertTriangle,
- CheckCircle,
- Settings
-} from 'lucide-react'
-import { hostGroupsAPI } from '../utils/api'
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+ AlertTriangle,
+ CheckCircle,
+ Edit,
+ Plus,
+ Server,
+ Settings,
+ Trash2,
+ Users,
+} from "lucide-react";
+import React, { useState } from "react";
+import { hostGroupsAPI } from "../utils/api";
const Options = () => {
- const [activeTab, setActiveTab] = useState('hostgroups')
- const [showCreateModal, setShowCreateModal] = useState(false)
- const [showEditModal, setShowEditModal] = useState(false)
- const [selectedGroup, setSelectedGroup] = useState(null)
- const [showDeleteModal, setShowDeleteModal] = useState(false)
- const [groupToDelete, setGroupToDelete] = useState(null)
+ const [activeTab, setActiveTab] = useState("hostgroups");
+ const [showCreateModal, setShowCreateModal] = useState(false);
+ const [showEditModal, setShowEditModal] = useState(false);
+ const [selectedGroup, setSelectedGroup] = useState(null);
+ const [showDeleteModal, setShowDeleteModal] = useState(false);
+ const [groupToDelete, setGroupToDelete] = useState(null);
- const queryClient = useQueryClient()
+ const queryClient = useQueryClient();
- // Tab configuration
- const tabs = [
- { id: 'hostgroups', name: 'Host Groups', icon: Users },
- { id: 'notifications', name: 'Notifications', icon: AlertTriangle, comingSoon: true }
- ]
+ // Tab configuration
+ const tabs = [
+ { id: "hostgroups", name: "Host Groups", icon: Users },
+ {
+ id: "notifications",
+ name: "Notifications",
+ icon: AlertTriangle,
+ comingSoon: true,
+ },
+ ];
- // Fetch host groups
- const { data: hostGroups, isLoading, error } = useQuery({
- queryKey: ['hostGroups'],
- queryFn: () => hostGroupsAPI.list().then(res => res.data),
- })
+ // Fetch host groups
+ const {
+ data: hostGroups,
+ isLoading,
+ error,
+ } = useQuery({
+ queryKey: ["hostGroups"],
+ queryFn: () => hostGroupsAPI.list().then((res) => res.data),
+ });
- // Create host group mutation
- const createMutation = useMutation({
- mutationFn: (data) => hostGroupsAPI.create(data),
- onSuccess: () => {
- queryClient.invalidateQueries(['hostGroups'])
- setShowCreateModal(false)
- },
- onError: (error) => {
- console.error('Failed to create host group:', error)
- }
- })
+ // Create host group mutation
+ const createMutation = useMutation({
+ mutationFn: (data) => hostGroupsAPI.create(data),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["hostGroups"]);
+ setShowCreateModal(false);
+ },
+ onError: (error) => {
+ console.error("Failed to create host group:", error);
+ },
+ });
- // Update host group mutation
- const updateMutation = useMutation({
- mutationFn: ({ id, data }) => hostGroupsAPI.update(id, data),
- onSuccess: () => {
- queryClient.invalidateQueries(['hostGroups'])
- setShowEditModal(false)
- setSelectedGroup(null)
- },
- onError: (error) => {
- console.error('Failed to update host group:', error)
- }
- })
+ // Update host group mutation
+ const updateMutation = useMutation({
+ mutationFn: ({ id, data }) => hostGroupsAPI.update(id, data),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["hostGroups"]);
+ setShowEditModal(false);
+ setSelectedGroup(null);
+ },
+ onError: (error) => {
+ console.error("Failed to update host group:", error);
+ },
+ });
- // Delete host group mutation
- const deleteMutation = useMutation({
- mutationFn: (id) => hostGroupsAPI.delete(id),
- onSuccess: () => {
- queryClient.invalidateQueries(['hostGroups'])
- setShowDeleteModal(false)
- setGroupToDelete(null)
- },
- onError: (error) => {
- console.error('Failed to delete host group:', error)
- }
- })
+ // Delete host group mutation
+ const deleteMutation = useMutation({
+ mutationFn: (id) => hostGroupsAPI.delete(id),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["hostGroups"]);
+ setShowDeleteModal(false);
+ setGroupToDelete(null);
+ },
+ onError: (error) => {
+ console.error("Failed to delete host group:", error);
+ },
+ });
- const handleCreate = (data) => {
- createMutation.mutate(data)
- }
+ const handleCreate = (data) => {
+ createMutation.mutate(data);
+ };
- const handleEdit = (group) => {
- setSelectedGroup(group)
- setShowEditModal(true)
- }
+ const handleEdit = (group) => {
+ setSelectedGroup(group);
+ setShowEditModal(true);
+ };
- const handleUpdate = (data) => {
- updateMutation.mutate({ id: selectedGroup.id, data })
- }
+ const handleUpdate = (data) => {
+ updateMutation.mutate({ id: selectedGroup.id, data });
+ };
- const handleDeleteClick = (group) => {
- setGroupToDelete(group)
- setShowDeleteModal(true)
- }
+ const handleDeleteClick = (group) => {
+ setGroupToDelete(group);
+ setShowDeleteModal(true);
+ };
- const handleDeleteConfirm = () => {
- deleteMutation.mutate(groupToDelete.id)
- }
+ const handleDeleteConfirm = () => {
+ deleteMutation.mutate(groupToDelete.id);
+ };
- const renderHostGroupsTab = () => {
- if (isLoading) {
- return (
-
-
+
-
+ return (
+
-
- - {isSignupMode ? 'Create PatchMon Account' : 'Sign in to PatchMon'} -
-- Monitor and manage your Linux package updates -
-
+
- )
-}
+
+
-
+
- {!requiresTfa ? (
-
- ) : (
-
+ ) : (
+
- )}
-
+
+ + {isSignupMode ? "Create PatchMon Account" : "Sign in to PatchMon"} +
++ Monitor and manage your Linux package updates +
+
+
+
+ )}
+ + Don't have access to your authenticator? Use a backup code. +
+
-
-
- )
- }
+ const renderHostGroupsTab = () => {
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
- if (error) {
- return (
-
-
- )
- }
+ if (error) {
+ return (
+
-
-
-
- - Error loading host groups -
-- {error.message || 'Failed to load host groups'} -
-
+
+ );
+ }
- return (
-
+
+
+
+ + Error loading host groups +
++ {error.message || "Failed to load host groups"} +
+
- {/* Header */}
-
+ );
+ };
- return (
-
-
+ return (
+
-
-
- - Host Groups -
-- Organize your hosts into logical groups for better management -
-
+ {/* Header */}
+
- )
- }
+ {/* Host Groups Grid */}
+ {hostGroups && hostGroups.length > 0 ? (
+
+
- {/* Host Groups Grid */}
- {hostGroups && hostGroups.length > 0 ? (
-
+
+
+ + Host Groups +
++ Organize your hosts into logical groups for better management +
+
- {hostGroups.map((group) => (
-
- ) : (
-
-
- ))}
-
-
-
-
-
-
-
-
- - {group.name} -
- {group.description && ( -- {group.description} -
- )} -
-
-
-
-
-
-
-
-
-
- )}
- - No host groups yet -
-- Create your first host group to organize your hosts -
- -
+ {hostGroups.map((group) => (
+
+ ) : (
+
+
+ ))}
+
+
- const renderComingSoonTab = (tabName) => (
-
+
+
+
+
+ + {group.name} +
+ {group.description && ( ++ {group.description} +
+ )} +
+
+
+
+
-
- )
+ - {tabName} Coming Soon -
-- This feature is currently under development and will be available in a future update. -
-
+
+
+
+
+
+ )}
+ + No host groups yet +
++ Create your first host group to organize your hosts +
+ +
- {/* Page Header */}
- {
+ setShowEditModal(false);
+ setSelectedGroup(null);
+ }}
+ onSubmit={handleUpdate}
+ isLoading={updateMutation.isPending}
+ />
+ )}
+
+ {/* Delete Confirmation Modal */}
+ {showDeleteModal && groupToDelete && (
+ {
+ setShowDeleteModal(false);
+ setGroupToDelete(null);
+ }}
+ onConfirm={handleDeleteConfirm}
+ isLoading={deleteMutation.isPending}
+ />
+ )}
+
+ );
+};
// Create Host Group Modal
const CreateHostGroupModal = ({ onClose, onSubmit, isLoading }) => {
- const [formData, setFormData] = useState({
- name: '',
- description: '',
- color: '#3B82F6'
- })
+ const [formData, setFormData] = useState({
+ name: "",
+ description: "",
+ color: "#3B82F6",
+ });
- const handleSubmit = (e) => {
- e.preventDefault()
- onSubmit(formData)
- }
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ onSubmit(formData);
+ };
- const handleChange = (e) => {
- setFormData({
- ...formData,
- [e.target.name]: e.target.value
- })
- }
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ });
+ };
- return (
-
-
+ const renderComingSoonTab = (tabName) => (
+ - Options -
-- Configure PatchMon parameters and user preferences -
-
+
+ );
- {/* Tabs */}
- + {tabName} Coming Soon +
++ This feature is currently under development and will be available in a + future update. +
+
-
-
+ return (
+
+ {/* Page Header */}
+ setShowCreateModal(false)}
- onSubmit={handleCreate}
- isLoading={createMutation.isPending}
- />
- )}
+ {/* Tab Content */}
+ {
- setShowEditModal(false)
- setSelectedGroup(null)
- }}
- onSubmit={handleUpdate}
- isLoading={updateMutation.isPending}
- />
- )}
+ {/* Create Modal */}
+ {showCreateModal && (
+ setShowCreateModal(false)}
+ onSubmit={handleCreate}
+ isLoading={createMutation.isPending}
+ />
+ )}
- {/* Delete Confirmation Modal */}
- {showDeleteModal && groupToDelete && (
- {
- setShowDeleteModal(false)
- setGroupToDelete(null)
- }}
- onConfirm={handleDeleteConfirm}
- isLoading={deleteMutation.isPending}
- />
- )}
-
- )
-}
+ {/* Edit Modal */}
+ {showEditModal && selectedGroup && (
+
+
- {/* Tab Content */}
- + Options +
++ Configure PatchMon parameters and user preferences +
+
- {activeTab === 'hostgroups' && renderHostGroupsTab()}
- {activeTab === 'notifications' && renderComingSoonTab('Notifications')}
-
+ {/* Tabs */}
+
+
+
- {/* Create Modal */}
- {showCreateModal && (
-
+ {activeTab === "hostgroups" && renderHostGroupsTab()}
+ {activeTab === "notifications" && renderComingSoonTab("Notifications")}
+
- {/* Edit Modal */}
- {showEditModal && selectedGroup && (
-
-
- )
-}
+ return (
+
-
- - Create Host Group -
- - -
+
+ );
+};
// Edit Host Group Modal
const EditHostGroupModal = ({ group, onClose, onSubmit, isLoading }) => {
- const [formData, setFormData] = useState({
- name: group.name,
- description: group.description || '',
- color: group.color || '#3B82F6'
- })
+ const [formData, setFormData] = useState({
+ name: group.name,
+ description: group.description || "",
+ color: group.color || "#3B82F6",
+ });
- const handleSubmit = (e) => {
- e.preventDefault()
- onSubmit(formData)
- }
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ onSubmit(formData);
+ };
- const handleChange = (e) => {
- setFormData({
- ...formData,
- [e.target.name]: e.target.value
- })
- }
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ });
+ };
- return (
-
+
+ + Create Host Group +
+ + +
-
- )
-}
+ return (
+
-
- - Edit Host Group -
- - -
+
+ );
+};
// Delete Confirmation Modal
const DeleteHostGroupModal = ({ group, onClose, onConfirm, isLoading }) => {
- return (
-
+
+ + Edit Host Group +
+ + +
-
- )
-}
+ return (
+
-
-
-
-
-
-
-
-
- - Delete Host Group -
-- This action cannot be undone -
-
-
-
- - Are you sure you want to delete the host group{' '} - "{group.name}"? -
- {group._count.hosts > 0 && ( -
-
- )}
- - Warning: This group contains {group._count.hosts} host{group._count.hosts !== 1 ? 's' : ''}. - You must move or remove these hosts before deleting the group. -
-
-
-
-
-
+
+ );
+};
+
+export default Options;
diff --git a/frontend/src/pages/PackageDetail.jsx b/frontend/src/pages/PackageDetail.jsx
index 0c3fe29..e5cf916 100644
--- a/frontend/src/pages/PackageDetail.jsx
+++ b/frontend/src/pages/PackageDetail.jsx
@@ -1,25 +1,27 @@
-import React from 'react'
-import { useParams } from 'react-router-dom'
-import { Package } from 'lucide-react'
+import { Package } from "lucide-react";
+import React from "react";
+import { useParams } from "react-router-dom";
const PackageDetail = () => {
- const { packageId } = useParams()
-
- return (
-
+
+
+
-export default Options
+
+
+
+
+ + Delete Host Group +
++ This action cannot be undone +
+
+
+
+ + Are you sure you want to delete the host group{" "} + "{group.name}"? +
+ {group._count.hosts > 0 && ( +
+
+ )}
+ + Warning: This group contains{" "} + {group._count.hosts} host{group._count.hosts !== 1 ? "s" : ""}. + You must move or remove these hosts before deleting the group. +
+
+
+
+
+
-
-
- )
-}
+ const { packageId } = useParams();
-export default PackageDetail
\ No newline at end of file
+ return (
+
-
- Package Details
-- Detailed view for package: {packageId} -
-- This page will show package information, affected hosts, version distribution, and more. -
-
+
+ );
+};
+
+export default PackageDetail;
diff --git a/frontend/src/pages/Packages.jsx b/frontend/src/pages/Packages.jsx
index 6b72265..876d7dc 100644
--- a/frontend/src/pages/Packages.jsx
+++ b/frontend/src/pages/Packages.jsx
@@ -1,629 +1,711 @@
-import React, { useState, useEffect, useMemo } from 'react'
-import { Link, useSearchParams, useNavigate } from 'react-router-dom'
-import { useQuery } from '@tanstack/react-query'
-import {
- Package,
- Server,
- Shield,
- RefreshCw,
- Search,
- AlertTriangle,
- Filter,
- ExternalLink,
- ArrowUpDown,
- ArrowUp,
- ArrowDown,
- ChevronDown,
- Settings,
- Columns,
- GripVertical,
- X,
- Eye as EyeIcon,
- EyeOff as EyeOffIcon
-} from 'lucide-react'
-import { dashboardAPI } from '../utils/api'
+import { useQuery } from "@tanstack/react-query";
+import {
+ AlertTriangle,
+ ArrowDown,
+ ArrowUp,
+ ArrowUpDown,
+ ChevronDown,
+ Columns,
+ ExternalLink,
+ Eye as EyeIcon,
+ EyeOff as EyeOffIcon,
+ Filter,
+ GripVertical,
+ Package,
+ RefreshCw,
+ Search,
+ Server,
+ Settings,
+ Shield,
+ X,
+} from "lucide-react";
+import React, { useEffect, useMemo, useState } from "react";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { dashboardAPI } from "../utils/api";
const Packages = () => {
- const [searchTerm, setSearchTerm] = useState('')
- const [categoryFilter, setCategoryFilter] = useState('all')
- const [securityFilter, setSecurityFilter] = useState('all')
- const [hostFilter, setHostFilter] = useState('all')
- const [sortField, setSortField] = useState('name')
- const [sortDirection, setSortDirection] = useState('asc')
- const [showColumnSettings, setShowColumnSettings] = useState(false)
- const [searchParams] = useSearchParams()
- const navigate = useNavigate()
+ const [searchTerm, setSearchTerm] = useState("");
+ const [categoryFilter, setCategoryFilter] = useState("all");
+ const [securityFilter, setSecurityFilter] = useState("all");
+ const [hostFilter, setHostFilter] = useState("all");
+ const [sortField, setSortField] = useState("name");
+ const [sortDirection, setSortDirection] = useState("asc");
+ const [showColumnSettings, setShowColumnSettings] = useState(false);
+ const [searchParams] = useSearchParams();
+ const navigate = useNavigate();
- // Handle host filter from URL parameter
- useEffect(() => {
- const hostParam = searchParams.get('host')
- if (hostParam) {
- setHostFilter(hostParam)
- }
- }, [searchParams])
+ // Handle host filter from URL parameter
+ useEffect(() => {
+ const hostParam = searchParams.get("host");
+ if (hostParam) {
+ setHostFilter(hostParam);
+ }
+ }, [searchParams]);
- // Column configuration
- const [columnConfig, setColumnConfig] = useState(() => {
- const defaultConfig = [
- { id: 'name', label: 'Package', visible: true, order: 0 },
- { id: 'affectedHosts', label: 'Affected Hosts', visible: true, order: 1 },
- { id: 'priority', label: 'Priority', visible: true, order: 2 },
- { id: 'latestVersion', label: 'Latest Version', visible: true, order: 3 }
- ]
+ // Column configuration
+ const [columnConfig, setColumnConfig] = useState(() => {
+ const defaultConfig = [
+ { id: "name", label: "Package", visible: true, order: 0 },
+ { id: "affectedHosts", label: "Affected Hosts", visible: true, order: 1 },
+ { id: "priority", label: "Priority", visible: true, order: 2 },
+ { id: "latestVersion", label: "Latest Version", visible: true, order: 3 },
+ ];
- const saved = localStorage.getItem('packages-column-config')
- if (saved) {
- const savedConfig = JSON.parse(saved)
- // Merge with defaults to handle new columns
- return defaultConfig.map(defaultCol => {
- const savedCol = savedConfig.find(col => col.id === defaultCol.id)
- return savedCol ? { ...defaultCol, ...savedCol } : defaultCol
- })
- }
- return defaultConfig
- })
+ const saved = localStorage.getItem("packages-column-config");
+ if (saved) {
+ const savedConfig = JSON.parse(saved);
+ // Merge with defaults to handle new columns
+ return defaultConfig.map((defaultCol) => {
+ const savedCol = savedConfig.find((col) => col.id === defaultCol.id);
+ return savedCol ? { ...defaultCol, ...savedCol } : defaultCol;
+ });
+ }
+ return defaultConfig;
+ });
- // Update column configuration
- const updateColumnConfig = (newConfig) => {
- setColumnConfig(newConfig)
- localStorage.setItem('packages-column-config', JSON.stringify(newConfig))
- }
+ // Update column configuration
+ const updateColumnConfig = (newConfig) => {
+ setColumnConfig(newConfig);
+ localStorage.setItem("packages-column-config", JSON.stringify(newConfig));
+ };
- // Handle affected hosts click
- const handleAffectedHostsClick = (pkg) => {
- const affectedHosts = pkg.affectedHosts || []
- const hostIds = affectedHosts.map(host => host.hostId)
- const hostNames = affectedHosts.map(host => host.friendlyName)
-
- // Create URL with selected hosts and filter
- const params = new URLSearchParams()
- params.set('selected', hostIds.join(','))
- params.set('filter', 'selected')
-
- // Navigate to hosts page with selected hosts
- navigate(`/hosts?${params.toString()}`)
- }
+ // Handle affected hosts click
+ const handleAffectedHostsClick = (pkg) => {
+ const affectedHosts = pkg.affectedHosts || [];
+ const hostIds = affectedHosts.map((host) => host.hostId);
+ const hostNames = affectedHosts.map((host) => host.friendlyName);
- // Handle URL filter parameters
- useEffect(() => {
- const filter = searchParams.get('filter')
- if (filter === 'outdated') {
- // For outdated packages, we want to show all packages that need updates
- // This is the default behavior, so we don't need to change filters
- setCategoryFilter('all')
- setSecurityFilter('all')
- } else if (filter === 'security') {
- // For security updates, filter to show only security updates
- setSecurityFilter('security')
- setCategoryFilter('all')
- }
- }, [searchParams])
+ // Create URL with selected hosts and filter
+ const params = new URLSearchParams();
+ params.set("selected", hostIds.join(","));
+ params.set("filter", "selected");
- const { data: packages, isLoading, error, refetch, isFetching } = useQuery({
- queryKey: ['packages'],
- queryFn: () => dashboardAPI.getPackages().then(res => res.data),
- staleTime: 5 * 60 * 1000, // Data stays fresh for 5 minutes
- refetchOnWindowFocus: false, // Don't refetch when window regains focus
- })
+ // Navigate to hosts page with selected hosts
+ navigate(`/hosts?${params.toString()}`);
+ };
- // Fetch hosts data to get total packages count
- const { data: hosts } = useQuery({
- queryKey: ['hosts'],
- queryFn: () => dashboardAPI.getHosts().then(res => res.data),
- staleTime: 5 * 60 * 1000, // Data stays fresh for 5 minutes
- refetchOnWindowFocus: false, // Don't refetch when window regains focus
- })
+ // Handle URL filter parameters
+ useEffect(() => {
+ const filter = searchParams.get("filter");
+ if (filter === "outdated") {
+ // For outdated packages, we want to show all packages that need updates
+ // This is the default behavior, so we don't need to change filters
+ setCategoryFilter("all");
+ setSecurityFilter("all");
+ } else if (filter === "security") {
+ // For security updates, filter to show only security updates
+ setSecurityFilter("security");
+ setCategoryFilter("all");
+ }
+ }, [searchParams]);
- // Filter and sort packages
- const filteredAndSortedPackages = useMemo(() => {
- if (!packages) return []
-
- // Filter packages
- const filtered = packages.filter(pkg => {
- const matchesSearch = pkg.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
- (pkg.description && pkg.description.toLowerCase().includes(searchTerm.toLowerCase()))
-
- const matchesCategory = categoryFilter === 'all' || pkg.category === categoryFilter
-
- const matchesSecurity = securityFilter === 'all' ||
- (securityFilter === 'security' && pkg.isSecurityUpdate) ||
- (securityFilter === 'regular' && !pkg.isSecurityUpdate)
-
- const affectedHosts = pkg.affectedHosts || []
- const matchesHost = hostFilter === 'all' ||
- affectedHosts.some(host => host.hostId === hostFilter)
-
- return matchesSearch && matchesCategory && matchesSecurity && matchesHost
- })
+ const {
+ data: packages,
+ isLoading,
+ error,
+ refetch,
+ isFetching,
+ } = useQuery({
+ queryKey: ["packages"],
+ queryFn: () => dashboardAPI.getPackages().then((res) => res.data),
+ staleTime: 5 * 60 * 1000, // Data stays fresh for 5 minutes
+ refetchOnWindowFocus: false, // Don't refetch when window regains focus
+ });
- // Sorting
- filtered.sort((a, b) => {
- let aValue, bValue
-
- switch (sortField) {
- case 'name':
- aValue = a.name?.toLowerCase() || ''
- bValue = b.name?.toLowerCase() || ''
- break
- case 'latestVersion':
- aValue = a.latestVersion?.toLowerCase() || ''
- bValue = b.latestVersion?.toLowerCase() || ''
- break
- case 'affectedHosts':
- aValue = a.affectedHostsCount || a.affectedHosts?.length || 0
- bValue = b.affectedHostsCount || b.affectedHosts?.length || 0
- break
- case 'priority':
- aValue = a.isSecurityUpdate ? 0 : 1 // Security updates first
- bValue = b.isSecurityUpdate ? 0 : 1
- break
- default:
- aValue = a.name?.toLowerCase() || ''
- bValue = b.name?.toLowerCase() || ''
- }
+ // Fetch hosts data to get total packages count
+ const { data: hosts } = useQuery({
+ queryKey: ["hosts"],
+ queryFn: () => dashboardAPI.getHosts().then((res) => res.data),
+ staleTime: 5 * 60 * 1000, // Data stays fresh for 5 minutes
+ refetchOnWindowFocus: false, // Don't refetch when window regains focus
+ });
- if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1
- if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1
- return 0
- })
+ // Filter and sort packages
+ const filteredAndSortedPackages = useMemo(() => {
+ if (!packages) return [];
- return filtered
- }, [packages, searchTerm, categoryFilter, securityFilter, sortField, sortDirection])
+ // Filter packages
+ const filtered = packages.filter((pkg) => {
+ const matchesSearch =
+ pkg.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ (pkg.description &&
+ pkg.description.toLowerCase().includes(searchTerm.toLowerCase()));
- // Get visible columns in order
- const visibleColumns = columnConfig
- .filter(col => col.visible)
- .sort((a, b) => a.order - b.order)
+ const matchesCategory =
+ categoryFilter === "all" || pkg.category === categoryFilter;
- // Sorting functions
- const handleSort = (field) => {
- if (sortField === field) {
- setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
- } else {
- setSortField(field)
- setSortDirection('asc')
- }
- }
+ const matchesSecurity =
+ securityFilter === "all" ||
+ (securityFilter === "security" && pkg.isSecurityUpdate) ||
+ (securityFilter === "regular" && !pkg.isSecurityUpdate);
- const getSortIcon = (field) => {
- if (sortField !== field) return
+
+ + Package Details +
++ Detailed view for package: {packageId} +
++ This page will show package information, affected hosts, version + distribution, and more. +
+
-
- )
- case 'affectedHosts':
- const affectedHostsCount = pkg.affectedHostsCount || pkg.affectedHosts?.length || 0
- return (
-
- )
- case 'priority':
- return pkg.isSecurityUpdate ? (
-
-
-
-
- {pkg.name}
-
- {pkg.description && (
-
- {pkg.description}
-
- )}
- {pkg.category && (
-
- Category: {pkg.category}
-
- )}
-
- {pkg.latestVersion || 'Unknown'}
-
- )
- default:
- return null
- }
- }
+ if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
+ if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
+ return 0;
+ });
- // Get unique categories
- const categories = [...new Set(packages?.map(pkg => pkg.category).filter(Boolean))] || []
+ return filtered;
+ }, [
+ packages,
+ searchTerm,
+ categoryFilter,
+ securityFilter,
+ sortField,
+ sortDirection,
+ ]);
- // Calculate unique affected hosts
- const uniqueAffectedHosts = new Set()
- packages?.forEach(pkg => {
- const affectedHosts = pkg.affectedHosts || []
- affectedHosts.forEach(host => {
- uniqueAffectedHosts.add(host.hostId)
- })
- })
- const uniqueAffectedHostsCount = uniqueAffectedHosts.size
+ // Get visible columns in order
+ const visibleColumns = columnConfig
+ .filter((col) => col.visible)
+ .sort((a, b) => a.order - b.order);
- // Calculate total packages across all hosts (including up-to-date ones)
- const totalPackagesCount = hosts?.reduce((total, host) => {
- return total + (host.totalPackagesCount || 0)
- }, 0) || 0
+ // Sorting functions
+ const handleSort = (field) => {
+ if (sortField === field) {
+ setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+ } else {
+ setSortField(field);
+ setSortDirection("asc");
+ }
+ };
- // Calculate outdated packages (packages that need updates)
- const outdatedPackagesCount = packages?.length || 0
+ const getSortIcon = (field) => {
+ if (sortField !== field) return
-
- )
- }
+ const reorderColumns = (fromIndex, toIndex) => {
+ const newConfig = [...columnConfig];
+ const [movedColumn] = newConfig.splice(fromIndex, 1);
+ newConfig.splice(toIndex, 0, movedColumn);
- if (error) {
- return (
-
-
-
- )
- }
+ // Update order values
+ const updatedConfig = newConfig.map((col, index) => ({
+ ...col,
+ order: index,
+ }));
+ updateColumnConfig(updatedConfig);
+ };
- return (
-
-
-
-
-
-
- Error loading packages
-- {error.message || 'Failed to load packages'} -
- -
- {/* Page Header */}
- setShowColumnSettings(false)}
- onToggleVisibility={toggleColumnVisibility}
- onReorder={reorderColumns}
- onReset={resetColumns}
- />
- )}
-
- )
-}
+ // Calculate unique affected hosts
+ const uniqueAffectedHosts = new Set();
+ packages?.forEach((pkg) => {
+ const affectedHosts = pkg.affectedHosts || [];
+ affectedHosts.forEach((host) => {
+ uniqueAffectedHosts.add(host.hostId);
+ });
+ });
+ const uniqueAffectedHostsCount = uniqueAffectedHosts.size;
+
+ // Calculate total packages across all hosts (including up-to-date ones)
+ const totalPackagesCount =
+ hosts?.reduce((total, host) => {
+ return total + (host.totalPackagesCount || 0);
+ }, 0) || 0;
+
+ // Calculate outdated packages (packages that need updates)
+ const outdatedPackagesCount = packages?.length || 0;
+
+ // Calculate security updates
+ const securityUpdatesCount =
+ packages?.filter((pkg) => pkg.isSecurityUpdate).length || 0;
+
+ if (isLoading) {
+ return (
+
-
+ const resetColumns = () => {
+ const defaultConfig = [
+ { id: "name", label: "Package", visible: true, order: 0 },
+ { id: "affectedHosts", label: "Affected Hosts", visible: true, order: 1 },
+ { id: "priority", label: "Priority", visible: true, order: 2 },
+ { id: "latestVersion", label: "Latest Version", visible: true, order: 3 },
+ ];
+ updateColumnConfig(defaultConfig);
+ };
- {/* Summary Stats */}
-
-
- Packages
-- Manage package updates and security patches -
-
-
-
-
-
+ // Helper function to render table cell content
+ const renderCellContent = (column, pkg) => {
+ switch (column.id) {
+ case "name":
+ return (
+
-
-
-
-
-
-
- Total Packages
-{totalPackagesCount}
-
-
-
-
-
-
-
- Total Outdated Packages
-- {outdatedPackagesCount} -
-
-
-
-
-
-
-
- Hosts Pending Updates
-- {uniqueAffectedHostsCount} -
-
-
-
-
-
-
- Security Updates Across All Hosts
-{securityUpdatesCount}
-
+
+ );
+ case "affectedHosts": {
+ const affectedHostsCount =
+ pkg.affectedHostsCount || pkg.affectedHosts?.length || 0;
+ return (
+
+ );
+ }
+ case "priority":
+ return pkg.isSecurityUpdate ? (
+
+
+
+
+ {pkg.name}
+
+ {pkg.description && (
+
+ {pkg.description}
+
+ )}
+ {pkg.category && (
+
+ Category: {pkg.category}
+
+ )}
+
+ {pkg.latestVersion || "Unknown"}
+
+ );
+ default:
+ return null;
+ }
+ };
- {/* Packages List */}
-
-
+ // Get unique categories
+ const categories =
+ [...new Set(packages?.map((pkg) => pkg.category).filter(Boolean))] || [];
- {/* Column Settings Modal */}
- {showColumnSettings && (
-
-
-
- {/* Empty selection controls area to match hosts page spacing */}
-
-
- {/* Table Controls */}
-
-
-
-
- {/* Search */}
-
-
-
-
- {/* Category Filter */}
-
-
-
-
-
-
- {/* Security Filter */}
-
-
-
-
- {/* Host Filter */}
-
-
-
-
- {/* Columns Button */}
-
-
-
-
- {filteredAndSortedPackages.length === 0 ? (
-
-
-
- ) : (
- - {packages?.length === 0 ? 'No packages need updates' : 'No packages match your filters'} -
- {packages?.length === 0 && ( -- All packages are up to date across all hosts -
- )} -
-
-
-
-
- )}
- | - - | - ))} -
|---|
| - {renderCellContent(column, pkg)} - | - ))} -
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ + Error loading packages +
++ {error.message || "Failed to load packages"} +
+ +
+ {/* Page Header */}
+ setShowColumnSettings(false)}
+ onToggleVisibility={toggleColumnVisibility}
+ onReorder={reorderColumns}
+ onReset={resetColumns}
+ />
+ )}
+
+ );
+};
// Column Settings Modal Component
-const ColumnSettingsModal = ({ columnConfig, onClose, onToggleVisibility, onReorder, onReset }) => {
- const [draggedIndex, setDraggedIndex] = useState(null)
+const ColumnSettingsModal = ({
+ columnConfig,
+ onClose,
+ onToggleVisibility,
+ onReorder,
+ onReset,
+}) => {
+ const [draggedIndex, setDraggedIndex] = useState(null);
- const handleDragStart = (e, index) => {
- setDraggedIndex(index)
- e.dataTransfer.effectAllowed = 'move'
- }
+ const handleDragStart = (e, index) => {
+ setDraggedIndex(index);
+ e.dataTransfer.effectAllowed = "move";
+ };
- const handleDragOver = (e) => {
- e.preventDefault()
- e.dataTransfer.dropEffect = 'move'
- }
+ const handleDragOver = (e) => {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = "move";
+ };
- const handleDrop = (e, dropIndex) => {
- e.preventDefault()
- if (draggedIndex !== null && draggedIndex !== dropIndex) {
- onReorder(draggedIndex, dropIndex)
- }
- setDraggedIndex(null)
- }
+ const handleDrop = (e, dropIndex) => {
+ e.preventDefault();
+ if (draggedIndex !== null && draggedIndex !== dropIndex) {
+ onReorder(draggedIndex, dropIndex);
+ }
+ setDraggedIndex(null);
+ };
- return (
-
+
+
+ {/* Summary Stats */}
+
+
+ + Packages +
++ Manage package updates and security patches +
+
+
+
+
+
+
+ {/* Packages List */}
+
+
+
+
+
+
+
+ + Total Packages +
++ {totalPackagesCount} +
+
+
+
+
+
+
+
+ + Total Outdated Packages +
++ {outdatedPackagesCount} +
+
+
+
+
+
+
+
+ + Hosts Pending Updates +
++ {uniqueAffectedHostsCount} +
+
+
+
+
+
+
+ + Security Updates Across All Hosts +
++ {securityUpdatesCount} +
+
+
+
+ {/* Column Settings Modal */}
+ {showColumnSettings && (
+
+
+
+ {/* Empty selection controls area to match hosts page spacing */}
+
+
+ {/* Table Controls */}
+
+
+
+
+ {/* Search */}
+
+
+
+
+ {/* Category Filter */}
+
+
+
+
+
+
+ {/* Security Filter */}
+
+
+
+
+ {/* Host Filter */}
+
+
+
+
+ {/* Columns Button */}
+
+
+
+
+ {filteredAndSortedPackages.length === 0 ? (
+
+
+
+ ) : (
+ + {packages?.length === 0 + ? "No packages need updates" + : "No packages match your filters"} +
+ {packages?.length === 0 && ( ++ All packages are up to date across all hosts +
+ )} +
+
+
+
+
+ )}
+ | + + | + ))} +
|---|
| + {renderCellContent(column, pkg)} + | + ))} +
-
- )
-}
+ return (
+
-
-
-
-
- Customize Columns
- -
- {columnConfig.map((column, index) => (
-
-
- handleDragStart(e, index)}
- onDragOver={handleDragOver}
- onDrop={(e) => handleDrop(e, index)}
- className={`flex items-center justify-between p-3 border rounded-lg cursor-move ${
- draggedIndex === index ? 'opacity-50' : 'hover:bg-secondary-50 dark:hover:bg-secondary-700'
- } border-secondary-200 dark:border-secondary-600`}
- >
-
- ))}
-
-
-
-
-
-
-
-
+
+ );
+};
+
+export default Packages;
diff --git a/frontend/src/pages/Permissions.jsx b/frontend/src/pages/Permissions.jsx
index 0529bca..4ca9559 100644
--- a/frontend/src/pages/Permissions.jsx
+++ b/frontend/src/pages/Permissions.jsx
@@ -1,394 +1,479 @@
-import React, { useState, useEffect } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import {
- Shield,
- Settings,
- Users,
- Server,
- Package,
- BarChart3,
- Download,
- Eye,
- Edit,
- Trash2,
- Plus,
- Save,
- X,
- AlertTriangle,
- RefreshCw
-} from 'lucide-react'
-import { permissionsAPI } from '../utils/api'
-import { useAuth } from '../contexts/AuthContext'
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+ AlertTriangle,
+ BarChart3,
+ Download,
+ Edit,
+ Eye,
+ Package,
+ Plus,
+ RefreshCw,
+ Save,
+ Server,
+ Settings,
+ Shield,
+ Trash2,
+ Users,
+ X,
+} from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { useAuth } from "../contexts/AuthContext";
+import { permissionsAPI } from "../utils/api";
const Permissions = () => {
- const [editingRole, setEditingRole] = useState(null)
- const [showAddModal, setShowAddModal] = useState(false)
- const queryClient = useQueryClient()
- const { refreshPermissions } = useAuth()
+ const [editingRole, setEditingRole] = useState(null);
+ const [showAddModal, setShowAddModal] = useState(false);
+ const queryClient = useQueryClient();
+ const { refreshPermissions } = useAuth();
- // Fetch all role permissions
- const { data: roles, isLoading, error } = useQuery({
- queryKey: ['rolePermissions'],
- queryFn: () => permissionsAPI.getRoles().then(res => res.data)
- })
+ // Fetch all role permissions
+ const {
+ data: roles,
+ isLoading,
+ error,
+ } = useQuery({
+ queryKey: ["rolePermissions"],
+ queryFn: () => permissionsAPI.getRoles().then((res) => res.data),
+ });
- // Update role permissions mutation
- const updateRoleMutation = useMutation({
- mutationFn: ({ role, permissions }) => permissionsAPI.updateRole(role, permissions),
- onSuccess: () => {
- queryClient.invalidateQueries(['rolePermissions'])
- setEditingRole(null)
- // Refresh user permissions to apply changes immediately
- refreshPermissions()
- }
- })
+ // Update role permissions mutation
+ const updateRoleMutation = useMutation({
+ mutationFn: ({ role, permissions }) =>
+ permissionsAPI.updateRole(role, permissions),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["rolePermissions"]);
+ setEditingRole(null);
+ // Refresh user permissions to apply changes immediately
+ refreshPermissions();
+ },
+ });
- // Delete role mutation
- const deleteRoleMutation = useMutation({
- mutationFn: (role) => permissionsAPI.deleteRole(role),
- onSuccess: () => {
- queryClient.invalidateQueries(['rolePermissions'])
- }
- })
+ // Delete role mutation
+ const deleteRoleMutation = useMutation({
+ mutationFn: (role) => permissionsAPI.deleteRole(role),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["rolePermissions"]);
+ },
+ });
- const handleSavePermissions = async (role, permissions) => {
- try {
- await updateRoleMutation.mutateAsync({ role, permissions })
- } catch (error) {
- console.error('Failed to update permissions:', error)
- }
- }
+ const handleSavePermissions = async (role, permissions) => {
+ try {
+ await updateRoleMutation.mutateAsync({ role, permissions });
+ } catch (error) {
+ console.error("Failed to update permissions:", error);
+ }
+ };
- const handleDeleteRole = async (role) => {
- if (window.confirm(`Are you sure you want to delete the "${role}" role? This action cannot be undone.`)) {
- try {
- await deleteRoleMutation.mutateAsync(role)
- } catch (error) {
- console.error('Failed to delete role:', error)
- }
- }
- }
+ const handleDeleteRole = async (role) => {
+ if (
+ window.confirm(
+ `Are you sure you want to delete the "${role}" role? This action cannot be undone.`,
+ )
+ ) {
+ try {
+ await deleteRoleMutation.mutateAsync(role);
+ } catch (error) {
+ console.error("Failed to delete role:", error);
+ }
+ }
+ };
- if (isLoading) {
- return (
-
+
+
+
-export default Packages
\ No newline at end of file
+ + Customize Columns +
+ +
+ {columnConfig.map((column, index) => (
+
+
+ handleDragStart(e, index)}
+ onDragOver={handleDragOver}
+ onDrop={(e) => handleDrop(e, index)}
+ className={`flex items-center justify-between p-3 border rounded-lg cursor-move ${
+ draggedIndex === index
+ ? "opacity-50"
+ : "hover:bg-secondary-50 dark:hover:bg-secondary-700"
+ } border-secondary-200 dark:border-secondary-600`}
+ >
+
+ ))}
+
+
+
+
+
+
+
+
-
-
- )
- }
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
- if (error) {
- return (
-
-
- )
- }
+ if (error) {
+ return (
+
-
-
-
- Error loading permissions
-{error.message}
-
+
+ );
+ }
- return (
-
+
+
+
+ + Error loading permissions +
+{error.message}
+
- {/* Header */}
- setShowAddModal(false)}
+ onSuccess={() => {
+ queryClient.invalidateQueries(["rolePermissions"]);
+ setShowAddModal(false);
+ }}
+ />
+
+ );
+};
// Role Permissions Card Component
-const RolePermissionsCard = ({ role, isEditing, onEdit, onCancel, onSave, onDelete }) => {
- const [permissions, setPermissions] = useState(role)
+const RolePermissionsCard = ({
+ role,
+ isEditing,
+ onEdit,
+ onCancel,
+ onSave,
+ onDelete,
+}) => {
+ const [permissions, setPermissions] = useState(role);
- // Sync permissions state with role prop when it changes
- useEffect(() => {
- setPermissions(role)
- }, [role])
+ // Sync permissions state with role prop when it changes
+ useEffect(() => {
+ setPermissions(role);
+ }, [role]);
- const permissionFields = [
- { key: 'can_view_dashboard', label: 'View Dashboard', icon: BarChart3, description: 'Access to the main dashboard' },
- { key: 'can_view_hosts', label: 'View Hosts', icon: Server, description: 'See host information and status' },
- { key: 'can_manage_hosts', label: 'Manage Hosts', icon: Edit, description: 'Add, edit, and delete hosts' },
- { key: 'can_view_packages', label: 'View Packages', icon: Package, description: 'See package information' },
- { key: 'can_manage_packages', label: 'Manage Packages', icon: Settings, description: 'Edit package details' },
- { key: 'can_view_users', label: 'View Users', icon: Users, description: 'See user list and details' },
- { key: 'can_manage_users', label: 'Manage Users', icon: Shield, description: 'Add, edit, and delete users' },
- { key: 'can_view_reports', label: 'View Reports', icon: BarChart3, description: 'Access to reports and analytics' },
- { key: 'can_export_data', label: 'Export Data', icon: Download, description: 'Download data and reports' },
- { key: 'can_manage_settings', label: 'Manage Settings', icon: Settings, description: 'System configuration access' }
- ]
+ const permissionFields = [
+ {
+ key: "can_view_dashboard",
+ label: "View Dashboard",
+ icon: BarChart3,
+ description: "Access to the main dashboard",
+ },
+ {
+ key: "can_view_hosts",
+ label: "View Hosts",
+ icon: Server,
+ description: "See host information and status",
+ },
+ {
+ key: "can_manage_hosts",
+ label: "Manage Hosts",
+ icon: Edit,
+ description: "Add, edit, and delete hosts",
+ },
+ {
+ key: "can_view_packages",
+ label: "View Packages",
+ icon: Package,
+ description: "See package information",
+ },
+ {
+ key: "can_manage_packages",
+ label: "Manage Packages",
+ icon: Settings,
+ description: "Edit package details",
+ },
+ {
+ key: "can_view_users",
+ label: "View Users",
+ icon: Users,
+ description: "See user list and details",
+ },
+ {
+ key: "can_manage_users",
+ label: "Manage Users",
+ icon: Shield,
+ description: "Add, edit, and delete users",
+ },
+ {
+ key: "can_view_reports",
+ label: "View Reports",
+ icon: BarChart3,
+ description: "Access to reports and analytics",
+ },
+ {
+ key: "can_export_data",
+ label: "Export Data",
+ icon: Download,
+ description: "Download data and reports",
+ },
+ {
+ key: "can_manage_settings",
+ label: "Manage Settings",
+ icon: Settings,
+ description: "System configuration access",
+ },
+ ];
- const handlePermissionChange = (key, value) => {
- setPermissions(prev => ({
- ...prev,
- [key]: value
- }))
- }
+ const handlePermissionChange = (key, value) => {
+ setPermissions((prev) => ({
+ ...prev,
+ [key]: value,
+ }));
+ };
- const handleSave = () => {
- onSave(role.role, permissions)
- }
+ const handleSave = () => {
+ onSave(role.role, permissions);
+ };
- const isBuiltInRole = role.role === 'admin' || role.role === 'user'
+ const isBuiltInRole = role.role === "admin" || role.role === "user";
- return (
-
-
+ return (
+
-
-
-
-
+ {/* Header */}
+ setShowAddModal(false)}
- onSuccess={() => {
- queryClient.invalidateQueries(['rolePermissions'])
- setShowAddModal(false)
- }}
- />
-
- )
-}
+ {/* Add Role Modal */}
+
+
- {/* Roles List */}
-
+
+
+
+
- {roles && Array.isArray(roles) && roles.map((role) => (
- setEditingRole(role.role)}
- onCancel={() => setEditingRole(null)}
- onSave={handleSavePermissions}
- onDelete={handleDeleteRole}
- />
- ))}
-
+ {/* Roles List */}
+
+ {roles &&
+ Array.isArray(roles) &&
+ roles.map((role) => (
+ setEditingRole(role.role)}
+ onCancel={() => setEditingRole(null)}
+ onSave={handleSavePermissions}
+ onDelete={handleDeleteRole}
+ />
+ ))}
+
- {/* Add Role Modal */}
-
-
+ );
+};
// Add Role Modal Component
const AddRoleModal = ({ isOpen, onClose, onSuccess }) => {
- const [formData, setFormData] = useState({
- role: '',
- can_view_dashboard: true,
- can_view_hosts: true,
- can_manage_hosts: false,
- can_view_packages: true,
- can_manage_packages: false,
- can_view_users: false,
- can_manage_users: false,
- can_view_reports: true,
- can_export_data: false,
- can_manage_settings: false
- })
- const [isLoading, setIsLoading] = useState(false)
- const [error, setError] = useState('')
+ const [formData, setFormData] = useState({
+ role: "",
+ can_view_dashboard: true,
+ can_view_hosts: true,
+ can_manage_hosts: false,
+ can_view_packages: true,
+ can_manage_packages: false,
+ can_view_users: false,
+ can_manage_users: false,
+ can_view_reports: true,
+ can_export_data: false,
+ can_manage_settings: false,
+ });
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState("");
- const handleSubmit = async (e) => {
- e.preventDefault()
- setIsLoading(true)
- setError('')
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setIsLoading(true);
+ setError("");
- try {
- await permissionsAPI.updateRole(formData.role, formData)
- onSuccess()
- } catch (err) {
- setError(err.response?.data?.error || 'Failed to create role')
- } finally {
- setIsLoading(false)
- }
- }
+ try {
+ await permissionsAPI.updateRole(formData.role, formData);
+ onSuccess();
+ } catch (err) {
+ setError(err.response?.data?.error || "Failed to create role");
+ } finally {
+ setIsLoading(false);
+ }
+ };
- const handleInputChange = (e) => {
- const { name, value, type, checked } = e.target
- setFormData({
- ...formData,
- [name]: type === 'checkbox' ? checked : value
- })
- }
+ const handleInputChange = (e) => {
+ const { name, value, type, checked } = e.target;
+ setFormData({
+ ...formData,
+ [name]: type === "checkbox" ? checked : value,
+ });
+ };
- if (!isOpen) return null
+ if (!isOpen) return null;
- return (
-
-
+ return (
+
-
-
-
- {role.role}
- {isBuiltInRole && ( - - Built-in Role - - )} -
- {isEditing ? (
- <>
-
-
-
- ) : (
- <>
-
- {!isBuiltInRole && (
-
- )}
-
- )}
-
-
+
- )
-}
+
+
-
+
+
+
+ + {role.role} +
+ {isBuiltInRole && ( + + Built-in Role + + )} +
+ {isEditing ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+ {!isBuiltInRole && (
+
+ )}
+
+ )}
+
+
-
-
- {permissionFields.map((field) => {
- const Icon = field.icon
- const isChecked = permissions[field.key]
-
- return (
-
-
-
- )
- })}
-
- handlePermissionChange(field.key, e.target.checked)}
- disabled={!isEditing || (isBuiltInRole && field.key === 'can_manage_users')}
- className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-secondary-300 rounded disabled:opacity-50"
- />
-
-
-
-
-
- - {field.description} -
-
+
+
+ {permissionFields.map((field) => {
+ const Icon = field.icon;
+ const isChecked = permissions[field.key];
+
+ return (
+
+
+
+ );
+ })}
+
+
+ handlePermissionChange(field.key, e.target.checked)
+ }
+ disabled={
+ !isEditing ||
+ (isBuiltInRole && field.key === "can_manage_users")
+ }
+ className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-secondary-300 rounded disabled:opacity-50"
+ />
+
+
+
+
+
+ + {field.description} +
+
-
+ );
+};
+
+export default Permissions;
diff --git a/frontend/src/pages/Profile.jsx b/frontend/src/pages/Profile.jsx
index 9c30c8e..af2c8cc 100644
--- a/frontend/src/pages/Profile.jsx
+++ b/frontend/src/pages/Profile.jsx
@@ -1,897 +1,1047 @@
-import React, { useState } from 'react'
-import { useAuth } from '../contexts/AuthContext'
-import { useTheme } from '../contexts/ThemeContext'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import {
- User,
- Mail,
- Shield,
- Key,
- Save,
- Eye,
- EyeOff,
- CheckCircle,
- AlertCircle,
- Sun,
- Moon,
- Settings,
- Smartphone,
- QrCode,
- Copy,
- Download,
- Trash2,
- RefreshCw
-} from 'lucide-react'
-import { tfaAPI } from '../utils/api'
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+ AlertCircle,
+ CheckCircle,
+ Copy,
+ Download,
+ Eye,
+ EyeOff,
+ Key,
+ Mail,
+ Moon,
+ QrCode,
+ RefreshCw,
+ Save,
+ Settings,
+ Shield,
+ Smartphone,
+ Sun,
+ Trash2,
+ User,
+} from "lucide-react";
+import React, { useState } from "react";
+import { useAuth } from "../contexts/AuthContext";
+import { useTheme } from "../contexts/ThemeContext";
+import { tfaAPI } from "../utils/api";
const Profile = () => {
- const { user, updateProfile, changePassword } = useAuth()
- const { theme, toggleTheme, isDark } = useTheme()
- const [activeTab, setActiveTab] = useState('profile')
- const [isLoading, setIsLoading] = useState(false)
- const [message, setMessage] = useState({ type: '', text: '' })
+ const { user, updateProfile, changePassword } = useAuth();
+ const { theme, toggleTheme, isDark } = useTheme();
+ const [activeTab, setActiveTab] = useState("profile");
+ const [isLoading, setIsLoading] = useState(false);
+ const [message, setMessage] = useState({ type: "", text: "" });
- const [profileData, setProfileData] = useState({
- username: user?.username || '',
- email: user?.email || '',
- first_name: user?.first_name || '',
- last_name: user?.last_name || ''
- })
+ const [profileData, setProfileData] = useState({
+ username: user?.username || "",
+ email: user?.email || "",
+ first_name: user?.first_name || "",
+ last_name: user?.last_name || "",
+ });
- const [passwordData, setPasswordData] = useState({
- currentPassword: '',
- newPassword: '',
- confirmPassword: ''
- })
+ const [passwordData, setPasswordData] = useState({
+ currentPassword: "",
+ newPassword: "",
+ confirmPassword: "",
+ });
- const [showPasswords, setShowPasswords] = useState({
- current: false,
- new: false,
- confirm: false
- })
+ const [showPasswords, setShowPasswords] = useState({
+ current: false,
+ new: false,
+ confirm: false,
+ });
- const handleProfileSubmit = async (e) => {
- e.preventDefault()
- setIsLoading(true)
- setMessage({ type: '', text: '' })
+ const handleProfileSubmit = async (e) => {
+ e.preventDefault();
+ setIsLoading(true);
+ setMessage({ type: "", text: "" });
- try {
- const result = await updateProfile(profileData)
- if (result.success) {
- setMessage({ type: 'success', text: 'Profile updated successfully!' })
- } else {
- setMessage({ type: 'error', text: result.error || 'Failed to update profile' })
- }
- } catch (error) {
- setMessage({ type: 'error', text: 'Network error occurred' })
- } finally {
- setIsLoading(false)
- }
- }
+ try {
+ const result = await updateProfile(profileData);
+ if (result.success) {
+ setMessage({ type: "success", text: "Profile updated successfully!" });
+ } else {
+ setMessage({
+ type: "error",
+ text: result.error || "Failed to update profile",
+ });
+ }
+ } catch (error) {
+ setMessage({ type: "error", text: "Network error occurred" });
+ } finally {
+ setIsLoading(false);
+ }
+ };
- const handlePasswordSubmit = async (e) => {
- e.preventDefault()
- setIsLoading(true)
- setMessage({ type: '', text: '' })
+ const handlePasswordSubmit = async (e) => {
+ e.preventDefault();
+ setIsLoading(true);
+ setMessage({ type: "", text: "" });
- if (passwordData.newPassword !== passwordData.confirmPassword) {
- setMessage({ type: 'error', text: 'New passwords do not match' })
- setIsLoading(false)
- return
- }
+ if (passwordData.newPassword !== passwordData.confirmPassword) {
+ setMessage({ type: "error", text: "New passwords do not match" });
+ setIsLoading(false);
+ return;
+ }
- if (passwordData.newPassword.length < 6) {
- setMessage({ type: 'error', text: 'New password must be at least 6 characters' })
- setIsLoading(false)
- return
- }
+ if (passwordData.newPassword.length < 6) {
+ setMessage({
+ type: "error",
+ text: "New password must be at least 6 characters",
+ });
+ setIsLoading(false);
+ return;
+ }
- try {
- const result = await changePassword(passwordData.currentPassword, passwordData.newPassword)
- if (result.success) {
- setMessage({ type: 'success', text: 'Password changed successfully!' })
- setPasswordData({
- currentPassword: '',
- newPassword: '',
- confirmPassword: ''
- })
- } else {
- setMessage({ type: 'error', text: result.error || 'Failed to change password' })
- }
- } catch (error) {
- setMessage({ type: 'error', text: 'Network error occurred' })
- } finally {
- setIsLoading(false)
- }
- }
+ try {
+ const result = await changePassword(
+ passwordData.currentPassword,
+ passwordData.newPassword,
+ );
+ if (result.success) {
+ setMessage({ type: "success", text: "Password changed successfully!" });
+ setPasswordData({
+ currentPassword: "",
+ newPassword: "",
+ confirmPassword: "",
+ });
+ } else {
+ setMessage({
+ type: "error",
+ text: result.error || "Failed to change password",
+ });
+ }
+ } catch (error) {
+ setMessage({ type: "error", text: "Network error occurred" });
+ } finally {
+ setIsLoading(false);
+ }
+ };
- const handleInputChange = (e) => {
- const { name, value } = e.target
- if (activeTab === 'profile') {
- setProfileData(prev => ({ ...prev, [name]: value }))
- } else {
- setPasswordData(prev => ({ ...prev, [name]: value }))
- }
- }
+ const handleInputChange = (e) => {
+ const { name, value } = e.target;
+ if (activeTab === "profile") {
+ setProfileData((prev) => ({ ...prev, [name]: value }));
+ } else {
+ setPasswordData((prev) => ({ ...prev, [name]: value }));
+ }
+ };
- const togglePasswordVisibility = (field) => {
- setShowPasswords(prev => ({ ...prev, [field]: !prev[field] }))
- }
+ const togglePasswordVisibility = (field) => {
+ setShowPasswords((prev) => ({ ...prev, [field]: !prev[field] }));
+ };
- const tabs = [
- { id: 'profile', name: 'Profile Information', icon: User },
- { id: 'password', name: 'Change Password', icon: Key },
- { id: 'tfa', name: 'Multi-Factor Authentication', icon: Smartphone },
- { id: 'preferences', name: 'Preferences', icon: Settings }
- ]
+ const tabs = [
+ { id: "profile", name: "Profile Information", icon: User },
+ { id: "password", name: "Change Password", icon: Key },
+ { id: "tfa", name: "Multi-Factor Authentication", icon: Smartphone },
+ { id: "preferences", name: "Preferences", icon: Settings },
+ ];
- return (
-
-
+ Add New Role
- - +
- {/* Header */}
-
+ );
+};
// TFA Tab Component
const TfaTab = () => {
- const [setupStep, setSetupStep] = useState('status') // 'status', 'setup', 'verify', 'backup-codes'
- const [verificationToken, setVerificationToken] = useState('')
- const [password, setPassword] = useState('')
- const [backupCodes, setBackupCodes] = useState([])
- const [isLoading, setIsLoading] = useState(false)
- const [message, setMessage] = useState({ type: '', text: '' })
- const queryClient = useQueryClient()
+ const [setupStep, setSetupStep] = useState("status"); // 'status', 'setup', 'verify', 'backup-codes'
+ const [verificationToken, setVerificationToken] = useState("");
+ const [password, setPassword] = useState("");
+ const [backupCodes, setBackupCodes] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const [message, setMessage] = useState({ type: "", text: "" });
+ const queryClient = useQueryClient();
- // Fetch TFA status
- const { data: tfaStatus, isLoading: statusLoading } = useQuery({
- queryKey: ['tfaStatus'],
- queryFn: () => tfaAPI.status().then(res => res.data),
- })
+ // Fetch TFA status
+ const { data: tfaStatus, isLoading: statusLoading } = useQuery({
+ queryKey: ["tfaStatus"],
+ queryFn: () => tfaAPI.status().then((res) => res.data),
+ });
- // Setup TFA mutation
- const setupMutation = useMutation({
- mutationFn: () => tfaAPI.setup().then(res => res.data),
- onSuccess: (data) => {
- setSetupStep('setup')
- setMessage({ type: 'info', text: 'Scan the QR code with your authenticator app and enter the verification code below.' })
- },
- onError: (error) => {
- setMessage({ type: 'error', text: error.response?.data?.error || 'Failed to setup TFA' })
- }
- })
+ // Setup TFA mutation
+ const setupMutation = useMutation({
+ mutationFn: () => tfaAPI.setup().then((res) => res.data),
+ onSuccess: (data) => {
+ setSetupStep("setup");
+ setMessage({
+ type: "info",
+ text: "Scan the QR code with your authenticator app and enter the verification code below.",
+ });
+ },
+ onError: (error) => {
+ setMessage({
+ type: "error",
+ text: error.response?.data?.error || "Failed to setup TFA",
+ });
+ },
+ });
- // Verify setup mutation
- const verifyMutation = useMutation({
- mutationFn: (data) => tfaAPI.verifySetup(data).then(res => res.data),
- onSuccess: (data) => {
- setBackupCodes(data.backupCodes)
- setSetupStep('backup-codes')
- setMessage({ type: 'success', text: 'Two-factor authentication has been enabled successfully!' })
- },
- onError: (error) => {
- setMessage({ type: 'error', text: error.response?.data?.error || 'Failed to verify TFA setup' })
- }
- })
+ // Verify setup mutation
+ const verifyMutation = useMutation({
+ mutationFn: (data) => tfaAPI.verifySetup(data).then((res) => res.data),
+ onSuccess: (data) => {
+ setBackupCodes(data.backupCodes);
+ setSetupStep("backup-codes");
+ setMessage({
+ type: "success",
+ text: "Two-factor authentication has been enabled successfully!",
+ });
+ },
+ onError: (error) => {
+ setMessage({
+ type: "error",
+ text: error.response?.data?.error || "Failed to verify TFA setup",
+ });
+ },
+ });
- // Disable TFA mutation
- const disableMutation = useMutation({
- mutationFn: (data) => tfaAPI.disable(data).then(res => res.data),
- onSuccess: () => {
- queryClient.invalidateQueries(['tfaStatus'])
- setSetupStep('status')
- setMessage({ type: 'success', text: 'Two-factor authentication has been disabled successfully!' })
- },
- onError: (error) => {
- setMessage({ type: 'error', text: error.response?.data?.error || 'Failed to disable TFA' })
- }
- })
+ // Disable TFA mutation
+ const disableMutation = useMutation({
+ mutationFn: (data) => tfaAPI.disable(data).then((res) => res.data),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["tfaStatus"]);
+ setSetupStep("status");
+ setMessage({
+ type: "success",
+ text: "Two-factor authentication has been disabled successfully!",
+ });
+ },
+ onError: (error) => {
+ setMessage({
+ type: "error",
+ text: error.response?.data?.error || "Failed to disable TFA",
+ });
+ },
+ });
- // Regenerate backup codes mutation
- const regenerateBackupCodesMutation = useMutation({
- mutationFn: () => tfaAPI.regenerateBackupCodes().then(res => res.data),
- onSuccess: (data) => {
- setBackupCodes(data.backupCodes)
- setMessage({ type: 'success', text: 'Backup codes have been regenerated successfully!' })
- },
- onError: (error) => {
- setMessage({ type: 'error', text: error.response?.data?.error || 'Failed to regenerate backup codes' })
- }
- })
+ // Regenerate backup codes mutation
+ const regenerateBackupCodesMutation = useMutation({
+ mutationFn: () => tfaAPI.regenerateBackupCodes().then((res) => res.data),
+ onSuccess: (data) => {
+ setBackupCodes(data.backupCodes);
+ setMessage({
+ type: "success",
+ text: "Backup codes have been regenerated successfully!",
+ });
+ },
+ onError: (error) => {
+ setMessage({
+ type: "error",
+ text:
+ error.response?.data?.error || "Failed to regenerate backup codes",
+ });
+ },
+ });
- const handleSetup = () => {
- setupMutation.mutate()
- }
+ const handleSetup = () => {
+ setupMutation.mutate();
+ };
- const handleVerify = (e) => {
- e.preventDefault()
- if (verificationToken.length !== 6) {
- setMessage({ type: 'error', text: 'Please enter a 6-digit verification code' })
- return
- }
- verifyMutation.mutate({ token: verificationToken })
- }
+ const handleVerify = (e) => {
+ e.preventDefault();
+ if (verificationToken.length !== 6) {
+ setMessage({
+ type: "error",
+ text: "Please enter a 6-digit verification code",
+ });
+ return;
+ }
+ verifyMutation.mutate({ token: verificationToken });
+ };
- const handleDisable = (e) => {
- e.preventDefault()
- if (!password) {
- setMessage({ type: 'error', text: 'Please enter your password to disable TFA' })
- return
- }
- disableMutation.mutate({ password })
- }
+ const handleDisable = (e) => {
+ e.preventDefault();
+ if (!password) {
+ setMessage({
+ type: "error",
+ text: "Please enter your password to disable TFA",
+ });
+ return;
+ }
+ disableMutation.mutate({ password });
+ };
- const handleRegenerateBackupCodes = () => {
- regenerateBackupCodesMutation.mutate()
- }
+ const handleRegenerateBackupCodes = () => {
+ regenerateBackupCodesMutation.mutate();
+ };
- const copyToClipboard = async (text) => {
- try {
- // Try modern clipboard API first
- if (navigator.clipboard && window.isSecureContext) {
- await navigator.clipboard.writeText(text)
- setMessage({ type: 'success', text: 'Copied to clipboard!' })
- return
- }
-
- // Fallback for older browsers or non-secure contexts
- const textArea = document.createElement('textarea')
- textArea.value = text
- textArea.style.position = 'fixed'
- textArea.style.left = '-999999px'
- textArea.style.top = '-999999px'
- document.body.appendChild(textArea)
- textArea.focus()
- textArea.select()
-
- try {
- const successful = document.execCommand('copy')
- if (successful) {
- setMessage({ type: 'success', text: 'Copied to clipboard!' })
- } else {
- throw new Error('Copy command failed')
- }
- } catch (err) {
- // If all else fails, show the text in a prompt
- prompt('Copy this text:', text)
- setMessage({ type: 'info', text: 'Text shown in prompt for manual copying' })
- } finally {
- document.body.removeChild(textArea)
- }
- } catch (err) {
- console.error('Failed to copy to clipboard:', err)
- // Show the text in a prompt as last resort
- prompt('Copy this text:', text)
- setMessage({ type: 'info', text: 'Text shown in prompt for manual copying' })
- }
- }
+ const copyToClipboard = async (text) => {
+ try {
+ // Try modern clipboard API first
+ if (navigator.clipboard && window.isSecureContext) {
+ await navigator.clipboard.writeText(text);
+ setMessage({ type: "success", text: "Copied to clipboard!" });
+ return;
+ }
- const downloadBackupCodes = () => {
- const content = `PatchMon Backup Codes\n\n${backupCodes.map((code, index) => `${index + 1}. ${code}`).join('\n')}\n\nKeep these codes safe! Each code can only be used once.`
- const blob = new Blob([content], { type: 'text/plain' })
- const url = URL.createObjectURL(blob)
- const a = document.createElement('a')
- a.href = url
- a.download = 'patchmon-backup-codes.txt'
- document.body.appendChild(a)
- a.click()
- document.body.removeChild(a)
- URL.revokeObjectURL(url)
- }
+ // Fallback for older browsers or non-secure contexts
+ const textArea = document.createElement("textarea");
+ textArea.value = text;
+ textArea.style.position = "fixed";
+ textArea.style.left = "-999999px";
+ textArea.style.top = "-999999px";
+ document.body.appendChild(textArea);
+ textArea.focus();
+ textArea.select();
- if (statusLoading) {
- return (
-
-
+ return (
+ - Manage your account information and security settings -
-
+ {/* Header */}
+
+
+
- {/* User Info Card */}
- + Manage your account information and security settings +
+
-
+ {/* User Info Card */}
+
-
-
-
-
-
-
-
- - {user?.first_name && user?.last_name - ? `${user.first_name} ${user.last_name}` - : user?.first_name || user?.username} -
-{user?.email}
-
-
-
-
+
- {/* Tabs */}
-
+
+
+
+
+
+
+
+ + {user?.first_name && user?.last_name + ? `${user.first_name} ${user.last_name}` + : user?.first_name || user?.username} +
++ {user?.email} +
+
+
+
+
-
+
-
-
+ {/* Tabs */}
+
+
- )
-}
+ {/* Preferences Tab */}
+ {activeTab === "preferences" && (
+
+
+
-
- {/* Success/Error Message */}
- {message.text && (
-
-
-
- )}
+
- {message.type === 'success' ? (
-
-
-
- - {message.text} -
-
+ {/* Success/Error Message */}
+ {message.text && (
+
-
+
+ )}
- {/* Profile Information Tab */}
- {activeTab === 'profile' && (
-
- )}
+
+ {message.type === "success" ? (
+
+
+
+ + {message.text} +
+
+
+
+
+ )}
- {/* Change Password Tab */}
- {activeTab === 'password' && (
-
- )}
+
+
+
+
+ )}
- {/* Multi-Factor Authentication Tab */}
- {activeTab === 'tfa' && (
-
-
- )}
-
-
- Preferences
- - {/* Theme Settings */} -
-
-
-
- Appearance
-
-
-
-
-
-
-
-
- {isDark ? (
-
-
-
- - {isDark ? 'Dark Mode' : 'Light Mode'} -
-- {isDark ? 'Switch to light mode' : 'Switch to dark mode'} -
-
+
+ )}
+
+
+ + Preferences +
+ + {/* Theme Settings */} +
+
+
+
+ + Appearance +
+
+
+
+
+
+
+
+
+ {isDark ? (
+
+
+
+ + {isDark ? "Dark Mode" : "Light Mode"} +
++ {isDark + ? "Switch to light mode" + : "Switch to dark mode"} +
+
-
-
- )
- }
+ try {
+ const successful = document.execCommand("copy");
+ if (successful) {
+ setMessage({ type: "success", text: "Copied to clipboard!" });
+ } else {
+ throw new Error("Copy command failed");
+ }
+ } catch (err) {
+ // If all else fails, show the text in a prompt
+ prompt("Copy this text:", text);
+ setMessage({
+ type: "info",
+ text: "Text shown in prompt for manual copying",
+ });
+ } finally {
+ document.body.removeChild(textArea);
+ }
+ } catch (err) {
+ console.error("Failed to copy to clipboard:", err);
+ // Show the text in a prompt as last resort
+ prompt("Copy this text:", text);
+ setMessage({
+ type: "info",
+ text: "Text shown in prompt for manual copying",
+ });
+ }
+ };
- return (
-
-
+ );
+};
+
+export default Profile;
diff --git a/frontend/src/pages/Repositories.jsx b/frontend/src/pages/Repositories.jsx
index 4add269..c1c3818 100644
--- a/frontend/src/pages/Repositories.jsx
+++ b/frontend/src/pages/Repositories.jsx
@@ -1,546 +1,626 @@
-import React, { useState, useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { Link } from 'react-router-dom';
-import {
- Server,
- Shield,
- ShieldCheck,
- AlertTriangle,
- Users,
- Globe,
- Lock,
- Unlock,
- Database,
- Eye,
- Search,
- Columns,
- ArrowUpDown,
- ArrowUp,
- ArrowDown,
- X,
- GripVertical,
- Check,
- RefreshCw
-} from 'lucide-react';
-import { repositoryAPI } from '../utils/api';
+import { useQuery } from "@tanstack/react-query";
+import {
+ AlertTriangle,
+ ArrowDown,
+ ArrowUp,
+ ArrowUpDown,
+ Check,
+ Columns,
+ Database,
+ Eye,
+ Globe,
+ GripVertical,
+ Lock,
+ RefreshCw,
+ Search,
+ Server,
+ Shield,
+ ShieldCheck,
+ Unlock,
+ Users,
+ X,
+} from "lucide-react";
+import React, { useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import { repositoryAPI } from "../utils/api";
const Repositories = () => {
- const [searchTerm, setSearchTerm] = useState('');
- const [filterType, setFilterType] = useState('all'); // all, secure, insecure
- const [filterStatus, setFilterStatus] = useState('all'); // all, active, inactive
- const [sortField, setSortField] = useState('name');
- const [sortDirection, setSortDirection] = useState('asc');
- const [showColumnSettings, setShowColumnSettings] = useState(false);
+ const [searchTerm, setSearchTerm] = useState("");
+ const [filterType, setFilterType] = useState("all"); // all, secure, insecure
+ const [filterStatus, setFilterStatus] = useState("all"); // all, active, inactive
+ const [sortField, setSortField] = useState("name");
+ const [sortDirection, setSortDirection] = useState("asc");
+ const [showColumnSettings, setShowColumnSettings] = useState(false);
- // Column configuration
- const [columnConfig, setColumnConfig] = useState(() => {
- const defaultConfig = [
- { id: 'name', label: 'Repository', visible: true, order: 0 },
- { id: 'url', label: 'URL', visible: true, order: 1 },
- { id: 'distribution', label: 'Distribution', visible: true, order: 2 },
- { id: 'security', label: 'Security', visible: true, order: 3 },
- { id: 'status', label: 'Status', visible: true, order: 4 },
- { id: 'hostCount', label: 'Hosts', visible: true, order: 5 },
- { id: 'actions', label: 'Actions', visible: true, order: 6 }
- ];
-
- const saved = localStorage.getItem('repositories-column-config');
- if (saved) {
- try {
- return JSON.parse(saved);
- } catch (e) {
- console.error('Failed to parse saved column config:', e);
- }
- }
- return defaultConfig;
- });
+ // Column configuration
+ const [columnConfig, setColumnConfig] = useState(() => {
+ const defaultConfig = [
+ { id: "name", label: "Repository", visible: true, order: 0 },
+ { id: "url", label: "URL", visible: true, order: 1 },
+ { id: "distribution", label: "Distribution", visible: true, order: 2 },
+ { id: "security", label: "Security", visible: true, order: 3 },
+ { id: "status", label: "Status", visible: true, order: 4 },
+ { id: "hostCount", label: "Hosts", visible: true, order: 5 },
+ { id: "actions", label: "Actions", visible: true, order: 6 },
+ ];
- const updateColumnConfig = (newConfig) => {
- setColumnConfig(newConfig);
- localStorage.setItem('repositories-column-config', JSON.stringify(newConfig));
- };
+ const saved = localStorage.getItem("repositories-column-config");
+ if (saved) {
+ try {
+ return JSON.parse(saved);
+ } catch (e) {
+ console.error("Failed to parse saved column config:", e);
+ }
+ }
+ return defaultConfig;
+ });
- // Fetch repositories
- const { data: repositories = [], isLoading, error, refetch, isFetching } = useQuery({
- queryKey: ['repositories'],
- queryFn: () => repositoryAPI.list().then(res => res.data)
- });
+ const updateColumnConfig = (newConfig) => {
+ setColumnConfig(newConfig);
+ localStorage.setItem(
+ "repositories-column-config",
+ JSON.stringify(newConfig),
+ );
+ };
- // Fetch repository statistics
- const { data: stats } = useQuery({
- queryKey: ['repository-stats'],
- queryFn: () => repositoryAPI.getStats().then(res => res.data)
- });
+ // Fetch repositories
+ const {
+ data: repositories = [],
+ isLoading,
+ error,
+ refetch,
+ isFetching,
+ } = useQuery({
+ queryKey: ["repositories"],
+ queryFn: () => repositoryAPI.list().then((res) => res.data),
+ });
- // Get visible columns in order
- const visibleColumns = columnConfig
- .filter(col => col.visible)
- .sort((a, b) => a.order - b.order);
+ // Fetch repository statistics
+ const { data: stats } = useQuery({
+ queryKey: ["repository-stats"],
+ queryFn: () => repositoryAPI.getStats().then((res) => res.data),
+ });
- // Sorting functions
- const handleSort = (field) => {
- if (sortField === field) {
- setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
- } else {
- setSortField(field);
- setSortDirection('asc');
- }
- };
+ // Get visible columns in order
+ const visibleColumns = columnConfig
+ .filter((col) => col.visible)
+ .sort((a, b) => a.order - b.order);
- const getSortIcon = (field) => {
- if (sortField !== field) return
-
+ const downloadBackupCodes = () => {
+ const content = `PatchMon Backup Codes\n\n${backupCodes.map((code, index) => `${index + 1}. ${code}`).join("\n")}\n\nKeep these codes safe! Each code can only be used once.`;
+ const blob = new Blob([content], { type: "text/plain" });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = "patchmon-backup-codes.txt";
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ };
- {/* Status Message */}
- {message.text && (
- Multi-Factor Authentication
-- Add an extra layer of security to your account by enabling two-factor authentication. -
-
-
- )}
+ if (statusLoading) {
+ return (
+
- {message.type === 'success' ? (
-
-
-
- - {message.text} -
-
+
+
+ );
+ }
- {/* TFA Status */}
- {setupStep === 'status' && (
-
-
+ )}
-export default Profile
+ {/* TFA Verification */}
+ {setupStep === "verify" && (
+
-
+ return (
+
-
-
-
-
-
-
-
- - {tfaStatus?.enabled ? 'Two-Factor Authentication Enabled' : 'Two-Factor Authentication Disabled'} -
-- {tfaStatus?.enabled - ? 'Your account is protected with two-factor authentication.' - : 'Add an extra layer of security to your account.' - } -
-
- {tfaStatus?.enabled ? (
-
- ) : (
-
- )}
-
-
+
- )}
+ {/* Status Message */}
+ {message.text && (
+
+
- {tfaStatus?.enabled && (
- + Multi-Factor Authentication +
++ Add an extra layer of security to your account by enabling two-factor + authentication. +
+
-
- )}
- Backup Codes
-- Use these backup codes to access your account if you lose your authenticator device. -
- -
+
+ )}
- {/* TFA Setup */}
- {setupStep === 'setup' && setupMutation.data && (
-
+ {message.type === "success" ? (
+
+
+
+ + {message.text} +
+
-
+ )}
- {/* TFA Verification */}
- {setupStep === 'verify' && (
-
-
- )}
+ {tfaStatus?.enabled && (
+ Setup Two-Factor Authentication
-
-
-
- 
-
-
- - Scan this QR code with your authenticator app -
-
-
+ {/* TFA Status */}
+ {setupStep === "status" && (
+ Manual Entry Key:
-
-
-
- {setupMutation.data.manualEntryKey}
-
-
-
+
-
+
-
+
+
+
+
+
+
+
+ + {tfaStatus?.enabled + ? "Two-Factor Authentication Enabled" + : "Two-Factor Authentication Disabled"} +
++ {tfaStatus?.enabled + ? "Your account is protected with two-factor authentication." + : "Add an extra layer of security to your account."} +
+
+ {tfaStatus?.enabled ? (
+
+ ) : (
+
+ )}
+
+
-
-
-
+
+ )}
+ + Backup Codes +
++ Use these backup codes to access your account if you lose your + authenticator device. +
+ +
-
- )}
+ {/* TFA Setup */}
+ {setupStep === "setup" && setupMutation.data && (
+
-
- Verify Setup
-- Enter the 6-digit code from your authenticator app to complete the setup. -
- -
+
+
+
+ + Setup Two-Factor Authentication +
+
+
- )
-}
+
+
+
- {/* Backup Codes */}
- {setupStep === 'backup-codes' && backupCodes.length > 0 && (
- + Scan this QR code with your authenticator app +
+
-
- )}
+
-
- Backup Codes
-- Save these backup codes in a safe place. Each code can only be used once. -
-
-
-
- {backupCodes.map((code, index) => (
-
-
- {index + 1}.
- {code}
-
- ))}
-
-
-
-
-
+
- {/* Disable TFA */}
- {setupStep === 'disable' && (
- + Manual Entry Key: +
+
+
+
+ {setupMutation.data.manualEntryKey}
+
+
+
-
- )}
-
-
- Disable Two-Factor Authentication
-- Enter your password to disable two-factor authentication. -
- -
+
+
+
+
+ )}
+
+ {/* Backup Codes */}
+ {setupStep === "backup-codes" && backupCodes.length > 0 && (
+
+
+ + Verify Setup +
++ Enter the 6-digit code from your authenticator app to complete the + setup. +
+ +
+
+ )}
+
+ {/* Disable TFA */}
+ {setupStep === "disable" && (
+
+
+ + Backup Codes +
++ Save these backup codes in a safe place. Each code can only be + used once. +
+
+
+
+ {backupCodes.map((code, index) => (
+
+
+
+ {index + 1}.
+
+
+ {code}
+
+
+ ))}
+
+
+
+
+
+
+ )}
+
+
+ + Disable Two-Factor Authentication +
++ Enter your password to disable two-factor authentication. +
+ +
-
-
- );
- }
+ const matchesStatus =
+ filterStatus === "all" ||
+ (filterStatus === "active" && repo.is_active === true) ||
+ (filterStatus === "inactive" && repo.is_active === false);
- if (error) {
- return (
-
-
- );
- }
+ return matchesSearch && matchesType && matchesStatus;
+ });
- return (
-
-
-
- {/* Page Header */}
- setShowColumnSettings(false)}
- onToggleVisibility={toggleColumnVisibility}
- onReorder={reorderColumns}
- onReset={resetColumns}
- />
- )}
-
- );
+ return sorted;
+ }, [
+ repositories,
+ searchTerm,
+ filterType,
+ filterStatus,
+ sortField,
+ sortDirection,
+ ]);
- // Render cell content based on column type
- function renderCellContent(column, repo) {
- switch (column.id) {
- case 'name':
- return (
-
-
+ // Sort repositories
+ const sorted = filtered.sort((a, b) => {
+ let aValue = a[sortField];
+ let bValue = b[sortField];
- {/* Summary Stats */}
-
-
- Repositories
-- Manage and monitor your package repositories -
-
-
-
-
-
+ // Handle special cases
+ if (sortField === "security") {
+ aValue = a.isSecure ? "Secure" : "Insecure";
+ bValue = b.isSecure ? "Secure" : "Insecure";
+ } else if (sortField === "status") {
+ aValue = a.is_active ? "Active" : "Inactive";
+ bValue = b.is_active ? "Active" : "Inactive";
+ }
- {/* Repositories List */}
-
-
-
-
-
-
-
- Total Repositories
-{stats?.totalRepositories || 0}
-
-
-
-
-
-
-
- Active Repositories
-{stats?.activeRepositories || 0}
-
-
-
-
-
-
-
- Secure (HTTPS)
-{stats?.secureRepositories || 0}
-
-
-
-
-
-
- Security Score
-{stats?.securityPercentage || 0}%
-
-
+ if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
+ if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
+ return 0;
+ });
- {/* Column Settings Modal */}
- {showColumnSettings && (
-
-
-
- {/* Empty selection controls area to match packages page spacing */}
-
-
- {/* Table Controls */}
-
-
+ if (typeof aValue === "string") {
+ aValue = aValue.toLowerCase();
+ bValue = bValue.toLowerCase();
+ }
-
- {/* Search */}
-
-
-
-
- {/* Security Filter */}
-
-
-
-
-
-
- {/* Status Filter */}
-
-
-
-
- {/* Columns Button */}
-
-
-
-
- {filteredAndSortedRepositories.length === 0 ? (
-
-
-
- ) : (
- - {repositories?.length === 0 ? 'No repositories found' : 'No repositories match your filters'} -
- {repositories?.length === 0 && ( -- No repositories have been reported by your hosts yet -
- )} -
-
-
-
-
- )}
- | - - | - ))} -
|---|
| - {renderCellContent(column, repo)} - | - ))} -
-
- )
- case 'url':
- return (
-
-
-
- {repo.name}
-
-
- {repo.url}
-
- )
- case 'distribution':
- return (
-
- {repo.distribution}
-
- )
- case 'security':
- const isSecure = repo.isSecure !== undefined ? repo.isSecure : repo.url.startsWith('https://');
- return (
-
- {isSecure ? (
-
- )
- case 'status':
- return (
-
- {repo.is_active ? 'Active' : 'Inactive'}
-
- )
- case 'hostCount':
- return (
-
-
- ) : (
-
-
- )}
-
-
- )
- case 'actions':
- return (
-
- View
-
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+
+ {/* Page Header */}
+ setShowColumnSettings(false)}
+ onToggleVisibility={toggleColumnVisibility}
+ onReorder={reorderColumns}
+ onReset={resetColumns}
+ />
+ )}
+
+ );
+
+ // Render cell content based on column type
+ function renderCellContent(column, repo) {
+ switch (column.id) {
+ case "name":
+ return (
+
+
+
+ {/* Summary Stats */}
+
+
+ + Repositories +
++ Manage and monitor your package repositories +
+
+
+
+
+
+
+ {/* Repositories List */}
+
+
+
+
+
+
+
+ + Total Repositories +
++ {stats?.totalRepositories || 0} +
+
+
+
+
+
+
+
+ + Active Repositories +
++ {stats?.activeRepositories || 0} +
+
+
+
+
+
+
+
+ + Secure (HTTPS) +
++ {stats?.secureRepositories || 0} +
+
+
+
+
+
+
+ + Security Score +
++ {stats?.securityPercentage || 0}% +
+
+
+
+ {/* Column Settings Modal */}
+ {showColumnSettings && (
+
+
+
+ {/* Empty selection controls area to match packages page spacing */}
+
+
+ {/* Table Controls */}
+
+
+
+
+ {/* Search */}
+
+
+
+
+ {/* Security Filter */}
+
+
+
+
+
+
+ {/* Status Filter */}
+
+
+
+
+ {/* Columns Button */}
+
+
+
+
+ {filteredAndSortedRepositories.length === 0 ? (
+
+
+
+ ) : (
+ + {repositories?.length === 0 + ? "No repositories found" + : "No repositories match your filters"} +
+ {repositories?.length === 0 && ( ++ No repositories have been reported by your hosts yet +
+ )} +
+
+
+
+
+ )}
+ | + + | + ))} +
|---|
| + {renderCellContent(column, repo)} + | + ))} +
+
+ );
+ case "url":
+ return (
+
+
+
+ {repo.name}
+
+
+ {repo.url}
+
+ );
+ case "distribution":
+ return (
+
+ {repo.distribution}
+
+ );
+ case "security": {
+ const isSecure =
+ repo.isSecure !== undefined
+ ? repo.isSecure
+ : repo.url.startsWith("https://");
+ return (
+
+ {isSecure ? (
+
+ );
+ }
+ case "status":
+ return (
+
+ {repo.is_active ? "Active" : "Inactive"}
+
+ );
+ case "hostCount":
+ return (
+
+
+ ) : (
+
+
+ )}
+
+
+ );
+ case "actions":
+ return (
+
+ View
+
-
+ );
};
export default Repositories;
diff --git a/frontend/src/pages/RepositoryDetail.jsx b/frontend/src/pages/RepositoryDetail.jsx
index 4a257e2..6e31a1f 100644
--- a/frontend/src/pages/RepositoryDetail.jsx
+++ b/frontend/src/pages/RepositoryDetail.jsx
@@ -1,369 +1,432 @@
-import React, { useState } from 'react';
-import { useParams, Link } from 'react-router-dom';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import {
- ArrowLeft,
- Server,
- Shield,
- ShieldOff,
- AlertTriangle,
- Users,
- Globe,
- Lock,
- Unlock,
- Database,
- Calendar,
- Activity
-} from 'lucide-react';
-import { repositoryAPI } from '../utils/api';
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+ Activity,
+ AlertTriangle,
+ ArrowLeft,
+ Calendar,
+ Database,
+ Globe,
+ Lock,
+ Server,
+ Shield,
+ ShieldOff,
+ Unlock,
+ Users,
+} from "lucide-react";
+import React, { useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { repositoryAPI } from "../utils/api";
const RepositoryDetail = () => {
- const { repositoryId } = useParams();
- const queryClient = useQueryClient();
- const [editMode, setEditMode] = useState(false);
- const [formData, setFormData] = useState({});
+ const { repositoryId } = useParams();
+ const queryClient = useQueryClient();
+ const [editMode, setEditMode] = useState(false);
+ const [formData, setFormData] = useState({});
- // Fetch repository details
- const { data: repository, isLoading, error } = useQuery({
- queryKey: ['repository', repositoryId],
- queryFn: () => repositoryAPI.getById(repositoryId).then(res => res.data),
- enabled: !!repositoryId
- });
+ // Fetch repository details
+ const {
+ data: repository,
+ isLoading,
+ error,
+ } = useQuery({
+ queryKey: ["repository", repositoryId],
+ queryFn: () => repositoryAPI.getById(repositoryId).then((res) => res.data),
+ enabled: !!repositoryId,
+ });
- // Update repository mutation
- const updateRepositoryMutation = useMutation({
- mutationFn: (data) => repositoryAPI.update(repositoryId, data),
- onSuccess: () => {
- queryClient.invalidateQueries(['repository', repositoryId]);
- queryClient.invalidateQueries(['repositories']);
- setEditMode(false);
- }
- });
+ // Update repository mutation
+ const updateRepositoryMutation = useMutation({
+ mutationFn: (data) => repositoryAPI.update(repositoryId, data),
+ onSuccess: () => {
+ queryClient.invalidateQueries(["repository", repositoryId]);
+ queryClient.invalidateQueries(["repositories"]);
+ setEditMode(false);
+ },
+ });
+ const handleEdit = () => {
+ setFormData({
+ name: repository.name,
+ description: repository.description || "",
+ is_active: repository.is_active,
+ priority: repository.priority || "",
+ });
+ setEditMode(true);
+ };
- const handleEdit = () => {
- setFormData({
- name: repository.name,
- description: repository.description || '',
- is_active: repository.is_active,
- priority: repository.priority || ''
- });
- setEditMode(true);
- };
+ const handleSave = () => {
+ updateRepositoryMutation.mutate(formData);
+ };
- const handleSave = () => {
- updateRepositoryMutation.mutate(formData);
- };
+ const handleCancel = () => {
+ setEditMode(false);
+ setFormData({});
+ };
- const handleCancel = () => {
- setEditMode(false);
- setFormData({});
- };
+ if (isLoading) {
+ return (
+
-
+
-
+ return (
+ Column Settings
- -
+
- )
+
+
-
+
- + Column Settings +
+ +
- {columnConfig.map((column, index) => (
-
+ handleDragStart(e, index)}
- onDragOver={handleDragOver}
- onDrop={(e) => handleDrop(e, index)}
- className="flex items-center justify-between p-3 bg-secondary-50 dark:bg-secondary-700 rounded-lg cursor-move hover:bg-secondary-100 dark:hover:bg-secondary-600 transition-colors"
- >
-
- ))}
-
-
-
-
+ {columnConfig.map((column, index) => (
+
- handleDragStart(e, index)}
+ onDragOver={handleDragOver}
+ onDrop={(e) => handleDrop(e, index)}
+ className="flex items-center justify-between p-3 bg-secondary-50 dark:bg-secondary-700 rounded-lg cursor-move hover:bg-secondary-100 dark:hover:bg-secondary-600 transition-colors"
+ >
+
+ ))}
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+ );
+ }
+ if (error) {
+ return (
+
+
+ );
+ }
- if (isLoading) {
- return (
-
+
+
+
+
+
+
+
-
-
- );
- }
+ if (!repository) {
+ return (
+
+
+ );
+ }
- if (error) {
- return (
-
+
+
+
+
+ + Repository not found +
++ The repository you're looking for doesn't exist. +
+
-
- );
- }
+ return (
+
-
-
-
-
-
-
-
+ {/* Header */}
+
+
- if (!repository) {
- return (
-
+
+
+
+
+
+ {repository.isSecure ? (
+
+ + {repository.name} +
+ + {repository.is_active ? "Active" : "Inactive"} + ++ Repository configuration and host assignments +
+
+ {editMode ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+
+
-
- );
- }
+ {/* Repository Information */}
+
-
-
-
-
- Repository not found
-- The repository you're looking for doesn't exist. -
-
+
+
+ + Repository Information +
+
+ {editMode ? (
+
+
+
+
+ setFormData({ ...formData, name: e.target.value })
+ }
+ className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-secondary-700 dark:text-white"
+ />
+
+
+
+
+ setFormData({ ...formData, priority: e.target.value })
+ }
+ className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-secondary-700 dark:text-white"
+ placeholder="Optional priority"
+ />
+
+
+
+