mirror of
https://github.com/shankar0123/certctl.git
synced 2026-06-13 19:08:52 +00:00
refactor(scep-gui): rebrand SCEP admin surface to per-profile tabbed interface (Profiles + Intune + Recent Activity)
Phase 9 follow-up to the SCEP RFC 8894 + Intune master bundle. The
Phase 9.4 GUI shipped 'SCEP Intune Monitoring' at /scep/intune, which
made the per-profile observability surface look Intune-only — operators
running EJBCA + Jamf would never click that nav link expecting per-
profile RA cert + mTLS observability. The page is per-profile keyed
under the hood; this commit rebrands + restructures so the surface
matches what operators actually need.
Spec: cowork/scep-gui-restructure-prompt.md.
User-visible change:
- Nav link renamed: 'SCEP Intune' → 'SCEP Admin'.
- Route: /scep is the new canonical path; /scep/intune kept as a
backward-compat alias that lands directly on the Intune tab.
- Page header: 'SCEP Administration'.
- Three tabs:
* Profiles (default) — per-profile lean cards with RA cert
expiry countdown, mTLS sibling-route status badge, Intune
enabled/disabled badge, challenge-password-set indicator.
'View Intune details →' link on Intune-enabled cards
deep-links into the Intune tab.
* Intune Monitoring — the existing Phase 9.4 deep-dive
(per-status counters, trust anchor expiry, recent failures
table, reload-trust button + confirmation modal).
* Recent Activity — full SCEP audit log filter merging all
four action codes (scep_pkcsreq + scep_renewalreq +
scep_pkcsreq_intune + scep_renewalreq_intune); chip filters
for All / Initial / Renewal / Intune / Static.
Backend:
* internal/service/scep.go — new SCEPProfileStatsSnapshot type +
IntuneSection sub-block + ProfileStats(now) accessor. Adds
raCertSubject/raCertNotBefore/raCertNotAfter + mtlsEnabled +
mtlsTrustBundlePath fields with SetRACert + SetMTLSConfig setters.
Existing IntuneStatsSnapshot + IntuneStats(now) preserved
UNCHANGED for /admin/scep/intune/stats backward compat (the
JSON shape stays byte-stable for external consumers — the
aliasing approach the prompt initially suggested doesn't work
because the new shape nests Intune while the old one is flat).
ChallengePasswordSet is derived from challengePassword != ''
(the secret value itself is never surfaced).
* internal/api/handler/admin_scep_intune.go — new Profiles handler
method on AdminSCEPIntuneHandler with the same M-008 admin gate.
AdminSCEPIntuneServiceImpl extended (in place; same
map[string]*service.SCEPService) to satisfy the new
AdminSCEPProfileService interface. Single handler file gets the
third method so the M-008 pin entry count stays steady (no new
file, no new triplet of admin-gate test files — just three new
Profiles tests inside the existing test file).
* internal/api/router/router.go — one new route
'GET /api/v1/admin/scep/profiles' registered to
reg.AdminSCEPIntune.Profiles. HandlerRegistry unchanged.
* api/openapi.yaml — new operation 'listSCEPProfiles' documenting
the request body / response shape / error mapping. Existing
Intune entries unchanged.
* cmd/server/main.go — per-profile loop now calls
scepService.SetMTLSConfig(profile.MTLSEnabled,
profile.MTLSClientCATrustBundlePath) right after SetPathID, and
scepService.SetRACert(raCert) right after loadSCEPRAPair returns
the leaf cert. Both setters are nil-safe.
* internal/api/handler/m008_admin_gate_test.go — extended the
existing admin_scep_intune.go entry's justification to mention
the third endpoint. No new map entry needed (file already
listed).
Backend tests (8 new):
* TestAdminSCEPProfiles_NonAdmin_Returns403
* TestAdminSCEPProfiles_AdminExplicitFalse_Returns403
* TestAdminSCEPProfiles_AdminPermitted_ForwardsActor — also pins
that Intune-enabled profiles emit an 'intune' sub-block while
Intune-disabled profiles OMIT it.
* TestAdminSCEPProfiles_RejectsNonGetMethod
* TestAdminSCEPProfiles_PropagatesServiceError
* TestAdminSCEPProfilesServiceImpl_NilMapReturnsEmpty
* (existing 16 Phase 9 admin tests still pass — backward-compat
preserved)
Frontend:
* web/src/api/types.ts — new SCEPProfileStatsSnapshot +
IntuneSection + SCEPProfilesResponse types. Existing
IntuneStatsSnapshot et al unchanged.
* web/src/api/client.ts — new getAdminSCEPProfiles helper.
* web/src/pages/SCEPAdminPage.tsx — full rewrite as the tabbed
surface. Reuses the existing ConfirmReloadModal and Intune
deep-dive card components verbatim; adds ProfileSummaryCard
(lean card for the Profiles tab) and ActivityTab. URL state
sync via useSearchParams so deep links survive reloads + browser
back/forward. The legacy /scep/intune route alias defaults the
activeTab to 'intune' on mount.
* web/src/main.tsx — new <Route path='scep' /> + preserved
<Route path='scep/intune' /> alias. Both render SCEPAdminPage.
* web/src/components/Layout.tsx — nav link rebranded:
label 'SCEP Intune' → 'SCEP Admin', to '/scep/intune' → '/scep'.
Frontend tests (20 — full rebuild):
* Admin gate (non-admin sees gated banner + zero admin API calls)
* Profiles tab default + Intune tab tabswitch + ?tab=intune deep
link + legacy /scep/intune alias all land on Intune
* Profiles tab status badges (Intune + mTLS + challenge-set)
reflect each profile's flags
* RA cert expiry tone bands (good ≥30d / warn 7-30d / bad <7d /
EXPIRED) verified across three fixture profiles
* 'View Intune details →' only renders for Intune-enabled
profiles AND switches tabs on click
* Empty-state banner when no profiles configured
* Intune tab counters render with the existing Phase 9 deep-dive
shape; reload modal Open/Confirm/Cancel/Error paths all pinned
* Recent Activity tab merges all four SCEP audit actions across
four parallel useQuery calls; filter chips
(all/initial/renewal/intune/static) narrow correctly
* Error path surfaces ErrorState on the active tab
Docs:
* docs/scep-intune.md — Operational monitoring section heading
expanded to '(SCEP Administration → Intune Monitoring tab)'.
Page-surface description rewritten for the tabbed shape;
admin-endpoints list extended with the new /admin/scep/profiles
entry.
* docs/architecture.md — Microsoft Intune Connector trust anchor
subsection updated to reference the Intune Monitoring tab inside
the SCEP Administration page + lists all three admin endpoints.
* docs/legacy-est-scep.md — forward-ref expanded with a parallel
sentence for the per-profile observability surface (independent
of Intune).
* README.md — Enrollment Protocols bullet for Intune updated to
'admin GUI SCEP Administration page at /scep' with the three
tabs called out.
Verification:
* gofmt clean on touched files
* go vet ./... clean
* staticcheck on intune+service+handler+router+cmd-server clean
* go test -short across intune+service+handler+router+cmd-server:
all green (existing Phase 9 tests + new Profiles tests)
* Frontend tsc --noEmit clean
* Vitest: 20/20 SCEPAdminPage tests + 3/3 sibling AuditPage tests
pass
* G-3 docs-drift CI guard reproduced locally: clean (no new env
vars; existing CERTCTL_SCEP_ allowlist prefix covers everything)
* M-009 hard-zero useMutation guard reproduced locally: clean
(the existing reload mutation already used useTrackedMutation
from the Phase 9 follow-up commit 96e81b6)
* openapi-parity test green (new GET /api/v1/admin/scep/profiles
operation documented)
* M-008 admin-gate scanner green (existing admin_scep_intune.go
entry covers all three handler methods; the test scanner
enforces the triplet by file, not by endpoint, and the new
Profiles triplet was added to the existing test file)
Backward compat preserved:
* /api/v1/admin/scep/intune/stats unchanged — same JSON shape,
same error codes, same M-008 gate
* /api/v1/admin/scep/intune/reload-trust unchanged
* /scep/intune route still works (alias to /scep with activeTab=intune)
* IntuneStatsSnapshot Go type unchanged
* IntuneStats(now) accessor unchanged
Refs: cowork/scep-gui-restructure-prompt.md
cowork/scep-rfc8894-intune-master-prompt.md::Phase 9
Phase 11.5 (SCEP probe in scanner — opt-in) and Phase 12
(release prep + tag) of the master bundle resume after this.
This commit is contained in:
Shankar
+501
-152
@@ -1,28 +1,50 @@
|
||||
import { useState } from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { getAdminSCEPIntuneStats, reloadAdminSCEPIntuneTrust, getAuditEvents } from '../api/client';
|
||||
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 } from '../api/types';
|
||||
import type {
|
||||
IntuneStatsSnapshot,
|
||||
IntuneTrustAnchorInfo,
|
||||
AuditEvent,
|
||||
SCEPProfileStatsSnapshot,
|
||||
} from '../api/types';
|
||||
|
||||
// SCEP RFC 8894 + Intune master bundle Phase 9.4: per-profile Intune
|
||||
// Monitoring tab.
|
||||
// SCEP RFC 8894 + Intune master bundle Phase 9 follow-up
|
||||
// (cowork/scep-gui-restructure-prompt.md): per-profile SCEP
|
||||
// administration page with three tabs.
|
||||
//
|
||||
// Surfaces:
|
||||
// - Status banner per profile (trust anchor expiry countdown, rotates
|
||||
// when < 30 days; the soonest-to-expire anchor wins).
|
||||
// - Live counters table per profile (success / signature_invalid /
|
||||
// claim_mismatch / expired / wrong_audience / replay / rate_limited /
|
||||
// malformed / compliance_failed / not_yet_valid / unknown_version).
|
||||
// Polled every 30s via TanStack Query.
|
||||
// - Recent failures table (last 50) populated from the audit log
|
||||
// filtered to action=scep_pkcsreq_intune (and the renewal sibling).
|
||||
// - Trust anchor reload button (per-profile) with confirmation modal;
|
||||
// calls POST /api/v1/admin/scep/intune/reload-trust under the hood
|
||||
// (the SIGHUP-equivalent path).
|
||||
// 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.
|
||||
@@ -62,28 +84,179 @@ const TONE_CLASS: Record<'good' | 'warn' | 'bad', string> = {
|
||||
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 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).
|
||||
// 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; // any expired wins
|
||||
if (a.expired) return -1;
|
||||
if (a.days_to_expiry < min) min = a.days_to_expiry;
|
||||
}
|
||||
return min === Number.POSITIVE_INFINITY ? null : min;
|
||||
}
|
||||
|
||||
function expiryBadge(days: number | null): { text: string; tone: 'good' | 'warn' | 'bad' } {
|
||||
if (days === null) return { text: 'No trust anchors', tone: 'warn' };
|
||||
if (days < 0) return { text: 'EXPIRED', tone: 'bad' };
|
||||
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' };
|
||||
// =============================================================================
|
||||
// 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;
|
||||
@@ -140,39 +313,74 @@ function ConfirmReloadModal({ profile, onCancel, onConfirm, pending, errorMessag
|
||||
);
|
||||
}
|
||||
|
||||
interface ProfileCardProps {
|
||||
profile: IntuneStatsSnapshot;
|
||||
interface IntuneTabProps {
|
||||
profiles: IntuneStatsSnapshot[];
|
||||
isLoading: boolean;
|
||||
onRequestReload: (profile: IntuneStatsSnapshot) => void;
|
||||
highlightPathID: string | null;
|
||||
events: AuditEvent[];
|
||||
eventsLoading: boolean;
|
||||
}
|
||||
|
||||
function ProfileCard({ profile, onRequestReload }: ProfileCardProps) {
|
||||
const pathLabel = profile.path_id || '(legacy /scep root)';
|
||||
if (!profile.enabled) {
|
||||
return (
|
||||
<section className="bg-surface border border-surface-border rounded-lg p-5 mb-4" 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}</p>
|
||||
</div>
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-surface-alt text-ink-muted">
|
||||
Intune disabled
|
||||
</span>
|
||||
</header>
|
||||
<p className="text-sm text-ink-muted">
|
||||
This profile honors only the static challenge password. To enable Intune dispatch, set
|
||||
<code className="mx-1">CERTCTL_SCEP_PROFILE_{(profile.path_id || 'DEFAULT').toUpperCase()}_INTUNE_ENABLED=true</code>
|
||||
plus the matching trust-anchor path env var, then restart the server.
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
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);
|
||||
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="bg-surface border border-surface-border rounded-lg p-5 mb-4" data-testid={`profile-card-${profile.path_id}`}>
|
||||
<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>
|
||||
@@ -183,13 +391,7 @@ function ProfileCard({ profile, onRequestReload }: ProfileCardProps) {
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`text-xs px-2 py-0.5 rounded-full font-medium ${
|
||||
badge.tone === 'good'
|
||||
? 'bg-emerald-100 text-emerald-800'
|
||||
: badge.tone === 'warn'
|
||||
? 'bg-amber-100 text-amber-800'
|
||||
: 'bg-red-100 text-red-800'
|
||||
}`}
|
||||
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}
|
||||
@@ -264,16 +466,93 @@ function ProfileCard({ profile, onRequestReload }: ProfileCardProps) {
|
||||
);
|
||||
}
|
||||
|
||||
function RecentFailuresTable({ events }: { events: AuditEvent[] }) {
|
||||
// =============================================================================
|
||||
// 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">
|
||||
No recent Intune-dispatched enrollment events. Counters stay at zero until the first device hits a SCEP profile with Intune enabled.
|
||||
</p>
|
||||
);
|
||||
return <p className="text-sm text-ink-muted px-4 py-6">{emptyMessage}</p>;
|
||||
}
|
||||
return (
|
||||
<table className="w-full text-sm" data-testid="recent-failures-table">
|
||||
<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>
|
||||
@@ -298,50 +577,113 @@ function RecentFailuresTable({ events }: { events: AuditEvent[] }) {
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Top-level page.
|
||||
// =============================================================================
|
||||
|
||||
function pickTabFromQuery(value: string | null): TabId {
|
||||
if (value === 'intune' || value === 'activity') return value;
|
||||
return 'profiles';
|
||||
}
|
||||
|
||||
// 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');
|
||||
|
||||
const statsQuery = useQuery({
|
||||
queryKey: ['admin', 'scep', 'intune', 'stats'],
|
||||
queryFn: getAdminSCEPIntuneStats,
|
||||
enabled: !auth.authRequired || auth.admin, // skip the request entirely when non-admin
|
||||
// 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,
|
||||
});
|
||||
|
||||
// Audit-log filter: every Intune-dispatched enrollment (success + failure)
|
||||
// emits action=scep_pkcsreq_intune (initial) or scep_renewalreq_intune
|
||||
// (renewal). The audit endpoint accepts a single action filter; we fetch
|
||||
// both server-side via two queries and merge client-side rather than
|
||||
// adding a comma-separated filter that would require backend changes.
|
||||
const auditPKCSQuery = useQuery({
|
||||
queryKey: ['audit', { action: 'scep_pkcsreq_intune' }],
|
||||
queryFn: () => getAuditEvents({ action: 'scep_pkcsreq_intune' }),
|
||||
enabled: !auth.authRequired || auth.admin,
|
||||
refetchInterval: 60_000,
|
||||
});
|
||||
const auditRenewalQuery = useQuery({
|
||||
queryKey: ['audit', { action: 'scep_renewalreq_intune' }],
|
||||
queryFn: () => getAuditEvents({ action: 'scep_renewalreq_intune' }),
|
||||
enabled: !auth.authRequired || auth.admin,
|
||||
refetchInterval: 60_000,
|
||||
// Intune deep-dive data (Intune tab).
|
||||
const intuneStatsQuery = useQuery({
|
||||
queryKey: ['admin', 'scep', 'intune', 'stats'],
|
||||
queryFn: getAdminSCEPIntuneStats,
|
||||
enabled: adminAccess && activeTab === 'intune',
|
||||
refetchInterval: 30_000,
|
||||
});
|
||||
|
||||
// Bundle-8 / M-009 invalidation contract: trust-anchor reload changes
|
||||
// both the per-profile trust pool (reflected in IntuneStats) AND every
|
||||
// recently-failed Intune enrollment counter that might now succeed on
|
||||
// retry. We invalidate the stats key so the per-profile trust-anchor
|
||||
// panel reflects the new pool immediately; the audit log queries
|
||||
// remain on their 60s timer (a SIGHUP-equivalent reload doesn't
|
||||
// backfill new audit rows).
|
||||
// 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']],
|
||||
invalidates: [
|
||||
['admin', 'scep', 'intune', 'stats'],
|
||||
['admin', 'scep', 'profiles'],
|
||||
],
|
||||
onSuccess: () => {
|
||||
setReloadTarget(null);
|
||||
setReloadError(undefined);
|
||||
@@ -354,53 +696,36 @@ export default function SCEPAdminPage() {
|
||||
if (auth.authRequired && !auth.admin) {
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="SCEP Intune Monitoring" subtitle="Admin-only observability surface" />
|
||||
<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 trust anchor expiries and an admin-only reload action. Sign in with an admin-tagged API key to view it.')}
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (statsQuery.isLoading) {
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="SCEP Intune Monitoring" subtitle="Per-profile dispatcher state" />
|
||||
<div className="p-6 text-sm text-ink-muted">Loading per-profile stats…</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
const profiles = profilesQuery.data?.profiles ?? [];
|
||||
const intuneProfiles = intuneStatsQuery.data?.profiles ?? [];
|
||||
|
||||
if (statsQuery.error) {
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="SCEP Intune Monitoring" subtitle="Per-profile dispatcher state" />
|
||||
<div className="p-6">
|
||||
<ErrorState error={statsQuery.error as Error} onRetry={() => statsQuery.refetch()} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const profiles = statsQuery.data?.profiles ?? [];
|
||||
const events: AuditEvent[] = [
|
||||
...(auditPKCSQuery.data?.data ?? []),
|
||||
...(auditRenewalQuery.data?.data ?? []),
|
||||
]
|
||||
.sort((a, b) => b.timestamp.localeCompare(a.timestamp))
|
||||
.slice(0, 50);
|
||||
const handleViewIntuneDetails = (pathID: string) => {
|
||||
setHighlightPathID(pathID);
|
||||
setActiveTab('intune');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="SCEP Intune Monitoring"
|
||||
subtitle={`${profiles.length} SCEP profile${profiles.length === 1 ? '' : 's'} configured · counters auto-refresh every 30s`}
|
||||
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={() => statsQuery.refetch()}
|
||||
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"
|
||||
>
|
||||
@@ -408,41 +733,65 @@ export default function SCEPAdminPage() {
|
||||
</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">
|
||||
{profiles.length === 0 && (
|
||||
<div className="rounded border border-amber-300 bg-amber-50 p-4 text-sm text-amber-900 mb-4">
|
||||
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>
|
||||
{profilesQuery.error && activeTab === 'profiles' && (
|
||||
<ErrorState error={profilesQuery.error as Error} onRetry={() => profilesQuery.refetch()} />
|
||||
)}
|
||||
{profiles.map(p => (
|
||||
<ProfileCard
|
||||
key={p.path_id || '(root)'}
|
||||
profile={p}
|
||||
{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}
|
||||
/>
|
||||
))}
|
||||
)}
|
||||
|
||||
<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>
|
||||
{auditPKCSQuery.isLoading || auditRenewalQuery.isLoading ? (
|
||||
<p className="text-sm text-ink-muted px-4 py-6">Loading audit log…</p>
|
||||
) : (
|
||||
<RecentFailuresTable events={events} />
|
||||
)}
|
||||
</section>
|
||||
{activeTab === 'activity' && (
|
||||
<ActivityTab
|
||||
events={allAuditEvents}
|
||||
isLoading={auditLoading}
|
||||
filter={activityFilter}
|
||||
setFilter={setActivityFilter}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{reloadTarget && (
|
||||
|
||||
Reference in New Issue
Block a user