mirror of
https://github.com/shankar0123/certctl.git
synced 2026-06-10 16:48:52 +00:00
shankar0123
807 lines
31 KiB
TypeScript
807 lines
31 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useLocation, useSearchParams } from 'react-router-dom';
|
|
import {
|
|
getAdminSCEPIntuneStats,
|
|
getAdminSCEPProfiles,
|
|
reloadAdminSCEPIntuneTrust,
|
|
getAuditEvents,
|
|
} from '../api/client';
|
|
import PageHeader from '../components/PageHeader';
|
|
import ErrorState from '../components/ErrorState';
|
|
import { useAuth } from '../components/AuthProvider';
|
|
import { useTrackedMutation } from '../hooks/useTrackedMutation';
|
|
import { formatDateTime } from '../api/utils';
|
|
import type {
|
|
IntuneStatsSnapshot,
|
|
IntuneTrustAnchorInfo,
|
|
AuditEvent,
|
|
SCEPProfileStatsSnapshot,
|
|
} from '../api/types';
|
|
|
|
// SCEP RFC 8894 + Intune master bundle Phase 9 follow-up
|
|
// (the project's SCEP GUI restructure spec): per-profile SCEP
|
|
// administration page with three tabs.
|
|
//
|
|
// Profiles (default) — every configured SCEP profile, lean card per
|
|
// profile with always-present fields (RA cert
|
|
// expiry, mTLS sibling-route status,
|
|
// challenge-password-set indicator). Cards on
|
|
// Intune-enabled profiles get a "View Intune
|
|
// details →" link that deep-links to the
|
|
// Intune tab filtered to that profile.
|
|
// Intune Monitoring — the existing Phase 9.4 deep-dive. Per-profile
|
|
// counters (success / signature_invalid /
|
|
// claim_mismatch / expired / wrong_audience /
|
|
// replay / rate_limited / malformed /
|
|
// compliance_failed / not_yet_valid /
|
|
// unknown_version), trust anchor expiry
|
|
// countdown, recent failures table, reload-
|
|
// trust button + confirmation modal. Polled
|
|
// every 30s via TanStack Query.
|
|
// Recent Activity — full SCEP audit log filter covering all four
|
|
// action codes (scep_pkcsreq, scep_renewalreq,
|
|
// scep_pkcsreq_intune, scep_renewalreq_intune).
|
|
// Merged + sorted descending by timestamp.
|
|
// Filter chips for All / Initial / Renewal /
|
|
// Intune / Static. Polled every 60s.
|
|
//
|
|
// Admin-gated: the page itself renders an "Admin access required" banner
|
|
// for non-admin callers and never issues the underlying admin requests.
|
|
// Server-side enforcement is the M-008 admin gate; this is a UX hint.
|
|
|
|
const COUNTER_LABEL_ORDER = [
|
|
'success',
|
|
'signature_invalid',
|
|
'expired',
|
|
'not_yet_valid',
|
|
'wrong_audience',
|
|
'replay',
|
|
'rate_limited',
|
|
'claim_mismatch',
|
|
'compliance_failed',
|
|
'malformed',
|
|
'unknown_version',
|
|
] as const;
|
|
|
|
const COUNTER_PRESENTATION: Record<string, { label: string; tone: 'good' | 'warn' | 'bad' }> = {
|
|
success: { label: 'Success', tone: 'good' },
|
|
signature_invalid: { label: 'Signature invalid', tone: 'bad' },
|
|
expired: { label: 'Expired', tone: 'warn' },
|
|
not_yet_valid: { label: 'Not yet valid', tone: 'warn' },
|
|
wrong_audience: { label: 'Wrong audience', tone: 'bad' },
|
|
replay: { label: 'Replay', tone: 'bad' },
|
|
rate_limited: { label: 'Rate-limited', tone: 'warn' },
|
|
claim_mismatch: { label: 'Claim mismatch', tone: 'bad' },
|
|
compliance_failed: { label: 'Compliance failed', tone: 'warn' },
|
|
malformed: { label: 'Malformed', tone: 'bad' },
|
|
unknown_version: { label: 'Unknown version', tone: 'warn' },
|
|
};
|
|
|
|
const TONE_CLASS: Record<'good' | 'warn' | 'bad', string> = {
|
|
good: 'text-emerald-600',
|
|
warn: 'text-amber-600',
|
|
bad: 'text-red-600',
|
|
};
|
|
|
|
type TabId = 'profiles' | 'intune' | 'activity';
|
|
type ActivityFilter = 'all' | 'initial' | 'renewal' | 'intune' | 'static';
|
|
|
|
const TAB_LABELS: Record<TabId, string> = {
|
|
profiles: 'Profiles',
|
|
intune: 'Intune Monitoring',
|
|
activity: 'Recent Activity',
|
|
};
|
|
|
|
const SCEP_AUDIT_ACTIONS = [
|
|
'scep_pkcsreq',
|
|
'scep_renewalreq',
|
|
'scep_pkcsreq_intune',
|
|
'scep_renewalreq_intune',
|
|
] as const;
|
|
|
|
// =============================================================================
|
|
// Tone + badge helpers (shared across tabs).
|
|
// =============================================================================
|
|
|
|
function expiryBadge(days: number | null, expired: boolean): { text: string; tone: 'good' | 'warn' | 'bad' } {
|
|
if (expired) return { text: 'EXPIRED', tone: 'bad' };
|
|
if (days === null) return { text: 'Not loaded', tone: 'warn' };
|
|
if (days < 7) return { text: `${days}d remaining`, tone: 'bad' };
|
|
if (days < 30) return { text: `${days}d remaining (rotate soon)`, tone: 'warn' };
|
|
return { text: `${days}d remaining`, tone: 'good' };
|
|
}
|
|
|
|
function badgeClass(tone: 'good' | 'warn' | 'bad'): string {
|
|
if (tone === 'good') return 'bg-emerald-100 text-emerald-800';
|
|
if (tone === 'warn') return 'bg-amber-100 text-amber-800';
|
|
return 'bg-red-100 text-red-800';
|
|
}
|
|
|
|
function pillClass(active: boolean): string {
|
|
return active
|
|
? 'bg-brand-100 text-brand-800 border-brand-300'
|
|
: 'bg-surface-alt text-ink-muted border-surface-border';
|
|
}
|
|
|
|
// soonestExpiryDays returns the smallest days_to_expiry across the
|
|
// profile's Intune trust anchor pool. Returns null when the pool is
|
|
// empty (the per-profile preflight should have refused this state at
|
|
// boot, but defensive in case the holder is reloaded mid-flight to an
|
|
// empty file).
|
|
function soonestExpiryDays(anchors?: IntuneTrustAnchorInfo[]): number | null {
|
|
if (!anchors || anchors.length === 0) return null;
|
|
let min = Number.POSITIVE_INFINITY;
|
|
for (const a of anchors) {
|
|
if (a.expired) return -1;
|
|
if (a.days_to_expiry < min) min = a.days_to_expiry;
|
|
}
|
|
return min === Number.POSITIVE_INFINITY ? null : min;
|
|
}
|
|
|
|
// =============================================================================
|
|
// Profiles tab — per-profile lean card with always-present fields.
|
|
// =============================================================================
|
|
|
|
interface ProfilesTabProps {
|
|
profiles: SCEPProfileStatsSnapshot[];
|
|
isLoading: boolean;
|
|
onViewIntuneDetails: (pathID: string) => void;
|
|
}
|
|
|
|
function ProfilesTab({ profiles, isLoading, onViewIntuneDetails }: ProfilesTabProps) {
|
|
if (isLoading) {
|
|
return <p className="text-sm text-ink-muted px-1 py-6">Loading profiles…</p>;
|
|
}
|
|
if (profiles.length === 0) {
|
|
return (
|
|
<div className="rounded border border-amber-300 bg-amber-50 p-4 text-sm text-amber-900">
|
|
No SCEP profiles are configured. Set <code>CERTCTL_SCEP_ENABLED=true</code> and either the
|
|
legacy single-profile env vars or <code>CERTCTL_SCEP_PROFILES=...</code> with the indexed
|
|
per-profile family to register at least one endpoint.
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<>
|
|
{profiles.map(p => (
|
|
<ProfileSummaryCard
|
|
key={p.path_id || '(root)'}
|
|
profile={p}
|
|
onViewIntuneDetails={onViewIntuneDetails}
|
|
/>
|
|
))}
|
|
</>
|
|
);
|
|
}
|
|
|
|
interface ProfileSummaryCardProps {
|
|
profile: SCEPProfileStatsSnapshot;
|
|
onViewIntuneDetails: (pathID: string) => void;
|
|
}
|
|
|
|
function ProfileSummaryCard({ profile, onViewIntuneDetails }: ProfileSummaryCardProps) {
|
|
const pathLabel = profile.path_id || '(legacy /scep root)';
|
|
const intuneEnabled = !!profile.intune;
|
|
const raBadge = expiryBadge(
|
|
profile.ra_cert_subject ? profile.ra_cert_days_to_expiry : null,
|
|
profile.ra_cert_expired,
|
|
);
|
|
|
|
return (
|
|
<section
|
|
className="bg-surface border border-surface-border rounded-lg p-5 mb-4"
|
|
data-testid={`profile-summary-${profile.path_id}`}
|
|
>
|
|
<header className="flex items-center justify-between mb-3">
|
|
<div>
|
|
<h3 className="text-base font-semibold text-ink">{pathLabel}</h3>
|
|
<p className="text-xs text-ink-muted">Issuer: {profile.issuer_id}</p>
|
|
</div>
|
|
<span
|
|
className={`text-xs px-2 py-0.5 rounded-full font-medium ${badgeClass(raBadge.tone)}`}
|
|
data-testid={`ra-expiry-badge-${profile.path_id}`}
|
|
>
|
|
RA cert: {raBadge.text}
|
|
</span>
|
|
</header>
|
|
|
|
<div className="flex flex-wrap gap-2 mb-3" data-testid={`profile-badges-${profile.path_id}`}>
|
|
<span className={`text-[11px] uppercase tracking-wide px-2 py-0.5 rounded border ${pillClass(profile.challenge_password_set)}`}>
|
|
Challenge password{profile.challenge_password_set ? ' set' : ' MISSING'}
|
|
</span>
|
|
<span className={`text-[11px] uppercase tracking-wide px-2 py-0.5 rounded border ${pillClass(profile.mtls_enabled)}`}>
|
|
mTLS {profile.mtls_enabled ? 'enabled' : 'disabled'}
|
|
</span>
|
|
<span className={`text-[11px] uppercase tracking-wide px-2 py-0.5 rounded border ${pillClass(intuneEnabled)}`}>
|
|
Intune {intuneEnabled ? 'enabled' : 'disabled'}
|
|
</span>
|
|
</div>
|
|
|
|
<dl className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs text-ink-muted">
|
|
<div>
|
|
<dt className="font-semibold text-ink">RA cert subject</dt>
|
|
<dd className="font-mono text-[11px]">{profile.ra_cert_subject || '(not loaded)'}</dd>
|
|
</div>
|
|
{profile.ra_cert_not_after && (
|
|
<div>
|
|
<dt className="font-semibold text-ink">RA cert expires</dt>
|
|
<dd>{formatDateTime(profile.ra_cert_not_after)}</dd>
|
|
</div>
|
|
)}
|
|
{profile.mtls_enabled && profile.mtls_trust_bundle_path && (
|
|
<div>
|
|
<dt className="font-semibold text-ink">mTLS trust bundle</dt>
|
|
<dd className="font-mono text-[11px]">{profile.mtls_trust_bundle_path}</dd>
|
|
</div>
|
|
)}
|
|
</dl>
|
|
|
|
{intuneEnabled && (
|
|
<div className="mt-4 pt-3 border-t border-surface-border flex justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={() => onViewIntuneDetails(profile.path_id)}
|
|
className="text-xs text-brand-600 hover:text-brand-800 font-medium"
|
|
data-testid={`view-intune-details-${profile.path_id}`}
|
|
>
|
|
View Intune details →
|
|
</button>
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// =============================================================================
|
|
// Intune Monitoring tab — the existing Phase 9.4 deep-dive surface.
|
|
// =============================================================================
|
|
|
|
interface ConfirmReloadModalProps {
|
|
profile: IntuneStatsSnapshot;
|
|
onCancel: () => void;
|
|
onConfirm: () => void;
|
|
pending: boolean;
|
|
errorMessage?: string;
|
|
}
|
|
|
|
function ConfirmReloadModal({ profile, onCancel, onConfirm, pending, errorMessage }: ConfirmReloadModalProps) {
|
|
const pathLabel = profile.path_id || '(legacy /scep root)';
|
|
return (
|
|
<div
|
|
role="dialog"
|
|
aria-labelledby="reload-trust-title"
|
|
aria-modal="true"
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
|
|
>
|
|
<div className="bg-surface w-full max-w-md rounded-lg shadow-xl border border-surface-border p-6">
|
|
<h3 id="reload-trust-title" className="text-base font-semibold text-ink mb-2">
|
|
Reload Intune trust anchor
|
|
</h3>
|
|
<p className="text-sm text-ink-muted mb-4">
|
|
This re-reads <code className="text-xs">{profile.trust_anchor_path}</code> from disk and atomically
|
|
swaps the trust pool for SCEP profile <strong>{pathLabel}</strong>. Equivalent to sending
|
|
<code className="text-xs"> SIGHUP </code> to the server. If the new file fails to parse, the
|
|
previous trust pool stays in place — enrollments keep working off the old trust anchor while you
|
|
fix the file.
|
|
</p>
|
|
{errorMessage && (
|
|
<div className="mb-3 rounded border border-red-300 bg-red-50 p-3 text-xs text-red-800">
|
|
{errorMessage}
|
|
</div>
|
|
)}
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
disabled={pending}
|
|
className="px-3 py-1.5 text-sm rounded border border-surface-border bg-surface hover:bg-surface-alt"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onConfirm}
|
|
disabled={pending}
|
|
className="px-3 py-1.5 text-sm rounded bg-brand-500 text-white hover:bg-brand-600 disabled:opacity-50"
|
|
>
|
|
{pending ? 'Reloading…' : 'Reload trust anchor'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface IntuneTabProps {
|
|
profiles: IntuneStatsSnapshot[];
|
|
isLoading: boolean;
|
|
onRequestReload: (profile: IntuneStatsSnapshot) => void;
|
|
highlightPathID: string | null;
|
|
events: AuditEvent[];
|
|
eventsLoading: boolean;
|
|
}
|
|
|
|
function IntuneTab({ profiles, isLoading, onRequestReload, highlightPathID, events, eventsLoading }: IntuneTabProps) {
|
|
if (isLoading) {
|
|
return <p className="text-sm text-ink-muted px-1 py-6">Loading Intune monitoring data…</p>;
|
|
}
|
|
const intuneProfiles = profiles.filter(p => p.enabled);
|
|
return (
|
|
<>
|
|
{intuneProfiles.length === 0 && (
|
|
<div className="rounded border border-amber-300 bg-amber-50 p-4 text-sm text-amber-900 mb-4">
|
|
No SCEP profile has Intune enabled. Set
|
|
<code className="mx-1">CERTCTL_SCEP_PROFILE_<NAME>_INTUNE_ENABLED=true</code>
|
|
plus the matching trust-anchor path env var, then restart the server.
|
|
</div>
|
|
)}
|
|
{intuneProfiles.map(p => (
|
|
<IntuneProfileCard
|
|
key={p.path_id || '(root)'}
|
|
profile={p}
|
|
onRequestReload={onRequestReload}
|
|
highlighted={highlightPathID === p.path_id}
|
|
/>
|
|
))}
|
|
|
|
<section className="bg-surface border border-surface-border rounded-lg mt-6">
|
|
<div className="px-4 py-3 border-b border-surface-border">
|
|
<h3 className="text-sm font-semibold text-ink">
|
|
Recent Intune-dispatched enrollments (last 50)
|
|
</h3>
|
|
<p className="text-xs text-ink-muted">
|
|
Filtered to <code>action=scep_pkcsreq_intune</code> + <code>action=scep_renewalreq_intune</code>.
|
|
Refreshes every 60s.
|
|
</p>
|
|
</div>
|
|
{eventsLoading ? (
|
|
<p className="text-sm text-ink-muted px-4 py-6">Loading audit log…</p>
|
|
) : (
|
|
<RecentEventsTable events={events.slice(0, 50)} testID="intune-failures-table" emptyMessage="No recent Intune-dispatched enrollment events. Counters stay at zero until the first device hits a SCEP profile with Intune enabled." />
|
|
)}
|
|
</section>
|
|
</>
|
|
);
|
|
}
|
|
|
|
interface IntuneProfileCardProps {
|
|
profile: IntuneStatsSnapshot;
|
|
onRequestReload: (profile: IntuneStatsSnapshot) => void;
|
|
highlighted: boolean;
|
|
}
|
|
|
|
function IntuneProfileCard({ profile, onRequestReload, highlighted }: IntuneProfileCardProps) {
|
|
const pathLabel = profile.path_id || '(legacy /scep root)';
|
|
const days = soonestExpiryDays(profile.trust_anchors);
|
|
const badge = expiryBadge(days, days !== null && days < 0);
|
|
const cardClass = highlighted
|
|
? 'bg-surface border-2 border-brand-400 rounded-lg p-5 mb-4 shadow-sm'
|
|
: 'bg-surface border border-surface-border rounded-lg p-5 mb-4';
|
|
|
|
return (
|
|
<section className={cardClass} data-testid={`profile-card-${profile.path_id}`}>
|
|
<header className="flex items-center justify-between mb-3">
|
|
<div>
|
|
<h3 className="text-base font-semibold text-ink">{pathLabel}</h3>
|
|
<p className="text-xs text-ink-muted">
|
|
Issuer: {profile.issuer_id}
|
|
{profile.audience && <> · Audience: <code>{profile.audience}</code></>}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span
|
|
className={`text-xs px-2 py-0.5 rounded-full font-medium ${badgeClass(badge.tone)}`}
|
|
data-testid={`expiry-badge-${profile.path_id}`}
|
|
>
|
|
Trust anchor: {badge.text}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => onRequestReload(profile)}
|
|
className="text-xs px-2 py-1 rounded border border-surface-border bg-surface hover:bg-surface-alt"
|
|
data-testid={`reload-button-${profile.path_id}`}
|
|
>
|
|
Reload trust
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
|
|
{COUNTER_LABEL_ORDER.map(label => {
|
|
const value = profile.counters?.[label] ?? 0;
|
|
const presentation = COUNTER_PRESENTATION[label];
|
|
return (
|
|
<div key={label} className="border border-surface-border rounded p-2">
|
|
<div className={`text-lg font-semibold ${TONE_CLASS[presentation.tone]}`} data-testid={`counter-${profile.path_id}-${label}`}>
|
|
{value}
|
|
</div>
|
|
<div className="text-[11px] text-ink-muted uppercase tracking-wide">{presentation.label}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<dl className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs text-ink-muted">
|
|
<div>
|
|
<dt className="font-semibold text-ink">Replay cache size</dt>
|
|
<dd>{profile.replay_cache_size}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="font-semibold text-ink">Per-device rate limit</dt>
|
|
<dd>{profile.rate_limit_disabled ? 'Disabled' : 'Active'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="font-semibold text-ink">Trust anchors</dt>
|
|
<dd>{profile.trust_anchors?.length ?? 0}</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
{profile.trust_anchors && profile.trust_anchors.length > 0 && (
|
|
<details className="mt-3 text-xs text-ink-muted">
|
|
<summary className="cursor-pointer font-semibold text-ink">Trust anchor details</summary>
|
|
<table className="mt-2 w-full text-left">
|
|
<thead>
|
|
<tr className="text-[11px] text-ink-muted uppercase">
|
|
<th className="py-1 pr-2">Subject</th>
|
|
<th className="py-1 pr-2">Not after</th>
|
|
<th className="py-1">Days to expiry</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{profile.trust_anchors.map(a => (
|
|
<tr key={`${profile.path_id}-${a.subject}-${a.not_after}`} className="border-t border-surface-border">
|
|
<td className="py-1 pr-2 font-mono">{a.subject || '(empty CN)'}</td>
|
|
<td className="py-1 pr-2">{formatDateTime(a.not_after)}</td>
|
|
<td className={`py-1 ${a.expired ? 'text-red-600 font-semibold' : ''}`}>
|
|
{a.expired ? 'EXPIRED' : a.days_to_expiry}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</details>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// =============================================================================
|
|
// Recent Activity tab — full SCEP audit log filter.
|
|
// =============================================================================
|
|
|
|
interface ActivityTabProps {
|
|
events: AuditEvent[];
|
|
isLoading: boolean;
|
|
filter: ActivityFilter;
|
|
setFilter: (f: ActivityFilter) => void;
|
|
}
|
|
|
|
function activityFilterMatches(filter: ActivityFilter, action: string): boolean {
|
|
switch (filter) {
|
|
case 'all':
|
|
return true;
|
|
case 'initial':
|
|
return action === 'scep_pkcsreq' || action === 'scep_pkcsreq_intune';
|
|
case 'renewal':
|
|
return action === 'scep_renewalreq' || action === 'scep_renewalreq_intune';
|
|
case 'intune':
|
|
return action === 'scep_pkcsreq_intune' || action === 'scep_renewalreq_intune';
|
|
case 'static':
|
|
return action === 'scep_pkcsreq' || action === 'scep_renewalreq';
|
|
}
|
|
}
|
|
|
|
function ActivityTab({ events, isLoading, filter, setFilter }: ActivityTabProps) {
|
|
const filtered = events.filter(e => activityFilterMatches(filter, e.action));
|
|
return (
|
|
<section className="bg-surface border border-surface-border rounded-lg" data-testid="activity-tab">
|
|
<div className="px-4 py-3 border-b border-surface-border">
|
|
<h3 className="text-sm font-semibold text-ink">SCEP enrollment audit log (last 100)</h3>
|
|
<p className="text-xs text-ink-muted mb-3">
|
|
Merged across <code>scep_pkcsreq</code> + <code>scep_renewalreq</code> +
|
|
<code> scep_pkcsreq_intune</code> + <code>scep_renewalreq_intune</code>. Refreshes every 60s.
|
|
</p>
|
|
<div className="flex flex-wrap gap-2" data-testid="activity-filter-chips">
|
|
{(['all', 'initial', 'renewal', 'intune', 'static'] as const).map(f => (
|
|
<button
|
|
key={f}
|
|
type="button"
|
|
onClick={() => setFilter(f)}
|
|
className={`text-xs px-2 py-1 rounded border ${
|
|
filter === f
|
|
? 'bg-brand-100 text-brand-800 border-brand-300'
|
|
: 'bg-surface text-ink-muted border-surface-border hover:bg-surface-alt'
|
|
}`}
|
|
data-testid={`activity-filter-${f}`}
|
|
>
|
|
{f === 'all' ? 'All' : f.charAt(0).toUpperCase() + f.slice(1)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{isLoading ? (
|
|
<p className="text-sm text-ink-muted px-4 py-6">Loading audit log…</p>
|
|
) : (
|
|
<RecentEventsTable
|
|
events={filtered.slice(0, 100)}
|
|
testID="activity-events-table"
|
|
emptyMessage={
|
|
events.length === 0
|
|
? 'No SCEP enrollment events recorded yet.'
|
|
: 'No events match the current filter — try a different chip.'
|
|
}
|
|
/>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// =============================================================================
|
|
// Shared events table.
|
|
// =============================================================================
|
|
|
|
interface RecentEventsTableProps {
|
|
events: AuditEvent[];
|
|
testID: string;
|
|
emptyMessage: string;
|
|
}
|
|
|
|
function RecentEventsTable({ events, testID, emptyMessage }: RecentEventsTableProps) {
|
|
if (events.length === 0) {
|
|
return <p className="text-sm text-ink-muted px-4 py-6">{emptyMessage}</p>;
|
|
}
|
|
return (
|
|
<table className="w-full text-sm" data-testid={testID}>
|
|
<thead className="text-xs text-ink-muted uppercase tracking-wide">
|
|
<tr>
|
|
<th className="py-2 pl-4 pr-2 text-left">Timestamp</th>
|
|
<th className="py-2 pr-2 text-left">Action</th>
|
|
<th className="py-2 pr-2 text-left">Resource</th>
|
|
<th className="py-2 pr-4 text-left">Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{events.map(e => (
|
|
<tr key={e.id} className="border-t border-surface-border">
|
|
<td className="py-2 pl-4 pr-2 font-mono text-xs">{formatDateTime(e.timestamp)}</td>
|
|
<td className="py-2 pr-2">{e.action}</td>
|
|
<td className="py-2 pr-2">{e.resource_type} · <code className="text-xs">{e.resource_id}</code></td>
|
|
<td className="py-2 pr-4 text-xs text-ink-muted">
|
|
{e.details ? Object.entries(e.details).map(([k, v]) => `${k}=${typeof v === 'object' ? JSON.stringify(v) : String(v)}`).join(' · ') : '-'}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
}
|
|
|
|
// =============================================================================
|
|
// Top-level page.
|
|
// =============================================================================
|
|
|
|
// pickInitialTab honors three signals (precedence high → low):
|
|
// 1. ?tab=intune|activity in the query string (deep link)
|
|
// 2. Pathname ending in /scep/intune (legacy route alias from
|
|
// Phase 9.4; preserved so external bookmarks land on Intune)
|
|
// 3. Default to 'profiles'
|
|
function pickInitialTab(searchParams: URLSearchParams, pathname: string): TabId {
|
|
const fromQuery = searchParams.get('tab');
|
|
if (fromQuery === 'intune' || fromQuery === 'activity') return fromQuery;
|
|
if (pathname.endsWith('/scep/intune')) return 'intune';
|
|
return 'profiles';
|
|
}
|
|
|
|
export default function SCEPAdminPage() {
|
|
const auth = useAuth();
|
|
const adminAccess = !auth.authRequired || auth.admin;
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const location = useLocation();
|
|
|
|
const [activeTab, setActiveTab] = useState<TabId>(() => pickInitialTab(searchParams, location.pathname));
|
|
const [highlightPathID, setHighlightPathID] = useState<string | null>(searchParams.get('profile'));
|
|
const [reloadTarget, setReloadTarget] = useState<IntuneStatsSnapshot | null>(null);
|
|
const [reloadError, setReloadError] = useState<string | undefined>(undefined);
|
|
const [activityFilter, setActivityFilter] = useState<ActivityFilter>('all');
|
|
|
|
// Keep URL in sync with tab + highlighted profile so deep links survive
|
|
// page reloads + browser back/forward.
|
|
useEffect(() => {
|
|
const next = new URLSearchParams(searchParams);
|
|
if (activeTab === 'profiles') {
|
|
next.delete('tab');
|
|
} else {
|
|
next.set('tab', activeTab);
|
|
}
|
|
if (highlightPathID && activeTab === 'intune') {
|
|
next.set('profile', highlightPathID);
|
|
} else {
|
|
next.delete('profile');
|
|
}
|
|
if (next.toString() !== searchParams.toString()) {
|
|
setSearchParams(next, { replace: true });
|
|
}
|
|
}, [activeTab, highlightPathID, searchParams, setSearchParams]);
|
|
|
|
// Always-present per-profile data (Profiles tab).
|
|
const profilesQuery = useQuery({
|
|
queryKey: ['admin', 'scep', 'profiles'],
|
|
queryFn: getAdminSCEPProfiles,
|
|
enabled: adminAccess,
|
|
refetchInterval: 30_000,
|
|
});
|
|
|
|
// Intune deep-dive data (Intune tab).
|
|
const intuneStatsQuery = useQuery({
|
|
queryKey: ['admin', 'scep', 'intune', 'stats'],
|
|
queryFn: getAdminSCEPIntuneStats,
|
|
enabled: adminAccess && activeTab === 'intune',
|
|
refetchInterval: 30_000,
|
|
});
|
|
|
|
// Audit log queries — four parallel queries (one per SCEP action) so
|
|
// both the Intune tab's recent-failures table and the Activity tab's
|
|
// full SCEP audit feed can pull from the same React Query cache.
|
|
const auditQueries = SCEP_AUDIT_ACTIONS.map(action =>
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
useQuery({
|
|
queryKey: ['audit', { action }],
|
|
queryFn: () => getAuditEvents({ action }),
|
|
enabled: adminAccess && (activeTab === 'intune' || activeTab === 'activity'),
|
|
refetchInterval: 60_000,
|
|
}),
|
|
);
|
|
const allAuditEvents: AuditEvent[] = useMemo(() => {
|
|
const merged: AuditEvent[] = [];
|
|
for (const q of auditQueries) {
|
|
if (q.data?.data) merged.push(...q.data.data);
|
|
}
|
|
return merged.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [auditQueries.map(q => q.dataUpdatedAt).join('|')]);
|
|
const auditLoading = auditQueries.some(q => q.isLoading);
|
|
const intuneOnlyEvents = useMemo(
|
|
() =>
|
|
allAuditEvents.filter(
|
|
e => e.action === 'scep_pkcsreq_intune' || e.action === 'scep_renewalreq_intune',
|
|
),
|
|
[allAuditEvents],
|
|
);
|
|
|
|
const reloadMutation = useTrackedMutation<
|
|
Awaited<ReturnType<typeof reloadAdminSCEPIntuneTrust>>,
|
|
Error,
|
|
string
|
|
>({
|
|
mutationFn: (pathID: string) => reloadAdminSCEPIntuneTrust(pathID),
|
|
invalidates: [
|
|
['admin', 'scep', 'intune', 'stats'],
|
|
['admin', 'scep', 'profiles'],
|
|
],
|
|
onSuccess: () => {
|
|
setReloadTarget(null);
|
|
setReloadError(undefined);
|
|
},
|
|
onError: (err: Error) => {
|
|
setReloadError(err.message);
|
|
},
|
|
});
|
|
|
|
if (auth.authRequired && !auth.admin) {
|
|
return (
|
|
<>
|
|
<PageHeader title="SCEP Administration" subtitle="Admin-only observability surface" />
|
|
<div className="p-6">
|
|
<ErrorState
|
|
error={new Error('Admin access required: this page exposes per-profile RA cert expiries, mTLS bundle paths, Intune trust anchor expiries, and an admin-only reload action. Sign in with an admin-tagged API key to view it.')}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const profiles = profilesQuery.data?.profiles ?? [];
|
|
const intuneProfiles = intuneStatsQuery.data?.profiles ?? [];
|
|
|
|
const handleViewIntuneDetails = (pathID: string) => {
|
|
setHighlightPathID(pathID);
|
|
setActiveTab('intune');
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
title="SCEP Administration"
|
|
subtitle={`${profiles.length} SCEP profile${profiles.length === 1 ? '' : 's'} configured · per-profile observability + Intune monitoring + recent activity`}
|
|
action={
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
void profilesQuery.refetch();
|
|
if (activeTab === 'intune') void intuneStatsQuery.refetch();
|
|
}}
|
|
className="text-xs px-3 py-1.5 rounded border border-surface-border bg-surface hover:bg-surface-alt"
|
|
data-testid="refresh-stats-button"
|
|
>
|
|
Refresh now
|
|
</button>
|
|
}
|
|
/>
|
|
<div className="border-b border-surface-border bg-surface px-6">
|
|
<nav className="flex gap-1 -mb-px" data-testid="scep-admin-tabs">
|
|
{(['profiles', 'intune', 'activity'] as TabId[]).map(t => (
|
|
<button
|
|
key={t}
|
|
type="button"
|
|
onClick={() => setActiveTab(t)}
|
|
className={`px-4 py-2.5 text-sm border-b-2 transition-colors ${
|
|
activeTab === t
|
|
? 'border-brand-500 text-brand-700 font-semibold'
|
|
: 'border-transparent text-ink-muted hover:text-ink hover:border-surface-border'
|
|
}`}
|
|
data-testid={`tab-${t}`}
|
|
aria-pressed={activeTab === t}
|
|
>
|
|
{TAB_LABELS[t]}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="p-6 overflow-y-auto">
|
|
{profilesQuery.error && activeTab === 'profiles' && (
|
|
<ErrorState error={profilesQuery.error as Error} onRetry={() => profilesQuery.refetch()} />
|
|
)}
|
|
{intuneStatsQuery.error && activeTab === 'intune' && (
|
|
<ErrorState error={intuneStatsQuery.error as Error} onRetry={() => intuneStatsQuery.refetch()} />
|
|
)}
|
|
|
|
{activeTab === 'profiles' && !profilesQuery.error && (
|
|
<ProfilesTab
|
|
profiles={profiles}
|
|
isLoading={profilesQuery.isLoading}
|
|
onViewIntuneDetails={handleViewIntuneDetails}
|
|
/>
|
|
)}
|
|
|
|
{activeTab === 'intune' && !intuneStatsQuery.error && (
|
|
<IntuneTab
|
|
profiles={intuneProfiles}
|
|
isLoading={intuneStatsQuery.isLoading}
|
|
onRequestReload={profile => {
|
|
setReloadError(undefined);
|
|
setReloadTarget(profile);
|
|
}}
|
|
highlightPathID={highlightPathID}
|
|
events={intuneOnlyEvents}
|
|
eventsLoading={auditLoading}
|
|
/>
|
|
)}
|
|
|
|
{activeTab === 'activity' && (
|
|
<ActivityTab
|
|
events={allAuditEvents}
|
|
isLoading={auditLoading}
|
|
filter={activityFilter}
|
|
setFilter={setActivityFilter}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{reloadTarget && (
|
|
<ConfirmReloadModal
|
|
profile={reloadTarget}
|
|
onCancel={() => {
|
|
setReloadTarget(null);
|
|
setReloadError(undefined);
|
|
}}
|
|
onConfirm={() => reloadMutation.mutate(reloadTarget.path_id)}
|
|
pending={reloadMutation.isPending}
|
|
errorMessage={reloadError}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|