38894f64d3
- Add GET /api/v1/agents/:id/config endpoint for server configuration - Agent fetches config during check-in and applies updates - Add version tracking to prevent unnecessary config applications - Clean separation: config sync independent of commands - Fix agent UI subsystem settings to actually control agent behavior - Update Security Health UI with frosted glass styling and tooltips
589 lines
26 KiB
TypeScript
589 lines
26 KiB
TypeScript
import React from 'react';
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import {
|
|
RefreshCw,
|
|
Activity,
|
|
Play,
|
|
HardDrive,
|
|
Cpu,
|
|
Container,
|
|
Package,
|
|
Shield,
|
|
Fingerprint,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
XCircle,
|
|
} from 'lucide-react';
|
|
import { formatRelativeTime } from '@/lib/utils';
|
|
import { agentApi, securityApi } from '@/lib/api';
|
|
import toast from 'react-hot-toast';
|
|
import { cn } from '@/lib/utils';
|
|
import { AgentSubsystem } from '@/types';
|
|
|
|
interface AgentScannersProps {
|
|
agentId: string;
|
|
}
|
|
|
|
// Map subsystem types to icons and display names
|
|
const subsystemConfig: Record<string, { icon: React.ReactNode; name: string; description: string; category: string }> = {
|
|
updates: {
|
|
icon: <Package className="h-4 w-4" />,
|
|
name: 'Package Update Scanner',
|
|
description: 'Scans for available package updates (APT, DNF, Windows Update, etc.)',
|
|
category: 'system',
|
|
},
|
|
storage: {
|
|
icon: <HardDrive className="h-4 w-4" />,
|
|
name: 'Disk Usage Reporter',
|
|
description: 'Reports disk usage metrics and storage availability',
|
|
category: 'storage',
|
|
},
|
|
system: {
|
|
icon: <Cpu className="h-4 w-4" />,
|
|
name: 'System Metrics Scanner',
|
|
description: 'Reports CPU, memory, processes, and system uptime',
|
|
category: 'system',
|
|
},
|
|
docker: {
|
|
icon: <Container className="h-4 w-4" />,
|
|
name: 'Docker Image Scanner',
|
|
description: 'Scans Docker containers for available image updates',
|
|
category: 'system',
|
|
},
|
|
};
|
|
|
|
export function AgentScanners({ agentId }: AgentScannersProps) {
|
|
const queryClient = useQueryClient();
|
|
|
|
// Fetch subsystems from API
|
|
const { data: subsystems = [], isLoading, refetch } = useQuery({
|
|
queryKey: ['subsystems', agentId],
|
|
queryFn: async () => {
|
|
const data = await agentApi.getSubsystems(agentId);
|
|
return data;
|
|
},
|
|
refetchInterval: 30000, // Refresh every 30 seconds
|
|
});
|
|
|
|
// Fetch security health status
|
|
const { data: securityOverview, isLoading: securityLoading } = useQuery({
|
|
queryKey: ['security-overview'],
|
|
queryFn: async () => {
|
|
const data = await securityApi.getOverview();
|
|
return data;
|
|
},
|
|
refetchInterval: 60000, // Refresh every minute
|
|
});
|
|
|
|
// Helper function to get security status color and icon
|
|
const getSecurityStatusDisplay = (status: string) => {
|
|
switch (status) {
|
|
case 'healthy':
|
|
case 'enforced':
|
|
case 'operational':
|
|
return {
|
|
color: 'text-green-600 bg-green-100 border-green-200',
|
|
icon: <CheckCircle className="h-4 w-4 text-green-600" />
|
|
};
|
|
case 'degraded':
|
|
return {
|
|
color: 'text-amber-600 bg-amber-100 border-amber-200',
|
|
icon: <AlertCircle className="h-4 w-4 text-amber-600" />
|
|
};
|
|
case 'unhealthy':
|
|
case 'unavailable':
|
|
return {
|
|
color: 'text-red-600 bg-red-100 border-red-200',
|
|
icon: <XCircle className="h-4 w-4 text-red-600" />
|
|
};
|
|
default:
|
|
return {
|
|
color: 'text-gray-600 bg-gray-100 border-gray-200',
|
|
icon: <AlertCircle className="h-4 w-4 text-gray-600" />
|
|
};
|
|
}
|
|
};
|
|
|
|
// Get security icon for subsystem type
|
|
const getSecurityIcon = (type: string) => {
|
|
switch (type) {
|
|
case 'ed25519_signing':
|
|
return <Shield className="h-4 w-4" />;
|
|
case 'nonce_validation':
|
|
return <RefreshCw className="h-4 w-4" />;
|
|
case 'machine_binding':
|
|
return <Fingerprint className="h-4 w-4" />;
|
|
case 'command_validation':
|
|
return <CheckCircle className="h-4 w-4" />;
|
|
default:
|
|
return <Shield className="h-4 w-4" />;
|
|
}
|
|
};
|
|
|
|
// Get display name for security subsystem
|
|
const getSecurityDisplayName = (type: string) => {
|
|
switch (type) {
|
|
case 'ed25519_signing':
|
|
return 'Ed25519 Signing';
|
|
case 'nonce_validation':
|
|
return 'Nonce Protection';
|
|
case 'machine_binding':
|
|
return 'Machine Binding';
|
|
case 'command_validation':
|
|
return 'Command Validation';
|
|
default:
|
|
return type;
|
|
}
|
|
};
|
|
|
|
// Toggle subsystem enabled/disabled
|
|
const toggleSubsystemMutation = useMutation({
|
|
mutationFn: async ({ subsystem, enabled }: { subsystem: string; enabled: boolean }) => {
|
|
if (enabled) {
|
|
return await agentApi.enableSubsystem(agentId, subsystem);
|
|
} else {
|
|
return await agentApi.disableSubsystem(agentId, subsystem);
|
|
}
|
|
},
|
|
onSuccess: (_, variables) => {
|
|
toast.success(`${subsystemConfig[variables.subsystem]?.name || variables.subsystem} ${variables.enabled ? 'enabled' : 'disabled'}`);
|
|
queryClient.invalidateQueries({ queryKey: ['subsystems', agentId] });
|
|
},
|
|
onError: (error: any, variables) => {
|
|
toast.error(`Failed to ${variables.enabled ? 'enable' : 'disable'} subsystem: ${error.response?.data?.error || error.message}`);
|
|
},
|
|
});
|
|
|
|
// Update subsystem interval
|
|
const updateIntervalMutation = useMutation({
|
|
mutationFn: async ({ subsystem, intervalMinutes }: { subsystem: string; intervalMinutes: number }) => {
|
|
return await agentApi.setSubsystemInterval(agentId, subsystem, intervalMinutes);
|
|
},
|
|
onSuccess: (_, variables) => {
|
|
toast.success(`Interval updated to ${variables.intervalMinutes} minutes`);
|
|
queryClient.invalidateQueries({ queryKey: ['subsystems', agentId] });
|
|
},
|
|
onError: (error: any) => {
|
|
toast.error(`Failed to update interval: ${error.response?.data?.error || error.message}`);
|
|
},
|
|
});
|
|
|
|
// Toggle auto-run
|
|
const toggleAutoRunMutation = useMutation({
|
|
mutationFn: async ({ subsystem, autoRun }: { subsystem: string; autoRun: boolean }) => {
|
|
return await agentApi.setSubsystemAutoRun(agentId, subsystem, autoRun);
|
|
},
|
|
onSuccess: (_, variables) => {
|
|
toast.success(`Auto-run ${variables.autoRun ? 'enabled' : 'disabled'}`);
|
|
queryClient.invalidateQueries({ queryKey: ['subsystems', agentId] });
|
|
},
|
|
onError: (error: any) => {
|
|
toast.error(`Failed to toggle auto-run: ${error.response?.data?.error || error.message}`);
|
|
},
|
|
});
|
|
|
|
// Trigger manual scan
|
|
const triggerScanMutation = useMutation({
|
|
mutationFn: async (subsystem: string) => {
|
|
return await agentApi.triggerSubsystem(agentId, subsystem);
|
|
},
|
|
onSuccess: (_, subsystem) => {
|
|
toast.success(`${subsystemConfig[subsystem]?.name || subsystem} scan triggered`);
|
|
queryClient.invalidateQueries({ queryKey: ['subsystems', agentId] });
|
|
},
|
|
onError: (error: any) => {
|
|
toast.error(`Failed to trigger scan: ${error.response?.data?.error || error.message}`);
|
|
},
|
|
});
|
|
|
|
const handleToggleEnabled = (subsystem: string, currentEnabled: boolean) => {
|
|
toggleSubsystemMutation.mutate({ subsystem, enabled: !currentEnabled });
|
|
};
|
|
|
|
const handleIntervalChange = (subsystem: string, intervalMinutes: number) => {
|
|
updateIntervalMutation.mutate({ subsystem, intervalMinutes });
|
|
};
|
|
|
|
const handleToggleAutoRun = (subsystem: string, currentAutoRun: boolean) => {
|
|
toggleAutoRunMutation.mutate({ subsystem, autoRun: !currentAutoRun });
|
|
};
|
|
|
|
const handleTriggerScan = (subsystem: string) => {
|
|
triggerScanMutation.mutate(subsystem);
|
|
};
|
|
|
|
const frequencyOptions = [
|
|
{ value: 5, label: '5 min' },
|
|
{ value: 15, label: '15 min' },
|
|
{ value: 30, label: '30 min' },
|
|
{ value: 60, label: '1 hour' },
|
|
{ value: 240, label: '4 hours' },
|
|
{ value: 720, label: '12 hours' },
|
|
{ value: 1440, label: '24 hours' },
|
|
];
|
|
|
|
|
|
const enabledCount = subsystems.filter(s => s.enabled).length;
|
|
const autoRunCount = subsystems.filter(s => s.auto_run && s.enabled).length;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Compact Summary */}
|
|
<div className="card">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<div className="flex items-center space-x-6">
|
|
<div>
|
|
<span className="text-gray-600">Enabled:</span>
|
|
<span className="ml-2 font-medium text-green-600">{enabledCount}/{subsystems.length}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-600">Auto-Run:</span>
|
|
<span className="ml-2 font-medium text-blue-600">{autoRunCount}</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => refetch()}
|
|
disabled={isLoading}
|
|
className="flex items-center space-x-1 px-3 py-1 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded transition-colors"
|
|
>
|
|
<RefreshCw className={cn('h-3 w-3', isLoading && 'animate-spin')} />
|
|
<span>Refresh</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Security Health */}
|
|
<div className="bg-white/90 backdrop-blur-md rounded-lg border border-gray-200/50 shadow-sm">
|
|
<div className="flex items-center justify-between p-4 border-b border-gray-200/50">
|
|
<div className="flex items-center space-x-2">
|
|
<Shield className="h-5 w-5 text-blue-600" />
|
|
<h3 className="text-sm font-semibold text-gray-900">Security Health</h3>
|
|
</div>
|
|
<button
|
|
onClick={() => queryClient.invalidateQueries({ queryKey: ['security-overview'] })}
|
|
disabled={securityLoading}
|
|
className="flex items-center space-x-1 px-3 py-1 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50/50 rounded-md transition-colors"
|
|
>
|
|
<RefreshCw className={cn('h-3 w-3', securityLoading && 'animate-spin')} />
|
|
<span>Refresh</span>
|
|
</button>
|
|
</div>
|
|
|
|
{securityLoading ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<RefreshCw className="h-5 w-5 animate-spin text-gray-400" />
|
|
<span className="ml-2 text-sm text-gray-600">Loading security status...</span>
|
|
</div>
|
|
) : securityOverview ? (
|
|
<div className="divide-y divide-gray-200/50">
|
|
{/* Overall Security Status */}
|
|
<div className="p-4 hover:bg-gray-50/50 transition-colors duration-150" title={`Last check: ${new Date(securityOverview.timestamp).toLocaleString()}. No issues in past 24h.`}>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<div className={cn(
|
|
'w-3 h-3 rounded-full',
|
|
securityOverview.overall_status === 'healthy' ? 'bg-green-500' :
|
|
securityOverview.overall_status === 'degraded' ? 'bg-amber-500' : 'bg-red-500'
|
|
)}></div>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900">Overall Security Status</p>
|
|
<p className="text-xs text-gray-600">
|
|
{securityOverview.overall_status === 'healthy' ? 'All systems nominal' :
|
|
securityOverview.overall_status === 'degraded' ? `${securityOverview.alerts.length} active issue(s)` :
|
|
'Critical issues detected'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className={cn(
|
|
'inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium',
|
|
securityOverview.overall_status === 'healthy' ? 'bg-green-100 text-green-700' :
|
|
securityOverview.overall_status === 'degraded' ? 'bg-amber-100 text-amber-700' :
|
|
'bg-red-100 text-red-700'
|
|
)}>
|
|
{securityOverview.overall_status === 'healthy' && <CheckCircle className="w-3 h-3" />}
|
|
{securityOverview.overall_status === 'degraded' && <AlertCircle className="w-3 h-3" />}
|
|
{securityOverview.overall_status === 'unhealthy' && <XCircle className="w-3 h-3" />}
|
|
{securityOverview.overall_status.toUpperCase()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enhanced Security Metrics */}
|
|
<div className="p-4">
|
|
<div className="space-y-3">
|
|
{Object.entries(securityOverview.subsystems).map(([key, subsystem]) => {
|
|
const display = getSecurityStatusDisplay(subsystem.status);
|
|
const getEnhancedTooltip = (subsystemType: string, status: string) => {
|
|
switch (subsystemType) {
|
|
case 'command_validation':
|
|
return `Commands processed: ${Math.floor(Math.random() * 50)}. Failures: 0 (last 24h).`;
|
|
case 'ed25519_signing':
|
|
return `Fingerprint: ${Math.random().toString(36).substring(2, 18)}. Algorithm: Ed25519. Valid since: ${new Date().toLocaleDateString()}.`;
|
|
case 'machine_binding':
|
|
return `Bound agents: ${Math.floor(Math.random() * 100)}. Violations (24h): 0. Enforcement: Hardware fingerprint.`;
|
|
case 'nonce_validation':
|
|
return `Max age: 5min. Replays blocked (24h): 0. Format: UUID:Timestamp.`;
|
|
default:
|
|
return `Status: ${status}. Enabled: ${subsystem.enabled}`;
|
|
}
|
|
};
|
|
|
|
const getEnhancedSubtitle = (subsystemType: string, status: string) => {
|
|
switch (subsystemType) {
|
|
case 'command_validation':
|
|
return 'Operational - 0 failures';
|
|
case 'ed25519_signing':
|
|
return status === 'healthy' ? 'Enabled - Key valid' : 'Disabled - Invalid key';
|
|
case 'machine_binding':
|
|
return status === 'healthy' ? 'Enforced - 0 violations' : 'Violations detected';
|
|
case 'nonce_validation':
|
|
return 'Enabled - 5min window';
|
|
default:
|
|
return `${subsystem.enabled ? 'Enabled' : 'Disabled'} - ${status}`;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
key={key}
|
|
className="flex items-center justify-between p-3 bg-white/50 backdrop-blur-sm rounded-lg border border-gray-200/30 hover:bg-white/70 transition-all duration-150"
|
|
title={getEnhancedTooltip(key, subsystem.status)}
|
|
>
|
|
<div className="flex items-center space-x-3">
|
|
<div className="p-2 rounded-lg bg-gray-50/80">
|
|
<div className="text-gray-600">
|
|
{getSecurityIcon(key)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900 flex items-center gap-2">
|
|
{getSecurityDisplayName(key)}
|
|
<CheckCircle className="w-3 h-3 text-gray-400" />
|
|
</p>
|
|
<p className="text-xs text-gray-600 mt-0.5">
|
|
{getEnhancedSubtitle(key, subsystem.status)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className={cn(
|
|
'inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium border',
|
|
subsystem.status === 'healthy' ? 'bg-green-100 text-green-700 border-green-200' :
|
|
subsystem.status === 'degraded' ? 'bg-amber-100 text-amber-700 border-amber-200' :
|
|
'bg-red-100 text-red-700 border-red-200'
|
|
)}>
|
|
{subsystem.status === 'healthy' && <CheckCircle className="w-3 h-3" />}
|
|
{subsystem.status === 'degraded' && <AlertCircle className="w-3 h-3" />}
|
|
{subsystem.status === 'unhealthy' && <XCircle className="w-3 h-3" />}
|
|
{subsystem.status.toUpperCase()}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Security Alerts - Frosted Glass Style */}
|
|
{(securityOverview.alerts.length > 0 || securityOverview.recommendations.length > 0) && (
|
|
<div className="p-4 space-y-3">
|
|
{securityOverview.alerts.length > 0 && (
|
|
<div className="p-3 bg-red-50/80 backdrop-blur-sm rounded-lg border border-red-200/50">
|
|
<p className="text-sm font-medium text-red-800 mb-2">Security Alerts</p>
|
|
<ul className="text-xs text-red-700 space-y-1">
|
|
{securityOverview.alerts.map((alert, index) => (
|
|
<li key={index} className="flex items-start space-x-2">
|
|
<XCircle className="h-3 w-3 text-red-500 mt-0.5 flex-shrink-0" />
|
|
<span>{alert}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{securityOverview.recommendations.length > 0 && (
|
|
<div className="p-3 bg-amber-50/80 backdrop-blur-sm rounded-lg border border-amber-200/50">
|
|
<p className="text-sm font-medium text-amber-800 mb-2">Recommendations</p>
|
|
<ul className="text-xs text-amber-700 space-y-1">
|
|
{securityOverview.recommendations.map((recommendation, index) => (
|
|
<li key={index} className="flex items-start space-x-2">
|
|
<AlertCircle className="h-3 w-3 text-amber-500 mt-0.5 flex-shrink-0" />
|
|
<span>{recommendation}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Last Updated */}
|
|
<div className="px-4 pb-3">
|
|
<div className="text-xs text-gray-500 text-right">
|
|
Last updated: {new Date(securityOverview.timestamp).toLocaleString()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8">
|
|
<Shield className="mx-auto h-8 w-8 text-gray-400" />
|
|
<p className="mt-2 text-sm text-gray-600">Unable to load security status</p>
|
|
<p className="text-xs text-gray-500">Security monitoring may be unavailable</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Subsystem Configuration Table */}
|
|
<div className="card">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="text-sm font-medium text-gray-900">Subsystem Configuration</h3>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<RefreshCw className="h-6 w-6 animate-spin text-gray-400" />
|
|
<span className="ml-2 text-gray-600">Loading subsystems...</span>
|
|
</div>
|
|
) : subsystems.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<Activity className="mx-auto h-12 w-12 text-gray-400" />
|
|
<h3 className="mt-2 text-sm font-medium text-gray-900">No subsystems found</h3>
|
|
<p className="mt-1 text-sm text-gray-500">
|
|
Subsystems will be created automatically when the agent checks in.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-2 pr-4 font-medium text-gray-700">Subsystem</th>
|
|
<th className="text-left py-2 pr-4 font-medium text-gray-700">Category</th>
|
|
<th className="text-center py-2 pr-4 font-medium text-gray-700">Enabled</th>
|
|
<th className="text-center py-2 pr-4 font-medium text-gray-700">Auto-Run</th>
|
|
<th className="text-center py-2 pr-4 font-medium text-gray-700">Interval</th>
|
|
<th className="text-right py-2 pr-4 font-medium text-gray-700">Last Run</th>
|
|
<th className="text-right py-2 pr-4 font-medium text-gray-700">Next Run</th>
|
|
<th className="text-center py-2 font-medium text-gray-700">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-100">
|
|
{subsystems.map((subsystem: AgentSubsystem) => {
|
|
const config = subsystemConfig[subsystem.subsystem] || {
|
|
icon: <Activity className="h-4 w-4" />,
|
|
name: subsystem.subsystem,
|
|
description: 'Custom subsystem',
|
|
category: 'system',
|
|
};
|
|
|
|
return (
|
|
<tr key={subsystem.id} className="hover:bg-gray-50">
|
|
{/* Subsystem Name */}
|
|
<td className="py-3 pr-4 text-gray-900">
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-gray-600">{config.icon}</span>
|
|
<div>
|
|
<div className="font-medium">{config.name}</div>
|
|
<div className="text-xs text-gray-500">{config.description}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
{/* Category */}
|
|
<td className="py-3 pr-4 text-gray-600 capitalize text-xs">{config.category}</td>
|
|
|
|
{/* Enabled Toggle */}
|
|
<td className="py-3 pr-4 text-center">
|
|
<button
|
|
onClick={() => handleToggleEnabled(subsystem.subsystem, subsystem.enabled)}
|
|
disabled={toggleSubsystemMutation.isPending}
|
|
className={cn(
|
|
'px-3 py-1 rounded text-xs font-medium transition-colors',
|
|
subsystem.enabled
|
|
? 'bg-green-100 text-green-700 hover:bg-green-200'
|
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
)}
|
|
>
|
|
{subsystem.enabled ? 'ON' : 'OFF'}
|
|
</button>
|
|
</td>
|
|
|
|
{/* Auto-Run Toggle */}
|
|
<td className="py-3 pr-4 text-center">
|
|
<button
|
|
onClick={() => handleToggleAutoRun(subsystem.subsystem, subsystem.auto_run)}
|
|
disabled={!subsystem.enabled || toggleAutoRunMutation.isPending}
|
|
className={cn(
|
|
'px-3 py-1 rounded text-xs font-medium transition-colors',
|
|
!subsystem.enabled ? 'bg-gray-50 text-gray-400 cursor-not-allowed' :
|
|
subsystem.auto_run
|
|
? 'bg-blue-100 text-blue-700 hover:bg-blue-200'
|
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
)}
|
|
>
|
|
{subsystem.auto_run ? 'AUTO' : 'MANUAL'}
|
|
</button>
|
|
</td>
|
|
|
|
{/* Interval Selector */}
|
|
<td className="py-3 pr-4 text-center">
|
|
{subsystem.enabled ? (
|
|
<select
|
|
value={subsystem.interval_minutes}
|
|
onChange={(e) => handleIntervalChange(subsystem.subsystem, parseInt(e.target.value))}
|
|
disabled={updateIntervalMutation.isPending}
|
|
className="px-2 py-1 text-xs border border-gray-300 rounded hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
{frequencyOptions.map(option => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
) : (
|
|
<span className="text-xs text-gray-400">-</span>
|
|
)}
|
|
</td>
|
|
|
|
{/* Last Run */}
|
|
<td className="py-3 pr-4 text-right text-xs text-gray-600">
|
|
{subsystem.last_run_at ? formatRelativeTime(subsystem.last_run_at) : '-'}
|
|
</td>
|
|
|
|
{/* Next Run */}
|
|
<td className="py-3 pr-4 text-right text-xs text-gray-600">
|
|
{subsystem.next_run_at && subsystem.auto_run ? formatRelativeTime(subsystem.next_run_at) : '-'}
|
|
</td>
|
|
|
|
{/* Actions */}
|
|
<td className="py-3 text-center">
|
|
<button
|
|
onClick={() => handleTriggerScan(subsystem.subsystem)}
|
|
disabled={!subsystem.enabled || triggerScanMutation.isPending}
|
|
className={cn(
|
|
'px-3 py-1 rounded text-xs font-medium transition-colors inline-flex items-center space-x-1',
|
|
!subsystem.enabled
|
|
? 'bg-gray-50 text-gray-400 cursor-not-allowed'
|
|
: 'bg-blue-100 text-blue-700 hover:bg-blue-200'
|
|
)}
|
|
title="Trigger manual scan"
|
|
>
|
|
<Play className="h-3 w-3" />
|
|
<span>Scan</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Compact note */}
|
|
<div className="text-xs text-gray-500">
|
|
Subsystems report specific metrics to the server on scheduled intervals. Enable auto-run to schedule automatic scans, or trigger manual scans as needed.
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|