42 Commits

Author SHA1 Message Date
root
4c04c9870a Add Atlas InfoSec action plans integration
Integrate Atlas InfoSec API to manage compliance action plans directly from
the ReportingPage. Users can view, create, and update action plans for host
findings without switching to the Atlas web tool.

Backend:
- Add atlasApi.js helper with Basic Auth, TLS skip, GET/PUT/PATCH/POST
- Add atlas_action_plans_cache migration for SQLite cache table
- Add atlas.js router with sync, status, and proxy CRUD endpoints
- Mount Atlas router at /api/atlas in server.js
- Extract hostId from Ivanti host findings during sync

Frontend:
- Add AtlasBadge component (amber=needs plan, green=has plan)
- Add AtlasSlideOutPanel with plan list, create form, edit capability
- Separate active plans from inactive history in collapsible section
- Custom dark-themed plan type dropdown
- Optimistic local state shows pending plans immediately after creation
- Atlas sync button on ReportingPage toolbar
- Prepopulate finding ID in create form from clicked row

Environment:
- Add ATLAS_API_URL, ATLAS_API_USER, ATLAS_API_PASS, ATLAS_SKIP_TLS to .env.example
2026-04-23 21:52:53 +00:00
root
e1b000870c Enforce 120-day maximum on FP workflow expiration date 2026-04-22 19:52:06 +00:00
root
f3ba322403 Fix variant pill labels to show short priority tag instead of full description 2026-04-22 18:37:54 +00:00
root
0bea387ac9 Add grouped metric health cards with variant pills, hover tooltips, and info panel to compliance page 2026-04-22 18:30:59 +00:00
root
aa3ce3bae9 Replace window.confirm() with themed ConfirmModal across dashboard 2026-04-20 21:54:37 +00:00
root
0cdaecf890 Add themed admin page with user management, audit log, and system info panels; add compliance note delete functionality 2026-04-20 21:39:43 +00:00
root
043c85cc69 Add admin page overhaul and compliance schema drift check specs, compliance upload improvements, drift checker helper 2026-04-20 20:12:12 +00:00
jramos
6082721452 Sync all local changes for remote dev server migration 2026-04-20 10:23:47 -06:00
jramos
a214393723 Add compliance-staging folder, gitignore agents, update docs and kiro config 2026-04-16 14:41:52 -06:00
jramos
f141fa58a1 Add multi-metric note selection to compliance detail panel 2026-04-16 14:28:44 -06:00
jramos
e1b0236874 feat: add FP attachment library — attach existing CVE documents to FP submissions
- Add GET /api/ivanti/fp-workflow/documents/search endpoint for querying the document library
- Update POST /api/ivanti/fp-workflow to accept libraryDocIds for attaching library documents on create
- Update POST .../submissions/:id/attachments to accept libraryDocIds on edit
- Add AttachmentSourcePicker component with local upload and library search modes
- Integrate picker into FpWorkflowModal (create) and FpEditModal (edit)
- Track attachment source (local/library) in attachment_results_json for traceability
2026-04-15 15:27:21 -06:00
jramos
ed48522932 feat: add row visibility controls to Reporting page — hide/bulk-hide rows, localStorage persistence, visibility manager popover, chart/export integration 2026-04-15 13:15:01 -06:00
jramos
938dda400a feat: improve archive finding clarity with finding IDs, historical severity labels, and related active finding indicators 2026-04-15 10:18:19 -06:00
jramos
732873dd6a feat: add migration for GRANITE workflow_type CHECK constraint 2026-04-14 15:44:17 -06:00
jramos
0fe8e94d51 feat: add GRANITE as fourth workflow type in Ivanti queue
- Add GRANITE to VALID_WORKFLOW_TYPES in backend (no vendor required, same as CARD)
- Update vendor validation and error messages across all endpoints (single add, batch, PUT, redirect)
- Add GRANITE option to RedirectModal with warm slate color (#A1887F)
- Rename QueuePanel CARD section to Inventory, group CARD + GRANITE with sub-divider
- Add GRANITE to AddToQueuePopover and SelectionToolbar
- Update spec docs (requirements, design, tasks)
2026-04-14 15:38:22 -06:00
jramos
28bce28fc9 docs: add knowledge base guides for reporting, compliance, queue operations, user management, and CVE tracking 2026-04-13 16:52:19 -06:00
jramos
72fd79ea42 docs: add knowledge base article for FP queue and submission editing workflow 2026-04-13 16:38:31 -06:00
jramos
f63c286458 fix: show all Ivanti reviewer notes (rework, approval, current/previous state) in history tab 2026-04-13 16:14:27 -06:00
jramos
93c144576f docs: document map endpoint behavior — JSON only, one finding per call, UUID resolution flow 2026-04-13 16:03:57 -06:00
jramos
fa3b045a2f fix: map findings one at a time via JSON POST, only mark successfully mapped queue items as complete 2026-04-13 15:59:55 -06:00
jramos
4583d09750 chore: remove debug logging, remove unused ivantiMultipartPost import 2026-04-13 14:31:36 -06:00
jramos
75ac8c823a feat: show finding IDs in history, display Ivanti reviewer notes (rework/approval feedback) in history tab 2026-04-13 14:25:14 -06:00
jramos
68e36b4bac docs: document Ivanti API limitations — attach endpoint broken, search by ID unsupported, UUID not in create response 2026-04-13 14:14:39 -06:00
jramos
d24b45b404 fix: disable attach-to-existing endpoint (Ivanti API returns 400), show redirect message instead 2026-04-13 14:10:55 -06:00
jramos
d64eb7eec4 fix: use 'file' field name with proper MIME type for attach endpoint 2026-04-13 14:07:13 -06:00
jramos
6cb65fddc1 fix: use ivantiFormPost with 'files' field name for attach endpoint (matches create) 2026-04-13 14:05:05 -06:00
jramos
0ca83c6736 fix: revert map to multipart-only, add attachment upload logging 2026-04-13 14:02:28 -06:00
jramos
06268880da fix: try JSON POST first for map endpoint, fall back to multipart on 500/415 2026-04-13 13:56:00 -06:00
jramos
b4f0ddcb78 fix: use JSON POST instead of multipart for Ivanti map endpoint 2026-04-13 13:55:15 -06:00
jramos
55e3e074a5 debug: log Ivanti map endpoint response details on failure 2026-04-13 13:30:10 -06:00
jramos
66bbeb84a5 fix: search by workflow name instead of numeric ID to resolve UUID 2026-04-13 13:16:09 -06:00
jramos
4578f8cd85 debug: log full Ivanti search response to diagnose UUID resolution 2026-04-13 13:10:31 -06:00
jramos
5469a86e6e debug: add logging to UUID resolver to identify correct field name from Ivanti search response 2026-04-13 13:02:08 -06:00
jramos
2b6db1f903 fix: resolve UUID for map/attach endpoints, fix attachment field name mismatch
- Add resolveWorkflowBatchUuid helper that searches Ivanti API for UUID by batch ID and caches it locally
- Use UUID resolver in findings and attachments endpoints instead of relying on stored UUID
- Store UUID on new FP creation by searching Ivanti after workflow batch is created
- Fix frontend attachment upload field name from 'files' to 'attachments' to match Multer config
2026-04-13 12:53:13 -06:00
jramos
7c97bc3a84 Fixed Multer config .array from files to attachements 2026-04-13 12:45:37 -06:00
jramos
835fbf26e7 fix: revert clickable workflow badges, fix migration default, auto-sync submission lifecycle status from Ivanti findings
- Revert workflow badge to static (non-clickable) — queue panel is the entry point
- Fix migration: use DEFAULT NULL for updated_at (SQLite disallows CURRENT_TIMESTAMP in ALTER TABLE)
- Add useMemo enrichment to cross-reference submission lifecycle_status with actual Ivanti workflow state from findings data
2026-04-13 12:39:47 -06:00
jramos
c4aaeff2a1 fixed const constraint default 2026-04-13 12:30:43 -06:00
jramos
df30430956 feat: add FP submission editing with lifecycle tracking, clickable workflow badges, and edit modal
- Add migration for lifecycle_status, batch UUID, updated_at columns and submission history table
- Add backend endpoints: GET/PUT/POST/PATCH for viewing, editing, adding findings/attachments, and status changes
- Add pure helpers: validateLifecycleTransition, mergeFindings, buildSubmissionHistoryEntry
- Add FpEditModal with tabbed UI (Details, Findings, Attachments, History)
- Make workflow badges clickable for Reworked/Rejected/Expired states with pencil icon
- Add submissions list section to QueuePanel with lifecycle status badges
- Wire state and data flow in ReportingPage for submissions fetch and edit callbacks
2026-04-13 12:27:56 -06:00
jramos
57f11c362b docs: update README with queue redirect, CVE tooltips, FP workflow submission, and missing migrations 2026-04-09 16:18:22 -06:00
jramos
4df83d36dd fix: include hostname overrides in all queue endpoint responses 2026-04-09 16:11:52 -06:00
jramos
0a7a7c2827 feat: add Ivanti Queue redirect for completed items 2026-04-09 16:01:36 -06:00
jramos
1963faf9b8 fix: queue now uses edited hostname override instead of original Ivanti value 2026-04-09 15:25:16 -06:00
102 changed files with 74118 additions and 680 deletions

Binary file not shown.

7
.gitignore vendored
View File

@@ -52,5 +52,12 @@ backend/fix_multivendor_constraint.js
backend/server.js-backup backend/server.js-backup
backend/setup.js-backup backend/setup.js-backup
# Compliance staging — keep folder, ignore contents
.compliance-staging/*
!.compliance-staging/.gitkeep
# Kiro agents (local only)
.kiro/agents/
# Kiro implementation summary (internal only) # Kiro implementation summary (internal only)
docs/kiro-implementation-summary.md docs/kiro-implementation-summary.md

View File

@@ -0,0 +1,13 @@
{
"enabled": true,
"name": "Compliance Schema Watcher",
"description": "Manually triggered before uploading a compliance xlsx to the dashboard. Diffs the xlsx structure against the parser's hand-maintained dicts (METRIC_CATEGORIES, CORE_COLS, SKIP_SHEETS) and flags anything that would cause silent data loss or misclassification. Prompts for the xlsx path and report mode.",
"version": "1",
"when": {
"type": "userTriggered"
},
"then": {
"type": "askAgent",
"prompt": "You are the Compliance Schema Watcher agent. Follow the instructions in `.kiro/agents/compliance-schema-watcher.md` exactly.\n\nAsk the user to provide the following two inputs:\n\n1. **Path to the xlsx file:** Absolute path, or a filename to look for in `.compliance-staging/` then `~/Downloads/`. Example: `.compliance-staging/NTS_AEO_2026_04_15.xlsx`\n2. **Mode:** \"report only\" (surface drift findings in chat, no file edits) or \"report + propose edits\" (surface drift and draft specific dict changes for `backend/scripts/parse_compliance_xlsx.py`)\n\nOnce you have both inputs, follow the full schema drift workflow described in `.kiro/agents/compliance-schema-watcher.md`: resolve the file path, read the parser dicts, run the helper script to extract xlsx structure, diff against the parser's expectations, and output a categorised report with a pre-upload verdict."
}
}

View File

@@ -0,0 +1,13 @@
{
"enabled": true,
"name": "Doc Review",
"description": "Manually triggered after merging to master. Reads the recent git diff, classifies the changes, and proposes documentation updates following the doc-updater decision tree and doc-standards.md conventions.",
"version": "1",
"when": {
"type": "userTriggered"
},
"then": {
"type": "askAgent",
"prompt": "Run a documentation review against the latest changes on master. Follow these steps exactly:\n\n1. Run `git log --oneline -10` to see recent commits. If any commit message contains `[skip-docs]`, stop and report NO_DOC_UPDATE_NEEDED.\n\n2. Run `git diff HEAD~1 --stat` to get the list of changed files, then `git diff HEAD~1` to get the full diff. If the diff is larger than 500 lines, report NEEDS_HUMAN_REVIEW with a summary of which areas likely need docs.\n\n3. Read `.kiro/agents/doc-updater.md` for the full decision tree and `.kiro/steering/doc-standards.md` for formatting conventions.\n\n4. Follow the doc-updater decision tree: triage the change, decide if docs need updating, survey existing docs (README.md, docs/ folder), and propose surgical edits.\n\n5. For any proposed changes, apply them directly to the doc files. Only touch README.md and files under docs/. Never touch code files.\n\n6. After applying changes, output the SUMMARY block from the decision tree so Jordan can review what was changed and why."
}
}

View File

@@ -0,0 +1,13 @@
{
"enabled": true,
"name": "Ivanti API Debugger",
"description": "Manually triggered when debugging a failing Ivanti API call. Prompts for the endpoint, request payload, and error response, then invokes the ivanti-api-debugger agent to diagnose the issue and update ivanti-api-reference.md with any findings.",
"version": "1",
"when": {
"type": "userTriggered"
},
"then": {
"type": "askAgent",
"prompt": "You are the Ivanti API Debugger agent. Follow the instructions in `.kiro/agents/ivanti-api-debugger.md` exactly.\n\nAsk the user to provide the following (one clarifying question, not five — accept whatever they paste and infer the rest):\n\n1. The failing endpoint or route — either the Ivanti API path (e.g. `/workflowBatch/falsePositive/request`) or the backend route file/handler that makes the call (e.g. `backend/routes/ivantiWorkflows.js`)\n2. The request payload they sent (curl, JSON body, or code snippet)\n3. The response or error they got back (HTTP status, response body, or error message)\n\nOnce you have that context, follow the full diagnostic workflow described in `.kiro/agents/ivanti-api-debugger.md`: read the relevant route/service code, cross-reference `docs/ivanti-api-reference.md`, check for common Ivanti failure modes, form a hypothesis, and propose a concrete next request to try. If the user confirms a finding, update `docs/ivanti-api-reference.md` using its existing structure."
}
}

View File

@@ -0,0 +1,13 @@
{
"enabled": true,
"name": "Security Audit Tracker",
"description": "Manually triggered to scan the codebase for security issues and maintain a living audit tracker document. Prompts for scan scope (full repo or specific path) and mode (report only or report + update tracker). Invokes the security-audit-tracker agent for static analysis and doc tracking.",
"version": "1",
"when": {
"type": "userTriggered"
},
"then": {
"type": "askAgent",
"prompt": "You are the Security Audit Tracker agent. Follow the instructions in `.kiro/agents/security-audit-tracker.md` exactly.\n\nAsk the user to provide the following two inputs:\n\n1. **Scope:** \"full repo\" to scan the entire codebase, or a specific path/module to focus on (e.g. `backend/routes/`, `frontend/src/components/`, `backend/helpers/ivantiApi.js`)\n2. **Mode:** \"scan only\" (report findings to chat, no file writes) or \"scan + update tracker\" (report findings and merge them into the tracker doc at `docs/security-audit-tracker.md`)\n\nOnce you have both inputs, follow the full diagnostic and tracking workflow described in `.kiro/agents/security-audit-tracker.md`: determine scope, check for the tracker doc (create it if missing), scan for the security failure modes listed in the agent spec, cross-reference against previously tracked findings, and output a prioritised report. In \"scan + update tracker\" mode, also merge findings into the tracker doc and update its metadata."
}
}

View File

@@ -0,0 +1 @@
{"specId": "30e46443-e636-4df1-bb98-886f403b2e32", "workflowType": "requirements-first", "specType": "feature"}

View File

@@ -0,0 +1,423 @@
# Design Document: Admin Page Overhaul
## Overview
The Admin Page Overhaul replaces the current inline `UserManagement` modal rendering on the admin page with a full-page, themed admin panel. The new `AdminPage` component follows the same layout conventions as `CompliancePage`, `ExportsPage`, and `KnowledgeBasePage` — a top-level page component rendered in the main content area of `App.js` when `currentPage === 'admin'`.
The page consolidates three admin functions into a single tabbed interface:
1. **User Management** — themed table with inline add/edit forms, group badges, and active status toggles
2. **Audit Log** — paginated, filterable log table with action-type badges and date range filters
3. **System Info** — stat cards showing user counts, audit log totals, and recent activity
All sections use the dark tactical intelligence theme defined in `DESIGN_SYSTEM.md` and `App.css``intel-card` containers, `intel-button` controls, `intel-input` form fields, `status-badge` action labels, and `stat-card` stat displays.
### Design Decisions
- **New component, not a wrapper.** The existing `UserManagement.js` and `AuditLog.js` are white-background modals with Tailwind utility classes. Wrapping them would create visual inconsistency. The `AdminPage` component builds themed versions of both panels from scratch, reusing the same backend API endpoints.
- **Existing modals preserved.** The `UserMenu` quick-access links ("Manage Users", "Audit Log") continue to open the existing modal components. This keeps the quick-access workflow intact while the admin page provides the full-featured experience.
- **No new backend endpoints.** All data comes from existing routes: `GET /api/users`, `POST/PATCH/DELETE /api/users/:id`, `GET /api/audit-logs`, `GET /api/audit-logs/actions`.
- **Inline styles + App.css classes.** Follows the project convention of defining style constants in the component file and referencing `App.css` classes (`intel-card`, `intel-button`, `data-row`, etc.) where available.
## Architecture
```mermaid
graph TD
A[App.js] -->|currentPage === 'admin' && isAdmin| B[AdminPage]
B --> C[Tab Navigation]
C -->|"User Management"| D[UserManagementPanel]
C -->|"Audit Log"| E[AuditLogPanel]
C -->|"System Info"| F[SystemInfoPanel]
D -->|GET /api/users| G[Backend: users.js]
D -->|POST /api/users| G
D -->|PATCH /api/users/:id| G
D -->|DELETE /api/users/:id| G
E -->|GET /api/audit-logs| H[Backend: auditLog.js]
E -->|GET /api/audit-logs/actions| H
F -->|GET /api/users| G
F -->|GET /api/audit-logs?limit=10| H
```
### Component Hierarchy
```
AdminPage
├── PageHeader (title + accent glow)
├── TabNavigation (User Management | Audit Log | System Info)
├── UserManagementPanel
│ ├── AddUserButton / InlineForm
│ ├── UserTable
│ │ └── UserRow (group badge, status toggle, edit/delete actions)
│ ├── ErrorBanner
│ └── SuccessToast
├── AuditLogPanel
│ ├── FilterBar (username, action, entity type, start date, end date)
│ ├── LogTable
│ │ └── LogRow (timestamp, user, action badge, entity, details, IP)
│ ├── Pagination
│ ├── EmptyState
│ └── ErrorBanner
└── SystemInfoPanel
├── StatCards (total users, active users, audit entries, recent logins)
└── RecentActivityList (10 most recent audit entries)
```
### Data Flow
1. `App.js` renders `<AdminPage />` when `currentPage === 'admin'` and `isAdmin()` returns true. Non-admin users are redirected to home.
2. `AdminPage` manages the active tab in local state (default: `'users'`).
3. Each panel fetches its own data on mount using `fetch()` with `credentials: 'include'`.
4. Mutations (create, update, delete user) trigger a re-fetch of the user list. Success/error feedback is shown inline.
5. Audit log panel manages its own pagination and filter state, re-fetching on filter apply or page change.
6. System info panel fetches user list and recent audit logs on mount, computing derived stats client-side.
## Components and Interfaces
### AdminPage (main component)
```javascript
// frontend/src/components/pages/AdminPage.js
export default function AdminPage() {
// Props: none (reads auth context internally)
// State:
// activeTab: 'users' | 'audit' | 'system'
// Renders: PageHeader, TabNavigation, conditional panel
}
```
### TabNavigation
```javascript
// Internal to AdminPage
// Props:
// activeTab: string
// onTabChange: (tab: string) => void
// Tabs: [
// { id: 'users', label: 'User Management', icon: Shield },
// { id: 'audit', label: 'Audit Log', icon: Clock },
// { id: 'system', label: 'System Info', icon: Activity },
// ]
```
Styling: monospace uppercase text, `--intel-accent` border and background on active tab, transparent with muted text on inactive tabs. Matches the tab pattern used in `CompliancePage` (team tabs).
### UserManagementPanel
```javascript
// Internal to AdminPage
// State:
// users: Array<User>
// loading: boolean
// error: string | null
// showForm: boolean
// editingUser: User | null
// formData: { username, email, password, group }
// formError: string
// successMessage: string
//
// API calls:
// GET /api/users → fetch all users
// POST /api/users → create user
// PATCH /api/users/:id → update user (fields, group, is_active)
// DELETE /api/users/:id → delete user
//
// Group badge colors (themed):
// Admin: --intel-danger (#EF4444)
// Standard_User: --intel-accent (#0EA5E9)
// Leadership: --intel-warning (#F59E0B)
// Read_Only: --text-muted (#94A3B8)
```
### AuditLogPanel
```javascript
// Internal to AdminPage
// State:
// logs: Array<AuditLogEntry>
// loading: boolean
// error: string | null
// pagination: { page, limit, total, totalPages }
// filters: { user, action, entityType, startDate, endDate }
// actions: string[] (populated from /api/audit-logs/actions)
//
// API calls:
// GET /api/audit-logs?page=&limit=25&user=&action=&entityType=&startDate=&endDate=
// GET /api/audit-logs/actions
//
// Action badge colors (themed):
// login/logout: --intel-success (#10B981)
// *_create: --intel-accent (#0EA5E9)
// *_update/*_edit: --intel-warning (#F59E0B)
// *_delete: --intel-danger (#EF4444)
// default: --text-muted (#94A3B8)
```
### SystemInfoPanel
```javascript
// Internal to AdminPage
// State:
// users: Array<User>
// recentLogs: Array<AuditLogEntry>
// loading: boolean
// errors: { users: string | null, logs: string | null }
//
// Derived stats:
// totalUsers: users.length
// activeUsers: users.filter(u => u.is_active).length
// recentLogins: users.filter(u => u.last_login && withinLast7Days(u.last_login)).length
// totalAuditEntries: fetched from audit-logs pagination.total
//
// API calls:
// GET /api/users
// GET /api/audit-logs?limit=10&page=1
```
### Integration with App.js
```javascript
// In App.js, replace:
// {currentPage === 'admin' && isAdmin() && (
// <div className="space-y-6">
// <UserManagement onClose={() => setCurrentPage('home')} />
// </div>
// )}
//
// With:
// {currentPage === 'admin' && isAdmin() && <AdminPage />}
// {currentPage === 'admin' && !isAdmin() && /* redirect to home */}
//
// Keep existing modal triggers:
// {showUserManagement && <UserManagement onClose={...} />}
// {showAuditLog && <AuditLog onClose={...} />}
```
## Data Models
### User (from GET /api/users)
```javascript
{
id: number,
username: string,
email: string,
group: 'Admin' | 'Standard_User' | 'Leadership' | 'Read_Only',
is_active: 0 | 1,
created_at: string, // ISO datetime
last_login: string | null // ISO datetime
}
```
### AuditLogEntry (from GET /api/audit-logs)
```javascript
{
id: number,
user_id: number,
username: string,
action: string, // e.g. 'login', 'user_create', 'cve_delete'
entity_type: string, // e.g. 'auth', 'user', 'cve', 'document'
entity_id: string | null,
details: string | null, // JSON string
ip_address: string | null,
created_at: string // ISO datetime
}
```
### AuditLogPagination (from GET /api/audit-logs response)
```javascript
{
logs: AuditLogEntry[],
pagination: {
page: number,
limit: number,
total: number,
totalPages: number
}
}
```
### Tab Configuration
```javascript
const TABS = [
{ id: 'users', label: 'User Management', icon: Shield },
{ id: 'audit', label: 'Audit Log', icon: Clock },
{ id: 'system', label: 'System Info', icon: Activity },
];
```
### Group Badge Theme Map
```javascript
const GROUP_BADGE_THEMED = {
Admin: { bg: 'rgba(239,68,68,0.15)', border: '#EF4444', text: '#FCA5A5' },
Standard_User: { bg: 'rgba(14,165,233,0.15)', border: '#0EA5E9', text: '#7DD3FC' },
Leadership: { bg: 'rgba(245,158,11,0.15)', border: '#F59E0B', text: '#FCD34D' },
Read_Only: { bg: 'rgba(148,163,184,0.15)', border: '#94A3B8', text: '#CBD5E1' },
};
```
### Action Badge Theme Map
```javascript
const ACTION_BADGE_THEMED = {
login: { bg: 'rgba(16,185,129,0.15)', border: '#10B981', text: '#6EE7B7' },
logout: { bg: 'rgba(148,163,184,0.15)', border: '#94A3B8', text: '#CBD5E1' },
login_failed: { bg: 'rgba(239,68,68,0.15)', border: '#EF4444', text: '#FCA5A5' },
user_create: { bg: 'rgba(14,165,233,0.15)', border: '#0EA5E9', text: '#7DD3FC' },
user_update: { bg: 'rgba(245,158,11,0.15)', border: '#F59E0B', text: '#FCD34D' },
user_delete: { bg: 'rgba(239,68,68,0.15)', border: '#EF4444', text: '#FCA5A5' },
cve_create: { bg: 'rgba(14,165,233,0.15)', border: '#0EA5E9', text: '#7DD3FC' },
cve_edit: { bg: 'rgba(245,158,11,0.15)', border: '#F59E0B', text: '#FCD34D' },
cve_delete: { bg: 'rgba(239,68,68,0.15)', border: '#EF4444', text: '#FCA5A5' },
document_upload: { bg: 'rgba(139,92,246,0.15)', border: '#8B5CF6', text: '#C4B5FD' },
document_delete: { bg: 'rgba(239,68,68,0.15)', border: '#EF4444', text: '#FCA5A5' },
};
```
## Correctness Properties
*A property is a characteristic or behavior that should hold true across all valid executions of a system — essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
### Property 1: Group badge color mapping is total and correct
*For any* valid user group string (`Admin`, `Standard_User`, `Leadership`, `Read_Only`), the group badge styling function SHALL return a non-null object with `bg`, `border`, and `text` fields matching the themed color for that group. *For any* string that is not one of the four valid groups, the function SHALL return the default muted styling.
**Validates: Requirements 3.3**
### Property 2: Edit form population preserves user data
*For any* user object with arbitrary `username`, `email`, and `group` values, populating the edit form from that user SHALL result in `formData.username === user.username`, `formData.email === user.email`, and `formData.group === user.group`, with `formData.password` set to an empty string.
**Validates: Requirements 3.5**
### Property 3: Self-modification prevention
*For any* user list that contains the currently authenticated admin user, the admin user's own row SHALL have the group dropdown disabled and the active status toggle disabled. *For any* other user in the list, those controls SHALL be enabled.
**Validates: Requirements 3.8**
### Property 4: Action badge color mapping is total and correct
*For any* known audit log action string (from the set of defined actions: `login`, `logout`, `login_failed`, `user_create`, `user_update`, `user_delete`, `cve_create`, `cve_edit`, `cve_delete`, `document_upload`, `document_delete`), the action badge styling function SHALL return the correct themed color object. *For any* unknown action string, the function SHALL return the default muted styling.
**Validates: Requirements 4.4**
### Property 5: Applying filters resets pagination to page 1
*For any* combination of filter values (username text, action type, entity type, start date, end date) and *for any* current page number, applying the filters SHALL result in a fetch call with `page=1`.
**Validates: Requirements 4.7**
### Property 6: Recent login count computation
*For any* list of user objects with random `last_login` timestamps (including null values), the computed "recent logins" count SHALL equal the number of users whose `last_login` is non-null and falls within the last 7 days from the current time.
**Validates: Requirements 5.1**
### Property 7: Admin-only access control
*For any* user object, the admin page content SHALL be rendered if and only if `user.group === 'Admin'`. When `user.group` is any value other than `'Admin'`, the system SHALL redirect to the home page.
**Validates: Requirements 6.1, 6.2**
## Error Handling
### User Management Panel
| Error Scenario | Handling |
|---|---|
| `GET /api/users` fails | Display error banner with `--intel-danger` styling. User table is hidden. Retry on next tab switch or manual refresh. |
| `POST /api/users` fails (validation) | Display `formError` message below the form in danger color. Form remains open for correction. |
| `POST /api/users` fails (409 conflict) | Display "Username or email already exists" in `formError`. |
| `PATCH /api/users/:id` fails | Display inline error. Revert optimistic UI changes if any. |
| `DELETE /api/users/:id` fails | Display alert with error message. User list unchanged. |
| Self-demotion attempt | Group dropdown disabled for current user. Backend returns 400 if bypassed. |
| Self-deactivation attempt | Toggle disabled for current user. Backend returns 400 if bypassed. |
### Audit Log Panel
| Error Scenario | Handling |
|---|---|
| `GET /api/audit-logs` fails | Display error banner with `--intel-danger` styling. Table hidden. |
| `GET /api/audit-logs/actions` fails | Action filter dropdown shows no options. Non-critical — silently ignored. |
| Invalid date range (start > end) | Client-side: no validation needed — backend handles gracefully by returning empty results. |
| Empty result set | Display "No audit log entries found" message in `--text-muted` color. |
### System Info Panel
| Error Scenario | Handling |
|---|---|
| `GET /api/users` fails | Affected stat cards (total users, active users, recent logins) show "Unable to load" fallback text. |
| `GET /api/audit-logs` fails | Audit entries stat card and recent activity list show "Unable to load" fallback. |
| Partial failure (one endpoint fails) | Only the affected cards show fallback. Successfully loaded cards display normally. |
### Success Feedback
- Create user: green success toast "User created successfully" auto-dismisses after 2 seconds.
- Update user: green success toast "User updated successfully" auto-dismisses after 2 seconds.
- Delete user: green success toast "User deleted" auto-dismisses after 2 seconds.
- Toggle active status: immediate UI update, no toast (inline visual feedback is sufficient).
## Testing Strategy
### Unit Tests (Example-Based)
Unit tests cover specific rendering, interaction, and integration scenarios:
**AdminPage structure:**
- Renders page header with "Admin Panel" title
- Defaults to User Management tab on mount
- Switches panels when tabs are clicked
- Only renders when user is admin (access control)
**UserManagementPanel:**
- Renders user table with all required columns
- Displays themed group badges for each group type
- Shows inline form when "Add User" is clicked
- Populates form with user data when edit is clicked
- Shows confirmation dialog on delete
- Disables self-modification controls for current user
- Displays error banner on API failure
- Displays success toast on successful operations
**AuditLogPanel:**
- Renders log table with all required columns
- Displays themed action badges
- Renders filter controls (username, action, entity type, dates)
- Fetches page 1 when filters are applied
- Navigates pages with pagination controls
- Shows empty state when no results
- Shows error banner on API failure
**SystemInfoPanel:**
- Renders four stat cards with correct labels
- Computes derived stats correctly from mock data
- Shows recent activity list with up to 10 entries
- Shows fallback message when an API call fails
### Property-Based Tests
Property-based tests use [fast-check](https://github.com/dubzzz/fast-check) to verify universal properties across generated inputs. Each test runs a minimum of 100 iterations.
| Property | Test Description | Tag |
|---|---|---|
| Property 1 | Generate random group strings (valid + invalid), verify badge function returns correct colors | Feature: admin-page-overhaul, Property 1: Group badge color mapping is total and correct |
| Property 2 | Generate random user objects, verify edit form population matches user fields exactly | Feature: admin-page-overhaul, Property 2: Edit form population preserves user data |
| Property 3 | Generate random user lists containing the current admin, verify self-edit controls are disabled | Feature: admin-page-overhaul, Property 3: Self-modification prevention |
| Property 4 | Generate random action strings (known + unknown), verify badge function returns correct colors | Feature: admin-page-overhaul, Property 4: Action badge color mapping is total and correct |
| Property 5 | Generate random filter states and current page numbers, verify fetch is called with page=1 | Feature: admin-page-overhaul, Property 5: Applying filters resets pagination to page 1 |
| Property 6 | Generate random user lists with random last_login timestamps, verify recent login count matches manual computation | Feature: admin-page-overhaul, Property 6: Recent login count computation |
| Property 7 | Generate random user objects with random groups, verify admin page renders iff group === 'Admin' | Feature: admin-page-overhaul, Property 7: Admin-only access control |
### Test Configuration
- **Library:** fast-check (JavaScript property-based testing)
- **Runner:** Jest (via react-scripts test)
- **Iterations:** Minimum 100 per property test (`fc.assert(property, { numRuns: 100 })`)
- **Tag format:** Comment at top of each property test referencing the design property

View File

@@ -0,0 +1,108 @@
# Requirements Document
## Introduction
The STEAM Security Dashboard currently has an Admin page (`currentPage === 'admin'`) that renders the `UserManagement` modal component inline — the same modal triggered from the top-right `UserMenu`. The page does not follow the dashboard's dark "tactical intelligence" theme and provides no audit log viewing or other administrative capabilities. This feature overhauls the admin page into a dedicated, full-page admin panel that matches the design system and consolidates user management, audit log viewing, and system administration into a single cohesive interface accessible only to Admin-group users.
## Glossary
- **Admin_Page**: The full-page admin panel rendered when `currentPage === 'admin'`, replacing the current inline modal rendering
- **Dashboard**: The STEAM Security Dashboard application
- **Design_System**: The color palette, typography, component specs, and interaction patterns defined in `DESIGN_SYSTEM.md` and `App.css`
- **Audit_Log_Panel**: The section of the Admin_Page that displays paginated, filterable audit log entries
- **User_Management_Panel**: The section of the Admin_Page that displays the user list and provides create, edit, delete, and activate/deactivate operations
- **Admin_User**: A user whose `user_group` is `Admin`
- **Tab_Navigation**: The in-page navigation component that switches between Admin_Page sections (User Management, Audit Log, System Info)
- **System_Info_Panel**: The section of the Admin_Page that displays system metadata such as active user count, recent login activity, and database statistics
## Requirements
### Requirement 1: Admin Page Layout and Theme Compliance
**User Story:** As an admin, I want the admin page to follow the same dark tactical intelligence theme as the rest of the dashboard, so that the experience is visually consistent.
#### Acceptance Criteria
1. THE Admin_Page SHALL use the Design_System color palette — `--intel-darkest` for the page background, `--intel-dark` and `--intel-medium` for card backgrounds, and `--intel-accent` for interactive elements
2. THE Admin_Page SHALL render as a full-page view within the main content area, matching the layout pattern used by other page components (CompliancePage, ExportsPage, KnowledgeBasePage)
3. THE Admin_Page SHALL display a page header with the title "Admin Panel" styled in monospace uppercase with the accent text glow defined in the Design_System
4. THE Admin_Page SHALL use `intel-card` styled containers for each content section, with the standard gradient backgrounds, border glow, and shadow depth defined in the Design_System
5. THE Admin_Page SHALL use `intel-button` styled controls for all interactive buttons, with primary, danger, and success variants as appropriate
6. THE Admin_Page SHALL use `intel-input` styled form fields for all text inputs, selects, and date pickers
### Requirement 2: Tab-Based Section Navigation
**User Story:** As an admin, I want to navigate between admin sections using tabs, so that I can quickly switch between user management, audit logs, and system information without leaving the page.
#### Acceptance Criteria
1. THE Admin_Page SHALL display a Tab_Navigation component with tabs for "User Management", "Audit Log", and "System Info"
2. WHEN an Admin_User clicks a tab, THE Tab_Navigation SHALL switch the visible content section to the selected tab and visually indicate the active tab using the `--intel-accent` color
3. THE Admin_Page SHALL default to the "User Management" tab when first loaded
4. THE Tab_Navigation SHALL use monospace uppercase text with letter spacing consistent with the Design_System label typography
### Requirement 3: Themed User Management Panel
**User Story:** As an admin, I want to manage users directly within the themed admin page instead of a white modal overlay, so that user management feels integrated into the dashboard.
#### Acceptance Criteria
1. THE User_Management_Panel SHALL display a table of all users with columns for username, email, group, active status, and last login
2. THE User_Management_Panel SHALL style the user table with dark theme rows using `data-row` hover effects and `--text-primary` / `--text-secondary` text colors from the Design_System
3. THE User_Management_Panel SHALL display group badges using severity-style badge coloring — Admin in danger color, Standard_User in accent color, Leadership in warning color, Read_Only in muted color
4. WHEN an Admin_User clicks "Add User", THE User_Management_Panel SHALL display an inline form styled with `intel-input` fields and `intel-button` controls
5. WHEN an Admin_User clicks the edit action on a user row, THE User_Management_Panel SHALL populate the inline form with that user's current data for editing
6. WHEN an Admin_User clicks the delete action on a user row, THE User_Management_Panel SHALL display a confirmation prompt before sending the delete request
7. WHEN an Admin_User toggles a user's active status, THE User_Management_Panel SHALL send a PATCH request and update the displayed status without a full page reload
8. THE User_Management_Panel SHALL prevent an Admin_User from changing their own group or deactivating their own account
9. IF a user management API request fails, THEN THE User_Management_Panel SHALL display an error message styled with the `--intel-danger` color
### Requirement 4: Themed Audit Log Panel
**User Story:** As an admin, I want to view audit logs in a themed, filterable table within the admin page, so that I can monitor system activity without opening a separate modal.
#### Acceptance Criteria
1. THE Audit_Log_Panel SHALL fetch and display paginated audit log entries from the `/api/audit-logs` endpoint
2. THE Audit_Log_Panel SHALL display columns for timestamp, username, action, entity type, entity ID, details, and IP address
3. THE Audit_Log_Panel SHALL style the log table with dark theme rows, monospace font for timestamps and IP addresses, and `data-row` hover effects
4. THE Audit_Log_Panel SHALL display action type badges using color-coded `status-badge` styling — login actions in success color, delete actions in danger color, create actions in accent color, update actions in warning color
5. THE Audit_Log_Panel SHALL provide filter controls for username (text search), action type (dropdown populated from `/api/audit-logs/actions`), entity type (dropdown), start date, and end date
6. THE Audit_Log_Panel SHALL style all filter controls using `intel-input` and `intel-button` components from the Design_System
7. WHEN an Admin_User applies filters, THE Audit_Log_Panel SHALL re-fetch audit logs from page 1 with the selected filter parameters
8. WHEN an Admin_User clicks a pagination control, THE Audit_Log_Panel SHALL fetch the requested page and display a page indicator showing current page, total pages, and total entry count
9. THE Audit_Log_Panel SHALL display a "No audit log entries found" message styled with `--text-muted` color when the query returns zero results
10. IF the audit log API request fails, THEN THE Audit_Log_Panel SHALL display an error message styled with the `--intel-danger` color
### Requirement 5: System Info Panel
**User Story:** As an admin, I want to see a summary of system health and usage statistics, so that I can quickly assess the state of the dashboard.
#### Acceptance Criteria
1. THE System_Info_Panel SHALL display stat cards showing: total user count, active user count, total audit log entries, and count of users who logged in within the last 7 days
2. THE System_Info_Panel SHALL style each stat card using the `stat-card` pattern from the Design_System with the accent-colored top bar and hover lift effect
3. THE System_Info_Panel SHALL display a "Recent Activity" section showing the 10 most recent audit log entries in a compact list format
4. WHEN the System_Info_Panel loads, THE System_Info_Panel SHALL fetch statistics from the existing `/api/users` and `/api/audit-logs` endpoints
5. IF any statistics API request fails, THEN THE System_Info_Panel SHALL display a fallback "Unable to load" message in the affected stat card
### Requirement 6: Access Control
**User Story:** As a non-admin user, I want to be prevented from accessing the admin page, so that sensitive administrative functions are protected.
#### Acceptance Criteria
1. THE Dashboard SHALL render the Admin_Page content only when the authenticated user belongs to the Admin group
2. WHEN a non-admin user navigates to the admin page, THE Dashboard SHALL redirect the user to the home page
3. THE NavDrawer SHALL continue to display the "Admin Panel" navigation item only for Admin-group users
4. THE UserMenu SHALL continue to provide "Manage Users" and "Audit Log" quick-access links for Admin-group users, opening the respective modals as before
### Requirement 7: Loading and Error States
**User Story:** As an admin, I want to see clear loading indicators and error messages, so that I know when data is being fetched and when something goes wrong.
#### Acceptance Criteria
1. WHILE data is being fetched for any Admin_Page section, THE Admin_Page SHALL display a loading spinner styled with the `loading-spinner` class and `--intel-accent` color
2. IF an API request returns an error, THEN THE Admin_Page SHALL display the error message in a container styled with `--intel-danger` border and text color
3. WHEN an Admin_User performs a successful create, update, or delete operation, THE Admin_Page SHALL display a brief success notification styled with `--intel-success` color

View File

@@ -0,0 +1,160 @@
# Implementation Plan: Admin Page Overhaul
## Overview
Replace the current inline `UserManagement` modal rendering on the admin page with a full-page, themed `AdminPage` component. The new component lives at `frontend/src/components/pages/AdminPage.js` and provides three tabbed panels — User Management, Audit Log, and System Info — all styled with the dark tactical intelligence theme. No new backend endpoints are needed; the component reuses existing `/api/users` and `/api/audit-logs` routes. Existing modal components (`UserManagement`, `AuditLog`) are preserved for quick-access from `UserMenu`.
## Tasks
- [x] 1. Create AdminPage component with page header and tab navigation
- [x] 1.1 Create `frontend/src/components/pages/AdminPage.js` with the page shell
- Import React, useState, useAuth from AuthContext, and lucide-react icons (Shield, Clock, Activity)
- Define `API_BASE` constant matching project convention
- Define `TABS` array: `[{ id: 'users', label: 'User Management', icon: Shield }, { id: 'audit', label: 'Audit Log', icon: Clock }, { id: 'system', label: 'System Info', icon: Activity }]`
- Render page header with "Admin Panel" title in monospace uppercase with `--intel-accent` text glow
- Render tab navigation bar with monospace uppercase text, `--intel-accent` active styling, and muted inactive styling matching the CompliancePage team-tab pattern
- Manage `activeTab` state defaulting to `'users'`
- Conditionally render placeholder `<div>` for each panel based on `activeTab`
- _Requirements: 1.1, 1.2, 1.3, 2.1, 2.2, 2.3, 2.4_
- [x] 1.2 Integrate AdminPage into App.js
- Import `AdminPage` from `./components/pages/AdminPage`
- Replace the existing `{currentPage === 'admin' && isAdmin() && (<div className="space-y-6"><UserManagement onClose={() => setCurrentPage('home')} /></div>)}` block with `{currentPage === 'admin' && isAdmin() && <AdminPage />}`
- Add non-admin redirect: `{currentPage === 'admin' && !isAdmin() && setCurrentPage('home')}` (or useEffect equivalent)
- Keep existing `{showUserManagement && <UserManagement onClose={...} />}` and `{showAuditLog && <AuditLog onClose={...} />}` modal triggers unchanged
- _Requirements: 1.2, 6.1, 6.2, 6.3, 6.4_
- [-] 2. Implement UserManagementPanel
- [x] 2.1 Build the themed user table and group badges
- Define `GROUP_BADGE_THEMED` map with themed colors: Admin → danger, Standard_User → accent, Leadership → warning, Read_Only → muted
- Fetch users from `GET /api/users` with `credentials: 'include'` on panel mount
- Render user table with columns: username, email, group, active status, last login
- Style table with dark theme rows using `data-row` hover effects and `--text-primary` / `--text-secondary` text colors
- Render group badges using the themed color map with severity-style badge coloring
- Display loading spinner (`loading-spinner` class, `--intel-accent` color) while fetching
- Display error banner with `--intel-danger` styling on fetch failure
- _Requirements: 3.1, 3.2, 3.3, 7.1, 7.2_
- [x] 2.2 Implement inline add/edit form and CRUD operations
- Add "Add User" button styled with `intel-button` primary variant
- Show inline form with `intel-input` styled fields for username, email, password, and group dropdown
- On edit action: populate form with selected user's data (username, email, group; password blank)
- On form submit: POST (create) or PATCH (update) to `/api/users` or `/api/users/:id`
- On delete action: show confirmation prompt, then DELETE to `/api/users/:id`
- On active status toggle: PATCH to `/api/users/:id` with `is_active` toggled, update UI without full reload
- Prevent self-modification: disable group dropdown and active toggle for the current authenticated user's row
- Display form validation errors with `--intel-danger` color
- Display success toast with `--intel-success` color, auto-dismiss after 2 seconds
- _Requirements: 3.4, 3.5, 3.6, 3.7, 3.8, 3.9, 7.3_
- [ ] 2.3 Write property test: Group badge color mapping is total and correct
- **Property 1: Group badge color mapping is total and correct**
- Install `fast-check` as a dev dependency in `frontend/`
- Create test file `frontend/src/components/pages/__tests__/AdminPage.property.test.js`
- Generate random strings including the four valid groups and arbitrary invalid strings
- Verify the badge function returns correct themed colors for valid groups and default muted styling for invalid groups
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 3.3**
- [ ] 2.4 Write property test: Edit form population preserves user data
- **Property 2: Edit form population preserves user data**
- Generate random user objects with arbitrary username, email, and group values
- Verify that populating the edit form results in `formData.username === user.username`, `formData.email === user.email`, `formData.group === user.group`, and `formData.password === ''`
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 3.5**
- [ ] 2.5 Write property test: Self-modification prevention
- **Property 3: Self-modification prevention**
- Generate random user lists that include a user matching the current admin's ID
- Verify the admin's own row has group dropdown disabled and active toggle disabled
- Verify all other users have those controls enabled
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 3.8**
- [x] 3. Checkpoint — Verify user management panel
- Ensure all tests pass, ask the user if questions arise.
- [-] 4. Implement AuditLogPanel
- [x] 4.1 Build the themed audit log table with action badges and filters
- Define `ACTION_BADGE_THEMED` map with themed colors: login/success → green, delete → danger, create → accent, update → warning, default → muted
- Fetch audit logs from `GET /api/audit-logs?page=1&limit=25` with `credentials: 'include'` on panel mount
- Fetch action types from `GET /api/audit-logs/actions` for the action filter dropdown
- Render log table with columns: timestamp, username, action, entity type, entity ID, details, IP address
- Style timestamps and IP addresses with monospace font
- Render action type badges using the themed color map
- Style table with dark theme rows and `data-row` hover effects
- Display loading spinner while fetching, error banner on failure
- Display "No audit log entries found" message with `--text-muted` color when results are empty
- _Requirements: 4.1, 4.2, 4.3, 4.4, 4.9, 4.10, 7.1, 7.2_
- [x] 4.2 Implement filter controls and pagination
- Render filter bar with: username text input, action type dropdown, entity type dropdown, start date picker, end date picker
- Style all filter controls with `intel-input` and `intel-button` components
- On filter apply: re-fetch audit logs from page 1 with selected filter parameters
- Render pagination controls showing current page, total pages, and total entry count
- On page change: fetch the requested page
- _Requirements: 4.5, 4.6, 4.7, 4.8_
- [ ] 4.3 Write property test: Action badge color mapping is total and correct
- **Property 4: Action badge color mapping is total and correct**
- Generate random action strings including all known actions and arbitrary unknown strings
- Verify the badge function returns correct themed colors for known actions and default muted styling for unknown actions
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 4.4**
- [ ] 4.4 Write property test: Applying filters resets pagination to page 1
- **Property 5: Applying filters resets pagination to page 1**
- Generate random filter combinations (username text, action type, entity type, start date, end date) and random current page numbers
- Verify that applying filters results in a fetch call with `page=1`
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 4.7**
- [-] 5. Implement SystemInfoPanel
- [x] 5.1 Build stat cards and recent activity list
- Fetch users from `GET /api/users` and recent audit logs from `GET /api/audit-logs?limit=10&page=1` on panel mount
- Compute derived stats: total users (`users.length`), active users (`users.filter(u => u.is_active)`), recent logins (users with `last_login` within last 7 days), total audit entries (from pagination.total)
- Render four stat cards using the `stat-card` pattern with accent-colored top bar and hover lift effect
- Render "Recent Activity" section showing the 10 most recent audit log entries in a compact list format
- Show "Unable to load" fallback in affected stat cards when individual API requests fail
- Display loading spinner while fetching
- _Requirements: 5.1, 5.2, 5.3, 5.4, 5.5, 7.1_
- [ ] 5.2 Write property test: Recent login count computation
- **Property 6: Recent login count computation**
- Generate random user lists with random `last_login` timestamps (including null values)
- Verify the computed "recent logins" count equals the number of users whose `last_login` is non-null and falls within the last 7 days
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 5.1**
- [x] 6. Checkpoint — Verify all panels and integration
- Ensure all tests pass, ask the user if questions arise.
- [-] 7. Access control and final wiring
- [x] 7.1 Verify access control integration
- Confirm `AdminPage` reads auth context via `useAuth()` and only renders content for Admin-group users
- Confirm `App.js` redirects non-admin users to home when `currentPage === 'admin'`
- Confirm `NavDrawer` continues to show "Admin Panel" only for Admin-group users (no changes needed — verify existing behavior)
- Confirm `UserMenu` quick-access links ("Manage Users", "Audit Log") continue to open existing modal components (no changes needed — verify existing behavior)
- _Requirements: 6.1, 6.2, 6.3, 6.4_
- [ ] 7.2 Write property test: Admin-only access control
- **Property 7: Admin-only access control**
- Generate random user objects with random group values
- Verify admin page content renders if and only if `user.group === 'Admin'`
- Verify non-Admin groups trigger redirect to home
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 6.1, 6.2**
- [x] 8. Final checkpoint — Ensure all tests pass
- Ensure all tests pass, ask the user if questions arise.
## Notes
- Tasks marked with `*` are optional and can be skipped for faster MVP
- Each task references specific requirements for traceability
- Checkpoints ensure incremental validation
- Property tests validate universal correctness properties from the design document using fast-check
- Unit tests validate specific examples and edge cases
- Existing `UserManagement.js` and `AuditLog.js` modal components are not modified — they remain for UserMenu quick-access
- All styling follows the project convention of inline styles + App.css classes (no Tailwind in the new component)
- The `fast-check` library must be installed as a dev dependency before running property tests

View File

@@ -0,0 +1 @@
{"specId": "acff93bd-0045-4fcd-b948-cc52c7cc5ec6", "workflowType": "requirements-first", "specType": "feature"}

View File

@@ -0,0 +1,196 @@
# Design Document: Archive Finding Clarity
## Overview
This feature enhances the Ivanti Archive Findings panel on the STEAM Security Dashboard homepage to provide clearer context for archived findings. The changes span both backend (related active finding detection) and frontend (card rendering improvements).
The core additions are:
1. **Finding ID display** — Show the Ivanti finding ID on each archive card for cross-referencing
2. **Historical severity labeling** — Prefix severity with "Last seen:" to clarify it's a snapshot
3. **Related active finding detection** — Server-side matching of archived findings against the current findings cache by hostname + title
4. **Visual status indicators** — Icon and border color distinctions based on whether a related active finding exists
All matching is performed server-side in a single pass to avoid per-card API calls and keep the archive panel responsive.
## Architecture
The feature touches two layers:
```mermaid
flowchart LR
subgraph Backend
A[GET /api/ivanti/archive?state=X] --> B[Query ivanti_finding_archives]
B --> C[Parse ivanti_findings_cache JSON once]
C --> D[Match each archive record against active findings]
D --> E[Return archives with related_active field]
end
subgraph Frontend
E --> F[App.js archiveList.map]
F --> G[Render enhanced Archive Cards]
end
```
**Key design decision:** The related finding lookup is embedded in the existing `GET /api/ivanti/archive` endpoint rather than exposed as a separate endpoint. This avoids N+1 API calls from the frontend and keeps the archive panel's fetch pattern unchanged (single request per state filter click).
### Data Flow
1. User clicks a state card in `ArchiveSummaryBar` → triggers `handleArchiveStateClick(state)` in `App.js`
2. Frontend calls `GET /api/ivanti/archive?state={state}`
3. Backend queries `ivanti_finding_archives` for matching state
4. Backend reads `ivanti_findings_cache` row (id=1), parses `findings_json` once
5. For each archive record, backend runs the matching function against the parsed active findings
6. Backend returns `{ archives: [...], total: N }` where each archive object now includes a `related_active` field
7. Frontend renders each archive card with the new fields: finding ID, "Last seen:" severity, optional badge, icon/border
## Components and Interfaces
### Backend: Modified Archive Route (`backend/routes/ivantiArchive.js`)
**Changes to `GET /` handler:**
```javascript
// New matching function added to the module
function findRelatedActive(archive, activeFindings) {
// Returns { id, title, severity } or null
}
```
**`findRelatedActive(archive, activeFindings)` logic:**
- Input: one archive record, array of parsed active findings
- Filter active findings where:
- `hostName` exactly matches `archive.host_name` (case-sensitive, matching existing DB convention)
- AND the archive's `finding_title` is a case-insensitive substring of the active finding's `title`, OR vice versa
- AND the active finding's `id` is NOT equal to `archive.finding_id`
- If multiple matches, return the one with the highest `severity`
- If no matches, return `null`
**Modified response shape:**
```javascript
// Before
{ id, finding_id, finding_title, host_name, ip_address, current_state, last_severity, ... }
// After — same fields plus:
{ ...existing, related_active: null | { id: string, title: string, severity: number } }
```
### Frontend: Modified Archive Card Rendering (`frontend/src/App.js`)
The `archiveList.map()` block in `App.js` is updated to render:
1. **Finding title** (existing, unchanged)
2. **Finding ID** — new line below title, monospace, muted color (`#64748B`), font size `0.6rem`. Truncated with ellipsis at 20 characters, full value in `title` attribute for tooltip.
3. **Severity badge** — changed from raw number to "Last seen: X.X" format. Null/zero shows "Last seen: —".
4. **Related active badge** — conditional. When `related_active` is non-null, shows "Similar finding active" with the related finding's ID and severity, styled with accent color (`#0EA5E9`).
5. **Icon**`AlertTriangle` (from lucide-react) when `related_active` is non-null, `CheckCircle` when null.
6. **Left border**`#F59E0B` (amber) when `related_active` is non-null, `#10B981` (green) when null.
### No New Components
The archive card is rendered inline in `App.js` (not a separate component), consistent with the existing pattern. The changes modify the existing `archiveList.map()` JSX block. No new React components are introduced.
### No New API Endpoints
The related finding detection is added to the existing `GET /api/ivanti/archive` route. The `ArchiveSummaryBar` component and its `/stats` endpoint are unchanged.
## Data Models
### Existing Tables (unchanged)
**`ivanti_finding_archives`**
| Column | Type | Description |
|--------|------|-------------|
| id | INTEGER PK | Auto-increment row ID |
| finding_id | TEXT UNIQUE | Ivanti finding identifier |
| finding_title | TEXT | Finding title at archive time |
| host_name | TEXT | Hostname |
| ip_address | TEXT | IP address |
| current_state | TEXT | ARCHIVED, RETURNED, or CLOSED |
| last_severity | REAL | Severity at last transition |
| first_archived_at | DATETIME | First archive timestamp |
| last_transition_at | DATETIME | Last state change timestamp |
**`ivanti_findings_cache`** (row id=1)
| Column | Type | Description |
|--------|------|-------------|
| findings_json | TEXT | JSON array of active findings |
| total | INTEGER | Count of cached findings |
Each entry in `findings_json` has the shape produced by `extractFinding()` in `ivantiFindings.js`:
```javascript
{ id, title, severity, vrrGroup, hostName, ipAddress, dns, status, slaStatus, dueDate, lastFoundOn, buOwnership, cves, workflow }
```
### No Schema Changes
This feature requires no database migrations. All data needed for the matching logic already exists in the two tables above.
## Correctness Properties
*A property is a characteristic or behavior that should hold true across all valid executions of a system — essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
### Property 1: Finding ID display with truncation
*For any* archive record, the rendered card SHALL display the finding_id. If the finding_id is longer than 20 characters, the displayed text SHALL be truncated to 20 characters followed by an ellipsis. If the finding_id is 20 characters or fewer, it SHALL be displayed in full.
**Validates: Requirements 1.1, 1.2**
### Property 2: Historical severity labeling
*For any* archive record, the rendered severity display SHALL contain the text "Last seen:" followed by the severity value formatted to one decimal place. When the severity is null or zero, the display SHALL show "Last seen: —".
**Validates: Requirements 2.1, 2.3**
### Property 3: API response structure — related_active always present
*For any* request to the archive API and *for any* archive record in the response, the record SHALL contain a `related_active` field that is either `null` or an object with `id` (string), `title` (string), and `severity` (number) properties.
**Validates: Requirements 3.1, 3.4**
### Property 4: Matching logic — hostname and title substring
*For any* archived finding and *for any* active finding, the active finding is a related match if and only if: (a) the active finding's hostname exactly equals the archive's hostname, AND (b) the archive's title is a case-insensitive substring of the active finding's title OR the active finding's title is a case-insensitive substring of the archive's title, AND (c) the active finding's ID is not equal to the archive's finding_id.
**Validates: Requirements 3.2, 3.5**
### Property 5: Highest severity selection
*For any* archived finding with multiple matching active findings, the `related_active` field SHALL contain the match with the highest severity value.
**Validates: Requirements 3.3**
### Property 6: Badge visibility matches related_active presence
*For any* archive record, the "Similar finding active" badge SHALL be displayed if and only if the `related_active` field is non-null. When displayed, the badge SHALL include the related finding's ID and severity.
**Validates: Requirements 4.1, 4.3**
### Property 7: Icon and border determined by related_active, not lifecycle state
*For any* archive record, regardless of its lifecycle state (ARCHIVED, RETURNED, or CLOSED), the icon and left border color SHALL be determined solely by whether `related_active` is non-null (alert icon + amber border) or null (check icon + green border).
**Validates: Requirements 5.1, 5.2, 5.3**
## Error Handling
### Backend
| Scenario | Handling |
|----------|----------|
| `findings_json` is malformed or unparseable | Catch JSON.parse error, log warning, treat as empty array (all `related_active` fields become `null`) |
| `findings_json` column is NULL | Default to empty array |
| `ivanti_findings_cache` row missing (id=1) | Default to empty array — no related matches |
| Database query failure on archive records | Return 500 with `{ error: 'Failed to fetch archive records' }` (existing behavior) |
| Database query failure on findings cache | Log error, continue with empty active findings (graceful degradation) |
### Frontend
| Scenario | Handling |
|----------|----------|
| `related_active` field missing from response | Treat as `null` (no badge, green/check styling) |
| `finding_id` is empty string | Display finding title only (existing fallback behavior) |
| `last_severity` is undefined | Display "Last seen: —" |
| API returns error | Existing error handling in `handleArchiveStateClick` already catches and shows empty state |
## Testing Strategy
Testing is performed manually on the dev server. No automated tests are required for this feature.

View File

@@ -0,0 +1,82 @@
# Requirements Document
## Introduction
The Ivanti Archive Findings panel on the STEAM Security Dashboard homepage displays findings that have transitioned through the archive lifecycle (Active, Archived, Returned, Closed). The current archive cards show the finding title, hostname, IP address, and a raw severity number — but lack clarity in several areas. Users cannot see the Ivanti finding ID for cross-referencing, the severity score appears to be a current value when it is actually a historical snapshot, and there is no indication when a related finding with the same title still exists on the same host under a different Ivanti finding ID.
This feature improves archive card clarity by adding finding IDs, labeling severity as historical, introducing a "related active finding" indicator, and using visual icon distinctions to communicate resolution status at a glance.
## Glossary
- **Archive_Card**: A single rendered entry in the archive findings list on the homepage, representing one row from the `ivanti_finding_archives` table.
- **Archive_Panel**: The section of the homepage that contains the ArchiveSummaryBar stat cards and the expandable archive findings list.
- **Finding_ID**: The stable Ivanti-assigned identifier for a host finding (stored as `finding_id` in `ivanti_finding_archives`). Finding IDs do not change with score drift or rescoring.
- **Last_Severity**: The severity score recorded at the time a finding was archived or last transitioned between states. It is a historical snapshot, not a live risk assessment.
- **Current_Findings_Cache**: The `ivanti_findings_cache` table containing the latest synced findings as a JSON array. Each cached finding has fields including `id`, `title`, `severity`, `hostName`, and `ipAddress`.
- **Related_Active_Finding**: A finding in the Current_Findings_Cache that shares the same hostname and a similar title with an archived finding but has a different Finding_ID, indicating a genuinely distinct but related finding is still open on the same host.
- **Archive_API**: The backend endpoint `GET /api/ivanti/archive` that returns archive records filtered by lifecycle state.
- **Related_Findings_Endpoint**: A new backend endpoint that accepts archived finding details and returns matching active findings from the Current_Findings_Cache.
## Requirements
### Requirement 1: Display Finding ID on Archive Cards
**User Story:** As a security analyst, I want to see the Ivanti finding ID on each archive card, so that I can cross-reference archived findings with the Reporting page.
#### Acceptance Criteria
1. THE Archive_Card SHALL display the Finding_ID in monospace font below the finding title.
2. WHEN the Finding_ID is longer than 20 characters, THE Archive_Card SHALL truncate the Finding_ID with an ellipsis and display the full value in a tooltip on hover.
3. THE Archive_Card SHALL render the Finding_ID with a visually distinct style (muted color, smaller font size) so it is clearly secondary to the finding title.
### Requirement 2: Historical Severity Labeling
**User Story:** As a security analyst, I want the severity score on archive cards to be clearly labeled as a historical value, so that I do not mistake it for a current risk assessment.
#### Acceptance Criteria
1. THE Archive_Card SHALL display the Last_Severity with a "Last seen:" prefix label (e.g., "Last seen: 9.4").
2. THE Archive_Card SHALL render the severity label in a muted, secondary style that visually distinguishes it from live severity badges used elsewhere in the dashboard.
3. WHEN the Last_Severity value is null or zero, THE Archive_Card SHALL display "Last seen: —" as a placeholder.
### Requirement 3: Related Active Finding Detection API
**User Story:** As a security analyst, I want the system to detect when an archived finding has a related active finding on the same host, so that I can understand whether similar risk still exists.
#### Acceptance Criteria
1. THE Archive_API SHALL return a `related_active` field for each archive record, containing either `null` (no match) or an object with the matching active finding's `id`, `title`, and `severity`.
2. WHEN matching archived findings to active findings, THE Related_Findings_Endpoint SHALL compare by exact hostname match AND case-insensitive substring containment of the archived finding title within the active finding title (or vice versa).
3. WHEN multiple active findings match a single archived finding, THE Related_Findings_Endpoint SHALL return the match with the highest severity.
4. IF the Current_Findings_Cache contains no findings or is empty, THEN THE Related_Findings_Endpoint SHALL return `null` for all `related_active` fields.
5. THE Related_Findings_Endpoint SHALL exclude matches where the active finding's `id` is identical to the archived finding's Finding_ID.
### Requirement 4: Related Active Finding Indicator on Archive Cards
**User Story:** As a security analyst, I want to see a visual indicator on archive cards when a related active finding exists on the same host, so that I can quickly identify findings that may still represent active risk.
#### Acceptance Criteria
1. WHEN an archive record has a non-null `related_active` field, THE Archive_Card SHALL display a badge reading "Similar finding active" with the related finding's ID and current severity.
2. THE Archive_Card SHALL render the related active badge using the dashboard accent color (#0EA5E9) to distinguish it from the archive card's own severity display.
3. WHEN an archive record has a null `related_active` field, THE Archive_Card SHALL not display any related-finding badge.
### Requirement 5: Visual Icon Distinction by Resolution Status
**User Story:** As a security analyst, I want archive cards to use different icons and border colors based on whether a related active finding exists, so that I can scan the list and quickly distinguish fully resolved findings from those with ongoing similar risk.
#### Acceptance Criteria
1. WHEN an archive record has a non-null `related_active` field, THE Archive_Card SHALL display an alert-style icon (e.g., `AlertTriangle` from lucide-react) and use a warning-toned left border color (#F59E0B).
2. WHEN an archive record has a null `related_active` field, THE Archive_Card SHALL display a check-style icon (e.g., `CheckCircle` from lucide-react) and use a success-toned left border color (#10B981).
3. THE Archive_Card SHALL apply the icon and border color consistently regardless of the archive lifecycle state (ARCHIVED, RETURNED, or CLOSED).
### Requirement 6: Performance of Related Finding Lookup
**User Story:** As a security analyst, I want the archive panel to load promptly even when checking for related active findings, so that the feature does not degrade the homepage experience.
#### Acceptance Criteria
1. THE Archive_API SHALL compute related active finding matches server-side within the existing archive list query, avoiding separate per-card API calls from the frontend.
2. WHEN the Current_Findings_Cache JSON is parsed for matching, THE Archive_API SHALL parse the cache once per request and reuse the parsed result across all archive records in the response.
3. THE Archive_API response time for a filtered archive list SHALL remain under 500ms for up to 200 archive records.

View File

@@ -0,0 +1,70 @@
# Implementation Plan: Archive Finding Clarity
## Overview
Enhance the Ivanti Archive Findings panel to display finding IDs, label severity as historical, detect related active findings server-side, and apply visual icon/border distinctions based on resolution status. Changes span `backend/routes/ivantiArchive.js` (matching logic + enriched response) and `frontend/src/App.js` (card rendering updates). No new components, endpoints, or migrations.
## Tasks
- [x] 1. Add `findRelatedActive` function and enrich the GET `/` handler in `backend/routes/ivantiArchive.js`
- [x] 1.1 Add the `findRelatedActive(archive, activeFindings)` helper function
- Add function above `createIvantiArchiveRouter` or inside the module scope
- Filter active findings where `hostName` exactly matches `archive.host_name`
- AND the archive's `finding_title` is a case-insensitive substring of the active finding's `title`, or vice versa
- AND the active finding's `id` is NOT equal to `archive.finding_id`
- If multiple matches, return the one with the highest `severity` as `{ id, title, severity }`
- If no matches, return `null`
- _Requirements: 3.1, 3.2, 3.3, 3.5_
- [x] 1.2 Modify the `GET /` handler to parse findings cache and enrich archive records
- After fetching archive rows, query `ivanti_findings_cache` (id=1) for `findings_json`
- Parse `findings_json` once with `JSON.parse`; default to empty array if NULL, missing row, or parse error
- Log a warning on parse failure, do not throw
- For each archive record, call `findRelatedActive(archive, parsedFindings)` and attach the result as `related_active`
- Return the enriched archives array in the existing `{ archives, total }` response shape
- _Requirements: 3.1, 3.4, 6.1, 6.2_
- [x] 2. Checkpoint — Verify backend changes
- Ensure the backend starts without errors, ask the user if questions arise.
- [x] 3. Update archive card rendering in `frontend/src/App.js`
- [x] 3.1 Add `AlertTriangle` and `CheckCircle` to the lucide-react import
- Locate the existing lucide-react import statement in `App.js`
- Add `AlertTriangle` and `CheckCircle` if not already imported
- _Requirements: 5.1, 5.2_
- [x] 3.2 Add Finding ID display below the finding title
- Inside the `archiveList.map()` block, add a new line below the title `<span>`
- Render `a.finding_id` in monospace font, `0.6rem` size, muted color `#64748B`
- If `finding_id` length exceeds 20 characters, truncate displayed text to 20 chars + ellipsis
- Set the full `finding_id` as the `title` attribute for hover tooltip
- _Requirements: 1.1, 1.2, 1.3_
- [x] 3.3 Change severity badge to "Last seen: X.X" format
- In the severity `<span>` within the archive card, replace `{a.last_severity?.toFixed(1) ?? '—'}` with `Last seen: {a.last_severity?.toFixed(1) ?? '—'}`
- Null or zero severity displays as "Last seen: —"
- _Requirements: 2.1, 2.2, 2.3_
- [x] 3.4 Add conditional "Similar finding active" badge
- When `a.related_active` is non-null, render a badge below the host info line
- Badge text: "Similar finding active" with the related finding's ID and severity
- Style with accent color `#0EA5E9`, monospace font, `0.6rem` size
- When `a.related_active` is null, render nothing
- _Requirements: 4.1, 4.2, 4.3_
- [x] 3.5 Add icon and left border color based on `related_active`
- When `a.related_active` is non-null: render `AlertTriangle` icon and set left border to `3px solid #F59E0B` (amber)
- When `a.related_active` is null: render `CheckCircle` icon and set left border to `3px solid #10B981` (green)
- Place the icon at the left side of the card header row, before the title
- Apply consistently regardless of archive lifecycle state (ARCHIVED, RETURNED, CLOSED)
- _Requirements: 5.1, 5.2, 5.3_
- [x] 4. Final checkpoint — Verify full feature
- Ensure the frontend compiles without errors, ask the user if questions arise.
## Notes
- No automated tests — feature is validated manually on the dev server per user preference
- No new components, endpoints, or database migrations required
- The `findRelatedActive` function parses the findings cache once per request for performance (Requirement 6.2)
- Each task references specific requirements for traceability

View File

@@ -0,0 +1 @@
{"specId": "aa138cae-9fbf-47bf-9dc3-1169456f5706", "workflowType": "requirements-first", "specType": "feature"}

View File

@@ -0,0 +1,497 @@
# Design Document: Atlas Action Plans Integration
## Overview
This feature integrates the Atlas InfoSec action plans API into the STEAM Security Dashboard, allowing users to view and manage compliance action plans for host findings directly from the ReportingPage. The integration follows the existing proxy-and-cache pattern used by the Ivanti integration — a backend helper handles HTTP communication with the external API, a SQLite cache stores host-level status for fast page loads, and Express routes expose both cached status and proxied CRUD operations to the React frontend.
The frontend adds two visual elements to the ReportingPage: a small badge in the Host column indicating action plan coverage, and a slide-out panel for viewing, creating, and updating plans. A manual sync button — matching the existing Ivanti sync button pattern — lets users refresh cached Atlas data on demand.
### Key Design Decisions
- **Proxy pattern over direct frontend calls**: The frontend never talks to Atlas directly. All Atlas API calls go through the STEAM backend, which handles authentication, TLS configuration, and audit logging. This keeps Atlas credentials server-side and provides a single audit trail.
- **Cache-then-fetch**: The ReportingPage loads cached badge data from SQLite on mount (fast), and users trigger a manual sync to refresh from Atlas (slow, one API call per host). This matches the existing Ivanti sync UX.
- **Sequential host sync (not bulk GET)**: The Atlas API only exposes per-host `GET /hosts/{host_id}/action-plans`. There is no bulk status endpoint, so the sync iterates over unique host IDs from the Ivanti cache. Concurrency is limited to avoid overwhelming Atlas.
- **Basic Auth with runtime base64 encoding**: Atlas uses `Authorization: Basic <base64(user:pass)>` rather than the API key pattern used by Ivanti. The helper computes this at request time from environment variables.
- **ID mapping**: Ivanti `host.hostId` maps directly to Atlas `host_id` in URL paths. Ivanti `f.id` maps to Atlas `active_host_findings_id` in request bodies. No translation layer is needed.
## Architecture
```mermaid
graph TD
subgraph Frontend
RP[ReportingPage]
AB[AtlasBadge]
SP[AtlasSlideOutPanel]
end
subgraph Backend
AR[Atlas Router<br/>/api/atlas/*]
AH[Atlas Helper<br/>atlasApi.js]
AC[(Atlas Cache<br/>SQLite)]
IC[(Ivanti Cache<br/>SQLite)]
AL[Audit Log]
end
subgraph External
ATLAS[Atlas InfoSec API<br/>https://atlas-infosec.caas.charterlab.com]
end
RP -->|GET /api/atlas/status| AR
RP -->|POST /api/atlas/sync| AR
AB -->|click| SP
SP -->|GET /api/atlas/hosts/:id/action-plans| AR
SP -->|PUT /api/atlas/hosts/:id/action-plans| AR
SP -->|PATCH /api/atlas/hosts/:id/action-plans| AR
AR -->|read cached status| AC
AR -->|read host IDs| IC
AR -->|GET, PUT, PATCH, POST| AH
AR -->|logAudit| AL
AH -->|HTTPS + Basic Auth| ATLAS
AR -->|upsert cache| AC
```
### Data Flow: Page Load
1. ReportingPage mounts, fetches Ivanti findings from existing cache (existing behavior)
2. ReportingPage fetches `GET /api/atlas/status` — returns all cached Atlas rows
3. Frontend builds a `Map<hostId, atlasStatus>` and passes it to table rendering
4. Each Host column cell checks the map — if a match exists, renders an AtlasBadge
### Data Flow: Manual Sync
1. User clicks Atlas sync button
2. Frontend sends `POST /api/atlas/sync`
3. Backend extracts unique `hostId` values from `ivanti_findings_cache.findings_json`
4. Backend calls `GET /hosts/{host_id}/action-plans` for each host (with concurrency limit of 5)
5. Backend upserts each result into `atlas_action_plans_cache`
6. Backend returns summary `{ synced, withPlans, failed }`
7. Frontend re-fetches `GET /api/atlas/status` and updates badges
### Data Flow: Create/Update Plan
1. User clicks AtlasBadge → slide-out panel opens
2. Panel fetches `GET /api/atlas/hosts/:hostId/action-plans` for live data
3. User fills create form or edits existing plan
4. Frontend sends `PUT` (create) or `PATCH` (update) to `/api/atlas/hosts/:hostId/action-plans`
5. Backend validates request body, proxies to Atlas API, logs audit entry
6. On success, panel refreshes plan list and frontend re-fetches cached status
## Components and Interfaces
### Backend: Atlas API Helper (`backend/helpers/atlasApi.js`)
A new helper module following the same pattern as `ivantiApi.js` — promise-based HTTP using Node's `https` module, with TLS skip support.
```javascript
// Exported functions
function atlasRequest(method, urlPath, body, options)
// method: 'GET' | 'PUT' | 'PATCH' | 'POST'
// urlPath: e.g. '/hosts/29329662/action-plans'
// body: object | null (null for GET)
// options: { timeout?: number }
// Returns: Promise<{ status: number, body: string }>
// Convenience wrappers
function atlasGet(urlPath, options)
function atlasPut(urlPath, body, options)
function atlasPatch(urlPath, body, options)
function atlasPost(urlPath, body, options)
```
**Configuration** (read from `process.env` at module load):
- `ATLAS_API_URL` — base URL (e.g. `https://atlas-infosec.caas.charterlab.com`)
- `ATLAS_API_USER` — service account username
- `ATLAS_API_PASS` — service account password
- `ATLAS_SKIP_TLS``'true'` to disable certificate verification
**Auth header**: `Authorization: Basic ${Buffer.from(user + ':' + pass).toString('base64')}`
**Timeouts**: 15s default for single-host endpoints, 60s for bulk. Passed via `options.timeout`.
**Error handling**: Network errors and timeouts reject the promise. Non-2xx responses resolve normally with `{ status, body }` — the caller decides how to handle them.
### Backend: Migration (`backend/migrations/add_atlas_action_plans_cache.js`)
Creates the `atlas_action_plans_cache` table following the existing migration pattern.
```javascript
// Table schema
db.run(`
CREATE TABLE IF NOT EXISTS atlas_action_plans_cache (
id INTEGER PRIMARY KEY AUTOINCREMENT,
host_id INTEGER NOT NULL UNIQUE,
has_action_plan INTEGER NOT NULL DEFAULT 0,
plan_count INTEGER NOT NULL DEFAULT 0,
plans_json TEXT NOT NULL DEFAULT '[]',
synced_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
)
`);
db.run(`
CREATE INDEX IF NOT EXISTS idx_atlas_cache_host_id
ON atlas_action_plans_cache(host_id)
`);
```
### Backend: Atlas Router (`backend/routes/atlas.js`)
Factory function pattern: `createAtlasRouter(db, requireAuth)` returns an Express Router mounted at `/api/atlas`.
| Method | Path | Auth | Group | Description |
|--------|------|------|-------|-------------|
| `GET` | `/status` | requireAuth | any | Return all cached Atlas rows |
| `POST` | `/sync` | requireAuth | Admin, Standard_User | Sync Atlas data for all Ivanti hosts |
| `GET` | `/hosts/:hostId/action-plans` | requireAuth | any | Proxy to Atlas GET plans |
| `PUT` | `/hosts/:hostId/action-plans` | requireAuth | Admin, Standard_User | Proxy to Atlas create plan |
| `PATCH` | `/hosts/:hostId/action-plans` | requireAuth | Admin, Standard_User | Proxy to Atlas update plan |
| `POST` | `/hosts/bulk-action-plans` | requireAuth | Admin, Standard_User | Proxy to Atlas bulk create |
**Sync implementation**:
1. Parse `ivanti_findings_cache.findings_json` to extract unique `hostId` values (skip nulls)
2. Process hosts in batches of 5 concurrent requests using `Promise.allSettled`
3. For each host, call `atlasGet('/hosts/' + hostId + '/action-plans')`
4. On 2xx: upsert cache row with plan count and summary JSON
5. On non-2xx: increment failure counter, log warning, continue
6. Return `{ synced: N, withPlans: N, failed: N }`
**Validation (PUT create)**:
- `plan_type` must be one of: `decommission`, `remediation`, `false_positive`, `risk_acceptance`, `scan_exclusion`
- `commit_date` must match `/^\d{4}-\d{2}-\d{2}$/`
- `hostId` param must be a positive integer
**Validation (PATCH update)**:
- `action_plan_id` must be a non-empty string
- `updates` must be a non-null object
**Validation (POST bulk)**:
- `host_ids` must be a non-empty array of positive integers
- `plan_type` and `commit_date` validated same as PUT
### Frontend: AtlasBadge Component
A small inline badge rendered inside the Host column cell, next to the hostname. Clicking it opens the slide-out panel.
**Props**: `{ hostId, atlasStatus, onClick }`
**Rendering logic**:
- If `atlasStatus` is `undefined` (host not in Atlas cache): render nothing
- If `atlasStatus.has_action_plan === 0`: render warning badge (amber border, "0" text)
- If `atlasStatus.plan_count > 0`: render success badge (emerald border, count text)
**Style**: Small pill badge using the design system's badge pattern — monospace font, 0.58rem, inline-flex, with border color indicating status. Positioned after the hostname text in the OverrideCell wrapper.
### Frontend: AtlasSlideOutPanel Component
A right-side drawer panel, similar in concept to the existing FP submission detail panels. Renders over the table content with a semi-transparent backdrop.
**Props**: `{ hostId, hostName, onClose, canWrite }`
**Sections**:
1. **Header**: hostname, host ID, close button
2. **Plan list**: fetched from `GET /api/atlas/hosts/:hostId/action-plans` on open. Each plan shows type, commit date, status, and optional VNR/EXC references
3. **Create form** (if `canWrite`): plan type dropdown, commit date picker, optional fields (qualys_id, active_host_findings_id, jira_vnr, archer_exc)
4. **Edit capability** (if `canWrite`): inline edit on existing plans, submits via PATCH
**State management**: Local component state — plan list, loading, error, form values. No global state needed since the panel is ephemeral.
### Frontend: Atlas Sync Button
A new button in the ReportingPage toolbar, placed adjacent to the existing Ivanti sync button. Uses the same styling pattern — `RefreshCw` icon, monospace uppercase text, sky blue accent color. Differentiated by a `Database` icon prefix and "Atlas" label.
**State**: `atlasSyncing` boolean, `atlasStatus` map (keyed by hostId), `atlasError` string.
### Server.js Integration
```javascript
const createAtlasRouter = require('./routes/atlas');
// ...
app.use('/api/atlas', createAtlasRouter(db, requireAuth));
```
## Data Models
### Atlas Cache Table (`atlas_action_plans_cache`)
| Column | Type | Constraints | Description |
|--------|------|-------------|-------------|
| `id` | INTEGER | PRIMARY KEY AUTOINCREMENT | Row ID |
| `host_id` | INTEGER | NOT NULL UNIQUE | Ivanti host ID (= Atlas host_id) |
| `has_action_plan` | INTEGER | NOT NULL DEFAULT 0 | 1 if any plans exist, 0 otherwise |
| `plan_count` | INTEGER | NOT NULL DEFAULT 0 | Number of action plans |
| `plans_json` | TEXT | NOT NULL DEFAULT '[]' | JSON array of plan summaries |
| `synced_at` | DATETIME | NOT NULL DEFAULT CURRENT_TIMESTAMP | Last sync timestamp |
**Index**: `idx_atlas_cache_host_id` on `host_id`
### Plan Summary JSON Shape (stored in `plans_json`)
```json
[
{
"action_plan_id": "ap-123",
"plan_type": "remediation",
"commit_date": "2026-07-01",
"status": "active",
"qualys_id": "QID-12345",
"active_host_findings_id": 2281281250,
"jira_vnr": null,
"archer_exc": null
}
]
```
The exact shape depends on what the Atlas API returns. The backend stores the raw response array as-is, extracting only `plan_count` and `has_action_plan` for the cache columns.
### Atlas API Request/Response Shapes
**Create (PUT `/hosts/{host_id}/action-plans`)**:
```json
{
"plan_type": "remediation",
"commit_date": "2026-07-01",
"active_host_findings_id": 2281281250
}
```
**Update (PATCH `/hosts/{host_id}/action-plans`)**:
```json
{
"action_plan_id": "ap-123",
"updates": {
"commit_date": "2026-08-01"
}
}
```
**Bulk Create (POST `/hosts/create-bulk-action-plans`)**:
```json
{
"host_ids": [29329662, 29329663],
"plan_type": "decommission",
"commit_date": "2026-07-01"
}
```
### Environment Variables
| Variable | Required | Description |
|----------|----------|-------------|
| `ATLAS_API_URL` | Yes | Atlas InfoSec API base URL |
| `ATLAS_API_USER` | Yes | Service account username for Basic Auth |
| `ATLAS_API_PASS` | Yes | Service account password for Basic Auth |
| `ATLAS_SKIP_TLS` | No | Set to `true` to skip TLS cert verification (default: `false`) |
### Frontend State Shape
```javascript
// Atlas status map — keyed by hostId (number)
const atlasStatusMap = new Map([
[29329662, { host_id: 29329662, has_action_plan: 1, plan_count: 2, synced_at: '2026-07-01 12:00:00' }],
[29329663, { host_id: 29329663, has_action_plan: 0, plan_count: 0, synced_at: '2026-07-01 12:00:00' }],
]);
```
## Correctness Properties
*A property is a characteristic or behavior that should hold true across all valid executions of a system — essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
### Property 1: Basic Auth header round-trip
*For any* pair of (username, password) strings, the Authorization header produced by the Atlas helper should decode (via base64) to exactly `username:password`.
**Validates: Requirements 1.2**
### Property 2: Non-2xx responses resolve with status and body
*For any* HTTP status code in the range 400599 and any response body string, the Atlas helper should resolve the promise with an object containing that exact status code and body, rather than rejecting.
**Validates: Requirements 1.7**
### Property 3: Error messages contain method and path
*For any* HTTP method string and URL path string, when a network error or timeout occurs, the Atlas helper's rejection error message should contain both the method and the path.
**Validates: Requirements 1.8**
### Property 4: Unique host ID extraction
*For any* array of finding objects (each with an optional `hostId` field), the sync operation should extract exactly the set of unique, non-null `hostId` values — no duplicates, no nulls.
**Validates: Requirements 3.2**
### Property 5: Cache upsert derives correct plan_count and has_action_plan
*For any* host ID and any array of action plan objects returned by the Atlas API, after upserting into the cache, the stored `plan_count` should equal the array length and `has_action_plan` should equal 1 if the array is non-empty, 0 otherwise.
**Validates: Requirements 3.4**
### Property 6: Sync response count invariant
*For any* sync operation over N unique hosts where M hosts fail, the response should satisfy: `synced + failed = N` and `withPlans <= synced`.
**Validates: Requirements 3.6**
### Property 7: Status endpoint returns all cached rows with required fields
*For any* set of rows inserted into the Atlas cache table, the `GET /api/atlas/status` endpoint should return exactly that many rows, and each row should contain `host_id`, `has_action_plan`, `plan_count`, and `synced_at` fields.
**Validates: Requirements 4.2, 4.3**
### Property 8: plan_type validation
*For any* string, the PUT endpoint's plan_type validation should accept the string if and only if it is one of: `decommission`, `remediation`, `false_positive`, `risk_acceptance`, `scan_exclusion`.
**Validates: Requirements 5.3**
### Property 9: commit_date validation
*For any* string, the PUT endpoint's commit_date validation should accept the string if and only if it matches the pattern `YYYY-MM-DD` (four digits, hyphen, two digits, hyphen, two digits).
**Validates: Requirements 5.4**
### Property 10: PATCH body validation
*For any* request body object, the PATCH endpoint should accept it if and only if `action_plan_id` is a non-empty string and `updates` is a non-null object.
**Validates: Requirements 5.7**
### Property 11: Bulk request validation
*For any* request body object, the bulk POST endpoint should accept it if and only if `host_ids` is a non-empty array of positive integers, `plan_type` is one of the five valid types, and `commit_date` matches `YYYY-MM-DD`.
**Validates: Requirements 5.10**
### Property 12: Non-2xx Atlas response passthrough
*For any* non-2xx status code and error body returned by the Atlas API, the proxy route should return that same status code and body to the frontend client.
**Validates: Requirements 5.12**
### Property 13: Badge visibility and content
*For any* finding with a `hostId` and any atlas status map, the AtlasBadge should render if and only if the `hostId` exists as a key in the map. When rendered with `plan_count > 0`, the badge text should contain the plan count value.
**Validates: Requirements 6.2, 6.5, 6.6**
### Property 14: Panel displays all plan fields
*For any* action plan object containing `plan_type`, `commit_date`, `status`, and optional reference fields (`jira_vnr`, `archer_exc`), the rendered slide-out panel should include all non-null field values in its output.
**Validates: Requirements 7.3**
## Error Handling
### Atlas API Communication Errors
| Error Scenario | Handling | User Impact |
|----------------|----------|-------------|
| Network timeout (15s/60s) | Helper rejects promise with descriptive error | Sync: host skipped, counted as failed. Proxy: 502 returned to frontend with error message |
| DNS resolution failure | Helper rejects promise | Same as timeout |
| TLS certificate error (when `ATLAS_SKIP_TLS` is false) | Helper rejects promise | Same as timeout |
| Atlas API returns 401 (bad credentials) | Helper resolves with `{ status: 401, body }` | Sync: all hosts fail. Proxy: 401 forwarded to frontend. Error banner shown |
| Atlas API returns 404 (host not found) | Helper resolves with `{ status: 404, body }` | Sync: host skipped. Proxy: 404 forwarded to frontend |
| Atlas API returns 422 (validation error) | Helper resolves with `{ status: 422, body }` | Proxy: 422 forwarded to frontend. Panel shows validation error |
| Atlas API returns 500 (server error) | Helper resolves with `{ status: 500, body }` | Sync: host skipped. Proxy: 500 forwarded to frontend |
### Backend Validation Errors
| Error Scenario | HTTP Status | Response |
|----------------|-------------|----------|
| Missing or invalid `plan_type` | 400 | `{ error: 'plan_type must be one of: decommission, remediation, ...' }` |
| Missing or invalid `commit_date` | 400 | `{ error: 'commit_date must be a valid YYYY-MM-DD date string' }` |
| Missing `action_plan_id` on PATCH | 400 | `{ error: 'action_plan_id is required and must be a non-empty string' }` |
| Missing `updates` on PATCH | 400 | `{ error: 'updates is required and must be an object' }` |
| Empty or invalid `host_ids` on bulk | 400 | `{ error: 'host_ids must be a non-empty array of positive integers' }` |
| Non-integer `hostId` URL param | 400 | `{ error: 'hostId must be a positive integer' }` |
| Unauthenticated request | 401 | `{ error: 'Authentication required' }` |
| Viewer group on restricted endpoint | 403 | `{ error: 'Insufficient permissions', required: [...], current: 'Viewer' }` |
### Frontend Error Handling
- **Sync failure**: Error banner displayed below the Atlas sync button (matching existing Ivanti sync error pattern). Button re-enabled.
- **Panel fetch failure**: "Failed to load action plans" message inside the panel with a retry button.
- **Create/update failure**: Error message displayed inline in the form, preserving user input for correction.
- **Network error**: Generic "Unable to reach server" message with retry option.
### Environment Configuration Errors
- If `ATLAS_API_URL`, `ATLAS_API_USER`, or `ATLAS_API_PASS` are not set, the Atlas helper logs a warning at module load time. All Atlas API calls will fail with a descriptive error rather than crashing the server.
- The Atlas router checks for helper availability and returns 503 if Atlas is not configured.
## Testing Strategy
### Unit Tests
Unit tests cover specific examples, edge cases, and integration points:
**Atlas Helper (`atlasApi.js`)**:
- Correct URL construction from base URL + path
- Basic Auth header format for known credentials
- TLS skip flag respected (rejectUnauthorized option)
- Timeout values for single vs bulk endpoints
- GET, PUT, PATCH, POST methods set correctly
**Atlas Router validation**:
- Valid plan_type values accepted, invalid rejected
- Valid commit_date formats accepted, invalid rejected
- PATCH body with missing action_plan_id rejected
- Bulk request with empty host_ids rejected
- Non-integer hostId param rejected
- Auth middleware applied to correct endpoints (401/403 responses)
**Atlas Cache operations**:
- Upsert creates new row when host_id doesn't exist
- Upsert updates existing row when host_id exists
- Status endpoint returns empty array when cache is empty
- Migration is idempotent (runs twice without error)
**Frontend components**:
- AtlasBadge renders nothing when host not in status map
- AtlasBadge renders warning style when plan_count is 0
- AtlasBadge renders success style when plan_count > 0
- AtlasSlideOutPanel shows create form for Admin/Standard_User
- AtlasSlideOutPanel hides create form for Viewer
- Sync button disabled during sync, re-enabled after
### Property-Based Tests
Property-based tests verify universal properties across generated inputs. Each test runs a minimum of 100 iterations.
**Library**: [fast-check](https://github.com/dubzzz/fast-check) — the standard PBT library for JavaScript/Node.js.
**Configuration**: Each property test runs with `{ numRuns: 100 }` minimum.
**Tag format**: Each test includes a comment referencing its design property:
```javascript
// Feature: atlas-action-plans, Property 1: Basic Auth header round-trip
```
| Property | Test Description | Generator Strategy |
|----------|-----------------|-------------------|
| Property 1 | Encode then decode Basic Auth header | Generate random (user, pass) string pairs, verify round-trip |
| Property 2 | Non-2xx status codes resolve | Generate integers 400599 and random body strings |
| Property 3 | Error messages contain method and path | Generate random method names and URL path strings |
| Property 4 | Unique host ID extraction | Generate arrays of objects with optional numeric hostId fields |
| Property 5 | Cache upsert correctness | Generate (hostId, planArray) pairs, verify derived fields |
| Property 6 | Sync count invariant | Generate (totalHosts, failureCount) pairs, verify arithmetic |
| Property 7 | Status returns all cached rows | Generate N cache rows, verify response count and fields |
| Property 8 | plan_type validation | Generate random strings, verify acceptance matches valid set |
| Property 9 | commit_date validation | Generate random strings, verify acceptance matches date pattern |
| Property 10 | PATCH body validation | Generate random objects with varying field presence |
| Property 11 | Bulk validation | Generate objects with varying host_ids, plan_type, commit_date |
| Property 12 | Error passthrough | Generate non-2xx codes and body strings, verify forwarding |
| Property 13 | Badge visibility and content | Generate findings and status maps, verify render logic |
| Property 14 | Panel plan field display | Generate plan objects, verify all non-null fields appear |
### Integration Tests
Integration tests verify end-to-end behavior with mocked Atlas API:
- Full sync flow: populate Ivanti cache → trigger sync → verify Atlas cache populated
- Create plan flow: send PUT → verify Atlas API called → verify audit logged
- Update plan flow: send PATCH → verify Atlas API called → verify audit logged
- Bulk create flow: send POST → verify Atlas API called with correct body
- Error resilience: mix of successful and failing hosts during sync
- Auth enforcement: verify 401/403 for each endpoint with wrong credentials/group

View File

@@ -0,0 +1,164 @@
# Requirements Document
## Introduction
Integrate the Atlas InfoSec action plans API into the STEAM Security Dashboard so that users can view and manage compliance action plans for host findings directly from the ReportingPage. This eliminates the need to context-switch to the separate Atlas InfoSec web tool. The integration uses STEAM's Ivanti findings as the source of truth and checks which hosts also exist in Atlas, displaying action plan status badges and providing a slide-out panel for plan creation and management.
## Glossary
- **Dashboard**: The STEAM Security Dashboard frontend React application
- **Backend**: The STEAM Security Dashboard Express.js API server
- **Atlas_API**: The Atlas InfoSec REST API at `https://atlas-infosec.caas.charterlab.com`, documented in `docs/atlasinfosec-api-spec.json`
- **Atlas_Helper**: The backend helper module (`backend/helpers/atlasApi.js`) responsible for HTTP communication with the Atlas_API
- **Atlas_Cache**: A SQLite table storing host-level action plan status per `hostId`, refreshed on-demand via manual sync
- **Atlas_Router**: The backend Express route module (`backend/routes/atlas.js`) exposing Atlas-related endpoints under `/api/atlas`
- **ReportingPage**: The existing frontend page (`frontend/src/components/pages/ReportingPage.js`) displaying Ivanti host findings
- **Action_Plan**: A compliance plan created in Atlas InfoSec for a host finding, with a type (decommission, remediation, false_positive, risk_acceptance, scan_exclusion), a commit date, and optional reference fields
- **Host_ID**: The shared numeric identifier linking an Ivanti host finding (`host.hostId`) to an Atlas host (`host_id` URL parameter)
- **Finding_ID**: The Ivanti finding-level identifier (`f.id`) that maps to Atlas's `active_host_findings_id`
- **Slide_Out_Panel**: A right-side drawer component on the ReportingPage for viewing and managing action plans for a specific host
- **Atlas_Badge**: A visual indicator on the ReportingPage Host column showing whether a host exists in Atlas and its action plan coverage status
- **Ivanti_Cache**: The existing `ivanti_findings_cache` SQLite table holding synced Ivanti host findings
## Requirements
### Requirement 1: Atlas API Helper Module
**User Story:** As a backend developer, I want a centralized helper module for Atlas InfoSec API communication, so that all Atlas HTTP calls use consistent authentication, TLS handling, and error management.
#### Acceptance Criteria
1. THE Atlas_Helper SHALL send all requests to the Atlas_API base URL configured via the `ATLAS_API_URL` environment variable
2. THE Atlas_Helper SHALL include a Basic Auth `Authorization` header computed by base64-encoding the `ATLAS_API_USER` and `ATLAS_API_PASS` environment variable values at runtime
3. WHEN the `ATLAS_SKIP_TLS` environment variable is set to `true`, THE Atlas_Helper SHALL disable TLS certificate verification for Atlas_API requests
4. WHEN the `ATLAS_SKIP_TLS` environment variable is not set or set to `false`, THE Atlas_Helper SHALL enforce TLS certificate verification for Atlas_API requests
5. THE Atlas_Helper SHALL support GET, PUT, PATCH, and POST HTTP methods for communicating with the Atlas_API
6. THE Atlas_Helper SHALL set a request timeout of 15 seconds for single-host endpoints and 60 seconds for bulk endpoints
7. WHEN the Atlas_API returns a non-2xx status code, THE Atlas_Helper SHALL resolve the promise with the status code and response body without throwing an exception
8. WHEN a network error or timeout occurs, THE Atlas_Helper SHALL reject the promise with a descriptive error message including the HTTP method and URL path
### Requirement 2: Atlas Cache Table and Migration
**User Story:** As a system administrator, I want Atlas action plan status cached locally in SQLite, so that the ReportingPage can render badges without calling the Atlas_API on every page load.
#### Acceptance Criteria
1. THE Backend SHALL provide a migration script (`backend/migrations/add_atlas_action_plans_cache.js`) that creates the Atlas_Cache table
2. THE Atlas_Cache table SHALL store one row per Host_ID with columns for: `host_id` (integer, unique), `has_action_plan` (integer, 0 or 1), `plan_count` (integer), `plans_json` (text, JSON array of plan summaries), and `synced_at` (datetime)
3. THE migration script SHALL create an index on the `host_id` column of the Atlas_Cache table
4. THE migration script SHALL follow the existing migration pattern: open the database at `backend/cve_database.db`, use `db.serialize()`, log progress to the console, and close the database on completion
5. WHEN the migration script is run multiple times, THE migration script SHALL complete without errors by using `CREATE TABLE IF NOT EXISTS` and `CREATE INDEX IF NOT EXISTS`
### Requirement 3: Atlas Sync Route
**User Story:** As a dashboard user, I want to trigger a manual sync of Atlas action plan data, so that the badge indicators on the ReportingPage reflect the current state of action plans in Atlas.
#### Acceptance Criteria
1. THE Atlas_Router SHALL expose a `POST /api/atlas/sync` endpoint that requires authentication and membership in the Admin or Standard_User group
2. WHEN the sync endpoint is called, THE Atlas_Router SHALL extract unique Host_ID values from the Ivanti_Cache findings
3. WHEN unique Host_ID values are extracted, THE Atlas_Router SHALL call the Atlas_API `GET /hosts/{host_id}/action-plans` endpoint for each Host_ID to retrieve action plan data
4. WHEN action plan data is retrieved for a Host_ID, THE Atlas_Router SHALL upsert the Atlas_Cache row for that Host_ID with the plan count, plan summary JSON, and current timestamp
5. WHEN the Atlas_API returns a non-2xx response for a specific Host_ID, THE Atlas_Router SHALL skip that host and continue processing remaining hosts
6. WHEN the sync completes, THE Atlas_Router SHALL return a JSON response containing the count of hosts synced, the count of hosts with action plans, and the count of hosts that failed
7. THE Atlas_Router SHALL log an audit entry for each sync operation with the initiating user and result summary
### Requirement 4: Atlas Status Route
**User Story:** As a frontend developer, I want a single endpoint that returns cached Atlas status for all hosts, so that the ReportingPage can render badges without individual API calls per row.
#### Acceptance Criteria
1. THE Atlas_Router SHALL expose a `GET /api/atlas/status` endpoint that requires authentication
2. WHEN the status endpoint is called, THE Atlas_Router SHALL return all rows from the Atlas_Cache table as a JSON array
3. THE status response SHALL include for each host: `host_id`, `has_action_plan`, `plan_count`, and `synced_at`
### Requirement 5: Atlas Action Plan Proxy Routes
**User Story:** As a dashboard user, I want to create, view, and update Atlas action plans from the STEAM Dashboard, so that I do not need to switch to the Atlas InfoSec web tool.
#### Acceptance Criteria
1. THE Atlas_Router SHALL expose a `GET /api/atlas/hosts/:hostId/action-plans` endpoint that requires authentication and proxies to the Atlas_API `GET /hosts/{host_id}/action-plans` endpoint
2. THE Atlas_Router SHALL expose a `PUT /api/atlas/hosts/:hostId/action-plans` endpoint that requires authentication and membership in the Admin or Standard_User group
3. WHEN the PUT endpoint receives a request body, THE Atlas_Router SHALL validate that `plan_type` is one of: decommission, remediation, false_positive, risk_acceptance, scan_exclusion
4. WHEN the PUT endpoint receives a request body, THE Atlas_Router SHALL validate that `commit_date` is present and is a valid date string in YYYY-MM-DD format
5. WHEN validation passes, THE Atlas_Router SHALL proxy the request body to the Atlas_API `PUT /hosts/{host_id}/action-plans` endpoint and return the Atlas_API response
6. THE Atlas_Router SHALL expose a `PATCH /api/atlas/hosts/:hostId/action-plans` endpoint that requires authentication and membership in the Admin or Standard_User group
7. WHEN the PATCH endpoint receives a request body, THE Atlas_Router SHALL validate that `action_plan_id` (string) and `updates` (object) are present
8. WHEN validation passes, THE Atlas_Router SHALL proxy the request body to the Atlas_API `PATCH /hosts/{host_id}/action-plans` endpoint and return the Atlas_API response
9. THE Atlas_Router SHALL expose a `POST /api/atlas/hosts/bulk-action-plans` endpoint that requires authentication and membership in the Admin or Standard_User group
10. WHEN the bulk endpoint receives a request body, THE Atlas_Router SHALL validate that `host_ids` is a non-empty array of integers, `plan_type` is valid, and `commit_date` is a valid YYYY-MM-DD date string
11. WHEN validation passes, THE Atlas_Router SHALL proxy the request body to the Atlas_API `POST /hosts/create-bulk-action-plans` endpoint and return the Atlas_API response
12. WHEN any proxy endpoint receives a non-2xx response from the Atlas_API, THE Atlas_Router SHALL return the Atlas_API status code and error body to the frontend
13. THE Atlas_Router SHALL log an audit entry for each create (PUT) and update (PATCH) action plan operation with the user, Host_ID, and plan type
### Requirement 6: Atlas Badge on ReportingPage
**User Story:** As a dashboard user, I want to see at a glance which hosts in the findings table have Atlas action plans, so that I can prioritize hosts that still need compliance attention.
#### Acceptance Criteria
1. WHEN the ReportingPage loads, THE Dashboard SHALL fetch cached Atlas status from `GET /api/atlas/status` and store the result in component state
2. WHEN a finding row's Host_ID matches an entry in the Atlas status data, THE Dashboard SHALL display an Atlas_Badge in the Host column next to the hostname
3. WHEN a host exists in Atlas but has zero action plans, THE Atlas_Badge SHALL display with a warning style indicating the host needs attention
4. WHEN a host exists in Atlas and has one or more active action plans, THE Atlas_Badge SHALL display with a success style indicating the host is covered
5. WHEN a finding row's Host_ID does not match any entry in the Atlas status data, THE Dashboard SHALL display no Atlas_Badge for that row
6. THE Atlas_Badge SHALL display the action plan count as text within the badge when the host has one or more plans
### Requirement 7: Atlas Slide-Out Panel
**User Story:** As a dashboard user, I want to click an Atlas badge to see full action plan details and create or update plans, so that I can manage compliance without leaving the ReportingPage.
#### Acceptance Criteria
1. WHEN a user clicks an Atlas_Badge, THE Dashboard SHALL open the Slide_Out_Panel on the right side of the ReportingPage
2. WHEN the Slide_Out_Panel opens, THE Dashboard SHALL fetch full action plan details from `GET /api/atlas/hosts/:hostId/action-plans` and display them in the panel
3. THE Slide_Out_Panel SHALL display each existing action plan with: plan type, commit date, status, and any associated VNR or EXC reference numbers
4. WHEN the user is in the Admin or Standard_User group, THE Slide_Out_Panel SHALL display a form to create a new action plan with fields for: plan type (dropdown selector), commit date (date picker), qualys_id (optional text input), active_host_findings_id (optional numeric input), jira_vnr (optional text input), and archer_exc (optional text input)
5. WHEN the user submits the create form with valid data, THE Dashboard SHALL send a PUT request to `/api/atlas/hosts/:hostId/action-plans` and refresh the plan list on success
6. WHEN the user is in the Admin or Standard_User group, THE Slide_Out_Panel SHALL provide an edit capability for existing action plans
7. WHEN the user submits an update with valid data, THE Dashboard SHALL send a PATCH request to `/api/atlas/hosts/:hostId/action-plans` and refresh the plan list on success
8. WHEN the Atlas_API returns an error for a create or update operation, THE Slide_Out_Panel SHALL display the error message to the user
9. WHEN the user clicks outside the Slide_Out_Panel or clicks a close button, THE Dashboard SHALL close the panel
10. WHEN the user is in the Viewer group, THE Slide_Out_Panel SHALL display existing plans in read-only mode without the create or edit forms
### Requirement 8: Atlas Sync Button on ReportingPage
**User Story:** As a dashboard user, I want a manual sync button for Atlas data on the ReportingPage, so that I can refresh action plan status on demand.
#### Acceptance Criteria
1. THE Dashboard SHALL display an Atlas sync button on the ReportingPage near the existing Ivanti sync button
2. WHEN the user is in the Admin or Standard_User group, THE Atlas sync button SHALL be enabled
3. WHEN the user is in the Viewer group, THE Atlas sync button SHALL be disabled with a tooltip indicating insufficient permissions
4. WHEN the user clicks the Atlas sync button, THE Dashboard SHALL send a POST request to `/api/atlas/sync`
5. WHILE the Atlas sync is in progress, THE Atlas sync button SHALL display a loading indicator and be disabled to prevent duplicate requests
6. WHEN the Atlas sync completes successfully, THE Dashboard SHALL refresh the Atlas status data and update all Atlas_Badge indicators on the page
7. WHEN the Atlas sync fails, THE Dashboard SHALL display an error notification with the failure reason
### Requirement 9: Environment Configuration
**User Story:** As a system administrator, I want Atlas API credentials and configuration documented alongside existing environment variables, so that deployment setup is straightforward.
#### Acceptance Criteria
1. THE Backend SHALL read the Atlas_API base URL from the `ATLAS_API_URL` environment variable
2. THE Backend SHALL read the Atlas service account username from the `ATLAS_API_USER` environment variable
3. THE Backend SHALL read the Atlas service account password from the `ATLAS_API_PASS` environment variable
4. THE Backend SHALL read the TLS verification skip flag from the `ATLAS_SKIP_TLS` environment variable
5. THE Backend SHALL document all four Atlas environment variables in `backend/.env.example` with descriptive comments
### Requirement 10: Access Control
**User Story:** As a security administrator, I want Atlas operations restricted by user group, so that only authorized users can modify action plans or trigger syncs.
#### Acceptance Criteria
1. THE Atlas_Router SHALL allow all authenticated users to access the `GET /api/atlas/status` endpoint
2. THE Atlas_Router SHALL allow all authenticated users to access the `GET /api/atlas/hosts/:hostId/action-plans` endpoint
3. THE Atlas_Router SHALL restrict the `POST /api/atlas/sync` endpoint to users in the Admin or Standard_User group
4. THE Atlas_Router SHALL restrict the `PUT /api/atlas/hosts/:hostId/action-plans` endpoint to users in the Admin or Standard_User group
5. THE Atlas_Router SHALL restrict the `PATCH /api/atlas/hosts/:hostId/action-plans` endpoint to users in the Admin or Standard_User group
6. THE Atlas_Router SHALL restrict the `POST /api/atlas/hosts/bulk-action-plans` endpoint to users in the Admin or Standard_User group
7. WHEN an unauthorized user attempts a restricted operation, THE Atlas_Router SHALL return HTTP 403 with an error message indicating insufficient permissions

View File

@@ -0,0 +1,262 @@
# Implementation Plan: Atlas Action Plans Integration
## Overview
Integrate the Atlas InfoSec action plans API into the STEAM Security Dashboard. The implementation follows the existing proxy-and-cache pattern — backend helper for HTTP communication, SQLite cache for fast page loads, Express routes for proxied CRUD, and React frontend components for badge display and plan management. Tasks are ordered for incremental progress: environment config, backend helper, migration, routes, server wiring, then frontend components.
## Tasks
- [x] 1. Add Atlas environment variables to `.env.example`
- Append `ATLAS_API_URL`, `ATLAS_API_USER`, `ATLAS_API_PASS`, and `ATLAS_SKIP_TLS` to `backend/.env.example` with descriptive comments, following the existing Ivanti variable block pattern
- _Requirements: 9.1, 9.2, 9.3, 9.4, 9.5_
- [ ] 2. Implement Atlas API helper module
- [x] 2.1 Create `backend/helpers/atlasApi.js` with `atlasRequest`, `atlasGet`, `atlasPut`, `atlasPatch`, `atlasPost` functions
- Read `ATLAS_API_URL`, `ATLAS_API_USER`, `ATLAS_API_PASS`, `ATLAS_SKIP_TLS` from `process.env` at module load
- Compute `Authorization: Basic <base64(user:pass)>` header at request time
- Use Node.js `https` module following the `ivantiApi.js` pattern
- Support GET, PUT, PATCH, POST methods with `rejectUnauthorized` controlled by `ATLAS_SKIP_TLS`
- Default timeout 15s for single-host endpoints, 60s via `options.timeout` for bulk
- Resolve non-2xx responses with `{ status, body }` without throwing
- Reject on network errors/timeouts with a message containing the HTTP method and URL path
- Log a warning at module load if required env vars are missing
- _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8_
- [ ] 2.2 Write property test: Basic Auth header round-trip
- **Property 1: Basic Auth header round-trip**
- Generate random (username, password) string pairs, verify base64 decode yields `username:password`
- **Validates: Requirements 1.2**
- [ ] 2.3 Write property test: Non-2xx responses resolve with status and body
- **Property 2: Non-2xx responses resolve with status and body**
- Generate integers 400599 and random body strings, verify promise resolves with `{ status, body }`
- **Validates: Requirements 1.7**
- [ ] 2.4 Write property test: Error messages contain method and path
- **Property 3: Error messages contain method and path**
- Generate random method names and URL path strings, verify rejection message includes both
- **Validates: Requirements 1.8**
- [x] 3. Checkpoint — Verify Atlas helper module
- Ensure all tests pass, ask the user if questions arise.
- [ ] 4. Create Atlas cache migration
- [x] 4.1 Create `backend/migrations/add_atlas_action_plans_cache.js`
- Follow the existing migration pattern from `add_ivanti_findings_tables.js`: open `backend/cve_database.db`, use `db.serialize()`, log progress, close on completion
- Create `atlas_action_plans_cache` table with columns: `id` (INTEGER PRIMARY KEY AUTOINCREMENT), `host_id` (INTEGER NOT NULL UNIQUE), `has_action_plan` (INTEGER NOT NULL DEFAULT 0), `plan_count` (INTEGER NOT NULL DEFAULT 0), `plans_json` (TEXT NOT NULL DEFAULT '[]'), `synced_at` (DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP)
- Create index `idx_atlas_cache_host_id` on `host_id`
- Use `CREATE TABLE IF NOT EXISTS` and `CREATE INDEX IF NOT EXISTS` for idempotency
- _Requirements: 2.1, 2.2, 2.3, 2.4, 2.5_
- [ ]* 4.2 Write unit tests for migration idempotency
- Verify migration runs twice without errors
- Verify table and index exist after migration
- _Requirements: 2.5_
- [ ] 5. Implement Atlas router with all endpoints
- [x] 5.1 Create `backend/routes/atlas.js` with `createAtlasRouter(db, requireAuth)` factory function
- Import `requireGroup` from `../middleware/auth`, `logAudit` from `../helpers/auditLog`, and Atlas helper functions from `../helpers/atlasApi`
- Check Atlas helper availability; return 503 if Atlas is not configured
- _Requirements: 10.1, 10.2, 10.3, 10.4, 10.5, 10.6, 10.7_
- [x] 5.2 Implement `GET /status` endpoint
- Require authentication (any group)
- Return all rows from `atlas_action_plans_cache` as JSON array with `host_id`, `has_action_plan`, `plan_count`, `synced_at`
- _Requirements: 4.1, 4.2, 4.3, 10.1_
- [x] 5.3 Implement `POST /sync` endpoint
- Require authentication and Admin or Standard_User group
- Extract unique non-null `hostId` values from `ivanti_findings_cache.findings_json`
- Call `atlasGet('/hosts/' + hostId + '/action-plans')` for each host with concurrency limit of 5 using `Promise.allSettled`
- On 2xx: upsert cache row with `plan_count`, `has_action_plan`, `plans_json`, and current timestamp
- On non-2xx: increment failure counter, log warning, continue
- Return `{ synced, withPlans, failed }` summary
- Log audit entry with initiating user and result summary
- _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 10.3_
- [x] 5.4 Implement `GET /hosts/:hostId/action-plans` proxy endpoint
- Require authentication (any group)
- Validate `hostId` is a positive integer
- Proxy to Atlas API `GET /hosts/{host_id}/action-plans` and return the response
- Forward non-2xx Atlas responses to the client
- _Requirements: 5.1, 5.12, 10.2_
- [x] 5.5 Implement `PUT /hosts/:hostId/action-plans` proxy endpoint
- Require authentication and Admin or Standard_User group
- Validate `hostId` is a positive integer
- Validate `plan_type` is one of: decommission, remediation, false_positive, risk_acceptance, scan_exclusion
- Validate `commit_date` is present and matches `YYYY-MM-DD` format
- Proxy validated body to Atlas API `PUT /hosts/{host_id}/action-plans`
- Log audit entry with user, hostId, and plan type
- _Requirements: 5.2, 5.3, 5.4, 5.5, 5.12, 5.13, 10.4_
- [x] 5.6 Implement `PATCH /hosts/:hostId/action-plans` proxy endpoint
- Require authentication and Admin or Standard_User group
- Validate `action_plan_id` is a non-empty string and `updates` is a non-null object
- Proxy validated body to Atlas API `PATCH /hosts/{host_id}/action-plans`
- Log audit entry with user, hostId, and plan type
- _Requirements: 5.6, 5.7, 5.8, 5.12, 5.13, 10.5_
- [x] 5.7 Implement `POST /hosts/bulk-action-plans` proxy endpoint
- Require authentication and Admin or Standard_User group
- Validate `host_ids` is a non-empty array of positive integers, `plan_type` is valid, `commit_date` matches `YYYY-MM-DD`
- Proxy validated body to Atlas API `POST /hosts/create-bulk-action-plans`
- _Requirements: 5.9, 5.10, 5.11, 5.12, 10.6_
- [ ] 5.8 Write property test: Unique host ID extraction
- **Property 4: Unique host ID extraction**
- Generate arrays of finding objects with optional numeric `hostId` fields, verify extracted set has no duplicates and no nulls
- **Validates: Requirements 3.2**
- [ ] 5.9 Write property test: Cache upsert derives correct plan_count and has_action_plan
- **Property 5: Cache upsert derives correct plan_count and has_action_plan**
- Generate (hostId, planArray) pairs, verify `plan_count` equals array length and `has_action_plan` equals 1 if non-empty, 0 otherwise
- **Validates: Requirements 3.4**
- [ ] 5.10 Write property test: Sync response count invariant
- **Property 6: Sync response count invariant**
- Generate (totalHosts, failureCount) pairs, verify `synced + failed = totalHosts` and `withPlans <= synced`
- **Validates: Requirements 3.6**
- [ ] 5.11 Write property test: Status endpoint returns all cached rows with required fields
- **Property 7: Status endpoint returns all cached rows with required fields**
- Generate N cache rows, insert into DB, verify response count and field presence
- **Validates: Requirements 4.2, 4.3**
- [ ] 5.12 Write property test: plan_type validation
- **Property 8: plan_type validation**
- Generate random strings, verify acceptance if and only if string is one of the five valid types
- **Validates: Requirements 5.3**
- [ ] 5.13 Write property test: commit_date validation
- **Property 9: commit_date validation**
- Generate random strings, verify acceptance if and only if string matches `YYYY-MM-DD` pattern
- **Validates: Requirements 5.4**
- [ ] 5.14 Write property test: PATCH body validation
- **Property 10: PATCH body validation**
- Generate random objects with varying field presence, verify acceptance if and only if `action_plan_id` is a non-empty string and `updates` is a non-null object
- **Validates: Requirements 5.7**
- [ ] 5.15 Write property test: Bulk request validation
- **Property 11: Bulk request validation**
- Generate objects with varying `host_ids`, `plan_type`, `commit_date`, verify acceptance matches combined validation rules
- **Validates: Requirements 5.10**
- [ ]* 5.16 Write property test: Non-2xx Atlas response passthrough
- **Property 12: Non-2xx Atlas response passthrough**
- Generate non-2xx status codes and body strings, verify proxy route returns same status and body
- **Validates: Requirements 5.12**
- [x] 6. Checkpoint — Verify backend routes and properties
- Ensure all tests pass, ask the user if questions arise.
- [x] 7. Mount Atlas router in server.js
- Add `const createAtlasRouter = require('./routes/atlas');` import alongside existing route imports
- Add `app.use('/api/atlas', createAtlasRouter(db, requireAuth));` mount alongside existing route mounts
- _Requirements: 3.1, 4.1, 5.1, 5.2, 5.6, 5.9_
- [ ] 8. Implement frontend Atlas components
- [x] 8.1 Create AtlasBadge component in `frontend/src/components/AtlasBadge.js`
- Accept props: `{ hostId, atlasStatus, onClick }`
- Render nothing if `atlasStatus` is undefined (host not in cache)
- Render warning badge (amber border, "0" text) if `has_action_plan === 0`
- Render success badge (emerald border, plan count text) if `plan_count > 0`
- Use design system badge pattern: monospace font, 0.58rem, inline-flex, pill shape
- _Requirements: 6.2, 6.3, 6.4, 6.5, 6.6_
- [ ]* 8.2 Write property test: Badge visibility and content
- **Property 13: Badge visibility and content**
- Generate findings with `hostId` and atlas status maps, verify badge renders if and only if `hostId` exists in map, and badge text contains plan count when `plan_count > 0`
- **Validates: Requirements 6.2, 6.5, 6.6**
- [x] 8.3 Create AtlasSlideOutPanel component in `frontend/src/components/AtlasSlideOutPanel.js`
- Accept props: `{ hostId, hostName, onClose, canWrite }`
- Fetch action plans from `GET /api/atlas/hosts/:hostId/action-plans` on open
- Display header with hostname, host ID, and close button
- Display each plan with: plan type, commit date, status, VNR/EXC references
- Show create form (plan type dropdown, commit date picker, optional fields: qualys_id, active_host_findings_id, jira_vnr, archer_exc) when `canWrite` is true
- Submit create via `PUT /api/atlas/hosts/:hostId/action-plans`, refresh plan list on success
- Show inline edit capability for existing plans when `canWrite` is true
- Submit updates via `PATCH /api/atlas/hosts/:hostId/action-plans`, refresh plan list on success
- Display error messages from Atlas API inline in the panel
- Close on backdrop click or close button
- Hide create/edit forms for Viewer group (read-only mode)
- _Requirements: 7.1, 7.2, 7.3, 7.4, 7.5, 7.6, 7.7, 7.8, 7.9, 7.10_
- [ ]* 8.4 Write property test: Panel displays all plan fields
- **Property 14: Panel displays all plan fields**
- Generate plan objects with `plan_type`, `commit_date`, `status`, and optional reference fields, verify all non-null field values appear in rendered output
- **Validates: Requirements 7.3**
- [ ] 8.5 Write unit tests for AtlasBadge and AtlasSlideOutPanel
- Test AtlasBadge renders nothing when host not in status map
- Test AtlasBadge renders warning style when `plan_count` is 0
- Test AtlasBadge renders success style when `plan_count > 0`
- Test AtlasSlideOutPanel shows create form for Admin/Standard_User
- Test AtlasSlideOutPanel hides create form for Viewer
- _Requirements: 6.2, 6.3, 6.4, 6.5, 7.4, 7.10_
- [ ] 9. Integrate Atlas badge and sync button into ReportingPage
- [x] 9.1 Add Atlas status state and fetch to ReportingPage
- Add `atlasStatus` state (Map keyed by hostId), `atlasSyncing` boolean, `atlasError` string
- Fetch `GET /api/atlas/status` on mount and build the status map
- _Requirements: 6.1_
- [x] 9.2 Render AtlasBadge in Host column cells
- In the Host column cell renderer, check `atlasStatus` map for the finding's `hostId`
- Render AtlasBadge inline after the hostname text when a match exists
- Wire badge `onClick` to open the AtlasSlideOutPanel with the host's ID and name
- _Requirements: 6.2, 6.3, 6.4, 6.5, 6.6, 7.1_
- [x] 9.3 Add Atlas sync button to ReportingPage toolbar
- Place adjacent to existing Ivanti sync button, using same styling pattern (RefreshCw icon, monospace uppercase text, sky blue accent)
- Differentiate with Database icon prefix and "Atlas" label
- Enable for Admin and Standard_User groups, disable for Viewer with tooltip
- On click: send `POST /api/atlas/sync`, show loading indicator, disable button
- On success: re-fetch `GET /api/atlas/status` and update all badges
- On failure: display error notification
- _Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 8.6, 8.7_
- [x] 9.4 Wire AtlasSlideOutPanel into ReportingPage
- Add state for selected host (`atlasSelectedHostId`, `atlasSelectedHostName`, `atlasPanelOpen`)
- Render AtlasSlideOutPanel conditionally when `atlasPanelOpen` is true
- Pass `canWrite` based on user group (Admin or Standard_User)
- On panel close: clear selected host state
- On plan create/update success: re-fetch atlas status to update badges
- _Requirements: 7.1, 7.2, 7.9, 7.10_
- [x] 10. Checkpoint — Verify full integration
- Ensure all tests pass, ask the user if questions arise.
- [ ] 11. Write integration tests
- [ ]* 11.1 Write integration tests for Atlas sync flow
- Populate Ivanti cache with test findings, trigger sync with mocked Atlas API, verify Atlas cache populated correctly
- Test error resilience: mix of successful and failing hosts during sync
- _Requirements: 3.2, 3.3, 3.4, 3.5, 3.6_
- [ ]* 11.2 Write integration tests for Atlas proxy routes
- Test create plan flow: send PUT, verify Atlas API called, verify audit logged
- Test update plan flow: send PATCH, verify Atlas API called, verify audit logged
- Test bulk create flow: send POST, verify Atlas API called with correct body
- _Requirements: 5.1, 5.2, 5.5, 5.6, 5.8, 5.11, 5.13_
- [ ] 11.3 Write integration tests for access control
- Verify 401 for unauthenticated requests on all endpoints
- Verify 403 for Viewer group on restricted endpoints (sync, PUT, PATCH, bulk POST)
- Verify 200 for Viewer group on read endpoints (status, GET plans)
- _Requirements: 10.1, 10.2, 10.3, 10.4, 10.5, 10.6, 10.7_
- [x] 12. Final checkpoint — Ensure all tests pass
- Ensure all tests pass, ask the user if questions arise.
## Notes
- Tasks marked with `*` are optional and can be skipped for faster MVP
- Each task references specific requirements for traceability
- Checkpoints ensure incremental validation
- Property tests validate universal correctness properties from the design document using fast-check
- Unit tests validate specific examples and edge cases
- The backend follows the existing factory function pattern (`createAtlasRouter(db, requireAuth)`)
- The Atlas helper follows the existing `ivantiApi.js` pattern (promise-based HTTP with Node.js `https` module)
- The migration follows the existing pattern from `add_ivanti_findings_tables.js`

View File

@@ -0,0 +1 @@
{"specId": "9ecf72f0-b470-4877-b244-899e583007f7", "workflowType": "requirements-first", "specType": "feature"}

View File

@@ -0,0 +1,516 @@
# Design Document: Compliance Metric Grouping
## Overview
The Compliance Metric Grouping feature consolidates the AEO Compliance page's metric health cards from one-per-summary-entry to one-per-metric-family. A metric family is the set of summary entries that share the same base `metric_id` (e.g., `5.2.5`). The same base ID can appear multiple times in the summary data because the backend parser produces one entry per team/variant row in the xlsx Summary sheet.
The feature adds three new capabilities on top of the grouping:
1. **Variant pills** inside each grouped card showing per-variant compliance percentages and status indicators
2. **Hover tooltip** (300ms delay) displaying metric title, business justification, and data sources from a static definitions file
3. **Info panel** opened via an info icon on each card, showing the full metric definition (scope, filters, exclusions, notes)
A static JSON file (`metricDefinitions.json`) ships with the frontend containing structured metric definition data for all tracked metrics. No new backend endpoints are needed.
### Design Decisions
- **Grouping is frontend-only.** The backend summary endpoint returns flat entries. The frontend groups them by `metric_id` at render time. This avoids backend changes and keeps the grouping logic testable as a pure function.
- **`metricFilter` changes from a single string to an array.** Currently `metricFilter` is a single `metric_id` string or `null`. With grouping, clicking a card sets the filter to the array of all `metric_id` values in that family. For single-entry families this is a one-element array. The device table filter checks `metricFilter.includes(m.metric_id)` instead of `m.metric_id === metricFilter`.
- **Worst-status drives card color.** Each grouped card computes the most severe status across its variants using a defined severity ordering. This gives engineers an at-a-glance signal when any variant is failing.
- **Definitions file is static, not an API.** The metric definitions table has ~130 rows that change infrequently. A static JSON import avoids API round-trips and keeps the tooltip/panel responsive. The file can be regenerated from the source xlsx definitions table when metrics change.
- **MetricInfoPanel is a new component.** The detail panel is complex enough (12+ fields, dark-themed sections) to warrant its own component file rather than inlining it in CompliancePage.js. The hover tooltip, being lightweight, stays inline.
- **Info icon click uses `stopPropagation`.** The info icon sits inside the card button. Clicking it opens the detail panel without triggering the card's metric filter toggle.
## Architecture
```mermaid
graph TD
A[CompliancePage.js] -->|imports| B[metricDefinitions.json]
A -->|renders| C[MetricHealthCard - grouped]
A -->|renders| D[MetricInfoPanel]
A -->|renders| E[HoverTooltip - inline]
A -->|fetches| F[GET /api/compliance/summary?team=X]
A -->|fetches| G[GET /api/compliance/items?team=X&status=Y]
F -->|returns| H[summary.entries array]
H -->|groupByMetricFamily| I[Map of metricId → entries array]
I -->|one card per group| C
C -->|click outside info icon| J[setMetricFilter - array of IDs]
C -->|click info icon| K[setInfoMetric - opens MetricInfoPanel]
C -->|hover 300ms| E
J -->|filters| G2[filteredDevices]
B -->|lookup by metric_id| E
B -->|lookup by metric_id| D
```
### Component Hierarchy
```
CompliancePage
├── PageHeader (unchanged)
├── TeamTabs (unchanged)
├── MetricHealthSection
│ ├── SectionHeader ("Metric Health — click to filter" + clear button)
│ └── MetricHealthCard (one per metric family)
│ ├── CardTitle (base metric_id + category)
│ ├── VariantPill[] (one per summary entry in family)
│ ├── WorstStatusPill (computed from all variants)
│ ├── TargetDisplay (shared target %)
│ ├── InfoIcon (lucide-react Info, top-right)
│ └── HoverTooltip (inline, 300ms delay)
├── MetricInfoPanel (slide-out/overlay, opened by info icon click)
├── ComplianceChartsPanel (unchanged)
├── DeviceTable (unchanged, filter logic updated)
├── ComplianceDetailPanel (unchanged)
├── ComplianceUploadModal (unchanged)
└── RollbackModal (unchanged)
```
### Data Flow
1. `CompliancePage` fetches summary entries from `/api/compliance/summary?team=X` on mount and team change.
2. The `groupByMetricFamily(entries)` helper groups the flat entries array into a `Map<string, SummaryEntry[]>` keyed by base `metric_id`.
3. One `MetricHealthCard` renders per map entry. Each card receives the full array of entries for that family.
4. The card computes `worstStatus` from the entries' status fields and uses it for border/pill coloring.
5. On card click (outside info icon), `metricFilter` is set to the array of `metric_id` values in that family (or cleared if already active).
6. The device table filter changes from `d.failing_metrics.some(m => m.metric_id === metricFilter)` to `d.failing_metrics.some(m => metricFilter.includes(m.metric_id))`.
7. On hover (300ms), a tooltip renders using data from the `metricDefinitions.json` lookup map, falling back to the summary entry description.
8. On info icon click, `infoMetric` state is set, opening `MetricInfoPanel` with the full definition.
## Components and Interfaces
### groupByMetricFamily (pure helper function)
```javascript
// In CompliancePage.js — replaces the current teamMetrics() helper
// Input: entries (array of SummaryEntry from the summary endpoint), team (string)
// Output: array of { metricId, entries, category, target, worstStatus }
function groupByMetricFamily(allEntries, team) {
const teamEntries = allEntries.filter(e => e.team === team);
const familyMap = {};
for (const entry of teamEntries) {
const baseId = entry.metric_id; // already the base ID from the parser
if (!familyMap[baseId]) {
familyMap[baseId] = [];
}
familyMap[baseId].push(entry);
}
return Object.entries(familyMap).map(([metricId, entries]) => ({
metricId,
entries,
category: entries[0].category,
target: entries[0].target,
worstStatus: computeWorstStatus(entries.map(e => e.status)),
}));
}
```
### computeWorstStatus (pure helper function)
```javascript
// Input: array of status strings
// Output: the most severe status string
// Severity order: "Below 15% of Target" > "Within 15% of Target" > "Meets/Exceeds Target"
const STATUS_SEVERITY = {
'Below 15% of Target': 0,
'Within 15% of Target': 1,
'Meets/Exceeds Target': 2,
};
function computeWorstStatus(statuses) {
let worst = 'Meets/Exceeds Target';
let worstSev = 2;
for (const s of statuses) {
const sev = STATUS_SEVERITY[s] ?? 0;
if (sev < worstSev) {
worstSev = sev;
worst = s;
}
}
return worst;
}
```
### MetricHealthCard (redesigned)
```javascript
// Props:
// family: { metricId, entries, category, target, worstStatus }
// active: boolean (is this family's filter currently active)
// onClick: () => void (toggle metric filter)
// onInfoClick: (metricId) => void (open detail panel)
// definitionLookup: Map<string, MetricDefinition> (for tooltip)
//
// Renders:
// - Base metric ID as title
// - Category label
// - One VariantPill per entry in family.entries
// - Shared target percentage
// - Worst-status pill with border color
// - Info icon (top-right, stopPropagation on click)
// - HoverTooltip (300ms delay, positioned near card)
```
### VariantPill (new inline sub-component)
```javascript
// Props:
// entry: SummaryEntry (single variant)
//
// Renders:
// - Label: entry.team or entry.description (distinguishing text)
// - Compliance percentage in monospace
// - Background tint from entry's status color at ~12% opacity
// - Glow dot if status !== "Meets/Exceeds Target"
//
// Layout: inline-flex, wraps via parent flexWrap
```
### HoverTooltip (inline in CompliancePage.js)
```javascript
// State managed in CompliancePage:
// hoveredMetric: string | null
// hoverTimeout: ref (setTimeout ID)
// tooltipPosition: { top, left } (computed from card bounding rect)
//
// On mouseEnter on MetricHealthCard:
// Set timeout for 300ms → set hoveredMetric to family.metricId
// On mouseLeave:
// Clear timeout, set hoveredMetric to null
//
// Renders (when hoveredMetric matches):
// - Fixed-position div near the card
// - Metric title (from definitionLookup or entry.description)
// - Business justification (from definitionLookup)
// - Data sources required (from definitionLookup)
// - Dark card background, subtle border, shadow per DESIGN_SYSTEM.md
// - Falls back to summary entry description if no definition found
```
### MetricInfoPanel (new component file)
```javascript
// frontend/src/components/pages/MetricInfoPanel.js
// Props:
// metricId: string (base metric ID)
// definition: MetricDefinition | null (from lookup)
// summaryEntries: SummaryEntry[] (the family's entries, for fallback)
// onClose: () => void
//
// Renders:
// - Overlay/slide-out panel with dark theme
// - Close button (X icon, top-right)
// - Metric title (h3, monospace)
// - Sections with monospace uppercase labels:
// - Asset Types / Asset Types In Scope
// - Application Types In Scope
// - Environment In Scope
// - Status In Scope
// - Instance Types In Scope
// - Criticality Levels In Scope
// - Exclusions
// - Special Conditions
// - Data Sources Required
// - Business Justification
// - Notes
// - If definition is null: "No detailed definition available" + summary description fallback
// - Click outside or close button → onClose()
```
### Integration with CompliancePage.js
```javascript
// New imports:
import { Info } from 'lucide-react';
import MetricInfoPanel from './MetricInfoPanel';
import metricDefinitionsRaw from '../../data/metricDefinitions.json';
// Build lookup map once at module level:
const METRIC_DEFINITIONS = {};
for (const def of metricDefinitionsRaw) {
METRIC_DEFINITIONS[def.metric_id] = def;
}
// State changes in CompliancePage:
// - metricFilter: null → null | string[] (array of metric IDs)
// - New state: infoMetric (string | null) — which metric's info panel is open
// - New state: hoveredMetric (string | null) — which metric is being hovered
// - New ref: hoverTimeoutRef — for 300ms delay
// Filter logic change:
// Old: .filter(d => !metricFilter || d.failing_metrics.some(m => m.metric_id === metricFilter))
// New: .filter(d => !metricFilter || d.failing_metrics.some(m => metricFilter.includes(m.metric_id)))
// Card rendering change:
// Old: metrics.map(entry => <MetricHealthCard entry={entry} ... />)
// New: families.map(family => <MetricHealthCard family={family} ... />)
```
## Data Models
### SummaryEntry (from backend, unchanged)
```javascript
{
metric_id: string, // e.g. "5.2.5" — base ID, no suffix
team: string, // e.g. "STEAM", "ACCESS-ENG"
priority: string,
non_compliant: number,
compliant: number,
total: number,
compliance_pct: number, // 0.01.0
target: number, // 0.01.0
status: string, // "Meets/Exceeds Target" | "Within 15% of Target" | "Below 15% of Target"
description: string,
category: string // from compliance_config.json metric_categories
}
```
### MetricFamily (computed client-side)
```javascript
{
metricId: string, // base metric ID (e.g. "5.2.5")
entries: SummaryEntry[], // all summary entries for this base ID
category: string, // from first entry
target: number, // from first entry (shared across variants)
worstStatus: string // computed worst status across all entries
}
```
### MetricDefinition (from metricDefinitions.json)
```javascript
{
metric_id: string, // e.g. "5.2.5"
metric_title: string, // e.g. "MFA for Privileged Access"
asset_types: string, // e.g. "Servers, Network Devices"
asset_types_in_scope: string,
application_types_in_scope: string,
environment_in_scope: string,
status_in_scope: string,
instance_types_in_scope: string,
criticality_levels_in_scope: string,
exclusions: string, // empty string if none
special_conditions: string, // empty string if none
data_sources_required: string,
business_justification: string,
notes: string // empty string if none
}
```
### metricDefinitions.json (file structure)
```json
[
{
"metric_id": "1.1.1",
"metric_title": "...",
"asset_types": "...",
"asset_types_in_scope": "...",
"application_types_in_scope": "...",
"environment_in_scope": "...",
"status_in_scope": "...",
"instance_types_in_scope": "...",
"criticality_levels_in_scope": "...",
"exclusions": "",
"special_conditions": "",
"data_sources_required": "...",
"business_justification": "...",
"notes": ""
}
]
```
All entries use the same set of keys. Optional fields with no value use empty strings, never `null` or omitted keys.
### Status Severity Map
```javascript
const STATUS_SEVERITY = {
'Below 15% of Target': 0, // worst
'Within 15% of Target': 1,
'Meets/Exceeds Target': 2, // best
};
```
### Updated metricFilter State
```javascript
// Old: metricFilter: string | null
// New: metricFilter: string[] | null
//
// null = no filter (show all devices)
// string[] = show devices with failing_metrics matching any ID in the array
```
## Correctness Properties
*A property is a characteristic or behavior that should hold true across all valid executions of a system — essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
### Property 1: Grouping invariant — no entries lost or misplaced
*For any* array of summary entries and any team string, grouping by metric family SHALL produce groups where (a) every entry appears in exactly one group, (b) all entries within a group share the same `metric_id`, and (c) the total number of entries across all groups equals the number of entries for that team in the input.
**Validates: Requirements 1.1, 1.2**
### Property 2: Worst-status computation follows severity ordering
*For any* non-empty array of status strings drawn from `{"Below 15% of Target", "Within 15% of Target", "Meets/Exceeds Target"}`, the computed worst status SHALL be the status with the lowest severity rank present in the array. If the array contains "Below 15% of Target", the result SHALL be "Below 15% of Target" regardless of other values.
**Validates: Requirements 1.6, 3.1**
### Property 3: Device filtering with metric family includes all matching devices
*For any* array of device objects (each with a `failing_metrics` array of `{metric_id}` objects) and *for any* non-empty array of filter metric IDs, the filtered result SHALL contain exactly those devices that have at least one `failing_metrics` entry whose `metric_id` is included in the filter array. No matching device is excluded and no non-matching device is included.
**Validates: Requirements 1.8, 7.1, 7.2**
### Property 4: Definition lookup returns correct entry or null
*For any* array of metric definition objects with unique `metric_id` values, building a lookup map and querying it with a `metric_id` that exists in the array SHALL return the corresponding definition object. Querying with a `metric_id` not in the array SHALL return `undefined`.
**Validates: Requirements 4.2, 4.6**
### Property 5: Detail panel renders all required definition fields
*For any* valid metric definition object (with all 14 fields present), the set of field keys rendered by the detail panel SHALL include: `metric_title`, `asset_types`, `asset_types_in_scope`, `application_types_in_scope`, `environment_in_scope`, `status_in_scope`, `instance_types_in_scope`, `criticality_levels_in_scope`, `exclusions`, `special_conditions`, `data_sources_required`, `business_justification`, and `notes`.
**Validates: Requirements 5.3**
### Property 6: Definitions schema validation — all entries have required fields
*For any* entry in the metric definitions array, the entry SHALL have all 14 required keys present, and the `metric_id` field SHALL be a non-empty string. Optional fields (`exclusions`, `special_conditions`, `notes`) SHALL be present as strings (empty string if no value), never omitted or null.
**Validates: Requirements 6.2, 8.3, 8.4**
### Property 7: Lookup map construction preserves all definitions
*For any* array of metric definition objects with unique `metric_id` values, building a lookup map keyed by `metric_id` SHALL produce a map with exactly as many entries as the input array, and every input definition SHALL be retrievable by its `metric_id`.
**Validates: Requirements 6.4**
### Property 8: JSON round-trip preserves metric definition data
*For any* valid metric definition object, `JSON.parse(JSON.stringify(definition))` SHALL produce an object deeply equal to the original.
**Validates: Requirements 8.1, 8.2**
## Error Handling
### Metric Definitions File
| Error Scenario | Handling |
|---|---|
| `metricDefinitions.json` fails to import (malformed JSON) | Build-time error caught by Create React App. The file is validated at development time. |
| Metric ID not found in definitions lookup | Tooltip falls back to `entry.description` from summary data. Info panel shows "No detailed definition available" with summary description. |
| Definition entry has empty optional fields | Rendered sections show "—" placeholder for empty strings. No error thrown. |
### Grouping Logic
| Error Scenario | Handling |
|---|---|
| Summary entries array is empty | `groupByMetricFamily` returns empty array. No cards rendered. Existing "No compliance data" empty state shown. |
| Summary entry has missing or empty `metric_id` | Entry is skipped during grouping (filtered out). |
| All entries for a team have the same `metric_id` | Single family group with multiple variant pills. Works correctly. |
### Hover Tooltip
| Error Scenario | Handling |
|---|---|
| User moves mouse away before 300ms | Timeout cleared, tooltip never shown. No side effects. |
| Tooltip would render off-screen | Position clamped to viewport bounds using `getBoundingClientRect()`. |
| Rapid hover/unhover across multiple cards | Previous timeout cleared on each `mouseLeave`. Only the currently hovered card's tooltip can appear. |
### Info Panel
| Error Scenario | Handling |
|---|---|
| Info icon click while tooltip is visible | Tooltip dismissed (mouseLeave fires). Panel opens. No conflict. |
| Multiple rapid info icon clicks | `infoMetric` state is set to the latest clicked metric. Only one panel open at a time. |
| Click outside panel while scrolled | Overlay backdrop captures click, closes panel. Scroll position preserved. |
### Device Table Filtering
| Error Scenario | Handling |
|---|---|
| `metricFilter` is set to an array but no devices match | Empty state message shown: "No non-compliant devices". |
| Device has `failing_metrics` with IDs not in any family | Device only shown when no filter is active or when its metric IDs match the active filter. |
## Testing Strategy
### Unit Tests (Example-Based)
Unit tests cover specific rendering, interaction, and integration scenarios:
**Grouping and display:**
- Groups entries with the same `metric_id` into one card
- Single-entry families render one variant pill
- Multi-entry families render one pill per entry
- Card title shows base metric ID and category from first entry
- Card shows shared target percentage
**Worst-status computation:**
- All "Meets/Exceeds Target" → card shows "OK" with success color
- Mix of statuses → card uses the worst status color
- Single "Below 15% of Target" among passing variants → card shows danger color
**Variant pills:**
- Each pill shows the entry's team label and compliance percentage
- Pill background tint matches the entry's individual status color
- Non-passing variants show a glow dot
**Hover tooltip:**
- Tooltip appears after 300ms hover delay
- Tooltip shows metric title, business justification, data sources from definitions
- Tooltip disappears on mouse leave
- Tooltip falls back to summary description when no definition exists
- Tooltip does not interfere with card click
**Info panel:**
- Info icon click opens MetricInfoPanel with correct metric definition
- Info icon click does not trigger card's metric filter toggle (stopPropagation)
- Panel displays all 12+ definition fields with section labels
- Panel shows fallback message when no definition exists
- Panel closes on outside click or close button
**Device table filtering:**
- Clicking a grouped card sets filter to all metric IDs in that family
- Filtered device table shows devices matching any ID in the family
- Clicking the same card again clears the filter
- Clear filter button resets to show all devices
- Active card shows highlighted styling
**Definitions file:**
- File imports without error
- Lookup map contains all metric IDs from the file
- All entries have the required 14 fields
### Property-Based Tests
Property-based tests use [fast-check](https://github.com/dubzzz/fast-check) to verify universal properties across generated inputs. Each test runs a minimum of 100 iterations.
| Property | Test Description | Tag |
|---|---|---|
| Property 1 | Generate random arrays of summary entries with varying metric_id values and team strings. Group them and verify: all entries accounted for, entries within each group share the same metric_id, group count equals unique metric_id count. | Feature: compliance-metric-grouping, Property 1: Grouping invariant — no entries lost or misplaced |
| Property 2 | Generate random non-empty arrays of status strings from the valid set. Compute worst status and verify it matches the minimum severity rank in the array. | Feature: compliance-metric-grouping, Property 2: Worst-status computation follows severity ordering |
| Property 3 | Generate random device arrays (each with random failing_metrics) and random filter ID arrays. Filter and verify the result contains exactly the devices with at least one matching metric. | Feature: compliance-metric-grouping, Property 3: Device filtering with metric family includes all matching devices |
| Property 4 | Generate random arrays of metric definitions with unique IDs. Build lookup map, query with IDs from the array (expect hit) and IDs not in the array (expect miss). | Feature: compliance-metric-grouping, Property 4: Definition lookup returns correct entry or null |
| Property 5 | Generate random metric definition objects with all 14 fields. Extract the rendered field keys and verify all required keys are present. | Feature: compliance-metric-grouping, Property 5: Detail panel renders all required definition fields |
| Property 6 | Generate random arrays of metric definition objects. Verify every entry has all 14 keys present, metric_id is a non-empty string, and optional fields are strings (not null/undefined). | Feature: compliance-metric-grouping, Property 6: Definitions schema validation — all entries have required fields |
| Property 7 | Generate random definition arrays with unique IDs. Build lookup map and verify map size equals array length, and every definition is retrievable by its metric_id. | Feature: compliance-metric-grouping, Property 7: Lookup map construction preserves all definitions |
| Property 8 | Generate random metric definition objects with string values. Round-trip through JSON.stringify then JSON.parse and verify deep equality. | Feature: compliance-metric-grouping, Property 8: JSON round-trip preserves metric definition data |
### Test Configuration
- **Library:** fast-check (JavaScript property-based testing)
- **Runner:** Jest (via react-scripts test)
- **Iterations:** Minimum 100 per property test (`fc.assert(property, { numRuns: 100 })`)
- **Tag format:** Comment at top of each property test referencing the design property

View File

@@ -0,0 +1,121 @@
# Requirements Document
## Introduction
The AEO Compliance page currently renders one metric health card per `metric_id` returned from the summary endpoint. Many metrics share the same base ID but differ by network variant suffix (e.g., `-Corp`, `-Cust`, `-SpecBus`) in the definitions reference table. This feature groups those variant entries into a single card per metric family, adds hover tooltips with metric descriptions for quick context, provides an info panel for full metric definitions, and ships a static JSON reference file containing the complete metric definitions data. The goal is to reduce card clutter, surface metric context to engineers unfamiliar with the metrics, and preserve the existing card-click filtering behavior.
## Glossary
- **Compliance_Page**: The `CompliancePage.js` React component that renders metric health cards, team tabs, and the device violation table
- **Metric_Family**: A group of summary entries that share the same base metric ID (e.g., `5.2.5`), regardless of network variant suffix
- **Network_Variant**: A suffix classification from the metric definitions table indicating which network a metric applies to — Corp, Cust, or SpecBus
- **Variant_Pill**: A small inline badge within a grouped metric card that displays a single network variant's suffix label and its compliance percentage
- **Metric_Health_Card**: The existing `MetricHealthCard` button component that displays a metric's compliance status, now extended to support grouped variants
- **Worst_Status**: The most severe compliance status among all variants in a Metric_Family, used to determine the card's overall border and status color
- **Hover_Tooltip**: A floating overlay that appears on mouse hover over a Metric_Health_Card, showing the metric title, business justification, and data sources
- **Info_Icon**: A small `Info` icon from lucide-react placed in the corner of each Metric_Health_Card that opens the Detail_Panel on click
- **Detail_Panel**: A slide-out or inline expandable section that displays the full metric definition including scope, filters, exclusions, and per-variant notes
- **Metric_Definitions_File**: A static JSON file shipped with the frontend containing structured metric definition data for all tracked metrics
- **Design_System**: The color palette, typography, component specs, and interaction patterns defined in `DESIGN_SYSTEM.md`
- **Summary_Entry**: A single row from the backend's `/api/compliance/summary` response, containing `metric_id`, `team`, `compliance_pct`, `target`, `status`, `description`, and `category`
- **Device_Table**: The lower section of the Compliance_Page that lists non-compliant devices, filterable by metric
## Requirements
### Requirement 1: Metric Family Grouping
**User Story:** As an engineer, I want metrics that share the same base ID to be consolidated into a single card, so that the compliance page is less cluttered and I can see the full picture for each metric family at a glance.
#### Acceptance Criteria
1. WHEN the Compliance_Page receives Summary_Entry data, THE Compliance_Page SHALL group entries by their base metric ID to form Metric_Family groups
2. THE Compliance_Page SHALL render one Metric_Health_Card per Metric_Family instead of one card per Summary_Entry
3. THE Metric_Health_Card SHALL display the base metric ID (e.g., `5.2.5`) as the card title and the category name from the first entry in the group
4. THE Metric_Health_Card SHALL display one Variant_Pill for each Summary_Entry in the Metric_Family, showing the variant's team label and compliance percentage
5. WHEN a Metric_Family contains only one Summary_Entry, THE Metric_Health_Card SHALL display a single Variant_Pill — the layout scales naturally without special-casing
6. THE Metric_Health_Card SHALL determine its overall border color and status indicator using the Worst_Status among all variants in the Metric_Family
7. THE Metric_Health_Card SHALL display the shared target percentage from the Metric_Family entries
8. WHEN a user clicks a grouped Metric_Health_Card, THE Compliance_Page SHALL filter the Device_Table to show violations across all metric IDs belonging to that Metric_Family
### Requirement 2: Variant Pill Display
**User Story:** As an engineer, I want to see each network variant's compliance percentage inside the grouped card, so that I can quickly identify which variant is underperforming.
#### Acceptance Criteria
1. THE Variant_Pill SHALL display the variant's distinguishing label (team name or suffix) and its compliance percentage in monospace font
2. THE Variant_Pill SHALL use a background tint derived from the variant's individual status color at low opacity, consistent with the Design_System badge pattern
3. WHEN a variant's status is not "Meets/Exceeds Target", THE Variant_Pill SHALL display a subtle glow dot matching the variant's status color to draw attention
4. THE Variant_Pill layout SHALL wrap to multiple rows when the Metric_Family contains more variants than fit on a single line
### Requirement 3: Worst-Status Card Coloring
**User Story:** As an engineer, I want the grouped card to immediately show me if any variant is failing, so that I do not have to inspect each variant individually to find problems.
#### Acceptance Criteria
1. THE Metric_Health_Card SHALL compute the Worst_Status by selecting the most severe status from all Summary_Entry items in the Metric_Family, using the severity order: "Below 15% of Target" (worst) > "Within 15% of Target" > "Meets/Exceeds Target" (best)
2. THE Metric_Health_Card SHALL apply the Worst_Status color to its border, status pill text, and status dot
3. WHEN all variants in a Metric_Family meet or exceed the target, THE Metric_Health_Card SHALL display the "OK" status indicator with the success color
### Requirement 4: Hover Tooltip for Quick Context
**User Story:** As an engineer unfamiliar with the metrics, I want to hover over a metric card and see a brief description, so that I can understand what the metric measures without disrupting my workflow.
#### Acceptance Criteria
1. WHEN a user hovers over a Metric_Health_Card for more than 300 milliseconds, THE Compliance_Page SHALL display a Hover_Tooltip positioned near the card
2. THE Hover_Tooltip SHALL display the metric title, a one-liner business justification, and the data sources required, sourced from the Metric_Definitions_File
3. THE Hover_Tooltip SHALL use the Design_System dark card background with a subtle border and shadow for readability
4. WHEN the user moves the cursor away from the Metric_Health_Card, THE Hover_Tooltip SHALL disappear
5. THE Hover_Tooltip SHALL NOT interfere with the card's click behavior for filtering the Device_Table
6. IF no definition exists in the Metric_Definitions_File for a given metric, THEN THE Hover_Tooltip SHALL display the metric description from the Summary_Entry data as a fallback
### Requirement 5: Info Icon and Detail Panel
**User Story:** As an engineer, I want to click an info icon on a metric card to see the full metric definition, so that I can understand the exact scope, filters, and exclusions without leaving the compliance page.
#### Acceptance Criteria
1. THE Metric_Health_Card SHALL display an Info_Icon (lucide-react `Info`) in the top-right corner of the card
2. WHEN a user clicks the Info_Icon, THE Compliance_Page SHALL open a Detail_Panel displaying the full metric definition from the Metric_Definitions_File
3. THE Detail_Panel SHALL display: metric title, asset types in scope, application types in scope, environment in scope, status in scope, instance types in scope, criticality levels in scope, exclusions, special conditions, data sources required, business justification, and per-variant notes
4. THE Detail_Panel SHALL use the Design_System dark theme with section labels in monospace uppercase and content in the standard text colors
5. WHEN a user clicks the Info_Icon, THE click event SHALL NOT propagate to the Metric_Health_Card's onClick handler that filters the Device_Table
6. WHEN a user clicks outside the Detail_Panel or clicks a close button, THE Detail_Panel SHALL close
7. IF no definition exists in the Metric_Definitions_File for a given metric, THEN THE Detail_Panel SHALL display a "No detailed definition available" message with the Summary_Entry description as fallback content
### Requirement 6: Metric Definitions Data File
**User Story:** As a developer, I want metric definitions stored as a static JSON file in the frontend, so that the tooltip and detail panel can render metric context without additional API calls.
#### Acceptance Criteria
1. THE Metric_Definitions_File SHALL be a JSON file located in the frontend source directory (e.g., `frontend/src/data/metricDefinitions.json`)
2. THE Metric_Definitions_File SHALL contain an entry for each metric ID with the following fields: metric_id, metric_title, asset_types, asset_types_in_scope, application_types_in_scope, environment_in_scope, status_in_scope, instance_types_in_scope, criticality_levels_in_scope, exclusions, special_conditions, data_sources_required, business_justification, and notes
3. THE Metric_Definitions_File SHALL be importable as a standard JavaScript module using a static import statement
4. WHEN the Metric_Definitions_File is loaded, THE Compliance_Page SHALL build a lookup map keyed by metric_id for efficient access
5. THE Metric_Definitions_File SHALL use a flat array structure where each entry represents one metric row from the definitions table
### Requirement 7: Preserved Card-Click Filtering Behavior
**User Story:** As an engineer, I want clicking a grouped metric card to still filter the device table, so that the existing workflow for investigating violations is not disrupted.
#### Acceptance Criteria
1. WHEN a user clicks a grouped Metric_Health_Card (outside the Info_Icon), THE Compliance_Page SHALL set the metric filter to include all metric IDs in that Metric_Family
2. WHEN a metric filter is active for a Metric_Family, THE Device_Table SHALL display devices that have violations for any metric ID within that family
3. WHEN a user clicks the same grouped Metric_Health_Card again, THE Compliance_Page SHALL clear the metric filter
4. THE "clear filter" button in the metric health section header SHALL continue to reset the filter to show all devices
5. THE Metric_Health_Card SHALL visually indicate the active/selected state using the existing highlight pattern (tinted background with the status color)
### Requirement 8: Metric Definitions File Structure and Round-Trip Integrity
**User Story:** As a developer, I want the metric definitions JSON to be parseable and printable without data loss, so that the file can be maintained and validated reliably.
#### Acceptance Criteria
1. THE Metric_Definitions_File SHALL be valid JSON that parses without error using `JSON.parse()`
2. FOR ALL entries in the Metric_Definitions_File, parsing the JSON then stringifying it then parsing it again SHALL produce an equivalent object (round-trip property)
3. THE Metric_Definitions_File SHALL contain a `metric_id` field in every entry that is a non-empty string
4. IF an optional field (exclusions, special_conditions, notes) has no value for a metric, THEN THE Metric_Definitions_File SHALL represent it as an empty string rather than omitting the key

View File

@@ -0,0 +1,178 @@
# Implementation Plan: Compliance Metric Grouping
## Overview
Consolidate the AEO Compliance page's metric health cards from one-per-summary-entry to one-per-metric-family. Add variant pills inside each grouped card, a hover tooltip with metric context (300ms delay), an info panel for full metric definitions, and a static `metricDefinitions.json` data file. All work is frontend-only — no backend changes needed. The `metricFilter` state changes from `string|null` to `string[]|null` to support filtering by all metric IDs in a family.
## Tasks
- [x] 1. Create metric definitions data file and install test dependencies
- [x] 1.1 Create `frontend/src/data/metricDefinitions.json`
- Create the `frontend/src/data/` directory
- Build the JSON array from the metric definitions table provided by the user (130+ rows, 14 fields each)
- Each entry must have all 14 keys: `metric_id`, `metric_title`, `asset_types`, `asset_types_in_scope`, `application_types_in_scope`, `environment_in_scope`, `status_in_scope`, `instance_types_in_scope`, `criticality_levels_in_scope`, `exclusions`, `special_conditions`, `data_sources_required`, `business_justification`, `notes`
- Use empty strings for optional fields with no value — never `null` or omitted keys
- Verify the file imports without error via a quick `JSON.parse` check
- _Requirements: 6.1, 6.2, 6.3, 6.5, 8.3, 8.4_
- [x] 1.2 Install `fast-check` as a dev dependency
- Run `npm install --save-dev fast-check` in `frontend/`
- Verify it appears in `package.json` devDependencies
- _Requirements: (testing infrastructure)_
- [x] 2. Implement pure helper functions and their tests
- [x] 2.1 Add `computeWorstStatus` and `groupByMetricFamily` helpers to CompliancePage.js
- Add `STATUS_SEVERITY` map: `{ 'Below 15% of Target': 0, 'Within 15% of Target': 1, 'Meets/Exceeds Target': 2 }`
- Implement `computeWorstStatus(statuses)` — returns the status with the lowest severity rank from a non-empty array
- Implement `groupByMetricFamily(allEntries, team)` — filters entries by team, groups by `metric_id`, returns array of `{ metricId, entries, category, target, worstStatus }` objects
- Export both functions for testing (named exports alongside the default CompliancePage export)
- Remove the existing `teamMetrics()` helper (replaced by `groupByMetricFamily`)
- _Requirements: 1.1, 1.2, 1.6, 3.1_
- [x] 2.2 Write property test: Grouping invariant — no entries lost or misplaced
- **Property 1: Grouping invariant — no entries lost or misplaced**
- Create test file `frontend/src/components/pages/__tests__/complianceGrouping.property.test.js`
- Generate random arrays of summary entry objects with varying `metric_id` and `team` values
- Verify: (a) every entry appears in exactly one group, (b) all entries within a group share the same `metric_id`, (c) total entries across groups equals team-filtered input count
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 1.1, 1.2**
- [x] 2.3 Write property test: Worst-status computation follows severity ordering
- **Property 2: Worst-status computation follows severity ordering**
- Generate random non-empty arrays of status strings from `{"Below 15% of Target", "Within 15% of Target", "Meets/Exceeds Target"}`
- Verify the result is the status with the lowest severity rank present in the array
- If the array contains "Below 15% of Target", the result must be "Below 15% of Target"
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 1.6, 3.1**
- [ ]* 2.4 Write property test: Device filtering with metric family includes all matching devices
- **Property 3: Device filtering with metric family includes all matching devices**
- Generate random device arrays (each with a `failing_metrics` array of `{ metric_id }` objects) and random filter ID arrays
- Verify the filtered result contains exactly those devices with at least one matching `metric_id` in the filter array
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 1.8, 7.1, 7.2**
- [x] 3. Checkpoint — Verify helpers and property tests
- Ensure all tests pass, ask the user if questions arise.
- [x] 4. Redesign MetricHealthCard with variant pills and worst-status coloring
- [x] 4.1 Redesign `MetricHealthCard` to accept a family group
- Change props from `{ entry, active, onClick }` to `{ family, active, onClick, onInfoClick, definitionLookup }`
- `family` is `{ metricId, entries, category, target, worstStatus }`
- Display base `metricId` as card title and `category` from the family
- Display shared `target` percentage
- Use `worstStatus` color for card border, status pill text, and status dot
- When all variants meet/exceed target, show "OK" status indicator with success color
- Add `Info` icon (lucide-react) in the top-right corner with `stopPropagation` on click to call `onInfoClick(family.metricId)`
- _Requirements: 1.2, 1.3, 1.6, 1.7, 3.1, 3.2, 3.3, 5.1, 5.5_
- [x] 4.2 Implement `VariantPill` inline sub-component
- Render one pill per `entry` in `family.entries`
- Each pill shows the entry's `description` or `team` label and compliance percentage in monospace
- Background tint from the entry's individual status color at ~12% opacity
- Show a glow dot when the variant's status is not "Meets/Exceeds Target"
- Layout: `inline-flex` with `flexWrap: 'wrap'` on the parent container
- _Requirements: 1.4, 1.5, 2.1, 2.2, 2.3, 2.4_
- [x] 5. Update CompliancePage state and rendering to use grouped families
- [x] 5.1 Add new imports and build the definitions lookup map
- Import `{ Info }` from `lucide-react`
- Import `MetricInfoPanel` from `./MetricInfoPanel` (created in task 6)
- Import `metricDefinitionsRaw` from `../../data/metricDefinitions.json`
- Build `METRIC_DEFINITIONS` lookup object at module level keyed by `metric_id`
- _Requirements: 6.3, 6.4_
- [x] 5.2 Update state management and filter logic
- Change `metricFilter` from `string|null` to `string[]|null`
- Add new state: `infoMetric` (`string|null`) — which metric's info panel is open
- Add new state: `hoveredMetric` (`string|null`) — which metric is being hovered
- Add new ref: `hoverTimeoutRef` — for 300ms delay management
- Update `filteredDevices` filter from `m.metric_id === metricFilter` to `metricFilter.includes(m.metric_id)`
- _Requirements: 7.1, 7.2_
- [x] 5.3 Update card rendering to use `groupByMetricFamily`
- Replace `const metrics = teamMetrics(summary.entries, activeTeam)` with `const families = groupByMetricFamily(summary.entries, activeTeam)`
- Replace `metrics.map(entry => <MetricHealthCard entry={entry} ... />)` with `families.map(family => <MetricHealthCard family={family} ... />)`
- On card click: set `metricFilter` to `family.entries.map(e => e.metric_id)` (array of all IDs in the family), or clear if already active
- Active state check: compare `metricFilter` array contents against the family's metric IDs
- Pass `onInfoClick` handler that sets `infoMetric` state
- Pass `definitionLookup` as `METRIC_DEFINITIONS`
- _Requirements: 1.2, 1.8, 7.1, 7.3, 7.4, 7.5_
- [x] 6. Implement MetricInfoPanel component
- [x] 6.1 Create `frontend/src/components/pages/MetricInfoPanel.js`
- Props: `metricId`, `definition` (from lookup or null), `summaryEntries` (family entries for fallback), `onClose`
- Render overlay/slide-out panel with dark theme matching DESIGN_SYSTEM.md
- Close button (X icon, top-right)
- Metric title in h3 monospace
- Sections with monospace uppercase labels: Asset Types, Asset Types In Scope, Application Types In Scope, Environment In Scope, Status In Scope, Instance Types In Scope, Criticality Levels In Scope, Exclusions, Special Conditions, Data Sources Required, Business Justification, Notes
- Show "—" placeholder for empty string fields
- If `definition` is null: show "No detailed definition available" with summary description fallback
- Click outside or close button calls `onClose()`
- _Requirements: 5.2, 5.3, 5.4, 5.6, 5.7_
- [x] 7. Implement HoverTooltip inline in CompliancePage
- [x] 7.1 Add hover tooltip logic and rendering
- On `mouseEnter` on MetricHealthCard: set 300ms timeout, then set `hoveredMetric` to `family.metricId`
- On `mouseLeave`: clear timeout, set `hoveredMetric` to null
- Render tooltip when `hoveredMetric` matches a family — positioned near the card using `getBoundingClientRect()`
- Tooltip content: metric title, business justification, data sources required (from `METRIC_DEFINITIONS` lookup)
- Fall back to summary entry `description` when no definition exists
- Dark card background with subtle border and shadow per DESIGN_SYSTEM.md
- Tooltip must not interfere with card click behavior
- _Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.6_
- [x] 8. Checkpoint — Verify full UI integration
- Ensure all tests pass, ask the user if questions arise.
- [x] 9. Property tests for definitions data and lookup
- [x] 9.1 Write property test: Definition lookup returns correct entry or null
- **Property 4: Definition lookup returns correct entry or null**
- Create test file `frontend/src/components/pages/__tests__/metricDefinitions.property.test.js`
- Generate random arrays of metric definition objects with unique `metric_id` values
- Build lookup map, query with IDs from the array (expect hit) and IDs not in the array (expect miss)
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 4.2, 4.6**
- [x] 9.2 Write property test: Detail panel renders all required definition fields
- **Property 5: Detail panel renders all required definition fields**
- Generate random metric definition objects with all 14 fields
- Extract the set of field keys that the MetricInfoPanel renders and verify all required keys are present
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 5.3**
- [x] 9.3 Write property test: Definitions schema validation — all entries have required fields
- **Property 6: Definitions schema validation — all entries have required fields**
- Generate random arrays of metric definition objects
- Verify every entry has all 14 keys present, `metric_id` is a non-empty string, and optional fields (`exclusions`, `special_conditions`, `notes`) are strings (not null/undefined)
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 6.2, 8.3, 8.4**
- [x] 9.4 Write property test: Lookup map construction preserves all definitions
- **Property 7: Lookup map construction preserves all definitions**
- Generate random definition arrays with unique `metric_id` values
- Build lookup map and verify map size equals array length, and every definition is retrievable by its `metric_id`
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 6.4**
- [x] 9.5 Write property test: JSON round-trip preserves metric definition data
- **Property 8: JSON round-trip preserves metric definition data**
- Generate random metric definition objects with string values for all fields
- Round-trip through `JSON.stringify` then `JSON.parse` and verify deep equality
- Use `fc.assert(property, { numRuns: 100 })`
- **Validates: Requirements 8.1, 8.2**
- [x] 10. Final checkpoint — Ensure all tests pass
- Ensure all tests pass, ask the user if questions arise.
## Notes
- Tasks marked with `*` are optional and can be skipped for faster MVP
- Each task references specific requirements for traceability
- Checkpoints ensure incremental validation
- Property tests validate universal correctness properties from the design document using fast-check
- Unit tests validate specific examples and edge cases
- All styling follows the project convention of inline styles (no CSS modules or Tailwind)
- The `fast-check` library must be installed as a dev dependency before running property tests
- The `metricDefinitions.json` file contains 130+ rows — the user will provide the metric definitions table data for conversion
- `computeWorstStatus` and `groupByMetricFamily` are exported as named exports from CompliancePage.js for testability

View File

@@ -0,0 +1 @@
{"specId": "8ec01dea-8d5c-40c1-8778-ec2992adb37f", "workflowType": "requirements-first", "specType": "feature"}

View File

@@ -0,0 +1,290 @@
# Design Document: Multi-Metric Notes for Compliance Detail Panel
## Overview
This feature extends the compliance notes system so that a single note can be associated with multiple metrics in one action. Today, the `ComplianceDetailPanel` uses a single-select `<select>` dropdown to pick one metric before adding a note. When a remediation action covers several metrics on the same device, the analyst must repeat the note for each metric individually.
The change touches three layers:
1. **Database** — add a `group_id` column to `compliance_notes` so notes created together can be identified as a batch.
2. **API** — extend `POST /api/compliance/notes` to accept `metric_ids` (array) alongside the existing `metric_id` (string), inserting one row per metric inside a transaction.
3. **Frontend** — replace the single-select dropdown with a multi-select chip-based selector, add Select All / Deselect All, and group notes by `group_id` in the display.
Backward compatibility is preserved: the existing `metric_id` field continues to work, and notes created before this feature (which lack a `group_id`) render exactly as they do today.
## Architecture
The feature follows the existing compliance module architecture. No new files or route modules are introduced — changes are scoped to the existing `compliance.js` route file and `ComplianceDetailPanel.js` component.
```mermaid
sequenceDiagram
participant User
participant DetailPanel as ComplianceDetailPanel
participant API as POST /api/compliance/notes
participant DB as SQLite (compliance_notes)
User->>DetailPanel: Select multiple metrics via chip selector
User->>DetailPanel: Type note text, click Send
DetailPanel->>API: POST { hostname, metric_ids: [...], note }
API->>API: Validate inputs (note text, metric IDs)
API->>API: Generate group_id (UUID)
API->>DB: BEGIN TRANSACTION
loop For each metric_id in metric_ids
API->>DB: INSERT INTO compliance_notes (hostname, metric_id, note, group_id, created_by, created_at)
end
API->>DB: COMMIT
API->>DetailPanel: 201 { notes: [...created rows] }
DetailPanel->>DetailPanel: Group notes by group_id, refresh display
```
## Components and Interfaces
### Backend
**Modified: `POST /api/compliance/notes`**
Request body accepts either format:
```javascript
// New multi-metric format
{ hostname: "SERVER01", metric_ids: ["2.1.1", "2.3.2", "4.1.1"], note: "Vendor ticket VT-1234 opened" }
// Legacy single-metric format (still supported)
{ hostname: "SERVER01", metric_id: "2.1.1", note: "Vendor ticket VT-1234 opened" }
```
Precedence: if both `metric_id` and `metric_ids` are present, `metric_ids` wins.
Validation rules:
- `hostname` — required, string, 1300 chars, matches `/^[a-zA-Z0-9._-]+$/` (unchanged)
- `metric_ids` — array of strings, each non-empty and ≤50 chars, at least one entry
- `note` — required, non-empty after trimming, max 1000 chars (unchanged)
On success, the endpoint returns all created rows (with `username` joined from `users`) so the frontend can update without a separate fetch.
**New: Migration script `backend/migrations/add_compliance_notes_group_id.js`**
Adds the `group_id` column and backfills existing rows:
```sql
ALTER TABLE compliance_notes ADD COLUMN group_id TEXT;
CREATE INDEX idx_compliance_notes_group ON compliance_notes(group_id);
-- Backfill: each existing row gets its own unique group_id
UPDATE compliance_notes SET group_id = 'legacy-' || id WHERE group_id IS NULL;
```
The backfill ensures every row has a `group_id`, so the frontend grouping logic works uniformly without null checks.
### Frontend
**Modified: `ComplianceDetailPanel.js`**
The notes section is updated with three changes:
1. **Multi-select metric selector** — replaces the `<select>` dropdown with a chip-based toggle list. Each active metric is rendered as a clickable `MetricChip`. Selected chips get a highlighted border/background. A "Select All" / "Deselect All" toggle appears when there are 2+ active metrics.
2. **Submission logic**`handleAddNote` sends `metric_ids` (array of selected metric IDs) instead of `metric_id` (single string). The submit button is disabled when no metrics are selected or note text is empty.
3. **Note display grouping** — notes are grouped by `group_id` before rendering. Notes sharing a `group_id` are displayed as a single card with multiple `MetricChip` badges. Notes without a `group_id` (pre-migration legacy) render as individual entries, same as today.
**Component structure:**
```
ComplianceDetailPanel
├── Header (hostname, IP, device type, team)
├── Section: Failing Metrics
│ └── MetricRow (per active metric)
├── Section: Resolved Metrics
│ └── MetricRow (per resolved metric)
├── Section: History
│ └── MetricChip + seen count (per active metric)
└── Section: Notes
├── NoteCard (per group_id group, shows multiple MetricChips if multi-metric)
└── Add Note Form
├── MetricChipSelector (multi-select chip toggles)
│ ├── MetricChip (per active metric, clickable)
│ └── Select All / Deselect All toggle
├── Textarea (note text)
└── Send button (disabled when no metrics selected or text empty)
```
**MetricChipSelector behavior:**
| State | Behavior |
|---|---|
| 1 active metric | Chip is pre-selected and non-removable. No Select All toggle. |
| 2+ active metrics, panel just opened | First metric pre-selected. Select All toggle visible. |
| User clicks unselected chip | Chip added to selection |
| User clicks selected chip (2+ selected) | Chip removed from selection |
| User clicks selected chip (only 1 selected, 2+ metrics exist) | No-op — at least one must remain selected |
| Select All clicked | All active metrics selected, toggle label changes to "Deselect All" |
| Deselect All clicked | All metrics deselected except the first (to maintain minimum selection) |
**Design rationale — minimum selection of 1:** The submit button is disabled when no metrics are selected (Requirement 3.4). Rather than allowing the user to reach an empty state and see a disabled button, "Deselect All" keeps the first metric selected. This matches the current UX where a metric is always selected.
## Data Models
### compliance_notes table (modified)
| Column | Type | Description |
|---|---|---|
| `id` | INTEGER PK | Auto-increment row ID |
| `hostname` | TEXT NOT NULL | Device hostname |
| `metric_id` | TEXT NOT NULL | Compliance metric ID |
| `note` | TEXT NOT NULL | Note text (max 1000 chars) |
| `group_id` | TEXT | Batch identifier — rows from the same submission share this value |
| `created_by` | INTEGER FK | User ID of the note author |
| `created_at` | DATETIME | Timestamp of creation |
The `group_id` is a UUID v4 string generated server-side via `crypto.randomUUID()`. Single-metric submissions also receive a `group_id` so the frontend grouping logic is uniform.
**Index:** `idx_compliance_notes_group ON compliance_notes(group_id)` — supports the frontend's grouping query.
### API Response Shape
`POST /api/compliance/notes` response (201):
```json
{
"notes": [
{
"id": 42,
"hostname": "SERVER01",
"metric_id": "2.1.1",
"note": "Vendor ticket VT-1234 opened",
"group_id": "a1b2c3d4-...",
"created_at": "2025-01-15 14:30:00",
"created_by": "jsmith"
},
{
"id": 43,
"hostname": "SERVER01",
"metric_id": "2.3.2",
"note": "Vendor ticket VT-1234 opened",
"group_id": "a1b2c3d4-...",
"created_at": "2025-01-15 14:30:00",
"created_by": "jsmith"
}
]
}
```
`GET /api/compliance/items/:hostname` response — the existing `notes` array now includes `group_id`:
```json
{
"notes": [
{ "id": 43, "metric_id": "2.3.2", "note": "...", "group_id": "a1b2c3d4-...", "created_at": "...", "created_by": "jsmith" },
{ "id": 42, "metric_id": "2.1.1", "note": "...", "group_id": "a1b2c3d4-...", "created_at": "...", "created_by": "jsmith" },
{ "id": 10, "metric_id": "2.1.1", "note": "...", "group_id": "legacy-10", "created_at": "...", "created_by": "admin" }
]
}
```
The frontend groups consecutive notes by `group_id` to render multi-metric notes as a single card.
## Correctness Properties
*A property is a characteristic or behavior that should hold true across all valid executions of a system — essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
### Property 1: Select All / Deselect All round-trip
*For any* set of active metrics with size > 1, clicking "Select All" should result in all metrics being selected, and then clicking "Deselect All" should result in only the first metric remaining selected (minimum selection invariant).
**Validates: Requirements 2.1, 2.2**
### Property 2: Toggle label reflects selection state
*For any* set of active metrics, if the user manually selects every metric one by one, the toggle label should read "Deselect All" — the label is a pure function of whether all metrics are selected, regardless of how that state was reached.
**Validates: Requirements 2.3**
### Property 3: Multi-metric submission creates correct rows with shared group_id
*For any* valid hostname, non-empty note text, and non-empty array of valid metric IDs, submitting a note should create exactly N rows in `compliance_notes` (where N = length of the metric IDs array), all sharing the same `note` text, `created_by` user, `created_at` timestamp, and `group_id` value.
**Validates: Requirements 3.1, 3.2, 5.3, 5.7, 6.1**
### Property 4: Whitespace-only notes are rejected
*For any* string composed entirely of whitespace characters (spaces, tabs, newlines, or combinations thereof), the Notes API should reject the submission with a 400 error and create zero rows in the database.
**Validates: Requirements 3.3**
### Property 5: Atomic validation — invalid metric IDs reject the entire batch
*For any* array of metric IDs where at least one entry is invalid (empty string, exceeds 50 characters, or non-string), the Notes API should reject the entire request with a 400 error and insert zero rows, even if all other entries are valid.
**Validates: Requirements 5.2, 5.6**
### Property 6: Note grouping display
*For any* set of notes where multiple notes share the same `group_id`, the Detail Panel should render them as a single note entry displaying all associated Metric Chips, rather than as separate entries.
**Validates: Requirements 4.1, 4.2, 6.4**
### Property 7: Reverse chronological note ordering
*For any* set of notes with varying `created_at` timestamps and group sizes, the Detail Panel should display note groups in reverse chronological order (newest `created_at` first), regardless of how many metrics each group covers.
**Validates: Requirements 4.3**
## Error Handling
### Backend
| Scenario | Response | Behavior |
|---|---|---|
| Empty or whitespace-only note text | 400 `{ error: "Note cannot be empty" }` | No rows inserted |
| `metric_ids` is empty array | 400 `{ error: "At least one metric ID is required" }` | No rows inserted |
| Any metric ID in array is empty or >50 chars | 400 `{ error: "Invalid metric_id at index N" }` | No rows inserted (atomic rejection) |
| `metric_ids` is not an array (when provided) | 400 `{ error: "metric_ids must be an array" }` | Falls back to checking `metric_id` |
| Neither `metric_id` nor `metric_ids` provided | 400 `{ error: "metric_id or metric_ids is required" }` | No rows inserted |
| Database error during transaction | 500 `{ error: "Failed to save note" }` | Transaction rolled back, no partial inserts |
| Invalid hostname format | 400 `{ error: "Invalid hostname format" }` | No rows inserted (unchanged) |
Transaction safety: all inserts for a multi-metric note happen inside `BEGIN TRANSACTION` / `COMMIT`. If any insert fails, the transaction is rolled back and no rows are persisted.
### Frontend
| Scenario | Behavior |
|---|---|
| API returns 400 validation error | Display error message below the note input (existing `noteError` state) |
| API returns 500 server error | Display error message below the note input |
| Network failure | Display "Failed to save note" error |
| No metrics selected | Submit button is disabled, no API call made |
| Successful submission | Clear note text, refresh notes list, retain metric selection |
## Testing Strategy
### Unit Tests (example-based)
- **Backend:**
- Legacy `metric_id` field still creates a single note row (backward compatibility)
- Both `metric_id` and `metric_ids` provided — `metric_ids` takes precedence
- Single active metric pre-selects and is non-removable
- Response shape includes all created rows with `group_id` and `username`
- **Frontend:**
- MetricChipSelector renders correct number of chips for given active metrics
- Clicking a chip toggles its selection state
- Submit button disabled when note text is empty or no metrics selected
- Notes without `group_id` (legacy) render as individual entries
- Single active metric auto-selects and hides Select All toggle
### Property-Based Tests
Property-based tests use `fast-check` (JavaScript PBT library) with a minimum of 100 iterations per property.
Each property test is tagged with a comment referencing the design property:
- **Feature: compliance-multi-metric-notes, Property 3: Multi-metric submission creates correct rows with shared group_id**
- **Feature: compliance-multi-metric-notes, Property 4: Whitespace-only notes are rejected**
- **Feature: compliance-multi-metric-notes, Property 5: Atomic validation — invalid metric IDs reject the entire batch**
Backend properties (3, 4, 5) are tested against the route handler using a test SQLite database. Frontend properties (1, 2, 6, 7) are tested against the component rendering/grouping logic using React Testing Library with generated inputs.
### Integration Tests
- End-to-end flow: open detail panel → select multiple metrics → submit note → verify grouped display
- Migration script: verify `group_id` column exists and legacy rows are backfilled
- Backward compatibility: existing `GET /items/:hostname` response includes `group_id` field on notes

View File

@@ -0,0 +1,85 @@
# Requirements Document
## Introduction
The compliance detail panel currently allows users to add notes to a single metric at a time via a dropdown selector. When a remediation action, vendor ticket, or status update applies to multiple metrics on the same device, users must repeat the same note for each metric individually. This feature adds multi-metric selection to the note creation flow so that a single note can be associated with multiple metrics in one action, while preserving the existing per-metric note history and display.
## Glossary
- **Detail_Panel**: The slide-out panel (`ComplianceDetailPanel.js`) that opens when a user clicks a device row on the Compliance page. It displays failing metrics, resolved metrics, upload history, and notes for a single hostname.
- **Note**: A timestamped, user-attributed text entry stored in the `compliance_notes` table, keyed on `(hostname, metric_id)`. Notes persist across uploads and form a historical record.
- **Metric_Selector**: The UI control in the Detail_Panel's notes section that allows the user to choose which metric(s) a note applies to. Currently a single-select dropdown; this feature replaces it with a multi-select control.
- **Metric_Chip**: A small colored badge displaying a metric ID, used throughout the compliance UI to visually identify metrics by category color.
- **Notes_API**: The `POST /api/compliance/notes` endpoint that persists a note to the database.
- **Active_Metric**: A compliance item with `status = 'active'` for the selected hostname — these are the metrics currently failing.
## Requirements
### Requirement 1: Multi-Metric Selection UI
**User Story:** As a compliance analyst, I want to select multiple metrics when adding a note, so that I can document a single remediation action that covers several metrics without repeating myself.
#### Acceptance Criteria
1. WHEN the Detail_Panel is open for a hostname with more than one Active_Metric, THE Metric_Selector SHALL display all Active_Metrics as individually selectable options.
2. WHEN the user interacts with the Metric_Selector, THE Metric_Selector SHALL allow the user to select one or more Active_Metrics simultaneously.
3. WHEN the Detail_Panel is open for a hostname with exactly one Active_Metric, THE Metric_Selector SHALL pre-select that metric and remain visible as a single non-removable selection.
4. WHEN the Detail_Panel first opens for a hostname with multiple Active_Metrics, THE Metric_Selector SHALL pre-select the first Active_Metric by default.
5. THE Metric_Selector SHALL display each option using the Metric_Chip component with the metric's category color, so that metrics are visually distinguishable.
### Requirement 2: Select All / Deselect All
**User Story:** As a compliance analyst, I want a quick way to select or deselect all metrics, so that I can efficiently apply a note to every failing metric on a device.
#### Acceptance Criteria
1. WHEN the hostname has more than one Active_Metric, THE Metric_Selector SHALL display a "Select All" toggle that selects all Active_Metrics when activated.
2. WHEN all Active_Metrics are already selected, THE "Select All" toggle SHALL change to "Deselect All" and deselect all Active_Metrics when activated.
3. WHEN the user manually selects all Active_Metrics one by one, THE toggle label SHALL update to "Deselect All" to reflect the current state.
### Requirement 3: Multi-Metric Note Submission
**User Story:** As a compliance analyst, I want the system to save my note against all selected metrics in one action, so that the historical record accurately reflects which metrics the note covers.
#### Acceptance Criteria
1. WHEN the user submits a note with multiple metrics selected, THE Notes_API SHALL create one `compliance_notes` row per selected metric, all sharing the same note text, `created_by`, and `created_at` timestamp.
2. WHEN the user submits a note with a single metric selected, THE Notes_API SHALL create exactly one `compliance_notes` row, preserving backward compatibility with the existing behavior.
3. IF the note text is empty or contains only whitespace, THEN THE Notes_API SHALL reject the submission and return a validation error.
4. IF no metrics are selected, THEN THE Detail_Panel SHALL disable the submit button and prevent submission.
5. WHEN a multi-metric note is successfully saved, THE Detail_Panel SHALL clear the note text field, refresh the notes list, and retain the current metric selection.
### Requirement 4: Multi-Metric Note Display
**User Story:** As a compliance analyst, I want to see which metrics a note was applied to, so that I can understand the scope of past remediation actions.
#### Acceptance Criteria
1. WHEN a note was submitted for multiple metrics simultaneously, THE Detail_Panel SHALL display all associated Metric_Chips together on that note entry, visually grouped.
2. WHEN a note was submitted for a single metric, THE Detail_Panel SHALL continue to display a single Metric_Chip on that note entry, matching the current behavior.
3. THE Detail_Panel SHALL display notes in reverse chronological order, with the newest note first, regardless of how many metrics each note covers.
### Requirement 5: Backend Multi-Metric Notes Endpoint
**User Story:** As a developer, I want the notes API to accept an array of metric IDs, so that the frontend can submit a note for multiple metrics in a single request.
#### Acceptance Criteria
1. THE Notes_API SHALL accept a `metric_ids` field (array of strings) in the request body as an alternative to the existing `metric_id` field (single string).
2. WHEN `metric_ids` is provided, THE Notes_API SHALL validate that each entry is a non-empty string of 50 characters or fewer.
3. WHEN `metric_ids` is provided, THE Notes_API SHALL insert one `compliance_notes` row per metric ID, all within the same database transaction, sharing the same `created_at` timestamp.
4. WHEN the legacy `metric_id` field is provided instead of `metric_ids`, THE Notes_API SHALL continue to function as before, inserting a single row.
5. IF both `metric_id` and `metric_ids` are provided, THEN THE Notes_API SHALL use `metric_ids` and ignore `metric_id`.
6. IF any metric ID in the `metric_ids` array fails validation, THEN THE Notes_API SHALL reject the entire request and return a 400 error without inserting any rows.
7. THE Notes_API SHALL return all created note rows in the response, so the frontend can update the display without a separate fetch.
### Requirement 6: Note Grouping Identifier
**User Story:** As a developer, I want notes that were created together to share a group identifier, so that the frontend can visually group multi-metric notes in the display.
#### Acceptance Criteria
1. WHEN multiple notes are created from a single submission, THE Notes_API SHALL assign the same `group_id` value to all rows in that batch.
2. WHEN a single note is created, THE Notes_API SHALL assign a unique `group_id` to that row.
3. THE `group_id` SHALL be stored as a text column in the `compliance_notes` table.
4. THE Detail_Panel SHALL use the `group_id` to visually group notes that were submitted together, displaying them as a single note entry with multiple Metric_Chips rather than as separate entries.

View File

@@ -0,0 +1,105 @@
# Implementation Plan: Multi-Metric Notes for Compliance Detail Panel
## Overview
Extend the compliance notes system so a single note can be associated with multiple metrics in one action. Changes span three layers: a new migration script adding `group_id` to `compliance_notes`, updates to the `POST /notes` endpoint in `backend/routes/compliance.js` to accept `metric_ids` (array) and insert rows transactionally, and frontend changes in `ComplianceDetailPanel.js` to replace the single-select dropdown with a multi-select chip selector and group notes by `group_id` in the display.
## Tasks
- [x] 1. Create database migration for `group_id` column
- [x] 1.1 Create `backend/migrations/add_compliance_notes_group_id.js`
- Add `group_id TEXT` column to `compliance_notes` table via `ALTER TABLE`
- Create index `idx_compliance_notes_group` on `compliance_notes(group_id)`
- Backfill existing rows: `UPDATE compliance_notes SET group_id = 'legacy-' || id WHERE group_id IS NULL`
- Follow the existing migration pattern (sqlite3, serialize, console logging)
- _Requirements: 6.1, 6.2, 6.3_
- [x] 2. Update `POST /notes` endpoint to support multi-metric submissions
- [x] 2.1 Modify the `POST /notes` handler in `backend/routes/compliance.js` to accept `metric_ids` array
- Accept `metric_ids` (array of strings) as an alternative to `metric_id` (single string)
- When both are provided, `metric_ids` takes precedence
- When neither is provided, return 400 with `"metric_id or metric_ids is required"`
- When `metric_ids` is provided but is not an array, return 400 with `"metric_ids must be an array"`
- Normalize single `metric_id` into a one-element array internally so the rest of the logic is uniform
- _Requirements: 5.1, 5.4, 5.5_
- [x] 2.2 Add validation for `metric_ids` array entries
- Validate that `metric_ids` has at least one entry; return 400 with `"At least one metric ID is required"` if empty
- Validate each entry is a non-empty string of 50 characters or fewer; return 400 with `"Invalid metric_id at index N"` on failure
- Reject the entire request if any entry fails validation (atomic rejection, no partial inserts)
- _Requirements: 5.2, 5.6_
- [x] 2.3 Implement transactional multi-row insert with `group_id`
- Generate a `group_id` using `crypto.randomUUID()` for each submission (single or multi)
- Wrap all inserts in `BEGIN TRANSACTION` / `COMMIT` with `ROLLBACK` on error
- Insert one `compliance_notes` row per metric ID, all sharing the same `note`, `group_id`, `created_by`, and `created_at`
- _Requirements: 3.1, 3.2, 5.3, 6.1, 6.2_
- [x] 2.4 Update the response to return all created note rows
- After commit, query all created rows (joined with `users` for `username`) and return as `{ notes: [...] }`
- Each row includes `id`, `hostname`, `metric_id`, `note`, `group_id`, `created_at`, `created_by`
- Return HTTP 201 status
- _Requirements: 5.7_
- [x] 3. Update `GET /items/:hostname` to include `group_id` in notes response
- Add `cn.group_id` to the SELECT in the notes query within the `GET /items/:hostname` handler
- The existing query already fetches notes for the hostname; just add the column
- No other changes to this endpoint
- _Requirements: 6.3, 6.4_
- [x] 4. Checkpoint — Verify backend changes
- Ensure all backend changes are syntactically correct, ask the user if questions arise.
- [x] 5. Replace single-select dropdown with multi-select MetricChipSelector in `ComplianceDetailPanel.js`
- [x] 5.1 Replace `noteMetric` (string) state with `selectedMetrics` (array) state
- Initialize `selectedMetrics` with the first active metric's ID when detail loads (matching current default behavior)
- When there is exactly one active metric, pre-select it as a non-removable selection
- _Requirements: 1.3, 1.4_
- [x] 5.2 Build the multi-select chip-based metric selector UI
- Replace the existing `<select>` dropdown with a row of clickable `MetricChip` components
- Each active metric renders as a chip; selected chips get a highlighted border/background
- Clicking an unselected chip adds it to `selectedMetrics`
- Clicking a selected chip removes it, unless it is the only selected chip (minimum 1 selection)
- Only show the chip selector when there are 2+ active metrics (single metric is auto-selected)
- Style chips using existing `MetricChip` component patterns and category colors
- _Requirements: 1.1, 1.2, 1.5_
- [x] 5.3 Add Select All / Deselect All toggle
- Show a text toggle above or beside the chip row when there are 2+ active metrics
- "Select All" selects all active metrics; label changes to "Deselect All"
- "Deselect All" deselects all except the first metric (minimum selection invariant)
- Toggle label is a pure function of whether all metrics are selected
- Hide the toggle when there is only one active metric
- _Requirements: 2.1, 2.2, 2.3_
- [x] 6. Update note submission logic to send `metric_ids` array
- Modify `handleAddNote` to send `{ hostname, metric_ids: selectedMetrics, note }` instead of `{ hostname, metric_id: noteMetric, note }`
- Disable the submit button when `selectedMetrics` is empty or note text is empty
- On success, clear note text, refresh the detail panel, and retain the current metric selection
- Handle the new response shape (`{ notes: [...] }`) from the updated API
- _Requirements: 3.1, 3.4, 3.5_
- [x] 7. Update note display to group by `group_id`
- [x] 7.1 Add note grouping logic
- Group the `detail.notes` array by `group_id` before rendering
- Notes sharing a `group_id` are displayed as a single card with multiple `MetricChip` badges
- Notes without a `group_id` (pre-migration legacy, should not occur after backfill) render as individual entries
- Maintain reverse chronological order (newest `created_at` first) across groups
- _Requirements: 4.1, 4.2, 4.3, 6.4_
- [x] 7.2 Update the note card rendering
- For grouped notes, display all associated `MetricChip` components in the card header
- For single-metric notes, display one `MetricChip` (matching current behavior)
- Preserve existing note card styling (background, border, padding, typography)
- _Requirements: 4.1, 4.2_
- [x] 8. Final checkpoint — Verify full feature
- Ensure frontend compiles without errors, ask the user if questions arise.
## Notes
- No automated tests — feature is validated manually per user preference
- No new components or route modules required; all changes are scoped to existing files plus one migration
- The `group_id` backfill ensures legacy notes render correctly without null checks
- Each task references specific requirements for traceability

View File

@@ -0,0 +1 @@
{"specId": "e83a2e8f-4508-4669-9697-41219c8a7c71", "workflowType": "requirements-first", "specType": "feature"}

View File

@@ -0,0 +1,364 @@
# Design Document: Compliance Schema Drift Check
## Overview
This feature adds schema drift detection to the compliance xlsx upload flow. When a user uploads a weekly NTS_AEO report, the backend extracts the xlsx structural schema (sheet names, column headers, metric values) and compares it against a shared parser configuration file. The comparison produces a categorised drift report with three severity levels: breaking (blocks upload), silent-miss (warns but allows proceeding), and cosmetic (informational). The frontend displays these findings in a new drift review phase inside the upload modal, inserted between the upload spinner and the existing diff preview.
The parser configuration dicts (`METRIC_CATEGORIES`, `CORE_COLS`, `SKIP_SHEETS`) currently defined inline in `parse_compliance_xlsx.py` are extracted into a shared JSON file (`backend/scripts/compliance_config.json`) that both the Python parser and the Node.js drift checker read. This establishes a single source of truth for parser configuration.
### Design Decisions
1. **Shared JSON config over database storage**: The parser config is a developer-maintained mapping, not user data. A JSON file is version-controllable, diffable, and readable by both Python and Node.js without additional dependencies.
2. **Python subprocess for schema extraction**: The existing `dump_xlsx_schema.py` already uses openpyxl to extract xlsx structure. We adapt this into a new `extract_xlsx_schema.py` script that the Node.js backend invokes as a subprocess, consistent with how `parse_compliance_xlsx.py` is already called.
3. **Node.js drift comparison logic**: The drift comparison is pure object comparison (sets of strings) with no xlsx parsing. Implementing it in Node.js avoids a second Python subprocess call and keeps the logic co-located with the route handler.
4. **Graceful degradation**: If the drift check fails, the upload flow proceeds normally with `drift: null` and a `drift_error` message. The drift check is additive and must never block the existing workflow.
## Architecture
```mermaid
sequenceDiagram
participant User
participant Modal as ComplianceUploadModal
participant API as POST /api/compliance/preview
participant Schema as extract_xlsx_schema.py
participant Drift as driftChecker (Node.js)
participant Config as compliance_config.json
participant Parser as parse_compliance_xlsx.py
User->>Modal: Drops xlsx file
Modal->>API: POST /preview (multipart)
API->>Schema: spawn python3 extract_xlsx_schema.py <file>
Schema-->>API: JSON { sheets: [...] }
API->>Config: fs.readFileSync(compliance_config.json)
API->>Drift: compareSchemaToDrift(schema, config)
Drift-->>API: { breaking: [...], silent_miss: [...], cosmetic: [...] }
API->>Parser: spawn python3 parse_compliance_xlsx.py <file>
Parser->>Config: reads compliance_config.json
Parser-->>API: JSON { items, summary, ... }
API->>API: computeDiff(db, items)
API-->>Modal: { drift, diff, tempFile, ... }
alt drift has findings
Modal->>User: Show drift review phase
alt breaking findings exist
Modal->>User: Block "Continue to Preview"
else no breaking findings
User->>Modal: Click "Continue to Preview"
Modal->>User: Show diff preview
end
else no drift findings
Modal->>User: Show diff preview directly
end
```
### File Layout
```
backend/
scripts/
compliance_config.json # NEW — shared parser config (single source of truth)
extract_xlsx_schema.py # NEW — extracts xlsx structure as JSON
parse_compliance_xlsx.py # MODIFIED — reads config from JSON file
dump_xlsx_schema.py # UNCHANGED — standalone diagnostic tool
routes/
compliance.js # MODIFIED — drift check in /preview, new driftChecker module
helpers/
driftChecker.js # NEW — compareSchemaToDrift() function
frontend/
src/components/pages/
ComplianceUploadModal.js # MODIFIED — new drift-review phase
```
## Components and Interfaces
### 1. Shared Parser Configuration (`compliance_config.json`)
```json
{
"metric_categories": {
"2.3.4i": "Vulnerability Management",
"2.3.6i": "Vulnerability Management",
"5.2.4": "Access & MFA"
},
"core_cols": [
"Preferred - Hostname",
"GRANITE - IPv4_Address",
"GRANITE - Type",
"Team",
"Compliant",
"Source_Network",
"Vertical",
"GRANITE - Equip_Inst_ID",
"GRANITE - RESPONSIBLE_TEAM"
],
"skip_sheets": ["Summary", "CMDB_9box", "Vulns", "Aging Dashboard"]
}
```
### 2. Schema Extractor (`extract_xlsx_schema.py`)
**Input**: File path as CLI argument.
**Output** (stdout JSON):
```json
{
"sheets": [
{
"name": "Summary",
"columns": ["Metric", "Non-Compliant", "..."],
"metric_values": ["2.3.4i", "5.2.4", "..."]
},
{
"name": "2.3.4i",
"columns": ["Preferred - Hostname", "GRANITE - IPv4_Address", "..."]
}
]
}
```
- Uses openpyxl in read-only mode.
- Extracts sheet names, first-row column headers per sheet, and unique metric values from the Summary sheet (header at row 4, data from row 5 onward).
- On error, returns `{ "error": "..." }` on stdout and exits with non-zero code.
### 3. Drift Checker (`backend/helpers/driftChecker.js`)
**Function**: `compareSchemaToDrift(schema, config) => DriftReport`
**Parameters**:
- `schema` — object returned by `extract_xlsx_schema.py`
- `config` — object parsed from `compliance_config.json`
**Returns** (`DriftReport`):
```javascript
{
breaking: [
{ severity: 'breaking', message: 'Detail sheet "2.3.4i" is missing core column "Team"', value: 'Team', sheet: '2.3.4i' }
],
silent_miss: [
{ severity: 'silent_miss', message: 'Unknown metric "9.1.2" in Summary — not in metric_categories', value: '9.1.2' }
],
cosmetic: [
{ severity: 'cosmetic', message: 'New column "Extra_Field" in sheet "2.3.4i" — will be captured in extra_json', value: 'Extra_Field', sheet: '2.3.4i' }
]
}
```
**Drift rules**:
| Rule | Severity | Condition |
|---|---|---|
| Missing core column | `breaking` | A detail sheet (not in `skip_sheets`, present in xlsx) is missing a column from `core_cols` |
| Missing detail sheet | `breaking` | A sheet name in `metric_categories` (and not in `skip_sheets`) is absent from the xlsx |
| Unknown metric value | `silent_miss` | A metric value in the Summary sheet is not a key in `metric_categories` |
| Unknown sheet | `silent_miss` | An xlsx sheet is not in `skip_sheets` and not in `metric_categories` |
| New column in detail sheet | `cosmetic` | A detail sheet has columns not in `core_cols` |
| Stale metric category | `cosmetic` | A key in `metric_categories` does not appear in the Summary sheet's metric values |
### 4. Preview Endpoint Changes (`POST /api/compliance/preview`)
The existing `/preview` handler is modified to:
1. After receiving the uploaded file, spawn `extract_xlsx_schema.py` to get the xlsx schema.
2. Read `compliance_config.json` from disk.
3. Call `compareSchemaToDrift(schema, config)` to produce the drift report.
4. Proceed with the existing `parseXlsx()` call and `computeDiff()`.
5. Include `drift` (the DriftReport object) and optionally `drift_error` (string) in the response.
If the schema extraction or drift check throws, set `drift: null` and `drift_error: <message>`, then continue with the normal flow.
**Updated response shape**:
```json
{
"drift": {
"breaking": [],
"silent_miss": [],
"cosmetic": []
},
"drift_error": null,
"diff": { "new_count": 5, "recurring_count": 120, "resolved_count": 3 },
"tempFile": "/path/to/temp.json",
"filename": "NTS_AEO_2026_03_25.xlsx",
"report_date": "2026-03-25",
"total_items": 125
}
```
### 5. Upload Modal Changes (`ComplianceUploadModal.js`)
**New phase**: `drift-review` inserted between `uploading` and `preview`.
**Phase flow**:
```
idle → uploading → drift-review (if findings) → preview → committing → done
→ preview (if no findings)
```
**Drift review UI**:
- Findings grouped by severity: breaking first, then silent-miss, then cosmetic.
- Each group has a header with severity label and count badge.
- Groups with more than 5 findings collapse with a "Show N more" toggle.
- Each finding shows the message text and the triggering value.
- Breaking findings: red text (`#EF4444`), red left-border accent.
- Silent-miss findings: amber text (`#F59E0B`), amber left-border accent.
- Cosmetic findings: muted text (`#94A3B8`), subtle left-border accent.
- "Cancel" button returns to idle. "Continue to Preview" button advances to diff preview.
- "Continue to Preview" is disabled when breaking findings exist, with a message explaining the block.
- When `drift` is `null` (drift check failed), skip drift-review and go straight to preview.
## Data Models
### DriftFinding
```javascript
{
severity: 'breaking' | 'silent_miss' | 'cosmetic',
message: string, // Human-readable description
value: string, // The specific column/sheet/metric that triggered the finding
sheet: string|null // Sheet name context (when applicable)
}
```
### DriftReport
```javascript
{
breaking: DriftFinding[],
silent_miss: DriftFinding[],
cosmetic: DriftFinding[]
}
```
### ParserConfig
```javascript
{
metric_categories: { [metricId: string]: string }, // metric ID → category name
core_cols: string[], // column names for main item fields
skip_sheets: string[] // sheet names excluded from parsing
}
```
### XlsxSchema (output of extract_xlsx_schema.py)
```javascript
{
sheets: [
{
name: string,
columns: string[],
metric_values?: string[] // only present on Summary sheet
}
]
}
```
## Correctness Properties
*A property is a characteristic or behavior that should hold true across all valid executions of a system — essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
### Property 1: Breaking drift completeness
*For any* xlsx schema and parser config, the drift checker SHALL produce a breaking finding for every core column missing from every detail sheet, and for every detail sheet (present in `metric_categories` but not in `skip_sheets`) absent from the xlsx — and no other breaking findings. The set of breaking findings is exactly the union of missing-core-column findings and missing-detail-sheet findings.
**Validates: Requirements 3.1, 3.2, 3.3**
### Property 2: Silent-miss drift completeness
*For any* xlsx schema and parser config, the drift checker SHALL produce a silent-miss finding for every metric value in the Summary sheet not present in `metric_categories`, and for every xlsx sheet not in `skip_sheets` and not in `metric_categories` — and no other silent-miss findings. The set of silent-miss findings is exactly the union of unknown-metric findings and unknown-sheet findings.
**Validates: Requirements 4.1, 4.2, 4.3**
### Property 3: Cosmetic drift completeness
*For any* xlsx schema and parser config, the drift checker SHALL produce a cosmetic finding for every column in a detail sheet not present in `core_cols`, and for every key in `metric_categories` not present in the Summary sheet's metric values — and no other cosmetic findings. The set of cosmetic findings is exactly the union of new-column findings and stale-metric findings.
**Validates: Requirements 5.1, 5.2, 5.3**
### Property 4: Drift severity ordering
*For any* drift report containing a mix of breaking, silent-miss, and cosmetic findings, the grouping function SHALL always return findings ordered by severity: all breaking findings first, then all silent-miss findings, then all cosmetic findings.
**Validates: Requirements 8.1**
## Error Handling
### Python Script Failures
| Failure | Handling |
|---|---|
| `extract_xlsx_schema.py` exits non-zero | Preview endpoint sets `drift: null`, `drift_error: <stderr message>`, continues with normal parse flow |
| `extract_xlsx_schema.py` returns invalid JSON | Same as above — caught in JSON.parse, treated as drift check failure |
| `compliance_config.json` missing or invalid (Node.js read) | Preview endpoint returns 500 with message "Configuration file could not be loaded" |
| `compliance_config.json` missing or invalid (Python parser read) | Parser exits non-zero, stderr describes the error, preview endpoint returns 500 with parse error |
| xlsx file cannot be opened by schema extractor | Schema extractor returns `{ "error": "..." }` on stdout, exits non-zero; drift check skipped gracefully |
### Frontend Error States
| Condition | Behavior |
|---|---|
| `drift` is `null` in preview response | Skip drift-review phase, proceed directly to diff preview |
| `drift_error` is present | Optionally display a subtle warning in the diff preview that drift check was skipped |
| Network error during upload | Existing error phase handling (unchanged) |
### Config File Validation
The Node.js config loader validates that:
- The file exists and is readable.
- The content parses as valid JSON.
- The parsed object contains `metric_categories` (object), `core_cols` (array), and `skip_sheets` (array).
If any check fails, the loader throws with a descriptive message. The preview handler catches this and returns a 500 response.
## Testing Strategy
### Unit Tests
**Drift checker (`driftChecker.js`)**:
- Breaking: missing core column produces finding with correct severity, message, value, and sheet.
- Breaking: missing detail sheet produces finding.
- Silent-miss: unknown metric value produces finding.
- Silent-miss: unknown sheet produces finding.
- Cosmetic: new column in detail sheet produces finding.
- Cosmetic: stale metric category produces finding.
- Empty schema (no sheets) produces appropriate findings.
- Config with empty metric_categories, core_cols, or skip_sheets.
- Schema and config that are perfectly aligned produce zero findings.
**Config loader**:
- Valid config file loads correctly.
- Missing file throws descriptive error.
- Invalid JSON throws descriptive error.
- Config missing required keys throws descriptive error.
**Frontend drift review component**:
- Drift review phase renders when findings exist.
- "Continue to Preview" button disabled when breaking findings present.
- "Continue to Preview" button enabled when no breaking findings.
- Groups collapse at 5+ findings with correct "Show N more" count.
- Cancel returns to idle phase.
- Skips drift review when drift is null or has no findings.
### Property-Based Tests
Property-based tests use `fast-check` (JavaScript) to verify the four correctness properties defined above. Each test generates random schema and config objects and verifies the drift checker output against the expected set-theoretic result.
**Configuration**:
- Minimum 100 iterations per property test.
- Each test tagged with: **Feature: compliance-schema-drift-check, Property {N}: {title}**
**Generators**:
- `arbitraryParserConfig`: generates random `metric_categories` (object with 020 string keys mapped to category strings), `core_cols` (array of 015 unique column name strings), `skip_sheets` (array of 05 unique sheet name strings).
- `arbitraryXlsxSchema`: generates random sheets array, each with a name, columns array, and optionally metric_values (for the Summary sheet). Sheet names, column names, and metric values drawn from a shared pool to ensure meaningful overlap with the config.
### Integration Tests
- Preview endpoint returns drift report alongside existing diff data.
- Preview endpoint returns 200 with breaking drift (does not error).
- Preview endpoint gracefully degrades when drift check fails (`drift: null`, `drift_error` present).
- Preview endpoint returns 500 when config file is missing.
- Python parser reads from `compliance_config.json` and produces same output as before.
- Commit endpoint is unchanged and does not reference drift.

View File

@@ -0,0 +1,128 @@
# Requirements Document
## Introduction
The compliance upload flow in the STEAM Security Dashboard parses weekly NTS_AEO xlsx reports using a Python parser (`parse_compliance_xlsx.py`) that relies on three hand-maintained configuration dicts: `METRIC_CATEGORIES` (metric ID to category mapping), `CORE_COLS` (column names that become main item fields), and `SKIP_SHEETS` (sheet names excluded from parsing). When the xlsx report structure changes — new metrics appear, sheets are renamed, columns are added or removed — the parser silently miscategorises data, drops fields, or fails outright. Currently, detecting this drift requires a separate manual agent workflow.
This feature builds schema drift detection directly into the upload flow. During the preview step, the backend extracts the xlsx structure and compares it against the parser configuration. The frontend displays categorised drift findings (breaking, silent-miss, cosmetic) in the upload modal before the user sees the diff preview. Breaking findings block the upload; silent-miss findings warn but allow proceeding; cosmetic findings are informational. The parser configuration dicts are extracted into a shared JSON config file that both the Python parser and the Node.js backend can read, establishing a single source of truth.
## Glossary
- **Drift_Checker**: The backend module that compares an xlsx file's structural schema against the Parser_Config and produces a categorised Drift_Report.
- **Parser_Config**: A shared JSON configuration file (`backend/scripts/compliance_config.json`) containing `metric_categories`, `core_cols`, and `skip_sheets`. This file is the single source of truth read by both the Python parser and the Node.js backend.
- **Drift_Report**: A structured object returned by the Drift_Checker containing arrays of findings grouped by severity: `breaking`, `silent_miss`, and `cosmetic`.
- **Drift_Finding**: A single entry in the Drift_Report, containing a severity level, a human-readable message, and the specific value that triggered the finding (e.g., a column name, sheet name, or metric ID).
- **Breaking_Finding**: A Drift_Finding indicating the xlsx structure will cause parse errors or data loss. Examples: a core column missing from a detail sheet, a previously existing sheet removed or renamed.
- **Silent_Miss_Finding**: A Drift_Finding indicating data exists in the xlsx but will be dropped or miscategorised by the parser. Examples: a new metric value in the Summary sheet not present in `metric_categories`, a new sheet not in `skip_sheets` and not in `metric_categories`.
- **Cosmetic_Finding**: A Drift_Finding indicating a minor discrepancy worth noting but not blocking. Examples: new columns in known sheets (automatically captured in `extra_json`), stale entries in `metric_categories` that no longer appear in the xlsx.
- **Upload_Modal**: The `ComplianceUploadModal.js` component that manages the file upload flow through phases: idle, uploading, drift-review, preview, committing, done, and error.
- **Preview_Endpoint**: The `POST /api/compliance/preview` endpoint that parses the uploaded xlsx, runs the drift check, computes the diff, and returns both the Drift_Report and diff counts.
- **Schema_Extractor**: The logic (adapted from `dump_xlsx_schema.py`) that reads an xlsx file using openpyxl and extracts sheet names, column headers per sheet, and metric values from the Summary sheet.
- **Detail_Sheet**: Any sheet in the xlsx that is not in the `skip_sheets` set and is parsed for non-compliant item rows.
## Requirements
### Requirement 1: Shared Parser Configuration File
**User Story:** As a developer, I want the parser configuration dicts extracted into a shared JSON file, so that both the Python parser and the Node.js backend read from a single source of truth.
#### Acceptance Criteria
1. THE Parser_Config SHALL be stored at `backend/scripts/compliance_config.json` as a JSON file containing three keys: `metric_categories` (object mapping metric ID strings to category name strings), `core_cols` (array of column name strings), and `skip_sheets` (array of sheet name strings).
2. THE Parser_Config SHALL contain the same values currently defined inline in `METRIC_CATEGORIES`, `CORE_COLS`, and `SKIP_SHEETS` in `parse_compliance_xlsx.py`.
3. WHEN the Python parser starts, THE Python parser SHALL read `metric_categories`, `core_cols`, and `skip_sheets` from the Parser_Config file instead of using inline dict definitions.
4. IF the Parser_Config file is missing or contains invalid JSON, THEN THE Python parser SHALL exit with a non-zero exit code and print a descriptive error message to stderr.
5. WHEN the Node.js backend handles a preview request, THE Drift_Checker SHALL read the Parser_Config file to obtain the current metric categories, core columns, and skip sheets.
6. IF the Parser_Config file is missing or contains invalid JSON when the Node.js backend reads it, THEN THE Preview_Endpoint SHALL return a 500 error with a message indicating the configuration file could not be loaded.
### Requirement 2: Schema Extraction from Uploaded xlsx
**User Story:** As a developer, I want the backend to extract the structural schema from an uploaded xlsx file, so that the drift checker can compare it against the parser configuration.
#### Acceptance Criteria
1. WHEN an xlsx file is uploaded to the Preview_Endpoint, THE Schema_Extractor SHALL extract the list of sheet names, the column headers from the first row of each sheet, and the unique metric values from the Summary sheet's Metric column (header at row 4, data from row 5 onward).
2. THE Schema_Extractor SHALL use openpyxl in read-only mode to extract the xlsx structure, reusing the approach from `dump_xlsx_schema.py`.
3. THE Schema_Extractor SHALL run as a Python subprocess invoked by the Node.js backend, returning the extracted schema as JSON on stdout.
4. IF the xlsx file cannot be opened or contains no sheets, THEN THE Schema_Extractor SHALL return a JSON error object on stdout and exit with a non-zero exit code.
### Requirement 3: Drift Detection — Breaking Findings
**User Story:** As a compliance analyst, I want the system to detect structural changes that will cause parse failures or data loss, so that I do not upload a report that produces corrupt data.
#### Acceptance Criteria
1. WHEN a Detail_Sheet is missing one or more columns listed in `core_cols` of the Parser_Config, THE Drift_Checker SHALL produce a Breaking_Finding for each missing column, identifying the sheet name and column name.
2. WHEN a sheet name that previously existed as a Detail_Sheet (present in `metric_categories` but not in `skip_sheets`) is absent from the uploaded xlsx, THE Drift_Checker SHALL produce a Breaking_Finding identifying the missing sheet name.
3. THE Drift_Checker SHALL classify all Breaking_Findings with severity `"breaking"`.
### Requirement 4: Drift Detection — Silent-Miss Findings
**User Story:** As a compliance analyst, I want the system to detect when new data in the xlsx will be silently miscategorised or dropped, so that I can update the parser configuration before proceeding.
#### Acceptance Criteria
1. WHEN the Summary sheet contains metric values not present as keys in `metric_categories` of the Parser_Config, THE Drift_Checker SHALL produce a Silent_Miss_Finding for each unknown metric value.
2. WHEN the xlsx contains sheets that are not in `skip_sheets` and whose names do not appear as keys in `metric_categories`, THE Drift_Checker SHALL produce a Silent_Miss_Finding for each unknown sheet, indicating it will be parsed with an 'Other' category.
3. THE Drift_Checker SHALL classify all Silent_Miss_Findings with severity `"silent_miss"`.
### Requirement 5: Drift Detection — Cosmetic Findings
**User Story:** As a compliance analyst, I want to see informational notes about minor schema differences, so that I have full visibility into how the xlsx structure has evolved.
#### Acceptance Criteria
1. WHEN a Detail_Sheet contains columns not present in `core_cols` of the Parser_Config, THE Drift_Checker SHALL produce a Cosmetic_Finding for each new column, noting that the column data will be captured in `extra_json`.
2. WHEN `metric_categories` in the Parser_Config contains metric IDs that do not appear in the Summary sheet's metric values, THE Drift_Checker SHALL produce a Cosmetic_Finding for each stale metric ID.
3. THE Drift_Checker SHALL classify all Cosmetic_Findings with severity `"cosmetic"`.
### Requirement 6: Preview Endpoint Drift Integration
**User Story:** As a developer, I want the preview endpoint to include the drift report in its response, so that the frontend can display drift findings before showing the diff preview.
#### Acceptance Criteria
1. WHEN the Preview_Endpoint processes an uploaded xlsx file, THE Preview_Endpoint SHALL run the Schema_Extractor and Drift_Checker before running the existing parser and diff computation.
2. THE Preview_Endpoint SHALL include a `drift` field in the JSON response containing the Drift_Report with `breaking`, `silent_miss`, and `cosmetic` arrays.
3. WHEN the drift check produces Breaking_Findings, THE Preview_Endpoint SHALL still return a 200 response with the Drift_Report, allowing the frontend to display the findings and block the commit.
4. IF the Schema_Extractor or Drift_Checker fails unexpectedly, THEN THE Preview_Endpoint SHALL proceed with the normal parse and diff flow, returning a `drift` field set to `null` and a `drift_error` field with a descriptive message, so that the upload flow is not blocked by drift check failures.
### Requirement 7: Upload Modal Drift Review Phase
**User Story:** As a compliance analyst, I want to see drift findings in the upload modal after file upload and before the diff preview, so that I can assess schema compatibility before deciding to proceed.
#### Acceptance Criteria
1. WHEN the Preview_Endpoint returns a Drift_Report with one or more findings, THE Upload_Modal SHALL display a drift review phase between the uploading spinner and the diff preview.
2. THE Upload_Modal SHALL display Breaking_Findings with red text and a red left-border accent, using the dashboard danger color (`#EF4444`).
3. THE Upload_Modal SHALL display Silent_Miss_Findings with amber text and an amber left-border accent, using the dashboard warning color (`#F59E0B`).
4. THE Upload_Modal SHALL display Cosmetic_Findings with muted text and a subtle left-border accent, using the dashboard muted text color (`#94A3B8`).
5. WHEN the Drift_Report contains one or more Breaking_Findings, THE Upload_Modal SHALL disable the "Continue to Preview" button and display a message indicating the upload is blocked until the parser configuration is updated.
6. WHEN the Drift_Report contains Silent_Miss_Findings but no Breaking_Findings, THE Upload_Modal SHALL enable the "Continue to Preview" button and display a warning message advising the user to review the findings.
7. WHEN the Drift_Report contains only Cosmetic_Findings, THE Upload_Modal SHALL enable the "Continue to Preview" button without a warning message.
8. WHEN the Drift_Report contains no findings, THE Upload_Modal SHALL skip the drift review phase and proceed directly to the diff preview.
### Requirement 8: Drift Review UI Layout and Interaction
**User Story:** As a compliance analyst, I want the drift findings to be clearly organised and scannable, so that I can quickly understand what changed in the xlsx structure.
#### Acceptance Criteria
1. THE Upload_Modal SHALL group drift findings by severity, displaying Breaking_Findings first, then Silent_Miss_Findings, then Cosmetic_Findings.
2. THE Upload_Modal SHALL display a count badge next to each severity group header showing the number of findings in that group.
3. WHEN a severity group contains more than five findings, THE Upload_Modal SHALL collapse the group to show the first five findings with an expandable "Show N more" toggle.
4. EACH Drift_Finding displayed in the Upload_Modal SHALL include the finding message and the specific value (column name, sheet name, or metric ID) that triggered the finding.
5. THE Upload_Modal SHALL display a "Cancel" button that returns the modal to the idle phase, and a "Continue to Preview" button (when enabled) that advances to the diff preview phase.
6. THE Upload_Modal drift review phase SHALL follow the dashboard's dark theme and monospace typography conventions defined in `DESIGN_SYSTEM.md`.
### Requirement 9: Existing Upload Flow Preservation
**User Story:** As a compliance analyst, I want the existing upload flow to remain intact, so that the drift check is an additive enhancement and does not disrupt the current preview-then-commit workflow.
#### Acceptance Criteria
1. WHEN the user clicks "Continue to Preview" from the drift review phase, THE Upload_Modal SHALL display the same diff preview (recurring, new, resolved counts) and "Confirm Upload" button as the current implementation.
2. THE Preview_Endpoint SHALL continue to return `diff`, `tempFile`, `filename`, `report_date`, and `total_items` fields in the response alongside the new `drift` field.
3. THE commit flow (`POST /api/compliance/commit`) SHALL remain unchanged and SHALL NOT perform any drift checking.
4. WHEN the `drift` field in the preview response is `null` (drift check failed or was skipped), THE Upload_Modal SHALL proceed directly to the diff preview phase as if no drift was detected.

View File

@@ -0,0 +1,154 @@
# Implementation Plan: Compliance Schema Drift Check
## Overview
This plan implements schema drift detection in the compliance upload flow. The work proceeds in layers: first extract the shared config file, then build the Python schema extractor, then the Node.js drift checker, then wire it into the preview endpoint, and finally update the upload modal with the drift-review phase. Property-based tests validate the drift checker's correctness properties using fast-check.
## Tasks
- [x] 1. Create shared parser configuration file and update Python parser
- [x] 1.1 Create `backend/scripts/compliance_config.json` with `metric_categories`, `core_cols`, and `skip_sheets`
- Extract the exact values from the inline dicts `METRIC_CATEGORIES`, `CORE_COLS`, and `SKIP_SHEETS` in `parse_compliance_xlsx.py`
- `metric_categories` is an object mapping metric ID strings to category strings
- `core_cols` is an array of column name strings
- `skip_sheets` is an array of sheet name strings
- _Requirements: 1.1, 1.2_
- [x] 1.2 Modify `backend/scripts/parse_compliance_xlsx.py` to read config from JSON file
- Remove the inline `METRIC_CATEGORIES`, `CORE_COLS`, and `SKIP_SHEETS` definitions
- Load them from `compliance_config.json` (resolved relative to the script's directory)
- If the config file is missing or contains invalid JSON, print a descriptive error to stderr and exit with non-zero code
- Ensure `CORE_COLS` is converted to a set after loading from the JSON array
- _Requirements: 1.3, 1.4_
- [ ]* 1.3 Write unit tests for Python parser config loading
- Test that parser loads config correctly and produces same output as before
- Test that missing config file causes non-zero exit with descriptive stderr
- Test that invalid JSON in config file causes non-zero exit with descriptive stderr
- _Requirements: 1.3, 1.4_
- [x] 2. Create Python schema extractor script
- [x] 2.1 Create `backend/scripts/extract_xlsx_schema.py`
- Accept file path as CLI argument
- Use openpyxl in read-only mode to extract: sheet names, first-row column headers per sheet, and unique metric values from the Summary sheet (header at row 4, data from row 5 onward)
- Output JSON to stdout with shape `{ "sheets": [{ "name", "columns", "metric_values?" }] }`
- On error, return `{ "error": "..." }` on stdout and exit with non-zero code
- Reuse the approach from `dump_xlsx_schema.py` for Summary sheet metric extraction
- _Requirements: 2.1, 2.2, 2.3, 2.4_
- [ ]* 2.2 Write unit tests for schema extractor
- Test that valid xlsx produces correct schema JSON
- Test that missing file returns error JSON and non-zero exit
- Test that file with no sheets returns error JSON
- _Requirements: 2.1, 2.4_
- [x] 3. Implement Node.js drift checker module
- [x] 3.1 Create `backend/helpers/driftChecker.js` with `compareSchemaToDrift(schema, config)` function
- Implement breaking rules: missing core column in detail sheets, missing detail sheet (in `metric_categories` but not `skip_sheets` and absent from xlsx)
- Implement silent-miss rules: unknown metric value in Summary not in `metric_categories`, unknown sheet not in `skip_sheets` and not in `metric_categories`
- Implement cosmetic rules: new column in detail sheet not in `core_cols`, stale metric in `metric_categories` not in Summary metric values
- Each finding has shape `{ severity, message, value, sheet }` (sheet is null when not applicable)
- Return `{ breaking: [], silent_miss: [], cosmetic: [] }`
- Export `compareSchemaToDrift` and a `loadConfig(configPath)` function that reads and validates `compliance_config.json`
- Config loader validates: file exists, parses as JSON, contains `metric_categories` (object), `core_cols` (array), `skip_sheets` (array)
- _Requirements: 3.1, 3.2, 3.3, 4.1, 4.2, 4.3, 5.1, 5.2, 5.3, 1.5, 1.6_
- [ ] 3.2 Write property test: Breaking drift completeness (Property 1)
- **Property 1: Breaking drift completeness**
- For any generated schema and config, the set of breaking findings equals exactly the union of missing-core-column findings and missing-detail-sheet findings — no more, no fewer
- Use fast-check with arbitrary generators for schema and config objects
- Minimum 100 iterations
- **Validates: Requirements 3.1, 3.2, 3.3**
- [ ]* 3.3 Write property test: Silent-miss drift completeness (Property 2)
- **Property 2: Silent-miss drift completeness**
- For any generated schema and config, the set of silent-miss findings equals exactly the union of unknown-metric findings and unknown-sheet findings
- Use fast-check with arbitrary generators for schema and config objects
- Minimum 100 iterations
- **Validates: Requirements 4.1, 4.2, 4.3**
- [ ]* 3.4 Write property test: Cosmetic drift completeness (Property 3)
- **Property 3: Cosmetic drift completeness**
- For any generated schema and config, the set of cosmetic findings equals exactly the union of new-column findings and stale-metric findings
- Use fast-check with arbitrary generators for schema and config objects
- Minimum 100 iterations
- **Validates: Requirements 5.1, 5.2, 5.3**
- [ ]* 3.5 Write property test: Drift severity ordering (Property 4)
- **Property 4: Drift severity ordering**
- For any drift report, the grouped output always returns all breaking findings first, then all silent-miss, then all cosmetic
- Use fast-check to generate mixed drift reports and verify ordering
- Minimum 100 iterations
- **Validates: Requirements 8.1**
- [ ]* 3.6 Write unit tests for drift checker and config loader
- Test each drift rule individually with hand-crafted schema/config pairs
- Test config loader with valid file, missing file, invalid JSON, and missing required keys
- Test that perfectly aligned schema and config produce zero findings
- Test edge cases: empty metric_categories, empty core_cols, empty skip_sheets
- _Requirements: 3.1, 3.2, 3.3, 4.1, 4.2, 4.3, 5.1, 5.2, 5.3, 1.5, 1.6_
- [x] 4. Checkpoint — Verify backend modules
- Ensure all tests pass, ask the user if questions arise.
- [x] 5. Integrate drift check into preview endpoint
- [x] 5.1 Modify `backend/routes/compliance.js` to add drift checking in `POST /preview`
- After receiving the uploaded file, spawn `extract_xlsx_schema.py` as a Python subprocess to get the xlsx schema
- Read `compliance_config.json` using the `loadConfig()` function from `driftChecker.js`
- Call `compareSchemaToDrift(schema, config)` to produce the drift report
- Proceed with the existing `parseXlsx()` call and `computeDiff()`
- Include `drift` (DriftReport object) and `drift_error` (string or null) in the response
- If schema extraction or drift check throws, set `drift: null` and `drift_error: <message>`, then continue with normal flow
- If config file is missing or invalid, return 500 with descriptive message
- Preserve all existing response fields: `diff`, `tempFile`, `filename`, `report_date`, `total_items`
- _Requirements: 6.1, 6.2, 6.3, 6.4, 9.2_
- [ ]* 5.2 Write integration tests for preview endpoint drift behavior
- Test that preview response includes `drift` field alongside existing `diff` data
- Test that breaking drift still returns 200 (not an error)
- Test graceful degradation when drift check fails (`drift: null`, `drift_error` present)
- Test 500 response when config file is missing
- Test that commit endpoint is unchanged and does not reference drift
- _Requirements: 6.1, 6.2, 6.3, 6.4, 9.3_
- [x] 6. Update upload modal with drift-review phase
- [x] 6.1 Modify `frontend/src/components/pages/ComplianceUploadModal.js` to add drift-review phase
- Add `drift-review` phase between `uploading` and `preview` in the phase flow
- After upload response, check if `drift` is non-null and has findings — if so, enter `drift-review`; otherwise skip to `preview`
- When `drift` is `null` (drift check failed), skip drift-review and go straight to preview
- Display findings grouped by severity: breaking first, then silent-miss, then cosmetic
- Each severity group has a header with label and count badge
- Groups with more than 5 findings collapse with a "Show N more" toggle
- Each finding shows the message and the triggering value
- Breaking findings: red text (`#EF4444`), red left-border accent
- Silent-miss findings: amber text (`#F59E0B`), amber left-border accent
- Cosmetic findings: muted text (`#94A3B8`), subtle left-border accent
- "Cancel" button returns to idle phase; "Continue to Preview" button advances to diff preview
- "Continue to Preview" disabled when breaking findings exist, with a message explaining the block
- When no breaking findings but silent-miss exist, show warning message and enable "Continue to Preview"
- When only cosmetic findings, enable "Continue to Preview" without warning
- Follow dashboard dark theme and monospace typography from `DESIGN_SYSTEM.md`
- Preserve existing diff preview, commit flow, done, and error phases unchanged
- _Requirements: 7.1, 7.2, 7.3, 7.4, 7.5, 7.6, 7.7, 7.8, 8.1, 8.2, 8.3, 8.4, 8.5, 8.6, 9.1, 9.4_
- [ ]* 6.2 Write unit tests for upload modal drift-review phase
- Test drift-review phase renders when findings exist
- Test "Continue to Preview" button disabled when breaking findings present
- Test "Continue to Preview" button enabled when no breaking findings
- Test groups collapse at 5+ findings with correct "Show N more" count
- Test cancel returns to idle phase
- Test skips drift-review when drift is null or has no findings
- _Requirements: 7.1, 7.5, 7.6, 7.7, 7.8, 8.3_
- [x] 7. Final checkpoint — Ensure all tests pass
- Ensure all tests pass, ask the user if questions arise.
## Notes
- Tasks marked with `*` are optional and can be skipped for faster MVP
- Each task references specific requirements for traceability
- Checkpoints ensure incremental validation
- Property tests (3.23.5) validate the four correctness properties from the design using fast-check
- Unit tests validate specific examples and edge cases
- The Python parser modification (1.2) must produce identical output to the current inline-dict version — this is a refactor, not a behavior change
- The commit endpoint (`POST /api/compliance/commit`) is intentionally unchanged

View File

@@ -0,0 +1 @@
{"specId": "acff93bd-0045-4fcd-b948-cc52c7cc5ec6", "workflowType": "requirements-first", "specType": "feature"}

View File

@@ -0,0 +1,362 @@
# Design Document: FP Attachment Library
## Overview
This feature extends the FP submission workflow to let users attach documents from the existing CVE document library (the `documents` table) alongside traditional local file uploads. The core change is a new **Attachment Source Picker** component shared by both the create and edit modals, backed by a new **Document Search API** endpoint. On submission, the backend reads library files from disk and sends them to the Ivanti API identically to local uploads.
The design prioritizes minimal disruption to the existing codebase: one new GET endpoint, modifications to two existing POST endpoints, and a shared React component inserted into both modals.
```mermaid
flowchart LR
subgraph Frontend
A[FpWorkflowModal] --> C[AttachmentSourcePicker]
B[FpEditModal] --> C
C -->|local files| D[File objects in state]
C -->|library docs| E[Document IDs in state]
end
subgraph Backend
F[GET /api/documents/search] -->|SQLite| G[(documents table)]
H[POST /api/ivanti/fp-workflow] -->|reads disk| I[uploads/]
H -->|multipart| J[Ivanti API]
K[POST .../attachments] -->|reads disk| I
K -->|multipart| J
end
C -->|fetch| F
A -->|FormData + libraryDocIds| H
B -->|FormData + libraryDocIds| K
```
## Architecture
### Request Flow
1. User opens FP Create or Edit modal
2. Attachment Source Picker renders with two mode tabs: **Local Upload** and **Library**
3. In Library mode, user types a search query → frontend debounces 300ms → calls `GET /api/documents/search?q=...`
4. User selects library documents and/or local files
5. On submit:
- Frontend sends `FormData` with local files in `attachments` field and library document IDs in a `libraryDocIds` JSON field
- Backend parses both, looks up library documents in the `documents` table, reads their files from disk
- Backend combines local file buffers and library file buffers into a single `files` array
- Backend calls `ivantiFormPost` with all files in one multipart request
- Backend records results in `attachment_results_json` with a `source` field (`"local"` or `"library"`)
### Key Design Decisions
1. **Single shared component**: The `AttachmentSourcePicker` is used in both modals to avoid duplication. It receives callbacks for state management and renders the mode toggle, search UI, and unified attachment list.
2. **Library doc IDs sent as JSON field**: Rather than changing the multipart structure, library document IDs are sent as a JSON-encoded string field (`libraryDocIds`) alongside the existing `attachments` file field. This keeps the existing local upload path unchanged.
3. **Backend reads files from disk**: Library documents are read from disk using `fs.readFileSync(file_path)` at submission time. This avoids storing duplicate file buffers and keeps the Ivanti API call identical for both sources.
4. **No new database tables**: The feature uses the existing `documents` table for search and the existing `ivanti_fp_submissions` table for recording results. The only schema-level change is adding a `source` field to the JSON objects in `attachment_results_json`.
## Components and Interfaces
### New API Endpoint
#### `GET /api/documents/search`
Added to `backend/routes/ivantiFpWorkflow.js` (or as a new route in `server.js` alongside existing document routes).
| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `q` | query string | No | Search term matched against `name`, `cve_id`, `vendor` using SQL `LIKE` |
**Response** (200):
```json
[
{
"id": 42,
"cve_id": "CVE-2024-1234",
"vendor": "Microsoft",
"name": "advisory-2024-1234.pdf",
"type": "Advisory",
"file_size": "245760",
"mime_type": "application/pdf",
"uploaded_at": "2024-11-15T10:30:00.000Z"
}
]
```
**Implementation**:
```javascript
// Pseudocode
router.get('/documents/search', requireAuth(db), (req, res) => {
const q = (req.query.q || '').trim();
let sql, params;
if (q) {
const like = `%${q}%`;
sql = `SELECT id, cve_id, vendor, name, type, file_size, mime_type, uploaded_at
FROM documents
WHERE name LIKE ? OR cve_id LIKE ? OR vendor LIKE ?
ORDER BY uploaded_at DESC
LIMIT 50`;
params = [like, like, like];
} else {
sql = `SELECT id, cve_id, vendor, name, type, file_size, mime_type, uploaded_at
FROM documents
ORDER BY uploaded_at DESC
LIMIT 50`;
params = [];
}
db.all(sql, params, (err, rows) => {
if (err) return res.status(500).json({ error: 'Database error.' });
res.json(rows || []);
});
});
```
### Modified API Endpoints
#### `POST /api/ivanti/fp-workflow` (create)
**New field in multipart body**:
- `libraryDocIds` — JSON-encoded array of document IDs (integers) from the `documents` table
**Backend changes**:
1. Parse `libraryDocIds` from `req.body` (default to `[]`)
2. Validate each ID is a positive integer
3. Query `documents` table for matching records
4. Validate all IDs were found (400 if any missing)
5. Read each file from disk using `file_path` (error if file missing on disk)
6. Combine local file buffers (`req.files`) and library file buffers into a single `formFiles` array
7. Pass combined array to `ivantiFormPost`
8. Record results with `source: "local"` or `source: "library"` in `attachment_results_json`
#### `POST /api/ivanti/fp-workflow/submissions/:id/attachments` (edit)
Same changes as the create endpoint — accepts `libraryDocIds` alongside `attachments` files.
### New Frontend Component
#### `AttachmentSourcePicker`
Defined inline in `ReportingPage.js` (consistent with existing component patterns).
**Props**:
| Prop | Type | Description |
|------|------|-------------|
| `files` | `File[]` | Current local file attachments |
| `onFilesChange` | `(files: File[]) => void` | Callback when local files change |
| `libraryDocs` | `object[]` | Current selected library documents |
| `onLibraryDocsChange` | `(docs: object[]) => void` | Callback when library selections change |
| `disabled` | `boolean` | Disables all interactions (for approved submissions) |
**Internal state**:
- `mode``'local'` or `'library'` (default: `'local'`)
- `searchQuery` — current search input value
- `searchResults` — array of document records from API
- `searching` — loading state for search
**Behavior**:
- Mode toggle renders two tab-style buttons at the top
- Local mode shows the existing drag-and-drop zone
- Library mode shows a search input + scrollable results list
- Search is debounced at 300ms using `setTimeout`/`clearTimeout`
- Selected library docs are tracked by `id` to prevent duplicates
- Already-selected docs appear disabled/checked in search results
- Unified attachment list below shows all attachments with source badges
- Each attachment row shows: source badge, filename, file size, remove button
- Library attachment rows additionally show CVE ID and vendor
```mermaid
stateDiagram-v2
[*] --> LocalMode
LocalMode --> LibraryMode: Click "Library" tab
LibraryMode --> LocalMode: Click "Local Upload" tab
state LibraryMode {
[*] --> Idle
Idle --> Searching: User types (after 300ms debounce)
Searching --> ResultsShown: API responds
ResultsShown --> Searching: User types again
ResultsShown --> DocSelected: User clicks result
DocSelected --> ResultsShown: Doc added to list
}
```
### Integration Points
#### FpWorkflowModal (create)
- Replace the current file upload section with `<AttachmentSourcePicker>`
- Add `libraryDocs` state array alongside existing `files` state
- On submit, append `libraryDocIds` as JSON string to `FormData`:
```javascript
formData.append('libraryDocIds', JSON.stringify(libraryDocs.map(d => d.id)));
```
#### FpEditModal (edit — attachments tab)
- Replace the static "upload in Ivanti" message with `<AttachmentSourcePicker>`
- Keep existing attachment display above the picker
- On submit, build `FormData` with both local files and `libraryDocIds`
- Disable picker when `lifecycle_status === 'approved'`
## Data Models
### Existing: `documents` table (no changes)
| Column | Type | Description |
|--------|------|-------------|
| `id` | INTEGER PK | Auto-increment ID |
| `cve_id` | VARCHAR(20) | Associated CVE identifier |
| `vendor` | VARCHAR(100) | Vendor name |
| `name` | VARCHAR(255) | Original filename |
| `type` | VARCHAR(50) | Document type (Advisory, Patch, etc.) |
| `file_path` | VARCHAR(500) | Relative path under `uploads/` |
| `file_size` | VARCHAR(20) | Human-readable or byte size |
| `mime_type` | VARCHAR(100) | MIME type |
| `uploaded_at` | TIMESTAMP | Upload timestamp |
| `notes` | TEXT | Optional notes |
### Modified: `attachment_results_json` shape
Current format per entry:
```json
{ "filename": "report.pdf", "success": true }
```
New format per entry:
```json
{ "filename": "report.pdf", "success": true, "source": "local" }
```
or:
```json
{ "filename": "advisory-2024.pdf", "success": true, "source": "library", "documentId": 42 }
```
The `source` field is added to distinguish attachment origins. The `documentId` field is included for library documents to enable traceability. Existing records without a `source` field are treated as `"local"` by the frontend for backward compatibility.
### Frontend State: Library Document Selection
```javascript
// Shape of a selected library document in component state
{
id: 42, // documents.id
cve_id: "CVE-2024-1234",
vendor: "Microsoft",
name: "advisory-2024-1234.pdf",
file_size: "245760",
mime_type: "application/pdf"
}
```
## Correctness Properties
*A property is a characteristic or behavior that should hold true across all valid executions of a system — essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
### Property 1: Search results match query
*For any* non-empty search query string `q` and any set of documents in the database, every document returned by the Document Search API SHALL have `q` as a case-insensitive substring of its `name`, `cve_id`, or `vendor` field.
**Validates: Requirements 1.1**
### Property 2: Default results are ordered by recency
*For any* set of documents in the database, when the Document Search API is called with no query, the returned results SHALL be ordered by `uploaded_at` descending (most recent first).
**Validates: Requirements 1.2**
### Property 3: Result set size is bounded
*For any* search query (including empty), the Document Search API SHALL return at most 50 records.
**Validates: Requirements 1.3**
### Property 4: Library document ID validation rejects non-positive-integers
*For any* value that is not a positive integer (e.g., negative numbers, zero, floats, non-numeric strings, null), the backend validation SHALL reject it as an invalid library document ID.
**Validates: Requirements 4.5**
### Property 5: Combined attachments are all sent to Ivanti
*For any* combination of local file uploads and library document references in a submission, the backend SHALL produce a files array for the Ivanti API call whose length equals the count of local files plus the count of valid library documents, and each library file buffer SHALL match the content read from the document's `file_path`.
**Validates: Requirements 4.1, 4.2**
### Property 6: Attachment results record source and filename correctly
*For any* mix of local and library attachments processed by the backend, each entry in `attachment_results_json` SHALL have a `source` field of `"local"` or `"library"`, and for library entries the `filename` SHALL equal the `name` field from the corresponding `documents` record.
**Validates: Requirements 4.6, 4.7**
### Property 7: No duplicate library documents in attachment list
*For any* sequence of library document selections applied to the Attachment Source Picker, the resulting attachment list SHALL contain at most one entry per document `id`.
**Validates: Requirements 5.1**
### Property 8: Attachment list displays all required fields per type
*For any* attachment in the list (local or library), the rendered display SHALL include the filename, file size, source indicator, and a remove action. *For any* library attachment, the display SHALL additionally include the CVE ID and vendor name.
**Validates: Requirements 6.1, 6.2, 6.3, 6.4**
## Error Handling
| Scenario | Behavior |
|----------|----------|
| Document search DB error | Return 500 with `{ error: 'Database error.' }` |
| Invalid `libraryDocIds` JSON | Return 400 with `{ error: 'libraryDocIds must be a valid JSON array.' }` |
| Non-positive-integer document ID | Return 400 identifying the invalid ID |
| Document ID not found in DB | Return 400 identifying the missing document ID |
| Library file missing from disk | Log warning, skip that attachment, include `{ success: false, error: 'File not found on disk' }` in attachment results, continue with remaining files |
| Ivanti API failure for attachment upload | Record `{ success: false, error: '...' }` per file in results, return partial success if some files succeeded |
| Network error calling Document Search API (frontend) | Show inline error message in search results area, allow retry |
| Empty search results | Show "No documents found" message with suggestion to refine search |
| Unauthenticated request to search endpoint | Return 401 (handled by existing `requireAuth` middleware) |
### Backward Compatibility
- Existing `attachment_results_json` entries without a `source` field are treated as `"local"` by the frontend
- The `libraryDocIds` field is optional in both create and edit endpoints — omitting it preserves current behavior exactly
- No database migrations required — the `documents` table already exists
## Testing Strategy
### Property-Based Tests (fast-check)
The project uses plain JavaScript with React 19. Property-based tests will use [fast-check](https://github.com/dubzzz/fast-check) with the existing `react-scripts test` runner (Jest).
Each property test runs a minimum of 100 iterations and is tagged with a comment referencing its design property.
**Configuration**: `npm install --save-dev fast-check` in the frontend package (or backend if testing backend logic separately).
**Properties to test**:
- Property 1: Search relevance — generate random documents and queries, verify all results match
- Property 2: Default ordering — generate random documents, verify descending order
- Property 3: Result limit — generate >50 documents, verify max 50 returned
- Property 4: ID validation — generate random non-positive-integer values, verify rejection
- Property 5: Combined attachment handling — generate random mixes, verify file array correctness
- Property 6: Result record shape — generate random mixes, verify source and filename fields
- Property 7: Duplicate prevention — generate random selection sequences, verify uniqueness
- Property 8: Display completeness — generate random attachment lists, verify rendered fields
**Tag format**: `// Feature: fp-attachment-library, Property N: <property text>`
### Unit Tests (example-based)
- Authentication guard on search endpoint (1.5)
- DB error handling returns 500 (1.6)
- Mode toggle renders correctly in both modals (2.1, 2.2, 2.3)
- Debounce behavior with fake timers (2.4)
- Library doc selection adds to list with indicator (2.5)
- Remove works for both types (2.6)
- Mixed attachments in same submission (2.7)
- Library doc displays name, size, CVE ID (2.8)
- Edit modal replaces static message (3.1)
- Existing attachments shown above picker (3.4)
- Approved submission disables picker (3.5)
- Missing file on disk returns error (4.3)
- Invalid document ID returns 400 (4.4)
- Already-selected docs shown as disabled (5.2)
- Removed doc re-enabled in results (5.3)
### Integration Tests
- End-to-end create flow with mixed local + library attachments
- End-to-end edit flow adding library attachments to existing submission
- Search endpoint with real SQLite database

View File

@@ -0,0 +1,94 @@
# Requirements Document
## Introduction
The FP Attachment Library feature extends the FP submission workflow (both create and edit flows) to allow users to attach existing documents from the CVE document library stored in the `documents` table, in addition to the current local file upload capability. This eliminates the need to re-download and re-upload files that already exist in the system, streamlining the attachment workflow for FP submissions.
## Glossary
- **Dashboard**: The STEAM Security Dashboard application
- **FP_Create_Modal**: The FpWorkflowModal component used to create new FP workflow submissions (in ReportingPage.js)
- **FP_Edit_Modal**: The FpEditModal component used to edit existing FP workflow submissions (in ReportingPage.js)
- **Document_Library**: The collection of files stored in the `documents` table, organized by CVE ID and vendor, with files on disk under `uploads/{cve_id}/{vendor}/`
- **Attachment_Source_Picker**: The UI component that lets users choose between uploading a local file or selecting an existing document from the Document_Library
- **Document_Search_API**: The backend endpoint that searches and returns documents from the Document_Library for selection
- **Library_Document**: A document record from the `documents` table, containing id, cve_id, vendor, name, type, file_path, file_size, mime_type, uploaded_at, and notes
- **Ivanti_API**: The external Ivanti/RiskSense API that receives FP workflow submissions and file attachments
## Requirements
### Requirement 1: Document Search API
**User Story:** As an editor, I want to search the document library from within the FP workflow, so that I can find and attach existing documents without leaving the modal.
#### Acceptance Criteria
1. WHEN a search query is provided, THE Document_Search_API SHALL return Library_Document records whose name, cve_id, or vendor fields contain the query string
2. WHEN no search query is provided, THE Document_Search_API SHALL return the most recent Library_Document records ordered by uploaded_at descending
3. THE Document_Search_API SHALL limit results to a maximum of 50 records per request
4. THE Document_Search_API SHALL return each Library_Document with its id, cve_id, vendor, name, type, file_size, mime_type, and uploaded_at fields
5. THE Document_Search_API SHALL require an authenticated session before returning results
6. IF the database query fails, THEN THE Document_Search_API SHALL return an error response with a 500 status code
### Requirement 2: Attachment Source Picker in FP Create Modal
**User Story:** As an editor, I want to choose between uploading a local file or selecting a document from the library when creating an FP submission, so that I can attach evidence without re-uploading files that already exist in the system.
#### Acceptance Criteria
1. THE FP_Create_Modal SHALL display the Attachment_Source_Picker with two modes: local file upload and library document selection
2. WHEN the user selects local file upload mode, THE FP_Create_Modal SHALL display the existing drag-and-drop zone and file picker
3. WHEN the user selects library document selection mode, THE FP_Create_Modal SHALL display a search input and a scrollable list of matching Library_Document records
4. WHEN the user types in the library search input, THE FP_Create_Modal SHALL query the Document_Search_API and display matching results within 300 milliseconds of the last keystroke (debounced)
5. WHEN the user selects a Library_Document from the search results, THE FP_Create_Modal SHALL add the document to the attachment list with a visual indicator distinguishing it from locally uploaded files
6. THE FP_Create_Modal SHALL allow the user to remove any attachment from the list, whether it is a local file or a Library_Document
7. THE FP_Create_Modal SHALL allow mixing local file uploads and Library_Document selections in the same submission
8. THE FP_Create_Modal SHALL display the file name, file size, and CVE ID for each selected Library_Document in the attachment list
### Requirement 3: Attachment Source Picker in FP Edit Modal
**User Story:** As an editor, I want to attach existing library documents to an FP submission I am editing, so that I can add supporting evidence after the initial submission without re-uploading files.
#### Acceptance Criteria
1. THE FP_Edit_Modal SHALL replace the static "upload in Ivanti" message on the attachments tab with the Attachment_Source_Picker
2. WHEN the user selects library document selection mode, THE FP_Edit_Modal SHALL display a search input and a scrollable list of matching Library_Document records
3. WHEN the user selects local file upload mode, THE FP_Edit_Modal SHALL display a drag-and-drop zone and file picker for local files
4. THE FP_Edit_Modal SHALL continue to display existing attachments from the initial submission above the Attachment_Source_Picker
5. WHILE the submission lifecycle_status is "approved", THE FP_Edit_Modal SHALL disable the Attachment_Source_Picker and prevent adding new attachments
6. THE FP_Edit_Modal SHALL allow the user to upload or attach selected documents by clicking a submit action button
### Requirement 4: Backend Handling of Library Document Attachments
**User Story:** As an editor, I want library documents to be sent to the Ivanti API the same way as local uploads, so that all attachments appear correctly on the Ivanti workflow.
#### Acceptance Criteria
1. WHEN the FP submission includes Library_Document references, THE Dashboard backend SHALL read the referenced files from disk using the file_path stored in the documents table
2. WHEN the FP submission includes both local files and Library_Document references, THE Dashboard backend SHALL send all attachments to the Ivanti_API in a single multipart request
3. IF a referenced Library_Document file_path does not exist on disk, THEN THE Dashboard backend SHALL return an error identifying the missing file and skip that attachment
4. IF a referenced Library_Document id does not exist in the documents table, THEN THE Dashboard backend SHALL return a 400 error identifying the invalid document ID
5. THE Dashboard backend SHALL validate that each referenced Library_Document id is a positive integer before querying the database
6. THE Dashboard backend SHALL include Library_Document attachments in the attachment_results_json field of the submission record, with a source indicator distinguishing them from local uploads
7. WHEN recording attachment results, THE Dashboard backend SHALL store the original document name from the Library_Document record as the filename
### Requirement 5: Duplicate Attachment Prevention
**User Story:** As an editor, I want the system to prevent me from attaching the same library document twice, so that I do not create redundant attachments on the Ivanti workflow.
#### Acceptance Criteria
1. WHEN the user selects a Library_Document that is already in the attachment list, THE Attachment_Source_Picker SHALL not add a duplicate entry
2. THE Attachment_Source_Picker SHALL visually indicate Library_Document records that are already attached by showing them as disabled or checked in the search results
3. WHEN the user removes a previously selected Library_Document from the attachment list, THE Attachment_Source_Picker SHALL re-enable that document in the search results
### Requirement 6: Attachment List Display
**User Story:** As an editor, I want to clearly distinguish between local uploads and library documents in the attachment list, so that I know the source of each attachment before submitting.
#### Acceptance Criteria
1. THE Attachment_Source_Picker SHALL display a source badge or icon next to each attachment indicating whether it is a "Local Upload" or a "Library Document"
2. THE Attachment_Source_Picker SHALL display the file name and file size for all attachments regardless of source
3. WHEN displaying a Library_Document attachment, THE Attachment_Source_Picker SHALL also display the associated CVE ID and vendor name
4. THE Attachment_Source_Picker SHALL display a remove button for each attachment in the list

View File

@@ -0,0 +1,95 @@
# Implementation Plan: FP Attachment Library
## Overview
This plan implements the FP Attachment Library feature, which allows users to attach existing CVE document library files to FP workflow submissions alongside traditional local file uploads. The implementation adds a new Document Search API endpoint, modifies two existing backend endpoints to handle library document references, and creates a shared AttachmentSourcePicker component used in both the create and edit modals.
## Tasks
- [x] 1. Add Document Search API endpoint
- [x] 1.1 Add `GET /api/documents/search` route in `backend/routes/ivantiFpWorkflow.js`
- Add a new GET route handler for `/documents/search` inside `createIvantiFpWorkflowRouter`
- Accept optional `q` query parameter for search term
- When `q` is provided, query the `documents` table with `LIKE` matching against `name`, `cve_id`, and `vendor` columns (case-insensitive)
- When `q` is empty or missing, return the most recent documents ordered by `uploaded_at DESC`
- Limit results to 50 records maximum
- Return each record with fields: `id`, `cve_id`, `vendor`, `name`, `type`, `file_size`, `mime_type`, `uploaded_at`
- Protect with `requireAuth(db)` middleware
- Return 500 with `{ error: 'Database error.' }` on DB failure
- _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6_
- [x] 2. Modify backend to handle library document attachments on create
- [x] 2.1 Update `POST /api/ivanti/fp-workflow` in `backend/routes/ivantiFpWorkflow.js` to accept `libraryDocIds`
- Parse `libraryDocIds` from `req.body` as a JSON-encoded array (default to `[]` if absent)
- Return 400 if `libraryDocIds` is not valid JSON
- Validate each ID is a positive integer; return 400 identifying any invalid ID
- Query the `documents` table for all referenced IDs; return 400 if any ID is not found
- Read each library file from disk using `fs.readFileSync(file_path)`; if a file is missing on disk, log a warning and include `{ success: false, error: 'File not found on disk', source: 'library', documentId: id }` in attachment results, skip that file
- Combine local file buffers (`req.files`) and library file buffers into a single `formFiles` array passed to `ivantiFormPost`
- Record attachment results with `source: "local"` for uploaded files and `source: "library"` plus `documentId` for library files
- Use the `name` field from the `documents` record as the `filename` in attachment results for library files
- _Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.7_
- [x] 3. Modify backend to handle library document attachments on edit
- [x] 3.1 Update `POST /api/ivanti/fp-workflow/submissions/:id/attachments` in `backend/routes/ivantiFpWorkflow.js` to accept `libraryDocIds`
- Apply the same `libraryDocIds` parsing, validation, disk-read, and combined upload logic as task 2.1
- Combine local file buffers and library file buffers into a single `formFiles` array for the Ivanti API call
- Record attachment results with `source` and `documentId` fields matching the create endpoint behavior
- _Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.7_
- [x] 4. Checkpoint — Verify backend changes
- Ensure all backend changes are syntactically correct and consistent with existing patterns. Ask the user if questions arise.
- [x] 5. Create AttachmentSourcePicker component
- [x] 5.1 Implement `AttachmentSourcePicker` inline in `frontend/src/components/pages/ReportingPage.js`
- Define the component above `FpWorkflowModal` in the file
- Accept props: `files`, `onFilesChange`, `libraryDocs`, `onLibraryDocsChange`, `disabled`
- Implement a mode toggle with two tab-style buttons: "Local Upload" and "Library" (default to "Local Upload")
- In Local Upload mode, render the existing drag-and-drop zone with file input, file validation (extension + size), and file list
- In Library mode, render a search input that queries `GET /api/documents/search?q=...` with 300ms debounce using `setTimeout`/`clearTimeout`
- Display search results in a scrollable list showing document name, CVE ID, vendor, and file size
- Show already-selected library documents as disabled/checked in search results to prevent duplicates
- When a search result is clicked, add it to `libraryDocs` via `onLibraryDocsChange` (skip if already selected by `id`)
- When a library doc is removed from the attachment list, re-enable it in search results
- Render a unified attachment list below the mode-specific UI showing all attachments (local + library)
- Each attachment row displays: source badge ("Local" or "Library"), filename, file size, and a remove button (Trash2 icon)
- Library attachment rows additionally display CVE ID and vendor name
- Disable all interactions when `disabled` prop is true
- Style consistently with existing modal components using inline style objects, monospace font, dark theme colors from DESIGN_SYSTEM.md
- Handle network errors on search by showing an inline error message in the results area
- Show "No documents found" when search returns empty results
- _Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 5.1, 5.2, 5.3, 6.1, 6.2, 6.3, 6.4_
- [x] 6. Integrate AttachmentSourcePicker into FpWorkflowModal (create flow)
- [x] 6.1 Replace the file upload section in `FpWorkflowModal` with `AttachmentSourcePicker`
- Add `libraryDocs` state (`useState([])`) alongside existing `files` state
- Reset `libraryDocs` to `[]` when modal opens (in the existing `useEffect` on `open`)
- Replace the current drag-and-drop zone and file list section with `<AttachmentSourcePicker>` passing `files`, `setFiles`, `libraryDocs`, `setLibraryDocs`, and `disabled={submitting}`
- Remove the inline `addFiles`, `removeFile`, `handleDrop`, `handleDragOver` functions and `fileInputRef`/`dropRef` refs (these are now handled inside AttachmentSourcePicker)
- On submit, append `libraryDocIds` as a JSON string to the FormData: `formData.append('libraryDocIds', JSON.stringify(libraryDocs.map(d => d.id)))`
- Update the progress message to reflect combined attachment count
- Update the result view to show source badges on attachment results (use `source` field, default to `"local"` for backward compatibility)
- _Requirements: 2.1, 2.2, 2.3, 2.5, 2.6, 2.7_
- [x] 7. Integrate AttachmentSourcePicker into FpEditModal (edit flow)
- [x] 7.1 Replace the static "upload in Ivanti" message on the attachments tab with `AttachmentSourcePicker`
- Add `libraryDocs` state (`useState([])`) alongside existing `files` state
- Reset `libraryDocs` to `[]` when submission changes (in the existing `useEffect` on `submission`)
- Keep the existing attachment display section (showing attachments from initial submission) above the picker
- Render `<AttachmentSourcePicker>` below existing attachments, passing `files`, `setFiles`, `libraryDocs`, `setLibraryDocs`, and `disabled={isApproved}`
- Update `handleUploadAttachments` to build FormData with both local files and `libraryDocIds` JSON field
- Enable the upload button when either `files.length > 0` or `libraryDocs.length > 0`
- Disable the picker when `lifecycle_status === 'approved'`
- _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6_
- [x] 8. Final checkpoint — Verify all changes
- Ensure all changes are complete and consistent across backend and frontend. Ensure no hanging or orphaned code. Ask the user if questions arise.
## Notes
- No testing tasks included per user request — testing will be done on the dev server
- The project uses plain JavaScript (no TypeScript) throughout
- All frontend styling uses inline style objects consistent with the existing dark theme design system
- The `documents` table already exists — no database migrations are needed
- The `libraryDocIds` field is optional in both endpoints, preserving full backward compatibility
- Existing `attachment_results_json` entries without a `source` field are treated as `"local"` by the frontend

View File

@@ -0,0 +1 @@
{"specId": "a7e2c1f8-9b34-4d6a-b5e0-8f1c3a2d7e90", "workflowType": "requirements-first", "specType": "feature"}

View File

@@ -0,0 +1,428 @@
# Design Document: FP Submission Editing
## Overview
This feature extends the existing FP workflow submission system to support viewing, editing, and resubmitting False Positive submissions. It adds lifecycle status tracking, an edit modal triggered from clickable workflow badges in the Reporting Table and from a submissions list in the Queue Panel, backend endpoints that proxy update/map/attach operations to the Ivanti API, and a submission history audit trail.
The design builds on the existing `ivantiFpWorkflow.js` route, `FpWorkflowModal` component, and `ivanti_fp_submissions` table. It follows the same conventions: factory-pattern Express routes, inline React components with the dark tactical theme, Multer for file uploads, and the `ivantiFormPost()` / `ivantiPost()` helpers for Ivanti API calls.
Key Ivanti API endpoints used for editing:
- `POST /workflowBatch/falsePositive/update` — update workflow metadata
- `POST /workflowBatch/falsePositive/{uuid}/map` — add findings to existing workflow
- `POST /workflowBatch/falsePositive/{uuid}/attach` — upload additional attachments
## Architecture
```mermaid
sequenceDiagram
participant U as User
participant FE as React Frontend
participant BE as Express Backend
participant IV as Ivanti API
participant DB as SQLite
Note over U,FE: Entry Point A: Clickable Workflow Badge
U->>FE: Click Reworked/Rejected/Expired badge in Reporting Table
FE->>FE: Look up FP_Submission by workflow batch ID
FE->>FE: Open FpEditModal pre-populated with submission data
Note over U,FE: Entry Point B: Queue Panel Submissions List
U->>FE: Click submission in Queue Panel submissions list
FE->>FE: Open FpEditModal pre-populated with submission data
Note over U,DB: Load Submission Data
FE->>BE: GET /api/ivanti/fp-submissions
BE->>DB: SELECT from ivanti_fp_submissions
DB-->>BE: Submission records
BE-->>FE: JSON array of submissions
Note over U,IV: Edit Form Fields
U->>FE: Modify name/reason/description/expiration, click Save
FE->>BE: PUT /api/ivanti/fp-submissions/:id
BE->>BE: Validate input
BE->>IV: POST /workflowBatch/falsePositive/update
IV-->>BE: 200 OK
BE->>DB: UPDATE ivanti_fp_submissions
BE->>DB: INSERT ivanti_fp_submission_history
BE->>DB: INSERT audit_log
BE-->>FE: 200 + updated record
Note over U,IV: Add Findings
U->>FE: Select additional FP queue items, click Add
FE->>BE: POST /api/ivanti/fp-submissions/:id/findings
BE->>IV: POST /workflowBatch/falsePositive/{uuid}/map
IV-->>BE: 200 OK
BE->>DB: UPDATE finding_ids_json
BE->>DB: UPDATE queue items → complete
BE->>DB: INSERT history + audit
BE-->>FE: 200 + updated record
Note over U,IV: Add Attachments
U->>FE: Upload files, click Attach
FE->>BE: POST /api/ivanti/fp-submissions/:id/attachments (multipart)
loop Each file
BE->>IV: POST /workflowBatch/falsePositive/{uuid}/attach
IV-->>BE: 200 OK
end
BE->>DB: UPDATE attachment_count, attachment_results_json
BE->>DB: INSERT history + audit
BE-->>FE: 200 + attachment results
Note over U,DB: Status Transition
U->>FE: Change lifecycle status
FE->>BE: PATCH /api/ivanti/fp-submissions/:id/status
BE->>DB: UPDATE lifecycle_status, INSERT history + audit
BE-->>FE: 200 OK
```
## Components and Interfaces
### Backend
#### Extended Route Module: `backend/routes/ivantiFpWorkflow.js`
Extends the existing `createIvantiFpWorkflowRouter(db, requireAuth)` with five new endpoints. All endpoints use `requireAuth(db)` and `requireGroup('Admin', 'Standard_User')`, and verify the authenticated user owns the submission (returning 403 otherwise).
**Endpoint: `GET /api/ivanti/fp-submissions`**
Returns the authenticated user's FP submission records.
- Auth: `requireAuth(db)`, any authenticated user (viewers get read-only list)
- Response:
```json
[
{
"id": 1,
"user_id": 5,
"username": "jdoe",
"ivanti_workflow_batch_id": 33418832,
"ivanti_workflow_batch_uuid": "abc-123-def",
"workflow_name": "FP - CVE-2024-1234",
"reason": "Scanner false positive",
"description": "Confirmed by manual review",
"expiration_date": "2026-12-31",
"scope_override": "Authorized",
"finding_ids_json": "[\"2283734550\",\"2283734551\"]",
"queue_item_ids_json": "[1,2]",
"attachment_count": 2,
"attachment_results_json": "[{\"filename\":\"evidence.pdf\",\"success\":true}]",
"status": "success",
"lifecycle_status": "rework",
"error_message": null,
"created_at": "2026-04-08T18:16:08",
"updated_at": "2026-04-10T12:00:00"
}
]
```
**Endpoint: `PUT /api/ivanti/fp-submissions/:id`**
Updates form fields and proxies to Ivanti update endpoint.
- Auth: `requireAuth(db)`, `requireGroup('Admin', 'Standard_User')`
- Ownership: verified via `user_id` match
- Lifecycle guard: rejects if `lifecycle_status === 'approved'`
- Request body:
```json
{
"name": "Updated FP - CVE-2024-1234",
"reason": "Updated reason",
"description": "Updated description",
"expirationDate": "2027-06-01",
"scopeOverride": "Authorized"
}
```
- Validation: same rules as creation form (`validateFpWorkflowForm`)
- Ivanti call: `POST /client/{clientId}/workflowBatch/falsePositive/update` with JSON body containing `workflowBatchId` and updated fields
- On success: updates local record, inserts history row, logs audit, sets `lifecycle_status` to `resubmitted` if previous status was `rejected` or `rework`
- Response: `{ success: true, submission: { ...updatedRecord } }`
**Endpoint: `POST /api/ivanti/fp-submissions/:id/findings`**
Maps additional findings to the existing workflow batch.
- Auth: `requireAuth(db)`, `requireGroup('Admin', 'Standard_User')`
- Ownership: verified
- Lifecycle guard: rejects if `lifecycle_status === 'approved'`
- Request body:
```json
{
"findingIds": ["2283734552", "2283734553"],
"queueItemIds": [3, 4]
}
```
- Validates queue items belong to user, are FP type, and pending
- Ivanti call: `POST /client/{clientId}/workflowBatch/falsePositive/{uuid}/map` with `subjectFilterRequest` containing the new finding IDs
- On success: appends new IDs to `finding_ids_json`, marks queue items complete, inserts history + audit
- Response: `{ success: true, addedFindings: [...], queueItemsUpdated: 2 }`
**Endpoint: `POST /api/ivanti/fp-submissions/:id/attachments`**
Uploads additional files to the existing workflow batch.
- Auth: `requireAuth(db)`, `requireGroup('Admin', 'Standard_User')`
- Content-Type: `multipart/form-data` (Multer)
- Ownership: verified
- Lifecycle guard: rejects if `lifecycle_status === 'approved'`
- File constraints: same as creation (10 MB, allowed extensions)
- Ivanti call: for each file, `POST /client/{clientId}/workflowBatch/falsePositive/{uuid}/attach`
- On success: updates `attachment_count` and `attachment_results_json`, inserts history + audit
- Response:
```json
{
"success": true,
"attachmentResults": [
{ "filename": "new-evidence.pdf", "success": true },
{ "filename": "screenshot.png", "success": false, "error": "Upload failed" }
],
"status": "success"
}
```
**Endpoint: `PATCH /api/ivanti/fp-submissions/:id/status`**
Updates the lifecycle status of a submission.
- Auth: `requireAuth(db)`, `requireGroup('Admin', 'Standard_User')`
- Ownership: verified
- Request body:
```json
{
"lifecycle_status": "rejected"
}
```
- Validates status is one of: `submitted`, `approved`, `rejected`, `rework`, `resubmitted`
- Validates transition is allowed (cannot transition FROM `approved`)
- On success: updates `lifecycle_status` and `updated_at`, inserts history row with previous and new status, logs audit
- Response: `{ success: true, previousStatus: "submitted", newStatus: "rejected" }`
#### Pure Helper Functions (exported for testing)
The following pure functions are extracted for testability:
- `validateFpWorkflowForm(body)` — already exists, reused for edit validation
- `isAllowedFileExtension(filename)` — already exists, reused
- `buildSubjectFilterRequest(findingIds)` — already exists, reused for map endpoint
- `validateLifecycleTransition(currentStatus, newStatus)` — new, returns `{ valid: boolean, error?: string }`
- `mergeFindings(existingJson, newIds)` — new, merges finding ID arrays, deduplicates, returns JSON string
- `buildSubmissionHistoryEntry(changeType, details, userId, username)` — new, constructs a history record object
#### Ivanti API Calls
Uses existing helpers from `backend/helpers/ivantiApi.js`:
- **Update workflow**: `ivantiPost()` to `POST /client/{clientId}/workflowBatch/falsePositive/update` with JSON body
- **Map findings**: `ivantiFormPost()` to `POST /client/{clientId}/workflowBatch/falsePositive/{uuid}/map` with `subjectFilterRequest`
- **Attach file**: `ivantiMultipartPost()` to `POST /client/{clientId}/workflowBatch/falsePositive/{uuid}/attach` with file buffer
### Frontend
#### New Component: `FpEditModal`
Defined inline in `frontend/src/components/pages/ReportingPage.js`, following the existing `FpWorkflowModal` pattern.
**Props:**
- `open` (boolean) — controls visibility
- `onClose` (function) — close handler
- `submission` (object) — the FP_Submission record to edit (null when closed)
- `queueItems` (array) — user's current queue items (for adding findings)
- `onSuccess` (function) — callback after successful edit, triggers data refresh
**State:**
- `name`, `reason`, `description`, `expirationDate`, `scopeOverride` — editable form fields, initialized from `submission`
- `files` — array of new File objects for upload
- `additionalFindingIds` — selected queue items to add as findings
- `saving` — boolean, disables form during save
- `errors` — validation error map
- `result` — operation result (success/failure)
- `activeTab` — current tab: 'details' | 'findings' | 'attachments' | 'history'
**UI Layout:**
- Modal overlay with dark backdrop (matching `FpWorkflowModal`)
- Header: "Edit FP Workflow — {workflow_name}" with lifecycle status badge and close button
- Tab bar: Details | Findings | Attachments | History
- Details tab: editable form fields (name, reason, description, expiration, scope override) with Save button
- Findings tab: current finding IDs list (read-only) + mechanism to select and add FP queue items
- Attachments tab: existing attachments list + file upload area for new attachments
- History tab: chronological list of changes from `ivanti_fp_submission_history`
- Footer: contextual action buttons per tab
- Approved submissions: all fields read-only with "This submission is finalized" message
#### Workflow Badge Modifications (Reporting Table)
The workflow column renderer (lines 10441070 of `ReportingPage.js`) is modified:
- For badges with state `reworked`, `rejected`, or `expired`:
- Add `cursor: 'pointer'` and `onClick` handler
- Append a small pencil icon (lucide `Edit3`, 10px) after the state text
- On hover: increase border opacity and brighten background
- On click: look up matching FP_Submission by `wf.id` (workflow batch ID), open `FpEditModal`
- For badges with state `requested` or `approved`:
- No changes — remain non-interactive (no cursor, no icon, no click handler)
#### QueuePanel Modifications
- Add a "Submissions" section below the existing queue items list
- Fetches submissions via `GET /api/ivanti/fp-submissions` on panel open
- Each submission row shows: workflow name, batch ID, lifecycle status badge, finding count, created date
- Lifecycle status badges use color coding: submitted (sky blue), approved (emerald), rejected (red), rework (amber), resubmitted (sky blue)
- Clicking a submission row opens `FpEditModal` with that submission's data
- Viewers see the list but cannot click to edit
#### Lifecycle Status Badge Component
Inline helper function `lifecycleStatusBadge(status)` returning style object:
| Status | Border | Background | Text |
|--------|--------|------------|------|
| submitted | `rgba(14,165,233,0.4)` | `rgba(14,165,233,0.12)` | `#0EA5E9` |
| approved | `rgba(16,185,129,0.4)` | `rgba(16,185,129,0.12)` | `#10B981` |
| rejected | `rgba(239,68,68,0.4)` | `rgba(239,68,68,0.12)` | `#EF4444` |
| rework | `rgba(245,158,11,0.4)` | `rgba(245,158,11,0.12)` | `#F59E0B` |
| resubmitted | `rgba(14,165,233,0.4)` | `rgba(14,165,233,0.12)` | `#0EA5E9` |
## Data Models
### Schema Changes to `ivanti_fp_submissions`
Three new columns added to the existing table:
```sql
ALTER TABLE ivanti_fp_submissions ADD COLUMN lifecycle_status TEXT NOT NULL DEFAULT 'submitted'
CHECK(lifecycle_status IN ('submitted', 'approved', 'rejected', 'rework', 'resubmitted'));
ALTER TABLE ivanti_fp_submissions ADD COLUMN ivanti_workflow_batch_uuid TEXT;
ALTER TABLE ivanti_fp_submissions ADD COLUMN updated_at DATETIME DEFAULT CURRENT_TIMESTAMP;
```
### New Table: `ivanti_fp_submission_history`
```sql
CREATE TABLE IF NOT EXISTS ivanti_fp_submission_history (
id INTEGER PRIMARY KEY AUTOINCREMENT,
submission_id INTEGER NOT NULL,
user_id INTEGER NOT NULL,
username TEXT NOT NULL,
change_type TEXT NOT NULL CHECK(change_type IN (
'created', 'fields_updated', 'findings_added',
'attachments_added', 'status_changed'
)),
change_details_json TEXT,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (submission_id) REFERENCES ivanti_fp_submissions(id) ON DELETE CASCADE
);
CREATE INDEX IF NOT EXISTS idx_fp_history_submission ON ivanti_fp_submission_history(submission_id);
```
**change_details_json examples:**
- `fields_updated`: `{"changed": {"name": {"from": "old", "to": "new"}, "reason": {"from": "old", "to": "new"}}}`
- `findings_added`: `{"addedFindingIds": ["123", "456"], "queueItemIds": [3, 4]}`
- `attachments_added`: `{"files": [{"filename": "evidence.pdf", "success": true}]}`
- `status_changed`: `{"from": "submitted", "to": "rejected"}`
- `created`: `{"workflowBatchId": 33418832, "findingCount": 3, "attachmentCount": 1}`
### Migration Script: `backend/migrations/add_fp_submission_editing.js`
Applies all schema changes idempotently using `ALTER TABLE ... ADD COLUMN` wrapped in try/catch (SQLite throws if column already exists) and `CREATE TABLE IF NOT EXISTS` / `CREATE INDEX IF NOT EXISTS`.
## Correctness Properties
*A property is a characteristic or behavior that should hold true across all valid executions of a system — essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
Note: Properties for `validateFpWorkflowForm` and `isAllowedFileExtension` are already covered by the existing `ivanti-fp-workflow-submission` spec and are reused without modification. The properties below cover new pure functions introduced by this feature.
### Property 1: Finding Merge Preserves All IDs and Deduplicates
*For any* existing finding IDs JSON string (valid JSON array of strings) and any array of new finding ID strings, `mergeFindings(existingJson, newIds)` should produce a JSON string that, when parsed, contains every ID from the original array and every ID from the new array, contains no duplicate entries, and has a length less than or equal to the sum of the original and new array lengths.
**Validates: Requirements 3.3**
### Property 2: Lifecycle Transition Validation
*For any* pair of lifecycle status values (currentStatus, newStatus) drawn from the set {submitted, approved, rejected, rework, resubmitted}, `validateLifecycleTransition(currentStatus, newStatus)` should return `{ valid: false }` whenever currentStatus is "approved" (no transitions allowed from finalized state), and should return `{ valid: true }` for all other currentStatus values when newStatus is a valid lifecycle status. Additionally, when currentStatus is "rejected" or "rework" and newStatus is "resubmitted", the transition should always be valid.
**Validates: Requirements 5.4, 5.5**
## Error Handling
### Ivanti API Errors
| HTTP Status | Endpoint | User-Facing Message | System Behavior |
|-------------|----------|---------------------|-----------------|
| 401 | All | "Ivanti API key is invalid or missing. Contact your administrator." | Log error, preserve form state |
| 419 | All | "API key lacks permissions for this operation." | Log error, preserve form state |
| 429 | All | "Ivanti API rate limit reached. Please try again in a few minutes." | Log error, preserve form state |
| 5xx | All | "Ivanti API is temporarily unavailable. Please try again later." | Log error, preserve form state |
| Other | All | "Operation failed: {status} — {message}" | Log error with full response, preserve form state |
### Partial Failure (Attachment Upload)
When some attachment uploads succeed and others fail:
- Response includes per-file success/failure details
- Successfully uploaded files are recorded in `attachment_results_json`
- Failed files are reported to the user with retry option
- The submission record is updated with the successful uploads only
### Lifecycle Guard Errors
- Attempting to edit an "approved" submission returns 400: `"This submission is finalized and cannot be edited."`
- Attempting an invalid status transition returns 400: `"Cannot transition from {current} to {new}."`
### Ownership Errors
- All edit endpoints verify `user_id` matches the authenticated user
- Mismatch returns 403: `"You can only edit your own submissions."`
### Local Database Errors
- If history INSERT fails: log error, still return success (the Ivanti operation succeeded)
- If audit log INSERT fails: fire-and-forget (existing `logAudit()` pattern)
- If submission record UPDATE fails: return 500 with error message
## Testing Strategy
### Property-Based Testing
Use `fast-check` as the property-based testing library. Each correctness property maps to a single property-based test with a minimum of 100 iterations.
Property tests focus on the new pure functions:
- `mergeFindings(existingJson, newIds)` — Property 1
- `validateLifecycleTransition(currentStatus, newStatus)` — Property 2
Tag format: **Feature: fp-submission-editing, Property {number}: {title}**
Test file: `backend/__tests__/fpSubmissionEditing.property.test.js`
### Unit Testing
Unit tests cover specific examples, edge cases, and integration points:
- **Validation reuse**: verify `validateFpWorkflowForm` is called correctly in the PUT endpoint
- **Lifecycle badge styles**: verify each of the 5 statuses maps to the correct color scheme
- **Clickable badge logic**: verify reworked/rejected/expired states produce clickable badges, requested/approved do not
- **Ownership verification**: verify 403 when non-owner attempts edit
- **Role guard**: verify non-Admin/Standard_User users are rejected
- **Approved guard**: verify 400 when editing an approved submission
- **Error mapping**: verify each Ivanti HTTP status maps to the correct error message
- **History recording**: verify correct `change_type` and `change_details_json` for each operation type
- **Migration idempotency**: verify migration can run multiple times without error
Test file: `backend/__tests__/fpSubmissionEditing.test.js`
### Integration Testing
Integration tests verify the full request/response cycle with mocked Ivanti API:
- GET submissions returns correct records for authenticated user
- PUT update proxies to Ivanti and updates local record
- POST findings maps to Ivanti and merges finding IDs
- POST attachments uploads to Ivanti and updates attachment records
- PATCH status updates lifecycle and creates history entry
- Queue items marked complete after successful finding addition
Test file: `backend/__tests__/fpSubmissionEditing.integration.test.js`

View File

@@ -0,0 +1,122 @@
# Requirements Document
## Introduction
This feature adds the ability to view, edit, and resubmit existing False Positive (FP) workflow submissions in the STEAM Security Dashboard. Users need to update FP workflows when assets or findings must be added, when supporting documentation needs to be supplemented, or when submissions are rejected or returned for rework by Ivanti reviewers. The feature introduces lifecycle status tracking for FP submissions, an edit modal that loads existing submission data, and backend endpoints that proxy update, map, and attach operations to the Ivanti API.
## Glossary
- **Dashboard**: The STEAM Security Dashboard application
- **FP_Submission**: A local database record in the `ivanti_fp_submissions` table tracking a False Positive workflow submission, including its Ivanti workflow batch ID, form data, finding IDs, attachment history, and lifecycle status
- **Ivanti_API**: The Ivanti/RiskSense REST API at https://platform4.risksense.com/api/v1, authenticated via x-api-key header
- **Workflow_Batch**: An Ivanti API resource representing a group of findings submitted together under a single FP workflow request, identified by a numeric ID and a UUID
- **Lifecycle_Status**: The current state of an FP submission in its review lifecycle: submitted, approved, rejected, rework, or resubmitted
- **Edit_Modal**: The UI modal that loads an existing FP submission's data and allows the user to modify form fields, add findings, and upload additional attachments
- **Submission_History**: A chronological log of changes made to an FP submission, including edits, finding additions, attachment uploads, and status transitions
- **Queue_Panel**: The slide-out panel in the Reporting Page that displays the user's Ivanti todo queue items
- **Workflow_Badge**: The colored status badge displayed in the Workflow column of the Reporting Page findings table, showing the workflow ID and state (e.g., "FP#12345 REWORKED"). States include: expired (red), rejected (red), reworked (amber), actionable (amber), requested (sky blue)
- **Reporting_Table**: The findings table on the Reporting Page that displays host findings with columns including a Workflow column showing Workflow_Badges
- **Ivanti_Update_Endpoint**: The Ivanti API endpoint `POST /workflowBatch/falsePositive/update` used to modify workflow batch metadata (name, reason, description, expiration date)
- **Ivanti_Map_Endpoint**: The Ivanti API endpoint `POST /workflowBatch/falsePositive/{workflowBatchUuid}/map` used to add additional findings to an existing workflow batch
- **Ivanti_Attach_Endpoint**: The Ivanti API endpoint `POST /workflowBatch/falsePositive/{workflowBatchUuid}/attach` used to upload additional file attachments to an existing workflow batch
## Requirements
### Requirement 1: View and Access Existing FP Submissions
**User Story:** As an editor or admin, I want to access my existing FP workflow submissions from the reporting table's workflow badges and from a submissions list, so that I can quickly identify and edit submissions that need attention.
#### Acceptance Criteria
1. THE Dashboard SHALL display a list of FP_Submissions for the authenticated user in the Queue_Panel, showing workflow name, Ivanti workflow batch ID, Lifecycle_Status, finding count, attachment count, and submission date
2. WHEN the user clicks on an FP_Submission in the list, THE Dashboard SHALL open the Edit_Modal pre-populated with the submission's current data including form fields, associated finding IDs, and attachment history
3. THE Dashboard SHALL visually distinguish FP_Submissions by Lifecycle_Status using color-coded status badges: submitted (sky blue), approved (emerald), rejected (red), rework (amber), resubmitted (sky blue)
4. WHILE the user has the viewer role, THE Dashboard SHALL display the FP_Submission list in read-only mode with the edit action disabled
5. WHEN a finding in the Reporting_Table has a Workflow_Badge with state "reworked", "rejected", or "expired", THE Dashboard SHALL render the Workflow_Badge as a clickable element with a pointer cursor and a subtle edit icon (pencil) appended to the badge
6. WHEN the user clicks a clickable Workflow_Badge in the Reporting_Table, THE Dashboard SHALL look up the matching FP_Submission by the workflow batch ID displayed in the badge and open the Edit_Modal pre-populated with that submission's data
7. WHEN the user hovers over a clickable Workflow_Badge, THE Dashboard SHALL display a hover effect (increased border opacity and slight background brightening) to indicate the badge is interactive
8. WHILE a Workflow_Badge has state "requested" or "approved", THE Dashboard SHALL render the badge as non-interactive (no pointer cursor, no edit icon, no click handler) since those states do not require user action
### Requirement 2: Edit FP Workflow Form Fields
**User Story:** As an editor or admin, I want to update the name, reason, description, and expiration date of an existing FP submission, so that I can correct or supplement the justification when a submission is returned for rework.
#### Acceptance Criteria
1. WHEN the Edit_Modal is opened for an existing FP_Submission, THE Dashboard SHALL load and display the current values for workflow name, reason, description, expiration date, and scope override authorization in editable form fields
2. THE Dashboard SHALL apply the same validation rules to edited fields as the creation form: workflow name required and max 255 characters, reason required, description optional and max 2000 characters, expiration date required and must be a future date
3. WHEN the user modifies form fields and clicks Save, THE Dashboard SHALL send the updated fields to the Ivanti_Update_Endpoint to modify the workflow batch metadata in the Ivanti platform
4. IF the Ivanti_Update_Endpoint returns an error, THEN THE Dashboard SHALL display the error message and preserve the user's edits so the user can retry without re-entering data
5. WHEN a form field update completes successfully, THE Dashboard SHALL update the local FP_Submission record with the new field values and record the change in Submission_History
### Requirement 3: Add Findings to Existing FP Submission
**User Story:** As an editor or admin, I want to add additional findings or assets to an existing FP submission, so that I can expand the scope of a false positive workflow when new related findings are identified.
#### Acceptance Criteria
1. THE Edit_Modal SHALL display the current list of finding IDs associated with the FP_Submission and provide a mechanism to add additional findings from the user's Ivanti queue
2. WHEN the user selects additional FP-type queue items to add, THE Dashboard SHALL send the new finding IDs to the Ivanti_Map_Endpoint to map the findings to the existing Workflow_Batch
3. WHEN findings are mapped successfully, THE Dashboard SHALL update the local FP_Submission record's finding_ids_json to include the newly added finding IDs
4. WHEN findings are mapped successfully, THE Dashboard SHALL mark the corresponding queue items as complete and refresh the Queue_Panel
5. IF the Ivanti_Map_Endpoint returns an error, THEN THE Dashboard SHALL display the error message and leave the queue items in their current status
### Requirement 4: Add Attachments to Existing FP Submission
**User Story:** As an editor or admin, I want to upload additional files and screenshots to an existing FP submission, so that I can provide supplementary evidence when reviewers request more documentation.
#### Acceptance Criteria
1. THE Edit_Modal SHALL display the list of previously uploaded attachments (filename and upload status) and provide a file upload area for adding new attachments
2. THE Dashboard SHALL apply the same file constraints as the creation form: maximum 10 MB per file, allowed extensions .pdf, .png, .jpg, .jpeg, .gif, .doc, .docx, .xlsx, .csv, .txt, .zip
3. WHEN the user uploads new files, THE Dashboard SHALL send each file to the Ivanti_Attach_Endpoint to attach the file to the existing Workflow_Batch
4. WHEN an attachment upload completes successfully, THE Dashboard SHALL update the local FP_Submission record's attachment_count and attachment_results_json to include the new attachment
5. IF an attachment upload fails, THEN THE Dashboard SHALL report which attachments failed and allow the user to retry the failed uploads without re-uploading successful attachments
### Requirement 5: FP Submission Lifecycle Status Tracking
**User Story:** As an editor or admin, I want the Dashboard to track the lifecycle status of my FP submissions, so that I can see which submissions are pending review, approved, rejected, or need rework.
#### Acceptance Criteria
1. THE Dashboard SHALL store a Lifecycle_Status field for each FP_Submission with allowed values: submitted, approved, rejected, rework, resubmitted
2. WHEN a new FP workflow is created, THE Dashboard SHALL set the initial Lifecycle_Status to "submitted"
3. WHEN the user manually updates the Lifecycle_Status of an FP_Submission (e.g., marking it as rejected or rework after receiving notification), THE Dashboard SHALL record the status change with a timestamp in Submission_History
4. WHEN an FP_Submission with Lifecycle_Status "rejected" or "rework" is edited and resubmitted, THE Dashboard SHALL update the Lifecycle_Status to "resubmitted"
5. THE Dashboard SHALL prevent editing of FP_Submissions with Lifecycle_Status "approved" and display a message indicating the submission is finalized
### Requirement 6: Submission History and Audit Trail
**User Story:** As an editor or admin, I want to see a history of changes made to an FP submission, so that I can track what was modified and when for audit purposes.
#### Acceptance Criteria
1. THE Edit_Modal SHALL display a Submission_History section showing a chronological list of changes made to the FP_Submission, including: initial creation, form field edits, finding additions, attachment uploads, and status transitions
2. WHEN any modification is made to an FP_Submission, THE Dashboard SHALL log an audit entry with action "ivanti_fp_submission_edited", entity type "ivanti_workflow", the workflow batch ID as entity ID, and details including the type of change and changed values
3. WHEN a Lifecycle_Status transition occurs, THE Dashboard SHALL log an audit entry with action "ivanti_fp_status_changed", entity type "ivanti_workflow", and details including the previous status and new status
### Requirement 7: Backend API Endpoints for FP Editing
**User Story:** As a system component, the backend needs API endpoints to retrieve, update, and extend existing FP submissions, so that the frontend can perform edit operations securely.
#### Acceptance Criteria
1. THE Dashboard SHALL provide a GET /api/ivanti/fp-submissions endpoint that returns the authenticated user's FP_Submission records with all stored fields and Lifecycle_Status
2. THE Dashboard SHALL provide a PUT /api/ivanti/fp-submissions/:id endpoint that accepts updated form fields, validates the input, proxies the update to the Ivanti_Update_Endpoint, and updates the local record
3. THE Dashboard SHALL provide a POST /api/ivanti/fp-submissions/:id/findings endpoint that accepts additional finding IDs, proxies the map operation to the Ivanti_Map_Endpoint, and updates the local record
4. THE Dashboard SHALL provide a POST /api/ivanti/fp-submissions/:id/attachments endpoint that accepts file uploads, proxies each file to the Ivanti_Attach_Endpoint, and updates the local record
5. THE Dashboard SHALL provide a PATCH /api/ivanti/fp-submissions/:id/status endpoint that accepts a new Lifecycle_Status value and updates the local record with the status transition
6. THE Dashboard SHALL restrict all FP submission editing endpoints to users with "Admin" or "Standard_User" group membership
7. THE Dashboard SHALL verify that the authenticated user owns the FP_Submission before allowing any edit operation, returning a 403 status if ownership verification fails
### Requirement 8: Database Schema Updates for Editing Support
**User Story:** As a system component, the database needs additional fields and tables to support FP submission editing, lifecycle tracking, and change history.
#### Acceptance Criteria
1. THE Dashboard SHALL add a lifecycle_status column to the ivanti_fp_submissions table with allowed values: submitted, approved, rejected, rework, resubmitted, defaulting to "submitted"
2. THE Dashboard SHALL add an ivanti_workflow_batch_uuid column to the ivanti_fp_submissions table to store the UUID required by the Ivanti map and attach endpoints
3. THE Dashboard SHALL add an updated_at column to the ivanti_fp_submissions table that is set to the current timestamp on each modification
4. THE Dashboard SHALL create an ivanti_fp_submission_history table with columns: id, submission_id (foreign key), user_id, username, change_type, change_details_json, and created_at
5. THE Dashboard SHALL provide a migration script at backend/migrations/add_fp_submission_editing.js that applies the schema changes idempotently

View File

@@ -0,0 +1,182 @@
# Implementation Plan: FP Submission Editing
## Overview
Extends the existing FP workflow system with lifecycle status tracking, edit/resubmit capabilities, and a submission history audit trail. Implementation proceeds bottom-up: database migration → pure helpers → backend endpoints → frontend components → wiring and integration.
## Tasks
- [x] 1. Database migration and schema changes
- [x] 1.1 Create migration script `backend/migrations/add_fp_submission_editing.js`
- Add `lifecycle_status` column to `ivanti_fp_submissions` with CHECK constraint and default `'submitted'`
- Add `ivanti_workflow_batch_uuid` TEXT column to `ivanti_fp_submissions`
- Add `updated_at` DATETIME column to `ivanti_fp_submissions` with default CURRENT_TIMESTAMP
- Create `ivanti_fp_submission_history` table with columns: id, submission_id (FK), user_id, username, change_type (CHECK constraint), change_details_json, created_at
- Create index `idx_fp_history_submission` on submission_id
- Wrap ALTER TABLE statements in try/catch for idempotency; use CREATE TABLE IF NOT EXISTS / CREATE INDEX IF NOT EXISTS
- _Requirements: 8.1, 8.2, 8.3, 8.4, 8.5_
- [x] 2. Implement pure helper functions in `backend/routes/ivantiFpWorkflow.js`
- [x] 2.1 Implement `validateLifecycleTransition(currentStatus, newStatus)`
- Accept two status strings from the set {submitted, approved, rejected, rework, resubmitted}
- Return `{ valid: false, error }` when currentStatus is `'approved'` (finalized, no transitions allowed)
- Return `{ valid: false, error }` when newStatus is not in the allowed set
- Return `{ valid: true }` for all other valid transitions
- Export from module for testing
- _Requirements: 5.4, 5.5_
- [x] 2.2 Implement `mergeFindings(existingJson, newIds)`
- Parse existingJson (JSON array of strings), concatenate with newIds array
- Deduplicate by converting to Set, return JSON.stringify of the merged array
- Handle edge cases: empty existing array, empty newIds, overlapping IDs
- Export from module for testing
- _Requirements: 3.3_
- [x] 2.3 Implement `buildSubmissionHistoryEntry(changeType, details, userId, username)`
- Construct and return an object with: submission_id (to be set by caller), user_id, username, change_type, change_details_json (JSON.stringify of details), created_at (ISO string)
- Export from module for testing
- _Requirements: 6.1, 6.2_
- [ ]* 2.4 Write property test for `mergeFindings` — Property 1: Finding Merge Preserves All IDs and Deduplicates
- **Property 1: Finding Merge Preserves All IDs and Deduplicates**
- **Validates: Requirements 3.3**
- Use fast-check to generate arbitrary arrays of string IDs for existing and new
- Assert: parsed result contains every ID from both inputs, no duplicates, length ≤ sum of input lengths
- Test file: `backend/__tests__/fpSubmissionEditing.property.test.js`
- [ ]* 2.5 Write property test for `validateLifecycleTransition` — Property 2: Lifecycle Transition Validation
- **Property 2: Lifecycle Transition Validation**
- **Validates: Requirements 5.4, 5.5**
- Use fast-check to generate pairs from {submitted, approved, rejected, rework, resubmitted}
- Assert: always invalid when currentStatus is 'approved'; always valid for other currentStatus values with valid newStatus; rejected/rework → resubmitted is always valid
- Test file: `backend/__tests__/fpSubmissionEditing.property.test.js`
- [ ] 3. Checkpoint — Ensure all tests pass
- Ensure all tests pass, ask the user if questions arise.
- [x] 4. Implement backend API endpoints in `backend/routes/ivantiFpWorkflow.js`
- [x] 4.1 Implement `GET /api/ivanti/fp-submissions`
- Add route with `requireAuth(db)` — any authenticated user
- Query `ivanti_fp_submissions` filtered by `req.user.id`
- Return JSON array of submission records including lifecycle_status and updated_at
- _Requirements: 7.1, 1.1_
- [x] 4.2 Implement `PUT /api/ivanti/fp-submissions/:id`
- Add route with `requireAuth(db)`, `requireGroup('Admin', 'Standard_User')`
- Verify ownership (user_id match → 403 if not)
- Lifecycle guard: reject if lifecycle_status is 'approved' → 400
- Validate body with existing `validateFpWorkflowForm`
- Proxy to Ivanti update endpoint via `ivantiPost()`
- On success: UPDATE local record fields + updated_at, INSERT history row (change_type: 'fields_updated'), log audit
- If previous status was 'rejected' or 'rework', set lifecycle_status to 'resubmitted'
- _Requirements: 7.2, 2.1, 2.2, 2.3, 2.4, 2.5, 5.4, 5.5, 7.6, 7.7_
- [x] 4.3 Implement `POST /api/ivanti/fp-submissions/:id/findings`
- Add route with `requireAuth(db)`, `requireGroup('Admin', 'Standard_User')`
- Verify ownership, lifecycle guard (reject if approved)
- Validate findingIds and queueItemIds from body; verify queue items belong to user, are FP type, and pending
- Proxy to Ivanti map endpoint via `ivantiFormPost()` using `buildSubjectFilterRequest`
- On success: merge finding IDs with `mergeFindings()`, mark queue items complete, INSERT history + audit
- _Requirements: 7.3, 3.1, 3.2, 3.3, 3.4, 3.5_
- [x] 4.4 Implement `POST /api/ivanti/fp-submissions/:id/attachments`
- Add route with `requireAuth(db)`, `requireGroup('Admin', 'Standard_User')`, Multer middleware
- Verify ownership, lifecycle guard (reject if approved)
- Validate file constraints (10 MB, allowed extensions)
- Loop each file: call `ivantiMultipartPost()` to Ivanti attach endpoint
- Collect per-file success/failure results
- Update attachment_count and attachment_results_json, INSERT history + audit
- _Requirements: 7.4, 4.1, 4.2, 4.3, 4.4, 4.5_
- [x] 4.5 Implement `PATCH /api/ivanti/fp-submissions/:id/status`
- Add route with `requireAuth(db)`, `requireGroup('Admin', 'Standard_User')`
- Verify ownership
- Validate new status is in allowed set
- Use `validateLifecycleTransition()` to check transition validity
- UPDATE lifecycle_status and updated_at, INSERT history row (change_type: 'status_changed'), log audit
- _Requirements: 7.5, 5.1, 5.2, 5.3, 7.6, 7.7_
- [ ]* 4.6 Write unit tests for backend endpoints
- Test ownership verification returns 403 for non-owner
- Test lifecycle guard returns 400 for approved submissions
- Test role guard rejects non-Admin/Standard_User
- Test Ivanti error status mapping (401, 419, 429, 5xx)
- Test history recording produces correct change_type and change_details_json
- Test migration idempotency (can run multiple times without error)
- Test file: `backend/__tests__/fpSubmissionEditing.test.js`
- _Requirements: 7.6, 7.7, 5.5_
- [ ]* 4.7 Write integration tests for backend endpoints
- Test GET returns correct records for authenticated user
- Test PUT proxies to Ivanti and updates local record
- Test POST findings maps to Ivanti and merges finding IDs
- Test POST attachments uploads to Ivanti and updates attachment records
- Test PATCH status updates lifecycle and creates history entry
- Test queue items marked complete after successful finding addition
- Test file: `backend/__tests__/fpSubmissionEditing.integration.test.js`
- _Requirements: 7.1, 7.2, 7.3, 7.4, 7.5_
- [ ] 5. Checkpoint — Ensure all tests pass
- Ensure all tests pass, ask the user if questions arise.
- [x] 6. Register new endpoints in `backend/server.js`
- Wire the updated `ivantiFpWorkflow` router so the new GET/PUT/POST/PATCH routes are accessible under `/api/ivanti/fp-submissions`
- Verify the existing POST `/api/ivanti/fp-workflow` route continues to work
- _Requirements: 7.1, 7.2, 7.3, 7.4, 7.5_
- [x] 7. Implement frontend components in `frontend/src/components/pages/ReportingPage.js`
- [x] 7.1 Implement `lifecycleStatusBadge(status)` helper function
- Return inline style object with border, background, and text color per status
- Color mapping: submitted/resubmitted (sky blue), approved (emerald), rejected (red), rework (amber)
- _Requirements: 1.3_
- [x] 7.2 Implement `FpEditModal` component
- Props: open, onClose, submission, queueItems, onSuccess
- State: form fields initialized from submission, activeTab, saving, errors, result
- Tab bar with 4 tabs: Details, Findings, Attachments, History
- Details tab: editable form fields (name, reason, description, expirationDate, scopeOverride) with Save button; calls PUT endpoint
- Findings tab: read-only current finding IDs list + mechanism to select and add FP queue items; calls POST findings endpoint
- Attachments tab: existing attachments list + file upload area; calls POST attachments endpoint
- History tab: chronological list fetched from submission history (included in GET response or separate query)
- Approved submissions: all fields read-only with finalized message
- Dark tactical theme matching existing FpWorkflowModal
- _Requirements: 1.2, 2.1, 2.2, 2.3, 2.4, 2.5, 3.1, 3.2, 3.4, 3.5, 4.1, 4.2, 4.3, 4.4, 4.5, 5.5, 6.1_
- [x] 7.3 Modify workflow badge renderer for clickable badges
- In the workflow column renderer (~lines 10441070), for badges with state reworked/rejected/expired:
- Add `cursor: 'pointer'` and `onClick` handler
- Append pencil icon (lucide `Edit3`, 10px) after state text
- On hover: increase border opacity and brighten background
- On click: look up matching FP_Submission by workflow batch ID, open FpEditModal
- For badges with state requested/approved: no changes (remain non-interactive)
- _Requirements: 1.5, 1.6, 1.7, 1.8_
- [x] 7.4 Add submissions list section to QueuePanel
- Fetch submissions via GET /api/ivanti/fp-submissions on panel open
- Display each submission: workflow name, batch ID, lifecycle status badge, finding count, created date
- Clicking a submission row opens FpEditModal with that submission's data
- Viewers see the list but cannot click to edit
- _Requirements: 1.1, 1.2, 1.3, 1.4_
- [x] 8. Wire frontend state and data flow
- [x] 8.1 Add submissions state and fetch logic to ReportingPage
- Add state for submissions array and selected submission
- Fetch submissions on page load and after successful edits (onSuccess callback)
- Pass submissions and queueItems to FpEditModal and QueuePanel
- _Requirements: 1.1, 1.2_
- [x] 8.2 Connect FpEditModal callbacks to refresh data
- On successful edit/findings/attachments/status change, call onSuccess to refresh submissions list, queue items, and reporting table data
- _Requirements: 2.5, 3.4, 4.4, 5.3_
- [ ] 9. Final checkpoint — Ensure all tests pass
- Ensure all tests pass, ask the user if questions arise.
## Notes
- Tasks marked with `*` are optional and can be skipped for faster MVP
- Each task references specific requirements for traceability
- Checkpoints ensure incremental validation
- Property tests validate universal correctness properties from the design document
- The project uses plain JavaScript (no TypeScript) — all code should follow existing conventions
- All new endpoints follow the existing factory-pattern router in `ivantiFpWorkflow.js`

View File

@@ -0,0 +1 @@
{"specId": "b8855eb4-3949-426e-86ac-36fe069a6bb1", "workflowType": "requirements-first", "specType": "feature"}

View File

@@ -0,0 +1,362 @@
# Design Document: Ivanti Queue Redirect
## Overview
The Ivanti Queue Redirect feature adds an optional redirect action to completed queue items, allowing users to create a new pending queue item under a different workflow type from an existing completed item. This supports the common scenario where a CARD inventory fix is done but the finding still needs FP or Archer processing, where an item was assigned to the wrong workflow initially, or where a CARD item with a high asset score (90+) needs to go through the GRANITE program for reassignment or deletion.
The feature consists of five parts:
1. A new backend API endpoint (`POST /api/ivanti/todo-queue/:id/redirect`) added to the existing `ivantiTodoQueue.js` route module
2. GRANITE added as a fourth valid workflow type across all backend endpoints (`VALID_WORKFLOW_TYPES` constant)
3. A redirect modal component in the frontend for collecting target workflow type and vendor
4. A redirect button on completed queue items in the existing QueuePanel
5. Updated QueuePanel grouping: CARD and GRANITE items grouped under an "Inventory" section, with GRANITE also available in the AddToQueue popover
There are four workflow types: FP, Archer, CARD, and GRANITE. FP and Archer require a vendor string; CARD and GRANITE do not. Any completed item can redirect to any other workflow type — there is no fixed ordering between types.
The redirect operation creates a new row in `ivanti_todo_queue` — it does not modify or delete the original completed item. This preserves the audit trail and allows the original item to remain visible as completed.
## Architecture
The feature follows the existing patterns in the codebase:
```mermaid
sequenceDiagram
participant U as User
participant QP as QueuePanel
participant RM as RedirectModal
participant API as POST /todo-queue/:id/redirect
participant DB as SQLite (ivanti_todo_queue)
participant AL as Audit Log
U->>QP: Clicks redirect button on completed item
QP->>RM: Opens modal with item context
U->>RM: Selects target workflow type + vendor
RM->>API: POST /api/ivanti/todo-queue/:id/redirect
API->>DB: SELECT original item (verify ownership + complete status)
API->>DB: INSERT new pending item with target workflow_type
API->>AL: logAudit (fire-and-forget)
API-->>RM: 201 + new item JSON
RM->>QP: Adds new item to list, closes modal, shows success
```
No new database tables or schema changes are required. The redirect creates a standard `ivanti_todo_queue` row using the existing schema. Backend changes outside the new endpoint include: adding GRANITE to `VALID_WORKFLOW_TYPES`, updating all error messages to list four valid types, and treating GRANITE like CARD for vendor validation (no vendor required).
### QueuePanel Grouping (Layout)
```mermaid
graph TD
subgraph QueuePanel
subgraph Inventory Section
A[CARD items]
B[Sub-divider - only when both exist]
C[GRANITE items]
end
subgraph Vendor Groups
D[Vendor A - FP/Archer items]
E[Vendor B - FP/Archer items]
end
end
```
The QueuePanel groups items into two categories:
- **Inventory section** (top): Contains both CARD and GRANITE items under a single "Inventory" heading. CARD items appear first, followed by a subtle sub-divider (only shown when both types are present), then GRANITE items. Each item retains its workflow type badge (CARD in green, GRANITE in warm slate).
- **Vendor groups** (below): FP and Archer items grouped by vendor, same as current behavior.
## Components and Interfaces
### Backend: VALID_WORKFLOW_TYPES Constant
Updated from `['FP', 'Archer', 'CARD']` to `['FP', 'Archer', 'CARD', 'GRANITE']`.
All endpoints that reference this constant (batch add, single add, PUT, redirect) automatically accept GRANITE. The vendor validation condition changes from `workflow_type !== 'CARD'` to `workflow_type !== 'CARD' && workflow_type !== 'GRANITE'` (or equivalently, checking if the type is FP or Archer). The `vendorVal` assignment similarly treats GRANITE like CARD: `vendorVal = (workflow_type === 'CARD' || workflow_type === 'GRANITE') ? '' : vendor.trim()`.
All error messages for invalid workflow_type are updated to: `"workflow_type must be FP, Archer, CARD, or GRANITE."`.
### Backend: Redirect Endpoint
Added to `backend/routes/ivantiTodoQueue.js` inside the existing `createIvantiTodoQueueRouter` factory function.
```
POST /api/ivanti/todo-queue/:id/redirect
```
**Request body:**
```json
{
"workflow_type": "FP" | "Archer" | "CARD" | "GRANITE",
"vendor": "string (required for FP/Archer, omitted for CARD/GRANITE)"
}
```
**Success response (201):**
```json
{
"id": 42,
"user_id": 1,
"finding_id": "12345",
"finding_title": "...",
"cves_json": "[...]",
"ip_address": "10.0.0.1",
"hostname": "host.example.com",
"vendor": "Cisco",
"workflow_type": "FP",
"status": "pending",
"created_at": "...",
"updated_at": "...",
"cves": ["CVE-2024-1234"]
}
```
**Error responses:**
| Status | Condition |
|--------|-----------|
| 400 | Item not in "complete" status |
| 400 | Invalid workflow_type |
| 400 | Missing/invalid vendor for FP/Archer |
| 404 | Item not found or belongs to different user |
| 500 | Database error |
**Auth:** `requireAuth(db)`, `requireGroup('Admin', 'Standard_User')`
### Backend: Vendor Validation Logic
The vendor requirement is conditional on workflow type across all endpoints:
| Workflow Type | Vendor Required | vendorVal |
|---------------|----------------|-----------|
| FP | Yes — non-empty, ≤ 200 chars | `vendor.trim()` |
| Archer | Yes — non-empty, ≤ 200 chars | `vendor.trim()` |
| CARD | No | `''` (empty string) |
| GRANITE | No | `''` (empty string) |
The condition for requiring vendor changes from `workflow_type !== 'CARD'` to `workflow_type === 'FP' || workflow_type === 'Archer'` (or equivalently `!['CARD', 'GRANITE'].includes(workflow_type)`).
### Backend: PUT Validation Fix
In the existing PUT `/:id` handler, the error message for invalid `workflow_type` is updated to `"workflow_type must be FP, Archer, CARD, or GRANITE."`. The same update applies to the batch add, single add, and redirect endpoints.
### Frontend: RedirectModal Component
A modal component rendered inside the QueuePanel. It receives the item being redirected and collects:
- Target workflow type (radio buttons: FP, Archer, CARD, GRANITE)
- Vendor (text input, shown only when FP or Archer is selected)
The modal displays read-only context: finding title, finding ID, and current workflow type.
**WORKFLOW_OPTIONS constant** (updated to include GRANITE):
```js
const WORKFLOW_OPTIONS = [
{ key: 'FP', label: 'FP', col: '#F59E0B', rgb: '245,158,11' },
{ key: 'Archer', label: 'Archer', col: '#0EA5E9', rgb: '14,165,233' },
{ key: 'CARD', label: 'CARD', col: '#10B981', rgb: '16,185,129' },
{ key: 'GRANITE', label: 'GRANITE', col: '#A1887F', rgb: '161,136,127' },
];
```
The `needsVendor` condition changes from `workflowType === 'FP' || workflowType === 'Archer'` — this remains the same since GRANITE, like CARD, does not need vendor.
Props:
```js
{
item: Object, // The completed queue item being redirected
onClose: Function, // Close the modal
onRedirect: Function // Callback with the new item after successful redirect
}
```
### Frontend: QueuePanel Changes
#### Grouping Logic
The current grouping logic filters `workflow_type === 'CARD'` into a separate top section. This changes to group both CARD and GRANITE into an "Inventory" section:
```js
const grouped = useMemo(() => {
const inventoryItems = items.filter((i) => i.workflow_type === 'CARD' || i.workflow_type === 'GRANITE');
const cardItems = inventoryItems.filter((i) => i.workflow_type === 'CARD');
const graniteItems = inventoryItems.filter((i) => i.workflow_type === 'GRANITE');
const otherItems = items.filter((i) => i.workflow_type !== 'CARD' && i.workflow_type !== 'GRANITE');
// Vendor groups for FP/Archer items
const map = {};
otherItems.forEach((item) => {
const v = item.vendor || 'Unknown';
if (!map[v]) map[v] = [];
map[v].push(item);
});
const vendorGroups = Object.keys(map).sort().map((vendor) => ({
key: vendor, label: vendor, items: map[vendor], isInventory: false,
}));
return inventoryItems.length > 0
? [{ key: '__INVENTORY__', label: 'Inventory', cardItems, graniteItems, items: inventoryItems, isInventory: true }, ...vendorGroups]
: vendorGroups;
}, [items]);
```
#### Inventory Section Rendering
The Inventory section header uses the existing accent color for the section label. Within the section:
1. CARD items render first
2. A subtle sub-divider appears only when both CARD and GRANITE items exist
3. GRANITE items render below the sub-divider
Each item retains its individual workflow type badge with distinct colors.
#### Workflow Type Color Mapping
Updated to include GRANITE:
```js
const wfColor = item.workflow_type === 'FP' ? { col: '#F59E0B', rgb: '245,158,11' }
: item.workflow_type === 'Archer' ? { col: '#0EA5E9', rgb: '14,165,233' }
: item.workflow_type === 'GRANITE' ? { col: '#A1887F', rgb: '161,136,127' }
: { col: '#10B981', rgb: '16,185,129' };
```
#### GRANITE Item Rendering
GRANITE items render identically to CARD items — showing hostname and ip_address fields (not CVEs), since GRANITE is also an inventory-category workflow. The condition changes from `isCardItem` to `isInventoryItem`:
```js
const isInventoryItem = item.workflow_type === 'CARD' || item.workflow_type === 'GRANITE';
```
#### Redirect Button
A redirect icon button (`CornerUpRight` from lucide-react) on each completed queue item row, next to the existing delete button. Visible only when `item.status === 'complete'` and `canWrite` is true.
### Frontend: AddToQueue Popover
The AddToQueue popover (defined inline in `ReportingPage.js`) adds GRANITE as a fourth workflow type button:
```js
const QUEUE_WORKFLOW_OPTIONS = [
{ key: 'FP', label: 'FP', col: '#F59E0B', rgb: '245,158,11' },
{ key: 'Archer', label: 'Archer', col: '#0EA5E9', rgb: '14,165,233' },
{ key: 'CARD', label: 'CARD', col: '#10B981', rgb: '16,185,129' },
{ key: 'GRANITE', label: 'GRANITE', col: '#A1887F', rgb: '161,136,127' },
];
```
When GRANITE is selected, no vendor field is required — same behavior as CARD. The submit logic uses the same condition: `workflow_type === 'FP' || workflow_type === 'Archer'` to determine if vendor is needed.
### Frontend: API Call
```js
const res = await fetch(`${API_BASE}/ivanti/todo-queue/${itemId}/redirect`, {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ workflow_type, vendor })
});
```
## Data Models
No schema changes. The redirect creates a standard `ivanti_todo_queue` row:
| Column | Source |
|--------|--------|
| user_id | `req.user.id` (current user) |
| finding_id | Copied from original item |
| finding_title | Copied from original item |
| cves_json | Copied from original item |
| ip_address | Copied from original item |
| hostname | Copied from original item |
| vendor | From request body (FP/Archer) or empty string (CARD/GRANITE) |
| workflow_type | From request body (FP, Archer, CARD, or GRANITE) |
| status | `'pending'` (always) |
The original completed item remains unchanged.
## Correctness Properties
*A property is a characteristic or behavior that should hold true across all valid executions of a system — essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
### Property 1: Redirect preserves finding data
*For any* completed queue item with arbitrary finding_id, finding_title, cves_json, ip_address, and hostname values, and *for any* valid target workflow type (FP, Archer, CARD, or GRANITE), redirecting that item SHALL produce a new queue item where finding_id, finding_title, cves_json, ip_address, and hostname are identical to the original, status is "pending", and workflow_type matches the requested target.
**Validates: Requirements 1.1, 1.7**
### Property 2: Vendor requirement is conditional on workflow type
*For any* redirect request, if the target workflow_type is "FP" or "Archer", the request SHALL be accepted if and only if vendor is a non-empty string of 200 characters or fewer. If the target workflow_type is "CARD" or "GRANITE", the request SHALL be accepted regardless of whether vendor is provided.
**Validates: Requirements 1.2, 1.3, 6.2**
### Property 3: Successful redirect produces correct audit entry
*For any* successful redirect operation, the audit log entry SHALL contain action "queue_item_redirected", entityType "ivanti_todo_queue", the original item's ID as entityId, and details including the original workflow_type, the target workflow_type, the new item's ID, and the vendor.
**Validates: Requirements 2.1, 2.2**
## Error Handling
| Scenario | HTTP Status | Error Message | Behavior |
|----------|-------------|---------------|----------|
| Item not found or belongs to another user | 404 | "Queue item not found." | Consistent with existing DELETE/PUT pattern |
| Item status is not "complete" | 400 | "Only completed queue items can be redirected." | Prevents redirecting pending items |
| Invalid workflow_type | 400 | "workflow_type must be FP, Archer, CARD, or GRANITE." | Same message across all endpoints |
| Missing/invalid vendor for FP/Archer | 400 | "vendor is required for FP and Archer workflows." | Same message as existing endpoints |
| Vendor exceeds 200 chars | 400 | "vendor must be under 200 chars." | Same message as existing endpoints |
| Database insert failure | 500 | "Internal server error." | Consistent with existing error pattern |
| Frontend API error | — | Display error message from API in modal | Modal stays open so user can retry or cancel |
The redirect endpoint reuses the existing `isValidVendor()` helper and `VALID_WORKFLOW_TYPES` constant from `ivantiTodoQueue.js` for consistent validation. All error messages for invalid workflow_type now list all four valid options: FP, Archer, CARD, and GRANITE.
Audit logging uses the existing fire-and-forget pattern — a failed audit log write does not block or fail the redirect response.
## Testing Strategy
### Unit Tests (Example-Based)
Backend:
- Redirect a completed CARD item to FP with vendor → 201, new item returned
- Redirect a completed FP item to CARD without vendor → 201, new item returned
- Redirect a completed FP item to GRANITE without vendor → 201, new item returned
- Redirect a completed GRANITE item to Archer with vendor → 201, new item returned
- Redirect a pending item → 400
- Redirect another user's item → 404
- Redirect with invalid workflow_type → 400 with message listing FP, Archer, CARD, GRANITE
- Redirect to FP without vendor → 400
- Redirect to FP with vendor > 200 chars → 400
- Redirect non-existent item → 404
- PUT with invalid workflow_type returns error message "workflow_type must be FP, Archer, CARD, or GRANITE."
- Batch add with workflow_type GRANITE and no vendor → 201
- Single add with workflow_type GRANITE and no vendor → 201
- Verify audit log is called with correct fields on successful redirect
- Verify VALID_WORKFLOW_TYPES includes all four types
Frontend:
- Redirect button visible on completed items, hidden on pending items
- Clicking redirect button opens modal with correct item context
- Modal shows all four workflow type options (FP, Archer, CARD, GRANITE)
- Modal shows vendor field for FP/Archer, hides for CARD and GRANITE
- Modal displays finding title, finding ID, current workflow type
- Successful redirect closes modal, adds new item to list, shows notification
- Failed redirect shows error message, modal stays open
- QueuePanel groups CARD and GRANITE items under "Inventory" section
- Sub-divider shown only when both CARD and GRANITE items exist in Inventory section
- "Inventory" heading shown even when only one sub-type present
- GRANITE badge uses warm slate color (#A1887F)
- CARD badge uses green color (#10B981)
- AddToQueue popover shows GRANITE as fourth option with warm slate color
- Selecting GRANITE in AddToQueue popover does not require vendor
### Property-Based Tests
Library: `fast-check` (JavaScript property-based testing library)
Each property test runs a minimum of 100 iterations.
- **Property 1**: Generate random queue item data (finding_id, finding_title, cves_json, ip_address, hostname with varying lengths, special characters, null optionals) and random valid workflow_type from all four types (FP, Archer, CARD, GRANITE). Mock the database layer. Verify the INSERT parameters preserve all finding fields and set status to "pending".
- Tag: `Feature: ivanti-queue-redirect, Property 1: Redirect preserves finding data`
- **Property 2**: Generate random (workflow_type, vendor) pairs where workflow_type is drawn from all four valid types and vendor is drawn from a mix of valid strings, empty strings, whitespace, strings of length 200, and strings of length 201. Verify that the validation logic accepts/rejects correctly: FP/Archer require non-empty vendor ≤ 200 chars; CARD/GRANITE accept without vendor.
- Tag: `Feature: ivanti-queue-redirect, Property 2: Vendor requirement is conditional on workflow type`
- **Property 3**: Generate random successful redirect scenarios with varying item data and all four workflow types. Mock logAudit. Verify the audit call contains the correct action, entityType, entityId, and all required detail fields.
- Tag: `Feature: ivanti-queue-redirect, Property 3: Successful redirect produces correct audit entry`

View File

@@ -0,0 +1,107 @@
# Requirements Document
## Introduction
The Ivanti Queue Redirect feature gives users the option to redirect any completed queue item to a different workflow type. Not every completed item needs a redirect — many items are fully resolved once their workflow completes. However, some findings require further action under a different workflow. The primary use case is CARD items where the inventory fix is done but the finding still needs an FP or Archer workflow. It also supports correcting items that were assigned to the wrong team by redirecting them after a CARD fix. Additionally, CARD items with high asset scores (90+) that cannot be edited in CARD need to go through the GRANITE program for reassignment or deletion — GRANITE is a first-class workflow type alongside FP, Archer, and CARD. Redirecting is always a user-initiated, optional action that creates a new pending queue item with the target workflow type, preserving the original finding data. Any completed item can redirect to GRANITE, and any completed GRANITE item can redirect to any other type — there is no fixed ordering between workflow types.
## Glossary
- **Queue_Panel**: The slide-out panel in the frontend that displays the user's Ivanti todo queue items. Items are grouped into an Inventory section (containing CARD and GRANITE sub-groups) at the top, followed by vendor-grouped sections for FP and Archer items.
- **Queue_Item**: A row in the `ivanti_todo_queue` table representing a finding assigned to a workflow type (FP, Archer, CARD, or GRANITE) with a status of pending or complete.
- **Redirect**: The action of creating a new pending Queue_Item from an existing completed Queue_Item, changing the workflow type and optionally setting a vendor.
- **Workflow_Type**: One of four processing tracks for a finding: FP (False Positive), Archer (risk acceptance), CARD (inventory correction), or GRANITE (high-asset-score reassignment/deletion).
- **GRANITE**: A workflow type for findings with high asset scores (90+) that cannot be edited in CARD and require reassignment or deletion through the GRANITE program. GRANITE behaves like CARD for validation — no vendor is required.
- **Vendor**: The vendor string associated with a Queue_Item. Required for FP and Archer workflow types, not required for CARD or GRANITE.
- **Redirect_API**: The backend endpoint `POST /api/ivanti/todo-queue/:id/redirect` that performs the redirect operation.
- **Redirect_Modal**: The frontend dialog that collects the target workflow type and vendor from the user before executing a redirect.
- **Inventory_Section**: The top section of the Queue_Panel that groups both CARD and GRANITE items under the heading "Inventory", with a sub-divider separating CARD items (first) from GRANITE items (below).
- **AddToQueue_Popover**: The frontend popover that allows users to add findings to the queue by selecting a workflow type.
## Requirements
### Requirement 1: Redirect a Completed Queue Item via API
**User Story:** As an editor or admin, I want to redirect a completed queue item to a different workflow type, so that I can continue processing a finding under the correct workflow after initial work is done.
#### Acceptance Criteria
1. WHEN a user submits a redirect request for a completed Queue_Item, THE Redirect_API SHALL create a new Queue_Item with status "pending", the specified target Workflow_Type, and the same finding_id, finding_title, cves_json, ip_address, and hostname as the original Queue_Item.
2. WHEN a user submits a redirect request with a target Workflow_Type of "FP" or "Archer", THE Redirect_API SHALL require a non-empty vendor string of 200 characters or fewer.
3. WHEN a user submits a redirect request with a target Workflow_Type of "CARD" or "GRANITE", THE Redirect_API SHALL accept the request without requiring a vendor.
4. IF a user submits a redirect request for a Queue_Item that is not in "complete" status, THEN THE Redirect_API SHALL return a 400 error with a descriptive message.
5. IF a user submits a redirect request for a Queue_Item that belongs to a different user, THEN THE Redirect_API SHALL return a 404 error.
6. IF a user submits a redirect request with an invalid Workflow_Type, THEN THE Redirect_API SHALL return a 400 error indicating valid options are FP, Archer, CARD, or GRANITE.
7. WHEN a redirect is successfully completed, THE Redirect_API SHALL return the newly created Queue_Item with a 201 status code.
### Requirement 2: Audit Logging for Redirects
**User Story:** As an admin, I want redirect actions to be recorded in the audit log, so that I can track workflow changes for compliance and accountability.
#### Acceptance Criteria
1. WHEN a redirect is successfully completed, THE Redirect_API SHALL log an audit entry with action "queue_item_redirected", the user's ID and username, the original Queue_Item ID as entityId, and details including the original Workflow_Type, the target Workflow_Type, the new Queue_Item ID, and the vendor.
2. THE Redirect_API SHALL use entityType "ivanti_todo_queue" for all redirect audit entries.
### Requirement 3: Redirect UI in the Queue Panel
**User Story:** As a user, I want a redirect button on completed queue items, so that I can easily initiate a redirect without leaving the Queue_Panel.
#### Acceptance Criteria
1. WHILE a Queue_Item has status "complete", THE Queue_Panel SHALL display a redirect button on that item.
2. WHILE a Queue_Item has status "pending", THE Queue_Panel SHALL hide the redirect button on that item.
3. WHEN the user clicks the redirect button on a completed Queue_Item, THE Queue_Panel SHALL open the Redirect_Modal pre-populated with the finding details from the selected item.
### Requirement 4: Redirect Modal Workflow
**User Story:** As a user, I want a modal dialog to select the target workflow type and vendor when redirecting, so that I can confirm the redirect details before submitting.
#### Acceptance Criteria
1. THE Redirect_Modal SHALL display a workflow type selector with options FP, Archer, CARD, and GRANITE.
2. WHEN the user selects FP or Archer as the target Workflow_Type, THE Redirect_Modal SHALL display a required vendor input field.
3. WHEN the user selects CARD or GRANITE as the target Workflow_Type, THE Redirect_Modal SHALL hide the vendor input field.
4. THE Redirect_Modal SHALL display the finding title, finding ID, and current Workflow_Type of the item being redirected as read-only context.
5. WHEN the user confirms the redirect in the Redirect_Modal, THE Queue_Panel SHALL call the Redirect_API and add the newly created Queue_Item to the displayed list without requiring a full page refresh.
6. IF the Redirect_API returns an error, THEN THE Redirect_Modal SHALL display the error message to the user and remain open.
7. WHEN the redirect succeeds, THE Redirect_Modal SHALL close and THE Queue_Panel SHALL display a success notification.
### Requirement 5: Fix PUT Endpoint Validation Message
**User Story:** As a developer, I want the PUT endpoint validation message to accurately list all valid workflow types, so that API consumers receive correct error guidance.
#### Acceptance Criteria
1. WHEN a user submits an invalid workflow_type to the PUT /api/ivanti/todo-queue/:id endpoint, THE Redirect_API SHALL return an error message stating "workflow_type must be FP, Archer, CARD, or GRANITE".
### Requirement 6: GRANITE Backend Validation Support
**User Story:** As a developer, I want GRANITE recognized as a valid workflow type across all backend endpoints, so that users can add, update, and redirect GRANITE items through the existing API.
#### Acceptance Criteria
1. THE Redirect_API SHALL include "GRANITE" in the VALID_WORKFLOW_TYPES constant alongside "FP", "Archer", and "CARD".
2. WHEN a user submits a request with Workflow_Type "GRANITE" to the batch add, single add, PUT, or redirect endpoints, THE Redirect_API SHALL accept the request without requiring a vendor, using the same validation rules as "CARD".
3. WHEN any endpoint returns an error for an invalid Workflow_Type, THE Redirect_API SHALL list all four valid options: FP, Archer, CARD, and GRANITE.
### Requirement 7: Inventory Section Grouping in Queue Panel
**User Story:** As a user, I want CARD and GRANITE items grouped together under an "Inventory" heading in the Queue_Panel, so that I can see all inventory-category work in one place while distinguishing between the two sub-types.
#### Acceptance Criteria
1. THE Queue_Panel SHALL display a top section labeled "Inventory" that contains both CARD and GRANITE Queue_Items.
2. WHILE the Inventory_Section contains both CARD and GRANITE items, THE Queue_Panel SHALL display a subtle sub-divider separating CARD items (listed first) from GRANITE items (listed below).
3. THE Queue_Panel SHALL display a workflow type badge on each item showing "CARD" or "GRANITE" with distinct badge colors.
4. THE Queue_Panel SHALL use a warm slate color (#A1887F or #8D6E63) for the GRANITE badge, distinct from the CARD green (#10B981).
5. WHILE the Inventory_Section contains only CARD items or only GRANITE items, THE Queue_Panel SHALL still display the "Inventory" section heading without a sub-divider.
### Requirement 8: GRANITE Support in AddToQueue Popover
**User Story:** As a user, I want to add findings to the queue as GRANITE items directly from the AddToQueue_Popover, so that I can assign high-asset-score findings to the GRANITE workflow without needing to redirect from another type.
#### Acceptance Criteria
1. THE AddToQueue_Popover SHALL display GRANITE as a fourth workflow type button alongside FP, Archer, and CARD.
2. WHEN the user selects GRANITE in the AddToQueue_Popover, THE AddToQueue_Popover SHALL submit the request without requiring a vendor field, using the same behavior as CARD.
3. THE AddToQueue_Popover SHALL use the warm slate color (#A1887F or #8D6E63) for the GRANITE button, consistent with the GRANITE badge color in the Queue_Panel.

View File

@@ -0,0 +1,143 @@
# Implementation Plan: Ivanti Queue Redirect
## Overview
Implement a redirect action for completed Ivanti queue items. The feature adds a `POST /api/ivanti/todo-queue/:id/redirect` endpoint to the existing route module, fixes the PUT validation message, creates a RedirectModal frontend component, and wires a redirect button into the QueuePanel for completed items. Tasks are ordered: backend bug fix, backend endpoint, frontend modal, frontend integration, with property tests alongside each layer.
Additionally, GRANITE is added as a fourth workflow type across the entire stack — backend validation, RedirectModal, QueuePanel grouping (Inventory section), and AddToQueue popover.
## Tasks
- [x] 1. Fix PUT endpoint validation message
- [x] 1.1 Update PUT `/:id` workflow_type error message in `backend/routes/ivantiTodoQueue.js`
- Change `"workflow_type must be FP or Archer."` to `"workflow_type must be FP, Archer, or CARD."`
- _Requirements: 5.1_
- [x] 2. Add redirect endpoint to backend
- [x] 2.1 Add `POST /:id/redirect` route in `backend/routes/ivantiTodoQueue.js`
- Place inside the existing `createIvantiTodoQueueRouter` factory, before the DELETE routes
- Auth: `requireAuth(db)`, `requireGroup('Admin', 'Standard_User')`
- Validate `workflow_type` against existing `VALID_WORKFLOW_TYPES` constant
- For FP/Archer: validate vendor using existing `isValidVendor()` helper; also check length ≤ 200
- For CARD: accept without vendor
- Fetch original item with `db.get()` scoped to `req.user.id`; return 404 if not found
- Return 400 if original item status is not `"complete"`
- INSERT new row copying finding_id, finding_title, cves_json, ip_address, hostname from original; set status `"pending"`, workflow_type and vendor from request body
- Fetch the inserted row, parse cves_json, return 201 with the new item
- Call `logAudit(db, ...)` fire-and-forget with action `"queue_item_redirected"`, entityType `"ivanti_todo_queue"`, entityId = original item ID, details: `{ original_workflow_type, target_workflow_type, new_item_id, vendor }`
- _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 2.1, 2.2_
- [x] 3. Checkpoint — Verify backend changes
- Ensure all tests pass, ask the user if questions arise.
- [x] 4. Create RedirectModal frontend component
- [x] 4.1 Create `frontend/src/components/RedirectModal.js`
- Props: `item` (the completed queue item), `onClose` (function), `onRedirect` (function called with new item)
- Display read-only context: finding title, finding ID, current workflow type
- Workflow type selector (radio buttons or select) with options FP, Archer, CARD
- Vendor text input shown only when FP or Archer is selected; required for those types
- Submit button calls `POST /api/ivanti/todo-queue/${item.id}/redirect` with `credentials: 'include'`
- On success: call `onRedirect(newItem)`, close modal
- On error: display error message from API response, keep modal open
- Loading state on submit button to prevent double-clicks
- Style with inline style objects following DESIGN_SYSTEM.md (dark theme, accent borders, gradient backgrounds)
- Use lucide-react icons (e.g., `CornerUpRight` or `ArrowRightLeft`)
- _Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.7_
- [x] 5. Integrate redirect button and modal into QueuePanel
- [x] 5.1 Add redirect button to completed items in QueuePanel (inside `frontend/src/components/pages/ReportingPage.js`)
- Add a redirect icon button (lucide-react) on each completed queue item row, next to the existing delete button
- Button visible only when `item.status === 'complete'`; hidden for pending items
- _Requirements: 3.1, 3.2_
- [x] 5.2 Wire RedirectModal state and rendering in QueuePanel
- Add `redirectItem` state (null or the item being redirected)
- Clicking the redirect button sets `redirectItem` to that item, opening the modal
- On successful redirect (`onRedirect` callback): append the new item to the queue items list, show a success notification, clear `redirectItem`
- On close: clear `redirectItem`
- Import and render `<RedirectModal>` conditionally when `redirectItem` is set
- _Requirements: 3.3, 4.5, 4.7_
- [x] 6. Final checkpoint — Ensure all tests pass
- Ensure all tests pass, ask the user if questions arise.
- [ ] 7. Add GRANITE to backend validation
- [ ] 7.1 Update `VALID_WORKFLOW_TYPES` constant in `backend/routes/ivantiTodoQueue.js`
- Change from `['FP', 'Archer', 'CARD']` to `['FP', 'Archer', 'CARD', 'GRANITE']`
- _Requirements: 6.1_
- [ ] 7.2 Update vendor validation condition in POST `/` (single add) endpoint
- Change `workflow_type !== 'CARD'` to `workflow_type === 'FP' || workflow_type === 'Archer'` (or `!['CARD', 'GRANITE'].includes(workflow_type)`) for the vendor-required check
- Change `workflow_type === 'CARD' ? '' : vendor.trim()` to `(workflow_type === 'CARD' || workflow_type === 'GRANITE') ? '' : vendor.trim()` for vendorVal assignment
- _Requirements: 6.2_
- [ ] 7.3 Update vendor validation condition in POST `/batch` endpoint
- Change `workflow_type !== 'CARD'` to `workflow_type === 'FP' || workflow_type === 'Archer'` for the vendor-required check
- Change `workflow_type === 'CARD' ? '' : vendor.trim()` to `(workflow_type === 'CARD' || workflow_type === 'GRANITE') ? '' : vendor.trim()` for vendorVal assignment
- _Requirements: 6.2_
- [ ] 7.4 Update vendor validation condition in POST `/:id/redirect` endpoint
- Change `workflow_type !== 'CARD'` to `workflow_type === 'FP' || workflow_type === 'Archer'` for the vendor-required check
- Change `workflow_type === 'CARD' ? '' : vendor.trim()` to `(workflow_type === 'CARD' || workflow_type === 'GRANITE') ? '' : vendor.trim()` for vendorVal assignment
- _Requirements: 6.2_
- [ ] 7.5 Update all error messages across all endpoints
- Change `"workflow_type must be FP, Archer, or CARD."` to `"workflow_type must be FP, Archer, CARD, or GRANITE."` in POST `/`, POST `/batch`, PUT `/:id`, and POST `/:id/redirect`
- _Requirements: 5.1, 6.3_
- [ ] 8. Add GRANITE to RedirectModal
- [ ] 8.1 Update `WORKFLOW_OPTIONS` in `frontend/src/components/RedirectModal.js`
- Add `{ key: 'GRANITE', label: 'GRANITE', col: '#A1887F', rgb: '161,136,127' }` as the fourth option
- Vendor field already hidden for non-FP/Archer types via `needsVendor` check — no change needed there
- _Requirements: 4.1, 4.3_
- [ ] 9. Update QueuePanel grouping for Inventory section
- [ ] 9.1 Update the `grouped` useMemo in QueuePanel (`frontend/src/components/pages/ReportingPage.js`)
- Change `items.filter((i) => i.workflow_type === 'CARD')` to filter both CARD and GRANITE into inventory items
- Split inventory items into `cardItems` and `graniteItems` sub-arrays
- Change `otherItems` filter from `i.workflow_type !== 'CARD'` to exclude both CARD and GRANITE
- Rename group key from `__CARD__` to `__INVENTORY__`, label from `'CARD'` to `'Inventory'`, and `isCard` to `isInventory`
- Include `cardItems` and `graniteItems` as separate properties on the inventory group object
- _Requirements: 7.1, 7.5_
- [ ] 9.2 Update the QueuePanel rendering to handle the Inventory section
- Update the `.map()` destructuring from `isCard` to `isInventory`
- Update group header border and label color to use `isInventory` instead of `isCard`
- For the Inventory group, render CARD items first, then a subtle sub-divider (only when both `cardItems.length > 0` and `graniteItems.length > 0`), then GRANITE items
- _Requirements: 7.1, 7.2, 7.5_
- [ ] 9.3 Update the workflow type color mapping in QueuePanel item rendering
- Add GRANITE to the `wfColor` ternary: `item.workflow_type === 'GRANITE' ? { col: '#A1887F', rgb: '161,136,127' }` before the default CARD fallback
- _Requirements: 7.3, 7.4_
- [ ] 9.4 Update `isCardItem` to `isInventoryItem` in QueuePanel item rendering
- Change `const isCardItem = item.workflow_type === 'CARD'` to `const isInventoryItem = item.workflow_type === 'CARD' || item.workflow_type === 'GRANITE'`
- Update the conditional rendering that uses `isCardItem` to use `isInventoryItem` (hostname/ip_address display vs CVE display)
- _Requirements: 7.1_
- [ ] 10. Add GRANITE to AddToQueuePopover
- [ ] 10.1 Update workflow type buttons in `AddToQueuePopover` (`frontend/src/components/pages/ReportingPage.js`)
- Add `{ key: 'GRANITE', col: '#A1887F', rgb: '161,136,127' }` as the fourth button in the workflow type toggle array
- _Requirements: 8.1, 8.3_
- [ ] 10.2 Update `isCard` condition in `AddToQueuePopover` to include GRANITE
- Change `const isCard = queueForm.workflowType === 'CARD'` to `const isCard = queueForm.workflowType === 'CARD' || queueForm.workflowType === 'GRANITE'` (or rename to `isInventory`)
- This controls the "No vendor required" message and hides the vendor input for GRANITE
- _Requirements: 8.2_
- [ ] 10.3 Update `SelectionToolbar` component to include GRANITE
- Add `{ type: 'GRANITE', color: '#A1887F', rgb: '161,136,127' }` as the fourth button in the workflow type toggles array
- Change `const isCard = workflowType === 'CARD'` to include GRANITE: `const isCard = workflowType === 'CARD' || workflowType === 'GRANITE'`
- _Requirements: 8.1, 8.2, 8.3_
- [ ] 11. Final checkpoint — Verify all GRANITE changes
- Ensure all changes compile and render correctly, ask the user if questions arise.
## Notes
- Tasks 16 are the original redirect feature tasks, all completed
- Tasks 711 are the new GRANITE workflow type additions
- No test tasks included per user request — testing will be done manually on the dev server
- Each task references specific requirements for traceability
- The QueuePanel component is defined inside `ReportingPage.js`, not a separate file
- The project uses plain JavaScript (no TypeScript)

View File

@@ -0,0 +1 @@
{"specId": "acff93bd-0045-4fcd-b948-cc52c7cc5ec6", "workflowType": "requirements-first", "specType": "feature"}

View File

@@ -0,0 +1,400 @@
# Design Document: Reporting Row Visibility
## Overview
This feature adds row-level visibility controls to the Reporting page's findings table, allowing security analysts to temporarily hide specific rows from view. Hidden rows are excluded from the visible table, the Action Coverage donut chart, and CSV/XLSX exports. The feature is entirely frontend — no backend changes are needed. All state is persisted in browser localStorage.
The feature consists of five interconnected pieces:
1. **Per-row hide button** — An `EyeOff` icon button on each table row that hides that finding
2. **Bulk select and hide** — Checkboxes on each row, a select-all checkbox, and a bulk action toolbar for hiding multiple rows at once
3. **Row Visibility Manager** — A toolbar popover (modeled after the existing `ColumnManager`) for viewing and restoring hidden rows
4. **Chart integration** — The Action Coverage donut chart recalculates using only visible (non-hidden) findings
5. **Export integration** — CSV and XLSX exports include only visible rows
### Design Decisions
- **localStorage over backend storage**: Row visibility is a personal view preference, not shared team state. Storing it in localStorage keeps the feature zero-cost on the backend and avoids auth/permission complexity. This mirrors how column visibility is already handled via `STORAGE_KEY`.
- **Hide-before-filter pipeline**: Hidden rows are removed from the dataset before column filters, action coverage filters, and EXC filters are applied. This ensures hidden rows never appear in filter dropdowns or affect filter counts.
- **Stale IDs are retained silently**: If a hidden Finding_ID no longer exists after an Ivanti sync, the ID stays in localStorage. This avoids the need for cleanup logic and ensures the finding is re-hidden if it reappears in a future sync.
- **Selection state is transient**: The checkbox selection state (`Row_Selection_State`) is not persisted. It resets on page reload and clears after a bulk hide operation.
## Architecture
The feature is contained entirely within `frontend/src/components/pages/ReportingPage.js`. No new files are created. The changes integrate into the existing component hierarchy and data flow.
```mermaid
flowchart TD
subgraph ReportingPage State
A[findings - raw from API] --> B[hiddenRowIds - from localStorage]
B --> C[visibleFindings = findings minus hiddenRowIds]
C --> D[filtered - column/action/EXC filters applied]
D --> E[sorted - sort order applied]
E --> F[Table rows rendered]
C --> G[ActionCoverageDonut receives visibleFindings]
E --> H[Export functions use sorted visible rows]
end
subgraph New Components
I[RowVisibilityManager popover]
J[BulkActionToolbar]
K[Selection checkboxes]
L[Per-row hide button]
end
I -->|restore| B
J -->|bulk hide| B
L -->|single hide| B
K -->|toggle selection| M[selectedRowIds - transient state]
M --> J
```
### Data Flow Pipeline
The existing filtering pipeline in `VulnerabilityTriagePage` is:
```
findings → columnFilters → actionFilter → excFilter → sorted → rendered/exported
```
The new pipeline inserts row hiding as the first step:
```
findings → HIDE (remove hiddenRowIds) → columnFilters → actionFilter → excFilter → sorted → rendered/exported
```
This ensures hidden rows are excluded before any other filtering logic runs.
## Components and Interfaces
### 1. Hidden Row State Management
New state and helpers added to `VulnerabilityTriagePage`:
```javascript
const HIDDEN_ROWS_KEY = 'steam_findings_hidden_rows';
// Load hidden row IDs from localStorage
function loadHiddenRows() {
try {
const saved = JSON.parse(localStorage.getItem(HIDDEN_ROWS_KEY) || 'null');
if (saved && Array.isArray(saved)) return new Set(saved);
} catch { /* corrupted — treat as empty */ }
return new Set();
}
// Persist hidden row IDs to localStorage
function saveHiddenRows(hiddenSet) {
try {
localStorage.setItem(HIDDEN_ROWS_KEY, JSON.stringify([...hiddenSet]));
} catch { /* localStorage unavailable — degrade silently */ }
}
```
**State declarations:**
```javascript
const [hiddenRowIds, setHiddenRowIds] = useState(loadHiddenRows);
const [selectedRowIds, setSelectedRowIds] = useState(new Set());
```
**Hide/restore operations:**
```javascript
// Hide a single row
const hideRow = useCallback((findingId) => {
setHiddenRowIds(prev => {
const next = new Set(prev);
next.add(String(findingId));
saveHiddenRows(next);
return next;
});
}, []);
// Restore a single row
const restoreRow = useCallback((findingId) => {
setHiddenRowIds(prev => {
const next = new Set(prev);
next.delete(String(findingId));
saveHiddenRows(next);
return next;
});
}, []);
// Restore all hidden rows
const restoreAllRows = useCallback(() => {
setHiddenRowIds(new Set());
saveHiddenRows(new Set());
}, []);
// Bulk hide selected rows
const hideSelectedRows = useCallback(() => {
setHiddenRowIds(prev => {
const next = new Set(prev);
selectedRowIds.forEach(id => next.add(String(id)));
saveHiddenRows(next);
return next;
});
setSelectedRowIds(new Set());
}, [selectedRowIds]);
```
### 2. Modified Filtering Pipeline
The existing `filtered` useMemo is modified to exclude hidden rows first:
```javascript
// New: visible findings (hidden rows removed) — fed to ActionCoverageDonut
const visibleFindings = useMemo(() => {
if (hiddenRowIds.size === 0) return findings;
return findings.filter(f => !hiddenRowIds.has(String(f.id)));
}, [findings, hiddenRowIds]);
// Modified: filtered now starts from visibleFindings instead of findings
const filtered = useMemo(() => {
let result = visibleFindings;
// ... existing column filter, action filter, EXC filter logic unchanged
}, [visibleFindings, columnFilters, actionFilter, excFilter]);
```
The `ActionCoverageDonut` receives `visibleFindings` instead of `findings`:
```jsx
<ActionCoverageDonut
findings={visibleFindings} // was: findings
activeSegment={actionFilter}
onSegmentClick={...}
/>
```
### 3. Selection State Management
```javascript
// Clear selection when visible rows change (filter changes)
useEffect(() => {
setSelectedRowIds(prev => {
const visibleIds = new Set(sorted.map(f => String(f.id)));
const next = new Set([...prev].filter(id => visibleIds.has(id)));
return next.size === prev.size ? prev : next;
});
}, [sorted]);
// Toggle a single row's selection
const toggleRowSelection = useCallback((findingId) => {
setSelectedRowIds(prev => {
const next = new Set(prev);
const id = String(findingId);
if (next.has(id)) next.delete(id); else next.add(id);
return next;
});
}, []);
// Select/deselect all visible rows
const toggleSelectAll = useCallback(() => {
const allVisibleIds = sorted.map(f => String(f.id));
setSelectedRowIds(prev => {
if (prev.size === allVisibleIds.length) return new Set(); // deselect all
return new Set(allVisibleIds); // select all
});
}, [sorted]);
```
### 4. RowVisibilityManager Component
A new component following the same pattern as `ColumnManager`:
```javascript
function RowVisibilityManager({ hiddenRowIds, findings, onRestore, onRestoreAll }) {
// Props:
// hiddenRowIds: Set<string> — currently hidden finding IDs
// findings: Array — full findings array (to look up titles for hidden IDs)
// onRestore: (findingId: string) => void
// onRestoreAll: () => void
//
// State:
// open: boolean — popover visibility
//
// Behavior:
// - Button shows EyeOff icon + "Hidden (N)" count
// - Popover lists hidden findings by ID and title
// - Each entry has an Eye icon restore button
// - "Restore All" button at the bottom
// - When hiddenRowIds.size === 0, popover shows "No rows hidden" message
// - Closes on outside click (same pattern as ColumnManager)
}
```
**Placement:** Rendered in the toolbar `div` adjacent to the `ColumnManager` button, between the ColumnManager and the Sync button.
### 5. BulkActionToolbar Component
Rendered above the table when `selectedRowIds.size > 0`:
```javascript
function BulkHideToolbar({ count, onHide, onClear }) {
// Props:
// count: number — selected row count
// onHide: () => void — hide all selected rows
// onClear: () => void — clear selection
//
// Renders:
// "{count} rows selected" label
// "Hide Selected" button with EyeOff icon
// "Clear" button to deselect all
}
```
**Placement:** Rendered inside the table scroll container, above the `<table>` element, in the same position as the existing `SelectionToolbar` for batch FP submissions. The bulk hide toolbar appears alongside (or replaces) the existing selection toolbar depending on context.
### 6. Per-Row Hide Button and Selection Checkbox
Two new fixed columns are added to the table, before the existing checkbox column:
| Column | Width | Content | Position |
|--------|-------|---------|----------|
| Selection checkbox | 36px | `Square` / `CheckSquare` icon (lucide-react) | First column |
| Hide button | 36px | `EyeOff` icon button | Second column |
Both columns are fixed (not managed by `ColumnManager`) and use sticky positioning in the header.
### 7. Select All Checkbox
Rendered in the table header for the selection column:
- **Unchecked** (`Square` icon): No rows selected
- **Checked** (`CheckSquare` icon): All visible rows selected
- **Indeterminate** (`MinusSquare` icon): Some but not all visible rows selected
## Data Models
### localStorage Schema
**Key:** `steam_findings_hidden_rows`
**Value:** JSON array of Finding ID strings
```json
["12345", "67890", "11111"]
```
**Constraints:**
- Finding IDs are stored as strings for consistent comparison
- The array may contain IDs that no longer exist in the current findings dataset (stale IDs are retained)
- An empty array `[]` or missing key both mean "no rows hidden"
- If the stored value fails JSON parsing, it is treated as empty (all rows visible)
### Component State
| State Variable | Type | Persisted | Description |
|---------------|------|-----------|-------------|
| `hiddenRowIds` | `Set<string>` | Yes (localStorage) | Finding IDs currently hidden |
| `selectedRowIds` | `Set<string>` | No (transient) | Finding IDs currently selected via checkboxes |
### Derived Data
| Variable | Derivation | Used By |
|----------|-----------|---------|
| `visibleFindings` | `findings.filter(f => !hiddenRowIds.has(f.id))` | ActionCoverageDonut, filter pipeline |
| `filtered` | `visibleFindings` → column filters → action filter → EXC filter | Sort, table render |
| `sorted` | `filtered` → sort comparator | Table render, export |
## Correctness Properties
*A property is a characteristic or behavior that should hold true across all valid executions of a system — essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
### Property 1: Hidden row filtering invariant
*For any* array of findings and *any* set of hidden Finding_IDs, the `visibleFindings` array SHALL never contain a finding whose ID is in the hidden set.
**Validates: Requirements 1.1, 1.2, 4.1, 4.3, 5.1, 5.2, 6.1, 6.2**
### Property 2: localStorage round-trip preserves hidden row state
*For any* set of valid Finding_ID strings, calling `saveHiddenRows(set)` followed by `loadHiddenRows()` SHALL return a set containing exactly the same elements.
**Validates: Requirements 2.1, 2.2**
### Property 3: Corrupted localStorage produces empty set
*For any* string that is not a valid JSON array of strings, `loadHiddenRows()` SHALL return an empty set, and no error SHALL be thrown.
**Validates: Requirements 2.4**
### Property 4: Restore removes exactly the specified ID
*For any* non-empty set of hidden Finding_IDs and *any* ID in that set, calling `restoreRow(id)` SHALL produce a new hidden set that is equal to the original set minus that single ID.
**Validates: Requirements 3.3**
### Property 5: Bulk hide produces the union of hidden and selected sets
*For any* set of currently hidden Finding_IDs and *any* set of selected Finding_IDs, calling `hideSelectedRows()` SHALL produce a hidden set equal to the union of both sets, and the selection set SHALL be empty afterward.
**Validates: Requirements 8.5, 8.6**
### Property 6: Selection is always a subset of visible rows
*For any* set of selected Finding_IDs and *any* change to the visible row set (via filter changes or row hiding), the resulting selection set SHALL be a subset of the current visible row IDs.
**Validates: Requirements 8.8**
### Property 7: Select all produces exactly the visible row ID set
*For any* array of currently visible (sorted) findings, calling `toggleSelectAll` when no rows are selected SHALL produce a selection set equal to the set of all visible Finding_IDs. Calling `toggleSelectAll` when all rows are selected SHALL produce an empty selection set.
**Validates: Requirements 8.2, 8.3**
## Error Handling
| Scenario | Behavior |
|----------|----------|
| localStorage unavailable (private browsing, quota exceeded) | `saveHiddenRows` fails silently via try/catch. `loadHiddenRows` returns empty set. All rows remain visible. Feature degrades to session-only (hidden state lost on reload). |
| Corrupted localStorage value | `loadHiddenRows` catches JSON parse error and returns empty set. No error shown to user. |
| Stale Finding_ID in hidden set (ID no longer in findings after sync) | ID is retained in localStorage. The `filter()` call simply doesn't match any finding, so no visible effect. If the finding reappears in a future sync, it will be hidden again automatically. |
| Empty findings array | `visibleFindings` is empty. `selectedRowIds` is empty. Charts show "No data" state. Export produces headers only. All controls render but have no actionable items. |
| Bulk hide with empty selection | The "Hide Selected" button is only shown when `selectedRowIds.size > 0`, so this state is unreachable via the UI. If called programmatically, `hideSelectedRows` is a no-op (union with empty set). |
| Select all with no visible rows | `toggleSelectAll` produces an empty set (no rows to select). |
## Testing Strategy
### Property-Based Tests
The feature's core logic — set operations, filtering, localStorage serialization — is well-suited for property-based testing. The functions under test are pure or near-pure (localStorage can be mocked), and the input space (sets of string IDs, arrays of finding objects) is large.
**Library:** [fast-check](https://github.com/dubzzz/fast-check) — the standard PBT library for JavaScript/React projects.
**Configuration:** Each property test runs a minimum of 100 iterations.
**Tag format:** Each test is tagged with a comment: `// Feature: reporting-row-visibility, Property N: <property text>`
**Properties to implement:**
| Property | Test Description | Key Generators |
|----------|-----------------|----------------|
| 1 | Filter findings by hidden set, verify no hidden ID in output | `fc.array(findingArb)`, `fc.uniqueArray(fc.string())` |
| 2 | Save then load hidden rows, verify round-trip equality | `fc.uniqueArray(fc.stringOf(fc.constantFrom(...digits), {minLength: 1}))` |
| 3 | Set corrupted string in localStorage, verify loadHiddenRows returns empty set | `fc.string()` filtered to exclude valid JSON arrays |
| 4 | Remove one ID from hidden set, verify set difference | `fc.uniqueArray(fc.string(), {minLength: 1})`, pick random element |
| 5 | Union hidden + selected sets, verify result and empty selection | `fc.uniqueArray(fc.string())` × 2 |
| 6 | Generate selection + filter change, verify selection ⊆ visible | `fc.uniqueArray(fc.string())` for selection and visible sets |
| 7 | Select all from visible set, verify equality; toggle again, verify empty | `fc.array(findingArb)` |
### Unit Tests (Example-Based)
Unit tests cover specific scenarios, UI rendering, and edge cases that don't benefit from randomized input:
- **Hide button renders on each row** (Req 1.3) — verify EyeOff icon in fixed column
- **Hide button visible for viewer role** (Req 1.4) — render with read-only auth context
- **localStorage write on hide/restore** (Req 2.3) — mock localStorage, verify setItem called
- **Row Visibility Manager button shows count** (Req 3.1) — verify "Hidden (N)" text
- **Row Visibility Manager popover lists hidden findings** (Req 3.2) — click button, verify list
- **Restore All clears all hidden rows** (Req 3.4) — verify empty set after restoreAll
- **"Hidden (0)" when no rows hidden** (Req 3.5) — verify button text and empty message
- **Chart re-renders after hide** (Req 4.2) — verify ActionCoverageDonut receives updated findings
- **Hidden state preserved across sync** (Req 5.3) — simulate sync, verify hiddenRowIds unchanged
- **Stale IDs retained silently** (Req 5.4) — hide ID, remove from findings, verify no error
- **Bulk action toolbar appears with count** (Req 8.4) — select rows, verify toolbar renders
- **Indeterminate checkbox state** (Req 8.9) — partial selection, verify MinusSquare icon
- **Toolbar hidden when no selection** (Req 8.10) — empty selection, verify no toolbar
- **Styling consistency** (Req 7.1, 7.2, 7.3, 8.11) — snapshot tests for visual consistency

View File

@@ -0,0 +1,115 @@
# Requirements Document
## Introduction
The Reporting page in the STEAM Security Dashboard displays a table of Ivanti host findings with columns for finding ID, severity, title, CVEs, hostname, IP address, DNS, due date, SLA status, BU ownership, workflow, last found date, and notes. Some findings have manually entered notes such as "NOT STEAM/ACCESS", "MongoDB Update", or other free-text annotations indicating that work is being done outside of the automated FP or Archer exception workflows. These manually-noted findings are classified as "pending" in the Action Coverage donut chart, inflating the pending count even though they represent active remediation efforts.
Users need the ability to temporarily hide specific rows from the table view — similar to how columns can already be hidden via the ColumnManager popover. Hidden rows should be excluded from the visible table and from the Action Coverage chart calculations, but the underlying data must remain intact. The feature should persist across page reloads and provide a clear mechanism to reveal hidden rows or restore them individually.
## Glossary
- **Reporting_Table**: The findings data table rendered on the Reporting page, displaying one row per Ivanti host finding with sortable, filterable columns.
- **Row_Visibility_State**: A client-side record of which finding IDs have been hidden by the user. Stored in browser localStorage for persistence across sessions.
- **Hidden_Row**: A finding whose ID is present in the Row_Visibility_State hidden set. Hidden rows are excluded from the visible table and from chart metric calculations.
- **ColumnManager**: The existing popover component on the Reporting page that allows users to show/hide columns and reorder them via drag-and-drop. The row-hiding feature follows a similar UX pattern.
- **Action_Coverage_Chart**: The donut chart on the Reporting page that classifies open findings into three categories — FP Request, Archer Exception, and Pending — based on workflow status and note content.
- **Row_Visibility_Manager**: A new UI component that provides controls for viewing and restoring hidden rows, analogous to the ColumnManager for columns.
- **Finding_ID**: The unique Ivanti-assigned identifier for each host finding, used as the key for tracking hidden rows.
- **Row_Selection_State**: A transient client-side record of which Finding_IDs are currently selected via checkboxes. This state is not persisted and resets on page reload or after a bulk action completes.
- **Selection_Checkbox**: A checkbox control rendered in a fixed column on each visible row, used to toggle that row's inclusion in the Row_Selection_State.
- **Select_All_Checkbox**: A checkbox control rendered in the table header that toggles selection of all currently visible (non-hidden, post-filter) rows.
- **Bulk_Action_Toolbar**: A contextual toolbar that appears above the Reporting_Table when one or more rows are selected, displaying the count of selected rows and bulk action controls.
## Requirements
### Requirement 1: Hide Individual Rows from the Reporting Table
**User Story:** As a security analyst, I want to hide specific rows in the Reporting table by clicking a hide control on each row, so that I can remove manually-handled findings from view without deleting them.
#### Acceptance Criteria
1. THE Reporting_Table SHALL display a hide button on each row that, when clicked, adds the row's Finding_ID to the Row_Visibility_State hidden set.
2. WHEN a row's Finding_ID is added to the Row_Visibility_State hidden set, THE Reporting_Table SHALL immediately remove that row from the visible table without a page reload.
3. THE hide button SHALL be rendered as an icon button (using the `EyeOff` icon from lucide-react) in a fixed column that is not managed by the ColumnManager.
4. WHEN the user has no write permissions (viewer role), THE Reporting_Table SHALL still display the hide button, as row visibility is a personal view preference and not a data modification.
### Requirement 2: Persist Hidden Row State Across Sessions
**User Story:** As a security analyst, I want my hidden row selections to persist when I navigate away and return to the Reporting page, so that I do not have to re-hide the same rows every session.
#### Acceptance Criteria
1. THE Row_Visibility_State SHALL be stored in browser localStorage under a dedicated key (e.g., `steam_findings_hidden_rows`).
2. WHEN the Reporting page loads, THE Reporting_Table SHALL read the Row_Visibility_State from localStorage and exclude hidden Finding_IDs from the visible table.
3. WHEN the Row_Visibility_State changes (row hidden or restored), THE Reporting_Table SHALL write the updated state to localStorage immediately.
4. IF localStorage is unavailable or the stored value is corrupted, THEN THE Reporting_Table SHALL treat all rows as visible and continue operating without error.
### Requirement 3: Row Visibility Manager Panel
**User Story:** As a security analyst, I want a panel that shows me which rows are currently hidden and lets me restore them, so that I can manage my hidden rows and bring back findings I no longer want to hide.
#### Acceptance Criteria
1. THE Row_Visibility_Manager SHALL be accessible via a toolbar button placed adjacent to the existing ColumnManager button, using the `EyeOff` icon and displaying a count of currently hidden rows (e.g., "Hidden (3)").
2. WHEN the Row_Visibility_Manager button is clicked, THE Row_Visibility_Manager SHALL open a popover panel listing all currently hidden findings by Finding_ID and title.
3. THE Row_Visibility_Manager panel SHALL provide a restore button (using the `Eye` icon) next to each hidden finding entry that, when clicked, removes that Finding_ID from the Row_Visibility_State and returns the row to the visible table.
4. THE Row_Visibility_Manager panel SHALL provide a "Restore All" button that clears the entire Row_Visibility_State and returns all hidden rows to the visible table.
5. WHEN no rows are hidden, THE Row_Visibility_Manager button SHALL display "Hidden (0)" and the popover panel SHALL display a message indicating no rows are hidden.
### Requirement 4: Exclude Hidden Rows from Action Coverage Metrics
**User Story:** As a security analyst, I want hidden rows to be excluded from the Action Coverage donut chart, so that manually-handled findings I have hidden do not inflate the "Pending" count.
#### Acceptance Criteria
1. THE Action_Coverage_Chart SHALL compute its FP Request, Archer Exception, and Pending counts using only visible (non-hidden) findings.
2. WHEN a row is hidden or restored, THE Action_Coverage_Chart SHALL recalculate and re-render immediately to reflect the updated visible finding set.
3. THE Action_Coverage_Chart segment click filtering SHALL operate only on visible findings, so clicking a segment filters within the non-hidden set.
### Requirement 5: Hidden Row Interaction with Existing Filters
**User Story:** As a security analyst, I want row hiding to work correctly alongside column filters, sort order, and the action coverage chart filter, so that hiding rows does not interfere with other table controls.
#### Acceptance Criteria
1. THE Reporting_Table SHALL apply row hiding before column filters, so that hidden rows are excluded from the dataset before any column filter, sort, or action coverage filter is applied.
2. WHEN a finding is hidden and a column filter is active, THE Reporting_Table SHALL not include the hidden finding in filter value dropdowns or filter counts.
3. WHEN findings are synced from Ivanti (Sync button), THE Row_Visibility_State SHALL be preserved — previously hidden Finding_IDs remain hidden if they still exist in the refreshed dataset.
4. IF a hidden Finding_ID no longer exists in the synced findings data, THEN THE Row_Visibility_State SHALL retain the ID silently (no error) so that it is automatically re-hidden if the finding reappears in a future sync.
### Requirement 6: Export Behavior for Hidden Rows
**User Story:** As a security analyst, I want CSV and XLSX exports to include only visible rows by default, so that my exports reflect the same filtered view I see on screen.
#### Acceptance Criteria
1. WHEN the user exports data via CSV or XLSX, THE Reporting_Table SHALL export only the currently visible (non-hidden, post-filter) rows.
2. THE export SHALL respect all active filters (column filters, action coverage filter, EXC filter) in addition to row hiding, exporting only the intersection of all active view constraints.
### Requirement 7: Visual Styling Consistency
**User Story:** As a security analyst, I want the row-hiding controls to match the existing dashboard aesthetic, so that the feature feels native to the application.
#### Acceptance Criteria
1. THE hide button on each row SHALL use the same icon size (13px), color palette (muted slate for default, accent blue on hover), and monospace font styling as existing toolbar controls.
2. THE Row_Visibility_Manager popover SHALL use the same panel styling (dark gradient background, accent border, box shadow) as the existing ColumnManager popover.
3. THE Row_Visibility_Manager toolbar button SHALL use the same button styling (padding, border radius, font size, uppercase text) as the existing ColumnManager and Queue toolbar buttons.
### Requirement 8: Bulk Hide Rows via Multi-Select
**User Story:** As a security analyst, I want to select multiple rows and hide them all at once, so that I can quickly clear out batches of manually-handled findings without clicking hide on each row individually.
#### Acceptance Criteria
1. THE Reporting_Table SHALL display a Selection_Checkbox on each visible row in a fixed column that is not managed by the ColumnManager, positioned before the hide button column.
2. THE Reporting_Table SHALL display a Select_All_Checkbox in the table header of the selection column that, when checked, adds all currently visible (non-hidden, post-filter) Finding_IDs to the Row_Selection_State.
3. WHEN the Select_All_Checkbox is unchecked, THE Reporting_Table SHALL remove all Finding_IDs from the Row_Selection_State.
4. WHEN one or more Finding_IDs are present in the Row_Selection_State, THE Bulk_Action_Toolbar SHALL appear above the Reporting_Table displaying the count of selected rows (e.g., "3 rows selected") and a "Hide Selected" button using the `EyeOff` icon.
5. WHEN the "Hide Selected" button is clicked, THE Reporting_Table SHALL add all Finding_IDs in the Row_Selection_State to the Row_Visibility_State hidden set in a single operation.
6. WHEN a bulk hide operation completes, THE Reporting_Table SHALL clear the Row_Selection_State so that no rows remain selected.
7. WHEN a bulk hide operation completes, THE Action_Coverage_Chart SHALL recalculate and re-render immediately to reflect the updated visible finding set.
8. WHEN column filters or the action coverage filter change the set of visible rows, THE Row_Selection_State SHALL remove any Finding_IDs that are no longer visible, so that the selection always reflects the current filtered view.
9. THE Select_All_Checkbox SHALL display an indeterminate state when some but not all visible rows are selected.
10. WHEN no rows are selected, THE Bulk_Action_Toolbar SHALL not be displayed.
11. THE Selection_Checkbox, Select_All_Checkbox, and Bulk_Action_Toolbar SHALL use the same color palette (muted slate for default, accent blue for checked/active state), monospace font styling, and dark gradient background as existing toolbar controls defined in the design system.

View File

@@ -0,0 +1,127 @@
# Implementation Plan: Reporting Row Visibility
## Overview
This plan implements row-level visibility controls for the Reporting page's findings table. All changes are contained within `frontend/src/components/pages/ReportingPage.js` — no new files, no backend changes. The implementation adds hidden row state management (localStorage-persisted), a visibility filtering step in the data pipeline, selection checkboxes with bulk hide, a Row Visibility Manager popover, chart/export integration, and per-row hide buttons. Each task builds incrementally on the previous one, wiring everything together by the final step.
## Tasks
- [x] 1. Add hidden row state management and localStorage helpers
- Add the `HIDDEN_ROWS_KEY` constant (`'steam_findings_hidden_rows'`)
- Implement `loadHiddenRows()` function that reads from localStorage, parses JSON, returns a `Set<string>` (empty set on parse failure or missing key)
- Implement `saveHiddenRows(hiddenSet)` function that serializes the set to a JSON array and writes to localStorage (silent catch on failure)
- Add `hiddenRowIds` state initialized via `useState(loadHiddenRows)`
- Implement `hideRow(findingId)` callback that adds a string ID to the set and persists
- Implement `restoreRow(findingId)` callback that removes a string ID from the set and persists
- Implement `restoreAllRows()` callback that clears the set and persists an empty set
- _Requirements: 1.1, 2.1, 2.2, 2.3, 2.4_
- [ ]* 1.1 Write property test: localStorage round-trip preserves hidden row state
- **Property 2: localStorage round-trip preserves hidden row state**
- Generate arbitrary sets of valid Finding_ID strings, call `saveHiddenRows` then `loadHiddenRows`, assert the returned set contains exactly the same elements
- **Validates: Requirements 2.1, 2.2**
- [ ]* 1.2 Write property test: corrupted localStorage produces empty set
- **Property 3: Corrupted localStorage produces empty set**
- Generate arbitrary strings that are not valid JSON arrays of strings, set them in localStorage under the hidden rows key, call `loadHiddenRows`, assert the result is an empty set and no error is thrown
- **Validates: Requirements 2.4**
- [x] 2. Insert visibility filtering into the data pipeline
- Add `visibleFindings` useMemo that filters `findings` by excluding any finding whose `String(f.id)` is in `hiddenRowIds` (short-circuit when set is empty)
- Modify the existing `filtered` useMemo to start from `visibleFindings` instead of `findings`
- Ensure column filter dropdowns, action filter, and EXC filter all operate on the post-hide dataset
- _Requirements: 1.2, 5.1, 5.2_
- [ ]* 2.1 Write property test: hidden row filtering invariant
- **Property 1: Hidden row filtering invariant**
- Generate arbitrary arrays of finding objects and arbitrary sets of hidden Finding_IDs, compute `visibleFindings`, assert no finding in the output has an ID present in the hidden set
- **Validates: Requirements 1.1, 1.2, 4.1, 4.3, 5.1, 5.2, 6.1, 6.2**
- [x] 3. Integrate hidden rows with chart and export
- Pass `visibleFindings` (instead of `findings`) to the `ActionCoverageDonut` component's `findings` prop
- Modify the CSV export function to use the sorted/filtered visible rows (already derived from `visibleFindings` via the pipeline)
- Modify the XLSX export function to use the sorted/filtered visible rows
- Verify that chart segment click filtering operates on the visible set
- _Requirements: 4.1, 4.2, 4.3, 6.1, 6.2_
- [x] 4. Checkpoint — Verify core hide/restore pipeline
- Ensure all tests pass, ask the user if questions arise.
- [x] 5. Add selection state and bulk hide logic
- Add `selectedRowIds` state as `useState(new Set())`
- Implement `toggleRowSelection(findingId)` callback that adds/removes a string ID from the selection set
- Implement `toggleSelectAll()` callback that selects all visible sorted row IDs when not all are selected, or clears selection when all are selected
- Implement `hideSelectedRows()` callback that unions `selectedRowIds` into `hiddenRowIds`, persists, and clears the selection set
- Add a `useEffect` that prunes `selectedRowIds` to only include IDs present in the current `sorted` array whenever `sorted` changes
- _Requirements: 8.1, 8.2, 8.3, 8.5, 8.6, 8.8_
- [ ]* 5.1 Write property test: bulk hide produces union of hidden and selected sets
- **Property 5: Bulk hide produces the union of hidden and selected sets**
- Generate two arbitrary sets of Finding_ID strings (hidden and selected), simulate `hideSelectedRows`, assert the resulting hidden set equals the union and the selection set is empty
- **Validates: Requirements 8.5, 8.6**
- [ ]* 5.2 Write property test: selection is always a subset of visible rows
- **Property 6: Selection is always a subset of visible rows**
- Generate arbitrary selection and visible row sets, simulate the pruning effect, assert the resulting selection is a subset of visible row IDs
- **Validates: Requirements 8.8**
- [ ]* 5.3 Write property test: select all produces exactly the visible row ID set
- **Property 7: Select all produces exactly the visible row ID set**
- Generate an arbitrary array of finding objects representing sorted visible rows, simulate `toggleSelectAll` from empty selection, assert the selection equals the full visible ID set; toggle again, assert empty
- **Validates: Requirements 8.2, 8.3**
- [ ]* 5.4 Write property test: restore removes exactly the specified ID
- **Property 4: Restore removes exactly the specified ID**
- Generate a non-empty set of hidden Finding_IDs, pick a random element, simulate `restoreRow`, assert the result equals the original set minus that single ID
- **Validates: Requirements 3.3**
- [x] 6. Add selection checkbox column and select-all checkbox to the table
- Import `Square`, `CheckSquare`, and `MinusSquare` icons from lucide-react
- Add a fixed 36px selection checkbox column as the first column in the table header and body
- Render `Select_All_Checkbox` in the header: `CheckSquare` when all selected, `MinusSquare` when partially selected, `Square` when none selected; onClick calls `toggleSelectAll`
- Render `Selection_Checkbox` on each row: `CheckSquare` when selected, `Square` when not; onClick calls `toggleRowSelection(finding.id)`
- Style checkboxes with muted slate default color, accent blue when checked/active, matching existing icon sizing
- _Requirements: 8.1, 8.2, 8.3, 8.9, 8.11_
- [x] 7. Add per-row hide button column
- Add a fixed 36px hide button column as the second column (after selection checkbox) in the table header and body
- Render an `EyeOff` icon button on each row; onClick calls `hideRow(finding.id)`
- Style the button with 13px icon size, muted slate default color, accent blue on hover, matching existing toolbar icon patterns
- The column header cell is empty (no label)
- _Requirements: 1.1, 1.3, 1.4, 7.1_
- [x] 8. Implement BulkHideToolbar component
- Create inline `BulkHideToolbar` component accepting `count`, `onHide`, and `onClear` props
- Render "{count} rows selected" label, "Hide Selected" button with `EyeOff` icon, and "Clear" button
- Style with dark gradient background, accent border, monospace font, matching existing toolbar patterns
- Render the toolbar above the table inside the scroll container, only when `selectedRowIds.size > 0`
- Wire `onHide` to `hideSelectedRows` and `onClear` to clearing the selection set
- _Requirements: 8.4, 8.5, 8.6, 8.7, 8.10, 8.11_
- [x] 9. Checkpoint — Verify selection and bulk hide UI
- Ensure all tests pass, ask the user if questions arise.
- [x] 10. Implement RowVisibilityManager popover component
- Create inline `RowVisibilityManager` component accepting `hiddenRowIds`, `findings`, `onRestore`, and `onRestoreAll` props
- Add `open` state for popover visibility, with outside-click-to-close behavior (same pattern as existing `ColumnManager`)
- Render a toolbar button with `EyeOff` icon and "Hidden (N)" count text, styled to match the existing ColumnManager and Queue toolbar buttons (same padding, border radius, font size, uppercase text)
- When open, render a popover panel listing hidden findings by Finding_ID and title (looked up from the full `findings` array)
- Each entry has an `Eye` icon restore button that calls `onRestore(findingId)`
- Include a "Restore All" button at the bottom that calls `onRestoreAll`
- When `hiddenRowIds.size === 0`, show "No rows hidden" message in the popover
- Use dark gradient background, accent border, and box shadow matching the ColumnManager popover
- Place the button in the toolbar div adjacent to the ColumnManager button
- _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 7.2, 7.3_
- [x] 11. Final checkpoint — Verify complete feature integration
- Ensure all tests pass, ask the user if questions arise.
## Notes
- Tasks marked with `*` are optional and can be skipped for faster MVP
- All changes are contained within `frontend/src/components/pages/ReportingPage.js` — no new files needed
- The design uses JavaScript throughout; fast-check is the PBT library
- Each task references specific requirements for traceability
- Checkpoints ensure incremental validation
- Property tests validate the 7 correctness properties defined in the design document
- Unit tests validate specific UI rendering scenarios and edge cases

View File

@@ -0,0 +1,190 @@
# Documentation Standards — CVE Dashboard
These standards are reverse-engineered from the existing README.md and should be treated as the canonical style guide for all documentation in this repository. When updating docs, match these conventions exactly — consistency matters more than any individual stylistic preference.
---
## Language and Style
- Write in **present tense, active voice**. "The sync fetches findings" — not "Findings will be fetched by the sync."
- Do not use marketing language. No "powerful", "seamless", "robust", "cutting-edge", "unleash". Describe what the thing does, not how great it is.
- No emoji anywhere in documentation. None.
- Prefer precise technical vocabulary over casual phrasing. "Session tokens are stored in `httpOnly` cookies" — not "we keep the login thing in a secure cookie."
- **Spelling:** match whatever spelling variant already appears in the surrounding prose. Do not rewrite existing words to switch between US and British English — consistency within a section matters more than which variant is used.
---
## Punctuation and Formatting
- **Em-dashes (—)** for mid-sentence clarifications or appositives, surrounded by spaces: `sync requires Admin or Standard_User group — the sync then fetches findings`.
- **En-dashes ()** for numeric ranges: `8.59.9 VRR`, `20 attempts per 15-minute window`.
- Use **inline backticks** for: file paths, environment variables, CLI flags, function names, field names, HTTP status codes, and any literal value the reader should type or recognise verbatim.
- Use **bold** (`**text**`) for UI element names (button labels, tab names, form fields) and for label-style emphasis at the start of a sub-point.
- Avoid italics except for rare genuine emphasis. Do not use italics decoratively.
---
## Heading Hierarchy
Use a strict three-tier hierarchy per document:
```
# Document Title (one per file, matches repo/feature name)
## Top-Level Section (Overview, Features, Architecture, etc.)
### Subsection (a named feature, page, or concept)
**Sub-subsection label** (bold paragraph labels — NOT an #### heading)
```
- Do **not** use `####` or deeper headings. If you need a fourth level, it should be a bold inline label followed by content, matching the existing README pattern.
- Separate top-level `##` sections with a horizontal rule (`---`) on its own line, with blank lines above and below.
- Do not place horizontal rules between `###` subsections unless visually necessary.
---
## Table of Contents
- Any document over ~200 lines should open with a Table of Contents using markdown anchor links.
- Nest TOC entries to match heading depth (`##` entries flush-left, `###` entries indented two spaces).
- Anchor slugs: lowercase, spaces become hyphens, em-dashes become `--` (two hyphens). Example: `## Home — CVE Management` becomes `#home--cve-management`.
---
## Tables
Use tables for any reference material with two or more parallel attributes. This includes:
- Permission matrices (group → capabilities)
- Tech stack listings (layer → technology)
- Column descriptions (column → meaning)
- Environment variable references (name → purpose → default)
- Route references (method + path → description → auth requirement)
Table format:
```markdown
| Column | Description |
|---|---|
| `field_name` | What it does |
```
- Always use `---` separators (not `:---:` centred alignment) unless centring is specifically warranted.
- Keep cell content on a single line. If a value is long, prefer prose above or below the table.
- Use inline backticks for literal values inside cells.
---
## Code Blocks
- **Always include a language tag** on fenced code blocks: ` ```bash `, ` ```javascript `, ` ```json `, ` ```python `, ` ```sql `. Bare ` ``` ` is not acceptable.
- Shell commands use `bash` — even for single-line commands.
- Place code blocks on their own line, with blank lines before and after.
- Inside code blocks, do not use markdown formatting (no bold, no italics). Treat them as literal terminal/file content.
- Prefer showing the actual command over describing what to do. "Run `node setup.js` from `backend/`" with a code block — not "initialize the database."
---
## Callouts and Warnings
- Use a blockquote (`>`) for callouts, notes, and warnings. Do not use GitHub-flavoured admonition syntax (`> [!NOTE]`), Docusaurus admonitions, or custom HTML.
- Keep callouts to one or two sentences. If longer, promote to prose.
- Example: `> IVANTI_API_KEY must be set in backend/.env for sync to work.`
Bold prefixes for emphasis are acceptable inside a blockquote: `> **Warning:** This deletes all audit records older than 90 days.`
---
## Feature Documentation Pattern
When documenting a feature or page, follow this structure:
1. **One-sentence summary** of what the feature is and who uses it.
2. **Capability bullets** — what a user can do, grouped by role if access-controlled.
3. **Workflow or interaction details** — how the feature is used in practice (inline editing behaviour, filter semantics, persistence rules).
4. **Integration notes** — what external systems it touches, what credentials it needs, what it caches.
5. **Edge cases and restrictions** — delete rules, rate limits, role requirements.
Bold paragraph labels (`**Inline editing:**`, `**CVE Tooltips:**`, `**Filtering:**`) are the preferred pattern for calling out sub-behaviours within a feature section.
---
## Troubleshooting Entries
Every troubleshooting entry uses the **Symptom → Cause → Fix** triad:
```markdown
### Short description of the problem
**Symptom:** What the user sees or experiences. Be specific about error messages, console output, and observed behaviour.
**Cause:** The underlying reason, explained in one or two sentences. Include the technical mechanism (cookie flag, rate limiter, missing migration) — not just "it's broken."
**Fix:** Either:
1. Concrete action with a command or config change, **or**
2. Alternative action.
```
- Short entries (fix is one command) may collapse Cause into Fix, but Symptom must always appear explicitly.
- Use **Fix:** as the label, not "Solution" or "Resolution."
---
## CHANGELOG
This project does not currently maintain a `CHANGELOG.md`. The doc-updater agent should **not** create one unless explicitly instructed.
When a change ships, rely instead on:
- **Git commit messages** as the primary change history. Write them as complete sentences describing user-observable behaviour, not implementation detail. "Add inline editing to CVE reporting table" — not "fix table.jsx."
- **README updates** as the user-facing record of what the app does now. The README is the source of truth for current behaviour; git log is the source of truth for when and why it changed.
If a `CHANGELOG.md` is introduced later, this section should be rewritten to declare the chosen format. Until then, the agent should leave changelog concerns out of scope.
---
## Migration Documentation
When a feature requires a new database migration:
1. Add the migration filename to the README's **Migrations** section in the order it must be run.
2. If the migration is required for an existing deployment (not just fresh installs), add a Troubleshooting entry using the Symptom → Cause → Fix pattern for the error users will see if they skip it.
3. Note any data-transforming migrations explicitly — users need to know whether the migration is additive (safe to re-run) or transformative (destructive if re-run).
---
## API Reference Documentation
- Document routes as: `METHOD /path/with/:params`
- Group routes by resource or page (CVE routes, Ivanti routes, Audit routes).
- For each route, specify: purpose, required group, request body or query params, response shape summary. Keep it to 24 lines per route.
- Do not duplicate route implementation details. Link to the source file if deeper reference is needed.
- When a route enforces group-based authorisation, state the required group explicitly — do not imply it from context.
---
## What to Update When a Feature Ships
A new feature or meaningful change to existing behaviour should touch:
1. **README.md — Features section:** add or update the relevant `###` subsection, matching the Feature Documentation Pattern above.
2. **README.md — Table of Contents:** if a new feature added a new heading, update the TOC to match.
3. **README.md — Configuration:** if new env vars were introduced, add them to the Configuration table.
4. **README.md — API Reference:** if new routes were added, document them under the appropriate resource group.
5. **README.md — Database Schema:** if tables or columns changed, update the schema section.
6. **README.md — Migrations:** if a new migration was added, append it to the ordered list.
7. **docs/**: if the feature has its own standalone guide (setup guide, integration guide), create or update the relevant file in `docs/`.
If a change does not alter user-observable behaviour, configuration, data model, or API surface, it does not require doc changes. Internal refactors, test additions, and dependency bumps are exempt unless they change how the app is run or deployed.
---
## What NOT to Change
The doc-updater agent and human contributors alike should **leave alone**:
- Tone, voice, and spelling conventions of existing prose. Match, do not rewrite.
- Section ordering in the README — the current order is deliberate and reader-tested.
- Heading wording, unless the underlying feature has genuinely been renamed.
- Examples and command snippets that still work, even if they could be "more elegant."
- The overall shape of the Troubleshooting section — append new entries, do not reorganise existing ones.
Documentation churn is a cost. Only change what the code change requires.

View File

@@ -60,9 +60,8 @@ The application provides:
| Database | SQLite3 | | Database | SQLite3 |
| File uploads | Multer 2 | | File uploads | Multer 2 |
| Auth | bcryptjs, cookie-based sessions, express-rate-limit | | Auth | bcryptjs, cookie-based sessions, express-rate-limit |
| Frontend | React 19, lucide-react, xlsx, rehype-sanitize | | Frontend | React 19, lucide-react, recharts, xlsx, react-markdown, rehype-sanitize, mermaid |
| Compliance xlsx parsing | Python 3, pandas, openpyxl | | Compliance xlsx parsing | Python 3, pandas, openpyxl |
| Bulk notes import | Python 3 (stdlib only) |
--- ---
@@ -106,7 +105,7 @@ apt install -y python3-pandas python3-openpyxl
> If apt packages are unavailable or you need a specific version, see `docs/python-venv-setup.md` for the venv fallback approach. > If apt packages are unavailable or you need a specific version, see `docs/python-venv-setup.md` for the venv fallback approach.
> The bulk notes import script (`import_notes_from_csv.py`) uses only Python stdlib and does **not** require these packages. > A bulk notes import script (`import_notes_from_csv.py`) is also available in `backend/scripts/` for maintenance tasks like backfilling notes from a CSV. It uses only Python stdlib.
### 5. Configure environment variables ### 5. Configure environment variables
@@ -145,12 +144,17 @@ node migrations/add_ivanti_findings_tables.js
node migrations/add_ivanti_todo_queue_table.js node migrations/add_ivanti_todo_queue_table.js
node migrations/add_card_workflow_type.js node migrations/add_card_workflow_type.js
node migrations/add_todo_queue_ip_address.js node migrations/add_todo_queue_ip_address.js
node migrations/add_todo_queue_hostname.js
node migrations/add_compliance_tables.js node migrations/add_compliance_tables.js
node migrations/add_finding_archive_tables.js node migrations/add_finding_archive_tables.js
node migrations/add_archer_tickets_timestamps.js node migrations/add_archer_tickets_timestamps.js
node migrations/add_ivanti_counts_history_table.js node migrations/add_ivanti_counts_history_table.js
node migrations/add_fp_submissions_table.js
node migrations/add_user_groups.js node migrations/add_user_groups.js
node migrations/add_created_by_columns.js node migrations/add_created_by_columns.js
node migrations/add_fp_submission_editing.js
node migrations/add_granite_workflow_type.js
node migrations/add_compliance_notes_group_id.js
``` ```
### 8. Build the frontend ### 8. Build the frontend
@@ -354,11 +358,15 @@ Each row represents a single Ivanti host finding.
**Inline editing:** Click a Host or DNS cell to override the Ivanti value. An amber dot (●) marks overridden cells; use the revert button (↻) to restore the original. Overrides survive re-syncs. Requires Admin or Standard_User group. **Inline editing:** Click a Host or DNS cell to override the Ivanti value. An amber dot (●) marks overridden cells; use the revert button (↻) to restore the original. Overrides survive re-syncs. Requires Admin or Standard_User group.
**CVE Tooltips:** Hover over any CVE badge in the table to see a tooltip with the CVE description and severity (if the CVE exists in the local database). Tooltips appear after a 300ms delay, are cached in memory for the session, and auto-position to stay within the viewport.
**Filtering:** Click ⊙ on any column header for multi-select filtering. The `— empty —` option filters to findings with no value in that column. Multiple filters are ANDed. The Action Coverage chart also acts as a filter. **Filtering:** Click ⊙ on any column header for multi-select filtering. The `— empty —` option filters to findings with no value in that column. Multiple filters are ANDed. The Action Coverage chart also acts as a filter.
**Column management:** Toggle visibility and drag to reorder via the **Columns** button. Order and visibility persist to `localStorage`. **Column management:** Toggle visibility and drag to reorder via the **Columns** button. Order and visibility persist to `localStorage`.
**Export:** Click **Export** to download the current filtered view as CSV or XLSX. Requires Admin, Standard_User, or Leadership group. **Row visibility:** Hide individual rows by clicking the `EyeOff` icon on any row, or select multiple rows via checkboxes and click **Hide Selected** in the bulk action toolbar. Hidden rows are excluded from the table, the Action Coverage chart, and exports. Use the **Hidden (N)** button in the toolbar to view and restore hidden rows individually or all at once. Hidden row state persists to `localStorage` across sessions. Row hiding is a personal view preference available to all user groups.
**Export:** Click **Export** to download the current filtered view as CSV or XLSX. Hidden rows and filtered rows are both excluded from exports. Requires Admin, Standard_User, or Leadership group.
--- ---
@@ -381,6 +389,14 @@ A personal staging list for batch-processing FP, Archer, and CARD workflows with
- Check the green checkbox on an item to mark it complete (strikethrough at reduced opacity) - Check the green checkbox on an item to mark it complete (strikethrough at reduced opacity)
- Delete individual items with the trash icon, or select multiple and use **Delete (N)** - Delete individual items with the trash icon, or select multiple and use **Delete (N)**
- **Clear Completed** removes all marked-complete items at once - **Clear Completed** removes all marked-complete items at once
- **Create FP Workflow** — select pending FP items and click to open the FP Workflow modal, which submits a False Positive workflow batch directly to the Ivanti API with form fields, file attachments, and scope override. Attachments can be local file uploads or documents selected from the CVE document library — library documents are read from disk and sent to Ivanti identically to local uploads. Successful submission marks the queue items as complete and records the submission locally.
**Redirecting completed items:**
- Completed items show a redirect button (↱) next to the delete icon
- Click redirect to open a modal where you select the target workflow type (FP, Archer, or CARD) and vendor (required for FP/Archer)
- Redirecting creates a new pending queue item with the same finding data under the new workflow type — the original completed item is preserved
- This is useful when a CARD inventory fix is done but the finding still needs an FP or Archer workflow, or when an item was assigned to the wrong workflow initially
- Not every completed item needs a redirect — it's an optional action for items that require further processing
Queue items are stored in the database, are **personal to your login**, and persist across sessions and page refreshes. Queue items are stored in the database, are **personal to your login**, and persist across sessions and page refreshes.
@@ -497,45 +513,6 @@ Called automatically by the compliance upload flow. Parses the NTS_AEO xlsx repo
--- ---
### `backend/scripts/import_notes_from_csv.py`
Bulk-import notes into the findings cache from a CSV file. Useful for onboarding existing notes or migrating from a spreadsheet.
**CSV format:**
```csv
ID,NOTES
12345678,EXC-5754
87654321,Patched in Feb maintenance window
```
**Usage:**
```bash
cd backend/scripts
# Preview what would be imported (no writes)
python3 import_notes_from_csv.py input.csv --dry-run
# Import against the default database path
python3 import_notes_from_csv.py input.csv
# Import against a specific database
python3 import_notes_from_csv.py input.csv --db /path/to/cve_database.db
```
| Argument | Description |
|---|---|
| `csv_file` | Path to the input CSV (required) |
| `--db` | Path to the SQLite database (default: `../cve_database.db`) |
| `--dry-run` | Preview changes without writing to the database |
- Notes longer than 255 characters are truncated with a warning
- Finding IDs not present in the active Ivanti cache are skipped
- Uses UPSERT — running the same CSV twice is safe
**Dependencies:** Python stdlib only (no pip install required).
---
## API Reference ## API Reference
All endpoints are prefixed with `/api`. All endpoints except `/api/auth/login` and `/api/auth/logout` require a valid session cookie. Group requirements are listed per endpoint. All endpoints are prefixed with `/api`. All endpoints except `/api/auth/login` and `/api/auth/logout` require a valid session cookie. Group requirements are listed per endpoint.
@@ -563,6 +540,7 @@ All endpoints are prefixed with `/api`. All endpoints except `/api/auth/login` a
| GET | `/api/cves/distinct-ids` | Any | All distinct CVE IDs (used by NVD sync) | | GET | `/api/cves/distinct-ids` | Any | All distinct CVE IDs (used by NVD sync) |
| GET | `/api/cves/:cveId/vendors` | Any | All vendor entries for a specific CVE ID | | GET | `/api/cves/:cveId/vendors` | Any | All vendor entries for a specific CVE ID |
| GET | `/api/cves/compliance` | Any | Document compliance status view | | GET | `/api/cves/compliance` | Any | Document compliance status view |
| GET | `/api/cves/:cveId/tooltip` | Any | Get CVE description and severity for tooltip display (truncated to 300 chars) |
### Documents ### Documents
@@ -606,13 +584,27 @@ All endpoints are prefixed with `/api`. All endpoints except `/api/auth/login` a
| GET | `/api/ivanti/workflows` | Any | Get cached workflow data | | GET | `/api/ivanti/workflows` | Any | Get cached workflow data |
| POST | `/api/ivanti/workflows/sync` | Admin, Standard_User | Trigger an immediate workflow sync | | POST | `/api/ivanti/workflows/sync` | Admin, Standard_User | Trigger an immediate workflow sync |
### Ivanti — FP Workflow Submission
| Method | Path | Group | Description |
|---|---|---|---|
| GET | `/api/ivanti/fp-workflow/documents/search` | Any | Search the CVE document library by name, CVE ID, or vendor; returns up to 50 matches |
| POST | `/api/ivanti/fp-workflow` | Admin, Standard_User | Submit an FP workflow batch to Ivanti API (multipart/form-data with local attachments and/or `libraryDocIds`) |
| GET | `/api/ivanti/fp-workflow/submissions` | Any | List FP submissions for the current user |
| PUT | `/api/ivanti/fp-workflow/submissions/:id` | Admin, Standard_User | Update an FP submission (edit form fields) |
| POST | `/api/ivanti/fp-workflow/submissions/:id/findings` | Admin, Standard_User | Add or remove findings on an existing submission |
| POST | `/api/ivanti/fp-workflow/submissions/:id/attachments` | Admin, Standard_User | Upload additional attachments (local files and/or `libraryDocIds`) to an existing submission |
| PATCH | `/api/ivanti/fp-workflow/submissions/:id/status` | Admin, Standard_User | Update submission lifecycle status |
### Ivanti — Todo Queue ### Ivanti — Todo Queue
| Method | Path | Group | Description | | Method | Path | Group | Description |
|---|---|---|---| |---|---|---|---|
| GET | `/api/ivanti/todo-queue` | Any | Get all queue items for the current user | | GET | `/api/ivanti/todo-queue` | Any | Get all queue items for the current user |
| POST | `/api/ivanti/todo-queue` | Admin, Standard_User | Add a finding to the queue | | POST | `/api/ivanti/todo-queue` | Admin, Standard_User | Add a finding to the queue |
| POST | `/api/ivanti/todo-queue/batch` | Admin, Standard_User | Batch-add multiple findings to the queue |
| PUT | `/api/ivanti/todo-queue/:id` | Admin, Standard_User | Update a queue item (mark complete, edit vendor/type) | | PUT | `/api/ivanti/todo-queue/:id` | Admin, Standard_User | Update a queue item (mark complete, edit vendor/type) |
| POST | `/api/ivanti/todo-queue/:id/redirect` | Admin, Standard_User | Redirect a completed item to a different workflow type |
| DELETE | `/api/ivanti/todo-queue/:id` | Admin, Standard_User | Delete a single queue item | | DELETE | `/api/ivanti/todo-queue/:id` | Admin, Standard_User | Delete a single queue item |
| DELETE | `/api/ivanti/todo-queue/completed` | Admin, Standard_User | Delete all completed queue items | | DELETE | `/api/ivanti/todo-queue/completed` | Admin, Standard_User | Delete all completed queue items |
@@ -633,7 +625,7 @@ All endpoints are prefixed with `/api`. All endpoints except `/api/auth/login` a
| GET | `/api/compliance/items` | Any | Device list; `?team=STEAM&status=active` | | GET | `/api/compliance/items` | Any | Device list; `?team=STEAM&status=active` |
| GET | `/api/compliance/items/:hostname` | Any | Full detail for a device (metrics + notes) | | GET | `/api/compliance/items/:hostname` | Any | Full detail for a device (metrics + notes) |
| GET | `/api/compliance/notes/:hostname/:metricId` | Any | Notes for a specific hostname/metric | | GET | `/api/compliance/notes/:hostname/:metricId` | Any | Notes for a specific hostname/metric |
| POST | `/api/compliance/notes` | Admin, Standard_User | Add a note for a hostname/metric | | POST | `/api/compliance/notes` | Admin, Standard_User | Add a note for a hostname/metric; accepts `metric_ids` array for multi-metric notes |
### Knowledge Base ### Knowledge Base
@@ -736,6 +728,8 @@ cve-dashboard/
├── NvdSyncModal.js # Bulk NVD sync dialog ├── NvdSyncModal.js # Bulk NVD sync dialog
├── KnowledgeBaseModal.js # Knowledge base upload/list modal ├── KnowledgeBaseModal.js # Knowledge base upload/list modal
├── KnowledgeBaseViewer.js # Inline document viewer (sandboxed iframe, sanitized markdown) ├── KnowledgeBaseViewer.js # Inline document viewer (sandboxed iframe, sanitized markdown)
├── CveTooltip.js # Hover tooltip for CVE badges (portal-rendered, cached)
├── RedirectModal.js # Queue item redirect modal (workflow type + vendor selection)
└── pages/ └── pages/
├── ReportingPage.js # Host findings: charts, table, queue, export ├── ReportingPage.js # Host findings: charts, table, queue, export
├── CompliancePage.js # AEO compliance: metric cards, device table ├── CompliancePage.js # AEO compliance: metric cards, device table
@@ -784,13 +778,15 @@ cve-dashboard/
**`ivanti_finding_overrides`** — Editor-applied overrides for `hostName` and `dns` fields. `UNIQUE(finding_id, field)`. **`ivanti_finding_overrides`** — Editor-applied overrides for `hostName` and `dns` fields. `UNIQUE(finding_id, field)`.
**`ivanti_todo_queue`** — Personal per-user queue of findings staged for FP, Archer, or CARD processing. Keyed by `(user_id, finding_id)`. **`ivanti_todo_queue`** — Personal per-user queue of findings staged for FP, Archer, or CARD processing. Keyed by `(user_id, finding_id)`. Completed items can be redirected to a different workflow type via `POST /:id/redirect`, which creates a new pending item preserving the original finding data.
**`ivanti_fp_submissions`** — Record of FP workflow submissions to the Ivanti API. Tracks user, workflow batch ID, form fields, finding IDs, queue item IDs, attachment results, and submission status (success/partial/failed).
**`compliance_uploads`** — Record of each compliance xlsx upload: filename, report date, uploader, timestamp, and new/resolved/recurring counts. **`compliance_uploads`** — Record of each compliance xlsx upload: filename, report date, uploader, timestamp, and new/resolved/recurring counts.
**`compliance_items`** — One row per device/metric violation. Tracks hostname, IP, device type, team, metric ID, category, `extra_json` (all non-core xlsx columns), status (active/resolved), first seen upload, and times seen. Identity key: `(hostname, metric_id)`. **`compliance_items`** — One row per device/metric violation. Tracks hostname, IP, device type, team, metric ID, category, `extra_json` (all non-core xlsx columns), status (active/resolved), first seen upload, and times seen. Identity key: `(hostname, metric_id)`.
**`compliance_notes`** — Timestamped notes per hostname/metric. Multiple notes per combination are supported. Foreign-key linked to compliance items. **`compliance_notes`** — Timestamped notes per hostname/metric. Multiple notes per combination are supported. `group_id` column links notes created in the same multi-metric submission. Foreign-key linked to compliance items.
### View ### View
@@ -897,12 +893,17 @@ node migrations/add_ivanti_findings_tables.js
node migrations/add_ivanti_todo_queue_table.js node migrations/add_ivanti_todo_queue_table.js
node migrations/add_card_workflow_type.js node migrations/add_card_workflow_type.js
node migrations/add_todo_queue_ip_address.js node migrations/add_todo_queue_ip_address.js
node migrations/add_todo_queue_hostname.js
node migrations/add_compliance_tables.js node migrations/add_compliance_tables.js
node migrations/add_finding_archive_tables.js node migrations/add_finding_archive_tables.js
node migrations/add_archer_tickets_timestamps.js node migrations/add_archer_tickets_timestamps.js
node migrations/add_ivanti_counts_history_table.js node migrations/add_ivanti_counts_history_table.js
node migrations/add_fp_submissions_table.js
node migrations/add_user_groups.js node migrations/add_user_groups.js
node migrations/add_created_by_columns.js node migrations/add_created_by_columns.js
node migrations/add_fp_submission_editing.js
node migrations/add_granite_workflow_type.js
node migrations/add_compliance_notes_group_id.js
cd .. cd ..
# 7. Rebuild the frontend # 7. Rebuild the frontend
@@ -935,12 +936,17 @@ node migrations/add_ivanti_findings_tables.js
node migrations/add_ivanti_todo_queue_table.js node migrations/add_ivanti_todo_queue_table.js
node migrations/add_card_workflow_type.js node migrations/add_card_workflow_type.js
node migrations/add_todo_queue_ip_address.js node migrations/add_todo_queue_ip_address.js
node migrations/add_todo_queue_hostname.js
node migrations/add_compliance_tables.js node migrations/add_compliance_tables.js
node migrations/add_finding_archive_tables.js node migrations/add_finding_archive_tables.js
node migrations/add_archer_tickets_timestamps.js node migrations/add_archer_tickets_timestamps.js
node migrations/add_ivanti_counts_history_table.js node migrations/add_ivanti_counts_history_table.js
node migrations/add_fp_submissions_table.js
node migrations/add_user_groups.js node migrations/add_user_groups.js
node migrations/add_created_by_columns.js node migrations/add_created_by_columns.js
node migrations/add_fp_submission_editing.js
node migrations/add_granite_workflow_type.js
node migrations/add_compliance_notes_group_id.js
``` ```
For deployments upgrading from an older schema, the following legacy migration scripts are also available in `backend/`: For deployments upgrading from an older schema, the following legacy migration scripts are also available in `backend/`:

View File

@@ -15,3 +15,11 @@ IVANTI_FIRST_NAME=
IVANTI_LAST_NAME= IVANTI_LAST_NAME=
# Set to true if behind Charter's SSL inspection proxy (replicates Python verify=False) # Set to true if behind Charter's SSL inspection proxy (replicates Python verify=False)
IVANTI_SKIP_TLS=false IVANTI_SKIP_TLS=false
# Atlas InfoSec API (atlas-infosec.caas.charterlab.com)
# Service account credentials for Basic Auth — used to sync and manage action plans
ATLAS_API_URL=
ATLAS_API_USER=
ATLAS_API_PASS=
# Set to true if behind Charter's SSL inspection proxy (disables TLS cert verification)
ATLAS_SKIP_TLS=false

Binary file not shown.

104
backend/helpers/atlasApi.js Normal file
View File

@@ -0,0 +1,104 @@
// Shared Atlas InfoSec API helpers
// Centralizes HTTP calls so the atlas router uses a single implementation.
// Follows the same promise-based pattern as ivantiApi.js.
const https = require('https');
const http = require('http');
// ---------------------------------------------------------------------------
// Configuration — read from process.env at module load
// ---------------------------------------------------------------------------
const ATLAS_API_URL = process.env.ATLAS_API_URL || '';
const ATLAS_API_USER = process.env.ATLAS_API_USER || '';
const ATLAS_API_PASS = process.env.ATLAS_API_PASS || '';
const ATLAS_SKIP_TLS = process.env.ATLAS_SKIP_TLS === 'true';
const requiredVars = ['ATLAS_API_URL', 'ATLAS_API_USER', 'ATLAS_API_PASS'];
const missingVars = requiredVars.filter((v) => !process.env[v]);
if (missingVars.length > 0) {
console.warn(`[atlas-api] WARNING: Missing required environment variables: ${missingVars.join(', ')}. Atlas API calls will fail.`);
}
const isConfigured = missingVars.length === 0;
// ---------------------------------------------------------------------------
// Generic request — supports GET, PUT, PATCH, POST
// ---------------------------------------------------------------------------
function atlasRequest(method, urlPath, body, options) {
const timeout = (options && options.timeout) || 15000;
const authString = Buffer.from(ATLAS_API_USER + ':' + ATLAS_API_PASS).toString('base64');
const fullUrl = new URL(ATLAS_API_URL + urlPath);
const isHttps = fullUrl.protocol === 'https:';
const transport = isHttps ? https : http;
const headers = {
'accept': 'application/json',
'authorization': 'Basic ' + authString
};
let bodyStr = null;
if (body !== null && body !== undefined) {
bodyStr = JSON.stringify(body);
headers['content-type'] = 'application/json';
headers['content-length'] = Buffer.byteLength(bodyStr);
}
return new Promise((resolve, reject) => {
const reqOptions = {
hostname: fullUrl.hostname,
port: fullUrl.port || (isHttps ? 443 : 80),
path: fullUrl.pathname + fullUrl.search,
method: method,
headers: headers,
timeout: timeout
};
if (isHttps) {
reqOptions.rejectUnauthorized = !ATLAS_SKIP_TLS;
}
const req = transport.request(reqOptions, (res) => {
let data = '';
res.on('data', (chunk) => { data += chunk; });
res.on('end', () => resolve({ status: res.statusCode, body: data }));
});
req.on('timeout', () => req.destroy(new Error(method + ' ' + urlPath + ' timed out')));
req.on('error', (err) => {
reject(new Error(method + ' ' + urlPath + ' failed: ' + err.message));
});
if (bodyStr) {
req.write(bodyStr);
}
req.end();
});
}
// ---------------------------------------------------------------------------
// Convenience wrappers
// ---------------------------------------------------------------------------
function atlasGet(urlPath, options) {
return atlasRequest('GET', urlPath, null, options);
}
function atlasPut(urlPath, body, options) {
return atlasRequest('PUT', urlPath, body, options);
}
function atlasPatch(urlPath, body, options) {
return atlasRequest('PATCH', urlPath, body, options);
}
function atlasPost(urlPath, body, options) {
return atlasRequest('POST', urlPath, body, options);
}
module.exports = {
isConfigured,
atlasRequest,
atlasGet,
atlasPut,
atlasPatch,
atlasPost
};

View File

@@ -0,0 +1,332 @@
// Drift Checker — compares xlsx schema against parser config to detect structural drift
// Returns categorised findings: breaking, silent_miss, cosmetic
const fs = require('fs');
const path = require('path');
/**
* Load and validate the compliance parser configuration file.
* @param {string} configPath — absolute or relative path to compliance_config.json
* @returns {object} parsed config with metric_categories, core_cols, skip_sheets
* @throws {Error} descriptive error if file missing, invalid JSON, or missing required keys
*/
function loadConfig(configPath) {
let raw;
try {
raw = fs.readFileSync(configPath, 'utf8');
} catch (err) {
if (err.code === 'ENOENT') {
throw new Error(`Configuration file not found: ${configPath}`);
}
throw new Error(`Failed to read configuration file: ${err.message}`);
}
let config;
try {
config = JSON.parse(raw);
} catch (err) {
throw new Error(`Configuration file contains invalid JSON: ${err.message}`);
}
if (!config.metric_categories || typeof config.metric_categories !== 'object' || Array.isArray(config.metric_categories)) {
throw new Error('Configuration file is missing required key "metric_categories" (must be an object)');
}
if (!Array.isArray(config.core_cols)) {
throw new Error('Configuration file is missing required key "core_cols" (must be an array)');
}
if (!Array.isArray(config.skip_sheets)) {
throw new Error('Configuration file is missing required key "skip_sheets" (must be an array)');
}
return config;
}
/**
* Compare an xlsx schema against the parser config and produce a drift report.
* @param {object} schema — output of extract_xlsx_schema.py: { sheets: [{ name, columns, metric_values? }] }
* @param {object} config — parsed compliance_config.json: { metric_categories, core_cols, skip_sheets }
* @returns {{ breaking: Array, silent_miss: Array, cosmetic: Array }}
*/
function compareSchemaToDrift(schema, config) {
const breaking = [];
const silent_miss = [];
const cosmetic = [];
const metricCategoryKeys = new Set(Object.keys(config.metric_categories));
const coreCols = new Set(config.core_cols);
const skipSheets = new Set(config.skip_sheets);
// Build lookup of xlsx sheet names and find the Summary sheet
const xlsxSheetNames = new Set();
let summarySheet = null;
for (const sheet of schema.sheets) {
xlsxSheetNames.add(sheet.name);
if (sheet.name === 'Summary') {
summarySheet = sheet;
}
}
// Identify detail sheets: present in xlsx AND not in skip_sheets
const detailSheets = schema.sheets.filter(s => !skipSheets.has(s.name));
// Build set of metric values from the Summary sheet (used by multiple rules)
const summaryMetrics = new Set(
(summarySheet && Array.isArray(summarySheet.metric_values)) ? summarySheet.metric_values : []
);
// --- Breaking rules ---
// Missing core column: a detail sheet is missing a column from core_cols.
// Collect per-column stats first, then classify: if a column is missing from
// ALL detail sheets it's breaking. If missing from only some (e.g. 5.8.1 uses
// CMDB columns), it's cosmetic — the parser handles it via extra_json.
const coreColMissingMap = {}; // col -> [sheet names missing it]
for (const sheet of detailSheets) {
const sheetCols = new Set(sheet.columns || []);
for (const coreCol of config.core_cols) {
if (!sheetCols.has(coreCol)) {
if (!coreColMissingMap[coreCol]) coreColMissingMap[coreCol] = [];
coreColMissingMap[coreCol].push(sheet.name);
}
}
}
for (const coreCol of Object.keys(coreColMissingMap)) {
const missingSheets = coreColMissingMap[coreCol];
if (detailSheets.length > 0 && missingSheets.length >= detailSheets.length) {
// Missing from ALL detail sheets — genuinely breaking
breaking.push({
severity: 'breaking',
message: `Core column "${coreCol}" is missing from all ${detailSheets.length} detail sheet(s)`,
value: coreCol,
sheet: null
});
} else {
// Missing from some sheets — structural difference, not drift
cosmetic.push({
severity: 'cosmetic',
message: `Core column "${coreCol}" is missing from ${missingSheets.length} of ${detailSheets.length} detail sheet(s): ${missingSheets.join(', ')}`,
value: coreCol,
sheet: null
});
}
}
// Missing detail sheet: a sheet in metric_categories (not in skip_sheets) is absent from xlsx.
// If the metric still appears in the Summary's metric_values, it's tracked but has zero
// violations this week — downgrade to cosmetic instead of breaking.
for (const metricKey of metricCategoryKeys) {
if (!skipSheets.has(metricKey) && !xlsxSheetNames.has(metricKey)) {
if (summaryMetrics.has(metricKey)) {
cosmetic.push({
severity: 'cosmetic',
message: `Metric "${metricKey}" has no detail sheet this week — still tracked in Summary (zero violations)`,
value: metricKey,
sheet: null
});
} else {
breaking.push({
severity: 'breaking',
message: `Expected detail sheet "${metricKey}" (metric category) is missing from the workbook`,
value: metricKey,
sheet: null
});
}
}
}
// --- Silent-miss rules ---
// Unknown metric value: a metric value in Summary is not a key in metric_categories
if (summarySheet && Array.isArray(summarySheet.metric_values)) {
for (const metricVal of summarySheet.metric_values) {
if (!metricCategoryKeys.has(metricVal)) {
silent_miss.push({
severity: 'silent_miss',
message: `Unknown metric "${metricVal}" in Summary — not in metric_categories`,
value: metricVal,
sheet: 'Summary'
});
}
}
}
// Unknown sheet: an xlsx sheet not in skip_sheets and not in metric_categories
for (const sheet of schema.sheets) {
if (!skipSheets.has(sheet.name) && !metricCategoryKeys.has(sheet.name)) {
silent_miss.push({
severity: 'silent_miss',
message: `Unknown sheet "${sheet.name}" — not in skip_sheets or metric_categories`,
value: sheet.name,
sheet: sheet.name
});
}
}
// --- Cosmetic rules ---
// New column in detail sheet: a detail sheet has columns not in core_cols
for (const sheet of detailSheets) {
for (const col of (sheet.columns || [])) {
if (!coreCols.has(col)) {
cosmetic.push({
severity: 'cosmetic',
message: `New column "${col}" in sheet "${sheet.name}" — will be captured in extra_json`,
value: col,
sheet: sheet.name
});
}
}
}
// Stale metric category: a key in metric_categories not in Summary metric values
for (const metricKey of metricCategoryKeys) {
if (!summaryMetrics.has(metricKey)) {
cosmetic.push({
severity: 'cosmetic',
message: `Stale metric category "${metricKey}" — not found in Summary sheet metric values`,
value: metricKey,
sheet: null
});
}
}
return { breaking, silent_miss, cosmetic };
}
/**
* Reconcile the parser config to resolve breaking drift findings.
*
* Breaking — "missing detail sheet":
* A metric_categories key has no matching xlsx sheet. But if the metric
* still appears in the Summary sheet's metric_values, it's a legitimate
* tracked metric that simply doesn't have violations this week — keep it.
* Only remove metrics absent from BOTH the xlsx sheets AND the Summary.
*
* Breaking — "missing core column":
* A core_cols entry is absent from one or more detail sheets. Only remove
* if the column is missing from ALL detail sheets (some sheets like 5.8.1
* have a completely different column structure and shouldn't cause removal).
*
* Silent-miss — "unknown metric":
* A metric value in the Summary is not in metric_categories. Add it as 'Other'.
*
* Silent-miss — "unknown sheet":
* Left as a warning. Auto-adding unknown sheets creates a reconcile loop.
*
* @param {string} configPath — path to compliance_config.json
* @param {object} driftReport — the drift report from compareSchemaToDrift()
* @param {object} [schema] — optional xlsx schema (with sheets[].name and Summary metric_values)
* @returns {{ changes: Array<{ action: string, key: string, value: string }>, config: object }}
*/
function reconcileConfig(configPath, driftReport, schema) {
const config = loadConfig(configPath);
const changes = [];
// Build a set of metric values from the Summary sheet (if schema provided)
const summaryMetrics = new Set();
if (schema && Array.isArray(schema.sheets)) {
const summarySheet = schema.sheets.find(function(s) { return s.name === 'Summary'; });
if (summarySheet && Array.isArray(summarySheet.metric_values)) {
summarySheet.metric_values.forEach(function(v) { summaryMetrics.add(v); });
}
}
// Build a set of xlsx sheet names (if schema provided)
const xlsxSheetNames = new Set();
if (schema && Array.isArray(schema.sheets)) {
schema.sheets.forEach(function(s) { xlsxSheetNames.add(s.name); });
}
// Count how many detail sheets exist in the xlsx (excluding skip_sheets)
const skipSheets = new Set(config.skip_sheets);
const detailSheetCount = schema
? schema.sheets.filter(function(s) { return !skipSheets.has(s.name); }).length
: 0;
// --- Resolve breaking findings ---
for (const finding of (driftReport.breaking || [])) {
// Missing detail sheet: remove from metric_categories ONLY if the metric
// is also absent from the Summary's metric_values. If it's in the Summary,
// it's still a tracked metric — the sheet just has zero violations this week.
if (finding.message.includes('is missing from the workbook') && finding.value in config.metric_categories) {
if (summaryMetrics.has(finding.value)) {
// Metric is in the Summary — keep it, just note it's sheet-less this week
changes.push({
action: 'kept',
key: 'metric_categories',
value: finding.value,
detail: `Kept metric "${finding.value}" — no detail sheet this week but still tracked in Summary`
});
} else {
const oldCategory = config.metric_categories[finding.value];
delete config.metric_categories[finding.value];
changes.push({
action: 'removed',
key: 'metric_categories',
value: finding.value,
detail: `Removed stale metric category "${finding.value}" (was "${oldCategory}") — absent from both workbook sheets and Summary`
});
}
}
// Missing core column: only remove if the column is missing from ALL detail sheets.
// Some sheets (e.g. 5.8.1 with CMDB columns) have a completely different structure
// and shouldn't cause removal of columns that exist in most other sheets.
if (finding.message.includes('is missing core column') && config.core_cols.includes(finding.value)) {
if (!changes.some(function(c) { return c.key === 'core_cols' && c.value === finding.value; })) {
const missingFromCount = (driftReport.breaking || []).filter(
function(f) { return f.message.includes('is missing core column') && f.value === finding.value; }
).length;
if (detailSheetCount > 0 && missingFromCount >= detailSheetCount) {
// Missing from ALL detail sheets — safe to remove
config.core_cols = config.core_cols.filter(function(c) { return c !== finding.value; });
changes.push({
action: 'removed',
key: 'core_cols',
value: finding.value,
detail: `Removed core column "${finding.value}" — missing from all ${detailSheetCount} detail sheet(s)`
});
} else {
// Missing from some sheets but present in others — keep it
changes.push({
action: 'kept',
key: 'core_cols',
value: finding.value,
detail: `Kept core column "${finding.value}" — missing from ${missingFromCount} of ${detailSheetCount} detail sheet(s)`
});
}
}
}
}
// --- Resolve silent-miss findings ---
for (const finding of (driftReport.silent_miss || [])) {
// Unknown metric in Summary: add to metric_categories as 'Other'
if (finding.message.includes('not in metric_categories') && !(finding.value in config.metric_categories)) {
config.metric_categories[finding.value] = 'Other';
changes.push({
action: 'added',
key: 'metric_categories',
value: finding.value,
detail: `Added new metric "${finding.value}" to metric_categories as "Other"`
});
}
// Unknown sheet: left as a warning — auto-adding creates a reconcile loop.
}
// Only write if there were actual config mutations (not just 'kept' entries)
const hasMutations = changes.some(function(c) { return c.action !== 'kept'; });
if (hasMutations) {
fs.writeFileSync(configPath, JSON.stringify(config, null, 2) + '\n', 'utf8');
}
return { changes, config };
}
module.exports = { compareSchemaToDrift, loadConfig, reconcileConfig };

View File

@@ -109,11 +109,11 @@ function ivantiFormPost(urlPath, fields, files, apiKey, skipTls) {
} }
// File fields // File fields
for (const { name, buffer, filename } of files) { for (const { name, buffer, filename, contentType } of files) {
parts.push(Buffer.from( parts.push(Buffer.from(
`--${boundary}\r\n` + `--${boundary}\r\n` +
`Content-Disposition: form-data; name="${name}"; filename="${filename}"\r\n` + `Content-Disposition: form-data; name="${name}"; filename="${filename}"\r\n` +
`Content-Type: application/octet-stream\r\n\r\n` `Content-Type: ${contentType || 'application/octet-stream'}\r\n\r\n`
)); ));
parts.push(buffer); parts.push(buffer);
parts.push(Buffer.from('\r\n')); parts.push(Buffer.from('\r\n'));

View File

@@ -0,0 +1,37 @@
// Migration: Add atlas_action_plans_cache table
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const dbPath = path.join(__dirname, '..', 'cve_database.db');
const db = new sqlite3.Database(dbPath);
console.log('Starting Atlas action plans cache migration...');
db.serialize(() => {
// Cache table — one row per host, holding cached Atlas action plan status
db.run(`
CREATE TABLE IF NOT EXISTS atlas_action_plans_cache (
id INTEGER PRIMARY KEY AUTOINCREMENT,
host_id INTEGER NOT NULL UNIQUE,
has_action_plan INTEGER NOT NULL DEFAULT 0,
plan_count INTEGER NOT NULL DEFAULT 0,
plans_json TEXT NOT NULL DEFAULT '[]',
synced_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
)
`, (err) => {
if (err) console.error('Error creating atlas_action_plans_cache table:', err);
else console.log('✓ atlas_action_plans_cache table created');
});
db.run(`
CREATE INDEX IF NOT EXISTS idx_atlas_cache_host_id
ON atlas_action_plans_cache(host_id)
`, (err) => {
if (err) console.error('Error creating host_id index:', err);
else console.log('✓ idx_atlas_cache_host_id index created');
});
});
db.close(() => {
console.log('Migration complete!');
});

View File

@@ -0,0 +1,29 @@
// Migration: Add group_id column to compliance_notes table
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const dbPath = path.join(__dirname, '..', 'cve_database.db');
const db = new sqlite3.Database(dbPath);
console.log('Starting add_compliance_notes_group_id migration...');
db.serialize(() => {
db.run(`ALTER TABLE compliance_notes ADD COLUMN group_id TEXT`, (err) => {
if (err) console.error('Error adding group_id column:', err);
else console.log('✓ group_id column added to compliance_notes');
});
db.run(`CREATE INDEX IF NOT EXISTS idx_compliance_notes_group ON compliance_notes(group_id)`, (err) => {
if (err) console.error('Error creating group_id index:', err);
else console.log('✓ idx_compliance_notes_group created');
});
db.run(`UPDATE compliance_notes SET group_id = 'legacy-' || id WHERE group_id IS NULL`, (err) => {
if (err) console.error('Error backfilling group_id:', err);
else console.log('✓ Existing rows backfilled with legacy group_id');
});
});
db.close(() => {
console.log('Migration complete!');
});

View File

@@ -0,0 +1,94 @@
// Migration: Add FP submission editing support (lifecycle status, batch UUID, history table)
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const dbPath = path.join(__dirname, '..', 'cve_database.db');
const db = new sqlite3.Database(dbPath);
console.log('Starting FP submission editing migration...');
db.serialize(() => {
// Add lifecycle_status column to ivanti_fp_submissions
// Wrapped in try/catch style via callback — SQLite throws if column already exists
db.run(
`ALTER TABLE ivanti_fp_submissions ADD COLUMN lifecycle_status TEXT NOT NULL DEFAULT 'submitted' CHECK(lifecycle_status IN ('submitted', 'approved', 'rejected', 'rework', 'resubmitted'))`,
(err) => {
if (err) {
if (err.message.includes('duplicate column')) {
console.log('✓ lifecycle_status column already exists');
} else {
console.error('Error adding lifecycle_status column:', err.message);
}
} else {
console.log('✓ lifecycle_status column added');
}
}
);
// Add ivanti_workflow_batch_uuid column
db.run(
`ALTER TABLE ivanti_fp_submissions ADD COLUMN ivanti_workflow_batch_uuid TEXT`,
(err) => {
if (err) {
if (err.message.includes('duplicate column')) {
console.log('✓ ivanti_workflow_batch_uuid column already exists');
} else {
console.error('Error adding ivanti_workflow_batch_uuid column:', err.message);
}
} else {
console.log('✓ ivanti_workflow_batch_uuid column added');
}
}
);
// Add updated_at column (SQLite requires constant defaults for ALTER TABLE, so default to NULL)
db.run(
`ALTER TABLE ivanti_fp_submissions ADD COLUMN updated_at DATETIME DEFAULT NULL`,
(err) => {
if (err) {
if (err.message.includes('duplicate column')) {
console.log('✓ updated_at column already exists');
} else {
console.error('Error adding updated_at column:', err.message);
}
} else {
console.log('✓ updated_at column added');
}
}
);
// Create submission history table
db.run(`
CREATE TABLE IF NOT EXISTS ivanti_fp_submission_history (
id INTEGER PRIMARY KEY AUTOINCREMENT,
submission_id INTEGER NOT NULL,
user_id INTEGER NOT NULL,
username TEXT NOT NULL,
change_type TEXT NOT NULL CHECK(change_type IN (
'created', 'fields_updated', 'findings_added',
'attachments_added', 'status_changed'
)),
change_details_json TEXT,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (submission_id) REFERENCES ivanti_fp_submissions(id) ON DELETE CASCADE
)
`, (err) => {
if (err) console.error('Error creating history table:', err.message);
else console.log('✓ ivanti_fp_submission_history table created');
});
// Create index on submission_id for history lookups
db.run(
`CREATE INDEX IF NOT EXISTS idx_fp_history_submission ON ivanti_fp_submission_history(submission_id)`,
(err) => {
if (err) console.error('Error creating history index:', err.message);
else console.log('✓ idx_fp_history_submission index created');
}
);
console.log('✓ Migration statements queued');
});
db.close(() => {
console.log('Migration complete!');
});

View File

@@ -0,0 +1,80 @@
// Migration: Add GRANITE to workflow_type CHECK constraint on ivanti_todo_queue
// SQLite cannot ALTER a CHECK constraint, so this recreates the table.
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const dbPath = path.join(__dirname, '..', 'cve_database.db');
const db = new sqlite3.Database(dbPath);
console.log('Starting add_granite_workflow_type migration...');
db.serialize(() => {
db.run('PRAGMA foreign_keys = OFF', (err) => {
if (err) console.error('PRAGMA error:', err);
});
db.run('BEGIN TRANSACTION', (err) => {
if (err) { console.error('BEGIN error:', err); return; }
});
db.run(`
CREATE TABLE ivanti_todo_queue_new (
id INTEGER PRIMARY KEY AUTOINCREMENT,
user_id INTEGER NOT NULL,
finding_id TEXT NOT NULL,
finding_title TEXT,
cves_json TEXT,
ip_address TEXT,
hostname TEXT,
vendor TEXT NOT NULL,
workflow_type TEXT NOT NULL CHECK(workflow_type IN ('FP', 'Archer', 'CARD', 'GRANITE')),
status TEXT NOT NULL DEFAULT 'pending' CHECK(status IN ('pending', 'complete')),
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
)
`, (err) => {
if (err) console.error('Error creating new table:', err);
else console.log('✓ ivanti_todo_queue_new created');
});
db.run(
'INSERT INTO ivanti_todo_queue_new SELECT id, user_id, finding_id, finding_title, cves_json, ip_address, hostname, vendor, workflow_type, status, created_at, updated_at FROM ivanti_todo_queue',
(err) => {
if (err) console.error('Error copying data:', err);
else console.log('✓ Data copied');
}
);
db.run('DROP TABLE ivanti_todo_queue', (err) => {
if (err) console.error('Error dropping old table:', err);
else console.log('✓ Old table dropped');
});
db.run(
'ALTER TABLE ivanti_todo_queue_new RENAME TO ivanti_todo_queue',
(err) => {
if (err) console.error('Error renaming table:', err);
else console.log('✓ Table renamed');
}
);
db.run(
'CREATE INDEX IF NOT EXISTS idx_todo_queue_user ON ivanti_todo_queue(user_id, status)',
(err) => {
if (err) console.error('Error creating index:', err);
else console.log('✓ Index recreated');
}
);
db.run('COMMIT', (err) => {
if (err) console.error('COMMIT error:', err);
else console.log('✓ Transaction committed');
});
db.run('PRAGMA foreign_keys = ON', () => {}); // FIXME: Callback does not handle the error parameter (should be `(err) => { if (err) ... }`)
});
db.close(() => {
console.log('Migration complete!');
});

409
backend/routes/atlas.js Normal file
View File

@@ -0,0 +1,409 @@
// Atlas InfoSec Action Plans Routes
// Proxies CRUD operations to the Atlas API and maintains a local SQLite cache
// for fast badge rendering on the ReportingPage.
const express = require('express');
const { requireGroup } = require('../middleware/auth');
const logAudit = require('../helpers/auditLog');
const { isConfigured, atlasGet, atlasPut, atlasPatch, atlasPost } = require('../helpers/atlasApi');
const VALID_PLAN_TYPES = ['decommission', 'remediation', 'false_positive', 'risk_acceptance', 'scan_exclusion'];
const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
// ---------------------------------------------------------------------------
// DB helpers — promise wrappers for callback-based SQLite API
// ---------------------------------------------------------------------------
function dbRun(db, sql, params = []) {
return new Promise((resolve, reject) => {
db.run(sql, params, function (err) { if (err) reject(err); else resolve(this); });
});
}
function dbGet(db, sql, params = []) {
return new Promise((resolve, reject) => {
db.get(sql, params, (err, row) => { if (err) reject(err); else resolve(row); });
});
}
function dbAll(db, sql, params = []) {
return new Promise((resolve, reject) => {
db.all(sql, params, (err, rows) => { if (err) reject(err); else resolve(rows || []); });
});
}
// ---------------------------------------------------------------------------
// Router factory
// ---------------------------------------------------------------------------
function createAtlasRouter(db, requireAuth) {
const router = express.Router();
// -----------------------------------------------------------------------
// GET /status
// Return all cached Atlas rows for badge rendering.
// Auth: any authenticated user
// -----------------------------------------------------------------------
router.get('/status', requireAuth(db), async (req, res) => {
if (!isConfigured) {
return res.status(503).json({ error: 'Atlas API is not configured. Check ATLAS_API_URL, ATLAS_API_USER, and ATLAS_API_PASS environment variables.' });
}
try {
const rows = await dbAll(db,
`SELECT host_id, has_action_plan, plan_count, synced_at FROM atlas_action_plans_cache`
);
res.json(rows);
} catch (err) {
console.error('[Atlas] Error fetching status:', err.message);
res.status(500).json({ error: 'Failed to fetch Atlas status.' });
}
});
// -----------------------------------------------------------------------
// POST /sync
// Sync Atlas action plan data for all hosts found in the Ivanti cache.
// Auth: Admin or Standard_User
// -----------------------------------------------------------------------
router.post('/sync', requireAuth(db), requireGroup('Admin', 'Standard_User'), async (req, res) => {
if (!isConfigured) {
return res.status(503).json({ error: 'Atlas API is not configured. Check ATLAS_API_URL, ATLAS_API_USER, and ATLAS_API_PASS environment variables.' });
}
try {
// 1. Read Ivanti findings cache and extract unique non-null hostIds
const cacheRow = await dbGet(db, `SELECT findings_json FROM ivanti_findings_cache WHERE id = 1`);
if (!cacheRow || !cacheRow.findings_json) {
return res.json({ synced: 0, withPlans: 0, failed: 0 });
}
let findings;
try {
findings = JSON.parse(cacheRow.findings_json);
} catch (parseErr) {
return res.status(500).json({ error: 'Failed to parse Ivanti findings cache.' });
}
const hostIdSet = new Set();
for (const f of findings) {
if (f.hostId != null && typeof f.hostId === 'number' && f.hostId > 0) {
hostIdSet.add(f.hostId);
}
}
const hostIds = [...hostIdSet];
if (hostIds.length === 0) {
return res.json({ synced: 0, withPlans: 0, failed: 0 });
}
// 2. Process hosts in batches of 5 concurrent requests
let synced = 0;
let withPlans = 0;
let failed = 0;
const BATCH_SIZE = 5;
for (let i = 0; i < hostIds.length; i += BATCH_SIZE) {
const batch = hostIds.slice(i, i + BATCH_SIZE);
const results = await Promise.allSettled(
batch.map(async (hostId) => {
const result = await atlasGet('/hosts/' + hostId + '/action-plans');
return { hostId, result };
})
);
for (const settled of results) {
if (settled.status === 'rejected') {
failed++;
console.warn('[Atlas Sync] Request failed for host:', settled.reason?.message || settled.reason);
continue;
}
const { hostId, result } = settled.value;
if (result.status >= 200 && result.status < 300) {
let allPlans = [];
let activePlans = [];
try {
const parsed = JSON.parse(result.body);
// Atlas returns { active: [...], inactive: [...] }
if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
activePlans = Array.isArray(parsed.active) ? parsed.active : [];
const inactive = Array.isArray(parsed.inactive) ? parsed.inactive : [];
allPlans = [...activePlans, ...inactive];
} else if (Array.isArray(parsed)) {
allPlans = parsed;
activePlans = parsed;
}
} catch (e) {
allPlans = [];
activePlans = [];
}
// Badge counts only active plans — inactive are historical
const planCount = activePlans.length;
const hasActionPlan = planCount > 0 ? 1 : 0;
try {
await dbRun(db,
`INSERT INTO atlas_action_plans_cache (host_id, has_action_plan, plan_count, plans_json, synced_at)
VALUES (?, ?, ?, ?, datetime('now'))
ON CONFLICT(host_id) DO UPDATE SET
has_action_plan = excluded.has_action_plan,
plan_count = excluded.plan_count,
plans_json = excluded.plans_json,
synced_at = excluded.synced_at`,
[hostId, hasActionPlan, planCount, JSON.stringify(allPlans)]
);
} catch (dbErr) {
console.error('[Atlas Sync] DB upsert failed for host', hostId, ':', dbErr.message);
}
synced++;
if (hasActionPlan) withPlans++;
} else {
failed++;
console.warn(`[Atlas Sync] Non-2xx response for host ${hostId}: status ${result.status}`);
}
}
}
// 3. Log audit entry
logAudit(db, {
userId: req.user.id,
username: req.user.username,
action: 'ATLAS_SYNC',
entityType: 'atlas_action_plans',
entityId: null,
details: { synced, withPlans, failed, totalHosts: hostIds.length },
ipAddress: req.ip
});
res.json({ synced, withPlans, failed });
} catch (err) {
console.error('[Atlas Sync] Unexpected error:', err.message);
res.status(500).json({ error: 'Atlas sync failed: ' + err.message });
}
});
// -----------------------------------------------------------------------
// GET /hosts/:hostId/action-plans
// Proxy to Atlas API — returns live action plan data for a single host.
// Auth: any authenticated user
// -----------------------------------------------------------------------
router.get('/hosts/:hostId/action-plans', requireAuth(db), async (req, res) => {
if (!isConfigured) {
return res.status(503).json({ error: 'Atlas API is not configured. Check ATLAS_API_URL, ATLAS_API_USER, and ATLAS_API_PASS environment variables.' });
}
const hostId = parseInt(req.params.hostId, 10);
if (!Number.isInteger(hostId) || hostId <= 0) {
return res.status(400).json({ error: 'hostId must be a positive integer' });
}
try {
const result = await atlasGet('/hosts/' + hostId + '/action-plans');
if (result.status >= 200 && result.status < 300) {
let body;
try {
body = JSON.parse(result.body);
} catch (e) {
body = result.body;
}
res.status(result.status).json(body);
} else {
// Forward non-2xx Atlas responses to the client
let errorBody;
try {
errorBody = JSON.parse(result.body);
} catch (e) {
errorBody = { error: result.body };
}
res.status(result.status).json(errorBody);
}
} catch (err) {
console.error('[Atlas] GET action-plans failed for host', hostId, ':', err.message);
res.status(502).json({ error: 'Failed to reach Atlas API: ' + err.message });
}
});
// -----------------------------------------------------------------------
// PUT /hosts/:hostId/action-plans
// Create a new action plan for a host.
// Auth: Admin or Standard_User
// -----------------------------------------------------------------------
router.put('/hosts/:hostId/action-plans', requireAuth(db), requireGroup('Admin', 'Standard_User'), async (req, res) => {
if (!isConfigured) {
return res.status(503).json({ error: 'Atlas API is not configured. Check ATLAS_API_URL, ATLAS_API_USER, and ATLAS_API_PASS environment variables.' });
}
const hostId = parseInt(req.params.hostId, 10);
if (!Number.isInteger(hostId) || hostId <= 0) {
return res.status(400).json({ error: 'hostId must be a positive integer' });
}
const { plan_type, commit_date } = req.body || {};
if (!plan_type || !VALID_PLAN_TYPES.includes(plan_type)) {
return res.status(400).json({ error: 'plan_type must be one of: ' + VALID_PLAN_TYPES.join(', ') });
}
if (!commit_date || !DATE_PATTERN.test(commit_date)) {
return res.status(400).json({ error: 'commit_date must be a valid YYYY-MM-DD date string' });
}
try {
const result = await atlasPut('/hosts/' + hostId + '/action-plans', req.body);
logAudit(db, {
userId: req.user.id,
username: req.user.username,
action: 'ATLAS_CREATE_PLAN',
entityType: 'atlas_action_plan',
entityId: String(hostId),
details: { hostId, plan_type, commit_date },
ipAddress: req.ip
});
if (result.status >= 200 && result.status < 300) {
let body;
try {
body = JSON.parse(result.body);
} catch (e) {
body = result.body;
}
res.status(result.status).json(body);
} else {
let errorBody;
try {
errorBody = JSON.parse(result.body);
} catch (e) {
errorBody = { error: result.body };
}
res.status(result.status).json(errorBody);
}
} catch (err) {
console.error('[Atlas] PUT action-plans failed for host', hostId, ':', err.message);
res.status(502).json({ error: 'Failed to reach Atlas API: ' + err.message });
}
});
// -----------------------------------------------------------------------
// PATCH /hosts/:hostId/action-plans
// Update an existing action plan for a host.
// Auth: Admin or Standard_User
// -----------------------------------------------------------------------
router.patch('/hosts/:hostId/action-plans', requireAuth(db), requireGroup('Admin', 'Standard_User'), async (req, res) => {
if (!isConfigured) {
return res.status(503).json({ error: 'Atlas API is not configured. Check ATLAS_API_URL, ATLAS_API_USER, and ATLAS_API_PASS environment variables.' });
}
const hostId = parseInt(req.params.hostId, 10);
if (!Number.isInteger(hostId) || hostId <= 0) {
return res.status(400).json({ error: 'hostId must be a positive integer' });
}
const { action_plan_id, updates } = req.body || {};
if (!action_plan_id || typeof action_plan_id !== 'string' || action_plan_id.trim() === '') {
return res.status(400).json({ error: 'action_plan_id is required and must be a non-empty string' });
}
if (!updates || typeof updates !== 'object' || Array.isArray(updates)) {
return res.status(400).json({ error: 'updates is required and must be an object' });
}
try {
const result = await atlasPatch('/hosts/' + hostId + '/action-plans', req.body);
logAudit(db, {
userId: req.user.id,
username: req.user.username,
action: 'ATLAS_UPDATE_PLAN',
entityType: 'atlas_action_plan',
entityId: String(hostId),
details: { hostId, action_plan_id },
ipAddress: req.ip
});
if (result.status >= 200 && result.status < 300) {
let body;
try {
body = JSON.parse(result.body);
} catch (e) {
body = result.body;
}
res.status(result.status).json(body);
} else {
let errorBody;
try {
errorBody = JSON.parse(result.body);
} catch (e) {
errorBody = { error: result.body };
}
res.status(result.status).json(errorBody);
}
} catch (err) {
console.error('[Atlas] PATCH action-plans failed for host', hostId, ':', err.message);
res.status(502).json({ error: 'Failed to reach Atlas API: ' + err.message });
}
});
// -----------------------------------------------------------------------
// POST /hosts/bulk-action-plans
// Create action plans for multiple hosts at once.
// Auth: Admin or Standard_User
// -----------------------------------------------------------------------
router.post('/hosts/bulk-action-plans', requireAuth(db), requireGroup('Admin', 'Standard_User'), async (req, res) => {
if (!isConfigured) {
return res.status(503).json({ error: 'Atlas API is not configured. Check ATLAS_API_URL, ATLAS_API_USER, and ATLAS_API_PASS environment variables.' });
}
const { host_ids, plan_type, commit_date } = req.body || {};
if (!Array.isArray(host_ids) || host_ids.length === 0) {
return res.status(400).json({ error: 'host_ids must be a non-empty array of positive integers' });
}
for (const id of host_ids) {
if (!Number.isInteger(id) || id <= 0) {
return res.status(400).json({ error: 'host_ids must be a non-empty array of positive integers' });
}
}
if (!plan_type || !VALID_PLAN_TYPES.includes(plan_type)) {
return res.status(400).json({ error: 'plan_type must be one of: ' + VALID_PLAN_TYPES.join(', ') });
}
if (!commit_date || !DATE_PATTERN.test(commit_date)) {
return res.status(400).json({ error: 'commit_date must be a valid YYYY-MM-DD date string' });
}
try {
const result = await atlasPost('/hosts/create-bulk-action-plans', req.body);
if (result.status >= 200 && result.status < 300) {
let body;
try {
body = JSON.parse(result.body);
} catch (e) {
body = result.body;
}
res.status(result.status).json(body);
} else {
let errorBody;
try {
errorBody = JSON.parse(result.body);
} catch (e) {
errorBody = { error: result.body };
}
res.status(result.status).json(errorBody);
}
} catch (err) {
console.error('[Atlas] POST bulk-action-plans failed:', err.message);
res.status(502).json({ error: 'Failed to reach Atlas API: ' + err.message });
}
});
return router;
}
module.exports = createAtlasRouter;

View File

@@ -2,24 +2,35 @@
// Handles xlsx upload/parse, non-compliant item history, and notes. // Handles xlsx upload/parse, non-compliant item history, and notes.
// //
// Endpoints: // Endpoints:
// POST /preview — parse xlsx, compute diff vs DB, return summary (no DB write) // POST /preview — parse xlsx, run drift check, compute diff (no DB write)
// POST /commit — commit a previewed upload to DB // POST /reconcile-config — patch compliance_config.json to resolve drift findings
// GET /uploads — list all uploads // POST /commit — commit a previewed upload to DB
// GET /summary — metric health cards for a team (from latest upload) // GET /uploads — list all uploads
// GET /items — non-compliant devices grouped by hostname (?team=X&status=active) // POST /rollback/:uploadId — roll back the most recent upload (Admin only)
// GET /items/:hostnamedetail panel: all metrics + notes + upload history for a device // GET /summary metric health cards for a team (from latest upload)
// POST /notes — add a note to a (hostname, metric_id) pair // GET /items — non-compliant devices grouped by hostname (?team=X&status=active)
// GET /items/:hostname — detail panel: all metrics + notes + upload history for a device
// POST /notes — add a note to one or more (hostname, metric_id) pairs
// GET /notes/:hostname/:metricId — notes for a specific device+metric // GET /notes/:hostname/:metricId — notes for a specific device+metric
// GET /trends — per-upload totals + per-team counts for time-series charts
// GET /mttr — mean time to resolution per team
// GET /top-recurring — chronic compliance gaps sorted by seen_count
// GET /category-trend — active counts per category per upload for stacked area chart
const express = require('express'); const express = require('express');
const path = require('path'); const path = require('path');
const fs = require('fs'); const fs = require('fs');
const crypto = require('crypto');
const { spawn } = require('child_process'); const { spawn } = require('child_process');
const { loadConfig, compareSchemaToDrift, reconcileConfig } = require('../helpers/driftChecker');
const logAudit = require('../helpers/auditLog');
const PARSER_SCRIPT = path.join(__dirname, '../scripts/parse_compliance_xlsx.py'); const PARSER_SCRIPT = path.join(__dirname, '../scripts/parse_compliance_xlsx.py');
const PYTHON_BIN = process.env.PYTHON_BIN || 'python3'; const SCHEMA_SCRIPT = path.join(__dirname, '../scripts/extract_xlsx_schema.py');
const TEMP_DIR = path.join(process.cwd(), 'uploads', 'temp'); const CONFIG_PATH = path.join(__dirname, '..', 'scripts', 'compliance_config.json');
const ALLOWED_TEAMS = new Set(['STEAM', 'ACCESS-ENG', 'ACCESS-OPS', 'INTELDEV']); const PYTHON_BIN = process.env.PYTHON_BIN || 'python3';
const TEMP_DIR = path.join(process.cwd(), 'uploads', 'temp');
const ALLOWED_TEAMS = new Set(['STEAM', 'ACCESS-ENG', 'ACCESS-OPS', 'INTELDEV']);
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// DB helpers // DB helpers
@@ -62,6 +73,25 @@ function parseXlsx(filePath) {
}); });
} }
// ---------------------------------------------------------------------------
// Run Python schema extractor, return xlsx schema object
// ---------------------------------------------------------------------------
function extractXlsxSchema(filePath) {
return new Promise((resolve, reject) => {
const py = spawn(PYTHON_BIN, [SCHEMA_SCRIPT, filePath]);
let out = '';
let err = '';
py.stdout.on('data', d => { out += d; });
py.stderr.on('data', d => { err += d; });
py.on('close', code => {
if (code !== 0) return reject(new Error(err || `Schema extractor exited with code ${code}`));
try { resolve(JSON.parse(out)); }
catch (e) { reject(new Error('Schema extractor returned invalid JSON')); }
});
py.on('error', reject);
});
}
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Validate that a temp file path is safely within uploads/temp/ // Validate that a temp file path is safely within uploads/temp/
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
@@ -227,6 +257,15 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
// POST /preview // POST /preview
// Parse the uploaded xlsx, compute diff, save parsed data to a temp JSON. // Parse the uploaded xlsx, compute diff, save parsed data to a temp JSON.
// Returns diff counts + tempFile path for the commit step. // Returns diff counts + tempFile path for the commit step.
//
// Body: multipart/form-data with `file` field (xlsx)
// Response: {
// drift: { breaking: [], silent_miss: [], cosmetic: [] } | null,
// drift_error: string | null,
// diff: { new_count, recurring_count, resolved_count },
// tempFile: string, filename: string,
// report_date: string, total_items: number
// }
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
router.post('/preview', requireGroup('Admin', 'Standard_User'), (req, res) => { router.post('/preview', requireGroup('Admin', 'Standard_User'), (req, res) => {
upload.single('file')(req, res, async (uploadErr) => { upload.single('file')(req, res, async (uploadErr) => {
@@ -242,6 +281,31 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
} }
try { try {
// --- Drift check: load config, extract schema, compare ---
let drift = null;
let drift_error = null;
let config;
try {
config = loadConfig(CONFIG_PATH);
} catch (configErr) {
fs.unlink(req.file.path, () => {});
return res.status(500).json({ error: 'Configuration file could not be loaded: ' + configErr.message });
}
let xlsxSchema = null;
try {
xlsxSchema = await extractXlsxSchema(req.file.path);
if (xlsxSchema.error) {
throw new Error(xlsxSchema.error);
}
drift = compareSchemaToDrift(xlsxSchema, config);
} catch (driftErr) {
drift = null;
drift_error = driftErr.message || 'Drift check failed';
}
// --- Existing parse flow ---
const parsed = await parseXlsx(req.file.path); const parsed = await parseXlsx(req.file.path);
if (parsed.error) { if (parsed.error) {
@@ -267,6 +331,9 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
fs.unlink(req.file.path, () => {}); fs.unlink(req.file.path, () => {});
res.json({ res.json({
drift,
drift_error,
schema: xlsxSchema,
diff: { diff: {
new_count: diff.newCount, new_count: diff.newCount,
recurring_count: diff.recurringCount, recurring_count: diff.recurringCount,
@@ -286,10 +353,63 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
}); });
}); });
// -----------------------------------------------------------------------
// POST /reconcile-config
// Admin-only. Patches compliance_config.json to resolve breaking and
// silent-miss drift findings, then re-runs the drift check and returns
// the updated report. Logs every change to the audit trail.
//
// Body: { drift: { breaking: [...], silent_miss: [...] } }
// Response: { changes: [{ action, key, value, detail }], message: string }
// -----------------------------------------------------------------------
router.post('/reconcile-config', requireGroup('Admin'), async (req, res) => {
const { drift, schema } = req.body;
if (!drift || typeof drift !== 'object') {
return res.status(400).json({ error: 'drift report is required in request body' });
}
const hasFindings = (drift.breaking && drift.breaking.length > 0) ||
(drift.silent_miss && drift.silent_miss.length > 0);
if (!hasFindings) {
return res.status(400).json({ error: 'No breaking or silent-miss findings to reconcile' });
}
try {
const { changes } = reconcileConfig(CONFIG_PATH, drift, schema || null);
if (changes.length === 0) {
return res.json({ changes: [], message: 'No changes needed' });
}
// Audit log each change
for (const change of changes) {
logAudit(db, {
userId: req.user.id,
username: req.user.username,
action: 'compliance_config_reconcile',
entityType: 'compliance_config',
entityId: change.value,
details: { action: change.action, key: change.key, detail: change.detail },
ipAddress: req.ip,
});
}
res.json({ changes, message: `Reconciled ${changes.length} config change(s)` });
} catch (err) {
console.error('[Compliance] Reconcile config error:', err.message);
res.status(500).json({ error: 'Failed to reconcile config: ' + err.message });
}
});
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
// POST /commit // POST /commit
// Commit a previewed upload to the DB. // Commit a previewed upload to the DB.
// Body: { tempFile, filename, report_date } //
// Body: { tempFile: string, filename: string, report_date: string }
// Response: { upload: { id, filename, report_date, uploaded_at,
// new_count, resolved_count, recurring_count } }
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
router.post('/commit', requireGroup('Admin', 'Standard_User'), async (req, res) => { router.post('/commit', requireGroup('Admin', 'Standard_User'), async (req, res) => {
const { tempFile, filename, report_date } = req.body; const { tempFile, filename, report_date } = req.body;
@@ -340,6 +460,9 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
// GET /uploads // GET /uploads
// List all uploads, most recent first. // List all uploads, most recent first.
//
// Response: { uploads: [{ id, filename, report_date, uploaded_at,
// new_count, resolved_count, recurring_count }] }
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
router.get('/uploads', async (req, res) => { router.get('/uploads', async (req, res) => {
try { try {
@@ -356,9 +479,133 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
} }
}); });
// -----------------------------------------------------------------------
// POST /rollback/:uploadId
// Admin-only. Rolls back a specific upload. Only the most recent upload
// can be rolled back to avoid cascading data integrity issues.
//
// Params: uploadId — integer ID of the upload to roll back
// Response: { message: string, rolled_back: { upload_id, filename,
// report_date, items_deleted, items_reactivated } }
//
// Reversal logic:
// 1. Delete items first seen in this upload (new items)
// 2. Re-activate items resolved by this upload
// 3. Revert recurring items: decrement seen_count, point upload_id
// back to the previous upload
// 4. Delete the upload record
// -----------------------------------------------------------------------
router.post('/rollback/:uploadId', requireGroup('Admin'), async (req, res) => {
const uploadId = parseInt(req.params.uploadId, 10);
if (isNaN(uploadId)) {
return res.status(400).json({ error: 'Invalid upload ID' });
}
try {
// Verify the upload exists
const upload = await dbGet(db,
`SELECT id, filename, report_date, new_count, resolved_count, recurring_count
FROM compliance_uploads WHERE id = ?`,
[uploadId]
);
if (!upload) {
return res.status(404).json({ error: 'Upload not found' });
}
// Only allow rolling back the most recent upload
const latest = await dbGet(db,
`SELECT id FROM compliance_uploads ORDER BY id DESC LIMIT 1`
);
if (latest.id !== uploadId) {
return res.status(400).json({
error: 'Only the most recent upload can be rolled back',
latest_upload_id: latest.id
});
}
// Find the previous upload (to restore recurring items' upload_id)
const previousUpload = await dbGet(db,
`SELECT id FROM compliance_uploads WHERE id < ? ORDER BY id DESC LIMIT 1`,
[uploadId]
);
await dbRun(db, 'BEGIN TRANSACTION');
try {
// 1. Delete items that were NEW in this upload
const deleteNew = await dbRun(db,
`DELETE FROM compliance_items WHERE first_seen_upload_id = ? AND upload_id = ?`,
[uploadId, uploadId]
);
// 2. Re-activate items that were RESOLVED by this upload
const reactivate = await dbRun(db,
`UPDATE compliance_items
SET status = 'active', resolved_upload_id = NULL
WHERE resolved_upload_id = ?`,
[uploadId]
);
// 3. Revert RECURRING items: decrement seen_count, restore upload_id
if (previousUpload) {
await dbRun(db,
`UPDATE compliance_items
SET upload_id = ?, seen_count = MAX(seen_count - 1, 1)
WHERE upload_id = ? AND first_seen_upload_id != ?`,
[previousUpload.id, uploadId, uploadId]
);
}
// 4. Delete the upload record
await dbRun(db, `DELETE FROM compliance_uploads WHERE id = ?`, [uploadId]);
await dbRun(db, 'COMMIT');
// Audit log
logAudit(db, {
userId: req.user.id,
username: req.user.username,
action: 'compliance_upload_rollback',
entityType: 'compliance_upload',
entityId: String(uploadId),
details: {
filename: upload.filename,
report_date: upload.report_date,
items_deleted: deleteNew.changes,
items_reactivated: reactivate.changes,
},
ipAddress: req.ip,
});
res.json({
message: `Rolled back upload "${upload.filename}"`,
rolled_back: {
upload_id: uploadId,
filename: upload.filename,
report_date: upload.report_date,
items_deleted: deleteNew.changes,
items_reactivated: reactivate.changes,
},
});
} catch (err) {
await dbRun(db, 'ROLLBACK').catch(() => {});
throw err;
}
} catch (err) {
console.error('[Compliance] Rollback error:', err.message);
res.status(500).json({ error: 'Failed to rollback upload: ' + err.message });
}
});
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
// GET /summary?team=STEAM // GET /summary?team=STEAM
// Return metric health rows for a team from the latest upload's summary_json. // Return metric health rows for a team from the latest upload's summary_json.
//
// Query: team — optional, one of ALLOWED_TEAMS
// Response: { entries: [...], overall_scores: {}, upload: { id,
// report_date, uploaded_at } | null }
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
router.get('/summary', async (req, res) => { router.get('/summary', async (req, res) => {
const team = req.query.team; const team = req.query.team;
@@ -402,6 +649,12 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
// GET /items?team=STEAM&status=active // GET /items?team=STEAM&status=active
// Return non-compliant devices grouped by hostname. // Return non-compliant devices grouped by hostname.
//
// Query: team — required, one of ALLOWED_TEAMS
// status — optional, 'active' (default) or 'resolved'
// Response: { devices: [{ hostname, ip_address, device_type, team,
// status, failing_metrics, seen_count, first_seen, last_seen,
// resolved_on, has_notes }], team, status }
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
router.get('/items', async (req, res) => { router.get('/items', async (req, res) => {
const { team, status = 'active' } = req.query; const { team, status = 'active' } = req.query;
@@ -447,6 +700,12 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
// GET /items/:hostname // GET /items/:hostname
// Detail panel: all metric rows for this hostname + notes + upload history. // Detail panel: all metric rows for this hostname + notes + upload history.
//
// Params: hostname — device hostname string
// Response: { hostname, ip_address, device_type, team,
// metrics: [{ metric_id, metric_desc, category, status, seen_count,
// extra, first_seen, last_seen, resolved_on, ... }],
// notes: [{ id, metric_id, note, group_id, created_at, created_by }] }
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
router.get('/items/:hostname', async (req, res) => { router.get('/items/:hostname', async (req, res) => {
const hostname = req.params.hostname; const hostname = req.params.hostname;
@@ -488,7 +747,7 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
// Notes (all metrics for this hostname, sorted newest first) // Notes (all metrics for this hostname, sorted newest first)
const notes = await dbAll(db, const notes = await dbAll(db,
`SELECT cn.id, cn.metric_id, cn.note, cn.created_at, `SELECT cn.id, cn.metric_id, cn.note, cn.group_id, cn.created_at,
u.username AS created_by u.username AS created_by
FROM compliance_notes cn FROM compliance_notes cn
LEFT JOIN users u ON cn.created_by = u.id LEFT JOIN users u ON cn.created_by = u.id
@@ -517,42 +776,86 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
// POST /notes // POST /notes
// Add a note to a (hostname, metric_id) pair. // Add a note to one or more (hostname, metric_id) pairs.
// Body: { hostname, metric_id, note } //
// Body: { hostname: string, metric_ids: string[], note: string }
// — or legacy: { hostname: string, metric_id: string, note: string }
// Response: { notes: [{ id, hostname, metric_id, note, group_id,
// created_at, created_by }] }
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
router.post('/notes', requireGroup('Admin', 'Standard_User'), async (req, res) => { router.post('/notes', requireGroup('Admin', 'Standard_User'), async (req, res) => {
const { hostname, metric_id, note } = req.body; const { hostname, metric_id, metric_ids, note } = req.body;
if (!hostname || typeof hostname !== 'string' || hostname.length > 300 || !/^[a-zA-Z0-9._-]+$/.test(hostname)) { if (!hostname || typeof hostname !== 'string' || hostname.length > 300 || !/^[a-zA-Z0-9._-]+$/.test(hostname)) {
return res.status(400).json({ error: 'Invalid hostname format' }); return res.status(400).json({ error: 'Invalid hostname format' });
} }
if (!metric_id || typeof metric_id !== 'string' || metric_id.length > 50) {
return res.status(400).json({ error: 'Invalid metric_id' }); // --- Resolve metric IDs: metric_ids takes precedence over metric_id ---
let resolvedIds;
if (metric_ids !== undefined) {
if (!Array.isArray(metric_ids)) {
return res.status(400).json({ error: 'metric_ids must be an array' });
}
resolvedIds = metric_ids;
} else if (metric_id !== undefined && metric_id !== null && metric_id !== '') {
if (typeof metric_id !== 'string' || metric_id.length > 50) {
return res.status(400).json({ error: 'Invalid metric_id' });
}
resolvedIds = [metric_id];
} else {
return res.status(400).json({ error: 'metric_id or metric_ids is required' });
} }
// --- Validate resolved metric IDs ---
if (resolvedIds.length === 0) {
return res.status(400).json({ error: 'At least one metric ID is required' });
}
for (let i = 0; i < resolvedIds.length; i++) {
const mid = resolvedIds[i];
if (!mid || typeof mid !== 'string' || mid.length === 0 || mid.length > 50) {
return res.status(400).json({ error: `Invalid metric_id at index ${i}` });
}
}
const noteText = String(note || '').trim().slice(0, 1000); const noteText = String(note || '').trim().slice(0, 1000);
if (!noteText) { if (!noteText) {
return res.status(400).json({ error: 'Note cannot be empty' }); return res.status(400).json({ error: 'Note cannot be empty' });
} }
try { const groupId = crypto.randomUUID();
const { lastID } = await dbRun(db, const userId = req.user?.id || null;
`INSERT INTO compliance_notes (hostname, metric_id, note, created_by, created_at)
VALUES (?, ?, ?, ?, datetime('now'))`,
[hostname, metric_id, noteText, req.user?.id || null]
);
const created = await dbGet(db, try {
`SELECT cn.id, cn.hostname, cn.metric_id, cn.note, cn.created_at, await dbRun(db, 'BEGIN TRANSACTION');
const insertedIds = [];
for (const mid of resolvedIds) {
const { lastID } = await dbRun(db,
`INSERT INTO compliance_notes (hostname, metric_id, note, group_id, created_by, created_at)
VALUES (?, ?, ?, ?, ?, datetime('now'))`,
[hostname, mid, noteText, groupId, userId]
);
insertedIds.push(lastID);
}
await dbRun(db, 'COMMIT');
// Fetch all created rows with username
const placeholders = insertedIds.map(() => '?').join(', ');
const notes = await dbAll(db,
`SELECT cn.id, cn.hostname, cn.metric_id, cn.note, cn.group_id, cn.created_at,
u.username AS created_by u.username AS created_by
FROM compliance_notes cn FROM compliance_notes cn
LEFT JOIN users u ON cn.created_by = u.id LEFT JOIN users u ON cn.created_by = u.id
WHERE cn.id = ?`, WHERE cn.id IN (${placeholders})
[lastID] ORDER BY cn.id ASC`,
insertedIds
); );
res.status(201).json(created); res.status(201).json({ notes });
} catch (err) { } catch (err) {
await dbRun(db, 'ROLLBACK').catch(() => {});
console.error('[Compliance] POST /notes error:', err.message); console.error('[Compliance] POST /notes error:', err.message);
res.status(500).json({ error: 'Failed to save note' }); res.status(500).json({ error: 'Failed to save note' });
} }
@@ -561,6 +864,10 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
// GET /notes/:hostname/:metricId // GET /notes/:hostname/:metricId
// Return all notes for a (hostname, metric_id) pair. // Return all notes for a (hostname, metric_id) pair.
//
// Params: hostname — device hostname string
// metricId — metric identifier string
// Response: { notes: [{ id, note, created_at, created_by }] }
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
router.get('/notes/:hostname/:metricId', async (req, res) => { router.get('/notes/:hostname/:metricId', async (req, res) => {
const { hostname, metricId } = req.params; const { hostname, metricId } = req.params;
@@ -584,10 +891,76 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
} }
}); });
// -----------------------------------------------------------------------
// DELETE /notes/:id
// Delete a note (or all notes in the same group_id) by note ID.
// Only the note author or an Admin can delete.
//
// Params: id — note row ID
// Query: ?group=true — delete all notes sharing the same group_id
// Response: { deleted: number }
// -----------------------------------------------------------------------
router.delete('/notes/:id', requireGroup('Admin', 'Standard_User'), async (req, res) => {
const noteId = parseInt(req.params.id, 10);
if (isNaN(noteId)) return res.status(400).json({ error: 'Invalid note ID' });
const deleteGroup = req.query.group === 'true';
try {
// Fetch the note to verify ownership
const note = await dbGet(db,
`SELECT id, hostname, metric_id, note, group_id, created_by FROM compliance_notes WHERE id = ?`,
[noteId]
);
if (!note) return res.status(404).json({ error: 'Note not found' });
// Only the author or an Admin can delete
const isAuthor = req.user && String(req.user.id) === String(note.created_by);
const isAdminUser = req.user && req.user.group === 'Admin';
if (!isAuthor && !isAdminUser) {
return res.status(403).json({ error: 'You can only delete your own notes' });
}
let deleted = 0;
if (deleteGroup && note.group_id) {
const result = await dbRun(db,
`DELETE FROM compliance_notes WHERE group_id = ?`,
[note.group_id]
);
deleted = result.changes || 0;
} else {
const result = await dbRun(db,
`DELETE FROM compliance_notes WHERE id = ?`,
[noteId]
);
deleted = result.changes || 0;
}
logAudit(db, {
userId: req.user.id,
username: req.user.username,
action: 'compliance_note_delete',
entityType: 'compliance_note',
entityId: String(noteId),
details: JSON.stringify({ hostname: note.hostname, group_id: note.group_id, deleted_count: deleted }),
ipAddress: req.ip,
});
res.json({ deleted });
} catch (err) {
console.error('[Compliance] DELETE /notes error:', err.message);
res.status(500).json({ error: 'Failed to delete note' });
}
});
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
// GET /trends // GET /trends
// Per-upload active totals + per-team counts for time-series charts. // Per-upload active totals + per-team counts for time-series charts.
// Returns rows ordered ascending by report_date. // Returns rows ordered ascending by report_date.
//
// Response: { trends: [{ report_date, new_count, recurring_count,
// resolved_count, total_active, STEAM, ACCESS-ENG, ACCESS-OPS,
// INTELDEV }] }
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
router.get('/trends', async (req, res) => { router.get('/trends', async (req, res) => {
try { try {
@@ -640,6 +1013,8 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
// GET /mttr // GET /mttr
// Mean time to resolution (calendar days) per team, for resolved items. // Mean time to resolution (calendar days) per team, for resolved items.
//
// Response: { mttr: [{ team, avg_days, resolved_count }] }
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
router.get('/mttr', async (req, res) => { router.get('/mttr', async (req, res) => {
try { try {
@@ -668,6 +1043,9 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
// GET /top-recurring // GET /top-recurring
// Active findings grouped by team + metric_id, sorted by seen_count desc. // Active findings grouped by team + metric_id, sorted by seen_count desc.
// Identifies chronic compliance gaps that keep reappearing. // Identifies chronic compliance gaps that keep reappearing.
//
// Response: { items: [{ team, metric_id, metric_desc, seen_count,
// host_count }] } — limited to top 20
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
router.get('/top-recurring', async (req, res) => { router.get('/top-recurring', async (req, res) => {
try { try {
@@ -689,6 +1067,8 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
// GET /category-trend // GET /category-trend
// Active item counts per category per upload, for stacked area chart. // Active item counts per category per upload, for stacked area chart.
//
// Response: { categoryTrend: [{ report_date, category, count }] }
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------
router.get('/category-trend', async (req, res) => { router.get('/category-trend', async (req, res) => {
try { try {

View File

@@ -3,6 +3,37 @@ const express = require('express');
const VALID_STATES = ['ACTIVE', 'ARCHIVED', 'RETURNED', 'CLOSED']; const VALID_STATES = ['ACTIVE', 'ARCHIVED', 'RETURNED', 'CLOSED'];
/**
* Find the most severe active finding related to an archived finding.
*
* A match requires:
* - Exact hostname match (case-sensitive)
* - The archive title is a case-insensitive substring of the active title, or vice versa
* - The active finding ID differs from the archive's finding_id
*
* @param {Object} archive - Archive record from ivanti_finding_archives
* @param {Array} activeFindings - Parsed entries from ivanti_findings_cache
* @returns {{ id: string, title: string, severity: number } | null}
*/
function findRelatedActive(archive, activeFindings) {
const archiveTitle = (archive.finding_title || '').toLowerCase();
const matches = activeFindings.filter(f => {
if (f.hostName !== archive.host_name) return false;
if (f.id === archive.finding_id) return false;
const activeTitle = (f.title || '').toLowerCase();
if (!archiveTitle.includes(activeTitle) && !activeTitle.includes(archiveTitle)) return false;
return true;
});
if (matches.length === 0) return null;
const best = matches.reduce((a, b) => (b.severity > a.severity ? b : a));
return { id: best.id, title: best.title, severity: best.severity };
}
function createIvantiArchiveRouter(db, requireAuth) { function createIvantiArchiveRouter(db, requireAuth) {
const router = express.Router(); const router = express.Router();
@@ -45,7 +76,37 @@ function createIvantiArchiveRouter(db, requireAuth) {
}); });
}); });
res.json({ archives, total: archives.length }); // Fetch and parse active findings cache for related-finding enrichment
let activeFindings = [];
try {
const cacheRow = await new Promise((resolve, reject) => {
db.get(
'SELECT findings_json FROM ivanti_findings_cache WHERE id = 1',
(err, row) => {
if (err) reject(err);
else resolve(row);
}
);
});
if (cacheRow && cacheRow.findings_json) {
activeFindings = JSON.parse(cacheRow.findings_json);
}
} catch (cacheErr) {
console.warn('Failed to load findings cache for related-active matching:', cacheErr);
}
if (!Array.isArray(activeFindings)) {
activeFindings = [];
}
// Enrich each archive record with related active finding info
const enrichedArchives = archives.map(archive => ({
...archive,
related_active: findRelatedActive(archive, activeFindings)
}));
res.json({ archives: enrichedArchives, total: enrichedArchives.length });
} catch (err) { } catch (err) {
console.error('Archive list error:', err); console.error('Archive list error:', err);
res.status(500).json({ error: 'Failed to fetch archive records' }); res.status(500).json({ error: 'Failed to fetch archive records' });

View File

@@ -397,6 +397,7 @@ function extractFinding(f) {
return { return {
id: String(f.id), id: String(f.id),
hostId: f.host?.hostId || null,
title: f.title || '', title: f.title || '',
severity: typeof f.severity === 'number' ? f.severity : parseFloat(f.severity) || 0, severity: typeof f.severity === 'number' ? f.severity : parseFloat(f.severity) || 0,
vrrGroup: f.vrrGroup || f.severityGroup || '', vrrGroup: f.vrrGroup || f.severityGroup || '',
@@ -782,7 +783,14 @@ function createIvantiFindingsRouter(db, requireAuth) {
router.use(requireAuth(db)); router.use(requireAuth(db));
// GET / — cached findings with notes merged in /**
* GET /api/ivanti/findings
*
* Return cached Ivanti findings with notes and overrides merged in.
*
* @returns {Object} 200 - { findings: Array<Object>, lastSync: string|null, overrides: Object }
* @returns {Object} 500 - { error: string } on database error
*/
router.get('/', async (req, res) => { router.get('/', async (req, res) => {
try { try {
res.json(await readStateWithNotes(db)); res.json(await readStateWithNotes(db));
@@ -791,7 +799,15 @@ function createIvantiFindingsRouter(db, requireAuth) {
} }
}); });
// POST /sync — trigger immediate sync, return fresh state /**
* POST /api/ivanti/findings/sync
*
* Trigger an immediate Ivanti findings sync and return the fresh state.
* Requires Admin or Standard_User group.
*
* @returns {Object} 200 - { findings: Array<Object>, lastSync: string|null, overrides: Object }
* @returns {Object} 500 - { error: string } if sync ran but state could not be read
*/
router.post('/sync', requireGroup('Admin', 'Standard_User'), async (req, res) => { router.post('/sync', requireGroup('Admin', 'Standard_User'), async (req, res) => {
await syncFindings(db); await syncFindings(db);
try { try {
@@ -801,7 +817,14 @@ function createIvantiFindingsRouter(db, requireAuth) {
} }
}); });
// GET /counts — open vs closed totals for pie chart /**
* GET /api/ivanti/findings/counts
*
* Return open vs closed finding totals for the pie chart.
*
* @returns {Object} 200 - { open: number, closed: number }
* @returns {Object} 500 - { error: string } on database error
*/
router.get('/counts', async (req, res) => { router.get('/counts', async (req, res) => {
try { try {
res.json(await readCounts(db)); res.json(await readCounts(db));
@@ -810,8 +833,15 @@ function createIvantiFindingsRouter(db, requireAuth) {
} }
}); });
// GET /counts/history — last snapshot per day, ascending, for the trend chart. /**
// Uses a window function (ROW_NUMBER) to pick the final sync of each calendar day. * GET /api/ivanti/findings/counts/history
*
* Return the last snapshot per day (ascending) for the trend chart.
* Uses a ROW_NUMBER window function to pick the final sync of each calendar day.
*
* @returns {Object} 200 - { history: Array<{ date: string, open_count: number, closed_count: number }> }
* @returns {Object} 500 - { error: string } on database error
*/
router.get('/counts/history', async (req, res) => { router.get('/counts/history', async (req, res) => {
try { try {
const rows = await new Promise((resolve, reject) => { const rows = await new Promise((resolve, reject) => {
@@ -837,7 +867,15 @@ function createIvantiFindingsRouter(db, requireAuth) {
} }
}); });
// GET /fp-workflow-counts — FP finding + unique workflow counts (open + closed) /**
* GET /api/ivanti/findings/fp-workflow-counts
*
* Return FP finding counts and unique workflow ID counts (open + closed),
* broken down by workflow status.
*
* @returns {Object} 200 - { findingCounts: Object, findingTotal: number, idCounts: Object, idTotal: number }
* @returns {Object} 500 - { error: string } on database error
*/
router.get('/fp-workflow-counts', async (req, res) => { router.get('/fp-workflow-counts', async (req, res) => {
try { try {
const row = await new Promise((resolve, reject) => { const row = await new Promise((resolve, reject) => {
@@ -860,7 +898,20 @@ function createIvantiFindingsRouter(db, requireAuth) {
} }
}); });
// PUT /:findingId/override — save or clear a field override (editor/admin only) /**
* PUT /api/ivanti/findings/:findingId/override
*
* Save or clear a field override for a finding. Requires Admin or Standard_User group.
* Sending an empty value clears the override (reverts to Ivanti-sourced data).
*
* @param {string} findingId - The finding identifier (URL param)
* @body {string} field - The field to override; must be one of 'hostName', 'dns'
* @body {string} [value] - The override value; empty or omitted to clear
*
* @returns {Object} 200 - { finding_id: string, field: string, value: string|null }
* @returns {Object} 400 - { error: string } when field is not in the allowed list
* @returns {Object} 500 - { error: string } on database error
*/
const OVERRIDE_ALLOWED = ['hostName', 'dns']; const OVERRIDE_ALLOWED = ['hostName', 'dns'];
router.put('/:findingId/override', requireGroup('Admin', 'Standard_User'), (req, res) => { router.put('/:findingId/override', requireGroup('Admin', 'Standard_User'), (req, res) => {
const { findingId } = req.params; const { findingId } = req.params;
@@ -896,7 +947,18 @@ function createIvantiFindingsRouter(db, requireAuth) {
} }
}); });
// PUT /:findingId/note — save or update a note (max 255 chars enforced here) /**
* PUT /api/ivanti/findings/:findingId/note
*
* Save or update a note for a finding (max 255 characters).
* Requires Admin or Standard_User group.
*
* @param {string} findingId - The finding identifier (URL param)
* @body {string} [note] - The note text (truncated to 255 chars)
*
* @returns {Object} 200 - { finding_id: string, note: string }
* @returns {Object} 500 - { error: string } on database error
*/
router.put('/:findingId/note', requireGroup('Admin', 'Standard_User'), (req, res) => { router.put('/:findingId/note', requireGroup('Admin', 'Standard_User'), (req, res) => {
const { findingId } = req.params; const { findingId } = req.params;
const note = String(req.body.note || '').slice(0, 255); const note = String(req.body.note || '').slice(0, 255);

File diff suppressed because it is too large Load Diff

View File

@@ -3,7 +3,7 @@ const express = require('express');
const { requireGroup } = require('../middleware/auth'); const { requireGroup } = require('../middleware/auth');
const logAudit = require('../helpers/auditLog'); const logAudit = require('../helpers/auditLog');
const VALID_WORKFLOW_TYPES = ['FP', 'Archer', 'CARD']; const VALID_WORKFLOW_TYPES = ['FP', 'Archer', 'CARD', 'GRANITE'];
const VALID_STATUSES = ['pending', 'complete']; const VALID_STATUSES = ['pending', 'complete'];
function isValidVendor(vendor) { function isValidVendor(vendor) {
@@ -27,20 +27,27 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
*/ */
router.get('/', requireAuth(db), (req, res) => { router.get('/', requireAuth(db), (req, res) => {
db.all( db.all(
`SELECT * FROM ivanti_todo_queue `SELECT q.*,
WHERE user_id = ? o.value AS override_hostname
ORDER BY vendor ASC, created_at ASC`, FROM ivanti_todo_queue q
LEFT JOIN ivanti_finding_overrides o
ON o.finding_id = q.finding_id AND o.field = 'hostName'
WHERE q.user_id = ?
ORDER BY q.vendor ASC, q.created_at ASC`,
[req.user.id], [req.user.id],
(err, rows) => { (err, rows) => {
if (err) { if (err) {
console.error('Error fetching todo queue:', err); console.error('Error fetching todo queue:', err);
return res.status(500).json({ error: 'Internal server error.' }); return res.status(500).json({ error: 'Internal server error.' });
} }
// Parse cves_json back to array for each row // Parse cves_json back to array; prefer overridden hostname
const parsed = rows.map((r) => ({ const parsed = rows.map((r) => ({
...r, ...r,
hostname: r.override_hostname || r.hostname,
cves: r.cves_json ? JSON.parse(r.cves_json) : [], cves: r.cves_json ? JSON.parse(r.cves_json) : [],
})); }));
// Clean up the extra column from the response
parsed.forEach((r) => delete r.override_hostname);
res.json(parsed); res.json(parsed);
} }
); );
@@ -57,8 +64,8 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
* @body {string[]} [findings[].cves] - Optional array of CVE identifiers * @body {string[]} [findings[].cves] - Optional array of CVE identifiers
* @body {string} [findings[].ip_address] - Optional IP address (max 64 chars) * @body {string} [findings[].ip_address] - Optional IP address (max 64 chars)
* @body {string} [findings[].hostname] - Optional hostname (max 255 chars) * @body {string} [findings[].hostname] - Optional hostname (max 255 chars)
* @body {string} workflow_type - One of 'FP', 'Archer', 'CARD' * @body {string} workflow_type - One of 'FP', 'Archer', 'CARD', 'GRANITE'
* @body {string} vendor - Required for FP/Archer (max 200 chars); optional for CARD * @body {string} vendor - Required for FP/Archer (max 200 chars); optional for CARD/GRANITE
* *
* @returns {Object} 201 - { items: Array<Object> } array of created queue items, * @returns {Object} 201 - { items: Array<Object> } array of created queue items,
* each with: id, user_id, finding_id, finding_title, cves_json, ip_address, * each with: id, user_id, finding_id, finding_title, cves_json, ip_address,
@@ -82,10 +89,10 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
} }
if (!VALID_WORKFLOW_TYPES.includes(workflow_type)) { if (!VALID_WORKFLOW_TYPES.includes(workflow_type)) {
return res.status(400).json({ error: 'workflow_type must be FP, Archer, or CARD.' }); return res.status(400).json({ error: 'workflow_type must be FP, Archer, CARD, or GRANITE.' });
} }
if (workflow_type !== 'CARD') { if (!['CARD', 'GRANITE'].includes(workflow_type)) {
if (!isValidVendor(vendor)) { if (!isValidVendor(vendor)) {
return res.status(400).json({ error: 'vendor is required for FP and Archer workflows.' }); return res.status(400).json({ error: 'vendor is required for FP and Archer workflows.' });
} }
@@ -95,7 +102,7 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
return res.status(400).json({ error: 'vendor must be under 200 chars.' }); return res.status(400).json({ error: 'vendor must be under 200 chars.' });
} }
const vendorVal = workflow_type === 'CARD' ? '' : vendor.trim(); const vendorVal = ['CARD', 'GRANITE'].includes(workflow_type) ? '' : vendor.trim();
const userId = req.user.id; const userId = req.user.id;
// --- Transactional batch insert --- // --- Transactional batch insert ---
@@ -154,7 +161,11 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
// Fetch all inserted rows // Fetch all inserted rows
const placeholders = insertedIds.map(() => '?').join(','); const placeholders = insertedIds.map(() => '?').join(',');
db.all( db.all(
`SELECT * FROM ivanti_todo_queue WHERE id IN (${placeholders})`, `SELECT q.*, o.value AS override_hostname
FROM ivanti_todo_queue q
LEFT JOIN ivanti_finding_overrides o
ON o.finding_id = q.finding_id AND o.field = 'hostName'
WHERE q.id IN (${placeholders})`,
insertedIds, insertedIds,
(fetchErr, fetchedRows) => { (fetchErr, fetchedRows) => {
if (fetchErr) { if (fetchErr) {
@@ -162,10 +173,15 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
return res.status(500).json({ error: 'Internal server error.' }); return res.status(500).json({ error: 'Internal server error.' });
} }
const items = (fetchedRows || []).map((r) => ({ const items = (fetchedRows || []).map((r) => {
...r, const item = {
cves: r.cves_json ? JSON.parse(r.cves_json) : [], ...r,
})); hostname: r.override_hostname || r.hostname,
cves: r.cves_json ? JSON.parse(r.cves_json) : [],
};
delete item.override_hostname;
return item;
});
// Audit log (fire-and-forget) // Audit log (fire-and-forget)
logAudit(db, { logAudit(db, {
@@ -203,8 +219,9 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
* @body {string} [finding_title] - Optional finding title (max 500 chars) * @body {string} [finding_title] - Optional finding title (max 500 chars)
* @body {string[]} [cves] - Optional array of CVE identifiers * @body {string[]} [cves] - Optional array of CVE identifiers
* @body {string} [ip_address] - Optional IP address (max 64 chars) * @body {string} [ip_address] - Optional IP address (max 64 chars)
* @body {string} [hostname] - Optional hostname (max 255 chars) * @body {string} vendor - Required for FP/Archer (max 200 chars); optional for CARD * @body {string} [hostname] - Optional hostname (max 255 chars)
* @body {string} workflow_type - One of 'FP', 'Archer', 'CARD' * @body {string} workflow_type - One of 'FP', 'Archer', 'CARD', 'GRANITE'
* @body {string} vendor - Required for FP/Archer (max 200 chars); optional for CARD/GRANITE
* *
* @returns {Object} 201 - Created queue item with parsed cves array: * @returns {Object} 201 - Created queue item with parsed cves array:
* id, user_id, finding_id, finding_title, cves_json, ip_address, * id, user_id, finding_id, finding_title, cves_json, ip_address,
@@ -219,17 +236,17 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
return res.status(400).json({ error: 'finding_id is required.' }); return res.status(400).json({ error: 'finding_id is required.' });
} }
if (!VALID_WORKFLOW_TYPES.includes(workflow_type)) { if (!VALID_WORKFLOW_TYPES.includes(workflow_type)) {
return res.status(400).json({ error: 'workflow_type must be FP, Archer, or CARD.' }); return res.status(400).json({ error: 'workflow_type must be FP, Archer, CARD, or GRANITE.' });
} }
// Vendor is required for FP and Archer, optional for CARD // Vendor is required for FP and Archer, optional for CARD/GRANITE
if (workflow_type !== 'CARD' && !isValidVendor(vendor)) { if (!['CARD', 'GRANITE'].includes(workflow_type) && !isValidVendor(vendor)) {
return res.status(400).json({ error: 'vendor is required for FP and Archer workflows.' }); return res.status(400).json({ error: 'vendor is required for FP and Archer workflows.' });
} }
if (vendor !== undefined && vendor !== '' && !isValidVendor(vendor)) { if (vendor !== undefined && vendor !== '' && !isValidVendor(vendor)) {
return res.status(400).json({ error: 'vendor must be under 200 chars.' }); return res.status(400).json({ error: 'vendor must be under 200 chars.' });
} }
const vendorVal = workflow_type === 'CARD' ? '' : vendor.trim(); const vendorVal = ['CARD', 'GRANITE'].includes(workflow_type) ? '' : vendor.trim();
const cvesJson = Array.isArray(cves) ? JSON.stringify(cves) : null; const cvesJson = Array.isArray(cves) ? JSON.stringify(cves) : null;
const ipVal = ip_address && typeof ip_address === 'string' ? ip_address.trim().slice(0, 64) : null; const ipVal = ip_address && typeof ip_address === 'string' ? ip_address.trim().slice(0, 64) : null;
const hostVal = hostname && typeof hostname === 'string' ? hostname.trim().slice(0, 255) : null; const hostVal = hostname && typeof hostname === 'string' ? hostname.trim().slice(0, 255) : null;
@@ -248,13 +265,23 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
return res.status(500).json({ error: 'Internal server error.' }); return res.status(500).json({ error: 'Internal server error.' });
} }
db.get( db.get(
'SELECT * FROM ivanti_todo_queue WHERE id = ?', `SELECT q.*, o.value AS override_hostname
FROM ivanti_todo_queue q
LEFT JOIN ivanti_finding_overrides o
ON o.finding_id = q.finding_id AND o.field = 'hostName'
WHERE q.id = ?`,
[this.lastID], [this.lastID],
(err2, row) => { (err2, row) => {
if (err2 || !row) { if (err2 || !row) {
return res.status(201).json({ id: this.lastID, message: 'Added to queue.' }); return res.status(201).json({ id: this.lastID, message: 'Added to queue.' });
} }
res.status(201).json({ ...row, cves: row.cves_json ? JSON.parse(row.cves_json) : [] }); const result = {
...row,
hostname: row.override_hostname || row.hostname,
cves: row.cves_json ? JSON.parse(row.cves_json) : [],
};
delete result.override_hostname;
res.status(201).json(result);
} }
); );
} }
@@ -268,7 +295,7 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
* *
* @param {string} id - Queue item ID (URL parameter) * @param {string} id - Queue item ID (URL parameter)
* @body {string} [vendor] - New vendor string (max 200 chars) * @body {string} [vendor] - New vendor string (max 200 chars)
* @body {string} [workflow_type] - One of 'FP', 'Archer', 'CARD' * @body {string} [workflow_type] - One of 'FP', 'Archer', 'CARD', 'GRANITE'
* @body {string} [status] - One of 'pending', 'complete' * @body {string} [status] - One of 'pending', 'complete'
* *
* @returns {Object} 200 - Updated queue item with parsed cves array: * @returns {Object} 200 - Updated queue item with parsed cves array:
@@ -286,7 +313,7 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
return res.status(400).json({ error: 'vendor must be a non-empty string (max 200 chars).' }); return res.status(400).json({ error: 'vendor must be a non-empty string (max 200 chars).' });
} }
if (workflow_type !== undefined && !VALID_WORKFLOW_TYPES.includes(workflow_type)) { if (workflow_type !== undefined && !VALID_WORKFLOW_TYPES.includes(workflow_type)) {
return res.status(400).json({ error: 'workflow_type must be FP or Archer.' }); return res.status(400).json({ error: 'workflow_type must be FP, Archer, CARD, or GRANITE.' });
} }
if (status !== undefined && !VALID_STATUSES.includes(status)) { if (status !== undefined && !VALID_STATUSES.includes(status)) {
return res.status(400).json({ error: 'status must be pending or complete.' }); return res.status(400).json({ error: 'status must be pending or complete.' });
@@ -336,13 +363,134 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
return res.status(500).json({ error: 'Internal server error.' }); return res.status(500).json({ error: 'Internal server error.' });
} }
db.get( db.get(
'SELECT * FROM ivanti_todo_queue WHERE id = ?', `SELECT q.*, o.value AS override_hostname
FROM ivanti_todo_queue q
LEFT JOIN ivanti_finding_overrides o
ON o.finding_id = q.finding_id AND o.field = 'hostName'
WHERE q.id = ?`,
[id], [id],
(err3, row) => { (err3, row) => {
if (err3 || !row) { if (err3 || !row) {
return res.json({ message: 'Queue item updated.' }); return res.json({ message: 'Queue item updated.' });
} }
res.json({ ...row, cves: row.cves_json ? JSON.parse(row.cves_json) : [] }); const result = {
...row,
hostname: row.override_hostname || row.hostname,
cves: row.cves_json ? JSON.parse(row.cves_json) : [],
};
delete result.override_hostname;
res.json(result);
}
);
}
);
}
);
});
/**
* POST /api/ivanti/todo-queue/:id/redirect
*
* Redirect a completed queue item to a different workflow type.
* Creates a new pending item copying finding data from the original.
*
* @param {string} id - Original queue item ID (URL parameter)
* @body {string} workflow_type - Target workflow type: 'FP', 'Archer', 'CARD', or 'GRANITE'
* @body {string} [vendor] - Required for FP/Archer (max 200 chars); ignored for CARD/GRANITE
*
* @returns {Object} 201 - Newly created queue item with parsed cves array
* @returns {Object} 400 - { error: string } on validation failure or item not complete
* @returns {Object} 404 - { error: string } if item not found for current user
* @returns {Object} 500 - { error: string } on database error
*/
router.post('/:id/redirect', requireAuth(db), requireGroup('Admin', 'Standard_User'), (req, res) => {
const { id } = req.params;
const { workflow_type, vendor } = req.body;
// --- Validation ---
if (!VALID_WORKFLOW_TYPES.includes(workflow_type)) {
return res.status(400).json({ error: 'workflow_type must be FP, Archer, CARD, or GRANITE.' });
}
if (!['CARD', 'GRANITE'].includes(workflow_type)) {
if (!isValidVendor(vendor)) {
return res.status(400).json({ error: 'vendor is required for FP and Archer workflows.' });
}
}
if (vendor !== undefined && vendor !== '' && typeof vendor === 'string' && vendor.trim().length > 200) {
return res.status(400).json({ error: 'vendor must be under 200 chars.' });
}
const vendorVal = ['CARD', 'GRANITE'].includes(workflow_type) ? '' : vendor.trim();
// --- Fetch original item scoped to current user ---
db.get(
'SELECT * FROM ivanti_todo_queue WHERE id = ? AND user_id = ?',
[id, req.user.id],
(err, original) => {
if (err) {
console.error('Error fetching queue item for redirect:', err);
return res.status(500).json({ error: 'Internal server error.' });
}
if (!original) {
return res.status(404).json({ error: 'Queue item not found.' });
}
if (original.status !== 'complete') {
return res.status(400).json({ error: 'Only completed queue items can be redirected.' });
}
// --- INSERT new row copying finding data from original ---
db.run(
`INSERT INTO ivanti_todo_queue
(user_id, finding_id, finding_title, cves_json, ip_address, hostname, vendor, workflow_type)
VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
[req.user.id, original.finding_id, original.finding_title, original.cves_json, original.ip_address, original.hostname, vendorVal, workflow_type],
function (insertErr) {
if (insertErr) {
console.error('Error inserting redirected queue item:', insertErr);
return res.status(500).json({ error: 'Internal server error.' });
}
const newId = this.lastID;
// --- Fetch the inserted row ---
db.get(
`SELECT q.*, o.value AS override_hostname
FROM ivanti_todo_queue q
LEFT JOIN ivanti_finding_overrides o
ON o.finding_id = q.finding_id AND o.field = 'hostName'
WHERE q.id = ?`,
[newId],
(fetchErr, row) => {
if (fetchErr || !row) {
console.error('Error fetching redirected queue item:', fetchErr);
return res.status(500).json({ error: 'Internal server error.' });
}
// Audit log (fire-and-forget)
logAudit(db, {
userId: req.user.id,
username: req.user.username,
action: 'queue_item_redirected',
entityType: 'ivanti_todo_queue',
entityId: String(original.id),
details: {
original_workflow_type: original.workflow_type,
target_workflow_type: workflow_type,
new_item_id: newId,
vendor: vendorVal,
},
ipAddress: req.ip,
});
const result = {
...row,
hostname: row.override_hostname || row.hostname,
cves: row.cves_json ? JSON.parse(row.cves_json) : [],
};
delete result.override_hostname;
return res.status(201).json(result);
} }
); );
} }

View File

@@ -0,0 +1,44 @@
{
"metric_categories": {
"1.1.1": "Logging & Monitoring",
"1.1.3": "Logging & Monitoring",
"1.4.1": "Logging & Monitoring",
"2.3.4i": "Vulnerability Management",
"2.3.6i": "Vulnerability Management",
"2.3.8i": "Vulnerability Management",
"5.2.4": "Access & MFA",
"5.2.5": "Access & MFA",
"5.2.6": "Access & MFA",
"5.2.7": "Access & MFA",
"5.2.8": "Access & MFA",
"5.3.4": "Endpoint Protection",
"5.5.4i": "Vulnerability Management",
"5.5.5": "Decommissioned Assets",
"5.8.1": "Application Security",
"7.1.1": "Logging & Monitoring",
"7.1.4": "Logging & Monitoring",
"7.6.13": "Disaster Recovery",
"7.6.16": "Disaster Recovery",
"Missing_AppID": "Asset Data Quality",
"Missing_DF": "Asset Data Quality",
"Missing_OS": "Asset Data Quality",
"5.5.2": "Other"
},
"core_cols": [
"Preferred - Hostname",
"GRANITE - IPv4_Address",
"GRANITE - Type",
"Team",
"Compliant",
"Source_Network",
"Vertical",
"GRANITE - Equip_Inst_ID",
"GRANITE - RESPONSIBLE_TEAM"
],
"skip_sheets": [
"Summary",
"CMDB_9box",
"Vulns",
"Aging Dashboard"
]
}

View File

@@ -0,0 +1,84 @@
#!/usr/bin/env python3
"""
Dump the structural schema of a compliance xlsx file as JSON.
Usage: python3 dump_xlsx_schema.py <path_to_xlsx>
Output:
{
"sheets": [
{
"name": "SheetName",
"columns": ["Col A", "Col B", ...],
"row_count": 150,
"metric_values": ["2.3.4i", "5.2.4", ...] // only if a Metric column exists
},
...
]
}
Dependencies: openpyxl (already in requirements.txt)
"""
import sys
import json
from openpyxl import load_workbook
def main():
if len(sys.argv) < 2:
print(json.dumps({'error': 'No file path provided'}))
sys.exit(1)
filepath = sys.argv[1]
try:
wb = load_workbook(filepath, read_only=True, data_only=True)
except Exception as e:
print(json.dumps({'error': f'Cannot open file: {str(e)}'}))
sys.exit(1)
sheets = []
for sheet_name in wb.sheetnames:
ws = wb[sheet_name]
rows = list(ws.iter_rows(max_row=1, values_only=True))
columns = [str(c).strip() for c in rows[0] if c is not None] if rows else []
# Count data rows (excluding header)
row_count = 0
for _ in ws.iter_rows(min_row=2, values_only=True):
row_count += 1
# Extract metric values if a Metric column exists in the Summary sheet
metric_values = []
if sheet_name == 'Summary':
# Summary has header at row 4 (0-indexed row 3), read from row 5 onward
header_rows = list(ws.iter_rows(min_row=4, max_row=4, values_only=True))
if header_rows:
summary_cols = [str(c).strip() if c else '' for c in header_rows[0]]
metric_idx = None
for i, col in enumerate(summary_cols):
if col == 'Metric':
metric_idx = i
break
if metric_idx is not None:
for row in ws.iter_rows(min_row=5, values_only=True):
if row[metric_idx] is not None:
val = str(row[metric_idx]).strip()
if val and val != 'Metric':
metric_values.append(val)
entry = {
'name': sheet_name,
'columns': columns,
'row_count': row_count,
}
if metric_values:
entry['metric_values'] = sorted(set(metric_values))
sheets.append(entry)
wb.close()
print(json.dumps({'sheets': sheets}, indent=2))
if __name__ == '__main__':
main()

View File

@@ -0,0 +1,91 @@
#!/usr/bin/env python3
"""
Extract the structural schema of a compliance xlsx file as JSON.
Usage: python3 extract_xlsx_schema.py <path_to_xlsx>
Output:
{
"sheets": [
{
"name": "Summary",
"columns": ["Metric", "Non-Compliant", "..."],
"metric_values": ["2.3.4i", "5.2.4", "..."]
},
{
"name": "2.3.4i",
"columns": ["Preferred - Hostname", "GRANITE - IPv4_Address", "..."]
}
]
}
- Uses openpyxl in read-only mode.
- Extracts sheet names, first-row column headers per sheet, and unique metric
values from the Summary sheet (header at row 4, data from row 5 onward).
- On error, returns { "error": "..." } on stdout and exits with non-zero code.
Dependencies: openpyxl (already in requirements.txt)
"""
import sys
import json
from openpyxl import load_workbook
def main():
if len(sys.argv) < 2:
print(json.dumps({"error": "No file path provided"}))
sys.exit(1)
filepath = sys.argv[1]
try:
wb = load_workbook(filepath, read_only=True, data_only=True)
except Exception as e:
print(json.dumps({"error": f"Cannot open file: {str(e)}"}))
sys.exit(1)
if not wb.sheetnames:
print(json.dumps({"error": "Workbook contains no sheets"}))
wb.close()
sys.exit(1)
sheets = []
for sheet_name in wb.sheetnames:
ws = wb[sheet_name]
# Extract first-row column headers
rows = list(ws.iter_rows(max_row=1, values_only=True))
columns = [str(c).strip() for c in rows[0] if c is not None] if rows else []
entry = {
"name": sheet_name,
"columns": columns,
}
# Extract metric values from the Summary sheet
# Summary has header at row 4, data from row 5 onward
if sheet_name == "Summary":
metric_values = []
header_rows = list(ws.iter_rows(min_row=4, max_row=4, values_only=True))
if header_rows:
summary_cols = [str(c).strip() if c else "" for c in header_rows[0]]
metric_idx = None
for i, col in enumerate(summary_cols):
if col == "Metric":
metric_idx = i
break
if metric_idx is not None:
for row in ws.iter_rows(min_row=5, values_only=True):
if row[metric_idx] is not None:
val = str(row[metric_idx]).strip()
if val and val != "Metric":
metric_values.append(val)
entry["metric_values"] = sorted(set(metric_values))
sheets.append(entry)
wb.close()
print(json.dumps({"sheets": sheets}))
if __name__ == "__main__":
main()

View File

@@ -12,39 +12,35 @@ Output:
} }
""" """
import sys import sys
import os
import json import json
import re import re
import pandas as pd import pandas as pd
from pathlib import Path from pathlib import Path
METRIC_CATEGORIES = {
'2.3.4i': 'Vulnerability Management',
'2.3.6i': 'Vulnerability Management',
'2.3.8i': 'Vulnerability Management',
'5.2.4': 'Access & MFA',
'5.2.5': 'Access & MFA',
'5.2.6': 'Access & MFA',
'5.3.4': 'Endpoint Protection',
'5.5.2': 'End-of-Life OS',
'5.5.4i': 'Vulnerability Management',
'5.5.5': 'Decommissioned Assets',
'5.8.1': 'Application Security',
'7.1.1': 'Logging & Monitoring',
'7.6.13': 'Disaster Recovery',
'7.6.16': 'Disaster Recovery',
'Missing_AppID': 'Asset Data Quality',
'Missing_DF': 'Asset Data Quality',
'Missing_OS': 'Asset Data Quality',
}
# Columns that go into the main item fields — everything else becomes extra_json def load_config():
CORE_COLS = { """Load parser configuration from compliance_config.json."""
'Preferred - Hostname', 'GRANITE - IPv4_Address', 'GRANITE - Type', script_dir = os.path.dirname(os.path.abspath(__file__))
'Team', 'Compliant', 'Source_Network', 'Vertical', config_path = os.path.join(script_dir, 'compliance_config.json')
'GRANITE - Equip_Inst_ID', 'GRANITE - RESPONSIBLE_TEAM',
}
SKIP_SHEETS = {'Summary', 'CMDB_9box'} try:
with open(config_path, 'r') as f:
config = json.load(f)
except FileNotFoundError:
print(f"Error: Configuration file not found: {config_path}", file=sys.stderr)
sys.exit(1)
except json.JSONDecodeError as e:
print(f"Error: Invalid JSON in configuration file {config_path}: {e}", file=sys.stderr)
sys.exit(1)
return config
_config = load_config()
METRIC_CATEGORIES = _config['metric_categories']
CORE_COLS = set(_config['core_cols'])
SKIP_SHEETS = set(_config['skip_sheets'])
def safe_str(val): def safe_str(val):

View File

@@ -26,6 +26,7 @@ const createIvantiTodoQueueRouter = require('./routes/ivantiTodoQueue');
const createIvantiArchiveRouter = require('./routes/ivantiArchive'); const createIvantiArchiveRouter = require('./routes/ivantiArchive');
const createIvantiFpWorkflowRouter = require('./routes/ivantiFpWorkflow'); const createIvantiFpWorkflowRouter = require('./routes/ivantiFpWorkflow');
const createComplianceRouter = require('./routes/compliance'); const createComplianceRouter = require('./routes/compliance');
const createAtlasRouter = require('./routes/atlas');
const app = express(); const app = express();
const PORT = process.env.PORT || 3001; const PORT = process.env.PORT || 3001;
@@ -234,6 +235,9 @@ app.use('/api/ivanti/fp-workflow', createIvantiFpWorkflowRouter(db, requireAuth)
// AEO compliance routes — xlsx upload, non-compliant item tracking, notes // AEO compliance routes — xlsx upload, non-compliant item tracking, notes
app.use('/api/compliance', createComplianceRouter(db, upload, requireAuth, requireGroup)); app.use('/api/compliance', createComplianceRouter(db, upload, requireAuth, requireGroup));
// Atlas InfoSec action plan routes — proxy CRUD to Atlas API, local cache for badges
app.use('/api/atlas', createAtlasRouter(db, requireAuth));
// ========== CVE ENDPOINTS ========== // ========== CVE ENDPOINTS ==========
// Get all CVEs with optional filters (authenticated users) // Get all CVEs with optional filters (authenticated users)

BIN
cve_database.db Normal file

Binary file not shown.

0
cve_database.db.backup Normal file
View File

0
database.db Normal file
View File

File diff suppressed because it is too large Load Diff

View File

@@ -74,26 +74,114 @@ Key details:
Returns HTTP 200 or 202 (Accepted — async job creation). Response contains a numeric `id` (the workflow batch job ID) and `created` timestamp. No `generatedId` or `uuid` in this response. Returns HTTP 200 or 202 (Accepted — async job creation). Response contains a numeric `id` (the workflow batch job ID) and `created` timestamp. No `generatedId` or `uuid` in this response.
### Map Findings to Existing Workflow (tested 2026-04-13)
```
POST /client/{clientId}/workflowBatch/falsePositive/{workflowBatchUuid}/map
Content-Type: application/json
```
Maps additional host findings to an existing FP workflow batch. Used by the FP submission editing feature to add findings after initial creation.
**Critical: one finding per call.** The map endpoint only reliably maps one finding per request. Sending multiple finding IDs via the `IN` operator or comma-separated values results in only the first finding being mapped. The multipart/form-data format (used by the create endpoint) returns 500 on this endpoint.
#### Request body
```json
{
"subject": "hostFinding",
"filterRequest": {
"filters": [
{
"field": "id",
"exclusive": false,
"operator": "EXACT",
"value": "2283734550"
}
]
}
}
```
Key details:
- Must be `application/json` (NOT multipart/form-data — returns 500)
- Use `EXACT` operator with a single finding ID per call
- `IN` operator with comma-separated IDs only maps the first finding
- Loop through findings and make one API call per finding
- The `workflowBatchUuid` in the URL is the UUID from the search endpoint (not the numeric batch ID from create)
#### Response (200)
Returns the updated workflow batch object on success.
#### UUID resolution
The `workflowBatchUuid` required in the URL is NOT returned by the create endpoint. To obtain it:
1. Search via `POST /client/{clientId}/workflowBatch/search` with `{ field: 'name', operator: 'EXACT', value: '<workflow_name>' }`
2. Use `projection: 'internal'` to get full batch objects
3. The UUID is in the `uuid` field of the returned batch object
4. Cache the UUID locally after first resolution (stored in `ivanti_fp_submissions.ivanti_workflow_batch_uuid`)
#### Implementation in dashboard
The `resolveWorkflowBatchUuid()` helper in `backend/routes/ivantiFpWorkflow.js` handles UUID resolution:
- Returns cached UUID if available in the local submission record
- Otherwise searches Ivanti by workflow name, extracts `batch.uuid`, and caches it for future use
The findings map loop in the `POST /submissions/:id/findings` endpoint:
- Iterates through each finding ID individually
- Makes one JSON POST per finding with `EXACT` operator
- Tracks which findings succeeded vs failed
- Only marks queue items as complete for successfully mapped findings
- Returns both `addedFindings` and `failedFindings` arrays in the response
### Other Workflow Endpoints (from Swagger) ### Other Workflow Endpoints (from Swagger)
These are available but not currently used by the dashboard: These are available but not all are currently used by the dashboard:
| Endpoint | Purpose | | Endpoint | Purpose | Status |
|----------|---------| |----------|---------|--------|
| `/workflowBatch/acceptance/request` | Risk acceptance workflow | | `/workflowBatch/acceptance/request` | Risk acceptance workflow | Not used |
| `/workflowBatch/remediation/request` | Remediation workflow | | `/workflowBatch/remediation/request` | Remediation workflow | Not used |
| `/workflowBatch/severityChange/request` | Severity change workflow | | `/workflowBatch/severityChange/request` | Severity change workflow | Not used |
| `/workflowBatch/{workflowType}/approve` | Approve a workflow (needs `workflowBatchUuid`) | | `/workflowBatch/{workflowType}/approve` | Approve a workflow (needs `workflowBatchUuid`) | Not used |
| `/workflowBatch/{workflowType}/reject` | Reject a workflow | | `/workflowBatch/{workflowType}/reject` | Reject a workflow | Not used |
| `/workflowBatch/{workflowType}/rework` | Send back for rework | | `/workflowBatch/{workflowType}/rework` | Send back for rework | Not used |
| `/workflowBatch/{workflowType}/update` | Update a workflow | | `/workflowBatch/{workflowType}/update` | Update a workflow | Not used |
| `/workflowBatch/{workflowType}/{workflowBatchUuid}/map` | Map findings to workflow | | `/workflowBatch/{workflowType}/{workflowBatchUuid}/map` | Map findings to workflow | Used (FP editing) |
| `/workflowBatch/{workflowType}/{workflowBatchUuid}/unmap` | Unmap findings | | `/workflowBatch/{workflowType}/{workflowBatchUuid}/unmap` | Unmap findings | Not used |
| `/workflowBatch/{workflowType}/{workflowBatchUuid}/attach` | Attach file to existing workflow | | `/workflowBatch/{workflowType}/{workflowBatchUuid}/attach` | Attach file to existing workflow | **Broken — see note** |
| `/workflowBatch/{workflowType}/{workflowBatchUuid}/detach` | Detach file | | `/workflowBatch/{workflowType}/{workflowBatchUuid}/detach` | Detach file | Not used |
| `/workflowBatch/model` | Get model/schema | | `/workflowBatch/model` | Get model/schema | Not used |
| `/workflowBatch/filter` | Get available filter fields | | `/workflowBatch/filter` | Get available filter fields | Not used |
| `/workflowBatch/suggest` | Get suggested values for a filter field | | `/workflowBatch/suggest` | Get suggested values for a filter field | Not used |
### Known Limitations
#### Attach endpoint does not work (tested 2026-04-13)
The `/workflowBatch/{workflowType}/{workflowBatchUuid}/attach` endpoint is listed in the Swagger spec but returns HTTP 400 (Bad Request) for all tested request formats:
- `multipart/form-data` with field name `file` (singular) — 400
- `multipart/form-data` with field name `files` (plural) — 400
- Tested with `Content-Type: application/octet-stream` and `image/png` — both 400
- Tested with both `ivantiMultipartPost` and `ivantiFormPost` helpers — both 400
The Ivanti response is a generic Spring Boot error with no detail message:
```json
{"timestamp":"...","status":400,"error":"Bad Request","path":"/api/v1/client/1550/workflowBatch/falsePositive/{uuid}/attach"}
```
**Workaround:** File attachments can only be uploaded during the initial workflow creation (sent inline with the `/workflowBatch/falsePositive/request` endpoint). To add attachments to an existing workflow, users must upload them directly in the Ivanti platform UI.
#### Search by numeric batch ID does not work
The `/workflowBatch/search` endpoint does not support filtering by the numeric `id` returned from the create endpoint. Searching with `{ field: 'id', operator: 'EXACT', value: '33432541' }` returns 0 results. Searching by `name` field works and returns the workflow batch object including the `uuid` field needed for map/attach operations.
#### UUID not returned by create endpoint
The `/workflowBatch/falsePositive/request` create endpoint returns only `{ id: <number>, created: <timestamp> }`. The `uuid` needed for map/attach/approve/reject operations must be obtained separately via the search endpoint.
## Environment Variables ## Environment Variables

View File

@@ -0,0 +1,94 @@
# AEO Compliance Tracking Guide
## Overview
The Compliance page tracks AEO security posture metrics for the STEAM and ACCESS-ENG teams. It processes weekly xlsx compliance reports, shows per-metric health cards, and tracks non-compliant devices down to the individual hostname level.
## Teams Tracked
Only two teams are monitored:
- **STEAM** (NTS-AEO-STEAM)
- **ACCESS-ENG** (NTS-AEO-ACCESS-ENG)
## Uploading a Compliance Report
### Prerequisites
- You must have editor or admin access
- The report must be an `.xlsx` file (the standard NTS_AEO compliance export)
### Upload Process
1. Navigate to the **Compliance** page
2. Click the **Upload Report** button
3. Drag and drop the xlsx file or click to browse
4. The system parses the spreadsheet using a Python backend script and shows a **preview**:
- **New items**: Devices/metrics appearing for the first time
- **Recurring items**: Devices/metrics that were already non-compliant
- **Resolved items**: Previously non-compliant items no longer in the report
5. Review the diff summary
6. Click **Commit** to save the data
The upload is a two-step process (preview then commit) so you can verify the data before it's written to the database.
## Health Cards
After uploading, the page displays metric health cards for each team. Each card shows:
- **Metric ID** — the compliance metric identifier
- **Category** — the metric category (Vulnerability Management, Access & MFA, Logging & Monitoring, etc.)
- **Compliance %** — current compliance percentage
- **Target** — the required target percentage
- **Status** — color-coded:
- Green: Meets/Exceeds Target
- Amber: Within 15% of Target
- Red: Below 15% of Target
Click a health card to filter the device list to that specific metric.
## Metric Categories
| Category | Color |
|----------|-------|
| Vulnerability Management | Red |
| Access & MFA | Amber |
| Logging & Monitoring | Purple |
| End-of-Life OS | Orange |
| Decommissioned Assets | Slate |
| Asset Data Quality | Slate |
| Application Security | Blue |
| Disaster Recovery | Teal |
| Endpoint Protection | Orange |
## Device-Level Tracking
Below the health cards, the device list shows non-compliant devices grouped by hostname. Each device entry shows:
- Hostname and IP address
- Device type and team assignment
- Failing metrics with first-seen and last-seen dates
- Seen count (how many consecutive reports the device has been non-compliant)
### Device Detail Panel
Click a device to open the detail panel showing:
- All metrics the device is failing
- Upload history (when the device first appeared, when it was last seen)
- Per-metric notes with timestamps
### Adding Notes
You can add notes to one or more metrics on a device at once:
1. Open the device detail panel
2. Select the metrics the note applies to using the chip selector — click individual metric chips to toggle them, or use **Select All** / **Deselect All** for bulk selection
3. Type your note and click send
4. Notes are timestamped and attributed to the logged-in user
When a note is submitted for multiple metrics, it appears as a single grouped entry in the notes history with all associated metric chips displayed together. Notes are useful for tracking remediation progress, vendor ticket numbers, or explaining why a device is non-compliant.
## Data Flow
1. Weekly xlsx report is uploaded through the dashboard
2. Python parser extracts team metrics and non-compliant devices
3. Diff is computed against existing data (new/recurring/resolved)
4. On commit: new items are inserted, recurring items have their seen_count incremented, resolved items are marked with resolved_on date
5. Health cards and device lists update automatically

View File

@@ -0,0 +1,104 @@
# CVE Tracking & NVD Sync Spec
## Overview
The Home page (CVE Management) is where you track individual CVEs across vendors, store supporting documentation, and link Archer risk acceptance tickets. It serves as the reference library for all vulnerability research and evidence.
## Adding a CVE
1. Click "Add CVE" on the Home page
2. Enter the **CVE ID** (format: CVE-YYYY-NNNNN, e.g., CVE-2024-6387)
3. Click the NVD lookup button to auto-populate fields from the National Vulnerability Database:
- Description
- Severity (Critical, High, Medium, Low)
- Published date
4. Select or type the **Vendor/Platform** (e.g., Cisco, Juniper, ADTRAN)
5. Review and adjust any fields as needed
6. Click Save
### NVD Auto-Population
The NVD lookup queries the NIST NVD 2.0 API and extracts:
- English description
- CVSS severity using a cascade: v3.1 → v3.0 → v2.0
- Published date
If the NVD API is rate-limited (429 response), wait a few seconds and try again. Having an NVD API key configured in the backend `.env` file increases the rate limit.
## CVE Details
Each CVE entry tracks:
| Field | Description |
|-------|-------------|
| CVE ID | The CVE identifier (e.g., CVE-2024-6387) |
| Vendor | The affected vendor/platform |
| Severity | Critical, High, Medium, or Low |
| Description | Vulnerability description (from NVD or manual entry) |
| Published Date | When the CVE was published |
| Status | Open, In Progress, Addressed, or Resolved |
## Document Storage
Each CVE/vendor pair can have supporting documents attached. These serve as evidence for FP workflows, Archer tickets, and audit purposes.
### Uploading Documents
1. Open a CVE entry
2. Click "Upload Document"
3. Select the file (max 10 MB)
4. Documents are stored in `uploads/cves/{cveId}/{vendor}/` on the server
### Document Types
- **Advisory** — vendor security advisories
- **Email** — vendor communications or support ticket responses
- **Screenshot** — device screenshots showing version info
- **Patch** — patch notes or release documentation
- **Other** — any other supporting evidence
### Why Store Documents Here?
Documents uploaded to CVE entries can be reused across multiple FP workflows. When an FP expires and needs renewal, the evidence is already in the dashboard rather than having to track it down again.
## Archer Ticket Tracking
Archer risk acceptance tickets (EXC-XXXXX) are linked to CVE/vendor pairs.
### Adding an Archer Ticket
1. Open a CVE entry
2. Click "Add Archer Ticket"
3. Enter the EXC number (e.g., EXC-12345)
4. Optionally add the Archer URL and status
### EXC Badge Integration
Once an EXC number is entered:
- An EXC badge appears on the CVE card on the Home page
- Clicking the badge navigates to the Reporting page pre-filtered to findings with that EXC number in their notes
- The Action Coverage chart on the Reporting page classifies findings with EXC numbers as "Archer Exception"
## Vendor Tracking
CVEs can be tracked across multiple vendors. Each CVE/vendor combination is a separate entry, allowing you to:
- Track different remediation statuses per vendor
- Store vendor-specific documentation
- Link different Archer tickets per vendor
## Editing CVEs
1. Click the edit icon on a CVE card
2. Modify any fields
3. Use the NVD lookup button to refresh data from NVD if needed
4. Click Save
## Quick Check
The Quick Check feature on the Home page lets you look up a CVE ID without adding it to the database:
1. Type a CVE ID in the Quick Check field
2. Press Enter — the NVD data is fetched and displayed
3. If you want to track it, click "Add CVE" to create an entry
## Tips
- Always upload screenshots and vendor advisories to the CVE entry before submitting an FP workflow — reviewers may ask for this evidence
- Use the status field to track progress: Open → In Progress → Addressed → Resolved
- Link Archer EXC numbers as soon as the ticket is created — this updates the Action Coverage chart immediately
- The search bar on the Home page searches across CVE ID, vendor, and description
- Filter by vendor or severity using the dropdowns to focus on specific areas

View File

@@ -0,0 +1,110 @@
# FP Workflow Queue & Submission Editing Guide
## Overview
The STEAM Security Dashboard allows you to create, track, and edit False Positive (FP) workflow submissions directly from the Reporting Page. This guide covers the full workflow from adding findings to the queue through editing and resubmitting FP workflows.
## Adding Findings to the Queue
1. On the Reporting Page, select findings by clicking the checkboxes in the findings table
2. Use Shift+Click to select a range of findings
3. In the selection toolbar that appears, choose the workflow type (FP, Archer, or CARD)
4. Enter the vendor name (not required for CARD)
5. Click "Add to Queue"
The findings will appear in the Ivanti Queue panel (click the "Queue" button in the top-right).
## Creating an FP Workflow
1. Open the Queue panel
2. Select the pending FP items you want to submit using the checkboxes
3. Click "Create FP Workflow" at the bottom of the panel
4. Fill in the required fields:
- **Workflow Name**: Use the format `FP — CVE-XXXX-XXXX — Vendor` (e.g., `FP — CVE-2024-6387 — Cisco_STEAM`)
- **Reason / Justification**: Explain why these findings are false positives
- **Description** (optional): Additional context
- **Expiration Date**: Must be a future date
- **Scope Override**: Leave as "Authorized" for standard FP workflows
5. Attach supporting files (screenshots, evidence) — up to 10 files, 10 MB each
6. Click Submit
The workflow is created in the Ivanti platform and the queue items are marked as complete.
## Viewing Submissions
Your FP submissions appear in the "Submissions" section at the bottom of the Queue panel. Each submission shows:
- Workflow name
- Ivanti batch ID
- Lifecycle status badge (color-coded)
- Finding count
- Submission date
Click any submission to open the Edit Modal.
## Lifecycle Status
Submissions go through these states:
| Status | Color | Meaning |
|--------|-------|---------|
| Submitted | Sky Blue | Awaiting review |
| Rework | Amber | Reviewer sent it back — action needed |
| Rejected | Red | Reviewer denied the FP request |
| Resubmitted | Sky Blue | Edited and sent back for review |
| Approved | Green | FP accepted — no further action |
The status badge automatically syncs with the Ivanti platform state when findings data is refreshed.
## Editing an Existing Submission
Open a submission from the Queue panel to access the Edit Modal with four tabs:
### Details Tab
- Edit the workflow name, reason, description, expiration date, and scope override
- Click "Save Details" to push changes to the Ivanti platform
- If the submission was in Rework or Rejected status, saving automatically changes it to Resubmitted
### Findings Tab
- View the current list of finding IDs mapped to this workflow
- Add more findings from your pending FP queue items
- Select the items to add and click "Add Findings"
- Each finding is mapped individually to the Ivanti workflow
### Attachments Tab
- View files that were uploaded with the original submission
- **Note**: Adding attachments to an existing workflow is not supported via the Ivanti API. To add more files, upload them directly in the Ivanti platform.
### History Tab
- View a chronological log of all changes made to the submission
- Shows finding additions with the actual finding IDs
- Displays Ivanti reviewer notes (rework feedback, approval notes) pulled directly from the Ivanti platform
## Handling Rework Requests
When a submission comes back for rework:
1. Open the submission from the Queue panel — the status badge will show "Rework" (amber)
2. Go to the **History** tab to read the reviewer's notes explaining what needs to change
3. Common rework reasons:
- Need more screenshots showing remediation
- Need to verify specific software versions
- Missing evidence for some findings
4. Go to the **Findings** tab to add any additional findings if needed
5. Upload additional screenshots directly in the Ivanti platform (Attachments tab has a link)
6. Go to the **Details** tab to update the reason/description if needed
7. Click "Save Details" — the status automatically changes to Resubmitted
## Changing Status Manually
Use the status dropdown in the Edit Modal to manually change the lifecycle status. This is useful when:
- You receive notification outside the dashboard that a submission was rejected
- You want to mark a submission as approved after confirming in Ivanti
**Note**: Approved submissions are locked and cannot be edited.
## Tips
- Always include enough screenshots per audit guidance (e.g., 10 screenshots for 20-50 findings)
- Use the naming convention `FP — CVE-XXXX-XXXX — Vendor_Team` for easy identification
- Check the FP Workflow Status donut chart on the Reporting Page for an overview of all your FP ticket states
- The workflow column in the findings table shows the current Ivanti state for each finding

View File

@@ -0,0 +1,89 @@
# Ivanti Queue & Batch Operations Guide
## Overview
The Ivanti Queue is a personal staging area for batch-processing vulnerability findings. You select findings from the Reporting Page table, assign them a workflow type and vendor, and stage them in the queue. From there you can create FP workflows, track Archer exceptions, or manage CARD dispositions.
## Workflow Types
| Type | Color | Purpose | Vendor Required? |
|------|-------|---------|-----------------|
| FP | Amber | False Positive — finding is not actually a vulnerability | Yes |
| Archer | Blue | Risk Acceptance — vulnerability exists but can't be patched | Yes |
| CARD | Green | Asset disposition — device not owned by your BU | No |
## Adding Findings to the Queue
### Single Finding
1. In the findings table, click the checkbox area on a row (not the checkbox itself — click the cell)
2. A popover appears with:
- The finding ID
- Vendor/Platform input field (required for FP and Archer)
- Workflow type toggle (FP / Archer / CARD)
3. Enter the vendor name and select the workflow type
4. Click "Add to Queue"
### Batch Add (Multiple Findings)
1. Select multiple findings using checkboxes (Shift+Click for range selection)
2. The selection toolbar appears at the top of the table
3. Choose the workflow type (FP / Archer / CARD)
4. Enter the vendor name (not needed for CARD)
5. Click "Add to Queue" — all selected findings are added at once (up to 200 per batch)
## The Queue Panel
Click the **Queue** button (top right of the Reporting Page) to open the slide-out panel. The badge shows the count of pending items.
### Layout
- Items are grouped by vendor (alphabetically)
- CARD items appear in their own green section at the top
- Each item shows: finding ID, CVEs, hostname, IP address, and workflow type badge
### Item Actions
| Action | How |
|--------|-----|
| Mark complete | Click the green checkbox |
| Mark pending | Uncheck the green checkbox |
| Select for deletion | Click the red checkbox (left side) |
| Delete selected | Click "Delete (N)" button in footer |
| Clear all completed | Click "Clear Completed" button in footer |
| Redirect workflow | Click the redirect arrow (↗) on completed items |
### Redirect Feature
When a finding is completed under one workflow type but needs to be processed under another:
1. Complete the item first
2. Click the redirect arrow (↗) icon
3. Choose the new workflow type
4. A new pending item is created with the same finding data but the new workflow type
Example: You submitted an FP but it was rejected. You now need to open an Archer ticket instead. Complete the FP item, then redirect it to Archer.
## Creating FP Workflows from the Queue
1. Open the Queue panel
2. Select pending FP items using the checkboxes
3. Click "Create FP Workflow" in the footer (only enabled when FP items are selected)
4. Fill in the workflow details (name, reason, description, expiration date)
5. Attach supporting files (screenshots, evidence)
6. Submit — the workflow is created in Ivanti and queue items are marked complete
See the [FP Submission Editing Guide](kb-fp-submission-editing-guide.md) for details on editing submitted workflows.
## FP Submissions Section
Below the queue items, a "Submissions" section shows your previously submitted FP workflows with:
- Workflow name and Ivanti batch ID
- Lifecycle status badge (Submitted, Rework, Rejected, Resubmitted, Approved)
- Finding count and submission date
Click any submission to open the Edit Modal for viewing details, adding findings, or reading reviewer notes.
## Tips
- Group related findings by vendor before adding to the queue — this makes it easier to create batch FP workflows
- Use CARD for findings on devices that belong to another team — no vendor entry needed
- The queue is per-user — other team members can't see or modify your queue items
- Completed items stay in the queue until you clear them, so you have a record of what was processed
- Use the redirect feature when a workflow type needs to change after initial processing

View File

@@ -0,0 +1,92 @@
# Reporting Page Guide
## Overview
The Reporting Page is the primary operational page in the STEAM Security Dashboard. It provides a live view of all open Ivanti host findings with filtering, sorting, inline editing, metric charts, and export capabilities.
## Getting Started
1. Navigate to the Reporting page from the sidebar
2. Click **Sync** (top right) to pull the latest findings from Ivanti
3. The sync timestamp updates when complete — findings, charts, and counts all refresh together
## Metric Charts
Four donut charts appear at the top of the page:
### Open vs Closed
Shows the total count of open and closed findings across all synced data.
### Action Coverage
Breaks down open findings into three categories:
- **FP Request** (blue) — findings with an FP workflow ticket in Ivanti
- **Archer Exception** (amber) — findings with an EXC-XXXXX number in their notes
- **Pending** (red) — findings with no action taken yet
Click a chart segment to filter the table to that category. Click again or use "clear filter" to remove.
### FP Finding Status
Shows the distribution of findings across FP workflow states (Requested, Reworked, Actionable, Approved, Rejected, Expired).
### FP Workflow Status
Shows the count of unique FP ticket IDs per state — one FP ticket can cover many findings.
## Findings Table
### Columns
The table has 13 columns. All are visible by default:
| Column | Description |
|--------|-------------|
| Finding ID | Ivanti host finding identifier |
| Severity | VRR score with severity group (Critical, High, Medium) |
| Title | Vulnerability title |
| CVEs | Associated CVE identifiers (hover for tooltip details) |
| Host | Hostname (inline editable) |
| IP Address | Device IP |
| DNS | DNS name (inline editable) |
| Due Date | SLA deadline — red if overdue, amber if within 30 days |
| SLA | SLA status (Overdue, At Risk, Within SLA) |
| BU | Business unit ownership (STEAM or ACCESS-ENG) |
| Workflow | FP workflow badge showing ticket ID and state |
| Last Found | Date the finding was last detected by scanner |
| Notes | Free-text notes field (inline editable) |
### Column Management
Click the **Columns** button (gear icon) to:
- Show/hide columns by clicking the eye icon
- Drag columns to reorder them
- Your column configuration is saved in your browser
### Sorting
Click any sortable column header to sort. Click again to reverse direction. The active sort column is highlighted in blue.
### Filtering
Click the filter icon on any filterable column header to open a dropdown with all unique values. Check/uncheck values to filter. Use "Select All" or "Clear" for bulk operations. A search box lets you find specific values quickly.
Active filters show as amber badges above the table. Click "Clear Filters" to remove all column filters at once.
### Inline Editing
Three columns support inline editing:
- **Host**: Click the hostname to edit. An amber dot appears when an override is active. Click the revert button (↻) to restore the original Ivanti value. Overrides survive re-syncs.
- **DNS**: Same behavior as Host.
- **Notes**: Click to type. Saves automatically on blur. Use notes to record EXC numbers (e.g., `EXC-12345`) — the Action Coverage chart will classify these as "Archer Exception".
## Selecting Findings
Check the checkbox on any row to select it. Use Shift+Click for range selection. The "select all" checkbox in the header selects all visible (non-queued) findings.
When findings are selected, a toolbar appears with:
- Workflow type toggle (FP / Archer / CARD)
- Vendor input field (not needed for CARD)
- "Add to Queue" button to stage findings for batch processing
## Export
Click the **Export** dropdown to download the current filtered/sorted view as:
- **CSV** — comma-separated values with UTF-8 BOM
- **Excel (.xlsx)** — formatted spreadsheet with auto-fit column widths
Only visible columns are included in the export.

View File

@@ -0,0 +1,106 @@
# User Management & Roles Guide
## Overview
The STEAM Security Dashboard uses role-based access control with four user groups. Only administrators can manage users. All user operations are logged in the audit trail.
## User Groups
| Group | Access Level | Description |
|-------|-------------|-------------|
| Admin | Full access | All operations including user management, delete, audit log |
| Standard_User | Operational access | Create, edit, limited delete (own resources only), exports |
| Leadership | Read-only + exports | View all data, download CSV/XLSX exports |
| Read_Only | View only | Read-only access to all pages, no modifications |
## Permission Matrix
| Action | Admin | Standard_User | Leadership | Read_Only |
|--------|-------|---------------|------------|-----------|
| View findings/CVEs | Yes | Yes | Yes | Yes |
| Sync Ivanti data | Yes | Yes | No | No |
| Edit hostname/DNS overrides | Yes | Yes | No | No |
| Edit notes | Yes | Yes | No | No |
| Add to queue | Yes | Yes | No | No |
| Create FP workflows | Yes | Yes | No | No |
| Edit FP submissions | Yes | Yes | No | No |
| Upload compliance reports | Yes | Yes | No | No |
| Add CVEs | Yes | Yes | No | No |
| Upload documents | Yes | Yes | No | No |
| Export CSV/XLSX | Yes | Yes | Yes | No |
| Delete CVEs/documents | Yes | Own only | No | No |
| Manage users | Yes | No | No | No |
| View audit log | Yes | No | No | No |
## Managing Users (Admin Only)
### Accessing User Management
1. Click the user icon in the top navigation bar
2. Select "User Management" from the menu
3. The user list shows all accounts with their group, status, and last login
### Creating a New User
1. Click "Add User"
2. Fill in the required fields:
- **Username** — must be unique
- **Email** — user's email address
- **Password** — initial password (user should change on first login)
- **Group** — select from Admin, Standard_User, Leadership, or Read_Only
3. Click Save
New users default to Read_Only if no group is specified.
### Editing a User
1. Click the edit icon on the user row
2. Modify username, email, or group
3. Optionally set a new password (leave blank to keep current)
4. Click Save
### Changing User Groups
When changing a user's group, a confirmation dialog appears. Extra warnings are shown when:
- Removing Admin privileges from a user
- Upgrading a user to Admin
Group changes are logged separately in the audit trail with the previous and new group recorded.
### Deactivating Users
Users can be deactivated rather than deleted. Deactivated users cannot log in but their data and audit history are preserved.
## Authentication
- Sessions use httpOnly cookies with 24-hour expiry
- Passwords are hashed with bcryptjs
- All API endpoints (except login) require a valid session
- Failed login attempts are not rate-limited at the application level
## Audit Log
The audit log records all significant actions in the dashboard. Only admins can view it.
### What's Logged
- User creation, updates, group changes, deletion
- CVE creation, updates, deletion
- Document uploads and deletions
- Ivanti sync operations
- FP workflow submissions and edits
- Queue operations
- Compliance uploads
- Login/logout events
### Audit Entry Fields
Each entry includes:
- Timestamp
- User who performed the action
- Action type (e.g., user_create, ivanti_fp_workflow_created)
- Entity type and ID
- Details (JSON with specifics of what changed)
- IP address
## Default Admin Account
On first setup (`node setup.js`), a default admin account is created:
- Username: `admin`
- Password: set during setup
- Group: `Admin`
Change the default password immediately after first login.

View File

@@ -0,0 +1,154 @@
# Security Remediation Plan
Based on the External Data Handling security audit (April 2026). 17 findings total — 0 Critical, 2 High, 6 Medium, 6 Low, 3 Informational. Ordered by priority based on real-world exploitability and effort.
---
## Phase 1 — Data Exposure & XSS (High Priority)
### 1. L-4: Authenticate /uploads static file access
**Location:** `server.js:127`
**Risk:** Uploaded documents (vulnerability data, compliance files) served without authentication. Anyone with the URL can access them.
**Fix:** Replace `express.static('/uploads')` with a route handler that runs `requireAuth(db)` before streaming the file. Use `res.sendFile()` with the validated path.
**Effort:** Small — single route change.
### 2. M-6: Sanitize Mermaid SVG output with DOMPurify
**Location:** `frontend/src/components/KnowledgeBaseViewer.js:38`
**Risk:** Mermaid renders SVG which is injected via `innerHTML`. If KB content contains malicious markup, this is a stored XSS vector.
**Fix:** Install `dompurify`, sanitize the SVG string before assigning to `innerHTML`. Use `DOMPurify.sanitize(svgString, { USE_PROFILES: { svg: true } })`.
**Effort:** Small — add dependency, wrap one line.
### 3. M-4: Strip server file paths from compliance preview response
**Location:** `backend/routes/compliance.js:278`
**Risk:** Full server-side file path returned to client. Helps attackers map the filesystem.
**Fix:** Return only the filename (use `path.basename()`) instead of the full path. Or return a reference ID that maps to the file server-side.
**Effort:** Small — one-line change.
---
## Phase 2 — Deployment & Setup Hygiene
### 4. H-2: Add SESSION_SECRET to .env.example and setup-env.sh
**Location:** `backend/.env.example`, `backend/setup-env.sh`
**Risk:** Fresh deployments fail with no guidance on required env vars.
**Fix:** Add `SESSION_SECRET=` to `.env.example` with a comment explaining it should be a random 64+ character string. Add generation logic to `setup-env.sh` (e.g., `openssl rand -hex 32`).
**Effort:** Small.
### 5. I-3: Set user_group on default admin in setup.js
**Location:** `backend/setup.js:180`
**Risk:** Default admin created without `user_group`, potentially locked out of `requireGroup`-protected routes on fresh install.
**Fix:** Set `user_group = 'Admin'` in the INSERT statement for the default admin user.
**Effort:** Trivial — one column added to the INSERT.
---
## Phase 3 — Error Message Sanitization (Batch)
### 6. L-2: Sanitize Python parser error messages
**Location:** `backend/routes/compliance.js:284`
**Risk:** Stack traces and server paths leaked to client when Python parser fails.
**Fix:** Catch the error, log the full details server-side, return a generic "Compliance file parsing failed" message to the client.
**Effort:** Small.
### 7. L-3: Sanitize Ivanti API error responses
**Location:** `backend/routes/ivantiFpWorkflow.js:393`
**Risk:** Raw Ivanti API error body forwarded to client, potentially exposing internal API details.
**Fix:** Log the raw error server-side, return a generic "Ivanti API request failed" message to the client.
**Effort:** Small.
### 8. L-6: Remove group name from requireGroup error response
**Location:** `backend/middleware/auth.js:60`
**Risk:** Error response leaks the user's current group name, which is minor info disclosure.
**Fix:** Change the error message from something like "User group 'Viewer' not authorized" to "Insufficient permissions."
**Effort:** Trivial.
---
## Phase 4 — Security Headers
### 9. M-1: Add Content-Security-Policy header
**Location:** `server.js:107-113`
**Risk:** No CSP means no browser-side XSS mitigation layer.
**Fix:** Add a CSP header via middleware. Start with a report-only policy to avoid breaking things, then tighten. Suggested baseline:
```
default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'
```
Note: `'unsafe-inline'` for styles is needed because the app uses inline style objects extensively. Evaluate whether `script-src 'self'` breaks anything (it shouldn't with CRA).
**Effort:** Medium — needs testing to ensure nothing breaks.
### 10. M-2: Add Strict-Transport-Security (HSTS) header
**Location:** `server.js:107-113`
**Risk:** No HSTS means browsers don't enforce HTTPS on subsequent visits.
**Fix:** Add `Strict-Transport-Security: max-age=31536000; includeSubDomains` header. Only apply when running behind HTTPS (check `req.secure` or a trusted proxy header). Do NOT enable if the app is accessed over plain HTTP.
**Effort:** Small, but verify deployment is HTTPS-only first.
---
## Phase 5 — Operational Maintenance
### 11. L-5: Add expired session cleanup
**Location:** `backend/middleware/auth.js:271`
**Risk:** Sessions table grows indefinitely. Not a security exploit, but degrades performance over time.
**Fix:** Add a cleanup function that runs on server startup (and optionally on a setInterval) to DELETE sessions where `expires_at < CURRENT_TIMESTAMP`. Run once at boot, then every 6 hours.
**Effort:** Small.
---
## Phase 6 — Session Signing (Larger Effort)
### 12. H-1: Use SESSION_SECRET for HMAC-signed session tokens
**Location:** `server.js:33`
**Risk:** Session tokens are random bytes stored in DB with no signing. An attacker with DB read access can replay any session. For self-hosted SQLite, DB access already implies full compromise, so this is a defense-in-depth measure.
**Fix:** When creating a session, generate a random token and store its HMAC (using SESSION_SECRET) in the DB. On validation, recompute the HMAC and compare. This means a DB dump alone isn't enough to forge sessions — the attacker also needs the secret.
**Effort:** Medium — touches session creation, validation, and requires SESSION_SECRET to actually be wired in.
---
## Phase 7 — Investigate Before Changing
### 13. M-3: Review application/octet-stream in MIME allowlist
**Location:** `server.js:62`
**Risk:** Allows uploads that bypass MIME type checking. May be intentional for specific file types.
**Action:** Check what file types are uploaded that resolve to `application/octet-stream`. If none are legitimate, remove it from the allowlist. If some are (e.g., `.db` files, binary exports), consider adding those specific MIME types instead.
**Effort:** Investigation first, then trivial change.
### 14. M-5: Evaluate CORS HTTP origin policy
**Location:** `server.js:38-40`
**Risk:** CORS allows HTTP origins, no HTTPS enforcement.
**Action:** Check if production runs behind a reverse proxy with HTTPS termination. If yes, the backend legitimately sees HTTP origins from the proxy. If production traffic is ever plain HTTP end-to-end, restrict CORS to HTTPS origins only.
**Effort:** Investigation first, then small config change.
---
## Phase 8 — Low Priority / Monitor
### 15. L-1: Add startup warning for IVANTI_SKIP_TLS=true
**Location:** `backend/helpers/ivantiApi.js:28`
**Risk:** TLS validation disabled silently. Acceptable in dev, risky if accidentally left on in production.
**Fix:** Add a `console.warn('⚠ IVANTI_SKIP_TLS is enabled — TLS certificate validation is disabled')` at startup when the flag is set.
**Effort:** Trivial.
### 16. I-1: Monitor react-scripts version
**Location:** `frontend/package.json`
**Risk:** Build-time only, not runtime. No immediate action needed.
**Action:** Upgrade to latest react-scripts when convenient. Consider migrating to Vite if a major frontend overhaul is planned.
### 17. I-2: Monitor xlsx dependency
**Location:** `frontend/package.json`
**Risk:** Community fork, unmaintained since 2022. Used for spreadsheet parsing.
**Action:** Monitor for security advisories. If a vulnerability is found, evaluate alternatives (e.g., `exceljs`, `sheetjs` pro). No immediate action needed unless a CVE is published against it.
---
## Summary
| Phase | Items | Effort | Impact |
|-------|-------|--------|--------|
| 1 — Data Exposure & XSS | L-4, M-6, M-4 | Small | High |
| 2 — Deployment Hygiene | H-2, I-3 | Small | Medium |
| 3 — Error Sanitization | L-2, L-3, L-6 | Small | Low-Medium |
| 4 — Security Headers | M-1, M-2 | Medium | Medium |
| 5 — Session Cleanup | L-5 | Small | Low |
| 6 — Session Signing | H-1 | Medium | Medium |
| 7 — Investigate | M-3, M-5 | Investigation | TBD |
| 8 — Monitor | L-1, I-1, I-2 | Trivial | Low |

View File

@@ -41,5 +41,16 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
},
"jest": {
"transformIgnorePatterns": [
"node_modules/(?!(fast-check)/)"
],
"moduleNameMapper": {
"^pure-rand/(.*)$": "<rootDir>/node_modules/pure-rand/lib/$1.js"
}
},
"devDependencies": {
"fast-check": "^4.7.0"
} }
} }

View File

@@ -544,6 +544,16 @@ body {
to { transform: rotate(360deg); } to { transform: rotate(360deg); }
} }
@keyframes confirmFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes confirmSlideUp {
from { opacity: 0; transform: translateY(12px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Tooltip with enhanced styling */ /* Tooltip with enhanced styling */
.tooltip { .tooltip {
position: relative; position: relative;

View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Search, FileText, AlertCircle, Download, Upload, Eye, Filter, CheckCircle, XCircle, Loader, Trash2, Plus, RefreshCw, Edit2, ChevronDown, Shield, Activity, Menu } from 'lucide-react'; import { Search, FileText, AlertCircle, AlertTriangle, Download, Upload, Eye, Filter, CheckCircle, XCircle, Loader, Trash2, Plus, RefreshCw, Edit2, ChevronDown, Shield, Activity, Menu } from 'lucide-react';
import { useAuth } from './contexts/AuthContext'; import { useAuth } from './contexts/AuthContext';
import LoginForm from './components/LoginForm'; import LoginForm from './components/LoginForm';
import UserMenu from './components/UserMenu'; import UserMenu from './components/UserMenu';
@@ -8,10 +8,12 @@ import AuditLog from './components/AuditLog';
import NvdSyncModal from './components/NvdSyncModal'; import NvdSyncModal from './components/NvdSyncModal';
import NavDrawer from './components/NavDrawer'; import NavDrawer from './components/NavDrawer';
import CalendarWidget from './components/CalendarWidget'; import CalendarWidget from './components/CalendarWidget';
import ConfirmModal from './components/ConfirmModal';
import VulnerabilityTriagePage from './components/pages/ReportingPage'; import VulnerabilityTriagePage from './components/pages/ReportingPage';
import KnowledgeBasePage from './components/pages/KnowledgeBasePage'; import KnowledgeBasePage from './components/pages/KnowledgeBasePage';
import ExportsPage from './components/pages/ExportsPage'; import ExportsPage from './components/pages/ExportsPage';
import CompliancePage from './components/pages/CompliancePage'; import CompliancePage from './components/pages/CompliancePage';
import AdminPage from './components/pages/AdminPage';
import ArchiveSummaryBar from './components/pages/ArchiveSummaryBar'; import ArchiveSummaryBar from './components/pages/ArchiveSummaryBar';
import './App.css'; import './App.css';
@@ -240,6 +242,9 @@ export default function App() {
const [archiveList, setArchiveList] = useState([]); const [archiveList, setArchiveList] = useState([]);
const [archiveListLoading, setArchiveListLoading] = useState(false); const [archiveListLoading, setArchiveListLoading] = useState(false);
// Confirmation modal state — replaces window.confirm()
const [pendingConfirm, setPendingConfirm] = useState(null);
const toggleCVEExpand = (cveId) => { const toggleCVEExpand = (cveId) => {
setExpandedCVEs(prev => ({ ...prev, [cveId]: !prev[cveId] })); setExpandedCVEs(prev => ({ ...prev, [cveId]: !prev[cveId] }));
}; };
@@ -531,26 +536,30 @@ export default function App() {
}; };
const handleDeleteDocument = async (docId, cveId, vendor) => { const handleDeleteDocument = async (docId, cveId, vendor) => {
if (!window.confirm('Are you sure you want to delete this document?')) { setPendingConfirm({
return; title: 'Delete Document',
} message: 'Are you sure you want to delete this document?',
confirmText: 'Delete',
onConfirm: async () => {
setPendingConfirm(null);
try {
const response = await fetch(`${API_BASE}/documents/${docId}`, {
method: 'DELETE',
credentials: 'include'
});
try { if (!response.ok) throw new Error('Failed to delete document');
const response = await fetch(`${API_BASE}/documents/${docId}`, {
method: 'DELETE',
credentials: 'include'
});
if (!response.ok) throw new Error('Failed to delete document'); alert('Document deleted successfully!');
const key = `${cveId}-${vendor}`;
alert('Document deleted successfully!'); delete cveDocuments[key];
const key = `${cveId}-${vendor}`; await fetchDocuments(cveId, vendor);
delete cveDocuments[key]; fetchCVEs();
await fetchDocuments(cveId, vendor); } catch (err) {
fetchCVEs(); alert(`Error: ${err.message}`);
} catch (err) { }
alert(`Error: ${err.message}`); },
} });
}; };
const handleEditCVE = (cve) => { const handleEditCVE = (cve) => {
@@ -643,65 +652,73 @@ export default function App() {
}; };
const handleDeleteCVEEntry = async (cve) => { const handleDeleteCVEEntry = async (cve) => {
if (!window.confirm(`Are you sure you want to delete the "${cve.vendor}" entry for ${cve.cve_id}? This will also delete all associated documents.`)) { setPendingConfirm({
return; title: 'Delete Vendor Entry',
} message: `Are you sure you want to delete the "${cve.vendor}" entry for ${cve.cve_id}? This will also delete all associated documents.`,
confirmText: 'Delete',
onConfirm: async () => {
setPendingConfirm(null);
try {
const url = `${API_BASE}/cves/${cve.id}`;
console.log('DELETE request to:', url);
const response = await fetch(url, {
method: 'DELETE',
credentials: 'include'
});
try { if (!response.ok) {
const url = `${API_BASE}/cves/${cve.id}`; const contentType = response.headers.get('content-type');
console.log('DELETE request to:', url); if (contentType && contentType.includes('application/json')) {
const response = await fetch(url, { const data = await response.json();
method: 'DELETE', throw new Error(data.error || 'Failed to delete CVE entry');
credentials: 'include' } else {
}); throw new Error(`Server returned ${response.status} ${response.statusText}. Check API_BASE configuration.`);
}
}
if (!response.ok) { alert(`Deleted ${cve.vendor} entry for ${cve.cve_id}`);
const contentType = response.headers.get('content-type'); fetchCVEs();
if (contentType && contentType.includes('application/json')) { fetchVendors();
const data = await response.json(); } catch (err) {
throw new Error(data.error || 'Failed to delete CVE entry'); alert(`Error: ${err.message}`);
} else {
throw new Error(`Server returned ${response.status} ${response.statusText}. Check API_BASE configuration.`);
} }
} },
});
alert(`Deleted ${cve.vendor} entry for ${cve.cve_id}`);
fetchCVEs();
fetchVendors();
} catch (err) {
alert(`Error: ${err.message}`);
}
}; };
const handleDeleteEntireCVE = async (cveId, vendorCount) => { const handleDeleteEntireCVE = async (cveId, vendorCount) => {
if (!window.confirm(`Are you sure you want to delete ALL ${vendorCount} vendor entries for ${cveId}? This will permanently remove all associated documents and files.`)) { setPendingConfirm({
return; title: 'Delete Entire CVE',
} message: `Are you sure you want to delete ALL ${vendorCount} vendor entries for ${cveId}? This will permanently remove all associated documents and files.`,
confirmText: 'Delete All',
onConfirm: async () => {
setPendingConfirm(null);
try {
const url = `${API_BASE}/cves/by-cve-id/${encodeURIComponent(cveId)}`;
console.log('DELETE request to:', url);
const response = await fetch(url, {
method: 'DELETE',
credentials: 'include'
});
try { if (!response.ok) {
const url = `${API_BASE}/cves/by-cve-id/${encodeURIComponent(cveId)}`; const contentType = response.headers.get('content-type');
console.log('DELETE request to:', url); if (contentType && contentType.includes('application/json')) {
const response = await fetch(url, { const data = await response.json();
method: 'DELETE', throw new Error(data.error || 'Failed to delete CVE');
credentials: 'include' } else {
}); throw new Error(`Server returned ${response.status} ${response.statusText}. Check API_BASE configuration.`);
}
}
if (!response.ok) { alert(`Deleted all entries for ${cveId}`);
const contentType = response.headers.get('content-type'); fetchCVEs();
if (contentType && contentType.includes('application/json')) { fetchVendors();
const data = await response.json(); } catch (err) {
throw new Error(data.error || 'Failed to delete CVE'); alert(`Error: ${err.message}`);
} else {
throw new Error(`Server returned ${response.status} ${response.statusText}. Check API_BASE configuration.`);
} }
} },
});
alert(`Deleted all entries for ${cveId}`);
fetchCVEs();
fetchVendors();
} catch (err) {
alert(`Error: ${err.message}`);
}
}; };
const handleAddTicket = async (e) => { const handleAddTicket = async (e) => {
@@ -769,18 +786,25 @@ export default function App() {
}; };
const handleDeleteTicket = async (ticket) => { const handleDeleteTicket = async (ticket) => {
if (!window.confirm(`Delete ticket ${ticket.ticket_key}?`)) return; setPendingConfirm({
try { title: 'Delete Ticket',
const response = await fetch(`${API_BASE}/jira-tickets/${ticket.id}`, { message: `Delete ticket ${ticket.ticket_key}?`,
method: 'DELETE', confirmText: 'Delete',
credentials: 'include' onConfirm: async () => {
}); setPendingConfirm(null);
if (!response.ok) throw new Error('Failed to delete ticket'); try {
alert('Ticket deleted'); const response = await fetch(`${API_BASE}/jira-tickets/${ticket.id}`, {
fetchJiraTickets(); method: 'DELETE',
} catch (err) { credentials: 'include'
alert(`Error: ${err.message}`); });
} if (!response.ok) throw new Error('Failed to delete ticket');
alert('Ticket deleted');
fetchJiraTickets();
} catch (err) {
alert(`Error: ${err.message}`);
}
},
});
}; };
const openAddTicketForCVE = (cve_id, vendor) => { const openAddTicketForCVE = (cve_id, vendor) => {
@@ -854,18 +878,25 @@ export default function App() {
}; };
const handleDeleteArcherTicket = async (ticket) => { const handleDeleteArcherTicket = async (ticket) => {
if (!window.confirm(`Delete Archer ticket ${ticket.exc_number}?`)) return; setPendingConfirm({
try { title: 'Delete Archer Ticket',
const response = await fetch(`${API_BASE}/archer-tickets/${ticket.id}`, { message: `Delete Archer ticket ${ticket.exc_number}?`,
method: 'DELETE', confirmText: 'Delete',
credentials: 'include' onConfirm: async () => {
}); setPendingConfirm(null);
if (!response.ok) throw new Error('Failed to delete Archer ticket'); try {
alert('Archer ticket deleted'); const response = await fetch(`${API_BASE}/archer-tickets/${ticket.id}`, {
fetchArcherTickets(); method: 'DELETE',
} catch (err) { credentials: 'include'
alert(`Error: ${err.message}`); });
} if (!response.ok) throw new Error('Failed to delete Archer ticket');
alert('Archer ticket deleted');
fetchArcherTickets();
} catch (err) {
alert(`Error: ${err.message}`);
}
},
});
}; };
const openAddArcherTicketForCVE = (cve_id, vendor) => { const openAddArcherTicketForCVE = (cve_id, vendor) => {
@@ -1012,11 +1043,8 @@ export default function App() {
{currentPage === 'compliance' && <CompliancePage onNavigate={setCurrentPage} />} {currentPage === 'compliance' && <CompliancePage onNavigate={setCurrentPage} />}
{currentPage === 'knowledge-base' && <KnowledgeBasePage />} {currentPage === 'knowledge-base' && <KnowledgeBasePage />}
{currentPage === 'exports' && <ExportsPage />} {currentPage === 'exports' && <ExportsPage />}
{currentPage === 'admin' && isAdmin() && ( {currentPage === 'admin' && isAdmin() && <AdminPage />}
<div className="space-y-6"> {currentPage === 'admin' && !isAdmin() && (() => { setCurrentPage('home'); return null; })()}
<UserManagement onClose={() => setCurrentPage('home')} />
</div>
)}
{/* User Management Modal */} {/* User Management Modal */}
{showUserManagement && ( {showUserManagement && (
@@ -2313,16 +2341,38 @@ export default function App() {
) : ( ) : (
<div style={{ maxHeight: '240px', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '0.375rem' }}> <div style={{ maxHeight: '240px', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '0.375rem' }}>
{archiveList.map((a) => ( {archiveList.map((a) => (
<div key={a.id} style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.75))', border: '1px solid rgba(100, 116, 139, 0.25)', borderRadius: '0.375rem', padding: '0.5rem' }}> <div key={a.id} style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.75))', border: '1px solid rgba(100, 116, 139, 0.25)', borderLeft: a.related_active ? '3px solid #F59E0B' : '3px solid #10B981', borderRadius: '0.375rem', padding: '0.5rem' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', gap: '0.5rem', marginBottom: '0.25rem' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', gap: '0.5rem', marginBottom: '0.25rem' }}>
<span style={{ fontFamily: 'monospace', fontSize: '0.7rem', fontWeight: '600', color: '#E2E8F0' }}>{a.finding_title || a.finding_id}</span> <div style={{ display: 'flex', alignItems: 'start', gap: '0.375rem', flex: 1, minWidth: 0 }}>
<span style={{ fontFamily: 'monospace', fontSize: '0.6rem', padding: '0.15rem 0.35rem', borderRadius: '0.25rem', background: 'rgba(100, 116, 139, 0.2)', border: '1px solid rgba(100, 116, 139, 0.4)', color: '#94A3B8', whiteSpace: 'nowrap' }}> {a.related_active ? (
{a.last_severity?.toFixed(1) ?? ''} <AlertTriangle style={{ width: '13px', height: '13px', color: '#F59E0B', flexShrink: 0, marginTop: '1px' }} />
) : (
<CheckCircle style={{ width: '13px', height: '13px', color: '#10B981', flexShrink: 0, marginTop: '1px' }} />
)}
<div style={{ minWidth: 0 }}>
<span style={{ fontFamily: 'monospace', fontSize: '0.7rem', fontWeight: '600', color: '#E2E8F0', display: 'block' }}>{a.finding_title || a.finding_id}</span>
{a.finding_id && (
<span
title={a.finding_id}
style={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#64748B', display: 'block', marginTop: '0.1rem' }}
>
{a.finding_id.length > 20 ? a.finding_id.slice(0, 20) + '…' : a.finding_id}
</span>
)}
</div>
</div>
<span style={{ fontFamily: 'monospace', fontSize: '0.55rem', padding: '0.15rem 0.35rem', borderRadius: '0.25rem', background: 'rgba(100, 116, 139, 0.2)', border: '1px solid rgba(100, 116, 139, 0.4)', color: '#94A3B8', whiteSpace: 'nowrap' }}>
Last seen: {(a.last_severity && a.last_severity !== 0) ? a.last_severity.toFixed(1) : '—'}
</span> </span>
</div> </div>
<div style={{ fontFamily: 'monospace', fontSize: '0.65rem', color: '#64748B' }}> <div style={{ fontFamily: 'monospace', fontSize: '0.65rem', color: '#64748B', marginLeft: '1.375rem' }}>
{a.host_name}{a.ip_address ? ` (${a.ip_address})` : ''} {a.host_name}{a.ip_address ? ` (${a.ip_address})` : ''}
</div> </div>
{a.related_active && (
<div style={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#0EA5E9', marginTop: '0.35rem', marginLeft: '1.375rem', padding: '0.2rem 0.4rem', background: 'rgba(14, 165, 233, 0.1)', border: '1px solid rgba(14, 165, 233, 0.25)', borderRadius: '0.25rem', display: 'inline-block' }}>
Similar finding active ID: {a.related_active.id} ({a.related_active.severity?.toFixed(1) ?? '—'})
</div>
)}
</div> </div>
))} ))}
</div> </div>
@@ -2400,6 +2450,17 @@ export default function App() {
</div>} </div>}
{/* End Three Column Layout */} {/* End Three Column Layout */}
{/* Confirmation Modal */}
<ConfirmModal
open={!!pendingConfirm}
title={pendingConfirm?.title}
message={pendingConfirm?.message}
confirmText={pendingConfirm?.confirmText}
variant={pendingConfirm?.variant || 'danger'}
onConfirm={pendingConfirm?.onConfirm}
onCancel={() => setPendingConfirm(null)}
/>
</div> </div>
</div> </div>
); );

View File

@@ -0,0 +1,74 @@
import React from 'react';
import { Shield } from 'lucide-react';
// ---------------------------------------------------------------------------
// AtlasBadge — small inline pill badge for the Host column on ReportingPage.
// Shows Atlas action plan coverage status for a given host.
//
// Props:
// hostId — numeric host identifier
// atlasStatus — { host_id, has_action_plan, plan_count, synced_at } or undefined
// onClick — callback when badge is clicked (opens slide-out panel)
// ---------------------------------------------------------------------------
const warningStyle = {
display: 'inline-flex',
alignItems: 'center',
gap: '3px',
borderRadius: '9999px',
padding: '1px 6px',
fontFamily: "'JetBrains Mono', monospace",
fontSize: '0.58rem',
fontWeight: 700,
lineHeight: 1,
cursor: 'pointer',
marginLeft: '6px',
background: 'rgba(245,158,11,0.12)',
border: '1px solid rgba(245,158,11,0.4)',
color: '#F59E0B',
};
const successStyle = {
display: 'inline-flex',
alignItems: 'center',
gap: '3px',
borderRadius: '9999px',
padding: '1px 6px',
fontFamily: "'JetBrains Mono', monospace",
fontSize: '0.58rem',
fontWeight: 700,
lineHeight: 1,
cursor: 'pointer',
marginLeft: '6px',
background: 'rgba(16,185,129,0.12)',
border: '1px solid rgba(16,185,129,0.4)',
color: '#10B981',
};
export default function AtlasBadge({ hostId, atlasStatus, onClick }) {
// No status data — render nothing
if (!atlasStatus) return null;
const hasPlan = atlasStatus.plan_count > 0;
const style = hasPlan ? successStyle : warningStyle;
const label = hasPlan ? String(atlasStatus.plan_count) : '0';
return (
<span
style={style}
title={
hasPlan
? `${atlasStatus.plan_count} Atlas action plan${atlasStatus.plan_count !== 1 ? 's' : ''}`
: 'No Atlas action plans — needs attention'
}
onClick={(e) => {
e.stopPropagation();
if (onClick) onClick(hostId);
}}
data-testid="atlas-badge"
>
<Shield style={{ width: 12, height: 12, flexShrink: 0 }} />
{label}
</span>
);
}

View File

@@ -0,0 +1,870 @@
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { X, Loader, Shield, Plus, Edit3, Check, AlertCircle, ChevronDown } from 'lucide-react';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
// ---------------------------------------------------------------------------
// Plan type badge colors
// ---------------------------------------------------------------------------
const PLAN_TYPE_COLORS = {
remediation: '#0EA5E9',
decommission: '#EF4444',
false_positive: '#F59E0B',
risk_acceptance: '#A855F7',
scan_exclusion: '#64748B',
};
const VALID_PLAN_TYPES = Object.keys(PLAN_TYPE_COLORS);
// ---------------------------------------------------------------------------
// Shared inline style constants
// ---------------------------------------------------------------------------
const ACCENT = '#0EA5E9';
const panelStyle = {
position: 'fixed', top: 0, right: 0, bottom: 0, width: '420px',
background: '#0A1220',
borderLeft: '1px solid rgba(14,165,233,0.15)',
boxShadow: '-8px 0 32px rgba(0,0,0,0.6)',
zIndex: 41,
display: 'flex', flexDirection: 'column',
overflowY: 'auto',
fontFamily: "'JetBrains Mono', monospace",
};
const backdropStyle = {
position: 'fixed', inset: 0,
background: 'rgba(0,0,0,0.4)',
zIndex: 40,
};
const headerStyle = {
padding: '1.25rem 1.25rem 1rem',
borderBottom: '1px solid rgba(255,255,255,0.06)',
flexShrink: 0,
};
const sectionTitleStyle = {
display: 'flex', alignItems: 'center', gap: '0.4rem',
fontSize: '0.68rem', fontFamily: "'JetBrains Mono', monospace",
textTransform: 'uppercase', letterSpacing: '0.1em',
color: '#475569', marginBottom: '0.75rem',
};
const inputStyle = {
width: '100%', boxSizing: 'border-box',
background: 'rgba(14,165,233,0.06)',
border: '1px solid rgba(14,165,233,0.2)',
borderRadius: '0.375rem',
color: '#E2E8F0',
padding: '0.5rem 0.625rem',
fontSize: '0.78rem',
fontFamily: "'JetBrains Mono', monospace",
outline: 'none',
transition: 'border-color 0.15s',
};
const labelStyle = {
display: 'block',
fontSize: '0.68rem',
fontFamily: "'JetBrains Mono', monospace",
color: '#94A3B8',
marginBottom: '0.3rem',
textTransform: 'uppercase',
letterSpacing: '0.05em',
};
const primaryBtnStyle = {
display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '0.4rem',
padding: '0.5rem 1rem',
background: 'rgba(14,165,233,0.15)',
border: '1px solid #0EA5E9',
borderRadius: '0.375rem',
color: '#38BDF8',
fontSize: '0.75rem',
fontFamily: "'JetBrains Mono', monospace",
fontWeight: 600,
cursor: 'pointer',
transition: 'all 0.15s',
textTransform: 'uppercase',
letterSpacing: '0.05em',
};
// ---------------------------------------------------------------------------
// Custom dropdown — dark-themed replacement for native <select>
// ---------------------------------------------------------------------------
function PlanTypeDropdown({ value, onChange }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const handleClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', handleClick);
return () => document.removeEventListener('mousedown', handleClick);
}, [open]);
const color = PLAN_TYPE_COLORS[value] || '#94A3B8';
return (
<div ref={ref} style={{ position: 'relative' }}>
<button
type="button"
onClick={() => setOpen(!open)}
style={{
...inputStyle,
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
cursor: 'pointer', textAlign: 'left',
borderColor: open ? 'rgba(14,165,233,0.5)' : 'rgba(14,165,233,0.2)',
}}
>
<span style={{ color, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em' }}>
{value.replace(/_/g, ' ')}
</span>
<ChevronDown style={{ width: 14, height: 14, color: '#475569', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
</button>
{open && (
<div style={{
position: 'absolute', top: '100%', left: 0, right: 0, marginTop: '4px',
background: '#0F1A2E',
border: '1px solid rgba(14,165,233,0.25)',
borderRadius: '0.375rem',
boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
zIndex: 50, overflow: 'hidden',
}}>
{VALID_PLAN_TYPES.map(t => {
const c = PLAN_TYPE_COLORS[t] || '#94A3B8';
const isSelected = t === value;
return (
<div
key={t}
onClick={() => { onChange(t); setOpen(false); }}
style={{
padding: '0.5rem 0.625rem',
cursor: 'pointer',
background: isSelected ? 'rgba(14,165,233,0.12)' : 'transparent',
color: c,
fontSize: '0.78rem',
fontFamily: "'JetBrains Mono', monospace",
fontWeight: 600,
textTransform: 'uppercase',
letterSpacing: '0.03em',
transition: 'background 0.1s',
}}
onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'rgba(14,165,233,0.06)'; }}
onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent'; }}
>
{t.replace(/_/g, ' ')}
</div>
);
})}
</div>
)}
</div>
);
}
// ---------------------------------------------------------------------------
// PlanTypeBadge — colored pill for plan type
// ---------------------------------------------------------------------------
function PlanTypeBadge({ type }) {
const color = PLAN_TYPE_COLORS[type] || '#94A3B8';
return (
<span style={{
display: 'inline-flex', alignItems: 'center',
padding: '0.2rem 0.5rem',
background: `${color}18`,
border: `1px solid ${color}50`,
borderRadius: '0.25rem',
color,
fontSize: '0.7rem',
fontFamily: "'JetBrains Mono', monospace",
fontWeight: 600,
textTransform: 'uppercase',
letterSpacing: '0.03em',
}}>
{type.replace(/_/g, ' ')}
</span>
);
}
// ---------------------------------------------------------------------------
// PlanCard — displays a single action plan
// ---------------------------------------------------------------------------
function PlanCard({ plan, canWrite, onSaveEdit, editingId, onStartEdit, onCancelEdit }) {
const isEditing = editingId === (plan.action_plan_id || plan.id);
const [editForm, setEditForm] = useState({
commit_date: plan.commit_date || '',
qualys_id: plan.qualys_id || '',
active_host_findings_id: plan.active_host_findings_id || '',
jira_vnr: plan.jira_vnr || '',
archer_exc: plan.archer_exc || '',
});
const [saving, setSaving] = useState(false);
const [editError, setEditError] = useState(null);
const handleSave = async () => {
setSaving(true);
setEditError(null);
try {
await onSaveEdit(plan.action_plan_id || plan.id, editForm);
} catch (err) {
setEditError(err.message);
} finally {
setSaving(false);
}
};
const isPending = !!plan._localPending;
return (
<div style={{
marginBottom: '0.625rem', padding: '0.625rem 0.75rem',
background: isPending ? 'rgba(245,158,11,0.06)' : 'rgba(14,165,233,0.04)',
border: isPending ? '1px solid rgba(245,158,11,0.25)' : '1px solid rgba(14,165,233,0.12)',
borderRadius: '0.375rem',
}}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.4rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
<PlanTypeBadge type={plan.plan_type || 'unknown'} />
{isPending && (
<span style={{
display: 'inline-flex', alignItems: 'center', gap: '3px',
padding: '0.15rem 0.4rem',
background: 'rgba(245,158,11,0.12)',
border: '1px solid rgba(245,158,11,0.35)',
borderRadius: '0.25rem',
color: '#F59E0B',
fontSize: '0.6rem',
fontFamily: "'JetBrains Mono', monospace",
fontWeight: 600,
textTransform: 'uppercase',
letterSpacing: '0.05em',
}}>
pending
</span>
)}
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
{plan.status && !isPending && (
<span style={{
display: 'inline-flex', alignItems: 'center', gap: '3px',
padding: '0.15rem 0.4rem',
background: 'rgba(16,185,129,0.12)',
border: '1px solid rgba(16,185,129,0.35)',
borderRadius: '0.25rem',
color: '#10B981',
fontSize: '0.6rem',
fontFamily: "'JetBrains Mono', monospace",
fontWeight: 600,
textTransform: 'uppercase',
letterSpacing: '0.05em',
}}>
{plan.status}
</span>
)}
{canWrite && !isEditing && !isPending && (
<button
onClick={() => onStartEdit(plan.action_plan_id || plan.id)}
title="Edit plan"
style={{
background: 'none', border: '1px solid rgba(14,165,233,0.15)',
borderRadius: '0.25rem', padding: '0.2rem',
cursor: 'pointer', color: '#475569',
transition: 'all 0.15s', lineHeight: 1,
}}
onMouseEnter={e => { e.currentTarget.style.color = ACCENT; e.currentTarget.style.borderColor = 'rgba(14,165,233,0.5)'; }}
onMouseLeave={e => { e.currentTarget.style.color = '#475569'; e.currentTarget.style.borderColor = 'rgba(14,165,233,0.15)'; }}
>
<Edit3 style={{ width: 11, height: 11 }} />
</button>
)}
</div>
</div>
{!isEditing ? (
<>
<div style={{ display: 'flex', gap: '0.4rem', marginBottom: '0.25rem' }}>
<span style={{ fontSize: '0.68rem', color: '#475569', fontFamily: "'JetBrains Mono', monospace", minWidth: '72px' }}>Commit</span>
<span style={{ fontSize: '0.68rem', color: '#E2E8F0', fontFamily: "'JetBrains Mono', monospace" }}>{plan.commit_date || '—'}</span>
</div>
{plan.jira_vnr && (
<div style={{ display: 'flex', gap: '0.4rem', marginBottom: '0.25rem' }}>
<span style={{ fontSize: '0.68rem', color: '#475569', fontFamily: "'JetBrains Mono', monospace", minWidth: '72px' }}>VNR</span>
<span style={{ fontSize: '0.68rem', color: '#E2E8F0', fontFamily: "'JetBrains Mono', monospace" }}>{plan.jira_vnr}</span>
</div>
)}
{plan.archer_exc && (
<div style={{ display: 'flex', gap: '0.4rem', marginBottom: '0.25rem' }}>
<span style={{ fontSize: '0.68rem', color: '#475569', fontFamily: "'JetBrains Mono', monospace", minWidth: '72px' }}>EXC</span>
<span style={{ fontSize: '0.68rem', color: '#E2E8F0', fontFamily: "'JetBrains Mono', monospace" }}>{plan.archer_exc}</span>
</div>
)}
</>
) : (
<div style={{ marginTop: '0.5rem' }}>
<div style={{ marginBottom: '0.5rem' }}>
<label style={labelStyle}>Commit Date</label>
<input
type="date"
value={editForm.commit_date}
onChange={e => setEditForm({ ...editForm, commit_date: e.target.value })}
style={inputStyle}
onFocus={e => e.target.style.borderColor = 'rgba(14,165,233,0.5)'}
onBlur={e => e.target.style.borderColor = 'rgba(14,165,233,0.2)'}
/>
</div>
<div style={{ marginBottom: '0.5rem' }}>
<label style={labelStyle}>Qualys ID</label>
<input
type="text"
value={editForm.qualys_id}
onChange={e => setEditForm({ ...editForm, qualys_id: e.target.value })}
placeholder="Optional"
style={inputStyle}
onFocus={e => e.target.style.borderColor = 'rgba(14,165,233,0.5)'}
onBlur={e => e.target.style.borderColor = 'rgba(14,165,233,0.2)'}
/>
</div>
<div style={{ marginBottom: '0.5rem' }}>
<label style={labelStyle}>Findings ID</label>
<input
type="number"
value={editForm.active_host_findings_id}
onChange={e => setEditForm({ ...editForm, active_host_findings_id: e.target.value })}
placeholder="Optional"
style={inputStyle}
onFocus={e => e.target.style.borderColor = 'rgba(14,165,233,0.5)'}
onBlur={e => e.target.style.borderColor = 'rgba(14,165,233,0.2)'}
/>
</div>
<div style={{ marginBottom: '0.5rem' }}>
<label style={labelStyle}>Jira VNR</label>
<input
type="text"
value={editForm.jira_vnr}
onChange={e => setEditForm({ ...editForm, jira_vnr: e.target.value })}
placeholder="Optional"
style={inputStyle}
onFocus={e => e.target.style.borderColor = 'rgba(14,165,233,0.5)'}
onBlur={e => e.target.style.borderColor = 'rgba(14,165,233,0.2)'}
/>
</div>
<div style={{ marginBottom: '0.5rem' }}>
<label style={labelStyle}>Archer EXC</label>
<input
type="text"
value={editForm.archer_exc}
onChange={e => setEditForm({ ...editForm, archer_exc: e.target.value })}
placeholder="Optional"
style={inputStyle}
onFocus={e => e.target.style.borderColor = 'rgba(14,165,233,0.5)'}
onBlur={e => e.target.style.borderColor = 'rgba(14,165,233,0.2)'}
/>
</div>
{editError && (
<div style={{ display: 'flex', gap: '0.4rem', alignItems: 'center', color: '#F87171', fontSize: '0.72rem', marginBottom: '0.5rem' }}>
<AlertCircle style={{ width: 12, height: 12, flexShrink: 0 }} />{editError}
</div>
)}
<div style={{ display: 'flex', gap: '0.5rem' }}>
<button
onClick={handleSave}
disabled={saving}
style={{ ...primaryBtnStyle, fontSize: '0.68rem', padding: '0.35rem 0.75rem', opacity: saving ? 0.6 : 1 }}
>
{saving ? <Loader style={{ width: 12, height: 12, animation: 'spin 1s linear infinite' }} /> : <Check style={{ width: 12, height: 12 }} />}
Save
</button>
<button
onClick={onCancelEdit}
style={{
padding: '0.35rem 0.75rem',
background: 'transparent',
border: '1px solid rgba(255,255,255,0.1)',
borderRadius: '0.375rem',
color: '#94A3B8',
fontSize: '0.68rem',
fontFamily: "'JetBrains Mono', monospace",
cursor: 'pointer',
transition: 'all 0.15s',
}}
>
Cancel
</button>
</div>
</div>
)}
</div>
);
}
// ---------------------------------------------------------------------------
// InactiveSection — collapsible history of overridden/inactive plans
// ---------------------------------------------------------------------------
function InactiveSection({ plans }) {
const [expanded, setExpanded] = useState(false);
return (
<div style={{ padding: '0.75rem 1.25rem', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
<button
onClick={() => setExpanded(!expanded)}
style={{
display: 'flex', alignItems: 'center', gap: '0.4rem',
background: 'none', border: 'none', cursor: 'pointer', padding: 0,
fontSize: '0.68rem', fontFamily: "'JetBrains Mono', monospace",
textTransform: 'uppercase', letterSpacing: '0.1em',
color: '#475569', width: '100%',
}}
>
<ChevronDown style={{ width: 12, height: 12, transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
History ({plans.length})
</button>
{expanded && (
<div style={{ marginTop: '0.625rem' }}>
{plans.map((plan, idx) => (
<div key={plan.action_plan_id || idx} style={{
marginBottom: '0.5rem', padding: '0.5rem 0.625rem',
background: 'rgba(100,116,139,0.04)',
border: '1px solid rgba(100,116,139,0.1)',
borderRadius: '0.375rem',
opacity: 0.7,
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', marginBottom: '0.25rem' }}>
<PlanTypeBadge type={plan.plan_type || 'unknown'} />
<span style={{
fontSize: '0.6rem', color: '#64748B',
fontFamily: "'JetBrains Mono', monospace",
textTransform: 'uppercase',
}}>
{plan.status || 'inactive'}
</span>
</div>
<div style={{ display: 'flex', gap: '0.4rem' }}>
<span style={{ fontSize: '0.65rem', color: '#475569', fontFamily: "'JetBrains Mono', monospace", minWidth: '60px' }}>Commit</span>
<span style={{ fontSize: '0.65rem', color: '#94A3B8', fontFamily: "'JetBrains Mono', monospace" }}>{plan.commit_date || '—'}</span>
</div>
{plan.created_at && (
<div style={{ display: 'flex', gap: '0.4rem' }}>
<span style={{ fontSize: '0.65rem', color: '#475569', fontFamily: "'JetBrains Mono', monospace", minWidth: '60px' }}>Created</span>
<span style={{ fontSize: '0.65rem', color: '#94A3B8', fontFamily: "'JetBrains Mono', monospace" }}>{plan.created_at.split('T')[0]}</span>
</div>
)}
</div>
))}
</div>
)}
</div>
);
}
// ---------------------------------------------------------------------------
// AtlasSlideOutPanel — main exported component
// ---------------------------------------------------------------------------
export default function AtlasSlideOutPanel({ hostId, hostName, findingId, qualysId, onClose, canWrite, onPlanChange }) {
const [plans, setPlans] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [editingId, setEditingId] = useState(null);
// Create form state — prepopulate qualys_id and findings ID from the clicked finding
const [showCreate, setShowCreate] = useState(false);
const [createForm, setCreateForm] = useState({
plan_type: 'remediation',
commit_date: '',
qualys_id: qualysId || '',
active_host_findings_id: findingId || '',
jira_vnr: '',
archer_exc: '',
});
const [creating, setCreating] = useState(false);
const [createError, setCreateError] = useState(null);
const [successMsg, setSuccessMsg] = useState(null);
// -----------------------------------------------------------------------
// Parse Atlas response — handles { active: [...], inactive: [...] } format
// -----------------------------------------------------------------------
function parseAtlasPlans(data) {
if (Array.isArray(data)) return data;
if (data && typeof data === 'object') {
const active = Array.isArray(data.active) ? data.active : [];
const inactive = Array.isArray(data.inactive) ? data.inactive : [];
return [...active, ...inactive];
}
return [];
}
// -----------------------------------------------------------------------
// Fetch plans
// -----------------------------------------------------------------------
const fetchPlans = useCallback(async () => {
setLoading(true);
setError(null);
try {
const res = await fetch(`${API_BASE}/atlas/hosts/${hostId}/action-plans`, { credentials: 'include' });
if (!res.ok) {
const data = await res.json().catch(() => ({}));
throw new Error(data.error || `Failed to load plans (${res.status})`);
}
const data = await res.json();
const remotePlans = parseAtlasPlans(data);
// Merge: keep local pending plans that aren't yet confirmed by Atlas
setPlans(prev => {
const localPending = prev.filter(p => p._localPending);
const remoteIds = new Set(remotePlans.map(p => p.action_plan_id));
// Remove local pending plans that now appear in remote (confirmed)
const stillPending = localPending.filter(p => !remoteIds.has(p.action_plan_id));
return [...remotePlans, ...stillPending];
});
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}, [hostId]);
useEffect(() => { fetchPlans(); }, [fetchPlans]);
// Clear success message after 3s
useEffect(() => {
if (!successMsg) return;
const t = setTimeout(() => setSuccessMsg(null), 3000);
return () => clearTimeout(t);
}, [successMsg]);
// -----------------------------------------------------------------------
// Create plan
// -----------------------------------------------------------------------
const handleCreate = async () => {
if (!createForm.commit_date) {
setCreateError('Commit date is required');
return;
}
setCreating(true);
setCreateError(null);
try {
const body = {
plan_type: createForm.plan_type,
commit_date: createForm.commit_date,
};
if (createForm.qualys_id.trim()) body.qualys_id = createForm.qualys_id.trim();
if (createForm.active_host_findings_id) body.active_host_findings_id = Number(createForm.active_host_findings_id);
if (createForm.jira_vnr.trim()) body.jira_vnr = createForm.jira_vnr.trim();
if (createForm.archer_exc.trim()) body.archer_exc = createForm.archer_exc.trim();
const res = await fetch(`${API_BASE}/atlas/hosts/${hostId}/action-plans`, {
method: 'PUT',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
const data = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(data.error || `Create failed (${res.status})`);
// Add optimistic local plan immediately — shown as "pending" until sync confirms
const localPlan = {
action_plan_id: data.action_plan_id || ('local-' + Date.now()),
plan_type: body.plan_type,
commit_date: body.commit_date,
qualys_id: body.qualys_id || null,
active_host_findings_id: body.active_host_findings_id || null,
jira_vnr: body.jira_vnr || null,
archer_exc: body.archer_exc || null,
status: 'pending',
_localPending: true,
created_at: new Date().toISOString(),
};
setPlans(prev => [localPlan, ...prev]);
// Reset form
setCreateForm({ plan_type: 'remediation', commit_date: '', qualys_id: qualysId || '', active_host_findings_id: findingId || '', jira_vnr: '', archer_exc: '' });
setShowCreate(false);
setSuccessMsg('Action plan created');
if (onPlanChange) onPlanChange();
} catch (err) {
setCreateError(err.message);
} finally {
setCreating(false);
}
};
// -----------------------------------------------------------------------
// Edit plan
// -----------------------------------------------------------------------
const handleSaveEdit = async (actionPlanId, updates) => {
const res = await fetch(`${API_BASE}/atlas/hosts/${hostId}/action-plans`, {
method: 'PATCH',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action_plan_id: actionPlanId, updates }),
});
const data = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(data.error || `Update failed (${res.status})`);
setEditingId(null);
setSuccessMsg('Action plan updated');
await fetchPlans();
if (onPlanChange) onPlanChange();
};
// -----------------------------------------------------------------------
// Render
// -----------------------------------------------------------------------
return (
<>
{/* Backdrop */}
<div onClick={onClose} style={backdropStyle} data-testid="atlas-panel-backdrop" />
{/* Panel */}
<div style={panelStyle} data-testid="atlas-slide-out-panel">
{/* Header */}
<div style={headerStyle}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<div style={{ minWidth: 0, flex: 1, marginRight: '0.75rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', marginBottom: '0.3rem' }}>
<Shield style={{ width: 16, height: 16, color: ACCENT, flexShrink: 0 }} />
<span style={{ fontSize: '0.9rem', fontWeight: 700, color: '#E2E8F0', wordBreak: 'break-all', lineHeight: 1.3 }}>
{hostName || 'Unknown Host'}
</span>
</div>
<span style={{ fontSize: '0.72rem', color: '#475569', fontFamily: "'JetBrains Mono', monospace" }}>
Host ID: {hostId}
</span>
</div>
<button
onClick={onClose}
style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#475569', flexShrink: 0, padding: '0.25rem' }}
onMouseEnter={e => e.currentTarget.style.color = '#E2E8F0'}
onMouseLeave={e => e.currentTarget.style.color = '#475569'}
data-testid="atlas-panel-close"
>
<X style={{ width: 18, height: 18 }} />
</button>
</div>
</div>
{/* Success message */}
{successMsg && (
<div style={{
margin: '0.75rem 1.25rem 0', padding: '0.5rem 0.75rem',
background: 'rgba(16,185,129,0.1)',
border: '1px solid rgba(16,185,129,0.3)',
borderRadius: '0.375rem',
color: '#10B981', fontSize: '0.75rem',
display: 'flex', alignItems: 'center', gap: '0.4rem',
}}>
<Check style={{ width: 14, height: 14 }} />{successMsg}
</div>
)}
{/* Loading */}
{loading && (
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '3rem 0' }}>
<Loader style={{ width: 28, height: 28, color: ACCENT, animation: 'spin 1s linear infinite' }} />
</div>
)}
{/* Error */}
{error && !loading && (
<div style={{ padding: '1.25rem', display: 'flex', flexDirection: 'column', gap: '0.75rem', alignItems: 'center' }}>
<div style={{ display: 'flex', gap: '0.5rem', color: '#F87171', fontSize: '0.8rem', alignItems: 'center' }}>
<AlertCircle style={{ width: 16, height: 16, flexShrink: 0 }} />{error}
</div>
<button
onClick={fetchPlans}
style={{
...primaryBtnStyle,
fontSize: '0.68rem',
padding: '0.35rem 0.75rem',
}}
>
Retry
</button>
</div>
)}
{/* Plan list */}
{!loading && !error && (
<div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
{/* Section: Active plans */}
<div style={{ padding: '1rem 1.25rem', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
<div style={sectionTitleStyle}>
<Shield style={{ width: 14, height: 14, color: ACCENT }} />
Active Plans ({plans.filter(p => p.status === 'active' || p._localPending).length})
</div>
{plans.filter(p => p.status === 'active' || p._localPending).length === 0 && (
<div style={{ color: '#475569', fontSize: '0.75rem', fontStyle: 'italic' }}>
No active action plans for this host.
</div>
)}
{plans.filter(p => p.status === 'active' || p._localPending).map((plan, idx) => (
<PlanCard
key={plan.action_plan_id || plan.id || idx}
plan={plan}
canWrite={canWrite}
editingId={editingId}
onStartEdit={setEditingId}
onCancelEdit={() => setEditingId(null)}
onSaveEdit={handleSaveEdit}
/>
))}
</div>
{/* Section: Inactive plans (history) — collapsible */}
{plans.filter(p => p.status !== 'active' && !p._localPending).length > 0 && (
<InactiveSection plans={plans.filter(p => p.status !== 'active' && !p._localPending)} />
)}
{/* Section: Create form */}
{canWrite && (
<div style={{ padding: '1rem 1.25rem' }}>
{!showCreate ? (
<button
onClick={() => setShowCreate(true)}
style={{
...primaryBtnStyle,
width: '100%',
}}
onMouseEnter={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.25)'; e.currentTarget.style.boxShadow = '0 0 20px rgba(14,165,233,0.25)'; }}
onMouseLeave={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.15)'; e.currentTarget.style.boxShadow = 'none'; }}
data-testid="atlas-create-plan-btn"
>
<Plus style={{ width: 14, height: 14 }} />
New Action Plan
</button>
) : (
<div data-testid="atlas-create-form">
<div style={sectionTitleStyle}>
<Plus style={{ width: 14, height: 14, color: ACCENT }} />
Create Action Plan
</div>
{/* Plan type */}
<div style={{ marginBottom: '0.625rem' }}>
<label style={labelStyle}>Plan Type</label>
<PlanTypeDropdown
value={createForm.plan_type}
onChange={val => setCreateForm({ ...createForm, plan_type: val })}
/>
</div>
{/* Commit date */}
<div style={{ marginBottom: '0.625rem' }}>
<label style={labelStyle}>Commit Date *</label>
<input
type="date"
value={createForm.commit_date}
onChange={e => setCreateForm({ ...createForm, commit_date: e.target.value })}
style={inputStyle}
onFocus={e => e.target.style.borderColor = 'rgba(14,165,233,0.5)'}
onBlur={e => e.target.style.borderColor = 'rgba(14,165,233,0.2)'}
/>
</div>
{/* Qualys ID */}
<div style={{ marginBottom: '0.625rem' }}>
<label style={labelStyle}>Qualys ID</label>
<input
type="text"
value={createForm.qualys_id}
onChange={e => setCreateForm({ ...createForm, qualys_id: e.target.value })}
placeholder="Optional"
style={inputStyle}
onFocus={e => e.target.style.borderColor = 'rgba(14,165,233,0.5)'}
onBlur={e => e.target.style.borderColor = 'rgba(14,165,233,0.2)'}
/>
</div>
{/* Active Host Findings ID */}
<div style={{ marginBottom: '0.625rem' }}>
<label style={labelStyle}>Findings ID</label>
<input
type="number"
value={createForm.active_host_findings_id}
onChange={e => setCreateForm({ ...createForm, active_host_findings_id: e.target.value })}
placeholder="Optional"
style={inputStyle}
onFocus={e => e.target.style.borderColor = 'rgba(14,165,233,0.5)'}
onBlur={e => e.target.style.borderColor = 'rgba(14,165,233,0.2)'}
/>
</div>
{/* Jira VNR */}
<div style={{ marginBottom: '0.625rem' }}>
<label style={labelStyle}>Jira VNR</label>
<input
type="text"
value={createForm.jira_vnr}
onChange={e => setCreateForm({ ...createForm, jira_vnr: e.target.value })}
placeholder="Optional"
style={inputStyle}
onFocus={e => e.target.style.borderColor = 'rgba(14,165,233,0.5)'}
onBlur={e => e.target.style.borderColor = 'rgba(14,165,233,0.2)'}
/>
</div>
{/* Archer EXC */}
<div style={{ marginBottom: '0.625rem' }}>
<label style={labelStyle}>Archer EXC</label>
<input
type="text"
value={createForm.archer_exc}
onChange={e => setCreateForm({ ...createForm, archer_exc: e.target.value })}
placeholder="Optional"
style={inputStyle}
onFocus={e => e.target.style.borderColor = 'rgba(14,165,233,0.5)'}
onBlur={e => e.target.style.borderColor = 'rgba(14,165,233,0.2)'}
/>
</div>
{/* Create error */}
{createError && (
<div style={{ display: 'flex', gap: '0.4rem', alignItems: 'center', color: '#F87171', fontSize: '0.72rem', marginBottom: '0.625rem' }}>
<AlertCircle style={{ width: 12, height: 12, flexShrink: 0 }} />{createError}
</div>
)}
{/* Buttons */}
<div style={{ display: 'flex', gap: '0.5rem' }}>
<button
onClick={handleCreate}
disabled={creating}
style={{ ...primaryBtnStyle, opacity: creating ? 0.6 : 1 }}
onMouseEnter={e => { if (!creating) { e.currentTarget.style.background = 'rgba(14,165,233,0.25)'; } }}
onMouseLeave={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.15)'; }}
>
{creating
? <Loader style={{ width: 14, height: 14, animation: 'spin 1s linear infinite' }} />
: <Check style={{ width: 14, height: 14 }} />}
Create
</button>
<button
onClick={() => { setShowCreate(false); setCreateError(null); }}
style={{
padding: '0.5rem 1rem',
background: 'transparent',
border: '1px solid rgba(255,255,255,0.1)',
borderRadius: '0.375rem',
color: '#94A3B8',
fontSize: '0.75rem',
fontFamily: "'JetBrains Mono', monospace",
cursor: 'pointer',
transition: 'all 0.15s',
}}
>
Cancel
</button>
</div>
</div>
)}
</div>
)}
</div>
)}
</div>
</>
);
}

View File

@@ -0,0 +1,171 @@
import React, { useEffect, useRef } from 'react';
import { AlertTriangle } from 'lucide-react';
/**
* ConfirmModal — themed replacement for window.confirm().
*
* Props:
* open {boolean} Whether the modal is visible
* title {string} Heading text (e.g. "Delete Document")
* message {string|ReactNode} Body text / description
* confirmText {string} Label for the confirm button (default "Confirm")
* cancelText {string} Label for the cancel button (default "Cancel")
* variant {"danger"|"warning"|"default"} Controls accent color (default "danger")
* onConfirm {function} Called when user confirms
* onCancel {function} Called when user cancels or presses Escape
*/
export default function ConfirmModal({
open,
title = 'Confirm',
message = 'Are you sure?',
confirmText = 'Confirm',
cancelText = 'Cancel',
variant = 'danger',
onConfirm,
onCancel,
}) {
const confirmRef = useRef(null);
// Focus the confirm button when the modal opens and handle Escape key
useEffect(() => {
if (!open) return;
// Small delay so the DOM is painted before we focus
const timer = setTimeout(() => confirmRef.current?.focus(), 50);
const handleKey = (e) => {
if (e.key === 'Escape') onCancel?.();
};
document.addEventListener('keydown', handleKey);
return () => {
clearTimeout(timer);
document.removeEventListener('keydown', handleKey);
};
}, [open, onCancel]);
if (!open) return null;
const accentMap = {
danger: { color: '#EF4444', bg: 'rgba(239,68,68,0.10)', bgHover: 'rgba(239,68,68,0.18)', border: 'rgba(239,68,68,0.3)' },
warning: { color: '#F59E0B', bg: 'rgba(245,158,11,0.10)', bgHover: 'rgba(245,158,11,0.18)', border: 'rgba(245,158,11,0.3)' },
default: { color: '#0EA5E9', bg: 'rgba(14,165,233,0.10)', bgHover: 'rgba(14,165,233,0.18)', border: 'rgba(14,165,233,0.3)' },
};
const accent = accentMap[variant] || accentMap.danger;
return (
<div
role="dialog"
aria-modal="true"
aria-labelledby="confirm-modal-title"
style={{
position: 'fixed', inset: 0, zIndex: 70,
background: 'rgba(10, 14, 39, 0.95)',
backdropFilter: 'blur(8px)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
padding: '1rem',
animation: 'confirmFadeIn 0.15s ease-out',
}}
onClick={(e) => { if (e.target === e.currentTarget) onCancel?.(); }}
>
<div style={{
background: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
border: `1px solid ${accent.border}`,
borderRadius: '0.75rem',
boxShadow: `0 20px 60px rgba(0,0,0,0.7), 0 0 30px ${accent.color}10`,
width: '100%', maxWidth: '420px',
padding: '1.75rem 2rem',
animation: 'confirmSlideUp 0.15s ease-out',
}}>
{/* Header */}
<div style={{
display: 'flex', alignItems: 'center', gap: '0.625rem',
marginBottom: '1rem',
}}>
<div style={{
width: '32px', height: '32px', borderRadius: '0.5rem',
background: accent.bg,
border: `1px solid ${accent.border}`,
display: 'flex', alignItems: 'center', justifyContent: 'center',
flexShrink: 0,
}}>
<AlertTriangle style={{ width: '16px', height: '16px', color: accent.color }} />
</div>
<div
id="confirm-modal-title"
style={{
fontFamily: "'JetBrains Mono', monospace",
fontSize: '0.95rem', fontWeight: '700',
color: accent.color,
textTransform: 'uppercase',
letterSpacing: '0.08em',
}}
>
{title}
</div>
</div>
{/* Body */}
<div style={{
fontSize: '0.82rem', color: '#CBD5E1',
lineHeight: '1.6', marginBottom: '1.5rem',
fontFamily: "'Outfit', system-ui, sans-serif",
}}>
{message}
</div>
{/* Actions */}
<div style={{ display: 'flex', gap: '0.75rem' }}>
<button
onClick={onCancel}
style={{
flex: 1, padding: '0.625rem',
background: 'transparent',
border: '1px solid rgba(100,116,139,0.4)',
borderRadius: '0.375rem',
color: '#94A3B8', cursor: 'pointer',
fontFamily: "'JetBrains Mono', monospace",
fontSize: '0.78rem',
transition: 'all 0.2s ease',
}}
onMouseEnter={e => {
e.currentTarget.style.borderColor = 'rgba(100,116,139,0.8)';
e.currentTarget.style.color = '#CBD5E1';
}}
onMouseLeave={e => {
e.currentTarget.style.borderColor = 'rgba(100,116,139,0.4)';
e.currentTarget.style.color = '#94A3B8';
}}
>
{cancelText}
</button>
<button
ref={confirmRef}
onClick={onConfirm}
style={{
flex: 1.5, padding: '0.625rem',
background: accent.bg,
border: `1px solid ${accent.color}`,
borderRadius: '0.375rem',
color: accent.color, cursor: 'pointer',
fontFamily: "'JetBrains Mono', monospace",
fontSize: '0.78rem', fontWeight: '600',
textTransform: 'uppercase', letterSpacing: '0.05em',
transition: 'all 0.2s ease',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.4rem',
}}
onMouseEnter={e => {
e.currentTarget.style.background = accent.bgHover;
e.currentTarget.style.boxShadow = `0 0 20px ${accent.color}25`;
}}
onMouseLeave={e => {
e.currentTarget.style.background = accent.bg;
e.currentTarget.style.boxShadow = 'none';
}}
>
{confirmText}
</button>
</div>
</div>
</div>
);
}

View File

@@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { X, Loader, AlertCircle, CheckCircle, Upload as UploadIcon, Download, FileText, Trash2 } from 'lucide-react'; import { X, Loader, AlertCircle, CheckCircle, Upload as UploadIcon, Download, FileText, Trash2 } from 'lucide-react';
import ConfirmModal from './ConfirmModal';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api'; const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
@@ -12,7 +13,7 @@ export default function KnowledgeBaseModal({ onClose, onUpdate }) {
const [result, setResult] = useState(null); const [result, setResult] = useState(null);
const [existingArticles, setExistingArticles] = useState([]); const [existingArticles, setExistingArticles] = useState([]);
const [error, setError] = useState(''); const [error, setError] = useState('');
const [pendingConfirm, setPendingConfirm] = useState(null);
// Fetch existing articles on mount // Fetch existing articles on mount
useEffect(() => { useEffect(() => {
fetchExistingArticles(); fetchExistingArticles();
@@ -117,27 +118,31 @@ export default function KnowledgeBaseModal({ onClose, onUpdate }) {
}; };
const handleDelete = async (id, articleTitle) => { const handleDelete = async (id, articleTitle) => {
if (!window.confirm(`Are you sure you want to delete "${articleTitle}"?`)) { setPendingConfirm({
return; title: 'Delete Article',
} message: `Are you sure you want to delete "${articleTitle}"?`,
confirmText: 'Delete',
onConfirm: async () => {
setPendingConfirm(null);
try {
const response = await fetch(`${API_BASE}/knowledge-base/${id}`, {
method: 'DELETE',
credentials: 'include'
});
try { if (!response.ok) throw new Error('Delete failed');
const response = await fetch(`${API_BASE}/knowledge-base/${id}`, {
method: 'DELETE',
credentials: 'include'
});
if (!response.ok) throw new Error('Delete failed'); // Refresh the list
await fetchExistingArticles();
// Refresh the list // Notify parent to refresh
await fetchExistingArticles(); if (onUpdate) onUpdate();
} catch (err) {
// Notify parent to refresh console.error('Error deleting article:', err);
if (onUpdate) onUpdate(); setError('Failed to delete article');
} catch (err) { }
console.error('Error deleting article:', err); },
setError('Failed to delete article'); });
}
}; };
const resetForm = () => { const resetForm = () => {
@@ -379,6 +384,17 @@ export default function KnowledgeBaseModal({ onClose, onUpdate }) {
)} )}
</div> </div>
</div> </div>
{/* Confirmation Modal */}
<ConfirmModal
open={!!pendingConfirm}
title={pendingConfirm?.title}
message={pendingConfirm?.message}
confirmText={pendingConfirm?.confirmText}
variant="danger"
onConfirm={pendingConfirm?.onConfirm}
onCancel={() => setPendingConfirm(null)}
/>
</div> </div>
); );
} }

View File

@@ -0,0 +1,320 @@
import React, { useState } from 'react';
import { CornerUpRight, X, Loader, AlertCircle } from 'lucide-react';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
const WORKFLOW_OPTIONS = [
{ key: 'FP', label: 'FP', col: '#F59E0B', rgb: '245,158,11' },
{ key: 'Archer', label: 'Archer', col: '#0EA5E9', rgb: '14,165,233' },
{ key: 'CARD', label: 'CARD', col: '#10B981', rgb: '16,185,129' },
{ key: 'GRANITE', label: 'GRANITE', col: '#A1887F', rgb: '161,136,127' },
];
export default function RedirectModal({ item, onClose, onRedirect }) {
const [workflowType, setWorkflowType] = useState('FP');
const [vendor, setVendor] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const needsVendor = workflowType === 'FP' || workflowType === 'Archer';
const canSubmit = !loading && (!needsVendor || vendor.trim().length > 0);
const handleSubmit = async () => {
if (!canSubmit) return;
setLoading(true);
setError('');
try {
const body = { workflow_type: workflowType };
if (needsVendor) body.vendor = vendor.trim();
const res = await fetch(`${API_BASE}/ivanti/todo-queue/${item.id}/redirect`, {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
const data = await res.json();
if (!res.ok) {
setError(data.error || 'Redirect failed.');
setLoading(false);
return;
}
onRedirect(data);
onClose();
} catch (err) {
setError(err.message || 'Network error.');
setLoading(false);
}
};
return (
<div
onClick={onClose}
style={{
position: 'fixed', inset: 0,
background: 'rgba(10, 14, 39, 0.92)',
backdropFilter: 'blur(8px)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
zIndex: 10000,
padding: '1rem',
}}
>
<div
onClick={(e) => e.stopPropagation()}
style={{
width: '100%', maxWidth: '460px',
background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(51, 65, 85, 0.95))',
border: '2px solid rgba(14, 165, 233, 0.4)',
borderRadius: '0.75rem',
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.7), 0 0 28px rgba(14, 165, 233, 0.12)',
display: 'flex', flexDirection: 'column',
overflow: 'hidden',
}}
>
{/* Top accent line */}
<div style={{
height: '2px',
background: 'linear-gradient(90deg, transparent, #0EA5E9, transparent)',
boxShadow: '0 0 8px rgba(14, 165, 233, 0.4)',
}} />
{/* Header */}
<div style={{
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
padding: '1rem 1.25rem',
borderBottom: '1px solid rgba(14, 165, 233, 0.15)',
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem' }}>
<CornerUpRight style={{ width: '18px', height: '18px', color: '#0EA5E9' }} />
<span style={{
fontFamily: "'JetBrains Mono', monospace",
fontSize: '0.95rem', fontWeight: '700',
color: '#E2E8F0',
textTransform: 'uppercase', letterSpacing: '0.08em',
}}>
Redirect Queue Item
</span>
</div>
<button
onClick={onClose}
style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#475569', padding: '4px', lineHeight: 1 }}
>
<X style={{ width: '18px', height: '18px' }} />
</button>
</div>
{/* Body */}
<div style={{ padding: '1.25rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
{/* Read-only context */}
<div style={{
background: 'rgba(15, 23, 42, 0.6)',
border: '1px solid rgba(14, 165, 233, 0.15)',
borderRadius: '0.5rem',
padding: '0.75rem 1rem',
display: 'flex', flexDirection: 'column', gap: '0.375rem',
}}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{ fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
Finding Title
</span>
</div>
<div style={{
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.78rem', fontWeight: '600',
color: '#CBD5E1',
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
}} title={item.finding_title}>
{item.finding_title || '—'}
</div>
<div style={{ display: 'flex', gap: '1.5rem', marginTop: '0.25rem' }}>
<div>
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', fontWeight: '600', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
Finding ID
</span>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.72rem', color: '#94A3B8', marginTop: '2px' }}>
{item.finding_id || '—'}
</div>
</div>
<div>
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', fontWeight: '600', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
Current Type
</span>
<div style={{ marginTop: '2px' }}>
{(() => {
const opt = WORKFLOW_OPTIONS.find((o) => o.key === item.workflow_type) || WORKFLOW_OPTIONS[0];
return (
<span style={{
display: 'inline-block',
padding: '0.1rem 0.4rem',
borderRadius: '0.2rem',
background: `rgba(${opt.rgb}, 0.12)`,
border: `1px solid rgba(${opt.rgb}, 0.3)`,
color: opt.col,
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.65rem', fontWeight: '700',
}}>
{item.workflow_type}
</span>
);
})()}
</div>
</div>
</div>
</div>
{/* Workflow type selector */}
<div>
<label style={{
display: 'block',
fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600',
color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.1em',
marginBottom: '0.5rem',
}}>
Target Workflow Type
</label>
<div style={{ display: 'flex', gap: '0.5rem' }}>
{WORKFLOW_OPTIONS.map(({ key, label, col, rgb }) => {
const active = workflowType === key;
return (
<label
key={key}
style={{
flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
gap: '0.375rem',
padding: '0.45rem 0.5rem',
borderRadius: '0.375rem',
background: active ? `rgba(${rgb}, 0.15)` : 'transparent',
border: `1.5px solid ${active ? `rgba(${rgb}, 0.5)` : 'rgba(255,255,255,0.08)'}`,
color: active ? col : '#475569',
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.72rem', fontWeight: '700',
cursor: 'pointer',
transition: 'all 0.15s',
}}
>
<input
type="radio"
name="redirect-workflow-type"
value={key}
checked={active}
onChange={() => setWorkflowType(key)}
style={{ display: 'none' }}
/>
<span style={{
width: '8px', height: '8px', borderRadius: '50%',
background: active ? col : 'rgba(255,255,255,0.1)',
boxShadow: active ? `0 0 6px ${col}` : 'none',
transition: 'all 0.15s',
}} />
{label}
</label>
);
})}
</div>
</div>
{/* Vendor input — conditional */}
{needsVendor && (
<div>
<label style={{
display: 'block',
fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600',
color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.1em',
marginBottom: '0.5rem',
}}>
Vendor <span style={{ color: '#EF4444' }}>*</span>
</label>
<input
type="text"
value={vendor}
onChange={(e) => setVendor(e.target.value)}
placeholder="e.g. Cisco, Juniper, ADTRAN…"
maxLength={200}
style={{
width: '100%', boxSizing: 'border-box',
background: 'rgba(30, 41, 59, 0.6)',
border: '1px solid rgba(14, 165, 233, 0.25)',
borderRadius: '0.375rem',
padding: '0.5rem 0.75rem',
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.8rem',
color: '#E2E8F0',
outline: 'none',
transition: 'border-color 0.2s',
}}
onFocus={(e) => { e.target.style.borderColor = '#0EA5E9'; }}
onBlur={(e) => { e.target.style.borderColor = 'rgba(14, 165, 233, 0.25)'; }}
/>
</div>
)}
{/* Error message */}
{error && (
<div style={{
display: 'flex', alignItems: 'flex-start', gap: '0.5rem',
padding: '0.625rem 0.75rem',
background: 'rgba(239, 68, 68, 0.1)',
border: '1px solid rgba(239, 68, 68, 0.35)',
borderRadius: '0.375rem',
}}>
<AlertCircle style={{ width: '16px', height: '16px', color: '#EF4444', flexShrink: 0, marginTop: '1px' }} />
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.75rem', color: '#FCA5A5' }}>
{error}
</span>
</div>
)}
</div>
{/* Footer */}
<div style={{
display: 'flex', justifyContent: 'flex-end', gap: '0.625rem',
padding: '0.875rem 1.25rem',
borderTop: '1px solid rgba(14, 165, 233, 0.1)',
}}>
<button
onClick={onClose}
style={{
padding: '0.45rem 1rem',
background: 'transparent',
border: '1px solid rgba(255,255,255,0.1)',
borderRadius: '0.375rem',
color: '#94A3B8',
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.75rem', fontWeight: '600',
textTransform: 'uppercase', letterSpacing: '0.05em',
cursor: 'pointer',
transition: 'all 0.15s',
}}
>
Cancel
</button>
<button
onClick={handleSubmit}
disabled={!canSubmit}
style={{
display: 'flex', alignItems: 'center', gap: '0.375rem',
padding: '0.45rem 1.1rem',
background: canSubmit
? 'linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.1))'
: 'transparent',
border: `1.5px solid ${canSubmit ? '#0EA5E9' : 'rgba(255,255,255,0.06)'}`,
borderRadius: '0.375rem',
color: canSubmit ? '#38BDF8' : '#334155',
fontFamily: "'JetBrains Mono', monospace", fontSize: '0.75rem', fontWeight: '600',
textTransform: 'uppercase', letterSpacing: '0.05em',
cursor: canSubmit ? 'pointer' : 'not-allowed',
transition: 'all 0.15s',
}}
>
{loading ? (
<Loader style={{ width: '14px', height: '14px', animation: 'spin 1s linear infinite' }} />
) : (
<CornerUpRight style={{ width: '14px', height: '14px' }} />
)}
{loading ? 'Redirecting…' : 'Redirect'}
</button>
</div>
</div>
</div>
);
}

View File

@@ -1,6 +1,10 @@
// ⚠️ CONVENTION: This component uses Tailwind utility classes (e.g. bg-white, rounded-lg, hover:bg-gray-50)
// instead of inline styles or App.css global classes. This is the legacy modal kept for UserMenu quick-access;
// the themed replacement lives in AdminPage.js.
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { X, Plus, Edit2, Trash2, Loader, AlertCircle, CheckCircle, User, Mail, Shield } from 'lucide-react'; import { X, Plus, Edit2, Trash2, Loader, AlertCircle, CheckCircle, User, Mail, Shield } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext'; import { useAuth } from '../contexts/AuthContext';
import ConfirmModal from './ConfirmModal';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api'; const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
@@ -35,6 +39,7 @@ export default function UserManagement({ onClose }) {
}); });
const [formError, setFormError] = useState(''); const [formError, setFormError] = useState('');
const [formSuccess, setFormSuccess] = useState(''); const [formSuccess, setFormSuccess] = useState('');
const [pendingConfirm, setPendingConfirm] = useState(null);
useEffect(() => { useEffect(() => {
fetchUsers(); fetchUsers();
@@ -55,29 +60,10 @@ export default function UserManagement({ onClose }) {
} }
}; };
const confirmGroupChange = (targetUser, newGroup) => { const doSubmit = async () => {
let message = `Are you sure you want to change ${targetUser.username}'s group from ${targetUser.group} to ${newGroup}?`;
// Extra warning when downgrading an Admin user
if (targetUser.group === 'Admin' && newGroup !== 'Admin') {
message += `\n\n⚠️ WARNING: You are removing Admin privileges from ${targetUser.username}. They will lose full system access.`;
}
return window.confirm(message);
};
const handleSubmit = async (e) => {
e.preventDefault();
setFormError(''); setFormError('');
setFormSuccess(''); setFormSuccess('');
// If editing and group changed, show confirmation dialog
if (editingUser && formData.group !== editingUser.group) {
if (!confirmGroupChange(editingUser, formData.group)) {
return;
}
}
try { try {
const url = editingUser const url = editingUser
? `${API_BASE}/users/${editingUser.id}` ? `${API_BASE}/users/${editingUser.id}`
@@ -117,6 +103,31 @@ export default function UserManagement({ onClose }) {
} }
}; };
const handleSubmit = (e) => {
e.preventDefault();
// If editing and group changed, show confirmation modal
if (editingUser && formData.group !== editingUser.group) {
let message = `Are you sure you want to change ${editingUser.username}'s group from ${editingUser.group} to ${formData.group}?`;
if (editingUser.group === 'Admin' && formData.group !== 'Admin') {
message += ` WARNING: You are removing Admin privileges from ${editingUser.username}. They will lose full system access.`;
}
setPendingConfirm({
title: 'Change User Group',
message,
confirmText: 'Change Group',
variant: editingUser.group === 'Admin' ? 'danger' : 'warning',
onConfirm: () => {
setPendingConfirm(null);
doSubmit();
},
});
return;
}
doSubmit();
};
const handleEdit = (user) => { const handleEdit = (user) => {
setEditingUser(user); setEditingUser(user);
setFormData({ setFormData({
@@ -131,26 +142,30 @@ export default function UserManagement({ onClose }) {
}; };
const handleDelete = async (userId) => { const handleDelete = async (userId) => {
if (!window.confirm('Are you sure you want to delete this user?')) { setPendingConfirm({
return; title: 'Delete User',
} message: 'Are you sure you want to delete this user?',
confirmText: 'Delete',
onConfirm: async () => {
setPendingConfirm(null);
try {
const response = await fetch(`${API_BASE}/users/${userId}`, {
method: 'DELETE',
credentials: 'include'
});
try { const data = await response.json();
const response = await fetch(`${API_BASE}/users/${userId}`, {
method: 'DELETE',
credentials: 'include'
});
const data = await response.json(); if (!response.ok) {
throw new Error(data.error || 'Delete failed');
}
if (!response.ok) { fetchUsers();
throw new Error(data.error || 'Delete failed'); } catch (err) {
} alert(err.message);
}
fetchUsers(); },
} catch (err) { });
alert(err.message);
}
}; };
const handleToggleActive = async (user) => { const handleToggleActive = async (user) => {
@@ -418,6 +433,17 @@ export default function UserManagement({ onClose }) {
)} )}
</div> </div>
</div> </div>
{/* Confirmation Modal */}
<ConfirmModal
open={!!pendingConfirm}
title={pendingConfirm?.title}
message={pendingConfirm?.message}
confirmText={pendingConfirm?.confirmText}
variant={pendingConfirm?.variant || 'danger'}
onConfirm={pendingConfirm?.onConfirm}
onCancel={() => setPendingConfirm(null)}
/>
</div> </div>
); );
} }

File diff suppressed because it is too large Load Diff

View File

@@ -1,5 +1,6 @@
import React, { useState, useEffect, useCallback } from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { X, MessageSquare, Send, Loader, AlertCircle, Clock, Shield } from 'lucide-react'; import { X, MessageSquare, Send, Loader, AlertCircle, Clock, Shield, Trash2 } from 'lucide-react';
import ConfirmModal from '../ConfirmModal';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api'; const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
@@ -42,9 +43,10 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [noteText, setNoteText] = useState(''); const [noteText, setNoteText] = useState('');
const [noteMetric, setNoteMetric] = useState(''); const [selectedMetrics, setSelectedMetrics] = useState([]);
const [submitting, setSubmitting] = useState(false); const [submitting, setSubmitting] = useState(false);
const [noteError, setNoteError] = useState(null); const [noteError, setNoteError] = useState(null);
const [pendingConfirm, setPendingConfirm] = useState(null);
const fetchDetail = useCallback(async () => { const fetchDetail = useCallback(async () => {
setLoading(true); setLoading(true);
@@ -55,9 +57,9 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
if (!res.ok) throw new Error(data.error || 'Failed to load device'); if (!res.ok) throw new Error(data.error || 'Failed to load device');
setDetail(data); setDetail(data);
// Default note metric to first active failing metric // Default selected metrics to first active failing metric
const firstActive = (data.metrics || []).find(m => m.status === 'active'); const firstActive = (data.metrics || []).find(m => m.status === 'active');
if (firstActive) setNoteMetric(firstActive.metric_id); if (firstActive) setSelectedMetrics([firstActive.metric_id]);
} catch (err) { } catch (err) {
setError(err.message); setError(err.message);
} finally { } finally {
@@ -68,7 +70,7 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
useEffect(() => { fetchDetail(); }, [fetchDetail]); useEffect(() => { fetchDetail(); }, [fetchDetail]);
const handleAddNote = async () => { const handleAddNote = async () => {
if (!noteText.trim() || !noteMetric) return; if (!noteText.trim() || selectedMetrics.length === 0) return;
setSubmitting(true); setSubmitting(true);
setNoteError(null); setNoteError(null);
try { try {
@@ -76,7 +78,7 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
method: 'POST', method: 'POST',
credentials: 'include', credentials: 'include',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ hostname, metric_id: noteMetric, note: noteText.trim() }), body: JSON.stringify({ hostname, metric_ids: selectedMetrics, note: noteText.trim() }),
}); });
const data = await res.json(); const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Failed to save note'); if (!res.ok) throw new Error(data.error || 'Failed to save note');
@@ -90,6 +92,29 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
} }
}; };
const handleDeleteNote = async (noteId, hasGroup) => {
setPendingConfirm({
title: 'Delete Note',
message: 'Delete this note?',
confirmText: 'Delete',
onConfirm: async () => {
setPendingConfirm(null);
try {
const url = hasGroup
? `${API_BASE}/compliance/notes/${noteId}?group=true`
: `${API_BASE}/compliance/notes/${noteId}`;
const res = await fetch(url, { method: 'DELETE', credentials: 'include' });
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Failed to delete note');
await fetchDetail();
if (onNoteAdded) onNoteAdded();
} catch (err) {
setNoteError(err.message);
}
},
});
};
const activeMetrics = detail?.metrics?.filter(m => m.status === 'active') || []; const activeMetrics = detail?.metrics?.filter(m => m.status === 'active') || [];
const resolvedMetrics = detail?.metrics?.filter(m => m.status === 'resolved') || []; const resolvedMetrics = detail?.metrics?.filter(m => m.status === 'resolved') || [];
@@ -194,39 +219,131 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
{detail.notes.length === 0 && ( {detail.notes.length === 0 && (
<div style={{ color: '#334155', fontSize: '0.75rem', fontStyle: 'italic', marginBottom: '0.75rem' }}>No notes yet</div> <div style={{ color: '#334155', fontSize: '0.75rem', fontStyle: 'italic', marginBottom: '0.75rem' }}>No notes yet</div>
)} )}
{detail.notes.map(n => ( {(() => {
<div key={n.id} style={{ // Build a lookup map for metric categories (active + resolved)
marginBottom: '0.75rem', padding: '0.625rem 0.75rem', const metricMap = {};
background: 'rgba(15,23,42,0.6)', borderRadius: '0.375rem', (detail.metrics || []).forEach(m => { metricMap[m.metric_id] = m.category; });
border: '1px solid rgba(255,255,255,0.05)',
}}> // Group notes by group_id, preserving reverse chronological order
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.3rem' }}> const grouped = [];
<MetricChip metricId={n.metric_id} category={activeMetrics.find(m => m.metric_id === n.metric_id)?.category || ''} /> const seen = new Set();
<span style={{ fontSize: '0.68rem', color: '#334155', fontFamily: 'monospace' }}> // detail.notes is already sorted newest-first from the API
{n.created_by && `${n.created_by} · `}{n.created_at?.slice(0, 10)} for (const n of detail.notes) {
</span> const gid = n.group_id;
if (!gid) {
// Legacy note without group_id — render individually
grouped.push({ key: `note-${n.id}`, notes: [n], note: n.note, created_by: n.created_by, created_at: n.created_at });
} else if (!seen.has(gid)) {
seen.add(gid);
const group = detail.notes.filter(x => x.group_id === gid);
grouped.push({ key: `group-${gid}`, notes: group, note: group[0].note, created_by: group[0].created_by, created_at: group[0].created_at });
}
}
return grouped.map(g => (
<div key={g.key} style={{
marginBottom: '0.75rem', padding: '0.625rem 0.75rem',
background: 'rgba(15,23,42,0.6)', borderRadius: '0.375rem',
border: '1px solid rgba(255,255,255,0.05)',
}}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '0.3rem' }}>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
{g.notes.map(n => (
<MetricChip key={n.id} metricId={n.metric_id} category={metricMap[n.metric_id] || ''} />
))}
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', flexShrink: 0, marginLeft: '0.5rem' }}>
<span style={{ fontSize: '0.68rem', color: '#334155', fontFamily: 'monospace', whiteSpace: 'nowrap' }}>
{g.created_by && `${g.created_by} · `}{g.created_at?.slice(0, 10)}
</span>
<button
onClick={() => handleDeleteNote(g.notes[0].id, !!g.notes[0].group_id)}
title="Delete note"
style={{
background: 'none', border: '1px solid rgba(239,68,68,0.15)',
borderRadius: '0.25rem', padding: '0.2rem',
cursor: 'pointer', color: '#334155',
transition: 'all 0.15s', lineHeight: 1,
}}
onMouseEnter={e => { e.currentTarget.style.color = '#EF4444'; e.currentTarget.style.borderColor = 'rgba(239,68,68,0.5)'; }}
onMouseLeave={e => { e.currentTarget.style.color = '#334155'; e.currentTarget.style.borderColor = 'rgba(239,68,68,0.15)'; }}
>
<Trash2 style={{ width: '11px', height: '11px' }} />
</button>
</div>
</div>
<div style={{ fontSize: '0.8rem', color: '#CBD5E1', lineHeight: 1.5 }}>{g.note}</div>
</div> </div>
<div style={{ fontSize: '0.8rem', color: '#CBD5E1', lineHeight: 1.5 }}>{n.note}</div> ));
</div> })()}
))}
{/* Add note */} {/* Add note */}
<div style={{ marginTop: 'auto', paddingTop: '0.75rem', borderTop: '1px solid rgba(255,255,255,0.05)' }}> <div style={{ marginTop: 'auto', paddingTop: '0.75rem', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
{activeMetrics.length > 1 && ( {activeMetrics.length > 1 && (() => {
<select const allSelected = activeMetrics.length > 0 && activeMetrics.every(m => selectedMetrics.includes(m.metric_id));
value={noteMetric} return (
onChange={e => setNoteMetric(e.target.value)} <div style={{ marginBottom: '0.5rem' }}>
style={{ <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
width: '100%', marginBottom: '0.5rem', <span style={{ fontSize: '0.68rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.05em', color: '#475569' }}>
background: 'rgba(15,23,42,0.8)', border: '1px solid rgba(20,184,166,0.25)', Metrics
borderRadius: '0.25rem', color: '#CBD5E1', </span>
padding: '0.4rem 0.5rem', fontSize: '0.75rem', fontFamily: 'monospace', <button
}}> onClick={() => {
{activeMetrics.map(m => ( if (allSelected) {
<option key={m.metric_id} value={m.metric_id}>{m.metric_id} {m.category}</option> setSelectedMetrics([activeMetrics[0].metric_id]);
))} } else {
</select> setSelectedMetrics(activeMetrics.map(m => m.metric_id));
)} }
}}
style={{
background: 'none', border: 'none', cursor: 'pointer',
fontSize: '0.68rem', fontFamily: 'monospace',
color: TEAL, padding: 0,
transition: 'opacity 0.15s',
}}
onMouseEnter={e => e.currentTarget.style.opacity = '0.7'}
onMouseLeave={e => e.currentTarget.style.opacity = '1'}
>
{allSelected ? 'Deselect All' : 'Select All'}
</button>
</div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.35rem' }}>
{activeMetrics.map(m => {
const isSelected = selectedMetrics.includes(m.metric_id);
const color = categoryColor(m.category);
return (
<button
key={m.metric_id}
onClick={() => {
if (isSelected) {
if (selectedMetrics.length > 1) {
setSelectedMetrics(selectedMetrics.filter(id => id !== m.metric_id));
}
} else {
setSelectedMetrics([...selectedMetrics, m.metric_id]);
}
}}
style={{
display: 'inline-flex', alignItems: 'center',
padding: '0.25rem 0.5rem',
background: isSelected ? `${color}25` : `${color}08`,
border: `1px solid ${isSelected ? `${color}90` : `${color}30`}`,
borderRadius: '0.25rem',
color: isSelected ? color : `${color}90`,
fontSize: '0.7rem', fontFamily: 'monospace', fontWeight: '600',
cursor: (isSelected && selectedMetrics.length === 1) ? 'default' : 'pointer',
transition: 'all 0.15s',
opacity: (isSelected && selectedMetrics.length === 1) ? 0.85 : 1,
}}
>
{m.metric_id}
</button>
);
})}
</div>
</div>
);
})()}
<div style={{ display: 'flex', gap: '0.5rem' }}> <div style={{ display: 'flex', gap: '0.5rem' }}>
<textarea <textarea
value={noteText} value={noteText}
@@ -244,13 +361,13 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
onBlur={e => e.target.style.borderColor = 'rgba(20,184,166,0.25)'} onBlur={e => e.target.style.borderColor = 'rgba(20,184,166,0.25)'}
onKeyDown={e => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) handleAddNote(); }} onKeyDown={e => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) handleAddNote(); }}
/> />
<button onClick={handleAddNote} disabled={!noteText.trim() || submitting} <button onClick={handleAddNote} disabled={!noteText.trim() || selectedMetrics.length === 0 || submitting}
style={{ style={{
padding: '0.5rem 0.625rem', flexShrink: 0, padding: '0.5rem 0.625rem', flexShrink: 0,
background: noteText.trim() ? `${TEAL}20` : 'transparent', background: (noteText.trim() && selectedMetrics.length > 0) ? `${TEAL}20` : 'transparent',
border: `1px solid ${noteText.trim() ? TEAL : 'rgba(20,184,166,0.2)'}`, border: `1px solid ${(noteText.trim() && selectedMetrics.length > 0) ? TEAL : 'rgba(20,184,166,0.2)'}`,
borderRadius: '0.375rem', color: noteText.trim() ? TEAL : '#334155', borderRadius: '0.375rem', color: (noteText.trim() && selectedMetrics.length > 0) ? TEAL : '#334155',
cursor: noteText.trim() ? 'pointer' : 'default', transition: 'all 0.15s', cursor: (noteText.trim() && selectedMetrics.length > 0) ? 'pointer' : 'default', transition: 'all 0.15s',
}}> }}>
{submitting {submitting
? <Loader style={{ width: '16px', height: '16px', animation: 'spin 1s linear infinite' }} /> ? <Loader style={{ width: '16px', height: '16px', animation: 'spin 1s linear infinite' }} />
@@ -263,6 +380,17 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
</div> </div>
)} )}
</div> </div>
{/* Confirmation Modal */}
<ConfirmModal
open={!!pendingConfirm}
title={pendingConfirm?.title}
message={pendingConfirm?.message}
confirmText={pendingConfirm?.confirmText}
variant="danger"
onConfirm={pendingConfirm?.onConfirm}
onCancel={() => setPendingConfirm(null)}
/>
</> </>
); );
} }

View File

@@ -1,14 +1,22 @@
import React, { useState, useEffect, useCallback } from 'react'; import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Upload, MessageSquare, RefreshCw, AlertCircle, Loader } from 'lucide-react'; import { Upload, MessageSquare, RefreshCw, AlertCircle, Loader, RotateCcw, Info } from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext'; import { useAuth } from '../../contexts/AuthContext';
import ComplianceUploadModal from './ComplianceUploadModal'; import ComplianceUploadModal from './ComplianceUploadModal';
import ComplianceDetailPanel from './ComplianceDetailPanel'; import ComplianceDetailPanel from './ComplianceDetailPanel';
import ComplianceChartsPanel from './ComplianceChartsPanel'; import ComplianceChartsPanel from './ComplianceChartsPanel';
import MetricInfoPanel from './MetricInfoPanel';
import metricDefinitionsRaw from '../../data/metricDefinitions.json';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api'; const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
const TEAL = '#14B8A6'; const TEAL = '#14B8A6';
const TEAMS = ['STEAM', 'ACCESS-ENG']; const TEAMS = ['STEAM', 'ACCESS-ENG'];
// Build definitions lookup map once at module level
const METRIC_DEFINITIONS = {};
for (const def of metricDefinitionsRaw) {
METRIC_DEFINITIONS[def.metric_id] = def;
}
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Helpers // Helpers
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
@@ -38,18 +46,83 @@ function pctDisplay(pct) {
return `${Math.round(pct * 100)}%`; return `${Math.round(pct * 100)}%`;
} }
// Deduplicate summary entries — one per metric_id for the selected team const STATUS_SEVERITY = {
// (exclude aggregate "ALL: NTS-AEO" rows) 'Below 15% of Target': 0,
function teamMetrics(entries, team) { 'Within 15% of Target': 1,
return entries.filter(e => e.team === team); 'Meets/Exceeds Target': 2,
};
function computeWorstStatus(statuses) {
let worst = 'Meets/Exceeds Target';
let worstSev = 2;
for (const s of statuses) {
const sev = STATUS_SEVERITY[s] ?? 0;
if (sev < worstSev) {
worstSev = sev;
worst = s;
}
}
return worst;
}
function groupByMetricFamily(allEntries, team) {
const teamEntries = allEntries.filter(e => e.team === team);
const familyMap = {};
for (const entry of teamEntries) {
const baseId = entry.metric_id;
if (!baseId) continue;
if (!familyMap[baseId]) {
familyMap[baseId] = [];
}
familyMap[baseId].push(entry);
}
return Object.entries(familyMap).map(([metricId, entries]) => ({
metricId,
entries,
category: entries[0].category,
target: entries[0].target,
worstStatus: computeWorstStatus(entries.map(e => e.status)),
}));
} }
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Sub-components // Sub-components
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
function MetricHealthCard({ entry, active, onClick }) { function VariantPill({ entry, label }) {
const color = statusColor(entry.status); const color = statusColor(entry.status);
const isOk = entry.status === 'Meets/Exceeds Target'; const isOk = entry.status === 'Meets/Exceeds Target';
return (
<span style={{
display: 'inline-flex',
alignItems: 'center',
gap: '0.3rem',
padding: '0.15rem 0.45rem',
background: `${color}1F`,
borderRadius: '0.2rem',
border: `1px solid ${color}25`,
fontSize: '0.62rem',
fontFamily: 'monospace',
color: '#CBD5E1',
whiteSpace: 'nowrap',
}}>
{!isOk && (
<span style={{
width: '4px', height: '4px', borderRadius: '50%',
background: color, flexShrink: 0,
boxShadow: `0 0 5px ${color}`,
}} />
)}
{label && <span style={{ color: '#94A3B8' }}>{label}</span>}
<span style={{ color, fontWeight: '600' }}>{pctDisplay(entry.compliance_pct)}</span>
</span>
);
}
function MetricHealthCard({ family, active, onClick, onInfoClick, definitionLookup }) {
const color = statusColor(family.worstStatus);
const isOk = family.worstStatus === 'Meets/Exceeds Target';
return ( return (
<button <button
@@ -66,33 +139,63 @@ function MetricHealthCard({ entry, active, onClick }) {
transition: 'all 0.15s', transition: 'all 0.15s',
minWidth: '160px', minWidth: '160px',
flex: '1 1 0', flex: '1 1 0',
position: 'relative',
}} }}
onMouseEnter={e => { if (!active) e.currentTarget.style.borderColor = color + '80'; }} onMouseEnter={e => { if (!active) e.currentTarget.style.borderColor = color + '80'; }}
onMouseLeave={e => { if (!active) e.currentTarget.style.borderColor = color + '40'; }} onMouseLeave={e => { if (!active) e.currentTarget.style.borderColor = active ? color : color + '40'; }}
> >
{/* Info icon — top-right */}
<span
onClick={(e) => { e.stopPropagation(); onInfoClick(family.metricId); }}
style={{
position: 'absolute',
top: '0.5rem',
right: '0.5rem',
cursor: 'pointer',
color: '#475569',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '0.15rem',
borderRadius: '0.2rem',
transition: 'color 0.15s',
}}
onMouseEnter={e => { e.currentTarget.style.color = TEAL; }}
onMouseLeave={e => { e.currentTarget.style.color = '#475569'; }}
>
<Info style={{ width: '13px', height: '13px' }} />
</span>
{/* Metric ID */} {/* Metric ID */}
<div style={{ fontFamily: 'monospace', fontSize: '0.95rem', fontWeight: '700', color: active ? color : '#E2E8F0', marginBottom: '0.25rem' }}> <div style={{ fontFamily: 'monospace', fontSize: '0.95rem', fontWeight: '700', color: active ? color : '#E2E8F0', marginBottom: '0.25rem', paddingRight: '1.25rem' }}>
{entry.metric_id} {family.metricId}
</div> </div>
{/* Category */} {/* Category */}
<div style={{ fontSize: '0.65rem', color: '#475569', marginBottom: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}> <div style={{ fontSize: '0.65rem', color: '#475569', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
{entry.category} {family.category}
</div> </div>
{/* Compliance % */} {/* Variant pills */}
<div style={{ fontFamily: 'monospace', fontSize: '1.4rem', fontWeight: '700', color, lineHeight: 1, marginBottom: '0.3rem' }}> <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.3rem', marginBottom: '0.5rem' }}>
{pctDisplay(entry.compliance_pct)} {family.entries.map((entry, i) => {
// Only show a label when there are multiple variants to differentiate
let label = null;
if (family.entries.length > 1) {
label = entry.priority || `#${i + 1}`;
}
return <VariantPill key={entry.metric_id + '-' + i} entry={entry} label={label} />;
})}
</div> </div>
{/* Target */} {/* Target */}
<div style={{ fontSize: '0.68rem', color: '#475569', fontFamily: 'monospace' }}> <div style={{ fontSize: '0.68rem', color: '#475569', fontFamily: 'monospace', marginBottom: '0.5rem' }}>
target {pctDisplay(entry.target)} target {pctDisplay(family.target)}
</div> </div>
{/* Status pill */} {/* Status pill */}
<div style={{ <div style={{
marginTop: '0.625rem', display: 'inline-flex', alignItems: 'center', gap: '0.3rem', display: 'inline-flex', alignItems: 'center', gap: '0.3rem',
fontSize: '0.62rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.04em', fontSize: '0.62rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.04em',
color, padding: '0.2rem 0.5rem', color, padding: '0.2rem 0.5rem',
background: `${color}12`, borderRadius: '999px', background: `${color}12`, borderRadius: '999px',
@@ -103,7 +206,7 @@ function MetricHealthCard({ entry, active, onClick }) {
background: color, flexShrink: 0, background: color, flexShrink: 0,
...(isOk ? {} : { boxShadow: `0 0 6px ${color}` }), ...(isOk ? {} : { boxShadow: `0 0 6px ${color}` }),
}} /> }} />
{isOk ? 'OK' : entry.status.replace(' of Target', '')} {isOk ? 'OK' : family.worstStatus.replace(' of Target', '')}
</div> </div>
</button> </button>
); );
@@ -143,7 +246,7 @@ function SeenBadge({ count }) {
// Main Page // Main Page
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
export default function CompliancePage({ onNavigate }) { export default function CompliancePage({ onNavigate }) {
const { canWrite } = useAuth(); const { canWrite, isAdmin } = useAuth();
const [activeTeam, setActiveTeam] = useState('STEAM'); const [activeTeam, setActiveTeam] = useState('STEAM');
const [activeTab, setActiveTab] = useState('active'); const [activeTab, setActiveTab] = useState('active');
@@ -155,6 +258,13 @@ export default function CompliancePage({ onNavigate }) {
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [selectedHost, setSelectedHost] = useState(null); const [selectedHost, setSelectedHost] = useState(null);
const [showUpload, setShowUpload] = useState(false); const [showUpload, setShowUpload] = useState(false);
const [rollbackConfirm, setRollbackConfirm] = useState(false);
const [rollbackLoading, setRollbackLoading] = useState(false);
const [rollbackResult, setRollbackResult] = useState(null);
const [infoMetric, setInfoMetric] = useState(null);
const [hoveredMetric, setHoveredMetric] = useState(null);
const hoverTimeoutRef = useRef(null);
const hoveredCardRef = useRef(null);
const fetchSummary = useCallback(async (team) => { const fetchSummary = useCallback(async (team) => {
try { try {
@@ -198,12 +308,34 @@ export default function CompliancePage({ onNavigate }) {
fetchDevices(activeTeam, activeTab); fetchDevices(activeTeam, activeTab);
}; };
const handleRollback = async () => {
if (!lastUpload) return;
setRollbackLoading(true);
try {
const res = await fetch(`${API_BASE}/compliance/rollback/${lastUpload.id}`, {
method: 'POST',
credentials: 'include',
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Rollback failed');
setRollbackResult(data);
setRollbackConfirm(false);
refresh();
// Auto-dismiss result after 4 seconds
setTimeout(() => setRollbackResult(null), 4000);
} catch (err) {
setRollbackResult({ error: err.message });
} finally {
setRollbackLoading(false);
}
};
// In-memory filters // In-memory filters
const filteredDevices = devices const filteredDevices = devices
.filter(d => !metricFilter || d.failing_metrics.some(m => m.metric_id === metricFilter)) .filter(d => !metricFilter || d.failing_metrics.some(m => metricFilter.includes(m.metric_id)))
.filter(d => !hostSearch || d.hostname.toLowerCase().includes(hostSearch.toLowerCase())); .filter(d => !hostSearch || d.hostname.toLowerCase().includes(hostSearch.toLowerCase()));
const metrics = teamMetrics(summary.entries, activeTeam); const families = groupByMetricFamily(summary.entries, activeTeam);
const lastUpload = summary.upload; const lastUpload = summary.upload;
return ( return (
@@ -221,9 +353,30 @@ export default function CompliancePage({ onNavigate }) {
</h2> </h2>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
{lastUpload ? ( {lastUpload ? (
<span style={{ fontSize: '0.72rem', color: '#475569', fontFamily: 'monospace' }}> <>
Last report: <span style={{ color: '#64748B' }}>{lastUpload.report_date || lastUpload.uploaded_at?.slice(0, 10)}</span> <span style={{ fontSize: '0.72rem', color: '#475569', fontFamily: 'monospace' }}>
</span> Last report: <span style={{ color: '#64748B' }}>{lastUpload.report_date || lastUpload.uploaded_at?.slice(0, 10)}</span>
</span>
{isAdmin() && (
<button
onClick={() => setRollbackConfirm(true)}
title="Rollback last upload"
style={{
background: 'none', border: '1px solid rgba(239,68,68,0.25)',
borderRadius: '0.25rem', padding: '0.15rem 0.4rem',
cursor: 'pointer', color: '#64748B',
display: 'inline-flex', alignItems: 'center', gap: '0.25rem',
fontSize: '0.62rem', fontFamily: 'monospace',
transition: 'all 0.15s',
}}
onMouseEnter={e => { e.currentTarget.style.color = '#EF4444'; e.currentTarget.style.borderColor = 'rgba(239,68,68,0.6)'; }}
onMouseLeave={e => { e.currentTarget.style.color = '#64748B'; e.currentTarget.style.borderColor = 'rgba(239,68,68,0.25)'; }}
>
<RotateCcw style={{ width: '10px', height: '10px' }} />
Rollback
</button>
)}
</>
) : ( ) : (
<span style={{ fontSize: '0.72rem', color: '#334155', fontFamily: 'monospace' }}>No reports uploaded</span> <span style={{ fontSize: '0.72rem', color: '#334155', fontFamily: 'monospace' }}>No reports uploaded</span>
)} )}
@@ -290,7 +443,7 @@ export default function CompliancePage({ onNavigate }) {
</div> </div>
{/* ── Metric health cards ──────────────────────────────────── */} {/* ── Metric health cards ──────────────────────────────────── */}
{metrics.length > 0 ? ( {families.length > 0 ? (
<div style={{ marginBottom: '1.5rem' }}> <div style={{ marginBottom: '1.5rem' }}>
<div style={{ fontSize: '0.65rem', color: '#334155', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '0.625rem' }}> <div style={{ fontSize: '0.65rem', color: '#334155', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '0.625rem' }}>
Metric Health click to filter Metric Health click to filter
@@ -302,15 +455,81 @@ export default function CompliancePage({ onNavigate }) {
)} )}
</div> </div>
<div style={{ display: 'flex', gap: '0.625rem', flexWrap: 'wrap' }}> <div style={{ display: 'flex', gap: '0.625rem', flexWrap: 'wrap' }}>
{metrics.map(entry => ( {families.map(family => {
<MetricHealthCard const familyIds = family.entries.map(e => e.metric_id);
key={entry.metric_id} const isActive = metricFilter !== null && metricFilter.length === familyIds.length && familyIds.every(id => metricFilter.includes(id));
entry={entry} return (
active={metricFilter === entry.metric_id} <div
onClick={() => setMetricFilter(metricFilter === entry.metric_id ? null : entry.metric_id)} key={family.metricId}
/> onMouseEnter={(e) => {
))} hoveredCardRef.current = e.currentTarget;
if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
hoverTimeoutRef.current = setTimeout(() => setHoveredMetric(family.metricId), 300);
}}
onMouseLeave={() => {
if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
hoverTimeoutRef.current = null;
hoveredCardRef.current = null;
setHoveredMetric(null);
}}
style={{ display: 'flex', flex: '1 1 0', minWidth: '160px' }}
>
<MetricHealthCard
family={family}
active={isActive}
onClick={() => setMetricFilter(isActive ? null : familyIds)}
onInfoClick={(metricId) => setInfoMetric(metricId)}
definitionLookup={METRIC_DEFINITIONS}
/>
</div>
);
})}
</div> </div>
{/* Hover tooltip */}
{hoveredMetric && (() => {
const family = families.find(f => f.metricId === hoveredMetric);
if (!family) return null;
const def = METRIC_DEFINITIONS[hoveredMetric];
const rect = hoveredCardRef.current ? hoveredCardRef.current.getBoundingClientRect() : null;
if (!rect) return null;
const tooltipTop = Math.min(rect.bottom + 8, window.innerHeight - 180);
const tooltipLeft = Math.max(8, Math.min(rect.left, window.innerWidth - 320));
return (
<div style={{
position: 'fixed',
top: tooltipTop,
left: tooltipLeft,
zIndex: 50,
width: '300px',
background: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
border: '1px solid rgba(20,184,166,0.25)',
borderRadius: '0.5rem',
boxShadow: '0 8px 32px rgba(0,0,0,0.6)',
padding: '0.75rem 0.875rem',
pointerEvents: 'none',
}}>
<div style={{ fontFamily: 'monospace', fontSize: '0.82rem', fontWeight: '700', color: '#E2E8F0', marginBottom: '0.4rem', lineHeight: 1.3 }}>
{def ? def.metric_title : (family.entries[0]?.description || hoveredMetric)}
</div>
{def && def.business_justification && (
<div style={{ fontSize: '0.72rem', color: '#94A3B8', marginBottom: '0.3rem', lineHeight: 1.4 }}>
{def.business_justification}
</div>
)}
{def && def.data_sources_required && (
<div style={{ fontSize: '0.65rem', color: '#475569', fontFamily: 'monospace' }}>
Sources: {def.data_sources_required}
</div>
)}
{!def && family.entries[0]?.description && (
<div style={{ fontSize: '0.72rem', color: '#94A3B8', lineHeight: 1.4 }}>
{family.entries[0].description}
</div>
)}
</div>
);
})()}
</div> </div>
) : lastUpload === null ? ( ) : lastUpload === null ? (
<div style={{ <div style={{
@@ -439,6 +658,128 @@ export default function CompliancePage({ onNavigate }) {
onUploadComplete={() => { setShowUpload(false); refresh(); }} onUploadComplete={() => { setShowUpload(false); refresh(); }}
/> />
)} )}
{/* ── Metric info panel ───────────────────────────────────── */}
{infoMetric && (
<MetricInfoPanel
metricId={infoMetric}
definition={METRIC_DEFINITIONS[infoMetric] || null}
summaryEntries={(families.find(f => f.metricId === infoMetric) || {}).entries || []}
onClose={() => setInfoMetric(null)}
/>
)}
{/* ── Rollback confirmation modal ──────────────────────────── */}
{rollbackConfirm && lastUpload && (
<div style={{
position: 'fixed', inset: 0, zIndex: 60,
background: 'rgba(10, 14, 39, 0.95)',
backdropFilter: 'blur(8px)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
padding: '1rem',
}}>
<div style={{
background: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
border: '1px solid rgba(239,68,68,0.3)',
borderRadius: '0.75rem',
boxShadow: '0 20px 60px rgba(0,0,0,0.7)',
width: '100%', maxWidth: '420px',
padding: '2rem',
}}>
<div style={{ fontFamily: 'monospace', fontSize: '1rem', fontWeight: '700', color: '#EF4444', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '1rem' }}>
Rollback Upload
</div>
<div style={{ fontSize: '0.8rem', color: '#CBD5E1', lineHeight: '1.5', marginBottom: '0.5rem' }}>
This will reverse the most recent upload:
</div>
<div style={{
fontFamily: 'monospace', fontSize: '0.75rem', color: '#94A3B8',
background: 'rgba(15,23,42,0.6)', borderRadius: '0.375rem',
padding: '0.625rem 0.75rem', marginBottom: '1.25rem',
border: '1px solid rgba(239,68,68,0.15)',
}}>
<div><span style={{ color: '#64748B' }}>File:</span> {lastUpload.report_date || 'unknown date'}</div>
<div style={{ marginTop: '0.25rem', fontSize: '0.68rem', color: '#475569' }}>
New items will be deleted, resolved items will be reactivated, and the upload record will be removed.
</div>
</div>
<div style={{ display: 'flex', gap: '0.75rem' }}>
<button
onClick={() => setRollbackConfirm(false)}
style={{
flex: 1, padding: '0.625rem', background: 'transparent',
border: '1px solid rgba(100,116,139,0.4)', borderRadius: '0.375rem',
color: '#64748B', cursor: 'pointer',
fontFamily: 'monospace', fontSize: '0.8rem',
}}
onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(100,116,139,0.8)'}
onMouseLeave={e => e.currentTarget.style.borderColor = 'rgba(100,116,139,0.4)'}>
Cancel
</button>
<button
onClick={handleRollback}
disabled={rollbackLoading}
style={{
flex: 2, padding: '0.625rem',
background: rollbackLoading ? 'rgba(239,68,68,0.05)' : 'rgba(239,68,68,0.1)',
border: '1px solid #EF4444',
borderRadius: '0.375rem',
color: '#EF4444', cursor: rollbackLoading ? 'wait' : 'pointer',
fontFamily: 'monospace', fontSize: '0.8rem',
fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.4rem',
opacity: rollbackLoading ? 0.6 : 1,
}}
onMouseEnter={e => { if (!rollbackLoading) e.currentTarget.style.background = 'rgba(239,68,68,0.18)'; }}
onMouseLeave={e => { if (!rollbackLoading) e.currentTarget.style.background = 'rgba(239,68,68,0.1)'; }}>
{rollbackLoading
? <><Loader style={{ width: '14px', height: '14px', animation: 'spin 1s linear infinite' }} /> Rolling back</>
: <><RotateCcw style={{ width: '14px', height: '14px' }} /> Confirm Rollback</>
}
</button>
</div>
</div>
</div>
)}
{/* ── Rollback result toast ────────────────────────────────── */}
{rollbackResult && (
<div style={{
position: 'fixed', bottom: '1.5rem', right: '1.5rem', zIndex: 70,
background: rollbackResult.error
? 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)'
: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
border: `1px solid ${rollbackResult.error ? 'rgba(239,68,68,0.4)' : 'rgba(16,185,129,0.4)'}`,
borderRadius: '0.5rem',
boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
padding: '0.875rem 1.25rem',
maxWidth: '360px',
fontFamily: 'monospace', fontSize: '0.75rem',
color: rollbackResult.error ? '#F87171' : '#10B981',
cursor: 'pointer',
}}
onClick={() => setRollbackResult(null)}
>
{rollbackResult.error ? (
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<AlertCircle style={{ width: '16px', height: '16px', flexShrink: 0 }} />
{rollbackResult.error}
</div>
) : (
<>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
<RotateCcw style={{ width: '14px', height: '14px' }} />
{rollbackResult.message}
</div>
{rollbackResult.rolled_back && (
<div style={{ fontSize: '0.68rem', color: '#64748B' }}>
{rollbackResult.rolled_back.items_deleted} items deleted, {rollbackResult.rolled_back.items_reactivated} reactivated
</div>
)}
</>
)}
</div>
)}
</div> </div>
); );
} }
@@ -497,3 +838,6 @@ function DeviceRow({ device, selected, onClick }) {
</div> </div>
); );
} }
// Named exports for testing
export { computeWorstStatus, groupByMetricFamily };

View File

@@ -1,15 +1,122 @@
import React, { useState, useRef } from 'react'; import React, { useState, useRef } from 'react';
import { X, CheckCircle, AlertCircle, Loader, FileSpreadsheet } from 'lucide-react'; import { X, CheckCircle, AlertCircle, Loader, FileSpreadsheet, ChevronDown, ChevronRight, ShieldAlert, AlertTriangle, Info, Wrench } from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api'; const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
// phase: idle → uploading → preview → committing → done | error /* ── Drift Findings Group sub-component ─────────────────────────── */
const SEVERITY_CONFIG = {
breaking: { label: 'Breaking', color: '#EF4444', Icon: ShieldAlert },
silent_miss: { label: 'Silent-miss', color: '#F59E0B', Icon: AlertTriangle },
cosmetic: { label: 'Cosmetic', color: '#94A3B8', Icon: Info },
};
function DriftFindingsGroup({ severity, findings }) {
const [expanded, setExpanded] = useState(false);
const { label, color, Icon } = SEVERITY_CONFIG[severity];
const COLLAPSE_THRESHOLD = 5;
const needsCollapse = findings.length > COLLAPSE_THRESHOLD;
const visibleFindings = needsCollapse && !expanded
? findings.slice(0, COLLAPSE_THRESHOLD)
: findings;
const hiddenCount = findings.length - COLLAPSE_THRESHOLD;
return (
<div style={{ marginBottom: '1rem' }}>
{/* Group header */}
<div style={{
display: 'flex', alignItems: 'center', gap: '0.5rem',
marginBottom: '0.5rem',
}}>
<Icon style={{ width: '14px', height: '14px', color, flexShrink: 0 }} />
<span style={{
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
fontSize: '0.75rem', fontWeight: '600', color,
textTransform: 'uppercase', letterSpacing: '0.05em',
}}>
{label}
</span>
<span style={{
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
fontSize: '0.65rem', fontWeight: '700', color,
background: `${color}18`, border: `1px solid ${color}40`,
borderRadius: '0.25rem', padding: '0.1rem 0.4rem',
minWidth: '1.25rem', textAlign: 'center',
}}>
{findings.length}
</span>
</div>
{/* Findings list */}
{visibleFindings.map((f, i) => (
<div key={i} style={{
borderLeft: `4px solid ${color}`,
background: 'rgba(15,23,42,0.6)',
borderRadius: '0 0.375rem 0.375rem 0',
padding: '0.5rem 0.75rem',
marginBottom: '0.375rem',
}}>
<div style={{
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
fontSize: '0.8rem', color: '#E2E8F0', lineHeight: '1.4',
}}>
{f.message}
</div>
<div style={{
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
fontSize: '0.7rem', color: `${color}CC`, marginTop: '0.2rem',
}}>
{f.value}
</div>
</div>
))}
{/* Show more / less toggle */}
{needsCollapse && (
<button
onClick={() => setExpanded(!expanded)}
style={{
background: 'none', border: 'none', cursor: 'pointer',
display: 'flex', alignItems: 'center', gap: '0.25rem',
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
fontSize: '0.7rem', color: '#64748B', padding: '0.25rem 0',
}}
onMouseEnter={e => e.currentTarget.style.color = '#94A3B8'}
onMouseLeave={e => e.currentTarget.style.color = '#64748B'}
>
{expanded
? <><ChevronDown style={{ width: '12px', height: '12px' }} /> Show less</>
: <><ChevronRight style={{ width: '12px', height: '12px' }} /> Show {hiddenCount} more</>
}
</button>
)}
</div>
);
}
// phase: idle → uploading → drift-review (if findings) → preview → committing → done | error
export default function ComplianceUploadModal({ onClose, onUploadComplete }) { export default function ComplianceUploadModal({ onClose, onUploadComplete }) {
const [phase, setPhase] = useState('idle'); const { isAdmin } = useAuth();
const [previewData, setPreviewData] = useState(null); const [phase, setPhase] = useState('idle');
const [error, setError] = useState(null); const [previewData, setPreviewData] = useState(null);
const [dragOver, setDragOver] = useState(false); const [driftReport, setDriftReport] = useState(null);
const fileInputRef = useRef(null); const [reconcileChanges, setReconcileChanges] = useState(null);
const [reconciling, setReconciling] = useState(false);
const [error, setError] = useState(null);
const [dragOver, setDragOver] = useState(false);
const [lastFile, setLastFile] = useState(null);
const [lastSchema, setLastSchema] = useState(null);
const fileInputRef = useRef(null);
/** Check whether a drift report has any findings */
const hasDriftFindings = (drift) => {
if (!drift) return false;
return (
(drift.breaking && drift.breaking.length > 0) ||
(drift.silent_miss && drift.silent_miss.length > 0) ||
(drift.cosmetic && drift.cosmetic.length > 0)
);
};
const handleFile = async (file) => { const handleFile = async (file) => {
if (!file) return; if (!file) return;
@@ -20,6 +127,9 @@ export default function ComplianceUploadModal({ onClose, onUploadComplete }) {
setPhase('uploading'); setPhase('uploading');
setError(null); setError(null);
setDriftReport(null);
setReconcileChanges(null);
setLastFile(file);
try { try {
const formData = new FormData(); const formData = new FormData();
@@ -37,7 +147,20 @@ export default function ComplianceUploadModal({ onClose, onUploadComplete }) {
} }
setPreviewData(data); setPreviewData(data);
setPhase('preview');
// Store schema for reconcile requests
if (data.schema) {
setLastSchema(data.schema);
}
// Drift routing: if drift is non-null and has findings, enter drift-review
// If drift is null (failed) or has no findings, skip to preview
if (data.drift && hasDriftFindings(data.drift)) {
setDriftReport(data.drift);
setPhase('drift-review');
} else {
setPhase('preview');
}
} catch (err) { } catch (err) {
setError(err.message); setError(err.message);
setPhase('error'); setPhase('error');
@@ -72,6 +195,70 @@ export default function ComplianceUploadModal({ onClose, onUploadComplete }) {
} }
}; };
/** Admin-only: reconcile config to fix breaking/silent-miss drift, then re-upload */
const handleReconcile = async () => {
if (!driftReport || reconciling) return;
setReconciling(true);
setError(null);
try {
// Step 1: Call reconcile endpoint
const reconcileRes = await fetch(`${API_BASE}/compliance/reconcile-config`, {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ drift: driftReport, schema: lastSchema }),
});
const reconcileData = await reconcileRes.json();
if (!reconcileRes.ok) throw new Error(reconcileData.error || 'Reconcile failed');
setReconcileChanges(reconcileData.changes);
// Step 2: Re-upload the same file to get a fresh drift check
if (!lastFile) {
setReconciling(false);
return;
}
setPhase('uploading');
const formData = new FormData();
formData.append('file', lastFile);
const previewRes = await fetch(`${API_BASE}/compliance/preview`, {
method: 'POST',
credentials: 'include',
body: formData,
});
const previewData = await previewRes.json();
if (!previewRes.ok) {
throw new Error(previewData.error || 'Re-upload failed after reconcile');
}
setPreviewData(previewData);
setReconciling(false);
// Update schema for any subsequent reconcile
if (previewData.schema) {
setLastSchema(previewData.schema);
}
if (previewData.drift && hasDriftFindings(previewData.drift)) {
setDriftReport(previewData.drift);
setPhase('drift-review');
} else {
setDriftReport(null);
setPhase('preview');
}
} catch (err) {
setError(err.message);
setReconciling(false);
setPhase('error');
}
};
const TEAL = '#14B8A6'; const TEAL = '#14B8A6';
return ( return (
@@ -87,7 +274,10 @@ export default function ComplianceUploadModal({ onClose, onUploadComplete }) {
border: `1px solid ${TEAL}40`, border: `1px solid ${TEAL}40`,
borderRadius: '0.75rem', borderRadius: '0.75rem',
boxShadow: `0 20px 60px rgba(0,0,0,0.7), 0 0 40px ${TEAL}15`, boxShadow: `0 20px 60px rgba(0,0,0,0.7), 0 0 40px ${TEAL}15`,
width: '100%', maxWidth: '480px', width: '100%', maxWidth: phase === 'drift-review' ? '560px' : '480px',
maxHeight: 'calc(100vh - 2rem)',
overflowY: 'auto',
transition: 'max-width 0.3s ease',
padding: '2rem', padding: '2rem',
}}> }}>
{/* Header */} {/* Header */}
@@ -148,6 +338,163 @@ export default function ComplianceUploadModal({ onClose, onUploadComplete }) {
</div> </div>
)} )}
{/* DRIFT-REVIEW — schema drift findings */}
{phase === 'drift-review' && driftReport && (
<>
<div style={{
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
fontSize: '0.8rem', color: '#64748B',
textTransform: 'uppercase', letterSpacing: '0.05em',
marginBottom: '1rem',
}}>
Schema Drift Review
</div>
<div style={{
maxHeight: '320px', overflowY: 'auto',
marginBottom: '1rem',
paddingRight: '0.25rem',
}}>
{driftReport.breaking && driftReport.breaking.length > 0 && (
<DriftFindingsGroup severity="breaking" findings={driftReport.breaking} />
)}
{driftReport.silent_miss && driftReport.silent_miss.length > 0 && (
<DriftFindingsGroup severity="silent_miss" findings={driftReport.silent_miss} />
)}
{driftReport.cosmetic && driftReport.cosmetic.length > 0 && (
<DriftFindingsGroup severity="cosmetic" findings={driftReport.cosmetic} />
)}
</div>
{/* Status message */}
{driftReport.breaking && driftReport.breaking.length > 0 && (
<div style={{
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
fontSize: '0.7rem', color: '#EF4444',
background: 'rgba(239,68,68,0.08)',
border: '1px solid rgba(239,68,68,0.25)',
borderRadius: '0.375rem',
padding: '0.5rem 0.75rem',
marginBottom: '1rem',
lineHeight: '1.4',
}}>
{isAdmin()
? 'Upload blocked — use "Reconcile Config" to auto-fix the parser configuration, or update it manually.'
: 'Upload blocked — an admin must reconcile the parser configuration before this report can be uploaded.'}
</div>
)}
{(!driftReport.breaking || driftReport.breaking.length === 0) &&
driftReport.silent_miss && driftReport.silent_miss.length > 0 && (
<div style={{
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
fontSize: '0.7rem', color: '#F59E0B',
background: 'rgba(245,158,11,0.08)',
border: '1px solid rgba(245,158,11,0.25)',
borderRadius: '0.375rem',
padding: '0.5rem 0.75rem',
marginBottom: '1rem',
lineHeight: '1.4',
}}>
Review warnings before proceeding. Data may be miscategorised or dropped.
{isAdmin() && ' Use "Reconcile Config" to auto-add unknown metrics and sheets.'}
</div>
)}
{/* Reconcile changes summary (shown after a successful reconcile) */}
{reconcileChanges && reconcileChanges.length > 0 && (
<div style={{
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
fontSize: '0.7rem', color: '#10B981',
background: 'rgba(16,185,129,0.08)',
border: '1px solid rgba(16,185,129,0.25)',
borderRadius: '0.375rem',
padding: '0.5rem 0.75rem',
marginBottom: '1rem',
lineHeight: '1.6',
}}>
<div style={{ fontWeight: '600', marginBottom: '0.25rem' }}>
Config reconciled {reconcileChanges.length} change(s) applied:
</div>
{reconcileChanges.map((c, i) => (
<div key={i} style={{ color: '#94A3B8' }}>
{c.action === 'added' ? '+' : ''} {c.detail}
</div>
))}
<div style={{ color: '#10B981', marginTop: '0.25rem' }}>Re-uploading file</div>
</div>
)}
{/* Action buttons */}
<div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
<button onClick={() => { setPhase('idle'); setPreviewData(null); setDriftReport(null); setReconcileChanges(null); setLastFile(null); setLastSchema(null); }}
style={{
flex: 1, minWidth: '80px', padding: '0.625rem', background: 'transparent',
border: '1px solid rgba(100,116,139,0.4)', borderRadius: '0.375rem',
color: '#64748B', cursor: 'pointer',
fontFamily: "'JetBrains Mono', 'Fira Code', monospace", fontSize: '0.8rem',
}}
onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(100,116,139,0.8)'}
onMouseLeave={e => e.currentTarget.style.borderColor = 'rgba(100,116,139,0.4)'}>
Cancel
</button>
{/* Admin reconcile button — shown when there are breaking or silent-miss findings */}
{isAdmin() && ((driftReport.breaking && driftReport.breaking.length > 0) ||
(driftReport.silent_miss && driftReport.silent_miss.length > 0)) && (
<button
onClick={handleReconcile}
disabled={reconciling}
style={{
flex: 2, minWidth: '140px', padding: '0.625rem',
background: reconciling ? 'rgba(245,158,11,0.05)' : 'rgba(245,158,11,0.1)',
border: '1px solid rgba(245,158,11,0.5)',
borderRadius: '0.375rem',
color: '#F59E0B',
cursor: reconciling ? 'wait' : 'pointer',
fontFamily: "'JetBrains Mono', 'Fira Code', monospace", fontSize: '0.8rem',
fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.4rem',
opacity: reconciling ? 0.6 : 1,
}}
onMouseEnter={e => { if (!reconciling) e.currentTarget.style.background = 'rgba(245,158,11,0.18)'; }}
onMouseLeave={e => { if (!reconciling) e.currentTarget.style.background = 'rgba(245,158,11,0.1)'; }}>
{reconciling
? <><Loader style={{ width: '14px', height: '14px', animation: 'spin 1s linear infinite' }} /> Reconciling</>
: <><Wrench style={{ width: '14px', height: '14px' }} /> Reconcile Config</>
}
</button>
)}
<button
onClick={() => { setPhase('preview'); }}
disabled={driftReport.breaking && driftReport.breaking.length > 0}
style={{
flex: 2, padding: '0.625rem',
background: (driftReport.breaking && driftReport.breaking.length > 0)
? 'rgba(100,116,139,0.08)'
: `${TEAL}18`,
border: `1px solid ${(driftReport.breaking && driftReport.breaking.length > 0) ? 'rgba(100,116,139,0.3)' : TEAL}`,
borderRadius: '0.375rem',
color: (driftReport.breaking && driftReport.breaking.length > 0) ? '#475569' : TEAL,
cursor: (driftReport.breaking && driftReport.breaking.length > 0) ? 'not-allowed' : 'pointer',
fontFamily: "'JetBrains Mono', 'Fira Code', monospace", fontSize: '0.8rem',
fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em',
opacity: (driftReport.breaking && driftReport.breaking.length > 0) ? 0.5 : 1,
}}
onMouseEnter={e => {
if (!(driftReport.breaking && driftReport.breaking.length > 0)) {
e.currentTarget.style.background = `${TEAL}28`;
}
}}
onMouseLeave={e => {
if (!(driftReport.breaking && driftReport.breaking.length > 0)) {
e.currentTarget.style.background = `${TEAL}18`;
}
}}>
Continue to Preview
</button>
</div>
</>
)}
{/* PREVIEW — diff summary + confirm */} {/* PREVIEW — diff summary + confirm */}
{phase === 'preview' && previewData && ( {phase === 'preview' && previewData && (
<> <>

View File

@@ -6,11 +6,12 @@
import React, { useState, useEffect, useCallback, useMemo } from 'react'; import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { import {
BookOpen, Search, Upload, RefreshCw, Loader, BookOpen, Search, Upload, RefreshCw, Loader,
AlertCircle, FileText, File, Trash2, X, AlertCircle, FileText, File, Trash2, X, // ⚠️ CONVENTION: FileText and File are imported but unused — remove if not needed
} from 'lucide-react'; } from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext'; import { useAuth } from '../../contexts/AuthContext';
import KnowledgeBaseModal from '../KnowledgeBaseModal'; import KnowledgeBaseModal from '../KnowledgeBaseModal';
import KnowledgeBaseViewer from '../KnowledgeBaseViewer'; import KnowledgeBaseViewer from '../KnowledgeBaseViewer';
import ConfirmModal from '../ConfirmModal'; // ⚠️ CONVENTION: ConfirmModal is imported but never used — either integrate it into handleDelete or remove this import
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api'; const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
const GREEN = '#10B981'; const GREEN = '#10B981';
@@ -216,6 +217,7 @@ export default function KnowledgeBasePage() {
const [activeCategory, setActiveCategory] = useState('All'); const [activeCategory, setActiveCategory] = useState('All');
const [selected, setSelected] = useState(null); const [selected, setSelected] = useState(null);
const [showUpload, setShowUpload] = useState(false); const [showUpload, setShowUpload] = useState(false);
const [pendingConfirm, setPendingConfirm] = useState(null);
// ------------------------------------------------------------------------- // -------------------------------------------------------------------------
// Fetch // Fetch
@@ -241,17 +243,24 @@ export default function KnowledgeBasePage() {
// Delete // Delete
// ------------------------------------------------------------------------- // -------------------------------------------------------------------------
const handleDelete = useCallback(async (article) => { const handleDelete = useCallback(async (article) => {
if (!window.confirm(`Delete "${article.title}"? This cannot be undone.`)) return; setPendingConfirm({
try { title: 'Delete Article',
const res = await fetch(`${API_BASE}/knowledge-base/${article.id}`, { message: `Delete "${article.title}"? This cannot be undone.`,
method: 'DELETE', credentials: 'include', confirmText: 'Delete',
}); onConfirm: async () => {
if (!res.ok) throw new Error('Delete failed'); setPendingConfirm(null);
setArticles(prev => prev.filter(a => a.id !== article.id)); try {
if (selected?.id === article.id) setSelected(null); const res = await fetch(`${API_BASE}/knowledge-base/${article.id}`, {
} catch (err) { method: 'DELETE', credentials: 'include',
alert(`Failed to delete: ${err.message}`); });
} if (!res.ok) throw new Error('Delete failed');
setArticles(prev => prev.filter(a => a.id !== article.id));
if (selected?.id === article.id) setSelected(null);
} catch (err) {
alert(`Failed to delete: ${err.message}`);
}
},
});
}, [selected]); }, [selected]);
// ------------------------------------------------------------------------- // -------------------------------------------------------------------------
@@ -479,6 +488,17 @@ export default function KnowledgeBasePage() {
onUpdate={() => { fetchArticles(); setShowUpload(false); }} onUpdate={() => { fetchArticles(); setShowUpload(false); }}
/> />
)} )}
{/* Confirmation Modal */}
<ConfirmModal
open={!!pendingConfirm}
title={pendingConfirm?.title}
message={pendingConfirm?.message}
confirmText={pendingConfirm?.confirmText}
variant="danger"
onConfirm={pendingConfirm?.onConfirm}
onCancel={() => setPendingConfirm(null)}
/>
</div> </div>
); );
} }

View File

@@ -0,0 +1,161 @@
import React from 'react';
import { X } from 'lucide-react';
const TEAL = '#14B8A6';
const SECTION_FIELDS = [
{ key: 'asset_types', label: 'Asset Types' },
{ key: 'asset_types_in_scope', label: 'Asset Types In Scope' },
{ key: 'application_types_in_scope', label: 'Application Types In Scope' },
{ key: 'environment_in_scope', label: 'Environment In Scope' },
{ key: 'status_in_scope', label: 'Status In Scope' },
{ key: 'instance_types_in_scope', label: 'Instance Types In Scope' },
{ key: 'criticality_levels_in_scope', label: 'Criticality Levels In Scope' },
{ key: 'exclusions', label: 'Exclusions' },
{ key: 'special_conditions', label: 'Special Conditions' },
{ key: 'data_sources_required', label: 'Data Sources Required' },
{ key: 'business_justification', label: 'Business Justification' },
{ key: 'notes', label: 'Notes' },
];
export default function MetricInfoPanel({ metricId, definition, summaryEntries, onClose }) {
const handleBackdropClick = (e) => {
if (e.target === e.currentTarget) {
onClose();
}
};
const title = definition
? definition.metric_title
: (summaryEntries && summaryEntries.length > 0 ? summaryEntries[0].description : metricId);
return (
<div
onClick={handleBackdropClick}
style={{
position: 'fixed',
inset: 0,
zIndex: 60,
background: 'rgba(10, 14, 39, 0.92)',
backdropFilter: 'blur(8px)',
display: 'flex',
alignItems: 'flex-start',
justifyContent: 'flex-end',
padding: '0',
}}
>
<div style={{
width: '100%',
maxWidth: '480px',
height: '100vh',
overflowY: 'auto',
background: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
borderLeft: `1px solid ${TEAL}30`,
boxShadow: '0 0 40px rgba(0,0,0,0.7)',
padding: '1.75rem',
position: 'relative',
}}>
{/* Close button */}
<button
onClick={onClose}
style={{
position: 'absolute',
top: '1rem',
right: '1rem',
background: 'none',
border: '1px solid rgba(100,116,139,0.3)',
borderRadius: '0.25rem',
padding: '0.3rem',
cursor: 'pointer',
color: '#64748B',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'all 0.15s',
}}
onMouseEnter={e => { e.currentTarget.style.color = '#E2E8F0'; e.currentTarget.style.borderColor = 'rgba(100,116,139,0.6)'; }}
onMouseLeave={e => { e.currentTarget.style.color = '#64748B'; e.currentTarget.style.borderColor = 'rgba(100,116,139,0.3)'; }}
>
<X style={{ width: '16px', height: '16px' }} />
</button>
{/* Metric ID */}
<div style={{
fontFamily: 'monospace',
fontSize: '0.72rem',
color: TEAL,
textTransform: 'uppercase',
letterSpacing: '0.1em',
marginBottom: '0.375rem',
}}>
Metric {metricId}
</div>
{/* Title */}
<h3 style={{
fontFamily: 'monospace',
fontSize: '1.05rem',
fontWeight: '700',
color: '#E2E8F0',
margin: '0 0 1.5rem 0',
lineHeight: 1.4,
paddingRight: '2rem',
}}>
{title}
</h3>
{!definition ? (
<div style={{
padding: '1rem',
background: 'rgba(15,23,42,0.6)',
border: '1px solid rgba(100,116,139,0.2)',
borderRadius: '0.375rem',
color: '#94A3B8',
fontSize: '0.8rem',
fontFamily: 'monospace',
}}>
No detailed definition available.
{summaryEntries && summaryEntries.length > 0 && (
<div style={{ marginTop: '0.75rem', color: '#CBD5E1', fontSize: '0.78rem' }}>
{summaryEntries[0].description}
</div>
)}
</div>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
{SECTION_FIELDS.map(({ key, label }) => (
<div key={key}>
<div style={{
fontFamily: 'monospace',
fontSize: '0.6rem',
fontWeight: '600',
color: '#475569',
textTransform: 'uppercase',
letterSpacing: '0.1em',
marginBottom: '0.3rem',
}}>
{label}
</div>
<div style={{
fontSize: '0.8rem',
color: definition[key] ? '#CBD5E1' : '#475569',
fontFamily: 'monospace',
lineHeight: 1.5,
padding: '0.4rem 0.6rem',
background: 'rgba(15,23,42,0.4)',
borderRadius: '0.25rem',
border: '1px solid rgba(255,255,255,0.04)',
}}>
{definition[key] || '—'}
</div>
</div>
))}
</div>
)}
</div>
</div>
);
}
// Exported for testing — the list of field keys rendered by the panel
MetricInfoPanel.RENDERED_FIELD_KEYS = SECTION_FIELDS.map(f => f.key);

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,118 @@
import fc from 'fast-check';
import { computeWorstStatus, groupByMetricFamily } from '../CompliancePage';
// ---------------------------------------------------------------------------
// Generators
// ---------------------------------------------------------------------------
const VALID_STATUSES = [
'Below 15% of Target',
'Within 15% of Target',
'Meets/Exceeds Target',
];
const statusArb = fc.constantFrom(...VALID_STATUSES);
const summaryEntryArb = fc.record({
metric_id: fc.stringMatching(/^[1-9]\d{0,2}\.\d{1,2}\.\d{1,2}$/),
team: fc.constantFrom('STEAM', 'ACCESS-ENG'),
priority: fc.constantFrom('High', 'Medium', 'Low'),
non_compliant: fc.nat({ max: 500 }),
compliant: fc.nat({ max: 500 }),
total: fc.nat({ max: 1000 }),
compliance_pct: fc.double({ min: 0, max: 1, noNaN: true }),
target: fc.double({ min: 0, max: 1, noNaN: true }),
status: statusArb,
description: fc.string({ minLength: 1, maxLength: 50 }),
category: fc.constantFrom(
'Vulnerability Management',
'Access & MFA',
'Logging & Monitoring',
'End-of-Life OS',
),
});
// ---------------------------------------------------------------------------
// Property 1: Grouping invariant — no entries lost or misplaced
// Validates: Requirements 1.1, 1.2
// ---------------------------------------------------------------------------
describe('Property 1: Grouping invariant — no entries lost or misplaced', () => {
test('every entry appears in exactly one group, groups share metric_id, totals match', () => {
fc.assert(
fc.property(
fc.array(summaryEntryArb, { minLength: 0, maxLength: 30 }),
fc.constantFrom('STEAM', 'ACCESS-ENG'),
(entries, team) => {
const groups = groupByMetricFamily(entries, team);
const teamEntries = entries.filter(
(e) => e.team === team && e.metric_id,
);
// (c) total entries across groups equals team-filtered input count
const totalGrouped = groups.reduce(
(sum, g) => sum + g.entries.length,
0,
);
expect(totalGrouped).toBe(teamEntries.length);
// (b) all entries within a group share the same metric_id
for (const group of groups) {
for (const entry of group.entries) {
expect(entry.metric_id).toBe(group.metricId);
}
}
// (a) every team entry appears in exactly one group
const allGroupedEntries = groups.flatMap((g) => g.entries);
for (const entry of teamEntries) {
const occurrences = allGroupedEntries.filter(
(e) => e === entry,
).length;
expect(occurrences).toBe(1);
}
},
),
{ numRuns: 100 },
);
});
});
// ---------------------------------------------------------------------------
// Property 2: Worst-status computation follows severity ordering
// Validates: Requirements 1.6, 3.1
// ---------------------------------------------------------------------------
const STATUS_SEVERITY = {
'Below 15% of Target': 0,
'Within 15% of Target': 1,
'Meets/Exceeds Target': 2,
};
describe('Property 2: Worst-status computation follows severity ordering', () => {
test('result is the status with the lowest severity rank present', () => {
fc.assert(
fc.property(
fc.array(statusArb, { minLength: 1, maxLength: 20 }),
(statuses) => {
const result = computeWorstStatus(statuses);
// Result must be a valid status
expect(VALID_STATUSES).toContain(result);
// Result must be the minimum severity present
const minSeverity = Math.min(
...statuses.map((s) => STATUS_SEVERITY[s]),
);
expect(STATUS_SEVERITY[result]).toBe(minSeverity);
// If array contains "Below 15% of Target", result must be that
if (statuses.includes('Below 15% of Target')) {
expect(result).toBe('Below 15% of Target');
}
},
),
{ numRuns: 100 },
);
});
});

View File

@@ -0,0 +1,211 @@
import fc from 'fast-check';
import MetricInfoPanel from '../MetricInfoPanel';
// ---------------------------------------------------------------------------
// Generators
// ---------------------------------------------------------------------------
const DEFINITION_KEYS = [
'metric_id',
'metric_title',
'asset_types',
'asset_types_in_scope',
'application_types_in_scope',
'environment_in_scope',
'status_in_scope',
'instance_types_in_scope',
'criticality_levels_in_scope',
'exclusions',
'special_conditions',
'data_sources_required',
'business_justification',
'notes',
];
const metricDefinitionArb = fc.record({
metric_id: fc.stringMatching(/^[1-9]\d{0,2}\.\d{1,2}\.\d{1,2}$/),
metric_title: fc.string({ minLength: 1, maxLength: 80 }),
asset_types: fc.string({ minLength: 0, maxLength: 60 }),
asset_types_in_scope: fc.string({ minLength: 0, maxLength: 60 }),
application_types_in_scope: fc.string({ minLength: 0, maxLength: 60 }),
environment_in_scope: fc.string({ minLength: 0, maxLength: 60 }),
status_in_scope: fc.string({ minLength: 0, maxLength: 60 }),
instance_types_in_scope: fc.string({ minLength: 0, maxLength: 60 }),
criticality_levels_in_scope: fc.string({ minLength: 0, maxLength: 60 }),
exclusions: fc.string({ minLength: 0, maxLength: 60 }),
special_conditions: fc.string({ minLength: 0, maxLength: 60 }),
data_sources_required: fc.string({ minLength: 0, maxLength: 60 }),
business_justification: fc.string({ minLength: 0, maxLength: 60 }),
notes: fc.string({ minLength: 0, maxLength: 60 }),
});
/**
* Generate an array of metric definitions with unique metric_id values.
*/
const uniqueDefinitionsArb = fc
.array(metricDefinitionArb, { minLength: 1, maxLength: 20 })
.map((defs) => {
const seen = new Set();
return defs.filter((d) => {
if (seen.has(d.metric_id)) return false;
seen.add(d.metric_id);
return true;
});
})
.filter((arr) => arr.length > 0);
// ---------------------------------------------------------------------------
// Property 4: Definition lookup returns correct entry or null
// Validates: Requirements 4.2, 4.6
// ---------------------------------------------------------------------------
describe('Property 4: Definition lookup returns correct entry or null', () => {
test('lookup hits for IDs in the array and misses for IDs not in the array', () => {
fc.assert(
fc.property(
uniqueDefinitionsArb,
fc.stringMatching(/^[1-9]\d{0,2}\.\d{1,2}\.\d{1,2}$/),
(definitions, queryId) => {
// Build lookup map
const lookup = {};
for (const def of definitions) {
lookup[def.metric_id] = def;
}
// Query with IDs from the array — expect hit
for (const def of definitions) {
expect(lookup[def.metric_id]).toBe(def);
}
// Query with a random ID — expect hit if present, miss if not
const existsInArray = definitions.some(
(d) => d.metric_id === queryId,
);
if (existsInArray) {
expect(lookup[queryId]).toBeDefined();
} else {
expect(lookup[queryId]).toBeUndefined();
}
},
),
{ numRuns: 100 },
);
});
});
// ---------------------------------------------------------------------------
// Property 5: Detail panel renders all required definition fields
// Validates: Requirements 5.3
// ---------------------------------------------------------------------------
describe('Property 5: Detail panel renders all required definition fields', () => {
test('RENDERED_FIELD_KEYS includes all required definition keys (excluding metric_id and metric_title)', () => {
const renderedKeys = MetricInfoPanel.RENDERED_FIELD_KEYS;
// Keys that are rendered separately (as title/header), not in the section list
const separatelyRendered = ['metric_id', 'metric_title'];
const requiredSectionKeys = DEFINITION_KEYS.filter(
(k) => !separatelyRendered.includes(k),
);
fc.assert(
fc.property(metricDefinitionArb, (definition) => {
// Verify every required section key is in the rendered set
for (const key of requiredSectionKeys) {
expect(renderedKeys).toContain(key);
}
// Verify the definition object has all keys that will be rendered
for (const key of renderedKeys) {
expect(definition).toHaveProperty(key);
}
}),
{ numRuns: 100 },
);
});
});
// ---------------------------------------------------------------------------
// Property 6: Definitions schema validation — all entries have required fields
// Validates: Requirements 6.2, 8.3, 8.4
// ---------------------------------------------------------------------------
describe('Property 6: Definitions schema validation — all entries have required fields', () => {
test('every entry has all 14 keys, metric_id is non-empty string, optional fields are strings', () => {
fc.assert(
fc.property(
fc.array(metricDefinitionArb, { minLength: 1, maxLength: 15 }),
(definitions) => {
for (const def of definitions) {
// All 14 keys present
for (const key of DEFINITION_KEYS) {
expect(def).toHaveProperty(key);
}
// metric_id is a non-empty string
expect(typeof def.metric_id).toBe('string');
expect(def.metric_id.length).toBeGreaterThan(0);
// Optional fields are strings (not null/undefined)
const optionalFields = [
'exclusions',
'special_conditions',
'notes',
];
for (const field of optionalFields) {
expect(typeof def[field]).toBe('string');
expect(def[field]).not.toBeNull();
expect(def[field]).not.toBeUndefined();
}
}
},
),
{ numRuns: 100 },
);
});
});
// ---------------------------------------------------------------------------
// Property 7: Lookup map construction preserves all definitions
// Validates: Requirements 6.4
// ---------------------------------------------------------------------------
describe('Property 7: Lookup map construction preserves all definitions', () => {
test('map size equals array length and every definition is retrievable', () => {
fc.assert(
fc.property(uniqueDefinitionsArb, (definitions) => {
// Build lookup map
const lookup = {};
for (const def of definitions) {
lookup[def.metric_id] = def;
}
// Map size equals array length
expect(Object.keys(lookup).length).toBe(definitions.length);
// Every definition is retrievable by its metric_id
for (const def of definitions) {
expect(lookup[def.metric_id]).toBe(def);
}
}),
{ numRuns: 100 },
);
});
});
// ---------------------------------------------------------------------------
// Property 8: JSON round-trip preserves metric definition data
// Validates: Requirements 8.1, 8.2
// ---------------------------------------------------------------------------
describe('Property 8: JSON round-trip preserves metric definition data', () => {
test('JSON.parse(JSON.stringify(definition)) produces a deeply equal object', () => {
fc.assert(
fc.property(metricDefinitionArb, (definition) => {
const roundTripped = JSON.parse(JSON.stringify(definition));
expect(roundTripped).toEqual(definition);
}),
{ numRuns: 100 },
);
});
});

File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More