mirror of
https://github.com/shankar0123/certctl.git
synced 2026-06-08 12:58:51 +00:00
feat(gui): add discovery triage, network scan management, and approval workflow pages (M24)
Three new GUI surfaces closing the backend-to-frontend gap for V2: - Discovery triage page: summary stats bar, DataTable with claim/dismiss actions, status/agent filters, collapsible scan history panel - Network scan target management: CRUD with create modal, enable/disable toggle, Scan Now button, last scan results display - Jobs page approval workflow: Approve/Reject buttons for AwaitingApproval jobs, rejection reason modal, pending approval banner with count, AwaitingApproval/AwaitingCSR added to status filter dropdown Also adds 13 new frontend tests, 4 API types, 12 API client functions, 2 sidebar nav items, 2 routes, and discovery status badge styles. Docs updated: README, architecture, quickstart, demo-advanced, CLAUDE.md, roadmap. Version bumped to v2.0.4. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Shankar
@@ -61,6 +61,18 @@ import {
|
||||
getJobTrends,
|
||||
getIssuanceRate,
|
||||
getMetrics,
|
||||
getDiscoveredCertificates,
|
||||
getDiscoveredCertificate,
|
||||
claimDiscoveredCertificate,
|
||||
dismissDiscoveredCertificate,
|
||||
getDiscoveryScans,
|
||||
getDiscoverySummary,
|
||||
getNetworkScanTargets,
|
||||
getNetworkScanTarget,
|
||||
createNetworkScanTarget,
|
||||
updateNetworkScanTarget,
|
||||
deleteNetworkScanTarget,
|
||||
triggerNetworkScan,
|
||||
} from './client';
|
||||
|
||||
// Mock global fetch
|
||||
@@ -686,4 +698,104 @@ describe('API Client', () => {
|
||||
expect(result.status).toBe('ok');
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Discovery ────────────────────────────────────
|
||||
|
||||
describe('Discovery', () => {
|
||||
it('getDiscoveredCertificates calls with params', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ data: [], total: 0, page: 1, per_page: 50 }));
|
||||
await getDiscoveredCertificates({ status: 'Unmanaged' });
|
||||
expect(mockFetch.mock.calls[0][0]).toContain('/api/v1/discovered-certificates');
|
||||
expect(mockFetch.mock.calls[0][0]).toContain('status=Unmanaged');
|
||||
});
|
||||
|
||||
it('getDiscoveredCertificate calls with id', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ id: 'dc-1', common_name: 'test.example.com' }));
|
||||
const result = await getDiscoveredCertificate('dc-1');
|
||||
expect(mockFetch.mock.calls[0][0]).toBe('/api/v1/discovered-certificates/dc-1');
|
||||
expect(result.common_name).toBe('test.example.com');
|
||||
});
|
||||
|
||||
it('claimDiscoveredCertificate sends POST with managed cert id', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ message: 'claimed' }));
|
||||
await claimDiscoveredCertificate('dc-1', 'mc-api-prod');
|
||||
const [url, init] = mockFetch.mock.calls[0];
|
||||
expect(url).toBe('/api/v1/discovered-certificates/dc-1/claim');
|
||||
expect(init.method).toBe('POST');
|
||||
expect(JSON.parse(init.body)).toEqual({ managed_certificate_id: 'mc-api-prod' });
|
||||
});
|
||||
|
||||
it('dismissDiscoveredCertificate sends POST', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ message: 'dismissed' }));
|
||||
await dismissDiscoveredCertificate('dc-1');
|
||||
const [url, init] = mockFetch.mock.calls[0];
|
||||
expect(url).toBe('/api/v1/discovered-certificates/dc-1/dismiss');
|
||||
expect(init.method).toBe('POST');
|
||||
});
|
||||
|
||||
it('getDiscoveryScans calls endpoint', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ data: [], total: 0, page: 1, per_page: 50 }));
|
||||
await getDiscoveryScans();
|
||||
expect(mockFetch.mock.calls[0][0]).toContain('/api/v1/discovery-scans');
|
||||
});
|
||||
|
||||
it('getDiscoverySummary calls endpoint', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ Unmanaged: 5, Managed: 3, Dismissed: 1 }));
|
||||
const result = await getDiscoverySummary();
|
||||
expect(mockFetch.mock.calls[0][0]).toBe('/api/v1/discovery-summary');
|
||||
expect(result.Unmanaged).toBe(5);
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Network Scan Targets ────────────────────────
|
||||
|
||||
describe('Network Scan Targets', () => {
|
||||
it('getNetworkScanTargets calls endpoint', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ data: [], total: 0, page: 1, per_page: 50 }));
|
||||
await getNetworkScanTargets();
|
||||
expect(mockFetch.mock.calls[0][0]).toContain('/api/v1/network-scan-targets');
|
||||
});
|
||||
|
||||
it('getNetworkScanTarget calls with id', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ id: 'nst-1', name: 'DMZ' }));
|
||||
const result = await getNetworkScanTarget('nst-1');
|
||||
expect(mockFetch.mock.calls[0][0]).toBe('/api/v1/network-scan-targets/nst-1');
|
||||
expect(result.name).toBe('DMZ');
|
||||
});
|
||||
|
||||
it('createNetworkScanTarget sends POST', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ id: 'nst-new', name: 'Production' }));
|
||||
await createNetworkScanTarget({ name: 'Production', cidrs: ['10.0.0.0/24'], ports: [443] });
|
||||
const [url, init] = mockFetch.mock.calls[0];
|
||||
expect(url).toBe('/api/v1/network-scan-targets');
|
||||
expect(init.method).toBe('POST');
|
||||
const body = JSON.parse(init.body);
|
||||
expect(body.name).toBe('Production');
|
||||
expect(body.cidrs).toEqual(['10.0.0.0/24']);
|
||||
});
|
||||
|
||||
it('updateNetworkScanTarget sends PUT', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ id: 'nst-1', enabled: false }));
|
||||
await updateNetworkScanTarget('nst-1', { enabled: false });
|
||||
const [url, init] = mockFetch.mock.calls[0];
|
||||
expect(url).toBe('/api/v1/network-scan-targets/nst-1');
|
||||
expect(init.method).toBe('PUT');
|
||||
});
|
||||
|
||||
it('deleteNetworkScanTarget sends DELETE', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({}, 204));
|
||||
await deleteNetworkScanTarget('nst-1');
|
||||
const [url, init] = mockFetch.mock.calls[0];
|
||||
expect(url).toBe('/api/v1/network-scan-targets/nst-1');
|
||||
expect(init.method).toBe('DELETE');
|
||||
});
|
||||
|
||||
it('triggerNetworkScan sends POST to scan endpoint', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ message: 'scan triggered' }));
|
||||
await triggerNetworkScan('nst-1');
|
||||
const [url, init] = mockFetch.mock.calls[0];
|
||||
expect(url).toBe('/api/v1/network-scan-targets/nst-1/scan');
|
||||
expect(init.method).toBe('POST');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
+48
-1
@@ -1,4 +1,4 @@
|
||||
import type { Certificate, CertificateVersion, Agent, Job, Notification, AuditEvent, PolicyRule, PolicyViolation, Issuer, Target, CertificateProfile, Owner, Team, AgentGroup, PaginatedResponse, DashboardSummary, CertificateStatusCount, ExpirationBucket, JobTrendDataPoint, IssuanceRateDataPoint, MetricsResponse } from './types';
|
||||
import type { Certificate, CertificateVersion, Agent, Job, Notification, AuditEvent, PolicyRule, PolicyViolation, Issuer, Target, CertificateProfile, Owner, Team, AgentGroup, PaginatedResponse, DashboardSummary, CertificateStatusCount, ExpirationBucket, JobTrendDataPoint, IssuanceRateDataPoint, MetricsResponse, DiscoveredCertificate, DiscoveryScan, DiscoverySummary, NetworkScanTarget } from './types';
|
||||
|
||||
const BASE = '/api/v1';
|
||||
|
||||
@@ -258,6 +258,53 @@ export const approveRenewal = (jobId: string) =>
|
||||
export const rejectRenewal = (jobId: string, reason: string) =>
|
||||
fetchJSON<{ message: string }>(`${BASE}/jobs/${jobId}/reject`, { method: 'POST', body: JSON.stringify({ reason }) });
|
||||
|
||||
// Discovery
|
||||
export const getDiscoveredCertificates = (params: Record<string, string> = {}) => {
|
||||
const qs = new URLSearchParams({ page: '1', per_page: '50', ...params }).toString();
|
||||
return fetchJSON<PaginatedResponse<DiscoveredCertificate>>(`${BASE}/discovered-certificates?${qs}`);
|
||||
};
|
||||
|
||||
export const getDiscoveredCertificate = (id: string) =>
|
||||
fetchJSON<DiscoveredCertificate>(`${BASE}/discovered-certificates/${id}`);
|
||||
|
||||
export const claimDiscoveredCertificate = (id: string, managedCertificateId: string) =>
|
||||
fetchJSON<{ message: string }>(`${BASE}/discovered-certificates/${id}/claim`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ managed_certificate_id: managedCertificateId }),
|
||||
});
|
||||
|
||||
export const dismissDiscoveredCertificate = (id: string) =>
|
||||
fetchJSON<{ message: string }>(`${BASE}/discovered-certificates/${id}/dismiss`, { method: 'POST' });
|
||||
|
||||
export const getDiscoveryScans = (params: Record<string, string> = {}) => {
|
||||
const qs = new URLSearchParams({ page: '1', per_page: '50', ...params }).toString();
|
||||
return fetchJSON<PaginatedResponse<DiscoveryScan>>(`${BASE}/discovery-scans?${qs}`);
|
||||
};
|
||||
|
||||
export const getDiscoverySummary = () =>
|
||||
fetchJSON<DiscoverySummary>(`${BASE}/discovery-summary`);
|
||||
|
||||
// Network Scan Targets
|
||||
export const getNetworkScanTargets = (params: Record<string, string> = {}) => {
|
||||
const qs = new URLSearchParams({ page: '1', per_page: '50', ...params }).toString();
|
||||
return fetchJSON<PaginatedResponse<NetworkScanTarget>>(`${BASE}/network-scan-targets?${qs}`);
|
||||
};
|
||||
|
||||
export const getNetworkScanTarget = (id: string) =>
|
||||
fetchJSON<NetworkScanTarget>(`${BASE}/network-scan-targets/${id}`);
|
||||
|
||||
export const createNetworkScanTarget = (data: Partial<NetworkScanTarget>) =>
|
||||
fetchJSON<NetworkScanTarget>(`${BASE}/network-scan-targets`, { method: 'POST', body: JSON.stringify(data) });
|
||||
|
||||
export const updateNetworkScanTarget = (id: string, data: Partial<NetworkScanTarget>) =>
|
||||
fetchJSON<NetworkScanTarget>(`${BASE}/network-scan-targets/${id}`, { method: 'PUT', body: JSON.stringify(data) });
|
||||
|
||||
export const deleteNetworkScanTarget = (id: string) =>
|
||||
fetchJSON<{ message: string }>(`${BASE}/network-scan-targets/${id}`, { method: 'DELETE' });
|
||||
|
||||
export const triggerNetworkScan = (id: string) =>
|
||||
fetchJSON<{ message: string }>(`${BASE}/network-scan-targets/${id}/scan`, { method: 'POST' });
|
||||
|
||||
// Stats
|
||||
export const getDashboardSummary = () =>
|
||||
fetchJSON<DashboardSummary>(`${BASE}/stats/summary`);
|
||||
|
||||
@@ -244,6 +244,67 @@ export interface IssuanceRateDataPoint {
|
||||
issued_count: number;
|
||||
}
|
||||
|
||||
// Discovery types
|
||||
export interface DiscoveredCertificate {
|
||||
id: string;
|
||||
fingerprint_sha256: string;
|
||||
common_name: string;
|
||||
sans: string[];
|
||||
serial_number: string;
|
||||
issuer_dn: string;
|
||||
subject_dn: string;
|
||||
not_before?: string;
|
||||
not_after?: string;
|
||||
key_algorithm: string;
|
||||
key_size: number;
|
||||
is_ca: boolean;
|
||||
source_path: string;
|
||||
source_format: string;
|
||||
agent_id: string;
|
||||
discovery_scan_id?: string;
|
||||
managed_certificate_id?: string;
|
||||
status: string;
|
||||
first_seen_at: string;
|
||||
last_seen_at: string;
|
||||
dismissed_at?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface DiscoveryScan {
|
||||
id: string;
|
||||
agent_id: string;
|
||||
directories: string[];
|
||||
certificates_found: number;
|
||||
certificates_new: number;
|
||||
errors_count: number;
|
||||
scan_duration_ms: number;
|
||||
started_at: string;
|
||||
completed_at?: string;
|
||||
}
|
||||
|
||||
export interface DiscoverySummary {
|
||||
Unmanaged: number;
|
||||
Managed: number;
|
||||
Dismissed: number;
|
||||
}
|
||||
|
||||
// Network scan types
|
||||
export interface NetworkScanTarget {
|
||||
id: string;
|
||||
name: string;
|
||||
cidrs: string[];
|
||||
ports: number[];
|
||||
enabled: boolean;
|
||||
scan_interval_hours: number;
|
||||
timeout_ms: number;
|
||||
last_scan_at?: string;
|
||||
last_scan_duration_ms?: number;
|
||||
last_scan_certs_found?: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface MetricsResponse {
|
||||
gauge: {
|
||||
certificate_total: number;
|
||||
|
||||
@@ -16,6 +16,8 @@ const nav = [
|
||||
{ to: '/owners', label: 'Owners', icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z' },
|
||||
{ to: '/teams', label: 'Teams', icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z' },
|
||||
{ to: '/agent-groups', label: 'Agent Groups', icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10 M9 3v2m6-2v2' },
|
||||
{ to: '/discovery', label: 'Discovery', icon: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' },
|
||||
{ to: '/network-scans', label: 'Network Scans', icon: 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z M9 12l2 2 4-4' },
|
||||
{ to: '/short-lived', label: 'Short-Lived', icon: 'M13 10V3L4 14h7v7l9-11h-7z' },
|
||||
{ to: '/audit', label: 'Audit Trail', icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z' },
|
||||
];
|
||||
@@ -67,7 +69,7 @@ export default function Layout() {
|
||||
</nav>
|
||||
|
||||
<div className="px-5 py-3 border-t border-white/10 flex items-center justify-between">
|
||||
<span className="text-[10px] text-brand-300/60 font-mono">v2.0.3</span>
|
||||
<span className="text-[10px] text-brand-300/60 font-mono">v2.0.4</span>
|
||||
{authRequired && (
|
||||
<button
|
||||
onClick={logout}
|
||||
|
||||
@@ -19,6 +19,10 @@ const statusStyles: Record<string, string> = {
|
||||
Online: 'badge-success',
|
||||
Offline: 'badge-danger',
|
||||
Stale: 'badge-warning',
|
||||
// Discovery statuses
|
||||
Unmanaged: 'badge-warning',
|
||||
Managed: 'badge-success',
|
||||
Dismissed: 'badge-neutral',
|
||||
// Notification statuses
|
||||
sent: 'badge-success',
|
||||
pending: 'badge-warning',
|
||||
|
||||
@@ -23,6 +23,8 @@ import AgentGroupsPage from './pages/AgentGroupsPage';
|
||||
import AuditPage from './pages/AuditPage';
|
||||
import ShortLivedPage from './pages/ShortLivedPage';
|
||||
import AgentFleetPage from './pages/AgentFleetPage';
|
||||
import DiscoveryPage from './pages/DiscoveryPage';
|
||||
import NetworkScanPage from './pages/NetworkScanPage';
|
||||
import './index.css';
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
@@ -61,6 +63,8 @@ createRoot(document.getElementById('root')!).render(
|
||||
<Route path="agent-groups" element={<AgentGroupsPage />} />
|
||||
<Route path="audit" element={<AuditPage />} />
|
||||
<Route path="short-lived" element={<ShortLivedPage />} />
|
||||
<Route path="discovery" element={<DiscoveryPage />} />
|
||||
<Route path="network-scans" element={<NetworkScanPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
||||
@@ -0,0 +1,317 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
getDiscoveredCertificates,
|
||||
getDiscoverySummary,
|
||||
getDiscoveryScans,
|
||||
claimDiscoveredCertificate,
|
||||
dismissDiscoveredCertificate,
|
||||
getAgents,
|
||||
} from '../api/client';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
import DataTable from '../components/DataTable';
|
||||
import type { Column } from '../components/DataTable';
|
||||
import StatusBadge from '../components/StatusBadge';
|
||||
import ErrorState from '../components/ErrorState';
|
||||
import { formatDateTime } from '../api/utils';
|
||||
import type { DiscoveredCertificate, DiscoveryScan } from '../api/types';
|
||||
|
||||
function ClaimModal({ cert, onClose, onClaim }: { cert: DiscoveredCertificate; onClose: () => void; onClaim: (managedCertId: string) => void }) {
|
||||
const [managedCertId, setManagedCertId] = useState('');
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4" onClick={e => e.stopPropagation()}>
|
||||
<div className="px-6 py-4 border-b border-surface-border">
|
||||
<h3 className="text-lg font-semibold text-ink">Claim Certificate</h3>
|
||||
<p className="text-sm text-ink-muted mt-1">
|
||||
Link <span className="font-mono text-xs">{cert.common_name}</span> to a managed certificate
|
||||
</p>
|
||||
</div>
|
||||
<div className="px-6 py-4">
|
||||
<label className="block text-sm font-medium text-ink mb-1">Managed Certificate ID</label>
|
||||
<input
|
||||
type="text"
|
||||
value={managedCertId}
|
||||
onChange={e => setManagedCertId(e.target.value)}
|
||||
placeholder="e.g., mc-api-prod"
|
||||
className="w-full border border-surface-border rounded px-3 py-2 text-sm text-ink bg-white font-mono focus:outline-none focus:ring-2 focus:ring-brand-500"
|
||||
/>
|
||||
<p className="text-xs text-ink-faint mt-2">Enter the ID of the managed certificate this discovered cert belongs to.</p>
|
||||
</div>
|
||||
<div className="px-6 py-3 border-t border-surface-border flex justify-end gap-2">
|
||||
<button onClick={onClose} className="px-4 py-2 text-sm text-ink-muted hover:text-ink rounded border border-surface-border">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onClaim(managedCertId)}
|
||||
disabled={!managedCertId.trim()}
|
||||
className="px-4 py-2 text-sm text-white bg-brand-600 hover:bg-brand-700 rounded disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Claim
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ScanHistoryPanel({ scans }: { scans: DiscoveryScan[] }) {
|
||||
if (scans.length === 0) return <p className="text-sm text-ink-muted py-4 text-center">No scans recorded yet</p>;
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="text-left text-xs text-ink-faint border-b border-surface-border">
|
||||
<th className="px-4 py-2">Agent</th>
|
||||
<th className="px-4 py-2">Directories</th>
|
||||
<th className="px-4 py-2">Found</th>
|
||||
<th className="px-4 py-2">New</th>
|
||||
<th className="px-4 py-2">Errors</th>
|
||||
<th className="px-4 py-2">Duration</th>
|
||||
<th className="px-4 py-2">Started</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{scans.map(s => (
|
||||
<tr key={s.id} className="border-b border-surface-border/50 hover:bg-surface-hover">
|
||||
<td className="px-4 py-2 font-mono text-xs">{s.agent_id}</td>
|
||||
<td className="px-4 py-2 text-xs text-ink-muted">{s.directories?.join(', ') || '—'}</td>
|
||||
<td className="px-4 py-2">{s.certificates_found}</td>
|
||||
<td className="px-4 py-2 text-green-600">{s.certificates_new}</td>
|
||||
<td className="px-4 py-2">{s.errors_count > 0 ? <span className="text-red-500">{s.errors_count}</span> : '0'}</td>
|
||||
<td className="px-4 py-2 text-ink-muted">{s.scan_duration_ms}ms</td>
|
||||
<td className="px-4 py-2 text-xs text-ink-muted">{formatDateTime(s.started_at)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DiscoveryPage() {
|
||||
const [statusFilter, setStatusFilter] = useState('');
|
||||
const [agentFilter, setAgentFilter] = useState('');
|
||||
const [claimingCert, setClaimingCert] = useState<DiscoveredCertificate | null>(null);
|
||||
const [showScans, setShowScans] = useState(false);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const params: Record<string, string> = {};
|
||||
if (statusFilter) params.status = statusFilter;
|
||||
if (agentFilter) params.agent_id = agentFilter;
|
||||
|
||||
const { data, isLoading, error, refetch } = useQuery({
|
||||
queryKey: ['discovered-certificates', params],
|
||||
queryFn: () => getDiscoveredCertificates(params),
|
||||
refetchInterval: 30000,
|
||||
});
|
||||
|
||||
const { data: summary } = useQuery({
|
||||
queryKey: ['discovery-summary'],
|
||||
queryFn: getDiscoverySummary,
|
||||
refetchInterval: 30000,
|
||||
});
|
||||
|
||||
const { data: scansData } = useQuery({
|
||||
queryKey: ['discovery-scans'],
|
||||
queryFn: () => getDiscoveryScans(),
|
||||
enabled: showScans,
|
||||
});
|
||||
|
||||
const { data: agentsData } = useQuery({
|
||||
queryKey: ['agents-for-filter'],
|
||||
queryFn: () => getAgents({ per_page: '200' }),
|
||||
});
|
||||
|
||||
const claimMutation = useMutation({
|
||||
mutationFn: ({ id, managedCertId }: { id: string; managedCertId: string }) =>
|
||||
claimDiscoveredCertificate(id, managedCertId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['discovered-certificates'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['discovery-summary'] });
|
||||
setClaimingCert(null);
|
||||
},
|
||||
});
|
||||
|
||||
const dismissMutation = useMutation({
|
||||
mutationFn: dismissDiscoveredCertificate,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['discovered-certificates'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['discovery-summary'] });
|
||||
},
|
||||
});
|
||||
|
||||
const formatExpiry = (notAfter?: string) => {
|
||||
if (!notAfter) return '—';
|
||||
const d = new Date(notAfter);
|
||||
const now = new Date();
|
||||
const days = Math.floor((d.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
|
||||
if (days < 0) return <span className="text-red-500">Expired {Math.abs(days)}d ago</span>;
|
||||
if (days < 30) return <span className="text-amber-500">{days}d left</span>;
|
||||
return <span className="text-ink-muted">{days}d left</span>;
|
||||
};
|
||||
|
||||
const discoveryStatusStyle: Record<string, string> = {
|
||||
Unmanaged: 'badge badge-warning',
|
||||
Managed: 'badge badge-success',
|
||||
Dismissed: 'badge badge-neutral',
|
||||
};
|
||||
|
||||
const columns: Column<DiscoveredCertificate>[] = [
|
||||
{
|
||||
key: 'common_name',
|
||||
label: 'Common Name',
|
||||
render: (c) => (
|
||||
<div>
|
||||
<div className="font-medium text-sm text-ink">{c.common_name || '(no CN)'}</div>
|
||||
{c.sans?.length > 0 && (
|
||||
<div className="text-xs text-ink-faint truncate max-w-[200px]" title={c.sans.join(', ')}>
|
||||
{c.sans.slice(0, 2).join(', ')}{c.sans.length > 2 ? ` +${c.sans.length - 2}` : ''}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: 'Status',
|
||||
render: (c) => <span className={discoveryStatusStyle[c.status] || 'badge badge-neutral'}>{c.status}</span>,
|
||||
},
|
||||
{
|
||||
key: 'source',
|
||||
label: 'Source',
|
||||
render: (c) => (
|
||||
<div>
|
||||
<div className="font-mono text-xs text-ink-muted">{c.agent_id}</div>
|
||||
<div className="text-xs text-ink-faint truncate max-w-[180px]" title={c.source_path}>{c.source_path}</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'issuer',
|
||||
label: 'Issuer',
|
||||
render: (c) => <span className="text-xs text-ink-muted truncate max-w-[150px]" title={c.issuer_dn}>{c.issuer_dn?.split(',')[0] || '—'}</span>,
|
||||
},
|
||||
{
|
||||
key: 'expiry',
|
||||
label: 'Expiry',
|
||||
render: (c) => <span className="text-xs">{formatExpiry(c.not_after)}</span>,
|
||||
},
|
||||
{
|
||||
key: 'fingerprint',
|
||||
label: 'Fingerprint',
|
||||
render: (c) => <span className="font-mono text-[10px] text-ink-faint">{c.fingerprint_sha256?.substring(0, 16)}...</span>,
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
label: '',
|
||||
render: (c) => (
|
||||
c.status === 'Unmanaged' ? (
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); setClaimingCert(c); }}
|
||||
className="text-xs text-brand-600 hover:text-brand-700 font-medium"
|
||||
>
|
||||
Claim
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); dismissMutation.mutate(c.id); }}
|
||||
disabled={dismissMutation.isPending}
|
||||
className="text-xs text-ink-faint hover:text-ink-muted"
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
) : null
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="Certificate Discovery" subtitle={data ? `${data.total} discovered certificates` : undefined} />
|
||||
|
||||
{/* Summary stats bar */}
|
||||
{summary && (
|
||||
<div className="px-6 py-3 flex gap-4 border-b border-surface-border/50">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-amber-400"></span>
|
||||
<span className="text-sm text-ink"><strong>{summary.Unmanaged || 0}</strong> Unmanaged</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-green-400"></span>
|
||||
<span className="text-sm text-ink"><strong>{summary.Managed || 0}</strong> Managed</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-gray-400"></span>
|
||||
<span className="text-sm text-ink"><strong>{summary.Dismissed || 0}</strong> Dismissed</span>
|
||||
</div>
|
||||
<div className="ml-auto">
|
||||
<button
|
||||
onClick={() => setShowScans(!showScans)}
|
||||
className="text-xs text-brand-600 hover:text-brand-700 font-medium"
|
||||
>
|
||||
{showScans ? 'Hide' : 'Show'} Scan History
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Scan history collapsible */}
|
||||
{showScans && (
|
||||
<div className="border-b border-surface-border/50 bg-surface-subtle">
|
||||
<div className="px-6 py-2">
|
||||
<h3 className="text-sm font-semibold text-ink mb-2">Recent Scans</h3>
|
||||
<ScanHistoryPanel scans={scansData?.data || []} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filters */}
|
||||
<div className="px-6 py-3 flex gap-3 border-b border-surface-border/50">
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={e => setStatusFilter(e.target.value)}
|
||||
className="bg-white border border-surface-border rounded px-3 py-1.5 text-sm text-ink"
|
||||
>
|
||||
<option value="">All statuses</option>
|
||||
<option value="Unmanaged">Unmanaged</option>
|
||||
<option value="Managed">Managed</option>
|
||||
<option value="Dismissed">Dismissed</option>
|
||||
</select>
|
||||
<select
|
||||
value={agentFilter}
|
||||
onChange={e => setAgentFilter(e.target.value)}
|
||||
className="bg-white border border-surface-border rounded px-3 py-1.5 text-sm text-ink"
|
||||
>
|
||||
<option value="">All agents</option>
|
||||
{agentsData?.data?.map(a => (
|
||||
<option key={a.id} value={a.id}>{a.name || a.id}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{error ? (
|
||||
<ErrorState error={error as Error} onRetry={() => refetch()} />
|
||||
) : (
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={data?.data || []}
|
||||
isLoading={isLoading}
|
||||
emptyMessage="No discovered certificates. Agents will report findings once discovery scanning is configured."
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{claimingCert && (
|
||||
<ClaimModal
|
||||
cert={claimingCert}
|
||||
onClose={() => setClaimingCert(null)}
|
||||
onClaim={(managedCertId) => claimMutation.mutate({ id: claimingCert.id, managedCertId })}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
+113
-9
@@ -1,6 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { getJobs, cancelJob } from '../api/client';
|
||||
import { getJobs, cancelJob, approveRenewal, rejectRenewal } from '../api/client';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
import DataTable from '../components/DataTable';
|
||||
import type { Column } from '../components/DataTable';
|
||||
@@ -9,9 +9,48 @@ import ErrorState from '../components/ErrorState';
|
||||
import { formatDateTime } from '../api/utils';
|
||||
import type { Job } from '../api/types';
|
||||
|
||||
function RejectModal({ job, onClose, onReject }: { job: Job; onClose: () => void; onReject: (reason: string) => void }) {
|
||||
const [reason, setReason] = useState('');
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4" onClick={e => e.stopPropagation()}>
|
||||
<div className="px-6 py-4 border-b border-surface-border">
|
||||
<h3 className="text-lg font-semibold text-ink">Reject Job</h3>
|
||||
<p className="text-sm text-ink-muted mt-1">
|
||||
Rejecting job <span className="font-mono text-xs">{job.id}</span> for certificate <span className="font-mono text-xs">{job.certificate_id}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="px-6 py-4">
|
||||
<label className="block text-sm font-medium text-ink mb-1">Reason</label>
|
||||
<textarea
|
||||
value={reason}
|
||||
onChange={e => setReason(e.target.value)}
|
||||
placeholder="Why is this renewal being rejected?"
|
||||
className="w-full border border-surface-border rounded px-3 py-2 text-sm text-ink bg-white focus:outline-none focus:ring-2 focus:ring-brand-500"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div className="px-6 py-3 border-t border-surface-border flex justify-end gap-2">
|
||||
<button onClick={onClose} className="px-4 py-2 text-sm text-ink-muted hover:text-ink rounded border border-surface-border">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onReject(reason)}
|
||||
disabled={!reason.trim()}
|
||||
className="px-4 py-2 text-sm text-white bg-red-600 hover:bg-red-700 rounded disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function JobsPage() {
|
||||
const [statusFilter, setStatusFilter] = useState('');
|
||||
const [typeFilter, setTypeFilter] = useState('');
|
||||
const [rejectingJob, setRejectingJob] = useState<Job | null>(null);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const params: Record<string, string> = {};
|
||||
@@ -29,6 +68,21 @@ export default function JobsPage() {
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['jobs'] }),
|
||||
});
|
||||
|
||||
const approveMutation = useMutation({
|
||||
mutationFn: approveRenewal,
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['jobs'] }),
|
||||
});
|
||||
|
||||
const rejectMutation = useMutation({
|
||||
mutationFn: ({ id, reason }: { id: string; reason: string }) => rejectRenewal(id, reason),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['jobs'] });
|
||||
setRejectingJob(null);
|
||||
},
|
||||
});
|
||||
|
||||
const awaitingCount = data?.data?.filter(j => j.status === 'AwaitingApproval').length || 0;
|
||||
|
||||
const columns: Column<Job>[] = [
|
||||
{
|
||||
key: 'id',
|
||||
@@ -53,14 +107,33 @@ export default function JobsPage() {
|
||||
key: 'actions',
|
||||
label: '',
|
||||
render: (j) => (
|
||||
j.status === 'Pending' || j.status === 'Running' ? (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); cancelMutation.mutate(j.id); }}
|
||||
className="text-xs text-red-400 hover:text-red-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
) : null
|
||||
<div className="flex gap-2">
|
||||
{j.status === 'AwaitingApproval' && (
|
||||
<>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); approveMutation.mutate(j.id); }}
|
||||
disabled={approveMutation.isPending}
|
||||
className="text-xs text-green-600 hover:text-green-700 font-medium"
|
||||
>
|
||||
Approve
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); setRejectingJob(j); }}
|
||||
className="text-xs text-red-500 hover:text-red-600 font-medium"
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{(j.status === 'Pending' || j.status === 'Running') && (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); cancelMutation.mutate(j.id); }}
|
||||
className="text-xs text-red-400 hover:text-red-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
@@ -68,6 +141,27 @@ export default function JobsPage() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="Jobs" subtitle={data ? `${data.total} jobs` : undefined} />
|
||||
|
||||
{/* Pending approval banner */}
|
||||
{awaitingCount > 0 && (
|
||||
<div className="mx-6 mt-3 px-4 py-2.5 bg-amber-50 border border-amber-200 rounded-lg flex items-center gap-2">
|
||||
<svg className="w-4 h-4 text-amber-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
<span className="text-sm text-amber-800">
|
||||
<strong>{awaitingCount}</strong> job{awaitingCount !== 1 ? 's' : ''} awaiting approval
|
||||
</span>
|
||||
{statusFilter !== 'AwaitingApproval' && (
|
||||
<button
|
||||
onClick={() => setStatusFilter('AwaitingApproval')}
|
||||
className="text-xs text-amber-700 hover:text-amber-900 underline ml-1"
|
||||
>
|
||||
Show only
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="px-6 py-3 flex gap-3 border-b border-surface-border/50">
|
||||
<select
|
||||
value={statusFilter}
|
||||
@@ -76,6 +170,8 @@ export default function JobsPage() {
|
||||
>
|
||||
<option value="">All statuses</option>
|
||||
<option value="Pending">Pending</option>
|
||||
<option value="AwaitingApproval">Awaiting Approval</option>
|
||||
<option value="AwaitingCSR">Awaiting CSR</option>
|
||||
<option value="Running">Running</option>
|
||||
<option value="Completed">Completed</option>
|
||||
<option value="Failed">Failed</option>
|
||||
@@ -100,6 +196,14 @@ export default function JobsPage() {
|
||||
<DataTable columns={columns} data={data?.data || []} isLoading={isLoading} emptyMessage="No jobs found" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{rejectingJob && (
|
||||
<RejectModal
|
||||
job={rejectingJob}
|
||||
onClose={() => setRejectingJob(null)}
|
||||
onReject={(reason) => rejectMutation.mutate({ id: rejectingJob.id, reason })}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,268 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
getNetworkScanTargets,
|
||||
createNetworkScanTarget,
|
||||
updateNetworkScanTarget,
|
||||
deleteNetworkScanTarget,
|
||||
triggerNetworkScan,
|
||||
} from '../api/client';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
import DataTable from '../components/DataTable';
|
||||
import type { Column } from '../components/DataTable';
|
||||
import ErrorState from '../components/ErrorState';
|
||||
import { formatDateTime } from '../api/utils';
|
||||
import type { NetworkScanTarget } from '../api/types';
|
||||
|
||||
function CreateScanTargetModal({ onClose, onCreate }: {
|
||||
onClose: () => void;
|
||||
onCreate: (data: Partial<NetworkScanTarget>) => void;
|
||||
}) {
|
||||
const [name, setName] = useState('');
|
||||
const [cidrs, setCidrs] = useState('');
|
||||
const [ports, setPorts] = useState('443');
|
||||
const [interval, setInterval] = useState('6');
|
||||
const [timeout, setTimeout] = useState('5000');
|
||||
|
||||
const handleSubmit = () => {
|
||||
const cidrList = cidrs.split('\n').map(s => s.trim()).filter(Boolean);
|
||||
const portList = ports.split(',').map(s => parseInt(s.trim(), 10)).filter(n => !isNaN(n));
|
||||
onCreate({
|
||||
name,
|
||||
cidrs: cidrList,
|
||||
ports: portList,
|
||||
scan_interval_hours: parseInt(interval, 10),
|
||||
timeout_ms: parseInt(timeout, 10),
|
||||
enabled: true,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-lg mx-4" onClick={e => e.stopPropagation()}>
|
||||
<div className="px-6 py-4 border-b border-surface-border">
|
||||
<h3 className="text-lg font-semibold text-ink">New Scan Target</h3>
|
||||
<p className="text-sm text-ink-muted mt-1">Define a network range to scan for TLS certificates</p>
|
||||
</div>
|
||||
<div className="px-6 py-4 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
placeholder="e.g., Production DMZ"
|
||||
className="w-full border border-surface-border rounded px-3 py-2 text-sm text-ink bg-white focus:outline-none focus:ring-2 focus:ring-brand-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">CIDR Ranges (one per line)</label>
|
||||
<textarea
|
||||
value={cidrs}
|
||||
onChange={e => setCidrs(e.target.value)}
|
||||
placeholder={"10.0.1.0/24\n10.0.2.0/24\n192.168.1.100/32"}
|
||||
className="w-full border border-surface-border rounded px-3 py-2 text-sm text-ink bg-white font-mono focus:outline-none focus:ring-2 focus:ring-brand-500"
|
||||
rows={3}
|
||||
/>
|
||||
<p className="text-xs text-ink-faint mt-1">Maximum /20 per CIDR (4096 IPs)</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Ports</label>
|
||||
<input
|
||||
type="text"
|
||||
value={ports}
|
||||
onChange={e => setPorts(e.target.value)}
|
||||
placeholder="443,8443"
|
||||
className="w-full border border-surface-border rounded px-3 py-2 text-sm text-ink bg-white font-mono focus:outline-none focus:ring-2 focus:ring-brand-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Interval (hrs)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={interval}
|
||||
onChange={e => setInterval(e.target.value)}
|
||||
min="1"
|
||||
className="w-full border border-surface-border rounded px-3 py-2 text-sm text-ink bg-white focus:outline-none focus:ring-2 focus:ring-brand-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Timeout (ms)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={timeout}
|
||||
onChange={e => setTimeout(e.target.value)}
|
||||
min="1000"
|
||||
step="1000"
|
||||
className="w-full border border-surface-border rounded px-3 py-2 text-sm text-ink bg-white focus:outline-none focus:ring-2 focus:ring-brand-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 py-3 border-t border-surface-border flex justify-end gap-2">
|
||||
<button onClick={onClose} className="px-4 py-2 text-sm text-ink-muted hover:text-ink rounded border border-surface-border">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={!name.trim() || !cidrs.trim()}
|
||||
className="px-4 py-2 text-sm text-white bg-brand-600 hover:bg-brand-700 rounded disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function NetworkScanPage() {
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data, isLoading, error, refetch } = useQuery({
|
||||
queryKey: ['network-scan-targets'],
|
||||
queryFn: () => getNetworkScanTargets(),
|
||||
refetchInterval: 30000,
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: createNetworkScanTarget,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['network-scan-targets'] });
|
||||
setShowCreate(false);
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: deleteNetworkScanTarget,
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['network-scan-targets'] }),
|
||||
});
|
||||
|
||||
const toggleMutation = useMutation({
|
||||
mutationFn: ({ id, enabled }: { id: string; enabled: boolean }) =>
|
||||
updateNetworkScanTarget(id, { enabled }),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['network-scan-targets'] }),
|
||||
});
|
||||
|
||||
const scanMutation = useMutation({
|
||||
mutationFn: triggerNetworkScan,
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['network-scan-targets'] }),
|
||||
});
|
||||
|
||||
const columns: Column<NetworkScanTarget>[] = [
|
||||
{
|
||||
key: 'name',
|
||||
label: 'Name',
|
||||
render: (t) => (
|
||||
<div>
|
||||
<div className="font-medium text-sm text-ink">{t.name}</div>
|
||||
<div className="font-mono text-xs text-ink-faint">{t.id}</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'cidrs',
|
||||
label: 'CIDRs',
|
||||
render: (t) => (
|
||||
<div className="font-mono text-xs text-ink-muted">
|
||||
{t.cidrs?.slice(0, 2).join(', ')}{(t.cidrs?.length || 0) > 2 ? ` +${t.cidrs.length - 2}` : ''}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'ports',
|
||||
label: 'Ports',
|
||||
render: (t) => <span className="font-mono text-xs text-ink-muted">{t.ports?.join(', ')}</span>,
|
||||
},
|
||||
{
|
||||
key: 'interval',
|
||||
label: 'Interval',
|
||||
render: (t) => <span className="text-sm text-ink-muted">{t.scan_interval_hours}h</span>,
|
||||
},
|
||||
{
|
||||
key: 'last_scan',
|
||||
label: 'Last Scan',
|
||||
render: (t) => (
|
||||
<div>
|
||||
<div className="text-xs text-ink-muted">{t.last_scan_at ? formatDateTime(t.last_scan_at) : 'Never'}</div>
|
||||
{t.last_scan_certs_found != null && (
|
||||
<div className="text-xs text-ink-faint">{t.last_scan_certs_found} certs found</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'enabled',
|
||||
label: 'Enabled',
|
||||
render: (t) => (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); toggleMutation.mutate({ id: t.id, enabled: !t.enabled }); }}
|
||||
className={`relative w-9 h-5 rounded-full transition-colors ${t.enabled ? 'bg-brand-500' : 'bg-gray-300'}`}
|
||||
>
|
||||
<span className={`absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${t.enabled ? 'translate-x-4' : ''}`} />
|
||||
</button>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
label: '',
|
||||
render: (t) => (
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); scanMutation.mutate(t.id); }}
|
||||
disabled={scanMutation.isPending}
|
||||
className="text-xs text-brand-600 hover:text-brand-700 font-medium"
|
||||
>
|
||||
Scan Now
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); deleteMutation.mutate(t.id); }}
|
||||
disabled={deleteMutation.isPending}
|
||||
className="text-xs text-red-400 hover:text-red-500"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="Network Scanning"
|
||||
subtitle={data ? `${data.total} scan targets` : undefined}
|
||||
action={
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="px-4 py-2 text-sm text-white bg-brand-600 hover:bg-brand-700 rounded-lg shadow-sm"
|
||||
>
|
||||
+ New Target
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{error ? (
|
||||
<ErrorState error={error as Error} onRetry={() => refetch()} />
|
||||
) : (
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={data?.data || []}
|
||||
isLoading={isLoading}
|
||||
emptyMessage="No scan targets configured. Create one to start discovering certificates on your network."
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showCreate && (
|
||||
<CreateScanTargetModal
|
||||
onClose={() => setShowCreate(false)}
|
||||
onCreate={(d) => createMutation.mutate(d)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user