mirror of
https://github.com/shankar0123/certctl.git
synced 2026-06-07 15:11:29 +00:00
feat: frontend audit fixes, README accuracy pass, doc updates
Frontend audit (10 categories): lifecycle fields in types, new API functions (CRL, OCSP, deployments, updateIssuer/Target, getPolicy), issuer/owner/profile filters on CertificatesPage, last_renewal_at column, error_message column on JobsPage, full crypto policy UI on ProfilesPage (key algorithms, EKUs, SAN patterns), key info + CA badge on DiscoveryPage, edit modal on TargetDetailPage, tags field on certificate creation, darwin→macOS mapping on AgentFleetPage. 211 Vitest tests passing. README accuracy: test counts (1300+ Go, 211 frontend), page count (24), demo data (32 certs, 7 issuers, 180 days), endpoint count (97), MCP tools (80), CLI subcommands (10), moved shipped items out of "Coming in v2.1.0". Docs: architecture.md diagrams updated (Vault PKI, DigiCert, Traefik, Caddy added), features.md Vault/DigiCert status updated. Version bumped to v2.0.20. cli binary removed from git tracking. Testing guide Part 41 added (12 auto + 9 manual tests). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Shankar
@@ -62,6 +62,7 @@ certctl-agent
|
||||
certctl-cli
|
||||
/server
|
||||
/agent
|
||||
/cli
|
||||
|
||||
# Private strategy docs
|
||||
roadmap.md
|
||||
|
||||
@@ -43,7 +43,7 @@ timeline
|
||||
| [Migrate from acme.sh](docs/migrate-from-acmesh.md) | Migration guide for acme.sh users with DNS-01 scripts |
|
||||
| [certctl for cert-manager Users](docs/certctl-for-cert-manager-users.md) | Using certctl alongside cert-manager for non-Kubernetes infrastructure |
|
||||
|
||||
> **Next release:** v2.1.0 will be tagged after the full V2 feature suite passes manual QA across all 34 sections of the [testing guide](docs/testing-guide.md). Automated CI (1,471 Go tests + 193 frontend tests) gates every commit; the manual playbook covers integration, deployment, and UX verification that unit tests can't reach.
|
||||
> **Next release:** v2.1.0 will be tagged after the full V2 feature suite passes manual QA across all 34 sections of the [testing guide](docs/testing-guide.md). Automated CI (1,300+ Go tests + 211 frontend tests) gates every commit; the manual playbook covers integration, deployment, and UX verification that unit tests can't reach.
|
||||
|
||||
## Why certctl Exists
|
||||
|
||||
@@ -59,8 +59,8 @@ For a detailed comparison with CertKit, KeyTalk, and enterprise platforms (Venaf
|
||||
|
||||
certctl gives you a single pane of glass for every TLS certificate in your organization:
|
||||
|
||||
- **Web dashboard** — 22 operational pages: certificate inventory, deployment timeline with TLS verification, bulk operations (renew/revoke/reassign), discovery triage, network scan management, approval workflows, audit trail with CSV/JSON export, agent fleet overview with OS/arch grouping, short-lived credential monitoring, digest email preview
|
||||
- **REST API** — 99 endpoints under `/api/v1/` + `/.well-known/est/` for complete automation, with sparse fields, sort, cursor pagination, and time-range filters
|
||||
- **Web dashboard** — 24 operational pages: certificate inventory, deployment timeline with TLS verification, bulk operations (renew/revoke/reassign), discovery triage, network scan management, approval workflows, audit trail with CSV/JSON export, agent fleet overview with OS/arch grouping, short-lived credential monitoring, digest email preview
|
||||
- **REST API** — 97 endpoints under `/api/v1/` + `/.well-known/est/` for complete automation, with sparse fields, sort, cursor pagination, and time-range filters
|
||||
- **Agents** — generate private keys locally (ECDSA P-256), discover existing certs on disk (PEM/DER), submit CSRs only (private keys never leave your servers)
|
||||
- **Network scanner** — discovers certificates on TLS endpoints across CIDR ranges without requiring agents, concurrent scanning with configurable timeouts
|
||||
- **Certificate export** — PEM (JSON or file download) and PKCS#12 formats, with audit trail; private keys never included
|
||||
@@ -131,7 +131,7 @@ All connectors are pluggable — build your own by implementing the [connector i
|
||||
<tr>
|
||||
<td><a href="docs/screenshots/v2-policies.png"><img src="docs/screenshots/v2-policies.png" width="270" alt="Policies"></a><br><b>Policies</b><br><sub>Ownership, lifetime, renewal rules</sub></td>
|
||||
<td><a href="docs/screenshots/v2-profiles.png"><img src="docs/screenshots/v2-profiles.png" width="270" alt="Profiles"></a><br><b>Profiles</b><br><sub>Key types, max TTL, crypto constraints</sub></td>
|
||||
<td><a href="docs/screenshots/v2-issuers.png"><img src="docs/screenshots/v2-issuers.png" width="270" alt="Issuers"></a><br><b>Issuers</b><br><sub>Local CA, ACME, step-ca connectors</sub></td>
|
||||
<td><a href="docs/screenshots/v2-issuers.png"><img src="docs/screenshots/v2-issuers.png" width="270" alt="Issuers"></a><br><b>Issuers</b><br><sub>Local CA, ACME, step-ca, Vault PKI, DigiCert</sub></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="docs/screenshots/v2-targets.png"><img src="docs/screenshots/v2-targets.png" width="270" alt="Targets"></a><br><b>Targets</b><br><sub>NGINX, Apache, HAProxy, Traefik, Caddy deployment</sub></td>
|
||||
@@ -145,7 +145,7 @@ All connectors are pluggable — build your own by implementing the [connector i
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
> **22 operational GUI pages** covering the full certificate lifecycle: dashboard, certificates (list + detail with EKU badges, deployment timeline, TLS verification status), agents, fleet overview, jobs (with approval workflow), notifications, policies, profiles, issuers, targets (wizard with NGINX/Apache/HAProxy/Traefik/Caddy/F5/IIS), owners, teams, agent groups, audit trail, short-lived credentials, discovery triage, and network scan management.
|
||||
> **24 operational GUI pages** covering the full certificate lifecycle: dashboard, certificates (list + detail with EKU badges, deployment timeline, TLS verification status), agents, fleet overview, jobs (list + detail with approval workflow), notifications, policies, profiles, issuers (catalog + detail), targets (list + detail + wizard), owners, teams, agent groups, audit trail, short-lived credentials, discovery triage, network scan management, digest email preview, and observability metrics.
|
||||
|
||||
## Quick Start
|
||||
|
||||
@@ -166,7 +166,7 @@ docker compose -f deploy/docker-compose.yml up -d --build
|
||||
|
||||
Wait ~30 seconds, then open **http://localhost:8443** in your browser.
|
||||
|
||||
The dashboard comes pre-loaded with 35 demo certificates across 5 issuers, 8 agents, 90 days of job history, discovery scan data, and network scan targets — a realistic snapshot of a certificate inventory that looks like it's been running for months.
|
||||
The dashboard comes pre-loaded with 32 demo certificates across 7 issuers, 8 agents, 180 days of job history, discovery scan data, and network scan targets — a realistic snapshot of a certificate inventory that looks like it's been running for months.
|
||||
|
||||
Verify the API:
|
||||
```bash
|
||||
@@ -174,7 +174,7 @@ curl http://localhost:8443/health
|
||||
# {"status":"healthy"}
|
||||
|
||||
curl -s http://localhost:8443/api/v1/certificates | jq '.total'
|
||||
# 35
|
||||
# 32
|
||||
```
|
||||
|
||||
### Agent Install (One-Liner)
|
||||
@@ -374,7 +374,7 @@ make docker-clean # Stop + remove volumes
|
||||
|
||||
## API Overview
|
||||
|
||||
99 endpoints under `/api/v1/` + `/.well-known/est/`, all returning JSON. List endpoints support pagination, sparse field selection (`?fields=`), sort (`?sort=-notAfter`), time-range filters, and cursor-based pagination. Full request/response schemas in the [OpenAPI 3.1 spec](api/openapi.yaml).
|
||||
97 endpoints under `/api/v1/` + `/.well-known/est/`, all returning JSON. List endpoints support pagination, sparse field selection (`?fields=`), sort (`?sort=-notAfter`), time-range filters, and cursor-based pagination. Full request/response schemas in the [OpenAPI 3.1 spec](api/openapi.yaml).
|
||||
|
||||
### Key Endpoints
|
||||
```
|
||||
@@ -451,7 +451,7 @@ certctl-cli certs list --format json # JSON output (default: table)
|
||||
|
||||
## MCP Server (AI Integration)
|
||||
|
||||
certctl ships a standalone MCP (Model Context Protocol) server that exposes all 78 API endpoints as tools for AI assistants — Claude, Cursor, Windsurf, OpenClaw, VS Code Copilot, and any MCP-compatible client.
|
||||
certctl ships a standalone MCP (Model Context Protocol) server that exposes all 80 API endpoints as tools for AI assistants — Claude, Cursor, Windsurf, OpenClaw, VS Code Copilot, and any MCP-compatible client.
|
||||
|
||||
```bash
|
||||
# Install
|
||||
@@ -487,7 +487,7 @@ Core lifecycle management — Local CA + ACME v2 issuers, NGINX target connector
|
||||
|
||||
### V2: Operational Maturity
|
||||
|
||||
30 milestones complete, 1500+ tests. See the [Feature Inventory](docs/features.md) for details on every capability.
|
||||
30+ milestones complete, 1,500+ tests. See the [Feature Inventory](docs/features.md) for details on every capability.
|
||||
|
||||
**What shipped (all ✅):**
|
||||
|
||||
@@ -499,7 +499,7 @@ Core lifecycle management — Local CA + ACME v2 issuers, NGINX target connector
|
||||
- **Observability** — Prometheus + JSON metrics, 5 stats API endpoints, dashboard charts (heatmap, trends, distribution), agent fleet overview, structured logging
|
||||
- **EST Server** (RFC 7030) — device/WiFi certificate enrollment, PKCS#7 wire format, configurable issuer + profile binding
|
||||
- **MCP Server** — 78 API operations as AI tools for Claude, Cursor, and any MCP-compatible client
|
||||
- **CLI** — 12 subcommands (list/get/renew/revoke certs, agents, jobs, import, status), JSON/table output
|
||||
- **CLI** — 10 subcommands (list/get/renew/revoke certs, list agents/jobs, import, status, health, metrics), JSON/table output
|
||||
- **Notifications** — Email (SMTP), Webhooks, Slack, Microsoft Teams, PagerDuty, OpsGenie connectors
|
||||
- **API Enhancements** — sparse fields, sort, time-range filters, cursor pagination, immutable API audit logging
|
||||
- **Compliance Mapping** — SOC 2 Type II, PCI-DSS 4.0, NIST SP 800-57 alignment guides
|
||||
@@ -512,14 +512,17 @@ Core lifecycle management — Local CA + ACME v2 issuers, NGINX target connector
|
||||
- **Scheduled Certificate Digest** — HTML email digests with certificate stats, expiration timeline, job trends, and agent health; configurable daily/hourly/weekly briefings via SMTP
|
||||
- **Helm Chart** — Production-ready Kubernetes with server Deployment, PostgreSQL StatefulSet with PVC, Agent DaemonSet, security contexts, resource limits, optional Ingress
|
||||
|
||||
**Coming in v2.1.0:**
|
||||
- Dynamic issuer and target configuration via GUI (no env var restarts)
|
||||
**Also shipped:**
|
||||
- Issuer catalog page (see all supported CAs, configure from dashboard)
|
||||
- First-run onboarding wizard
|
||||
- Vault PKI and DigiCert CertCentral issuer connectors (Beta)
|
||||
- Turnkey deployment examples (ACME+NGINX, wildcard+DNS-01, private CA+Traefik, step-ca+HAProxy, multi-issuer)
|
||||
- Migration guides (Certbot, acme.sh, cert-manager complement)
|
||||
- One-line agent install script with cross-compiled binaries
|
||||
|
||||
**Coming in v2.1.0:**
|
||||
- Dynamic issuer and target configuration via GUI (no env var restarts)
|
||||
- First-run onboarding wizard
|
||||
|
||||
### V3: certctl Pro
|
||||
|
||||
Team access controls, identity provider integration, enterprise deployment targets, compliance and risk scoring, advanced fleet operations, event-driven architecture, advanced search, real-time operational views.
|
||||
|
||||
@@ -80,13 +80,16 @@ flowchart TB
|
||||
CA2["ACME\n(HTTP-01 + DNS-01 + DNS-PERSIST-01)\n(EAB, ZeroSSL auto-EAB)"]
|
||||
CA3["step-ca\n(/sign API)"]
|
||||
CA4["OpenSSL / Custom CA\n(script-based)"]
|
||||
CA6["Vault PKI\n(planned)"]
|
||||
CA6["Vault PKI\n(token auth, /sign API)"]
|
||||
CA7["DigiCert CertCentral\n(async order model)"]
|
||||
end
|
||||
|
||||
subgraph "Target Systems"
|
||||
T1["NGINX\n(file write + reload)"]
|
||||
T4["Apache httpd\n(file write + reload)"]
|
||||
T5["HAProxy\n(combined PEM + reload)"]
|
||||
T6["Traefik\n(file provider)"]
|
||||
T7["Caddy\n(admin API / file)"]
|
||||
T2["F5 BIG-IP\n(proxy agent + iControl REST, planned)"]
|
||||
T3["IIS\n(agent-local PowerShell, planned)"]
|
||||
end
|
||||
@@ -96,7 +99,7 @@ flowchart TB
|
||||
SVC --> REPO
|
||||
REPO --> PG
|
||||
SCHED --> SVC
|
||||
SVC -->|"Issue/Renew"| CA1 & CA2 & CA3
|
||||
SVC -->|"Issue/Renew"| CA1 & CA2 & CA3 & CA4 & CA6 & CA7
|
||||
|
||||
A1 & A2 & A3 -->|"CSR + Heartbeat"| API
|
||||
API -->|"Cert + Chain\n(NO private key)"| A1 & A2 & A3
|
||||
@@ -506,7 +509,8 @@ flowchart TB
|
||||
II --> ACME["ACME v2"]
|
||||
II --> SC["step-ca"]
|
||||
II --> OC["OpenSSL / Custom CA"]
|
||||
II --> VP["Vault PKI (planned)"]
|
||||
II --> VP["Vault PKI"]
|
||||
II --> DC["DigiCert CertCentral"]
|
||||
end
|
||||
|
||||
subgraph "Target Connectors"
|
||||
|
||||
+2
-2
@@ -1469,8 +1469,8 @@ Each guide includes an evidence summary table mapping specific criteria to certc
|
||||
| **Bulk revocation** | ✗ | ✓ | Planned V3 (paid) |
|
||||
| **Certificate health scores** | ✗ | ✓ | Planned V3 |
|
||||
| **Compliance scoring** | ✗ | ✓ | Planned V3 |
|
||||
| **DigiCert issuer** | ✗ | ✓ | Planned V2.1 (free) |
|
||||
| **Vault PKI issuer** | ✗ | ✓ | Planned V2.1 (free) |
|
||||
| **DigiCert issuer** | ✗ | ✓ | Implemented (Beta) |
|
||||
| **Vault PKI issuer** | ✗ | ✓ | Implemented (Beta) |
|
||||
|
||||
---
|
||||
|
||||
|
||||
+131
-2
@@ -45,6 +45,7 @@ Comprehensive manual testing playbook. Every test has a concrete command, an exp
|
||||
- [Part 38: Vault PKI Connector (M32)](#part-38-vault-pki-connector-m32)
|
||||
- [Part 39: DigiCert Connector (M37)](#part-39-digicert-connector-m37)
|
||||
- [Part 40: Issuer Catalog Page (M33)](#part-40-issuer-catalog-page-m33)
|
||||
- [Part 41: Frontend Audit Fixes](#part-41-frontend-audit-fixes)
|
||||
- [Release Sign-Off](#release-sign-off)
|
||||
|
||||
---
|
||||
@@ -5455,6 +5456,107 @@ cd web && npx vitest run 2>&1 | grep -qE 'Tests.*passed'
|
||||
|
||||
---
|
||||
|
||||
## Part 41: Frontend Audit Fixes
|
||||
|
||||
Comprehensive frontend coverage audit closed 60 gaps between backend capabilities and GUI surfaces. This part validates the critical fixes.
|
||||
|
||||
### Automated Tests (qa-smoke-test.sh Part 41)
|
||||
|
||||
| # | Test | Assertion |
|
||||
|---|------|-----------|
|
||||
| 41.1 | Certificate TS type has lifecycle fields | `types.ts` contains `last_renewal_at`, `last_deployment_at`, `target_ids` |
|
||||
| 41.2 | API client has new endpoint functions | `client.ts` exports `updateIssuer`, `updateTarget`, `getCertificateDeployments`, `getCRL`, `getOCSPStatus`, `getPolicy` |
|
||||
| 41.3 | CertificatesPage has filter dropdowns | Contains `issuerFilter`, `ownerFilter`, `profileFilter` state vars |
|
||||
| 41.4 | CertificatesPage shows last_renewal_at | Column renders `last_renewal_at` field |
|
||||
| 41.5 | JobsPage shows error_message | Error column displays first 80 chars for failed jobs |
|
||||
| 41.6 | ProfilesPage has key algorithm fields | Create form includes `allowed_key_algorithms` with add/remove rows |
|
||||
| 41.7 | ProfilesPage has EKU checkboxes | Create form includes `allowed_ekus` checkbox group |
|
||||
| 41.8 | DiscoveryPage shows is_ca badge | CA badge renders for discovered CA certificates |
|
||||
| 41.9 | TargetDetailPage has Edit functionality | Edit button wired to `updateTarget` API call |
|
||||
| 41.10 | CertificatesPage has tags field | Create form includes tags input (key=value pairs) |
|
||||
| 41.11 | AgentFleetPage maps darwin to macOS | OS display mapping applied to pie chart and platform headers |
|
||||
| 41.12 | Frontend builds after audit fixes | `npm run build` succeeds |
|
||||
|
||||
### Manual Tests
|
||||
|
||||
**41.M1: Profile Create Form — Key Algorithm Configuration**
|
||||
|
||||
1. Navigate to Profiles page, click "+ New Profile"
|
||||
2. Verify default algorithms shown: ECDSA 256+, RSA 2048+
|
||||
3. Click "Remove" on RSA row — verify it disappears
|
||||
4. Click "+ Add" — verify Ed25519 appears (with "fixed" instead of size dropdown)
|
||||
5. Submit form, verify profile created with correct `allowed_key_algorithms` array
|
||||
|
||||
**PASS if** algorithms are configurable and persisted correctly.
|
||||
|
||||
**41.M2: Profile Create Form — EKU Selection**
|
||||
|
||||
1. In Create Profile modal, verify EKU checkboxes visible (serverAuth checked by default)
|
||||
2. Check "Email Protection (S/MIME)" and "Client Authentication"
|
||||
3. Submit, verify profile has `allowed_ekus: ["serverAuth", "emailProtection", "clientAuth"]`
|
||||
|
||||
**PASS if** EKUs are selectable and sent to backend.
|
||||
|
||||
**41.M3: Certificate Create Form — Tags**
|
||||
|
||||
1. Navigate to Certificates page, click "+ New Certificate"
|
||||
2. Enter tags: `env=prod, team=platform, app=api`
|
||||
3. Submit, verify certificate created with `tags: {"env": "prod", "team": "platform", "app": "api"}`
|
||||
|
||||
**PASS if** tags are parsed and persisted as key-value pairs.
|
||||
|
||||
**41.M4: Jobs Table — Error Message Column**
|
||||
|
||||
1. Navigate to Jobs page, filter to "Failed" status
|
||||
2. Verify "Error" column shows truncated error message (max 80 chars with "...")
|
||||
3. Hover over truncated message, verify full text in tooltip
|
||||
|
||||
**PASS if** error messages visible for failed jobs.
|
||||
|
||||
**41.M5: Certificates Table — Lifecycle Columns**
|
||||
|
||||
1. Navigate to Certificates page
|
||||
2. Verify "Last Renewal" and "Last Deploy" columns visible
|
||||
3. Verify dates shown for certs with data, "—" for certs without
|
||||
|
||||
**PASS if** lifecycle timestamps displayed.
|
||||
|
||||
**41.M6: Certificate Filters — Issuer/Owner/Profile Dropdowns**
|
||||
|
||||
1. Navigate to Certificates page
|
||||
2. Verify Issuer, Owner, Profile dropdown filters visible
|
||||
3. Select an issuer — verify table filters to matching certificates
|
||||
4. Clear filter, select a profile — verify filtering works
|
||||
|
||||
**PASS if** all three filter dropdowns functional.
|
||||
|
||||
**41.M7: Target Detail — Edit Button**
|
||||
|
||||
1. Navigate to a target detail page
|
||||
2. Click "Edit" button
|
||||
3. Modify name, click "Save"
|
||||
4. Verify name updated on the page
|
||||
|
||||
**PASS if** target edit persists via API.
|
||||
|
||||
**41.M8: Discovery Table — CA Badge**
|
||||
|
||||
1. Navigate to Discovery page
|
||||
2. Verify "Key" column shows algorithm + key size
|
||||
3. For CA certificates, verify purple "CA" badge displayed
|
||||
|
||||
**PASS if** CA certificates visually distinguished.
|
||||
|
||||
**41.M9: Fleet Overview — macOS Display**
|
||||
|
||||
1. Navigate to Fleet Overview page
|
||||
2. Verify OS pie chart shows "macOS" instead of "darwin"
|
||||
3. Verify platform section headers show "macOS / amd64" (not "darwin / amd64")
|
||||
|
||||
**PASS if** darwin correctly mapped to macOS in all locations.
|
||||
|
||||
---
|
||||
|
||||
## Release Sign-Off
|
||||
|
||||
All tests below must pass before tagging v2.1.0. Each row is one individual test from the guide above. The **Method** column indicates whether `qa-smoke-test.sh` covers the test automatically (**Auto**) or requires hands-on verification (**Manual**).
|
||||
@@ -6054,14 +6156,41 @@ These must be green before starting manual QA:
|
||||
| 40.m5 | Config detail modal shows full redacted config | Manual | ☐ | | |
|
||||
| 40.m6 | Issuer type filter works | Manual | ☐ | | |
|
||||
|
||||
### Part 41: Frontend Audit Fixes
|
||||
|
||||
| Test | Description | Method | Pass? | Date | Notes |
|
||||
|------|-------------|--------|-------|------|-------|
|
||||
| 41.s1 | Certificate TS type has lifecycle fields | Auto | ☐ | | qa-smoke-test.sh 41.1 |
|
||||
| 41.s2 | API client has new endpoint functions | Auto | ☐ | | qa-smoke-test.sh 41.2 |
|
||||
| 41.s3 | CertificatesPage has filter dropdowns | Auto | ☐ | | qa-smoke-test.sh 41.3 |
|
||||
| 41.s4 | CertificatesPage shows last_renewal_at | Auto | ☐ | | qa-smoke-test.sh 41.4 |
|
||||
| 41.s5 | JobsPage shows error_message | Auto | ☐ | | qa-smoke-test.sh 41.5 |
|
||||
| 41.s6 | ProfilesPage has key algorithm fields | Auto | ☐ | | qa-smoke-test.sh 41.6 |
|
||||
| 41.s7 | ProfilesPage has EKU checkboxes | Auto | ☐ | | qa-smoke-test.sh 41.7 |
|
||||
| 41.s8 | DiscoveryPage shows is_ca badge | Auto | ☐ | | qa-smoke-test.sh 41.8 |
|
||||
| 41.s9 | TargetDetailPage has Edit functionality | Auto | ☐ | | qa-smoke-test.sh 41.9 |
|
||||
| 41.s10 | CertificatesPage has tags field | Auto | ☐ | | qa-smoke-test.sh 41.10 |
|
||||
| 41.s11 | AgentFleetPage maps darwin to macOS | Auto | ☐ | | qa-smoke-test.sh 41.11 |
|
||||
| 41.s12 | Frontend builds after audit fixes | Auto | ☐ | | qa-smoke-test.sh 41.12 |
|
||||
| 41.m1 | Profile create form — key algorithm config | Manual | ☐ | | |
|
||||
| 41.m2 | Profile create form — EKU selection | Manual | ☐ | | |
|
||||
| 41.m3 | Certificate create form — tags | Manual | ☐ | | |
|
||||
| 41.m4 | Jobs table — error message column | Manual | ☐ | | |
|
||||
| 41.m5 | Certificates table — lifecycle columns | Manual | ☐ | | |
|
||||
| 41.m6 | Certificate filters — issuer/owner/profile | Manual | ☐ | | |
|
||||
| 41.m7 | Target detail — edit button | Manual | ☐ | | |
|
||||
| 41.m8 | Discovery table — CA badge | Manual | ☐ | | |
|
||||
| 41.m9 | Fleet overview — macOS display | Manual | ☐ | | |
|
||||
|
||||
### Summary
|
||||
|
||||
| Category | Count |
|
||||
|----------|-------|
|
||||
| ☑ Auto (passed in `qa-smoke-test.sh`) | 144 |
|
||||
| ☐ Auto (not yet run) | 12 |
|
||||
| — Skipped (preconditions not met in demo) | 5 |
|
||||
| ☐ Manual (requires hands-on verification) | 232 |
|
||||
| **Total** | **381** |
|
||||
| ☐ Manual (requires hands-on verification) | 241 |
|
||||
| **Total** | **402** |
|
||||
|
||||
**Automated tests must also be green.** CI passing is necessary but not sufficient — this manual QA catches integration issues that isolated unit tests miss.
|
||||
|
||||
|
||||
@@ -83,6 +83,12 @@ import {
|
||||
getIssuer,
|
||||
getTarget,
|
||||
getPrometheusMetrics,
|
||||
getCertificateDeployments,
|
||||
getCRL,
|
||||
getOCSPStatus,
|
||||
updateIssuer,
|
||||
updateTarget,
|
||||
getPolicy,
|
||||
} from './client';
|
||||
|
||||
// Mock global fetch
|
||||
@@ -1150,4 +1156,53 @@ describe('API Client', () => {
|
||||
expect(init.headers['Authorization']).toBe('Bearer prom-key');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Frontend Audit: New API Functions', () => {
|
||||
it('getCertificateDeployments sends GET with cert ID', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ data: [], total: 0 }));
|
||||
await getCertificateDeployments('mc-1');
|
||||
expect(mockFetch.mock.calls[0][0]).toContain('/api/v1/certificates/mc-1/deployments');
|
||||
});
|
||||
|
||||
it('getCRL sends GET to /crl', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ entries: [], total: 0 }));
|
||||
await getCRL();
|
||||
expect(mockFetch.mock.calls[0][0]).toBe('/api/v1/crl');
|
||||
});
|
||||
|
||||
it('getOCSPStatus sends GET with issuer and serial', async () => {
|
||||
const buf = new ArrayBuffer(8);
|
||||
mockFetch.mockReturnValueOnce(
|
||||
Promise.resolve({
|
||||
ok: true,
|
||||
status: 200,
|
||||
arrayBuffer: () => Promise.resolve(buf),
|
||||
} as Response)
|
||||
);
|
||||
await getOCSPStatus('iss-local', 'ABC123');
|
||||
expect(mockFetch.mock.calls[0][0]).toBe('/api/v1/ocsp/iss-local/ABC123');
|
||||
});
|
||||
|
||||
it('updateIssuer sends PUT with data', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ id: 'iss-1', name: 'Updated' }));
|
||||
await updateIssuer('iss-1', { name: 'Updated' });
|
||||
const [url, init] = mockFetch.mock.calls[0];
|
||||
expect(url).toBe('/api/v1/issuers/iss-1');
|
||||
expect(init.method).toBe('PUT');
|
||||
});
|
||||
|
||||
it('updateTarget sends PUT with data', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ id: 't-1', name: 'Updated' }));
|
||||
await updateTarget('t-1', { name: 'Updated' });
|
||||
const [url, init] = mockFetch.mock.calls[0];
|
||||
expect(url).toBe('/api/v1/targets/t-1');
|
||||
expect(init.method).toBe('PUT');
|
||||
});
|
||||
|
||||
it('getPolicy sends GET with policy ID', async () => {
|
||||
mockFetch.mockReturnValueOnce(mockJsonResponse({ id: 'pol-1', name: 'Test' }));
|
||||
await getPolicy('pol-1');
|
||||
expect(mockFetch.mock.calls[0][0]).toBe('/api/v1/policies/pol-1');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -122,6 +122,26 @@ export const exportCertificatePKCS12 = (id: string, password: string = '') => {
|
||||
});
|
||||
};
|
||||
|
||||
// Certificate Deployments
|
||||
export const getCertificateDeployments = (id: string, params: Record<string, string> = {}) => {
|
||||
const qs = new URLSearchParams({ page: '1', per_page: '50', ...params }).toString();
|
||||
return fetchJSON<PaginatedResponse<Job>>(`${BASE}/certificates/${id}/deployments?${qs}`);
|
||||
};
|
||||
|
||||
// CRL / OCSP
|
||||
export const getCRL = () =>
|
||||
fetchJSON<{ version: number; entries: unknown[]; total: number; generated_at: string }>(`${BASE}/crl`);
|
||||
|
||||
export const getOCSPStatus = (issuerId: string, serial: string) => {
|
||||
const headers: Record<string, string> = {};
|
||||
if (apiKey) headers['Authorization'] = `Bearer ${apiKey}`;
|
||||
return fetch(`${BASE}/ocsp/${issuerId}/${serial}`, { headers })
|
||||
.then(r => {
|
||||
if (!r.ok) throw new Error(`OCSP request failed: ${r.status}`);
|
||||
return r.arrayBuffer();
|
||||
});
|
||||
};
|
||||
|
||||
// Agents
|
||||
export const getAgents = (params: Record<string, string> = {}) => {
|
||||
const qs = new URLSearchParams({ page: '1', per_page: '50', ...params }).toString();
|
||||
@@ -170,6 +190,9 @@ export const createPolicy = (data: Partial<PolicyRule>) =>
|
||||
export const updatePolicy = (id: string, data: Partial<PolicyRule>) =>
|
||||
fetchJSON<PolicyRule>(`${BASE}/policies/${id}`, { method: 'PUT', body: JSON.stringify(data) });
|
||||
|
||||
export const getPolicy = (id: string) =>
|
||||
fetchJSON<PolicyRule>(`${BASE}/policies/${id}`);
|
||||
|
||||
export const deletePolicy = (id: string) =>
|
||||
fetchJSON<{ message: string }>(`${BASE}/policies/${id}`, { method: 'DELETE' });
|
||||
|
||||
@@ -188,6 +211,9 @@ export const createIssuer = (data: Partial<Issuer>) =>
|
||||
export const testIssuerConnection = (id: string) =>
|
||||
fetchJSON<{ message: string }>(`${BASE}/issuers/${id}/test`, { method: 'POST' });
|
||||
|
||||
export const updateIssuer = (id: string, data: Partial<Issuer>) =>
|
||||
fetchJSON<Issuer>(`${BASE}/issuers/${id}`, { method: 'PUT', body: JSON.stringify(data) });
|
||||
|
||||
export const deleteIssuer = (id: string) =>
|
||||
fetchJSON<{ message: string }>(`${BASE}/issuers/${id}`, { method: 'DELETE' });
|
||||
|
||||
@@ -200,6 +226,9 @@ export const getTargets = (params: Record<string, string> = {}) => {
|
||||
export const createTarget = (data: Partial<Target>) =>
|
||||
fetchJSON<Target>(`${BASE}/targets`, { method: 'POST', body: JSON.stringify(data) });
|
||||
|
||||
export const updateTarget = (id: string, data: Partial<Target>) =>
|
||||
fetchJSON<Target>(`${BASE}/targets/${id}`, { method: 'PUT', body: JSON.stringify(data) });
|
||||
|
||||
export const deleteTarget = (id: string) =>
|
||||
fetchJSON<{ message: string }>(`${BASE}/targets/${id}`, { method: 'DELETE' });
|
||||
|
||||
|
||||
@@ -18,7 +18,10 @@ export interface Certificate {
|
||||
expires_at: string;
|
||||
revoked_at?: string;
|
||||
revocation_reason?: string;
|
||||
target_ids?: string[];
|
||||
tags: Record<string, string>;
|
||||
last_renewal_at?: string;
|
||||
last_deployment_at?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
@@ -45,6 +48,8 @@ export interface CertificateVersion {
|
||||
csr_pem: string;
|
||||
not_before: string;
|
||||
not_after: string;
|
||||
key_algorithm?: string;
|
||||
key_size?: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
@@ -138,6 +143,7 @@ export interface Issuer {
|
||||
/** Backend returns enabled boolean; status is derived from this */
|
||||
enabled: boolean;
|
||||
created_at: string;
|
||||
updated_at?: string;
|
||||
}
|
||||
|
||||
export interface Target {
|
||||
@@ -149,6 +155,7 @@ export interface Target {
|
||||
config: Record<string, unknown>;
|
||||
status: string;
|
||||
created_at: string;
|
||||
updated_at?: string;
|
||||
}
|
||||
|
||||
export interface KeyAlgorithmRule {
|
||||
|
||||
@@ -71,7 +71,7 @@ export default function Layout() {
|
||||
</nav>
|
||||
|
||||
<div className="px-5 py-3 border-t border-white/10 flex items-center justify-between">
|
||||
<span className="text-[10px] text-brand-300/60 font-mono">v2.0.14</span>
|
||||
<span className="text-[10px] text-brand-300/60 font-mono">v2.0.20</span>
|
||||
{authRequired && (
|
||||
<button
|
||||
onClick={logout}
|
||||
|
||||
@@ -13,6 +13,14 @@ const OS_COLORS: Record<string, string> = {
|
||||
unknown: '#64748b',
|
||||
};
|
||||
|
||||
const OS_DISPLAY_NAMES: Record<string, string> = {
|
||||
darwin: 'macOS',
|
||||
};
|
||||
|
||||
function displayOS(os: string): string {
|
||||
return OS_DISPLAY_NAMES[os.toLowerCase()] || os;
|
||||
}
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
Online: '#10b981',
|
||||
Offline: '#ef4444',
|
||||
@@ -86,7 +94,7 @@ export default function AgentFleetPage() {
|
||||
return acc;
|
||||
}, {});
|
||||
const osPieData = Object.entries(osDistribution).map(([name, value]) => ({
|
||||
name,
|
||||
name: displayOS(name),
|
||||
value,
|
||||
fill: OS_COLORS[name.toLowerCase()] || '#64748b',
|
||||
}));
|
||||
@@ -216,7 +224,7 @@ export default function AgentFleetPage() {
|
||||
style={{ backgroundColor: OS_COLORS[group.os.toLowerCase()] || '#64748b' }}
|
||||
/>
|
||||
<h4 className="text-sm font-medium text-ink">
|
||||
{group.os} / {group.arch}
|
||||
{displayOS(group.os)} / {group.arch}
|
||||
</h4>
|
||||
<span className="text-xs text-ink-faint">
|
||||
{group.agents.length} agent{group.agents.length !== 1 ? 's' : ''}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { getCertificates, createCertificate, triggerRenewal, revokeCertificate, updateCertificate, getOwners } from '../api/client';
|
||||
import { getCertificates, createCertificate, triggerRenewal, revokeCertificate, updateCertificate, getOwners, getProfiles, getIssuers } from '../api/client';
|
||||
import { REVOCATION_REASONS } from '../api/types';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
import DataTable from '../components/DataTable';
|
||||
@@ -16,20 +16,66 @@ function CreateCertificateModal({ onClose, onSuccess }: { onClose: () => void; o
|
||||
name: '',
|
||||
id: '',
|
||||
common_name: '',
|
||||
sans: '',
|
||||
environment: 'production',
|
||||
issuer_id: '',
|
||||
certificate_profile_id: '',
|
||||
owner_id: '',
|
||||
team_id: '',
|
||||
renewal_policy_id: '',
|
||||
tags: '',
|
||||
});
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const { data: profilesResp } = useQuery({
|
||||
queryKey: ['profiles'],
|
||||
queryFn: () => getProfiles(),
|
||||
});
|
||||
const { data: issuersResp } = useQuery({
|
||||
queryKey: ['issuers'],
|
||||
queryFn: () => getIssuers(),
|
||||
});
|
||||
const profiles = profilesResp?.data || [];
|
||||
const issuers = issuersResp?.data || [];
|
||||
|
||||
const selectedProfile = profiles.find(p => p.id === form.certificate_profile_id);
|
||||
const ttlLabel = selectedProfile
|
||||
? selectedProfile.max_ttl_seconds < 3600
|
||||
? `${Math.round(selectedProfile.max_ttl_seconds / 60)}m`
|
||||
: selectedProfile.max_ttl_seconds < 86400
|
||||
? `${Math.round(selectedProfile.max_ttl_seconds / 3600)}h`
|
||||
: `${Math.round(selectedProfile.max_ttl_seconds / 86400)}d`
|
||||
: null;
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: () => createCertificate(form),
|
||||
mutationFn: () => {
|
||||
const payload: Record<string, unknown> = { ...form };
|
||||
// Convert comma-separated SANs to array
|
||||
if (form.sans.trim()) {
|
||||
payload.sans = form.sans.split(',').map(s => s.trim()).filter(Boolean);
|
||||
} else {
|
||||
delete payload.sans;
|
||||
}
|
||||
// Convert comma-separated key=value tags to object
|
||||
if (form.tags.trim()) {
|
||||
const tags: Record<string, string> = {};
|
||||
form.tags.split(',').forEach(pair => {
|
||||
const [k, ...v] = pair.split('=');
|
||||
if (k?.trim()) tags[k.trim()] = v.join('=').trim();
|
||||
});
|
||||
payload.tags = tags;
|
||||
} else {
|
||||
delete payload.tags;
|
||||
}
|
||||
return createCertificate(payload);
|
||||
},
|
||||
onSuccess: () => onSuccess(),
|
||||
onError: (err: Error) => setError(err.message),
|
||||
});
|
||||
|
||||
const inputClass = "w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400 focus:ring-1 focus:ring-brand-400/20";
|
||||
const selectClass = "w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink";
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={onClose}>
|
||||
<div className="bg-surface border border-surface-border rounded p-6 w-full max-w-lg shadow-xl" onClick={e => e.stopPropagation()}>
|
||||
@@ -39,57 +85,90 @@ function CreateCertificateModal({ onClose, onSuccess }: { onClose: () => void; o
|
||||
<div>
|
||||
<label className="text-xs text-ink-muted block mb-1">Name *</label>
|
||||
<input value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400 focus:ring-1 focus:ring-brand-400/20"
|
||||
className={inputClass}
|
||||
placeholder="API Production Cert" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-ink-muted block mb-1">ID (optional)</label>
|
||||
<input value={form.id} onChange={e => setForm(f => ({ ...f, id: e.target.value }))}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400 focus:ring-1 focus:ring-brand-400/20"
|
||||
className={inputClass}
|
||||
placeholder="mc-api-prod (auto-generated if empty)" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-ink-muted block mb-1">Common Name *</label>
|
||||
<input value={form.common_name} onChange={e => setForm(f => ({ ...f, common_name: e.target.value }))}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400 focus:ring-1 focus:ring-brand-400/20"
|
||||
className={inputClass}
|
||||
placeholder="api.example.com" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-ink-muted block mb-1">SANs (comma-separated)</label>
|
||||
<input value={form.sans} onChange={e => setForm(f => ({ ...f, sans: e.target.value }))}
|
||||
className={inputClass}
|
||||
placeholder="api.example.com, api-v2.example.com" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs text-ink-muted block mb-1">Issuer *</label>
|
||||
<select value={form.issuer_id} onChange={e => setForm(f => ({ ...f, issuer_id: e.target.value }))}
|
||||
className={selectClass}>
|
||||
<option value="">Select issuer...</option>
|
||||
{issuers.map(i => (
|
||||
<option key={i.id} value={i.id}>{i.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-ink-muted block mb-1">
|
||||
Profile {ttlLabel && <span className="text-brand-400 font-medium">(TTL: {ttlLabel})</span>}
|
||||
</label>
|
||||
<select value={form.certificate_profile_id} onChange={e => setForm(f => ({ ...f, certificate_profile_id: e.target.value }))}
|
||||
className={selectClass}>
|
||||
<option value="">Select profile...</option>
|
||||
{profiles.map(p => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.name}{p.max_ttl_seconds ? ` (${p.max_ttl_seconds < 3600 ? `${Math.round(p.max_ttl_seconds / 60)}m` : p.max_ttl_seconds < 86400 ? `${Math.round(p.max_ttl_seconds / 3600)}h` : `${Math.round(p.max_ttl_seconds / 86400)}d`})` : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs text-ink-muted block mb-1">Environment</label>
|
||||
<select value={form.environment} onChange={e => setForm(f => ({ ...f, environment: e.target.value }))}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink">
|
||||
className={selectClass}>
|
||||
<option value="production">Production</option>
|
||||
<option value="staging">Staging</option>
|
||||
<option value="development">Development</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-ink-muted block mb-1">Issuer ID *</label>
|
||||
<input value={form.issuer_id} onChange={e => setForm(f => ({ ...f, issuer_id: e.target.value }))}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400 focus:ring-1 focus:ring-brand-400/20"
|
||||
placeholder="iss-local" />
|
||||
<label className="text-xs text-ink-muted block mb-1">Policy</label>
|
||||
<input value={form.renewal_policy_id} onChange={e => setForm(f => ({ ...f, renewal_policy_id: e.target.value }))}
|
||||
className={inputClass}
|
||||
placeholder="rp-standard" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs text-ink-muted block mb-1">Owner ID</label>
|
||||
<label className="text-xs text-ink-muted block mb-1">Owner</label>
|
||||
<input value={form.owner_id} onChange={e => setForm(f => ({ ...f, owner_id: e.target.value }))}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400 focus:ring-1 focus:ring-brand-400/20"
|
||||
className={inputClass}
|
||||
placeholder="o-alice" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-ink-muted block mb-1">Team ID</label>
|
||||
<label className="text-xs text-ink-muted block mb-1">Team</label>
|
||||
<input value={form.team_id} onChange={e => setForm(f => ({ ...f, team_id: e.target.value }))}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400 focus:ring-1 focus:ring-brand-400/20"
|
||||
className={inputClass}
|
||||
placeholder="t-platform" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-ink-muted block mb-1">Policy ID</label>
|
||||
<input value={form.renewal_policy_id} onChange={e => setForm(f => ({ ...f, renewal_policy_id: e.target.value }))}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400 focus:ring-1 focus:ring-brand-400/20"
|
||||
placeholder="rp-standard" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-ink-muted block mb-1">Tags</label>
|
||||
<input value={form.tags} onChange={e => setForm(f => ({ ...f, tags: e.target.value }))}
|
||||
className={inputClass}
|
||||
placeholder="env=prod, team=platform, app=api" />
|
||||
<p className="text-xs text-ink-faint mt-0.5">Comma-separated key=value pairs</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 mt-6">
|
||||
@@ -245,15 +324,25 @@ export default function CertificatesPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [statusFilter, setStatusFilter] = useState('');
|
||||
const [envFilter, setEnvFilter] = useState('');
|
||||
const [issuerFilter, setIssuerFilter] = useState('');
|
||||
const [ownerFilter, setOwnerFilter] = useState('');
|
||||
const [profileFilter, setProfileFilter] = useState('');
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
|
||||
const [showBulkRevoke, setShowBulkRevoke] = useState(false);
|
||||
const [showBulkReassign, setShowBulkReassign] = useState(false);
|
||||
const [bulkRenewProgress, setBulkRenewProgress] = useState<{ done: number; total: number; running: boolean } | null>(null);
|
||||
|
||||
const { data: issuersData } = useQuery({ queryKey: ['issuers-filter'], queryFn: () => getIssuers({ per_page: '100' }) });
|
||||
const { data: ownersData } = useQuery({ queryKey: ['owners-filter'], queryFn: () => getOwners({ per_page: '100' }) });
|
||||
const { data: profilesData } = useQuery({ queryKey: ['profiles-filter'], queryFn: () => getProfiles({ per_page: '100' }) });
|
||||
|
||||
const params: Record<string, string> = {};
|
||||
if (statusFilter) params.status = statusFilter;
|
||||
if (envFilter) params.environment = envFilter;
|
||||
if (issuerFilter) params.issuer_id = issuerFilter;
|
||||
if (ownerFilter) params.owner_id = ownerFilter;
|
||||
if (profileFilter) params.profile_id = profileFilter;
|
||||
|
||||
const { data, isLoading, error, refetch } = useQuery({
|
||||
queryKey: ['certificates', params],
|
||||
@@ -302,7 +391,8 @@ export default function CertificatesPage() {
|
||||
);
|
||||
},
|
||||
},
|
||||
{ key: 'env', label: 'Environment', render: (c) => <span className="text-ink-muted">{c.environment || '—'}</span> },
|
||||
{ key: 'last_renewal', label: 'Last Renewal', render: (c) => <span className="text-xs text-ink-muted">{c.last_renewal_at ? formatDate(c.last_renewal_at) : '—'}</span> },
|
||||
{ key: 'last_deploy', label: 'Last Deploy', render: (c) => <span className="text-xs text-ink-muted">{c.last_deployment_at ? formatDate(c.last_deployment_at) : '—'}</span> },
|
||||
{ key: 'issuer', label: 'Issuer', render: (c) => <span className="text-ink-muted text-xs">{c.issuer_id}</span> },
|
||||
{ key: 'owner', label: 'Owner', render: (c) => <span className="text-ink-muted text-xs">{c.owner_id}</span> },
|
||||
];
|
||||
@@ -382,6 +472,36 @@ export default function CertificatesPage() {
|
||||
<option value="staging">Staging</option>
|
||||
<option value="development">Development</option>
|
||||
</select>
|
||||
<select
|
||||
value={issuerFilter}
|
||||
onChange={e => setIssuerFilter(e.target.value)}
|
||||
className="bg-white border border-surface-border rounded px-3 py-1.5 text-sm text-ink"
|
||||
>
|
||||
<option value="">All issuers</option>
|
||||
{issuersData?.data?.map(i => (
|
||||
<option key={i.id} value={i.id}>{i.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={ownerFilter}
|
||||
onChange={e => setOwnerFilter(e.target.value)}
|
||||
className="bg-white border border-surface-border rounded px-3 py-1.5 text-sm text-ink"
|
||||
>
|
||||
<option value="">All owners</option>
|
||||
{ownersData?.data?.map(o => (
|
||||
<option key={o.id} value={o.id}>{o.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={profileFilter}
|
||||
onChange={e => setProfileFilter(e.target.value)}
|
||||
className="bg-white border border-surface-border rounded px-3 py-1.5 text-sm text-ink"
|
||||
>
|
||||
<option value="">All profiles</option>
|
||||
{profilesData?.data?.map(p => (
|
||||
<option key={p.id} value={p.id}>{p.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{error ? (
|
||||
|
||||
@@ -197,6 +197,18 @@ export default function DiscoveryPage() {
|
||||
label: 'Expiry',
|
||||
render: (c) => <span className="text-xs">{formatExpiry(c.not_after)}</span>,
|
||||
},
|
||||
{
|
||||
key: 'key_info',
|
||||
label: 'Key',
|
||||
render: (c) => (
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-ink-muted">{c.key_algorithm}{c.key_size ? ` ${c.key_size}` : ''}</span>
|
||||
{c.is_ca && (
|
||||
<span className="text-[10px] px-1.5 py-0.5 rounded bg-purple-100 text-purple-700 font-medium">CA</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'fingerprint',
|
||||
label: 'Fingerprint',
|
||||
|
||||
@@ -136,6 +136,15 @@ export default function JobsPage() {
|
||||
label: 'Attempts',
|
||||
render: (j) => <span className="text-ink-muted">{j.attempts}/{j.max_attempts}</span>,
|
||||
},
|
||||
{
|
||||
key: 'error',
|
||||
label: 'Error',
|
||||
render: (j) => j.status === 'Failed' && j.error_message ? (
|
||||
<span className="text-xs text-red-600 truncate max-w-[200px] inline-block" title={j.error_message}>
|
||||
{j.error_message.length > 80 ? j.error_message.substring(0, 80) + '...' : j.error_message}
|
||||
</span>
|
||||
) : <span className="text-xs text-ink-faint">—</span>,
|
||||
},
|
||||
{ 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> },
|
||||
{
|
||||
|
||||
@@ -25,11 +25,63 @@ interface CreateProfileModalProps {
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
const AVAILABLE_ALGORITHMS = ['RSA', 'ECDSA', 'Ed25519'];
|
||||
const ALGORITHM_MIN_SIZES: Record<string, number[]> = {
|
||||
RSA: [2048, 3072, 4096],
|
||||
ECDSA: [256, 384],
|
||||
Ed25519: [0],
|
||||
};
|
||||
|
||||
const AVAILABLE_EKUS = [
|
||||
{ value: 'serverAuth', label: 'Server Authentication (TLS)' },
|
||||
{ value: 'clientAuth', label: 'Client Authentication' },
|
||||
{ value: 'codeSigning', label: 'Code Signing' },
|
||||
{ value: 'emailProtection', label: 'Email Protection (S/MIME)' },
|
||||
{ value: 'timeStamping', label: 'Time Stamping' },
|
||||
];
|
||||
|
||||
interface KeyAlgorithmEntry {
|
||||
algorithm: string;
|
||||
min_size: number;
|
||||
}
|
||||
|
||||
function CreateProfileModal({ isOpen, onClose, onSuccess, isLoading, error }: CreateProfileModalProps) {
|
||||
const [name, setName] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [ttl, setTtl] = useState('86400');
|
||||
const [shortLived, setShortLived] = useState(false);
|
||||
const [keyAlgorithms, setKeyAlgorithms] = useState<KeyAlgorithmEntry[]>([
|
||||
{ algorithm: 'ECDSA', min_size: 256 },
|
||||
{ algorithm: 'RSA', min_size: 2048 },
|
||||
]);
|
||||
const [selectedEkus, setSelectedEkus] = useState<string[]>(['serverAuth']);
|
||||
const [sanPatterns, setSanPatterns] = useState('');
|
||||
const [spiffePattern, setSpiffePattern] = useState('');
|
||||
|
||||
const addAlgorithm = () => {
|
||||
const unused = AVAILABLE_ALGORITHMS.find(a => !keyAlgorithms.some(ka => ka.algorithm === a));
|
||||
if (unused) {
|
||||
setKeyAlgorithms([...keyAlgorithms, { algorithm: unused, min_size: ALGORITHM_MIN_SIZES[unused][0] }]);
|
||||
}
|
||||
};
|
||||
|
||||
const removeAlgorithm = (idx: number) => {
|
||||
setKeyAlgorithms(keyAlgorithms.filter((_, i) => i !== idx));
|
||||
};
|
||||
|
||||
const updateAlgorithm = (idx: number, field: 'algorithm' | 'min_size', value: string | number) => {
|
||||
const updated = [...keyAlgorithms];
|
||||
if (field === 'algorithm') {
|
||||
updated[idx] = { algorithm: value as string, min_size: ALGORITHM_MIN_SIZES[value as string]?.[0] || 0 };
|
||||
} else {
|
||||
updated[idx] = { ...updated[idx], min_size: value as number };
|
||||
}
|
||||
setKeyAlgorithms(updated);
|
||||
};
|
||||
|
||||
const toggleEku = (eku: string) => {
|
||||
setSelectedEkus(prev => prev.includes(eku) ? prev.filter(e => e !== eku) : [...prev, eku]);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
@@ -39,20 +91,31 @@ function CreateProfileModal({ isOpen, onClose, onSuccess, isLoading, error }: Cr
|
||||
description: description.trim(),
|
||||
max_ttl_seconds: parseInt(ttl) || 86400,
|
||||
allow_short_lived: shortLived,
|
||||
allowed_key_algorithms: keyAlgorithms,
|
||||
allowed_ekus: selectedEkus,
|
||||
required_san_patterns: sanPatterns.trim() ? sanPatterns.split(',').map(s => s.trim()).filter(Boolean) : [],
|
||||
spiffe_uri_pattern: spiffePattern.trim() || '',
|
||||
enabled: true,
|
||||
});
|
||||
setName('');
|
||||
setDescription('');
|
||||
setTtl('86400');
|
||||
setShortLived(false);
|
||||
setKeyAlgorithms([{ algorithm: 'ECDSA', min_size: 256 }, { algorithm: 'RSA', min_size: 2048 }]);
|
||||
setSelectedEkus(['serverAuth']);
|
||||
setSanPatterns('');
|
||||
setSpiffePattern('');
|
||||
onSuccess();
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const inputClass = 'w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400';
|
||||
const selectClass = 'bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400';
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={onClose}>
|
||||
<div className="bg-surface border border-surface-border rounded p-5 w-full max-w-md shadow-xl" onClick={e => e.stopPropagation()}>
|
||||
<div className="bg-surface border border-surface-border rounded p-5 w-full max-w-lg shadow-xl max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
|
||||
<h2 className="text-lg font-semibold text-ink mb-4">Create Profile</h2>
|
||||
{error && <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">{error}</div>}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
@@ -61,7 +124,7 @@ function CreateProfileModal({ isOpen, onClose, onSuccess, isLoading, error }: Cr
|
||||
<input
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400"
|
||||
className={inputClass}
|
||||
placeholder="e.g., Web Server Certs"
|
||||
required
|
||||
/>
|
||||
@@ -71,7 +134,7 @@ function CreateProfileModal({ isOpen, onClose, onSuccess, isLoading, error }: Cr
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400"
|
||||
className={inputClass}
|
||||
placeholder="Optional description"
|
||||
rows={2}
|
||||
/>
|
||||
@@ -82,7 +145,7 @@ function CreateProfileModal({ isOpen, onClose, onSuccess, isLoading, error }: Cr
|
||||
type="number"
|
||||
value={ttl}
|
||||
onChange={e => setTtl(e.target.value)}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400"
|
||||
className={inputClass}
|
||||
placeholder="86400"
|
||||
/>
|
||||
<p className="text-xs text-ink-muted mt-1">
|
||||
@@ -109,6 +172,97 @@ function CreateProfileModal({ isOpen, onClose, onSuccess, isLoading, error }: Cr
|
||||
/>
|
||||
<label htmlFor="shortLived" className="text-sm text-ink">Allow short-lived certs</label>
|
||||
</div>
|
||||
|
||||
{/* Allowed Key Algorithms */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<label className="block text-sm font-medium text-ink">Allowed Key Algorithms</label>
|
||||
{keyAlgorithms.length < AVAILABLE_ALGORITHMS.length && (
|
||||
<button type="button" onClick={addAlgorithm} className="text-xs text-brand-600 hover:text-brand-700 font-medium">
|
||||
+ Add
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{keyAlgorithms.map((ka, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2">
|
||||
<select
|
||||
value={ka.algorithm}
|
||||
onChange={e => updateAlgorithm(idx, 'algorithm', e.target.value)}
|
||||
className={selectClass + ' flex-1'}
|
||||
>
|
||||
{AVAILABLE_ALGORITHMS.map(a => (
|
||||
<option key={a} value={a} disabled={a !== ka.algorithm && keyAlgorithms.some(k => k.algorithm === a)}>
|
||||
{a}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{ka.algorithm !== 'Ed25519' ? (
|
||||
<select
|
||||
value={ka.min_size}
|
||||
onChange={e => updateAlgorithm(idx, 'min_size', parseInt(e.target.value))}
|
||||
className={selectClass + ' w-24'}
|
||||
>
|
||||
{(ALGORITHM_MIN_SIZES[ka.algorithm] || []).map(s => (
|
||||
<option key={s} value={s}>{s}+</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<span className="text-xs text-ink-muted w-24 text-center">fixed</span>
|
||||
)}
|
||||
<button type="button" onClick={() => removeAlgorithm(idx)} className="text-xs text-red-500 hover:text-red-600">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{keyAlgorithms.length === 0 && (
|
||||
<p className="text-xs text-ink-faint">No algorithms configured. Click + Add to allow key types.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Allowed EKUs */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Allowed Extended Key Usages</label>
|
||||
<div className="space-y-1.5">
|
||||
{AVAILABLE_EKUS.map(eku => (
|
||||
<label key={eku.value} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedEkus.includes(eku.value)}
|
||||
onChange={() => toggleEku(eku.value)}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="text-sm text-ink">{eku.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Required SAN Patterns */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Required SAN Patterns</label>
|
||||
<input
|
||||
value={sanPatterns}
|
||||
onChange={e => setSanPatterns(e.target.value)}
|
||||
className={inputClass}
|
||||
placeholder="e.g., *.example.com, api.internal"
|
||||
/>
|
||||
<p className="text-xs text-ink-muted mt-1">Comma-separated patterns. Leave empty for no constraints.</p>
|
||||
</div>
|
||||
|
||||
{/* SPIFFE URI Pattern */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">SPIFFE URI Pattern</label>
|
||||
<input
|
||||
value={spiffePattern}
|
||||
onChange={e => setSpiffePattern(e.target.value)}
|
||||
className={inputClass}
|
||||
placeholder="e.g., spiffe://example.org/service/*"
|
||||
/>
|
||||
<p className="text-xs text-ink-muted mt-1">Optional workload identity URI SAN pattern.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { getTarget, getJobs } from '../api/client';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { getTarget, getJobs, updateTarget } from '../api/client';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
import StatusBadge from '../components/StatusBadge';
|
||||
import DataTable from '../components/DataTable';
|
||||
@@ -30,6 +31,18 @@ function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
|
||||
|
||||
export default function TargetDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const queryClient = useQueryClient();
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editName, setEditName] = useState('');
|
||||
const [editHostname, setEditHostname] = useState('');
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (data: Partial<{ name: string; hostname: string }>) => updateTarget(id!, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['target', id] });
|
||||
setIsEditing(false);
|
||||
},
|
||||
});
|
||||
|
||||
const { data: target, isLoading, error, refetch } = useQuery({
|
||||
queryKey: ['target', id],
|
||||
@@ -112,6 +125,18 @@ export default function TargetDetailPage() {
|
||||
<PageHeader
|
||||
title={target.name}
|
||||
subtitle={typeLabels[target.type] || target.type}
|
||||
action={
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditName(target.name);
|
||||
setEditHostname(target.hostname || '');
|
||||
setIsEditing(true);
|
||||
}}
|
||||
className="px-3 py-1.5 border border-surface-border rounded text-ink text-xs hover:bg-surface-hover transition-colors font-medium"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-6">
|
||||
@@ -164,6 +189,36 @@ export default function TargetDetailPage() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Edit Modal */}
|
||||
{isEditing && (
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={() => setIsEditing(false)}>
|
||||
<div className="bg-surface border border-surface-border rounded p-5 w-full max-w-md shadow-xl" onClick={e => e.stopPropagation()}>
|
||||
<h2 className="text-lg font-semibold text-ink mb-4">Edit Target</h2>
|
||||
{updateMutation.isError && (
|
||||
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">
|
||||
{(updateMutation.error as Error).message}
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={e => { e.preventDefault(); updateMutation.mutate({ name: editName, hostname: editHostname }); }} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Name</label>
|
||||
<input value={editName} onChange={e => setEditName(e.target.value)} className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Hostname</label>
|
||||
<input value={editHostname} onChange={e => setEditHostname(e.target.value)} className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400" />
|
||||
</div>
|
||||
<div className="flex gap-2 pt-2">
|
||||
<button type="submit" disabled={updateMutation.isPending} className="flex-1 btn btn-primary disabled:opacity-50">
|
||||
{updateMutation.isPending ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
<button type="button" onClick={() => setIsEditing(false)} className="flex-1 btn btn-ghost">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user