mirror of
https://github.com/shankar0123/certctl.git
synced 2026-06-11 14:58:51 +00:00
feat(Pre-2.1.0-E): GUI completeness — 5 new pages, clickable nav, verification badges
Wire all remaining backend features to the frontend GUI: New pages: - DigestPage: preview digest HTML via iframe + send with confirmation - ObservabilityPage: health status, metrics gauges, Prometheus config + live output - JobDetailPage: full job details, verification section, timeline, audit events - IssuerDetailPage: redacted config, test connection, issued certificates list - TargetDetailPage: config, agent link, deployment history with verification Existing page updates: - JobsPage: clickable job IDs, verification column with VerificationBadge - IssuersPage: clickable issuer names linking to detail page - TargetsPage: clickable target names linking to detail page - Sidebar: Digest and Observability nav items - 5 new routes in main.tsx API client: getJob, getIssuer, getTarget, getJobVerification, getPrometheusMetrics Tests: 7 new Vitest tests (203 total), testing-guide Part 37 (17 manual tests) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Shankar
@@ -0,0 +1,110 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useMutation } from '@tanstack/react-query';
|
||||
import { previewDigest, sendDigest } from '../api/client';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
import ErrorState from '../components/ErrorState';
|
||||
|
||||
export default function DigestPage() {
|
||||
const [showConfirm, setShowConfirm] = useState(false);
|
||||
|
||||
const { data: html, isLoading, error, refetch } = useQuery({
|
||||
queryKey: ['digest-preview'],
|
||||
queryFn: previewDigest,
|
||||
retry: false,
|
||||
});
|
||||
|
||||
const sendMutation = useMutation({
|
||||
mutationFn: sendDigest,
|
||||
onSuccess: () => setShowConfirm(false),
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="Certificate Digest"
|
||||
subtitle="Preview and send the scheduled certificate digest email"
|
||||
action={
|
||||
<button
|
||||
onClick={() => setShowConfirm(true)}
|
||||
disabled={!html || sendMutation.isPending}
|
||||
className="btn btn-primary text-xs disabled:opacity-50"
|
||||
>
|
||||
Send Digest Now
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-4">
|
||||
{sendMutation.isSuccess && (
|
||||
<div className="mb-4 px-4 py-2.5 bg-emerald-50 border border-emerald-200 rounded-lg text-sm text-emerald-700">
|
||||
Digest sent successfully.
|
||||
</div>
|
||||
)}
|
||||
{sendMutation.isError && (
|
||||
<div className="mb-4 px-4 py-2.5 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
|
||||
Failed to send digest: {(sendMutation.error as Error).message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<div className="text-sm text-ink-muted">Loading digest preview...</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<ErrorState
|
||||
error={error as Error}
|
||||
onRetry={() => refetch()}
|
||||
/>
|
||||
)}
|
||||
|
||||
{html && (
|
||||
<div className="bg-white border border-surface-border rounded-lg shadow-sm overflow-hidden">
|
||||
<div className="px-4 py-2.5 bg-surface border-b border-surface-border flex items-center justify-between">
|
||||
<span className="text-xs text-ink-muted font-medium">Email Preview</span>
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
className="text-xs text-brand-400 hover:text-brand-500"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
<iframe
|
||||
srcDoc={html}
|
||||
title="Digest Preview"
|
||||
className="w-full border-0"
|
||||
style={{ minHeight: '600px' }}
|
||||
sandbox="allow-same-origin"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showConfirm && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowConfirm(false)}>
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-sm 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">Send Digest</h3>
|
||||
<p className="text-sm text-ink-muted mt-1">
|
||||
This will send the certificate digest email to all configured recipients.
|
||||
</p>
|
||||
</div>
|
||||
<div className="px-6 py-3 border-t border-surface-border flex justify-end gap-2">
|
||||
<button onClick={() => setShowConfirm(false)} className="px-4 py-2 text-sm text-ink-muted hover:text-ink rounded border border-surface-border">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => sendMutation.mutate()}
|
||||
disabled={sendMutation.isPending}
|
||||
className="px-4 py-2 text-sm text-white bg-brand-500 hover:bg-brand-600 rounded disabled:opacity-50"
|
||||
>
|
||||
{sendMutation.isPending ? 'Sending...' : 'Send'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useQuery, useMutation } from '@tanstack/react-query';
|
||||
import { getIssuer, testIssuerConnection, getCertificates } from '../api/client';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
import StatusBadge from '../components/StatusBadge';
|
||||
import DataTable from '../components/DataTable';
|
||||
import type { Column } from '../components/DataTable';
|
||||
import ErrorState from '../components/ErrorState';
|
||||
import { formatDateTime } from '../api/utils';
|
||||
import type { Certificate } from '../api/types';
|
||||
|
||||
const typeLabels: Record<string, string> = {
|
||||
local_ca: 'Local CA',
|
||||
acme: 'ACME (Let\'s Encrypt)',
|
||||
step_ca: 'step-ca',
|
||||
openssl: 'OpenSSL / Custom',
|
||||
vault: 'Vault PKI',
|
||||
};
|
||||
|
||||
function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex justify-between py-2 border-b border-surface-border/50">
|
||||
<span className="text-sm text-ink-muted">{label}</span>
|
||||
<span className="text-sm text-ink">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function IssuerDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
|
||||
const { data: issuer, isLoading, error, refetch } = useQuery({
|
||||
queryKey: ['issuer', id],
|
||||
queryFn: () => getIssuer(id!),
|
||||
enabled: !!id,
|
||||
});
|
||||
|
||||
const { data: certsData } = useQuery({
|
||||
queryKey: ['certificates', { issuer_id: id }],
|
||||
queryFn: () => getCertificates({ issuer_id: id! }),
|
||||
enabled: !!id,
|
||||
});
|
||||
|
||||
const testMutation = useMutation({
|
||||
mutationFn: () => testIssuerConnection(id!),
|
||||
});
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="Issuer Details" />
|
||||
<ErrorState error={error as Error} onRetry={() => refetch()} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading || !issuer) {
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="Issuer Details" />
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<div className="text-sm text-ink-muted">Loading issuer...</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Redact sensitive config fields
|
||||
const safeConfig = issuer.config ? Object.fromEntries(
|
||||
Object.entries(issuer.config).map(([k, v]) => {
|
||||
const sensitive = ['password', 'secret', 'token', 'key', 'hmac', 'private'].some(s => k.toLowerCase().includes(s));
|
||||
return [k, sensitive ? '********' : v];
|
||||
})
|
||||
) : {};
|
||||
|
||||
const certColumns: Column<Certificate>[] = [
|
||||
{
|
||||
key: 'name',
|
||||
label: 'Certificate',
|
||||
render: (c) => (
|
||||
<div>
|
||||
<div className="font-medium text-ink text-sm">{c.common_name}</div>
|
||||
<div className="text-xs text-ink-faint font-mono">{c.id}</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{ key: 'status', label: 'Status', render: (c) => <StatusBadge status={c.status} /> },
|
||||
{ key: 'expires', label: 'Expires', render: (c) => <span className="text-xs text-ink-muted">{formatDateTime(c.expires_at)}</span> },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title={issuer.name}
|
||||
subtitle={typeLabels[issuer.type] || issuer.type}
|
||||
action={
|
||||
<button
|
||||
onClick={() => testMutation.mutate()}
|
||||
disabled={testMutation.isPending}
|
||||
className="btn btn-primary text-xs disabled:opacity-50"
|
||||
>
|
||||
{testMutation.isPending ? 'Testing...' : 'Test Connection'}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-6">
|
||||
{testMutation.isSuccess && (
|
||||
<div className="px-4 py-2.5 bg-emerald-50 border border-emerald-200 rounded-lg text-sm text-emerald-700">
|
||||
Connection test passed.
|
||||
</div>
|
||||
)}
|
||||
{testMutation.isError && (
|
||||
<div className="px-4 py-2.5 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
|
||||
Connection test failed: {(testMutation.error as Error).message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Issuer info */}
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">Issuer Information</h3>
|
||||
<InfoRow label="ID" value={<span className="font-mono text-xs">{issuer.id}</span>} />
|
||||
<InfoRow label="Name" value={issuer.name} />
|
||||
<InfoRow label="Type" value={typeLabels[issuer.type] || issuer.type} />
|
||||
<InfoRow label="Status" value={<StatusBadge status={issuer.status} />} />
|
||||
<InfoRow label="Created" value={formatDateTime(issuer.created_at)} />
|
||||
</div>
|
||||
|
||||
{/* Config (redacted) */}
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">Configuration</h3>
|
||||
{Object.keys(safeConfig).length > 0 ? (
|
||||
<div className="space-y-0">
|
||||
{Object.entries(safeConfig).map(([key, val]) => (
|
||||
<InfoRow key={key} label={key} value={
|
||||
<span className="font-mono text-xs truncate max-w-xs inline-block">{String(val)}</span>
|
||||
} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-ink-faint py-4 text-center">No configuration data</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Issued certificates */}
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">
|
||||
Issued Certificates {certsData ? `(${certsData.total})` : ''}
|
||||
</h3>
|
||||
<DataTable
|
||||
columns={certColumns}
|
||||
data={certsData?.data || []}
|
||||
isLoading={!certsData}
|
||||
emptyMessage="No certificates issued by this issuer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { getIssuers, testIssuerConnection, deleteIssuer, createIssuer } from '../api/client';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
@@ -120,7 +121,9 @@ export default function IssuersPage() {
|
||||
label: 'Issuer',
|
||||
render: (i) => (
|
||||
<div>
|
||||
<div className="font-medium text-ink">{i.name}</div>
|
||||
<Link to={`/issuers/${i.id}`} className="font-medium text-accent hover:text-accent-bright" onClick={(e) => e.stopPropagation()}>
|
||||
{i.name}
|
||||
</Link>
|
||||
<div className="text-xs text-ink-faint font-mono">{i.id}</div>
|
||||
</div>
|
||||
),
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { getJob, getJobVerification, getAuditEvents } from '../api/client';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
import StatusBadge from '../components/StatusBadge';
|
||||
import ErrorState from '../components/ErrorState';
|
||||
import { formatDateTime, timeAgo } from '../api/utils';
|
||||
|
||||
function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex justify-between py-2 border-b border-surface-border/50">
|
||||
<span className="text-sm text-ink-muted">{label}</span>
|
||||
<span className="text-sm text-ink">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function VerificationBadge({ status }: { status?: string }) {
|
||||
if (!status) return <span className="text-xs text-ink-faint">—</span>;
|
||||
const styles: Record<string, string> = {
|
||||
success: 'bg-emerald-100 text-emerald-700',
|
||||
failed: 'bg-red-100 text-red-700',
|
||||
pending: 'bg-yellow-100 text-yellow-700',
|
||||
skipped: 'bg-gray-100 text-gray-600',
|
||||
};
|
||||
const labels: Record<string, string> = {
|
||||
success: 'Verified',
|
||||
failed: 'Failed',
|
||||
pending: 'Pending',
|
||||
skipped: 'Skipped',
|
||||
};
|
||||
return (
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full font-medium ${styles[status] || 'bg-gray-100 text-gray-600'}`}>
|
||||
{labels[status] || status}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function JobDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
|
||||
const { data: job, isLoading, error, refetch } = useQuery({
|
||||
queryKey: ['job', id],
|
||||
queryFn: () => getJob(id!),
|
||||
enabled: !!id,
|
||||
refetchInterval: 10000,
|
||||
});
|
||||
|
||||
const { data: verification } = useQuery({
|
||||
queryKey: ['job-verification', id],
|
||||
queryFn: () => getJobVerification(id!),
|
||||
enabled: !!id && job?.type === 'Deployment' && job?.status === 'Completed',
|
||||
retry: false,
|
||||
});
|
||||
|
||||
const { data: auditData } = useQuery({
|
||||
queryKey: ['audit', { resource_id: id }],
|
||||
queryFn: () => getAuditEvents({ resource_id: id!, per_page: '10' }),
|
||||
enabled: !!id,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="Job Details" />
|
||||
<ErrorState error={error as Error} onRetry={() => refetch()} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading || !job) {
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="Job Details" />
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<div className="text-sm text-ink-muted">Loading job...</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title={`Job ${job.id}`}
|
||||
subtitle={`${job.type} job`}
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Job details */}
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">Job Information</h3>
|
||||
<InfoRow label="ID" value={<span className="font-mono text-xs">{job.id}</span>} />
|
||||
<InfoRow label="Type" value={job.type} />
|
||||
<InfoRow label="Status" value={<StatusBadge status={job.status} />} />
|
||||
<InfoRow label="Certificate" value={
|
||||
<Link to={`/certificates/${job.certificate_id}`} className="text-xs text-accent hover:text-accent-bright font-mono">
|
||||
{job.certificate_id}
|
||||
</Link>
|
||||
} />
|
||||
{job.agent_id && (
|
||||
<InfoRow label="Agent" value={
|
||||
<Link to={`/agents/${job.agent_id}`} className="text-xs text-accent hover:text-accent-bright font-mono">
|
||||
{job.agent_id}
|
||||
</Link>
|
||||
} />
|
||||
)}
|
||||
{job.target_id && (
|
||||
<InfoRow label="Target" value={
|
||||
<Link to={`/targets/${job.target_id}`} className="text-xs text-accent hover:text-accent-bright font-mono">
|
||||
{job.target_id}
|
||||
</Link>
|
||||
} />
|
||||
)}
|
||||
<InfoRow label="Attempts" value={`${job.attempts} / ${job.max_attempts}`} />
|
||||
{job.error_message && (
|
||||
<InfoRow label="Error" value={
|
||||
<span className="text-red-600 text-xs">{job.error_message}</span>
|
||||
} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">Timeline</h3>
|
||||
<InfoRow label="Created" value={formatDateTime(job.created_at)} />
|
||||
<InfoRow label="Scheduled" value={formatDateTime(job.scheduled_at)} />
|
||||
{job.started_at && <InfoRow label="Started" value={formatDateTime(job.started_at)} />}
|
||||
{job.completed_at && <InfoRow label="Completed" value={formatDateTime(job.completed_at)} />}
|
||||
{job.completed_at && job.started_at && (
|
||||
<InfoRow label="Duration" value={timeAgo(job.started_at)} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Verification section — only for deployment jobs */}
|
||||
{job.type === 'Deployment' && (
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">Post-Deployment Verification</h3>
|
||||
{job.verification_status ? (
|
||||
<div className="space-y-0">
|
||||
<InfoRow label="Status" value={<VerificationBadge status={job.verification_status} />} />
|
||||
{job.verified_at && <InfoRow label="Verified At" value={formatDateTime(job.verified_at)} />}
|
||||
{job.verification_fingerprint && (
|
||||
<InfoRow label="Fingerprint" value={<span className="font-mono text-xs">{job.verification_fingerprint}</span>} />
|
||||
)}
|
||||
{job.verification_error && (
|
||||
<InfoRow label="Error" value={<span className="text-red-600 text-xs">{job.verification_error}</span>} />
|
||||
)}
|
||||
{verification && verification.verified && (
|
||||
<InfoRow label="Expected Fingerprint" value={<span className="font-mono text-xs">{verification.expected_fingerprint}</span>} />
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-ink-faint py-4 text-center">
|
||||
{job.status === 'Completed' ? 'No verification data recorded' : 'Verification runs after deployment completes'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Audit trail */}
|
||||
{auditData && auditData.data.length > 0 && (
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">Related Audit Events</h3>
|
||||
<div className="space-y-2">
|
||||
{auditData.data.map(event => (
|
||||
<div key={event.id} className="flex items-center justify-between py-2 border-b border-surface-border/50 last:border-0">
|
||||
<div>
|
||||
<span className="text-sm text-ink">{event.action}</span>
|
||||
<span className="text-xs text-ink-faint ml-2">by {event.actor}</span>
|
||||
</div>
|
||||
<span className="text-xs text-ink-muted">{formatDateTime(event.timestamp)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { getJobs, cancelJob, approveRenewal, rejectRenewal } from '../api/client';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
@@ -47,6 +48,27 @@ function RejectModal({ job, onClose, onReject }: { job: Job; onClose: () => void
|
||||
);
|
||||
}
|
||||
|
||||
function VerificationBadge({ status }: { status?: string }) {
|
||||
if (!status) return <span className="text-xs text-ink-faint">—</span>;
|
||||
const styles: Record<string, string> = {
|
||||
success: 'bg-emerald-100 text-emerald-700',
|
||||
failed: 'bg-red-100 text-red-700',
|
||||
pending: 'bg-yellow-100 text-yellow-700',
|
||||
skipped: 'bg-gray-100 text-gray-600',
|
||||
};
|
||||
const labels: Record<string, string> = {
|
||||
success: 'Verified',
|
||||
failed: 'Failed',
|
||||
pending: 'Pending',
|
||||
skipped: 'Skipped',
|
||||
};
|
||||
return (
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full font-medium ${styles[status] || 'bg-gray-100 text-gray-600'}`}>
|
||||
{labels[status] || status}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function JobsPage() {
|
||||
const [statusFilter, setStatusFilter] = useState('');
|
||||
const [typeFilter, setTypeFilter] = useState('');
|
||||
@@ -89,13 +111,26 @@ export default function JobsPage() {
|
||||
label: 'Job',
|
||||
render: (j) => (
|
||||
<div>
|
||||
<div className="font-mono text-xs text-ink">{j.id}</div>
|
||||
<Link to={`/jobs/${j.id}`} className="font-mono text-xs text-accent hover:text-accent-bright" onClick={(e) => e.stopPropagation()}>
|
||||
{j.id}
|
||||
</Link>
|
||||
<div className="text-xs text-ink-faint">{j.type}</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{ key: 'status', label: 'Status', render: (j) => <StatusBadge status={j.status} /> },
|
||||
{ key: 'cert', label: 'Certificate', render: (j) => <span className="text-xs text-ink-muted font-mono">{j.certificate_id}</span> },
|
||||
{
|
||||
key: 'agent',
|
||||
label: 'Agent',
|
||||
render: (j) => j.agent_id ? (
|
||||
<Link to={`/agents/${j.agent_id}`} className="text-xs text-accent hover:text-accent-bright font-mono" onClick={(e) => e.stopPropagation()}>
|
||||
{j.agent_id}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-xs text-ink-faint">—</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'attempts',
|
||||
label: 'Attempts',
|
||||
@@ -103,6 +138,11 @@ export default function JobsPage() {
|
||||
},
|
||||
{ key: 'scheduled', label: 'Scheduled', render: (j) => <span className="text-xs text-ink-muted">{formatDateTime(j.scheduled_at)}</span> },
|
||||
{ key: 'completed', label: 'Completed', render: (j) => <span className="text-xs text-ink-muted">{formatDateTime(j.completed_at)}</span> },
|
||||
{
|
||||
key: 'verification',
|
||||
label: 'Verification',
|
||||
render: (j) => j.type === 'Deployment' ? <VerificationBadge status={j.verification_status} /> : <span className="text-xs text-ink-faint">—</span>,
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
label: '',
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { getMetrics, getPrometheusMetrics, getHealth } from '../api/client';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
import ErrorState from '../components/ErrorState';
|
||||
|
||||
function MetricCard({ label, value, sub }: { label: string; value: string | number; sub?: string }) {
|
||||
return (
|
||||
<div className="bg-surface border border-surface-border rounded p-4 shadow-sm">
|
||||
<div className="text-xs text-ink-muted mb-1">{label}</div>
|
||||
<div className="text-2xl font-bold text-ink">{value}</div>
|
||||
{sub && <div className="text-xs text-ink-faint mt-1">{sub}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatUptime(seconds: number): string {
|
||||
const d = Math.floor(seconds / 86400);
|
||||
const h = Math.floor((seconds % 86400) / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
if (d > 0) return `${d}d ${h}h ${m}m`;
|
||||
if (h > 0) return `${h}h ${m}m`;
|
||||
return `${m}m`;
|
||||
}
|
||||
|
||||
export default function ObservabilityPage() {
|
||||
const { data: metrics, isLoading, error, refetch } = useQuery({
|
||||
queryKey: ['metrics'],
|
||||
queryFn: getMetrics,
|
||||
refetchInterval: 15000,
|
||||
});
|
||||
|
||||
const { data: health } = useQuery({
|
||||
queryKey: ['health'],
|
||||
queryFn: getHealth,
|
||||
refetchInterval: 15000,
|
||||
});
|
||||
|
||||
const { data: promText } = useQuery({
|
||||
queryKey: ['prometheus-metrics'],
|
||||
queryFn: getPrometheusMetrics,
|
||||
refetchInterval: 30000,
|
||||
retry: false,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="Observability" />
|
||||
<ErrorState error={error as Error} onRetry={() => refetch()} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="Observability"
|
||||
subtitle={health ? `Server: ${health.status}` : undefined}
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-6">
|
||||
{/* Health status */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-3 h-3 rounded-full ${health?.status === 'ok' ? 'bg-emerald-500' : 'bg-red-500'}`} />
|
||||
<span className="text-sm text-ink font-medium">
|
||||
Server {health?.status === 'ok' ? 'Healthy' : 'Unhealthy'}
|
||||
</span>
|
||||
{metrics && (
|
||||
<span className="text-xs text-ink-faint ml-auto">
|
||||
Uptime: {formatUptime(metrics.uptime.uptime_seconds)} | Started: {new Date(metrics.uptime.server_started).toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Gauge metrics */}
|
||||
{isLoading && (
|
||||
<div className="text-sm text-ink-muted py-10 text-center">Loading metrics...</div>
|
||||
)}
|
||||
|
||||
{metrics && (
|
||||
<>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-3">Certificate Gauges</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
||||
<MetricCard label="Total" value={metrics.gauge.certificate_total} />
|
||||
<MetricCard label="Active" value={metrics.gauge.certificate_active} />
|
||||
<MetricCard label="Expiring Soon" value={metrics.gauge.certificate_expiring_soon} />
|
||||
<MetricCard label="Expired" value={metrics.gauge.certificate_expired} />
|
||||
<MetricCard label="Revoked" value={metrics.gauge.certificate_revoked} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-3">Agent & Job Gauges</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
<MetricCard label="Total Agents" value={metrics.gauge.agent_total} />
|
||||
<MetricCard label="Online Agents" value={metrics.gauge.agent_online} />
|
||||
<MetricCard label="Pending Jobs" value={metrics.gauge.job_pending} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-3">Counters</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-2 gap-3">
|
||||
<MetricCard label="Jobs Completed (total)" value={metrics.counter.job_completed_total} />
|
||||
<MetricCard label="Jobs Failed (total)" value={metrics.counter.job_failed_total} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Prometheus config */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-3">Prometheus Integration</h3>
|
||||
<div className="bg-surface border border-surface-border rounded p-4 shadow-sm">
|
||||
<p className="text-sm text-ink mb-3">
|
||||
Add this scrape target to your <code className="text-xs bg-surface-muted px-1 py-0.5 rounded">prometheus.yml</code>:
|
||||
</p>
|
||||
<pre className="bg-ink text-white rounded p-4 text-xs overflow-x-auto font-mono">
|
||||
{`scrape_configs:
|
||||
- job_name: 'certctl'
|
||||
metrics_path: '/api/v1/metrics/prometheus'
|
||||
scheme: 'https'
|
||||
bearer_token: '<YOUR_API_KEY>'
|
||||
static_configs:
|
||||
- targets: ['<CERTCTL_HOST>:443']`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Live Prometheus output */}
|
||||
{promText && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-3">Live Prometheus Output</h3>
|
||||
<div className="bg-surface border border-surface-border rounded shadow-sm">
|
||||
<div className="px-4 py-2 border-b border-surface-border flex items-center justify-between">
|
||||
<span className="text-xs text-ink-faint font-mono">GET /api/v1/metrics/prometheus</span>
|
||||
<span className="text-xs text-ink-faint">text/plain</span>
|
||||
</div>
|
||||
<pre className="p-4 text-xs text-ink-muted overflow-x-auto font-mono max-h-96 overflow-y-auto whitespace-pre">
|
||||
{promText}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { getTarget, getJobs } from '../api/client';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
import StatusBadge from '../components/StatusBadge';
|
||||
import DataTable from '../components/DataTable';
|
||||
import type { Column } from '../components/DataTable';
|
||||
import ErrorState from '../components/ErrorState';
|
||||
import { formatDateTime } from '../api/utils';
|
||||
import type { Job } from '../api/types';
|
||||
|
||||
const typeLabels: Record<string, string> = {
|
||||
nginx: 'NGINX',
|
||||
apache: 'Apache',
|
||||
haproxy: 'HAProxy',
|
||||
traefik: 'Traefik',
|
||||
caddy: 'Caddy',
|
||||
f5_bigip: 'F5 BIG-IP',
|
||||
iis: 'IIS',
|
||||
};
|
||||
|
||||
function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex justify-between py-2 border-b border-surface-border/50">
|
||||
<span className="text-sm text-ink-muted">{label}</span>
|
||||
<span className="text-sm text-ink">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TargetDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
|
||||
const { data: target, isLoading, error, refetch } = useQuery({
|
||||
queryKey: ['target', id],
|
||||
queryFn: () => getTarget(id!),
|
||||
enabled: !!id,
|
||||
});
|
||||
|
||||
// Deployment jobs for this target
|
||||
const { data: jobsData } = useQuery({
|
||||
queryKey: ['jobs', { target_id: id, type: 'Deployment' }],
|
||||
queryFn: () => getJobs({ target_id: id! }),
|
||||
enabled: !!id,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="Target Details" />
|
||||
<ErrorState error={error as Error} onRetry={() => refetch()} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading || !target) {
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="Target Details" />
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<div className="text-sm text-ink-muted">Loading target...</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const jobColumns: Column<Job>[] = [
|
||||
{
|
||||
key: 'id',
|
||||
label: 'Job',
|
||||
render: (j) => (
|
||||
<Link to={`/jobs/${j.id}`} className="font-mono text-xs text-accent hover:text-accent-bright">
|
||||
{j.id}
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{ key: 'status', label: 'Status', render: (j) => <StatusBadge status={j.status} /> },
|
||||
{ key: 'cert', label: 'Certificate', render: (j) => (
|
||||
<Link to={`/certificates/${j.certificate_id}`} className="text-xs text-accent hover:text-accent-bright font-mono">
|
||||
{j.certificate_id}
|
||||
</Link>
|
||||
)},
|
||||
{ key: 'completed', label: 'Completed', render: (j) => <span className="text-xs text-ink-muted">{formatDateTime(j.completed_at)}</span> },
|
||||
{
|
||||
key: 'verification',
|
||||
label: 'Verification',
|
||||
render: (j) => {
|
||||
if (!j.verification_status) return <span className="text-xs text-ink-faint">—</span>;
|
||||
const styles: Record<string, string> = {
|
||||
success: 'bg-emerald-100 text-emerald-700',
|
||||
failed: 'bg-red-100 text-red-700',
|
||||
pending: 'bg-yellow-100 text-yellow-700',
|
||||
skipped: 'bg-gray-100 text-gray-600',
|
||||
};
|
||||
const labels: Record<string, string> = {
|
||||
success: 'Verified',
|
||||
failed: 'Failed',
|
||||
pending: 'Pending',
|
||||
skipped: 'Skipped',
|
||||
};
|
||||
return (
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full font-medium ${styles[j.verification_status] || 'bg-gray-100 text-gray-600'}`}>
|
||||
{labels[j.verification_status] || j.verification_status}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title={target.name}
|
||||
subtitle={typeLabels[target.type] || target.type}
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Target info */}
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">Target Information</h3>
|
||||
<InfoRow label="ID" value={<span className="font-mono text-xs">{target.id}</span>} />
|
||||
<InfoRow label="Name" value={target.name} />
|
||||
<InfoRow label="Type" value={typeLabels[target.type] || target.type} />
|
||||
<InfoRow label="Hostname" value={target.hostname || '—'} />
|
||||
<InfoRow label="Status" value={<StatusBadge status={target.status} />} />
|
||||
{target.agent_id && (
|
||||
<InfoRow label="Agent" value={
|
||||
<Link to={`/agents/${target.agent_id}`} className="text-xs text-accent hover:text-accent-bright font-mono">
|
||||
{target.agent_id}
|
||||
</Link>
|
||||
} />
|
||||
)}
|
||||
<InfoRow label="Created" value={formatDateTime(target.created_at)} />
|
||||
</div>
|
||||
|
||||
{/* Config */}
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">Configuration</h3>
|
||||
{target.config && Object.keys(target.config).length > 0 ? (
|
||||
<div className="space-y-0">
|
||||
{Object.entries(target.config).map(([key, val]) => (
|
||||
<InfoRow key={key} label={key.replace(/_/g, ' ')} value={
|
||||
<span className="font-mono text-xs truncate max-w-xs inline-block">{String(val)}</span>
|
||||
} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-ink-faint py-4 text-center">No configuration data</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Deployment history */}
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">
|
||||
Deployment History {jobsData ? `(${jobsData.total})` : ''}
|
||||
</h3>
|
||||
<DataTable
|
||||
columns={jobColumns}
|
||||
data={jobsData?.data || []}
|
||||
isLoading={!jobsData}
|
||||
emptyMessage="No deployments to this target"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { getTargets, createTarget, deleteTarget } from '../api/client';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
@@ -266,7 +267,9 @@ export default function TargetsPage() {
|
||||
label: 'Target',
|
||||
render: (t) => (
|
||||
<div>
|
||||
<div className="font-medium text-ink">{t.name}</div>
|
||||
<Link to={`/targets/${t.id}`} className="font-medium text-accent hover:text-accent-bright" onClick={(e) => e.stopPropagation()}>
|
||||
{t.name}
|
||||
</Link>
|
||||
<div className="text-xs text-ink-faint font-mono">{t.id}</div>
|
||||
</div>
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user