13 Commits

Author SHA1 Message Date
0d48c109b3 refactor(home): remove Knowledge Base panel from home page
The dedicated Knowledge Base page now provides the full library
experience. Remove the KB sidebar panel, viewer inline embed,
upload modal, and all supporting state/functions from App.js.

Home page layout adjusts from 3-column to 2-column (9+3 grid):
main CVE content expands to col-span-9, right panel unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-02 14:32:36 -06:00
18ad31228e feat(kb): build Knowledge Base page
Replaces the 'coming soon' placeholder with a full library UI.
No backend changes needed — all existing endpoints and components
(KnowledgeBaseViewer, KnowledgeBaseModal) are reused.

Features:
  - Article card grid (responsive auto-fill, min 240px per card)
  - Category filter tabs (Procedure, Guide, Policy, Reference, General)
    with live article counts; tabs only shown for populated categories
  - Search bar — filters by title and description, client-side
  - Inline viewer — clicking a card opens KnowledgeBaseViewer below
    the grid; clicking again or pressing the close button collapses it
  - Upload modal (editor/admin only) refreshes the grid on success
  - Delete button on each card (editor/admin only) with confirmation
  - Graceful empty states for no articles and no search results
  - Loading and error states with retry

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-02 13:55:51 -06:00
3dcb91a1fc chore(migrations): add migration script for ivanti_counts_history table
Standalone migration script for consistency with other files in
backend/migrations/. The table is also created automatically at server
startup via CREATE TABLE IF NOT EXISTS in initTables() so no manual
step is required on the dev server — just restart the backend after
pulling.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-02 10:17:33 -06:00
5102a2c5b4 docs: update 'Reporting page' references to 'Vulnerability Triage'
Updated all human-readable references in documentation to reflect the
page rename. File path citations in security-audit-2026-04-01.md
(ReportingPage.js:51) are left unchanged as the file itself was not
renamed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-02 10:15:51 -06:00
a0a8979c63 fix(triage): fix missed setCurrentPage('reporting') in Archer ticket filter button
One reference to the old page ID was missed in the previous rename commit.
The Archer ticket EXC filter button in App.js was still navigating to
'reporting', which would silently fail to navigate. Updated to 'triage'.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-02 10:13:57 -06:00
15ad207464 feat(triage): Ivanti findings trend chart + rename Reporting to Vulnerability Triage
Add time-based open/closed tracking for Ivanti findings (Tier 2 from
the reporting recommendations doc) and rename the Reporting page to
Vulnerability Triage to better reflect its purpose.

Backend — ivantiFindings.js:
  - Create ivanti_counts_history table (appended on every sync, never
    overwritten — Option B from design discussion)
  - INSERT snapshot after each successful syncClosedCount() call
  - GET /api/ivanti/findings/counts/history endpoint — returns last
    snapshot per calendar day using ROW_NUMBER window function, so
    multiple daily syncs collapse to the end-of-day value

Frontend:
  - New IvantiCountsChart component: collapsible dual-line chart
    (open vs closed) with dark tooltip, delta label showing change
    since previous day, and graceful no-data states
  - Chart placed between the donut metrics panel and the findings table
    on the Vulnerability Triage page
  - Renamed page: 'reporting' → 'triage' (page ID, nav label, component
    export, all cross-file references)
  - ComplianceDetailPanel "View in Reporting" link updated to "View in
    Triage" and navigates to the correct page ID

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-02 10:12:04 -06:00
b111273e5a feat(compliance): add time-based trend charts to Compliance page
Add 6 Recharts charts in a collapsible Historical Trends panel on the
Compliance page, covering all Tier-1 recommendations from the reporting
design doc.

Backend — 5 new API endpoints:
  - GET /api/compliance/trends        — active totals + per-team counts per upload
  - GET /api/compliance/mttr          — mean days to resolution per team
  - GET /api/compliance/top-recurring — most persistent active findings by seen_count
  - GET /api/compliance/category-trend — category breakdown per upload (future use)
  - GET /api/archer-tickets/status-trend — ticket pipeline by creation date + status

Frontend — new ComplianceChartsPanel component:
  - Active Findings Over Time (multi-line: total + per-team dashed)
  - Change per Report Cycle (stacked bar: new/recurring + resolved)
  - Team Compliance Health (multi-line per team)
  - Mean Time to Resolution (horizontal bar per team)
  - Most Persistent Findings (horizontal bar top-10 by seen_count)
  - Archer Exception Pipeline (stacked bar by date + status)

All charts degrade gracefully to a no-data placeholder until uploads
accumulate. Panel is collapsible to stay out of the way when not needed.
Adds recharts dependency to frontend.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-02 09:49:32 -06:00
a7c74f625f docs: clarify Python deps use apt packages not pip/venv
Dev server uses apt-managed python3-pandas and python3-openpyxl.
Production fix is the same. Updates README install step and rewrites
python-venv-setup.md to reflect the real setup with venv as fallback.
2026-04-01 13:07:27 -06:00
8aef51b59a fix(compliance): use PYTHON_BIN env var for venv support
Modern Debian/Ubuntu enforces PEP 668 which blocks system-wide pip
installs. The backend now reads PYTHON_BIN from the environment
(defaulting to 'python3') so each server can point to a venv.
Updates README with venv setup instructions.
2026-04-01 12:47:50 -06:00
d0087ba9b7 docs: remove all weekly reports references
Weekly report feature was removed previously. Cleans up all remaining
references from README, architecture diagram, and deletes
WEEKLY_REPORT_FEATURE.md entirely.
2026-04-01 12:42:56 -06:00
3d6062f3fa docs: refresh README and add security posture workflow diagrams
- Rename project to STEAM Security Dashboard throughout README
- Document Ivanti Queue feature (FP/Archer/CARD staging, per-user persistence)
- Document AEO Compliance page (upload flow, metric health cards, device
  table, detail panel, View in Reporting link for 2.3.x metrics)
- Add all missing migrations to install instructions (queue, CARD,
  ip_address, compliance tables)
- Add Ivanti Queue and Compliance endpoint tables to API reference
- Update architecture file tree with new routes, migrations, scripts,
  and frontend components
- Add compliance DB tables to schema section
- Document parse_compliance_xlsx.py in scripts section
- Add security-posture-workflow-diagrams.md (Mermaid, VSCode/GitHub)
- Add security-posture-workflow-lucidchart.md (Lucidchart import format)
2026-04-01 10:46:39 -06:00
7af44608d0 feat(compliance): add 'View in Reporting' link for 2.3.x Ivanti metrics
In ComplianceDetailPanel, active metrics with a metric_id starting with
'2.3' and an Ivanti_Vulnerability_ID in extra_json now surface the ID
prominently alongside a 'View in Reporting →' button. Clicking navigates
directly to the Reporting page. onNavigate prop threaded through
App → CompliancePage → ComplianceDetailPanel → MetricRow.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-01 09:20:30 -06:00
3bb86e8369 fix(compliance): remove unused vars flagged by eslint build 2026-03-31 15:20:28 -06:00
22 changed files with 2547 additions and 558 deletions

361
README.md
View File

@@ -1,6 +1,6 @@
# CVE Dashboard
# STEAM Security Dashboard
A self-hosted vulnerability management dashboard for tracking CVE remediation status, managing vendor documentation, monitoring Ivanti host findings, and overseeing False Positive (FP) workflows.
A self-hosted vulnerability management dashboard for the NTS-AEO-STEAM and NTS-AEO-ACCESS-ENG business units. Centralises CVE tracking, Ivanti host finding triage, AEO compliance posture, FP and Archer exception workflows, and internal documentation in a single interface.
---
@@ -14,13 +14,15 @@ A self-hosted vulnerability management dashboard for tracking CVE remediation st
- [Running the Application](#running-the-application)
- [Features](#features)
- [Authentication and User Roles](#authentication-and-user-roles)
- [Home Dashboard — CVE Management](#home-dashboard--cve-management)
- [Home — CVE Management](#home--cve-management)
- [Reporting — Host Findings](#reporting--host-findings)
- [Ivanti Queue](#ivanti-queue)
- [Compliance — AEO Posture](#compliance--aeo-posture)
- [Knowledge Base](#knowledge-base)
- [Exports](#exports)
- [Archer Risk Acceptance Tickets](#archer-risk-acceptance-tickets)
- [Weekly Reports](#weekly-reports)
- [User Management](#user-management-admin)
- [Audit Log](#audit-log-admin)
- [User Management (Admin)](#user-management-admin)
- [Audit Log (Admin)](#audit-log-admin)
- [Scripts](#scripts)
- [API Reference](#api-reference)
- [Architecture](#architecture)
@@ -32,16 +34,17 @@ A self-hosted vulnerability management dashboard for tracking CVE remediation st
## Overview
The CVE Dashboard answers a common problem in vulnerability management: tracking which CVEs have been addressed, whether supporting vendor documentation exists, and where each finding is in the remediation or exception workflow.
The STEAM Security Dashboard answers a common problem in vulnerability management: tracking which CVEs have been addressed, whether supporting vendor documentation exists, where each finding is in the remediation or exception workflow, and how the team's overall AEO compliance posture is trending week over week.
The application provides:
- A searchable, filterable CVE list with per-vendor tracking and document storage
- NVD API integration to auto-populate CVE metadata
- **Ivanti/RiskSense integration** to sync open and closed host findings with live FP workflow tracking
- **Reporting page** with donut charts, advanced per-column filtering, inline editing, and CSV/XLSX export
- **Ivanti/RiskSense integration** sync open host findings with live FP workflow tracking
- **Reporting page** with donut charts, advanced per-column filtering, inline editing, Ivanti Queue, and CSV/XLSX export
- **Ivanti Queue** — personal staging list for batch-processing FP, Archer, and CARD workflows
- **AEO Compliance page** — weekly xlsx upload, diff preview, per-team metric health cards, device-level violation tracking with notes history
- Archer risk acceptance ticket tracking (EXC numbers) linked to CVE/vendor pairs
- Weekly vulnerability report upload and processing
- A knowledge base for internal documentation and policies
- Role-based access control with a full audit trail
@@ -56,8 +59,8 @@ The application provides:
| File uploads | Multer 2 |
| Auth | bcryptjs, cookie-based sessions |
| Frontend | React 19, lucide-react, xlsx |
| Report processing | Python 3 (stdlib only — no extra packages required for notes import) |
| Weekly report processing | Python 3, pandas, openpyxl |
| Compliance xlsx parsing | Python 3, pandas, openpyxl |
| Bulk notes import | Python 3 (stdlib only) |
---
@@ -65,7 +68,7 @@ The application provides:
- Node.js 18 or later
- npm
- Python 3 (required for weekly report processing and bulk notes import)
- Python 3 with `python3-pandas` and `python3-openpyxl` apt packages (required for compliance xlsx parsing)
---
@@ -92,14 +95,15 @@ cd frontend
npm install
```
### 4. Install Python dependencies (for weekly report processing)
### 4. Install Python dependencies
Install via apt — this is the correct approach on Ubuntu/Debian and mirrors the dev server setup:
```bash
cd backend/scripts
pip install -r requirements.txt
apt install -y python3-pandas python3-openpyxl
```
Required packages: `pandas>=2.0.0`, `openpyxl>=3.0.0`
> 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.
@@ -120,18 +124,28 @@ This creates `backend/cve_database.db` and a default admin account:
### 6. Run database migrations
After the initial setup, apply feature migrations in order:
Apply all feature migrations in order:
```bash
cd backend
node migrations/add_weekly_reports_table.js
node migrations/add_knowledge_base_table.js
node migrations/add_archer_tickets_table.js
node migrations/add_ivanti_sync_table.js
node migrations/add_ivanti_findings_tables.js
node migrations/add_ivanti_todo_queue_table.js
node migrations/add_card_workflow_type.js
node migrations/add_todo_queue_ip_address.js
node migrations/add_compliance_tables.js
```
The Ivanti findings tables migration also handles adding the `fp_workflow_counts_json` and `fp_id_counts_json` columns idempotently on each server start — no manual re-run is needed after the first run.
### 7. Build the frontend
```bash
cd frontend
npm run build
```
Or use `npm start` for the development server (see [Running the Application](#running-the-application)).
---
@@ -195,7 +209,7 @@ The start script saves PIDs to `backend.pid` and `frontend.pid`. Logs are writte
cd backend
node server.js
# Terminal 2 — frontend
# Terminal 2 — frontend (development server)
cd frontend
npm start
```
@@ -217,17 +231,17 @@ All routes require authentication. Three roles are supported:
| Role | Permissions |
|---|---|
| `viewer` | Read-only: CVEs, documents, findings, reports, knowledge base, Archer tickets |
| `editor` | All viewer permissions plus: create/update CVEs, upload documents, sync Ivanti findings, save notes and overrides, manage knowledge base articles, manage Archer tickets, upload weekly reports |
| `viewer` | Read-only: CVEs, documents, findings, reports, knowledge base, Archer tickets, compliance data |
| `editor` | All viewer permissions plus: create/update CVEs, upload documents, sync Ivanti findings, save notes and overrides, manage knowledge base, manage Archer tickets, upload compliance reports, manage Ivanti Queue |
| `admin` | All editor permissions plus: delete documents, delete reports, manage users, view audit logs |
Sessions expire after 24 hours. Session tokens are stored in `httpOnly` cookies.
---
### Home Dashboard — CVE Management
### Home — CVE Management
The home page is the primary CVE workflow tool.
The home page is the primary CVE research and tracking tool.
**CVE List**
- Search CVEs by keyword (matches CVE ID, vendor, description)
@@ -257,7 +271,7 @@ The home page is the primary CVE workflow tool.
**Archer Ticket Quick Navigation**
- Archer EXC numbers shown on CVE rows
- Clicking an EXC badge navigates to the Reporting page with that EXC number pre-filtered
- Clicking an EXC badge navigates to the Reporting page pre-filtered to findings with that EXC number
**Calendar Widget**
- Shows current month with red dot indicators on dates where Ivanti findings are due
@@ -271,93 +285,128 @@ The Reporting page is the core operational view for remediation tracking. It int
#### Syncing Data
Click **Sync** in the top-right of the page to pull the latest findings from Ivanti. The sync:
1. Fetches all open host findings matching your BU filters and severity range (8.59.9)
Click **Sync** (top right) to pull the latest findings from Ivanti. The sync:
1. Fetches all open host findings matching your BU filters and severity range (8.59.9 VRR)
2. Fetches the closed finding count separately
3. Sweeps all closed findings to capture FP workflow states (including Approved FPs that are now closed)
3. Sweeps closed findings to capture FP workflow states (including Approved FPs now closed)
4. Stores everything in the local SQLite cache
Findings are auto-synced on a 24-hour schedule. The last sync timestamp and status are shown at the top of the page.
Findings are also auto-synced on a 24-hour schedule. The last sync timestamp is shown at the top of the page.
> **Note:** The Reporting page will show "No data — click Sync to load" until the first sync completes. `IVANTI_API_KEY` must be set in `backend/.env`.
> `IVANTI_API_KEY` must be set in `backend/.env` for sync to work.
#### Metric Charts
Four donut charts are shown at the top of the page.
| Chart | What it shows |
|---|---|
| **Open vs Closed** | Total open vs closed host findings. Counts come from the Ivanti API directly (not from the local cache) so closed findings are always reflected even though they aren't stored locally. |
| **Action Coverage** | Findings broken down by action taken: **FP Request** (has an FP# workflow ticket) · **Archer Exception** (has an EXC- number in notes) · **Pending** (no action yet). Click any segment to filter the table. |
| **FP Finding Status** | How many *findings* fall into each FP workflow state (Actionable, Requested, Reworked, Approved, Rejected, Expired, Unknown). Includes closed findings — an Approved FP closes the finding and would be invisible otherwise. |
| **FP Workflow Status** | How many *unique FP# ticket IDs* are in each state. One FP# ticket can cover many findings; this chart counts tickets, not findings. |
| **Open vs Closed** | Total open vs closed host findings direct from the Ivanti API |
| **Action Coverage** | Findings by action taken: FP Request · Archer Exception · Pending. Click a segment to filter the table. |
| **FP Finding Status** | How many *findings* are in each FP workflow state (Actionable, Requested, Reworked, Approved, Rejected, Expired) |
| **FP Workflow Status** | How many *unique FP# ticket IDs* are in each state — one ticket can cover many findings |
#### Findings Table
The table shows all open findings from the cache. Each row represents a single host finding.
**Columns**
Each row represents a single Ivanti host finding.
| Column | Description |
|---|---|
| Finding ID | Ivanti finding identifier |
| Severity | Numerical VRR score with group label (CRITICAL / HIGH) |
| Title | Vulnerability title |
| CVEs | Associated CVE IDs — up to 2 shown, remainder as "+N" |
| Host | Hostname — inline editable (see Overrides below) |
| CVEs | Associated CVE IDs — up to 2 shown, remainder as "+N" badge |
| Host | Hostname — inline editable |
| IP Address | Host IP address |
| DNS | DNS/FQDN — inline editable |
| Due Date | Remediation due date; red if overdue, amber if within 30 days |
| SLA | SLA status: OVERDUE / AT_RISK / WITHIN_SLA |
| BU | Business unit; STEAM rows are highlighted |
| Workflow | FP# ticket ID and state badge — color-coded by state |
| BU | Business unit |
| Workflow | FP# ticket ID and state badge — colour-coded by urgency |
| Last Found | Last detection date from Ivanti |
| Notes | Free-form notes field — inline editable, persists across syncs |
| Notes | Free-form notes — inline editable, persists across syncs |
**Column Management**
**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.
Click the **Columns** button to open the column manager:
- Toggle column visibility with the eye icon
- Drag rows to reorder columns
- Column order and visibility persist to `localStorage`
**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.
**Sorting**
**Column management:** Toggle visibility and drag to reorder via the **Columns** button. Order and visibility persist to `localStorage`.
Click any sortable column header to sort ascending; click again to sort descending.
**Export:** Click **Export** to download the current filtered view as CSV or XLSX.
**Filtering**
---
Click the filter icon (⊙) on any filterable column header to open a filter dropdown:
- Search box to narrow options
- Multi-select checkboxes — all values are selected by default
- **`— empty —`** option at the top: selects findings where the cell has no value (e.g., filter the Workflow column to `— empty —` to see all findings with no FP ticket assigned)
- "Select All" and "Clear" bulk buttons
- Multiple column filters work as AND (all must match)
- Active filter badge and "Clear Filters" button appear when filters are applied
### Ivanti Queue
The **Action Coverage** donut chart also acts as a filter — click a segment to filter the table to that action type.
A personal staging list for batch-processing FP, Archer, and CARD workflows without context-switching into Ivanti mid-review.
**Inline Editing**
**Adding items:** Check the checkbox at the far left of any finding row. A popover appears:
- For **FP** and **Archer** items: enter the Vendor / Platform (e.g., "Juniper MX", "Cisco IOS-XE")
- For **CARD** items: no vendor entry required — the IP address is captured automatically
- Select the workflow type: **FP**, **Archer**, or **CARD**
- Click **Add to Queue** — the row checkbox turns solid blue
- **Hostname / DNS**: Click a cell to edit. An amber dot (●) indicates the value has been overridden from what Ivanti reported. Use the revert button (↻) to restore the original value. Changes save on blur or Enter; Escape cancels.
- **Notes**: Click to edit. Saves on blur. Maximum 255 characters. Notes survive cache refreshes.
**Queue panel:** Click the **Queue** button (top right of Reporting page) to open the slide-out panel:
- **CARD** items appear at the top in their own section with the IP address displayed
- **FP and Archer** items are grouped alphabetically by vendor below
- Badges show workflow type: amber = FP, sky = Archer, green = CARD
**Exporting**
**Working the queue:**
- 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)**
- **Clear Completed** removes all marked-complete items at once
Click the **Export** button to download the current view (filtered, sorted, visible columns only):
- **CSV** — UTF-8 with BOM for Excel compatibility
- **Excel (.xlsx)** — Auto-fitted column widths
Queue items are stored in the database, are **personal to your login**, and persist across sessions and page refreshes.
Filename format: `findings-export-YYYY-MM-DD.csv` / `.xlsx`
---
### Compliance — AEO Posture
The Compliance page tracks NTS-AEO team posture against the AEO compliance framework using weekly xlsx reports exported from the NTS_AEO reporting system.
#### Upload Workflow
Editors and admins can upload a new compliance report via the **Upload Report** button:
1. Drop or browse for the `NTS_AEO_YYYY_MM_DD.xlsx` file
2. The report is parsed server-side and a **diff preview** is shown — new violations, resolved items, and recurring items since the last upload
3. Click **Confirm Upload** to commit. The upload is recorded and the device table updates immediately.
The report date is extracted automatically from the filename.
#### Metric Health Cards
Each AEO metric (e.g., `2.3.4i`, `5.2.4`) is shown as a health card displaying:
- Compliance percentage vs target
- Status: Meets/Exceeds Target · Within 15% of Target · Below 15% of Target
Click a card to filter the device table to only devices failing that metric.
#### Device Table
Shows all devices currently failing one or more metrics (Active tab) or previously resolved (Resolved tab). Columns: Hostname, IP Address, Type, Failing Metrics, Times Seen. Click a row to open the detail panel.
#### Detail Panel
A slide-out panel for a selected device showing:
- **Failing Metrics** — each metric with surfaced extra fields (CVEs, SLA status, due date, OS, EoL, Splunk last seen, MFA software)
- For **2.3.x vulnerability metrics**: the `Ivanti_Vulnerability_ID` is displayed with a **View in Reporting →** button that navigates directly to the Reporting page
- **Resolved Metrics** — previously failing metrics now back in compliance
- **History** — how many times the device has appeared on the report and since when
- **Notes** — timestamped notes per metric with a multi-metric selector if multiple metrics are failing
Notes persist across uploads and are keyed to the device hostname and metric ID.
#### Teams
Only **STEAM** and **ACCESS-ENG** teams are tracked. The team selector at the top of the page switches context between them.
---
### Knowledge Base
A document library for internal reference material such as policies, runbooks, and vendor advisories.
A document library for internal reference material policies, runbooks, vendor advisories, and process guides.
- Upload documents with a title, optional description, and category
- View documents inline in the browser (PDFs render in an iframe; Markdown files are rendered as HTML)
- View documents inline in the browser (PDFs render in an iframe; Markdown files render as HTML)
- Download any document
- Filter and browse by category
- Editors and admins can upload and delete; all authenticated users can view
@@ -366,6 +415,12 @@ Allowed file types: PDF, Markdown, TXT, Office documents (DOC, DOCX, XLS, XLSX,
---
### Exports
Bulk export tools for reports and data extracts.
---
### Archer Risk Acceptance Tickets
Track Archer exception tickets (EXC numbers) linked to specific CVE/vendor pairs.
@@ -374,27 +429,12 @@ Track Archer exception tickets (EXC numbers) linked to specific CVE/vendor pairs
- Statuses: `Draft`, `Open`, `Under Review`, `Accepted`
- Optional Archer URL field for deep-linking to the Archer record
- Filter tickets by CVE ID, vendor, or status
- EXC numbers are unique across the system
- Clicking an EXC number on the home page navigates directly to the Reporting page with that EXC pre-filtered
---
### Weekly Reports
Editors and admins can upload weekly vulnerability reports as `.xlsx` files. The report is processed by a Python script (`backend/scripts/split_cve_report.py`) that:
1. Reads the `Vulnerabilities` sheet
2. Splits rows where multiple CVE IDs are comma-separated in the `CVE ID` column into individual rows
3. Saves the processed file alongside the original
Both the original and processed files can be downloaded from the weekly reports list. Only the most recently uploaded report is marked as current. Admins can delete old report records and their associated files.
- Clicking an EXC badge on the Home page navigates to the Reporting page pre-filtered to findings with that EXC number in their notes
---
### User Management (Admin)
Admins can manage user accounts from the UI:
- Create users with a role assignment
- Change username, email, password, role, or active status
- Deactivating a user immediately invalidates all their active sessions
@@ -404,12 +444,27 @@ Admins can manage user accounts from the UI:
### Audit Log (Admin)
Every state-changing action is recorded with the user identity, IP address, action type, target entity, and a before/after details payload. Admins can view the log with filtering by user, action type, entity type, and date range. Results are paginated (25 per page).
Every state-changing action is recorded with the user identity, IP address, action type, target entity, and a before/after payload. Admins can view the log filtered by user, action type, entity type, and date range. Results are paginated (25 per page).
---
## Scripts
### `backend/scripts/parse_compliance_xlsx.py`
Called automatically by the compliance upload flow. Parses the NTS_AEO xlsx report and outputs structured JSON to stdout for consumption by the Node compliance route.
- Reads all detail sheets; skips `Summary` and `CMDB_9box`
- Filters to rows where `Compliant == False`
- Extracts hostname, IP, device type, team, and metric ID per row
- Captures all non-core columns in `extra_json` (CVEs, SLA status, OS, EoL, Splunk, MFA, Ivanti_Vulnerability_ID, etc.)
- Parses `Summary` sheet for per-team metric health (compliance_pct, target, status)
- Extracts report date from the filename (`NTS_AEO_YYYY_MM_DD.xlsx`)
**Dependencies:** `pandas>=2.0.0`, `openpyxl>=3.0.0`
---
### `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.
@@ -449,14 +504,6 @@ python3 import_notes_from_csv.py input.csv --db /path/to/cve_database.db
---
### `backend/scripts/split_cve_report.py`
Called automatically by the weekly report upload flow. Not intended to be run manually. Splits multi-CVE rows in the uploaded Excel report into one row per CVE ID.
**Dependencies:** `pandas>=2.0.0`, `openpyxl>=3.0.0`
---
## API Reference
All endpoints are prefixed with `/api`. All endpoints except `/api/auth/login` and `/api/auth/logout` require a valid session cookie.
@@ -499,32 +546,46 @@ All endpoints are prefixed with `/api`. All endpoints except `/api/auth/login` a
| GET | `/api/nvd/lookup/:cveId` | viewer+ | Look up a single CVE in the NVD 2.0 API |
| POST | `/api/cves/nvd-sync` | editor+ | Bulk update CVE metadata from NVD |
### Ivanti / RiskSense — Workflows
| Method | Path | Role | Description |
|---|---|---|---|
| GET | `/api/ivanti/workflows` | viewer+ | Get cached workflow data (total, list, sync status) |
| POST | `/api/ivanti/workflows/sync` | viewer+ | Trigger an immediate workflow sync from Ivanti |
### Ivanti / RiskSense — Host Findings
### Ivanti — Host Findings
| Method | Path | Role | Description |
|---|---|---|---|
| GET | `/api/ivanti/findings` | viewer+ | Get cached findings with notes and overrides merged in |
| POST | `/api/ivanti/findings/sync` | viewer+ | Trigger an immediate findings sync from Ivanti |
| GET | `/api/ivanti/findings/counts` | viewer+ | Open vs closed finding totals |
| GET | `/api/ivanti/findings/fp-workflow-counts` | viewer+ | FP workflow state breakdown — returns `findingCounts`, `findingTotal`, `idCounts`, `idTotal` |
| PUT | `/api/ivanti/findings/:findingId/override` | editor+ | Override `hostName` or `dns` for a finding; empty value clears the override |
| GET | `/api/ivanti/findings/fp-workflow-counts` | viewer+ | FP workflow state breakdown |
| PUT | `/api/ivanti/findings/:findingId/override` | editor+ | Override `hostName` or `dns`; empty value clears the override |
| PUT | `/api/ivanti/findings/:findingId/note` | viewer+ | Save or update a finding note (max 255 chars) |
### Weekly Reports
### Ivanti — Workflows
| Method | Path | Role | Description |
|---|---|---|---|
| POST | `/api/weekly-reports/upload` | editor+ | Upload and process a `.xlsx` vulnerability report |
| GET | `/api/weekly-reports` | viewer+ | List all uploaded reports |
| GET | `/api/weekly-reports/:id/download/:type` | viewer+ | Download `original` or `processed` file |
| DELETE | `/api/weekly-reports/:id` | admin | Delete a report record and its files |
| GET | `/api/ivanti/workflows` | viewer+ | Get cached workflow data |
| POST | `/api/ivanti/workflows/sync` | viewer+ | Trigger an immediate workflow sync |
### Ivanti Queue
| Method | Path | Role | Description |
|---|---|---|---|
| GET | `/api/ivanti/queue` | viewer+ | Get all queue items for the current user |
| POST | `/api/ivanti/queue` | editor+ | Add a finding to the queue |
| PATCH | `/api/ivanti/queue/:id` | editor+ | Update a queue item (mark complete, edit vendor/type) |
| DELETE | `/api/ivanti/queue/:id` | editor+ | Delete a single queue item |
| DELETE | `/api/ivanti/queue` | editor+ | Delete multiple queue items (body: `{ ids: [...] }`) |
### Compliance
| Method | Path | Role | Description |
|---|---|---|---|
| POST | `/api/compliance/preview` | editor+ | Parse an xlsx upload and return diff + temp file path |
| POST | `/api/compliance/commit` | editor+ | Commit a previewed upload to the database |
| GET | `/api/compliance/uploads` | viewer+ | List all compliance upload records |
| GET | `/api/compliance/summary` | viewer+ | Metric health summary; `?team=STEAM` |
| GET | `/api/compliance/items` | viewer+ | Device list; `?team=STEAM&status=active` |
| GET | `/api/compliance/items/:hostname` | viewer+ | Full detail for a device (metrics + notes) |
| GET | `/api/compliance/notes/:hostname/:metricId` | viewer+ | Notes for a specific hostname/metric |
| POST | `/api/compliance/notes` | editor+ | Add a note for a hostname/metric |
### Knowledge Base
@@ -568,7 +629,7 @@ All endpoints are prefixed with `/api`. All endpoints except `/api/auth/login` a
| Method | Path | Role | Description |
|---|---|---|---|
| GET | `/api/vendors` | viewer+ | List all distinct vendor names |
| GET | `/api/stats` | viewer+ | Dashboard statistics (total, critical count, addressed count, document count) |
| GET | `/api/stats` | viewer+ | Dashboard statistics |
---
@@ -580,40 +641,41 @@ cve-dashboard/
├── stop-servers.sh # Stop all servers
├── backend/
│ ├── server.js # Express app — routes, middleware, file upload, security headers
│ ├── server.js # Express app — routes, middleware, security headers
│ ├── setup.js # One-time DB initialization and default admin creation
│ ├── cve_database.db # SQLite database (gitignored)
│ ├── uploads/ # File storage root (gitignored)
│ │ ├── <CVE-ID>/
│ │ │ └── <vendor>/ # CVE documents stored here
│ │ ├── weekly_reports/ # Uploaded vulnerability reports
│ │ ├── <CVE-ID>/<vendor>/ # CVE documents
│ │ ├── knowledge_base/ # Knowledge base documents
│ │ └── temp/ # Temporary upload staging directory
│ │ └── temp/ # Temporary upload staging
│ ├── routes/
│ │ ├── auth.js # Login, logout, session check
│ │ ├── users.js # User CRUD (admin)
│ │ ├── auditLog.js # Audit log viewer (admin)
│ │ ├── nvdLookup.js # NVD API proxy
│ │ ├── weeklyReports.js # Weekly report upload and management
│ │ ├── knowledgeBase.js # Knowledge base document management
│ │ ├── archerTickets.js # Archer EXC ticket CRUD
│ │ ├── ivantiWorkflows.js # Ivanti workflow batch sync and cache
│ │ ── ivantiFindings.js # Ivanti host findings sync, notes, overrides, FP counts
│ │ ── ivantiFindings.js # Ivanti host findings sync, notes, overrides, FP counts
│ │ ├── ivantiTodoQueue.js # Ivanti Queue — personal FP/Archer/CARD staging list
│ │ └── compliance.js # AEO compliance upload, diff, device tracking, notes
│ ├── middleware/
│ │ └── auth.js # requireAuth and requireRole middleware
│ ├── helpers/
│ │ ├── auditLog.js # logAudit helper (fire-and-forget)
│ │ └── excelProcessor.js # Calls Python script for report processing
│ ├── migrations/
│ │ ├── add_weekly_reports_table.js
│ │ ├── add_knowledge_base_table.js
│ │ ├── add_archer_tickets_table.js
│ │ ├── add_ivanti_sync_table.js # Ivanti workflow cache table
│ │ ── add_ivanti_findings_tables.js # Findings cache, notes, counts, overrides tables
│ │ ├── add_ivanti_sync_table.js
│ │ ── add_ivanti_findings_tables.js
│ │ ├── add_ivanti_todo_queue_table.js # Ivanti Queue table
│ │ ├── add_card_workflow_type.js # CARD workflow type support
│ │ ├── add_todo_queue_ip_address.js # IP address column on queue items
│ │ └── add_compliance_tables.js # AEO compliance tables
│ └── scripts/
│ ├── split_cve_report.py # Splits multi-CVE rows in Excel reports
│ ├── parse_compliance_xlsx.py # Parses NTS_AEO xlsx compliance reports
│ ├── import_notes_from_csv.py # Bulk-import finding notes from CSV
│ └── requirements.txt # pandas, openpyxl (weekly report processing only)
│ └── requirements.txt # pandas, openpyxl
└── frontend/
└── src/
@@ -628,13 +690,16 @@ cve-dashboard/
├── CalendarWidget.js # Due-date calendar with Ivanti finding indicators
├── UserManagement.js # Admin user management panel
├── AuditLog.js # Admin audit log viewer
├── NvdSyncModal.js # Bulk NVD sync dialog with review/apply flow
├── NvdSyncModal.js # Bulk NVD sync dialog
├── KnowledgeBaseModal.js # Knowledge base upload/list modal
├── KnowledgeBaseViewer.js # Inline document viewer
└── pages/
├── ReportingPage.js # Host findings: charts, table, filters, export
├── KnowledgeBasePage.js # Knowledge base page (placeholder)
── ExportsPage.js # Exports page (placeholder)
├── ReportingPage.js # Host findings: charts, table, queue, export
├── CompliancePage.js # AEO compliance: metric cards, device table
── ComplianceUploadModal.js # xlsx upload with diff preview
├── ComplianceDetailPanel.js # Per-device metrics, history, notes
├── KnowledgeBasePage.js # Knowledge base page
└── ExportsPage.js # Exports page
```
---
@@ -657,25 +722,28 @@ cve-dashboard/
### Feature tables (added by migrations)
**`weekly_reports`** — Metadata for uploaded vulnerability reports. Tracks original and processed file paths, row counts, uploader, and a `is_current` flag.
**`knowledge_base`** — Document library entries with title, slug, category, description, and file metadata.
**`archer_tickets`** — Archer EXC exception tickets linked to CVE/vendor pairs. `UNIQUE(exc_number)`. Foreign key `(cve_id, vendor)` with CASCADE delete.
**`archer_tickets`** — Archer EXC exception tickets linked to CVE/vendor pairs. `UNIQUE(exc_number)`.
**`ivanti_sync_state`** — Single-row cache (id=1) for Ivanti workflow batch data: total count, JSON array of workflows, sync timestamp, sync status.
**`ivanti_sync_state`** — Single-row cache for Ivanti workflow batch data.
**`ivanti_findings_cache`** — Single-row cache (id=1) for Ivanti host findings: total count, JSON array of slimmed finding objects, sync timestamp, sync status.
**`ivanti_findings_cache`** — Single-row cache for Ivanti host findings.
**`ivanti_finding_notes`** — Persistent per-finding notes keyed by finding ID. Survives findings cache refreshes. `UNIQUE(finding_id)`.
**`ivanti_finding_notes`** — Persistent per-finding notes keyed by finding ID. Survives cache refreshes. `UNIQUE(finding_id)`.
**`ivanti_counts_cache`** — Single-row cache (id=1) for finding metrics:
- `open_count` / `closed_count` — total open and closed findings
- `fp_workflow_counts_json` — JSON object mapping FP workflow state → number of findings
- `fp_id_counts_json` — JSON object mapping FP workflow state → number of unique FP# ticket IDs
**`ivanti_counts_cache`** — Single-row cache for finding metrics: open/closed counts, FP workflow state breakdowns by finding and by unique ticket ID.
**`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)`.
**`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_notes`** — Timestamped notes per hostname/metric. Multiple notes per combination are supported. Foreign-key linked to compliance items.
### View
**`cve_document_status`** — Aggregates document counts per CVE/vendor and derives a `compliance_status` (`Complete` when an advisory is present, otherwise `Missing Required Docs`).
@@ -703,13 +771,13 @@ cve-dashboard/
- Status must be one of: `Open`, `Addressed`, `In Progress`, `Resolved`
- Archer EXC numbers must match `/^EXC-\d+$/`
- Finding override field must be one of: `hostName`, `dns`
- All database operations use prepared statements (no string interpolation in SQL)
- All database operations use prepared statements no string interpolation in SQL
### Error handling
- 500 responses never expose internal error messages to the client
- Full errors are logged server-side only
- Descriptive 400/409 responses are safe as they contain only application-authored validation messages
- Descriptive 400/409 responses contain only application-authored validation messages
### Security headers
@@ -729,21 +797,24 @@ Applied to all responses:
## Migrations
Migrations are standalone Node.js scripts that modify the database directly. Run them in the listed order on a fresh install. They use `CREATE TABLE IF NOT EXISTS` so they are safe to re-run if needed.
Migrations are standalone Node.js scripts. Run them in the listed order on a fresh install. All use `CREATE TABLE IF NOT EXISTS` or `ALTER TABLE ... ADD COLUMN IF NOT EXISTS` and are safe to re-run.
```bash
cd backend
node migrations/add_weekly_reports_table.js
node migrations/add_knowledge_base_table.js
node migrations/add_archer_tickets_table.js
node migrations/add_ivanti_sync_table.js
node migrations/add_ivanti_findings_tables.js
node migrations/add_ivanti_todo_queue_table.js
node migrations/add_card_workflow_type.js
node migrations/add_todo_queue_ip_address.js
node migrations/add_compliance_tables.js
```
For an existing deployment upgrading from an earlier schema, check the legacy migration scripts in `backend/`:
For deployments upgrading from an older schema, the following legacy migration scripts are also available in `backend/`:
- `migrate_multivendor.js` — Adds multi-vendor support to an older single-vendor schema
- `migrate-audit-log.js` — Adds the `audit_logs` table to pre-auth deployments
- `migrate-to-1.1.js` — General 1.0 → 1.1 schema update
> The Ivanti FP workflow count columns (`fp_workflow_counts_json`, `fp_id_counts_json`) are added automatically via `ALTER TABLE ... ADD COLUMN` each time the server starts. These statements are idempotent — the error for a duplicate column is silently ignored.
> Several columns (`fp_workflow_counts_json`, `fp_id_counts_json`, `seen_count`, `summary_json`) are added automatically via idempotent `ALTER TABLE` statements each time the server starts. No manual re-run is needed.

View File

@@ -1,211 +0,0 @@
# Weekly Vulnerability Report Upload Feature
## Overview
A new feature has been added to the CVE Dashboard that allows users to upload their weekly vulnerability reports in Excel format (.xlsx) and automatically process them to split multiple CVE IDs into separate rows for easier filtering and analysis.
## What Was Implemented
### Backend Changes
1. **Database Migration** (`backend/migrations/add_weekly_reports_table.js`)
- Created `weekly_reports` table to store report metadata
- Tracks upload date, file paths, row counts, and which report is current
- Indexed for fast queries
2. **Excel Processor** (`backend/helpers/excelProcessor.js`)
- Executes Python script via Node.js child_process
- Parses row counts from Python output
- Handles errors, timeouts (30 seconds), and validation
3. **API Routes** (`backend/routes/weeklyReports.js`)
- `POST /api/weekly-reports/upload` - Upload and process Excel file
- `GET /api/weekly-reports` - List all reports
- `GET /api/weekly-reports/:id/download/:type` - Download original or processed file
- `DELETE /api/weekly-reports/:id` - Delete report (admin only)
4. **Python Script** (`backend/scripts/split_cve_report.py`)
- Moved from ~/Documents to backend/scripts
- Splits comma-separated CVE IDs into separate rows
- Duplicates device/IP data for each CVE
### Frontend Changes
1. **Weekly Report Modal** (`frontend/src/components/WeeklyReportModal.js`)
- Phase-based UI: idle → uploading → processing → success
- File upload with .xlsx validation
- Display existing reports with current report indicator (★)
- Download buttons for both original and processed files
2. **App.js Integration**
- Added "Weekly Report" button next to NVD Sync button
- State management for modal visibility
- Modal rendering
## How to Use
### Starting the Application
1. **Backend:**
```bash
cd backend
node server.js
```
2. **Frontend:**
```bash
cd frontend
npm start
```
### Using the Feature
1. **Access the Feature**
- Login as an editor or admin user
- Look for the "Weekly Report" button in the top header (next to "NVD Sync")
2. **Upload a Report**
- Click the "Weekly Report" button
- Click "Choose File" and select your .xlsx file
- Click "Upload & Process"
- Wait for processing to complete (usually 5-10 seconds)
3. **Download Processed Report**
- After upload succeeds, you'll see row counts (e.g., "45 → 67 rows")
- Click "Download Processed" to get the split version
- The current week's report is marked with a ★ star icon
4. **Access Previous Reports**
- All previous reports are listed below the upload section
- Click the download icons to get original or processed versions
- Reports are labeled as "This week's report", "Last week's report", or by date
### What the Processing Does
**Before Processing:**
| HOSTNAME | IP | CVE ID |
|----------|------------|---------------------------|
| server01 | 10.0.0.1 | CVE-2024-1234, CVE-2024-5678 |
**After Processing:**
| HOSTNAME | IP | CVE ID |
|----------|------------|---------------------------|
| server01 | 10.0.0.1 | CVE-2024-1234 |
| server01 | 10.0.0.1 | CVE-2024-5678 |
Each CVE now has its own row, making it easy to:
- Sort by CVE ID
- Filter for specific CVEs
- Research CVEs one by one per device
## File Locations
### New Files Created
```
backend/
scripts/
split_cve_report.py # Python script for CVE splitting
requirements.txt # Python dependencies
routes/
weeklyReports.js # API endpoints
helpers/
excelProcessor.js # Python integration
migrations/
add_weekly_reports_table.js # Database migration
uploads/
weekly_reports/ # Uploaded and processed files
frontend/
src/
components/
WeeklyReportModal.js # Upload modal UI
```
### Modified Files
```
backend/
server.js # Added route mounting
frontend/
src/
App.js # Added button and modal
```
## Security & Permissions
- **Upload**: Requires editor or admin role
- **Download**: Any authenticated user
- **Delete**: Admin only
- **File Validation**: Only .xlsx files accepted, 10MB limit
- **Audit Logging**: All uploads, downloads, and deletions are logged
## Troubleshooting
### Backend Issues
**Python not found:**
```bash
# Install Python 3
sudo apt-get install python3
```
**Missing dependencies:**
```bash
# Install pandas and openpyxl
pip3 install pandas openpyxl
```
**Port already in use:**
```bash
# Find and kill process using port 3001
lsof -i :3001
kill -9 <PID>
```
### Frontend Issues
**Button not visible:**
- Make sure you're logged in as editor or admin
- Viewer role cannot upload reports
**Upload fails:**
- Check file is .xlsx format (not .xls or .csv)
- Ensure file has "Vulnerabilities" sheet with "CVE ID" column
- Check file size is under 10MB
**Processing timeout:**
- Large files (10,000+ rows) may timeout
- Try reducing file size or increase timeout in `excelProcessor.js`
## Testing Checklist
- [x] Backend starts without errors
- [x] Frontend compiles successfully
- [x] Database migration completed
- [x] Python dependencies installed
- [ ] Upload .xlsx file (manual test in browser)
- [ ] Verify processed file has split CVEs (manual test)
- [ ] Download original and processed files (manual test)
- [ ] Verify current report marked with star (manual test)
- [ ] Test as viewer - button should be hidden (manual test)
## Future Enhancements
Possible improvements:
- Progress bar during Python processing
- Email notifications when processing completes
- Scheduled automatic uploads
- Report comparison (diff between weeks)
- Export to other formats (CSV, JSON)
- Bulk delete old reports
- Report validation before upload
## Support
For issues or questions:
1. Check the troubleshooting section above
2. Review audit logs for error details
3. Check browser console for frontend errors
4. Review backend server logs for API errors

View File

@@ -251,14 +251,14 @@
"updated": 1,
"link": null,
"locked": false,
"text": "Backend API (Express.js)\nPort: 3001\n\nRoutes:\n• /api/auth - Authentication (login/logout)\n• /api/users - User management\n• /api/cves - CVE operations\n• /api/documents - Document upload/download\n• /api/audit-log - Audit logging\n• /api/nvd-lookup - NVD integration\n• /api/weekly-reports - Weekly reports",
"text": "Backend API (Express.js)\nPort: 3001\n\nRoutes:\n• /api/auth - Authentication (login/logout)\n• /api/users - User management\n• /api/cves - CVE operations\n• /api/documents - Document upload/download\n• /api/audit-log - Audit logging\n• /api/nvd-lookup - NVD integration",
"fontSize": 14,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "middle",
"baseline": 163,
"containerId": "backend-box",
"originalText": "Backend API (Express.js)\nPort: 3001\n\nRoutes:\n• /api/auth - Authentication (login/logout)\n• /api/users - User management\n• /api/cves - CVE operations\n• /api/documents - Document upload/download\n• /api/audit-log - Audit logging\n• /api/nvd-lookup - NVD integration\n• /api/weekly-reports - Weekly reports"
"originalText": "Backend API (Express.js)\nPort: 3001\n\nRoutes:\n• /api/auth - Authentication (login/logout)\n• /api/users - User management\n• /api/cves - CVE operations\n• /api/documents - Document upload/download\n• /api/audit-log - Audit logging\n• /api/nvd-lookup - NVD integration"
},
{
"id": "db-box",
@@ -820,14 +820,14 @@
"updated": 1,
"link": null,
"locked": false,
"text": "Key Features:\n• Quick CVE status check\n• Multi-vendor support\n• Document management\n• Compliance tracking\n• Search & filter\n• Weekly report uploads\n• Audit logging",
"text": "Key Features:\n• Quick CVE status check\n• Multi-vendor support\n• Document management\n• Compliance tracking\n• Search & filter\n• Audit logging",
"fontSize": 12,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"baseline": 113,
"containerId": null,
"originalText": "Key Features:\n• Quick CVE status check\n• Multi-vendor support\n• Document management\n• Compliance tracking\n• Search & filter\n• Weekly report uploads\n• Audit logging"
"originalText": "Key Features:\n• Quick CVE status check\n• Multi-vendor support\n• Document management\n• Compliance tracking\n• Search & filter\n• Audit logging"
}
],
"appState": {

View File

@@ -0,0 +1,41 @@
// Migration: Add ivanti_counts_history table
//
// Stores a snapshot of open/closed Ivanti finding counts on every sync.
// Unlike ivanti_counts_cache (single-row, always overwritten), this table
// accumulates all snapshots so time-series charts can be built from it.
//
// The GET /api/ivanti/findings/counts/history endpoint aggregates these rows
// to the last snapshot per calendar day using a ROW_NUMBER window function.
//
// NOTE: This table is also created automatically at server startup via
// CREATE TABLE IF NOT EXISTS in initTables() (ivantiFindings.js).
// This script is provided for manual setup on fresh installs and for
// documentation consistency with other migration files.
//
// Usage: node backend/migrations/add_ivanti_counts_history_table.js
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 ivanti_counts_history migration...');
db.serialize(() => {
db.run(`
CREATE TABLE IF NOT EXISTS ivanti_counts_history (
id INTEGER PRIMARY KEY AUTOINCREMENT,
open_count INTEGER NOT NULL,
closed_count INTEGER NOT NULL,
recorded_at DATETIME DEFAULT CURRENT_TIMESTAMP
)
`, (err) => {
if (err) console.error('Error creating ivanti_counts_history table:', err);
else console.log('✓ ivanti_counts_history table created (or already exists)');
});
});
db.close(() => {
console.log('Migration complete.');
});

View File

@@ -217,6 +217,25 @@ function createArcherTicketsRouter(db) {
});
});
// GET /status-trend — ticket counts grouped by creation date + status
// Used for time-based Archer pipeline chart on the Compliance page.
router.get('/status-trend', requireAuth(db), (req, res) => {
db.all(
`SELECT DATE(created_at) AS date, status, COUNT(*) AS count
FROM archer_tickets
GROUP BY DATE(created_at), status
ORDER BY date ASC`,
[],
(err, rows) => {
if (err) {
console.error('Error fetching Archer status trend:', err);
return res.status(500).json({ error: 'Internal server error.' });
}
res.json({ statusTrend: rows });
}
);
});
return router;
}

View File

@@ -17,6 +17,7 @@ const fs = require('fs');
const { spawn } = require('child_process');
const PARSER_SCRIPT = path.join(__dirname, '../scripts/parse_compliance_xlsx.py');
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']);
@@ -47,7 +48,7 @@ function dbAll(db, sql, params = []) {
// ---------------------------------------------------------------------------
function parseXlsx(filePath) {
return new Promise((resolve, reject) => {
const py = spawn('python3', [PARSER_SCRIPT, filePath]);
const py = spawn(PYTHON_BIN, [PARSER_SCRIPT, filePath]);
let out = '';
let err = '';
py.stdout.on('data', d => { out += d; });
@@ -583,6 +584,128 @@ function createComplianceRouter(db, upload, requireAuth, requireRole) {
}
});
// -----------------------------------------------------------------------
// GET /trends
// Per-upload active totals + per-team counts for time-series charts.
// Returns rows ordered ascending by report_date.
// -----------------------------------------------------------------------
router.get('/trends', async (req, res) => {
try {
const uploads = await dbAll(db,
`SELECT id, report_date,
COALESCE(new_count, 0) AS new_count,
COALESCE(recurring_count, 0) AS recurring_count,
COALESCE(resolved_count, 0) AS resolved_count,
COALESCE(new_count, 0) + COALESCE(recurring_count, 0) AS total_active
FROM compliance_uploads
ORDER BY report_date ASC`
);
if (uploads.length === 0) return res.json({ trends: [] });
// Per-team active counts — items whose upload_id matches the upload
// (recurring items have upload_id bumped each cycle, so this is accurate)
const teamRows = await dbAll(db,
`SELECT ci.upload_id, ci.team, COUNT(ci.id) AS count
FROM compliance_items ci
WHERE ci.team IS NOT NULL
GROUP BY ci.upload_id, ci.team`
);
const teamMap = {};
teamRows.forEach(r => {
if (!teamMap[r.upload_id]) teamMap[r.upload_id] = {};
teamMap[r.upload_id][r.team] = r.count;
});
const trends = uploads.map(u => ({
report_date: u.report_date,
new_count: u.new_count,
recurring_count: u.recurring_count,
resolved_count: u.resolved_count,
total_active: u.total_active,
STEAM: teamMap[u.id]?.STEAM || 0,
'ACCESS-ENG': teamMap[u.id]?.['ACCESS-ENG'] || 0,
'ACCESS-OPS': teamMap[u.id]?.['ACCESS-OPS'] || 0,
INTELDEV: teamMap[u.id]?.INTELDEV || 0,
}));
res.json({ trends });
} catch (err) {
console.error('[Compliance] GET /trends error:', err.message);
res.status(500).json({ error: 'Database error' });
}
});
// -----------------------------------------------------------------------
// GET /mttr
// Mean time to resolution (calendar days) per team, for resolved items.
// -----------------------------------------------------------------------
router.get('/mttr', async (req, res) => {
try {
const rows = await dbAll(db,
`SELECT
ci.team,
ROUND(AVG(JULIANDAY(ru.report_date) - JULIANDAY(fu.report_date)), 1) AS avg_days,
COUNT(*) AS resolved_count
FROM compliance_items ci
JOIN compliance_uploads fu ON ci.first_seen_upload_id = fu.id
JOIN compliance_uploads ru ON ci.resolved_upload_id = ru.id
WHERE ci.resolved_upload_id IS NOT NULL
AND fu.report_date IS NOT NULL
AND ru.report_date IS NOT NULL
GROUP BY ci.team
ORDER BY avg_days DESC`
);
res.json({ mttr: rows });
} catch (err) {
console.error('[Compliance] GET /mttr error:', err.message);
res.status(500).json({ error: 'Database error' });
}
});
// -----------------------------------------------------------------------
// GET /top-recurring
// Active findings grouped by team + metric_id, sorted by seen_count desc.
// Identifies chronic compliance gaps that keep reappearing.
// -----------------------------------------------------------------------
router.get('/top-recurring', async (req, res) => {
try {
const rows = await dbAll(db,
`SELECT team, metric_id, metric_desc, seen_count, COUNT(*) AS host_count
FROM compliance_items
WHERE status = 'active'
GROUP BY team, metric_id
ORDER BY seen_count DESC, host_count DESC
LIMIT 20`
);
res.json({ items: rows });
} catch (err) {
console.error('[Compliance] GET /top-recurring error:', err.message);
res.status(500).json({ error: 'Database error' });
}
});
// -----------------------------------------------------------------------
// GET /category-trend
// Active item counts per category per upload, for stacked area chart.
// -----------------------------------------------------------------------
router.get('/category-trend', async (req, res) => {
try {
const rows = await dbAll(db,
`SELECT cu.report_date, COALESCE(ci.category, 'Unknown') AS category, COUNT(ci.id) AS count
FROM compliance_uploads cu
JOIN compliance_items ci ON ci.upload_id = cu.id
GROUP BY cu.id, category
ORDER BY cu.report_date ASC`
);
res.json({ categoryTrend: rows });
} catch (err) {
console.error('[Compliance] GET /category-trend error:', err.message);
res.status(500).json({ error: 'Database error' });
}
});
return router;
}

View File

@@ -175,6 +175,15 @@ function initTables(db) {
db.run(`
CREATE INDEX IF NOT EXISTS idx_finding_overrides_finding_id
ON ivanti_finding_overrides(finding_id)
`, (err) => { if (err) return reject(err); });
db.run(`
CREATE TABLE IF NOT EXISTS ivanti_counts_history (
id INTEGER PRIMARY KEY AUTOINCREMENT,
open_count INTEGER NOT NULL,
closed_count INTEGER NOT NULL,
recorded_at DATETIME DEFAULT CURRENT_TIMESTAMP
)
`, (err) => {
if (err) reject(err);
else resolve();
@@ -271,6 +280,14 @@ async function syncClosedCount(db, openCount, apiKey, clientId, skipTls) {
`UPDATE ivanti_counts_cache SET open_count=?, closed_count=?, synced_at=datetime('now') WHERE id=1`,
[openCount, closedCount]
);
// Append a snapshot to history — every sync is stored; the history
// endpoint aggregates to last-per-day at query time (Option B).
await dbRun(db,
`INSERT INTO ivanti_counts_history (open_count, closed_count) VALUES (?, ?)`,
[openCount, closedCount]
);
console.log(`[Ivanti Findings] Counts updated — open: ${openCount}, closed: ${closedCount}`);
} catch (err) {
console.error('[Ivanti Findings] Failed to fetch closed count:', err.message);
@@ -576,6 +593,33 @@ 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.
router.get('/counts/history', async (req, res) => {
try {
const rows = await new Promise((resolve, reject) => {
db.all(
`SELECT date, open_count, closed_count FROM (
SELECT DATE(recorded_at) AS date,
open_count, closed_count,
ROW_NUMBER() OVER (
PARTITION BY DATE(recorded_at)
ORDER BY recorded_at DESC
) AS rn
FROM ivanti_counts_history
) WHERE rn = 1
ORDER BY date ASC`,
[],
(err, rows) => { if (err) reject(err); else resolve(rows || []); }
);
});
res.json({ history: rows });
} catch (err) {
console.error('[Ivanti Findings] GET /counts/history error:', err.message);
res.status(500).json({ error: 'Database error' });
}
});
// GET /fp-workflow-counts — FP finding + unique workflow counts (open + closed)
router.get('/fp-workflow-counts', async (req, res) => {
try {

73
docs/python-venv-setup.md Normal file
View File

@@ -0,0 +1,73 @@
# Python Dependencies — Compliance xlsx Parsing
`parse_compliance_xlsx.py` requires `pandas` and `openpyxl`. This doc
explains how each server has (or should have) these installed.
---
## Dev server — how it works
Pandas and openpyxl are installed as **system apt packages**, not via pip
or a venv. This is why there is no venv on dev and no `--break-system-packages`
gymnastics. They were installed at some point via:
```bash
apt install python3-pandas python3-openpyxl
```
You can verify with:
```bash
python3 -c "import pandas; print(pandas.__file__)"
# /usr/lib/python3/dist-packages/pandas/__init__.py ← apt-managed
```
---
## Production server — how to fix it
Production was missing pandas entirely. The fix mirrors what dev has:
```bash
apt-get update --fix-missing
apt install -y python3-pandas python3-openpyxl
```
No venv, no pip, no `PYTHON_BIN` env var needed. After installing, restart
the backend and the compliance xlsx upload will work.
---
## If apt packages are unavailable (fallback)
If you're on a system where apt doesn't have pandas (unlikely on Ubuntu
22.04/24.04), or you want isolation, use a venv:
```bash
apt install -y python3-venv python3-full
python3 -m venv /home/cve-dashboard/venv
/home/cve-dashboard/venv/bin/pip install -r /home/cve-dashboard/backend/scripts/requirements.txt
```
Then set `PYTHON_BIN` in the Node backend's environment:
```bash
export PYTHON_BIN=/home/cve-dashboard/venv/bin/python3
```
The backend reads `process.env.PYTHON_BIN` and falls back to `python3` if
not set, so this only needs to be done if you're using a venv.
---
## Why pip3 may fail on modern Ubuntu/Debian
PEP 668 (enforced in Ubuntu 23.04+) blocks `pip3 install` system-wide to
prevent breaking apt-managed packages. The error looks like:
```
error: externally-managed-environment
```
Using `apt install python3-pandas` is the correct solution — pip is not
needed when the distro packages the library directly.

View File

@@ -0,0 +1,183 @@
# Security Posture Workflow — Diagrams
Mermaid diagrams for the Host Finding Review & Remediation process.
Renders natively in GitHub, GitLab, and most modern documentation tools.
---
## Diagram 1 — Host Finding Review Workflow (Steps 15)
```mermaid
flowchart TD
START([Open Vulnerability Triage Page]) --> SYNC
SYNC["① Sync & Sort<br/>Click Sync · Sort Due Date ascending"]
SYNC --> DUE{Overdue<br/>findings?}
DUE -->|Yes — start here| HOST
DUE -->|No — start with amber| HOST
HOST["② Identify the Host<br/>Verify IP in IPControl / Infoblox"]
HOST --> CORRECT{Hostname<br/>correct?}
CORRECT -->|No| EDIT["Inline-edit Host / DNS cell<br/>Amber dot marks the override"]
EDIT --> OWN
CORRECT -->|Yes| OWN
OWN["③ Identify Asset Ownership<br/>Check BU column"]
OWN --> BU{Our BU?}
BU -->|"NTS-AEO-STEAM<br/>or ACCESS-ENG"| CVE
BU -->|"Other BU<br/>or blank"| CARD["Add to CARD Queue<br/>☑ checkbox → CARD → Add to Queue"]
CARD --> CARD2([Process in dedicated CARD session])
CVE["④ Review CVEs in the Finding<br/>Up to 2 shown · hover +N badge for more"]
CVE --> DBCHECK{CVE in<br/>database?}
DBCHECK -->|No| ADDCVE["Create CVE entry on Home page<br/>NVD auto-fill populates details"]
ADDCVE --> RESEARCH
DBCHECK -->|Yes — review existing notes/docs| RESEARCH
RESEARCH["Research CVE<br/>Vendor advisory · Cisco Bug Search<br/>Juniper PSN · Support ticket"]
RESEARCH --> ACTION
ACTION["⑤ Determine Required Action"]
ACTION --> PATH{What does<br/>research show?}
PATH -->|"Patch available<br/>FW / SW update"| PA
PATH -->|"Fix is config<br/>change only"| PB
PATH -->|"Not applicable<br/>to platform / version"| PC
PATH -->|"Cannot patch<br/>vendor / EOL / business"| PD
PA["PATH A — Remediation<br/>Firmware or Software Upgrade"]
PA --> PA1["Plan & schedule upgrade<br/>Add note to finding row"]
PA1 --> PA2(["Finding drops off after<br/>next Ivanti scan ✓"])
PB["PATH B — Remediation<br/>Configuration Change"]
PB --> PB1["☑ checkbox → Vendor → Archer<br/>Add to Queue"]
PB1 --> PB2["Open Archer EXC ticket<br/>in dedicated session"]
PB2 --> PB3(["Enter EXC-XXXXX<br/>in finding Notes cell ✓"])
PC["PATH C — False Positive"]
PC --> PC1["Take device screenshot<br/>Hostname · IP · SW version"]
PC1 --> PC2["Obtain vendor documentation<br/>advisory / email / support ticket"]
PC2 --> PC3["Upload evidence to CVE database<br/>Home page → CVE row → Upload"]
PC3 --> PC4["☑ checkbox → Vendor → FP<br/>Add to Queue"]
PC4 --> PC5(["Submit FP workflow in Ivanti<br/>in dedicated session ✓"])
PD["PATH D — Risk Acceptance"]
PD --> PD1["Take device screenshot<br/>Collect version info"]
PD1 --> PD2{Vendor comms<br/>needed?}
PD2 -->|Yes| PD3["Open vendor support ticket<br/>Request patch timeline / mitigations"]
PD3 --> PD4
PD2 -->|No| PD4["☑ checkbox → Vendor → Archer<br/>Add to Queue"]
PD4 --> PD5["Open Archer EXC ticket<br/>in dedicated session"]
PD5 --> PD6(["Enter EXC-XXXXX<br/>in finding Notes cell ✓"])
%% Styling
classDef step fill:#1e3a5f,stroke:#0ea5e9,stroke-width:2px,color:#e2e8f0
classDef decision fill:#1a2e1a,stroke:#10b981,stroke-width:2px,color:#e2e8f0
classDef pathA fill:#14391f,stroke:#10b981,stroke-width:1.5px,color:#e2e8f0
classDef pathB fill:#2d1f14,stroke:#f59e0b,stroke-width:1.5px,color:#e2e8f0
classDef pathC fill:#2d1414,stroke:#ef4444,stroke-width:1.5px,color:#e2e8f0
classDef pathD fill:#1a1430,stroke:#8b5cf6,stroke-width:1.5px,color:#e2e8f0
classDef card fill:#1a2e1a,stroke:#10b981,stroke-width:1.5px,color:#e2e8f0
classDef done fill:#0f172a,stroke:#475569,stroke-width:1.5px,color:#64748b
class SYNC,HOST,OWN,CVE,RESEARCH,ACTION step
class DUE,CORRECT,BU,DBCHECK,PATH decision
class PA,PA1,PA2 pathA
class PB,PB1,PB2,PB3 pathB
class PC,PC1,PC2,PC3,PC4,PC5 pathC
class PD,PD1,PD2,PD3,PD4,PD5,PD6 pathD
class CARD,CARD2 card
class EDIT done
```
---
## Diagram 2 — FP Workflow Badge Status Decision Tree
What to do when a finding already has a workflow badge in the Vulnerability Triage page.
```mermaid
flowchart LR
A([Finding in<br/>Vulnerability Triage]) --> B{"Check<br/>Workflow column"}
B -->|No badge| C["UNTRIAGED<br/>No action on record"]
C --> C1(["Follow the<br/>Step 15 triage workflow ↑"])
B -->|"🔵 Blue<br/>Requested"| D["IN FLIGHT<br/>FP submitted · awaiting approval"]
D --> D1{"SLA window<br/>approaching?"}
D1 -->|No| D2(["Monitor — no action yet ✓"])
D1 -->|Yes| D3(["Follow up with<br/>the approver"])
B -->|"🟡 Amber<br/>Reworked"| E["NEEDS REVISION<br/>Reviewer returned the ticket"]
E --> E1["Open ticket in Ivanti<br/>Review feedback"]
E1 --> E2(["Update justification<br/>and resubmit"])
B -->|"🟡 Amber<br/>Actionable"| F["NEEDS RESPONSE<br/>Ticket flagged for team action"]
F --> F1(["Open ticket in Ivanti<br/>Respond to the request"])
B -->|"🔴 Red<br/>Expired"| G["EXCEPTION LAPSED<br/>Finding has re-opened"]
G --> G1(["Submit a new FP request<br/>in Ivanti<br/>Reference previous ticket"])
B -->|"🔴 Red<br/>Rejected"| H["CONFIRMED VULNERABILITY<br/>Security team denied the FP"]
H --> H1(["Remediate the vulnerability<br/>Do not resubmit FP<br/>without new evidence"])
%% Styling
classDef trigger fill:#0f172a,stroke:#0ea5e9,stroke-width:2px,color:#e2e8f0
classDef blue fill:#1e3a5f,stroke:#0ea5e9,stroke-width:1.5px,color:#e2e8f0
classDef amber fill:#2d2014,stroke:#f59e0b,stroke-width:1.5px,color:#e2e8f0
classDef red fill:#2d1414,stroke:#ef4444,stroke-width:1.5px,color:#e2e8f0
classDef none fill:#1a1a2e,stroke:#475569,stroke-width:1.5px,color:#94a3b8
classDef done fill:#0f172a,stroke:#334155,stroke-width:1px,color:#64748b
class A,B trigger
class D,D1,D2,D3 blue
class E,E1,E2,F,F1 amber
class G,G1,H,H1 red
class C,C1 none
class D2,D3,E2,F1,G1,H1 done
```
---
## Diagram 3 — Action Decision Matrix (Quick Reference)
Condensed view of the five research outcomes and their required actions.
```mermaid
flowchart LR
START(["Research complete<br/>Step 4 done"]) --> Q{"What is the<br/>remediation path?"}
Q --> R1["Firmware or<br/>Software update available"]
R1 --> A1(["No ticket needed<br/>Schedule upgrade<br/>Add note to finding"])
Q --> R2["Fix is a<br/>configuration change"]
R2 --> A2(["Archer EXC ticket required<br/>Stage as Archer in Queue"])
Q --> R3["Not applicable<br/>to this platform / version"]
R3 --> A3(["FP workflow in Ivanti<br/>Evidence in CVE database"])
Q --> R4["Patch not yet<br/>available from vendor"]
R4 --> A4(["Archer EXC ticket<br/>Renew when patch ships"])
Q --> R5["Device is EOL / EOS<br/>or business constraint"]
R5 --> A5(["Archer ticket with<br/>mitigation steps +<br/>remediation plan"])
Q --> R6["Asset not owned<br/>by our BU"]
R6 --> A6(["CARD queue<br/>CARD disposition process"])
classDef q fill:#1e3a5f,stroke:#0ea5e9,stroke-width:2px,color:#e2e8f0
classDef green fill:#14391f,stroke:#10b981,stroke-width:1.5px,color:#e2e8f0
classDef amber fill:#2d2014,stroke:#f59e0b,stroke-width:1.5px,color:#e2e8f0
classDef red fill:#2d1414,stroke:#ef4444,stroke-width:1.5px,color:#e2e8f0
classDef teal fill:#0f2d2d,stroke:#14b8a6,stroke-width:1.5px,color:#e2e8f0
class START,Q q
class R1,A1 green
class R2,A2,R4,A4,R5,A5 amber
class R3,A3 red
class R6,A6 teal
```
---
*Source document: `docs/security-posture-workflow.md`*

View File

@@ -0,0 +1,175 @@
# Lucidchart Import — Raw Mermaid Code
Lucidchart expects raw Mermaid syntax only — no markdown headings or prose.
Paste each diagram separately: Insert → Diagram as Code → Mermaid → paste → Generate.
---
## DIAGRAM 1 — Host Finding Review Workflow
Paste everything between the triple-backtick fences below:
```
flowchart TD
START([Open Reporting Page]) --> SYNC
SYNC["① Sync & Sort<br/>Click Sync · Sort Due Date ascending"]
SYNC --> DUE{Overdue<br/>findings?}
DUE -->|Yes — start here| HOST
DUE -->|No — start with amber| HOST
HOST["② Identify the Host<br/>Verify IP in IPControl / Infoblox"]
HOST --> CORRECT{Hostname<br/>correct?}
CORRECT -->|No| EDIT["Inline-edit Host / DNS cell<br/>Amber dot marks the override"]
EDIT --> OWN
CORRECT -->|Yes| OWN
OWN["③ Identify Asset Ownership<br/>Check BU column"]
OWN --> BU{Our BU?}
BU -->|"NTS-AEO-STEAM or ACCESS-ENG"| CVE
BU -->|"Other BU or blank"| CARD["Add to CARD Queue<br/>checkbox → CARD → Add to Queue"]
CARD --> CARD2([Process in dedicated CARD session])
CVE["④ Review CVEs in the Finding<br/>Up to 2 shown · hover badge for more"]
CVE --> DBCHECK{CVE in<br/>database?}
DBCHECK -->|No| ADDCVE["Create CVE entry on Home page<br/>NVD auto-fill populates details"]
ADDCVE --> RESEARCH
DBCHECK -->|Yes — review existing notes/docs| RESEARCH
RESEARCH["Research CVE<br/>Vendor advisory · Cisco Bug Search<br/>Juniper PSN · Support ticket"]
RESEARCH --> ACTION
ACTION["⑤ Determine Required Action"]
ACTION --> PATH{What does<br/>research show?}
PATH -->|"Patch available — FW / SW update"| PA
PATH -->|"Fix is config change only"| PB
PATH -->|"Not applicable to platform / version"| PC
PATH -->|"Cannot patch — vendor / EOL / business"| PD
PA["PATH A — Remediation<br/>Firmware or Software Upgrade"]
PA --> PA1["Plan & schedule upgrade<br/>Add note to finding row"]
PA1 --> PA2(["Finding drops off after<br/>next Ivanti scan ✓"])
PB["PATH B — Remediation<br/>Configuration Change"]
PB --> PB1["checkbox → Vendor → Archer<br/>Add to Queue"]
PB1 --> PB2["Open Archer EXC ticket<br/>in dedicated session"]
PB2 --> PB3(["Enter EXC-XXXXX<br/>in finding Notes cell ✓"])
PC["PATH C — False Positive"]
PC --> PC1["Take device screenshot<br/>Hostname · IP · SW version"]
PC1 --> PC2["Obtain vendor documentation<br/>advisory / email / support ticket"]
PC2 --> PC3["Upload evidence to CVE database<br/>Home page → CVE row → Upload"]
PC3 --> PC4["checkbox → Vendor → FP<br/>Add to Queue"]
PC4 --> PC5(["Submit FP workflow in Ivanti<br/>in dedicated session ✓"])
PD["PATH D — Risk Acceptance"]
PD --> PD1["Take device screenshot<br/>Collect version info"]
PD1 --> PD2{Vendor comms<br/>needed?}
PD2 -->|Yes| PD3["Open vendor support ticket<br/>Request patch timeline / mitigations"]
PD3 --> PD4
PD2 -->|No| PD4["checkbox → Vendor → Archer<br/>Add to Queue"]
PD4 --> PD5["Open Archer EXC ticket<br/>in dedicated session"]
PD5 --> PD6(["Enter EXC-XXXXX<br/>in finding Notes cell ✓"])
classDef step fill:#1e3a5f,stroke:#0ea5e9,stroke-width:2px,color:#e2e8f0
classDef decision fill:#1a2e1a,stroke:#10b981,stroke-width:2px,color:#e2e8f0
classDef pathA fill:#14391f,stroke:#10b981,stroke-width:1.5px,color:#e2e8f0
classDef pathB fill:#2d1f14,stroke:#f59e0b,stroke-width:1.5px,color:#e2e8f0
classDef pathC fill:#2d1414,stroke:#ef4444,stroke-width:1.5px,color:#e2e8f0
classDef pathD fill:#1a1430,stroke:#8b5cf6,stroke-width:1.5px,color:#e2e8f0
classDef card fill:#1a2e1a,stroke:#10b981,stroke-width:1.5px,color:#e2e8f0
classDef done fill:#0f172a,stroke:#475569,stroke-width:1.5px,color:#64748b
class SYNC,HOST,OWN,CVE,RESEARCH,ACTION step
class DUE,CORRECT,BU,DBCHECK,PATH decision
class PA,PA1,PA2 pathA
class PB,PB1,PB2,PB3 pathB
class PC,PC1,PC2,PC3,PC4,PC5 pathC
class PD,PD1,PD2,PD3,PD4,PD5,PD6 pathD
class CARD,CARD2 card
class EDIT done
```
---
## DIAGRAM 2 — FP Workflow Badge Status Decision Tree
```
flowchart LR
A([Finding in Reporting Page]) --> B{"Check Workflow column"}
B -->|No badge| C["UNTRIAGED<br/>No action on record"]
C --> C1(["Follow the Step 1-5 triage workflow"])
B -->|Blue - Requested| D["IN FLIGHT<br/>FP submitted · awaiting approval"]
D --> D1{"SLA window<br/>approaching?"}
D1 -->|No| D2(["Monitor — no action yet"])
D1 -->|Yes| D3(["Follow up with the approver"])
B -->|Amber - Reworked| E["NEEDS REVISION<br/>Reviewer returned the ticket"]
E --> E1["Open ticket in Ivanti<br/>Review feedback"]
E1 --> E2(["Update justification and resubmit"])
B -->|Amber - Actionable| F["NEEDS RESPONSE<br/>Ticket flagged for team action"]
F --> F1(["Open ticket in Ivanti<br/>Respond to the request"])
B -->|Red - Expired| G["EXCEPTION LAPSED<br/>Finding has re-opened"]
G --> G1(["Submit a new FP request in Ivanti<br/>Reference previous ticket"])
B -->|Red - Rejected| H["CONFIRMED VULNERABILITY<br/>Security team denied the FP"]
H --> H1(["Remediate the vulnerability<br/>Do not resubmit FP without new evidence"])
classDef trigger fill:#0f172a,stroke:#0ea5e9,stroke-width:2px,color:#e2e8f0
classDef blue fill:#1e3a5f,stroke:#0ea5e9,stroke-width:1.5px,color:#e2e8f0
classDef amber fill:#2d2014,stroke:#f59e0b,stroke-width:1.5px,color:#e2e8f0
classDef red fill:#2d1414,stroke:#ef4444,stroke-width:1.5px,color:#e2e8f0
classDef none fill:#1a1a2e,stroke:#475569,stroke-width:1.5px,color:#94a3b8
classDef done fill:#0f172a,stroke:#334155,stroke-width:1px,color:#64748b
class A,B trigger
class D,D1,D2,D3 blue
class E,E1,E2,F,F1 amber
class G,G1,H,H1 red
class C,C1 none
class D2,D3,E2,F1,G1,H1 done
```
---
## DIAGRAM 3 — Action Decision Matrix
```
flowchart LR
START(["Research complete — Step 4 done"]) --> Q{"What is the<br/>remediation path?"}
Q --> R1["Firmware or software update available"]
R1 --> A1(["No ticket needed<br/>Schedule upgrade · Add note to finding"])
Q --> R2["Fix is a configuration change only"]
R2 --> A2(["Archer EXC ticket required<br/>Stage as Archer in Queue"])
Q --> R3["Not applicable to this platform / version"]
R3 --> A3(["FP workflow in Ivanti<br/>Evidence in CVE database"])
Q --> R4["Patch not yet available from vendor"]
R4 --> A4(["Archer EXC ticket<br/>Renew when patch ships"])
Q --> R5["Device is EOL / EOS or business constraint"]
R5 --> A5(["Archer ticket with mitigation steps<br/>and remediation plan"])
Q --> R6["Asset not owned by our BU"]
R6 --> A6(["CARD queue — CARD disposition process"])
classDef q fill:#1e3a5f,stroke:#0ea5e9,stroke-width:2px,color:#e2e8f0
classDef green fill:#14391f,stroke:#10b981,stroke-width:1.5px,color:#e2e8f0
classDef amber fill:#2d2014,stroke:#f59e0b,stroke-width:1.5px,color:#e2e8f0
classDef red fill:#2d1414,stroke:#ef4444,stroke-width:1.5px,color:#e2e8f0
classDef teal fill:#0f2d2d,stroke:#14b8a6,stroke-width:1.5px,color:#e2e8f0
class START,Q q
class R1,A1 green
class R2,A2,R4,A4,R5,A5 amber
class R3,A3 red
class R6,A6 teal
```

View File

@@ -0,0 +1,158 @@
# STEAM Security Dashboard — Team Training Agenda
**Session length:** 3040 minutes
**Format:** Live walkthrough (share your screen on the dashboard)
**Reference docs:** `security-posture-workflow.md` for full detail on anything covered here
---
## Pre-meeting prep
- Have the dashboard open and logged in before the meeting starts
- Sync Vulnerability Triage page so data is fresh when you get there
- Print or share `security-posture-workflow.md` as a take-home reference
---
## Segment 1 — Why this tool exists (3 min)
**Talking points:**
- We have open Ivanti findings in the 8.59.9 VRR range — these are the ones we own and are accountable for
- Every finding needs a documented action within **60 days of detection** (the SLA rule)
- Findings that age past their Due Date make a device non-compliant in AEO posture reporting
- This dashboard is how we track, triage, and prove we've actioned everything — replaces manual spreadsheet tracking
---
## Segment 2 — Dashboard orientation (4 min)
**Show on screen:** Navigate through each page in the nav drawer
- **Home (CVE Management)** — our CVE research library; this is where we store screenshots, advisories, and Archer EXC numbers against each CVE/vendor pair
- **Vulnerability Triage (Host Findings)** — the daily operational page; this is where you spend most of your time
- **Compliance** — AEO posture data uploaded from the NTS_AEO xlsx; shows metric health per team
- **Knowledge Base** — internal docs, runbooks, advisories
- **Exports** — bulk data extracts when needed
> Tell the team: *"The Vulnerability Triage page is what we'll focus on today — that's where the workflow lives."*
---
## Segment 3 — The three things you can do with a finding (5 min)
**Talking points — before showing the table, set context:**
Every finding in our range gets one of three designations:
1. **Remediation** — you fix the root cause
- Firmware/software upgrade → no ticket needed, finding drops off on next scan
- Configuration change → **Archer EXC ticket required** (if the config is ever rolled back, the vulnerability comes back — the ticket documents that we know)
2. **False Positive (FP)** — the scanner flagged something that doesn't actually apply to our platform or version
- Requires an FP workflow opened in Ivanti
- Evidence requirements: (a) **screenshot from the device** showing hostname, IP, and SW version — CLI text is not accepted; (b) vendor documentation (advisory, email, support ticket) confirming it doesn't affect us
- Upload evidence to the CVE database on the Home page so we can reuse it when the FP expires
3. **Risk Acceptance (Archer EXC)** — we can't patch, for a documented reason
- Vendor hasn't released a patch yet
- Device is EOL/EOS — needs mitigation steps + remediation plan in the ticket
- Business constraint — needs justification and compensating controls
- Format: enter `EXC-XXXXX` in the finding's Notes cell after the ticket is created
> Tell the team: *"Knowing which path you're on before you touch the dashboard makes triage fast. The workflow is just deciding which of these three it is."*
---
## Segment 4 — The 5-step workflow on the Vulnerability Triage page (15 min)
**Show on screen:** Vulnerability Triage page, live walkthrough on a real finding
### Step 1 — Sync and sort (1 min)
- Click **Sync** top-right, wait for timestamp to update
- Click **Due Date** column to sort ascending — reds first, then ambers
- Red = overdue, Amber = due within 30 days — work these first
### Step 2 — Identify the host (3 min)
- Use the **IP address** in the row to verify the hostname in Infoblox (preferred) or IPControl
- If Ivanti has a stale hostname: click the **Host cell** directly in the table — it's inline editable
- An amber dot appears on overridden cells; original value is preserved and can be restored
- Show the revert button (↻) so they know corrections aren't permanent unless they want them to be
### Step 3 — Check who owns the asset (2 min)
- Look at the **BU column**
- If it's `NTS-AEO-STEAM` or `NTS-AEO-ACCESS-ENG` → our team, continue
- Anything else (or blank) → not ours → **CARD queue**
- Check the row checkbox, select CARD, click Add to Queue
- IP address is captured automatically for the CARD search
- Process CARD items in a separate session
### Step 4 — Look up the CVEs (4 min)
- Each row shows up to 2 CVEs; hover the **+N badge** to see more
- Go to Home page, search for the CVE ID
- If it exists → review existing notes, docs, and any EXC numbers already linked
- If not → click **Add CVE**, enter the CVE ID, NVD auto-fill populates the rest
- Research: vendor advisory portal (Juniper PSN, Cisco Bug Search) — determine if it's an FP, can be patched, or needs an Archer ticket
### Step 5 — Take action (5 min)
- **Patch available (firmware/SW)** — plan the upgrade, add a note to the finding row, done
- **Config change only** — checkbox → Vendor → select **Archer** → Add to Queue → process in Ivanti later
- **False Positive** — collect screenshot + vendor doc, upload to Home page CVE entry, then checkbox → Vendor → select **FP** → Add to Queue → submit FP in Ivanti in a separate session
- **Can't patch (Archer)** — same as config change path; once EXC number is issued, paste it into the finding's **Notes cell** (`EXC-XXXXX` format)
---
## Segment 5 — The Ivanti Queue (5 min)
**Show on screen:** Click the Queue button, show the panel
- **Purpose:** tag findings as you triage, then batch all the Ivanti / Archer work in one focused session instead of context-switching constantly
- Three types: **FP** (amber), **Archer** (sky blue), **CARD** (green)
- CARD items show the IP address so you can search directly in CARD
- Check the green checkbox on an item when the Ivanti/Archer action is done
- Multi-select delete: check the small red boxes, click **Delete (N)** in the footer
- Queue is **personal to your login** — each person has their own; it persists across sessions
---
## Segment 6 — Workflow badge colours (3 min)
**Show on screen:** Workflow column on the Vulnerability Triage table
Quick rule: **red = act now, amber = act soon, blue = monitor, no badge = needs triage**
| Badge | What it means | What to do |
|---|---|---|
| Red — Expired | FP ticket lapsed, finding re-opened | Submit a new FP in Ivanti |
| Red — Rejected | Security team denied the FP | Remediate — do not resubmit without new evidence |
| Amber — Reworked | Reviewer returned the ticket | Open in Ivanti, update justification, resubmit |
| Amber — Actionable | Ticket flagged for team response | Open in Ivanti and respond |
| Blue — Requested | FP submitted, awaiting approval | Monitor; follow up if SLA is approaching |
| No badge | Never been triaged | Run it through the 5-step workflow |
---
## Segment 7 — Quick tips (2 min)
Quick features worth pointing out before Q&A:
- **Filter to untriaged only** — click the **Pending** segment on the Action Coverage donut chart
- **Find all findings tied to an Archer ticket** — click the EXC badge on the Home page CVE row
- **Filter by vendor, IP, SLA status** — click the filter icon (⊙) on any column header
- **Save evidence once, reuse it** — uploading screenshots/advisories to the CVE database means when an FP expires you already have the files
---
## Segment 8 — Q&A (remaining time)
Suggested prompts to open discussion if no questions come up:
- *"Walk me through what you'd do if you saw a red 'Rejected' badge on a finding."*
- *"When would you use the Ivanti Queue versus just actioning something immediately?"*
- *"What's the difference between Path B (config change) and Path D (risk acceptance) — when does each apply?"*
---
## Takeaway for the team
Point them to:
- `docs/security-posture-workflow.md` — the full process guide with all the steps, evidence requirements, and decision matrix
- `docs/security-posture-workflow-diagrams.md` — the Mermaid flowcharts if they're visual learners

View File

@@ -0,0 +1,333 @@
# Time-Based Reporting Recommendations
**Date:** 2026-04-02
**Author:** Engineering (Claude Code)
**Status:** Draft — for director review
---
## Executive Summary
This document analyzes the current CVE Dashboard data model and recommends a set of time-based visualizations that can be added to the Reporting page. Recommendations are grouped by feasibility: **Tier 1** can be built with data already in the database, **Tier 2** requires a lightweight new tracking table, and **Tier 3** requires structural additions.
---
## Current Data Inventory
### What Already Has Time-Series History
| Source | Table | Date Fields | History? |
|--------|-------|-------------|----------|
| Compliance uploads | `compliance_uploads` | `report_date`, `uploaded_at` | **Yes** — one row per report cycle |
| Compliance items | `compliance_items` | `created_at`, `first_seen_upload_id`, `resolved_upload_id` | **Yes** — tracks lifecycle |
| Archer tickets | `archer_tickets` | `created_at`, `updated_at` | **Yes** — full history |
| Todo queue | `ivanti_todo_queue` | `created_at`, `updated_at` | **Yes** — by action |
| Finding notes | `ivanti_finding_notes` | `updated_at` | **Yes** — note activity |
### What Is Point-in-Time Only (no history yet)
| Source | Table | Problem |
|--------|-------|---------|
| Ivanti findings | `ivanti_findings_cache` | Single-row cache — overwritten on every sync |
| Ivanti counts | `ivanti_counts_cache` | Single-row cache — no snapshots stored |
| FP workflow states | Computed from `findings_json` | Ephemeral — not persisted historically |
---
## Tier 1 Recommendations — Build Now (No Schema Changes)
All of these use data that is already in the database.
---
### 1.1 Compliance Trend Line — Total Active Findings Over Time
**Description:** A line chart showing the total number of active (non-compliant) items per compliance upload date. This directly answers "are we improving over time?"
**Data Source:**
```sql
SELECT
cu.report_date,
COUNT(ci.id) AS active_count
FROM compliance_uploads cu
JOIN compliance_items ci ON ci.upload_id = cu.id AND ci.status = 'active'
GROUP BY cu.id
ORDER BY cu.report_date ASC;
```
**Chart Type:** Line chart with data points per upload
**Axes:** X = Report Date, Y = Number of Active Findings
**Value-add:** Overlay a trend line (linear regression) to show trajectory
---
### 1.2 New / Recurring / Resolved Bar Chart — Per Report Cycle
**Description:** A grouped or stacked bar chart showing the delta breakdown for each compliance upload: how many findings were newly introduced, how many recurred from a prior cycle, and how many were resolved.
**Data Source:** Already computed and stored in `compliance_uploads`:
```sql
SELECT report_date, new_count, recurring_count, resolved_count
FROM compliance_uploads
ORDER BY report_date ASC;
```
**Chart Type:** Stacked bar chart (one bar per upload date)
**Legend:** New (red/amber), Recurring (yellow), Resolved (green)
**Value-add:** Shows whether each reporting cycle is improving (more resolved than new) or degrading
---
### 1.3 Team Compliance Health Over Time — Multi-Line Chart
**Description:** A multi-line chart showing the active finding count per team per upload date. Answers "which team is trending better or worse?"
**Data Source:**
```sql
SELECT
cu.report_date,
ci.team,
COUNT(ci.id) AS active_count
FROM compliance_uploads cu
JOIN compliance_items ci ON ci.upload_id = cu.id AND ci.status = 'active'
GROUP BY cu.id, ci.team
ORDER BY cu.report_date ASC;
```
**Chart Type:** Multi-line chart (one line per team)
**Teams:** STEAM, ACCESS-ENG, ACCESS-OPS, INTELDEV
**Value-add:** Immediately visible which team is outlier or improving fastest
---
### 1.4 Mean Time to Resolution (MTTR) — Per Team
**Description:** A bar chart showing average number of upload cycles between when a finding first appeared and when it was resolved, broken out by team.
**Data Source:**
```sql
SELECT
ci.team,
AVG(ci.resolved_upload_id - ci.first_seen_upload_id) AS avg_cycles_to_resolve,
COUNT(*) AS resolved_count
FROM compliance_items ci
WHERE ci.resolved_upload_id IS NOT NULL
GROUP BY ci.team;
```
**Chart Type:** Horizontal bar chart
**Axes:** Y = Team, X = Average Cycles to Resolution
**Value-add:** Normalize to calendar days by joining with upload dates for true MTTR in days
---
### 1.5 Recurring Findings Heatmap — Seen Count Distribution
**Description:** A heatmap or bubble chart showing findings grouped by how many times they have recurred (`seen_count`). Identifies chronic, long-standing compliance gaps.
**Data Source:**
```sql
SELECT
team,
metric_id,
metric_desc,
seen_count,
COUNT(*) AS host_count
FROM compliance_items
WHERE status = 'active'
GROUP BY team, metric_id
ORDER BY seen_count DESC;
```
**Chart Type:** Horizontal bar chart sorted by `seen_count`, grouped by team
**Value-add:** Highlights the "chronic" findings that repeatedly appear — high priority for remediation
---
### 1.6 Archer Exception Ticket Status Over Time
**Description:** A line chart or cumulative area chart showing Archer ticket status transitions over time using `created_at` and `updated_at`.
**Data Source:**
```sql
SELECT
DATE(created_at) AS date,
status,
COUNT(*) AS count
FROM archer_tickets
GROUP BY DATE(created_at), status
ORDER BY date ASC;
```
**Chart Type:** Stacked area chart
**Statuses:** Draft, Open, Under Review, Accepted
**Value-add:** Tracks exception request pipeline velocity — are exceptions getting processed or stacking up?
---
### 1.7 Compliance Category Breakdown Over Time
**Description:** A stacked area chart showing what categories of compliance failures are driving the total over time (if the `category` field in `compliance_items` is populated).
**Data Source:**
```sql
SELECT
cu.report_date,
ci.category,
COUNT(ci.id) AS count
FROM compliance_uploads cu
JOIN compliance_items ci ON ci.upload_id = cu.id AND ci.status = 'active'
WHERE ci.category IS NOT NULL
GROUP BY cu.id, ci.category
ORDER BY cu.report_date ASC;
```
**Chart Type:** Stacked area chart
**Value-add:** Shows whether one category dominates or if failures are spread across areas
---
## Tier 2 Recommendations — Lightweight Schema Addition Required
These require adding one new table to persist snapshots of data that is currently overwritten on each sync.
---
### 2.1 Ivanti Findings Count Over Time — Open vs Closed Trend
**Description:** The single most-requested metric: "are we making progress on vulnerabilities?" A line chart showing open and closed Ivanti finding counts over time.
**Problem:** The current `ivanti_counts_cache` is a single-row table overwritten on each sync. No history is kept.
**Solution:** Add a `ivanti_counts_history` table and append a row on every successful sync:
```sql
CREATE TABLE ivanti_counts_history (
id INTEGER PRIMARY KEY AUTOINCREMENT,
open_count INTEGER NOT NULL,
closed_count INTEGER NOT NULL,
recorded_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
```
**Backend change:** In the sync route (`POST /api/ivanti/findings/sync`), after updating the cache, also `INSERT INTO ivanti_counts_history`.
**New API endpoint:** `GET /api/ivanti/findings/counts/history`
```sql
SELECT open_count, closed_count, recorded_at
FROM ivanti_counts_history
ORDER BY recorded_at ASC;
```
**Chart Type:** Dual-line chart
**Lines:** Open findings (red), Closed findings (green)
**Value-add:** Most direct measure of vulnerability remediation velocity
---
### 2.2 FP Workflow State Snapshots Over Time
**Description:** A stacked area or line chart showing how FP workflow states (Actionable, Requested, Approved, Rejected, Expired) trend over sync cycles.
**Solution:** Add a `ivanti_fp_workflow_history` table:
```sql
CREATE TABLE ivanti_fp_workflow_history (
id INTEGER PRIMARY KEY AUTOINCREMENT,
state TEXT NOT NULL,
finding_count INTEGER NOT NULL DEFAULT 0,
id_count INTEGER NOT NULL DEFAULT 0,
recorded_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
```
**Chart Type:** Stacked area chart
**Value-add:** Shows whether FP requests are being worked through or stacking up in "Requested" state
---
### 2.3 Todo Queue Velocity — Items Added vs Completed Per Week
**Description:** A bar chart showing weekly queue throughput (items added vs items marked complete).
**Data Source:** Already available in `ivanti_todo_queue.created_at` and `updated_at` + `status = 'complete'`:
```sql
SELECT
STRFTIME('%Y-W%W', created_at) AS week,
COUNT(*) AS items_added,
SUM(CASE WHEN status = 'complete' THEN 1 ELSE 0 END) AS items_completed
FROM ivanti_todo_queue
GROUP BY week
ORDER BY week ASC;
```
**Chart Type:** Grouped bar chart (weekly)
**Value-add:** Measures operational pace of the team's workflow action throughput
---
## Tier 3 Recommendations — Structural Additions (Future Consideration)
These require more significant changes but would provide powerful long-term reporting.
---
### 3.1 Finding Age / Dwell Time Distribution
**Description:** A histogram showing how long open findings have been open (age in days). The `lastFoundOn` field exists in the Ivanti findings JSON but is not persisted to a structured table.
**Requirement:** Parse and store `lastFoundOn` from findings JSON into a structured column during sync.
**Value-add:** Highlights findings that have been open for 90+ days — high-priority remediation targets.
---
### 3.2 SLA Breach Trends
**Description:** Track how many findings breach SLA (Due Date exceeded) over time. Currently SLA status is computed in the frontend on-the-fly.
**Requirement:** Add SLA breach tracking during sync — stamp findings that cross SLA date.
**Value-add:** Compliance and audit reporting for SLA adherence metrics.
---
## Recommended Implementation Order
| Priority | Chart | Effort | Impact |
|----------|-------|--------|--------|
| 1 | 1.2 — New/Recurring/Resolved bar chart | Low (data ready) | High |
| 2 | 1.1 — Compliance trend line | Low (data ready) | High |
| 3 | 1.3 — Team health multi-line | Low (data ready) | High |
| 4 | 2.1 — Ivanti open/closed history | Medium (new table) | Very High |
| 5 | 1.4 — MTTR per team | Low (data ready) | Medium |
| 6 | 1.6 — Archer ticket pipeline | Low (data ready) | Medium |
| 7 | 2.3 — Queue velocity | Low (data ready) | Medium |
| 8 | 1.5 — Recurring findings heatmap | Low (data ready) | Medium |
| 9 | 2.2 — FP workflow snapshots | Medium (new table) | Medium |
| 10 | 1.7 — Category breakdown | Low (data ready) | LowMedium |
---
## Charting Library Consideration
The current implementation uses **hand-rolled SVG donut charts** (no external library). For time-series line/bar/area charts, the team should decide:
| Option | Pros | Cons |
|--------|------|------|
| **Continue hand-rolled SVG** | Zero dependencies, full style control | Significant effort for axes, labels, tooltips |
| **Recharts** (React-native) | Well-matched to React 19, composable, responsive | ~500KB dependency |
| **Chart.js via react-chartjs-2** | Mature, widely documented | Less React-idiomatic |
| **Lightweight: uPlot or Chart.xkcd** | Very small bundle | Less community support |
**Recommendation:** Recharts aligns best with the React 19 stack and allows declaring charts as JSX components consistent with the existing code style. It supports all chart types listed above.
---
## Notes for Director Review
- All **Tier 1** recommendations can be implemented with zero database migrations — the data is already there.
- The **single highest-value addition** is `2.1 — Ivanti open/closed count history`, as it captures the most direct remediation progress metric. It only requires one new table and one line added to the sync handler.
- **Compliance charts (1.11.5)** will only be meaningful once multiple compliance uploads have been committed. If only 12 uploads exist currently, the trend will not show much until more data accumulates — but building the charts now means data will automatically populate them.
- All queries listed above have been validated against the actual database schema.
---
*Next step: Review with director, confirm priority order, then schedule sprint for implementation.*

View File

@@ -12,6 +12,7 @@
"react-dom": "^19.2.4",
"react-markdown": "^10.1.0",
"react-scripts": "5.0.1",
"recharts": "^3.8.1",
"web-vitals": "^2.1.4",
"xlsx": "^0.18.5"
},

View File

@@ -6,11 +6,9 @@ import UserMenu from './components/UserMenu';
import UserManagement from './components/UserManagement';
import AuditLog from './components/AuditLog';
import NvdSyncModal from './components/NvdSyncModal';
import KnowledgeBaseModal from './components/KnowledgeBaseModal';
import KnowledgeBaseViewer from './components/KnowledgeBaseViewer';
import NavDrawer from './components/NavDrawer';
import CalendarWidget from './components/CalendarWidget';
import ReportingPage from './components/pages/ReportingPage';
import VulnerabilityTriagePage from './components/pages/ReportingPage';
import KnowledgeBasePage from './components/pages/KnowledgeBasePage';
import ExportsPage from './components/pages/ExportsPage';
import CompliancePage from './components/pages/CompliancePage';
@@ -185,9 +183,6 @@ export default function App() {
const [showUserManagement, setShowUserManagement] = useState(false);
const [showAuditLog, setShowAuditLog] = useState(false);
const [showNvdSync, setShowNvdSync] = useState(false);
const [showKnowledgeBase, setShowKnowledgeBase] = useState(false);
const [knowledgeBaseArticles, setKnowledgeBaseArticles] = useState([]);
const [selectedKBArticle, setSelectedKBArticle] = useState(null);
const [newCVE, setNewCVE] = useState({
cve_id: '',
vendor: '',
@@ -311,19 +306,6 @@ export default function App() {
}
};
const fetchKnowledgeBaseArticles = async () => {
try {
const response = await fetch(`${API_BASE}/knowledge-base`, {
credentials: 'include'
});
if (!response.ok) throw new Error('Failed to fetch knowledge base articles');
const data = await response.json();
setKnowledgeBaseArticles(data);
} catch (err) {
console.error('Error fetching knowledge base articles:', err);
}
};
const fetchJiraTickets = async () => {
try {
const response = await fetch(`${API_BASE}/jira-tickets`, {
@@ -442,45 +424,6 @@ export default function App() {
alert(`Exporting ${selectedDocuments.length} documents for report attachment`);
};
const handleViewKBArticle = async (articleId) => {
try {
const response = await fetch(`${API_BASE}/knowledge-base/${articleId}`, {
credentials: 'include'
});
if (!response.ok) throw new Error('Failed to fetch article');
const article = await response.json();
setSelectedKBArticle(article);
} catch (err) {
console.error('Error fetching knowledge base article:', err);
setError('Failed to load article');
}
};
const handleDownloadKBArticle = async (id, filename) => {
try {
const response = await fetch(`${API_BASE}/knowledge-base/${id}/download`, {
credentials: 'include'
});
if (!response.ok) throw new Error('Download failed');
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
} catch (err) {
console.error('Error downloading knowledge base article:', err);
setError('Failed to download document');
}
};
const handleAddCVE = async (e) => {
e.preventDefault();
try {
@@ -916,7 +859,6 @@ export default function App() {
fetchJiraTickets();
fetchArcherTickets();
fetchIvantiWorkflows();
fetchKnowledgeBaseArticles();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isAuthenticated]);
@@ -966,14 +908,14 @@ export default function App() {
currentPage={currentPage}
onNavigate={(page) => {
// Clear contextual filters when navigating directly via the nav drawer
if (page === 'reporting') { setCalendarFilter(null); setReportingExcFilter(null); }
if (page === 'triage') { setCalendarFilter(null); setReportingExcFilter(null); }
setCurrentPage(page);
}}
/>
{/* Scanning line effect */}
<div className="scan-line"></div>
<div className={`${currentPage === 'reporting' ? 'w-full' : 'max-w-7xl mx-auto'} relative z-10`}>
<div className={`${currentPage === 'triage' ? 'w-full' : 'max-w-7xl mx-auto'} relative z-10`}>
{/* Header */}
<div className="mb-8">
<div className="flex justify-between items-start mb-6">
@@ -1043,8 +985,8 @@ export default function App() {
</div>
{/* Page content */}
{currentPage === 'reporting' && <ReportingPage filterDate={calendarFilter} filterEXC={reportingExcFilter} />}
{currentPage === 'compliance' && <CompliancePage />}
{currentPage === 'triage' && <VulnerabilityTriagePage filterDate={calendarFilter} filterEXC={reportingExcFilter} />}
{currentPage === 'compliance' && <CompliancePage onNavigate={setCurrentPage} />}
{currentPage === 'knowledge-base' && <KnowledgeBasePage />}
{currentPage === 'exports' && <ExportsPage />}
@@ -1063,14 +1005,6 @@ export default function App() {
<NvdSyncModal onClose={() => setShowNvdSync(false)} onSyncComplete={() => fetchCVEs()} />
)}
{/* Knowledge Base Modal */}
{showKnowledgeBase && (
<KnowledgeBaseModal
onClose={() => setShowKnowledgeBase(false)}
onUpdate={fetchKnowledgeBaseArticles}
/>
)}
{/* Add CVE Modal */}
{showAddCVE && (
<div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
@@ -1661,89 +1595,10 @@ export default function App() {
</div>
)}
{/* Three Column Layout - Home page only */}
{/* Two Column Layout - Home page only */}
{currentPage === 'home' && <div className="grid grid-cols-12 gap-6">
{/* LEFT PANEL - Wiki/Knowledge Base */}
<div className="col-span-12 lg:col-span-3 space-y-4">
<div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '3px solid #10B981'}} className="rounded-lg">
<div className="flex items-center justify-between mb-4">
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#10B981', marginBottom: '0', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(16, 185, 129, 0.4)' }}>
Knowledge Base
</h2>
{(user?.role === 'admin' || user?.role === 'editor') && (
<button
onClick={() => setShowKnowledgeBase(true)}
className="intel-button intel-button-small"
style={{ fontSize: '0.75rem', padding: '0.375rem 0.75rem' }}
title="Manage Knowledge Base"
>
<Plus className="w-3 h-3" />
</button>
)}
</div>
{/* Knowledge Base Entries */}
<div className="space-y-3">
{knowledgeBaseArticles.length === 0 ? (
<div className="text-center py-8" style={{ color: '#64748B' }}>
<FileText className="w-12 h-12 mx-auto mb-2 opacity-50" />
<p className="text-sm">No documents yet</p>
{(user?.role === 'admin' || user?.role === 'editor') && (
<button
onClick={() => setShowKnowledgeBase(true)}
className="intel-button intel-button-small mt-3"
>
Add First Document
</button>
)}
</div>
) : (
knowledgeBaseArticles.slice(0, 5).map((article) => (
<div
key={article.id}
onClick={() => handleViewKBArticle(article.id)}
style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }}
className="hover:border-intel-success"
>
<h3 className="text-white font-semibold text-sm mb-1 font-mono">{article.title}</h3>
{article.description && (
<p className="text-gray-400 text-xs mb-2 line-clamp-2">{article.description}</p>
)}
<div className="flex items-center justify-between">
<span className="text-xs text-intel-success font-mono">
{new Date(article.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
</span>
{article.category && article.category !== 'General' && (
<span className="text-xs px-2 py-0.5 rounded" style={{ background: 'rgba(16, 185, 129, 0.2)', color: '#10B981' }}>
{article.category}
</span>
)}
</div>
</div>
))
)}
{knowledgeBaseArticles.length > 5 && (
<button
onClick={() => setShowKnowledgeBase(true)}
className="text-xs text-center w-full py-2"
style={{ color: '#10B981' }}
>
View all {knowledgeBaseArticles.length} documents
</button>
)}
</div>
</div>
</div>
{/* CENTER PANEL - Main Content */}
<div className="col-span-12 lg:col-span-6 space-y-4">
{/* Knowledge Base Viewer */}
{selectedKBArticle ? (
<KnowledgeBaseViewer
article={selectedKBArticle}
onClose={() => setSelectedKBArticle(null)}
/>
) : (
<div className="col-span-12 lg:col-span-9 space-y-4">
<>
{/* Quick Check */}
<div style={{...STYLES.intelCard, padding: '1.5rem'}} className="rounded-lg">
@@ -2216,7 +2071,6 @@ export default function App() {
</div>
)}
</>
)}
</div>
{/* End Center Panel */}
@@ -2231,7 +2085,7 @@ export default function App() {
<CalendarWidget
onDateClick={(dateStr) => {
setCalendarFilter(dateStr);
setCurrentPage('reporting');
setCurrentPage('triage');
}}
/>
</div>
@@ -2337,7 +2191,7 @@ export default function App() {
</a>
<div className="flex gap-1">
<button
onClick={() => { setReportingExcFilter(ticket.exc_number); setCurrentPage('reporting'); }}
onClick={() => { setReportingExcFilter(ticket.exc_number); setCurrentPage('triage'); }}
title="View findings referencing this ticket"
className="text-gray-400 hover:text-sky-400 transition-colors"
>

View File

@@ -3,7 +3,7 @@ import { X, Home, BarChart2, BookOpen, Download, ShieldCheck } from 'lucide-reac
const NAV_ITEMS = [
{ id: 'home', label: 'Home', icon: Home, color: '#0EA5E9', description: 'Main dashboard' },
{ id: 'reporting', label: 'Reporting', icon: BarChart2, color: '#F59E0B', description: 'Reports & analytics' },
{ id: 'triage', label: 'Vuln Triage', icon: BarChart2, color: '#F59E0B', description: 'Active findings & CVE triage' },
{ id: 'compliance', label: 'Compliance', icon: ShieldCheck, color: '#14B8A6', description: 'AEO posture & metrics' },
{ id: 'knowledge-base', label: 'Knowledge Base', icon: BookOpen, color: '#10B981', description: 'Articles & documentation' },
{ id: 'exports', label: 'Exports', icon: Download, color: '#8B5CF6', description: 'Export data & reports' },

View File

@@ -0,0 +1,424 @@
// ComplianceChartsPanel.js
// Tier-1 time-based compliance charts using Recharts.
// Charts rendered: Active Findings Over Time, Change per Cycle,
// Team Health, MTTR by Team, Persistent Findings, Archer Pipeline.
import React, { useState, useEffect, useMemo } from 'react';
import {
LineChart, Line,
BarChart, Bar,
XAxis, YAxis, CartesianGrid,
Tooltip, Legend,
ResponsiveContainer,
} from 'recharts';
import { TrendingUp, ChevronDown, ChevronUp, Loader } from 'lucide-react';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
const TEAL = '#14B8A6';
const TEAM_COLORS = {
'STEAM': '#0EA5E9',
'ACCESS-ENG': '#F59E0B',
'ACCESS-OPS': '#8B5CF6',
'INTELDEV': '#10B981',
};
const ARCHER_STATUS_COLORS = {
'Draft': '#475569',
'Open': '#0EA5E9',
'Under Review': '#F59E0B',
'Accepted': '#10B981',
};
// ---------------------------------------------------------------------------
// Shared style tokens
// ---------------------------------------------------------------------------
const AXIS_STYLE = { fontFamily: 'monospace', fontSize: '0.6rem', fill: '#475569' };
const GRID_STYLE = { stroke: 'rgba(255,255,255,0.05)', strokeDasharray: '3 3' };
const LEGEND_STYLE = { fontFamily: 'monospace', fontSize: '0.62rem', color: '#64748B' };
// ---------------------------------------------------------------------------
// Custom dark tooltip
// ---------------------------------------------------------------------------
function DarkTooltip({ active, payload, label }) {
if (!active || !payload?.length) return null;
return (
<div style={{
background: 'rgba(10,17,32,0.97)',
border: '1px solid rgba(20,184,166,0.3)',
borderRadius: '0.375rem',
padding: '0.5rem 0.75rem',
fontFamily: 'monospace',
fontSize: '0.7rem',
minWidth: '130px',
}}>
<div style={{ color: TEAL, marginBottom: '0.3rem', fontWeight: '700', fontSize: '0.65rem' }}>
{label}
</div>
{payload.map(p => (
<div key={p.dataKey} style={{ color: p.color || '#94A3B8', marginTop: '0.125rem', display: 'flex', justifyContent: 'space-between', gap: '0.75rem' }}>
<span style={{ opacity: 0.8 }}>{p.name}</span>
<span style={{ fontWeight: '700' }}>
{typeof p.value === 'number'
? Number.isInteger(p.value) ? p.value : p.value.toFixed(1)
: p.value}
</span>
</div>
))}
</div>
);
}
// ---------------------------------------------------------------------------
// Chart card wrapper
// ---------------------------------------------------------------------------
function ChartCard({ title, subtitle, children }) {
return (
<div style={{
background: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
border: '1px solid rgba(20,184,166,0.15)',
borderRadius: '0.5rem',
padding: '1rem 1.125rem 0.875rem',
}}>
<div style={{ marginBottom: '0.75rem' }}>
<div style={{
fontFamily: 'monospace', fontSize: '0.72rem', fontWeight: '700',
color: '#CBD5E1', textTransform: 'uppercase', letterSpacing: '0.08em',
}}>
{title}
</div>
{subtitle && (
<div style={{ fontSize: '0.62rem', color: '#334155', marginTop: '0.2rem', fontFamily: 'monospace' }}>
{subtitle}
</div>
)}
</div>
{children}
</div>
);
}
// ---------------------------------------------------------------------------
// Empty / no-data state
// ---------------------------------------------------------------------------
function NoData({ msg }) {
return (
<div style={{
display: 'flex', alignItems: 'center', justifyContent: 'center',
height: '160px', color: '#334155',
fontFamily: 'monospace', fontSize: '0.72rem',
border: '1px dashed rgba(20,184,166,0.1)',
borderRadius: '0.375rem',
}}>
{msg || 'No data yet — upload compliance reports to populate this chart'}
</div>
);
}
// ---------------------------------------------------------------------------
// Shorten a YYYY-MM-DD string to MM/DD/YY
// ---------------------------------------------------------------------------
function fmtDate(d) {
if (!d) return '';
const p = d.split('-');
if (p.length === 3) return `${p[1]}/${p[2]}/${p[0].slice(2)}`;
return d;
}
// ---------------------------------------------------------------------------
// Chart 1 — Active Findings Over Time (line, total + per team)
// ---------------------------------------------------------------------------
function ActiveTrendChart({ data }) {
if (data.length < 2) return <NoData />;
return (
<ResponsiveContainer width="100%" height={210}>
<LineChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
<CartesianGrid {...GRID_STYLE} />
<XAxis dataKey="date" tick={AXIS_STYLE} />
<YAxis tick={AXIS_STYLE} allowDecimals={false} />
<Tooltip content={<DarkTooltip />} />
<Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
<Line
type="monotone" dataKey="total_active" name="Total"
stroke={TEAL} strokeWidth={2}
dot={{ r: 3, fill: TEAL, strokeWidth: 0 }}
activeDot={{ r: 5 }}
/>
{Object.entries(TEAM_COLORS).map(([team, color]) => (
<Line
key={team}
type="monotone" dataKey={team} name={team}
stroke={color} strokeWidth={1.5}
dot={false} strokeDasharray="5 3"
activeDot={{ r: 4, fill: color }}
/>
))}
</LineChart>
</ResponsiveContainer>
);
}
// ---------------------------------------------------------------------------
// Chart 2 — New / Recurring / Resolved per cycle (stacked + grouped bar)
// ---------------------------------------------------------------------------
function DeltaChart({ data }) {
if (data.length === 0) return <NoData />;
return (
<ResponsiveContainer width="100%" height={210}>
<BarChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
<CartesianGrid {...GRID_STYLE} />
<XAxis dataKey="date" tick={AXIS_STYLE} />
<YAxis tick={AXIS_STYLE} allowDecimals={false} />
<Tooltip content={<DarkTooltip />} />
<Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
<Bar dataKey="new_count" name="New" stackId="in" fill="#EF4444" fillOpacity={0.85} radius={[0,0,0,0]} />
<Bar dataKey="recurring_count" name="Recurring" stackId="in" fill="#F59E0B" fillOpacity={0.85} radius={[2,2,0,0]} />
<Bar dataKey="resolved_count" name="Resolved" fill="#10B981" fillOpacity={0.8} radius={[2,2,2,2]} />
</BarChart>
</ResponsiveContainer>
);
}
// ---------------------------------------------------------------------------
// Chart 3 — Team Health Multi-Line
// ---------------------------------------------------------------------------
function TeamTrendChart({ data }) {
if (data.length < 2) return <NoData />;
return (
<ResponsiveContainer width="100%" height={210}>
<LineChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
<CartesianGrid {...GRID_STYLE} />
<XAxis dataKey="date" tick={AXIS_STYLE} />
<YAxis tick={AXIS_STYLE} allowDecimals={false} />
<Tooltip content={<DarkTooltip />} />
<Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
{Object.entries(TEAM_COLORS).map(([team, color]) => (
<Line
key={team}
type="monotone" dataKey={team} name={team}
stroke={color} strokeWidth={2}
dot={{ r: 3, fill: color, strokeWidth: 0 }}
activeDot={{ r: 5 }}
/>
))}
</LineChart>
</ResponsiveContainer>
);
}
// ---------------------------------------------------------------------------
// Chart 4 — MTTR by Team (horizontal bar)
// ---------------------------------------------------------------------------
function MttrChart({ data }) {
if (data.length === 0) return <NoData msg="No resolved findings yet — MTTR will appear after items are remediated" />;
return (
<ResponsiveContainer width="100%" height={Math.max(160, data.length * 44 + 40)}>
<BarChart data={data} layout="vertical" margin={{ top: 4, right: 48, bottom: 0, left: 4 }}>
<CartesianGrid {...GRID_STYLE} />
<XAxis type="number" tick={AXIS_STYLE} unit=" d" />
<YAxis type="category" dataKey="team" tick={AXIS_STYLE} width={86} />
<Tooltip content={<DarkTooltip />} />
<Bar dataKey="avg_days" name="Avg Days" fill={TEAL} fillOpacity={0.8} radius={[0, 3, 3, 0]}
label={{ position: 'right', style: { ...AXIS_STYLE, fill: '#64748B' }, formatter: v => `${v}d` }}
/>
</BarChart>
</ResponsiveContainer>
);
}
// ---------------------------------------------------------------------------
// Chart 5 — Most Persistent Findings (horizontal bar by seen_count)
// ---------------------------------------------------------------------------
function RecurringChart({ data }) {
if (data.length === 0) return <NoData />;
const top10 = data.slice(0, 10).map(r => ({
...r,
label: r.metric_id.length > 18 ? r.metric_id.slice(0, 18) + '…' : r.metric_id,
}));
return (
<ResponsiveContainer width="100%" height={Math.max(160, top10.length * 28 + 40)}>
<BarChart data={top10} layout="vertical" margin={{ top: 4, right: 48, bottom: 0, left: 4 }}>
<CartesianGrid {...GRID_STYLE} />
<XAxis type="number" tick={AXIS_STYLE} unit=" cycles" allowDecimals={false} />
<YAxis type="category" dataKey="label" tick={AXIS_STYLE} width={110} />
<Tooltip content={<DarkTooltip />} formatter={(val, name, props) => [
`${val} cycles (${props.payload.host_count} host${props.payload.host_count !== 1 ? 's' : ''})`, props.payload.team
]} />
<Bar dataKey="seen_count" name="Cycles Seen" fill="#F59E0B" fillOpacity={0.85} radius={[0, 3, 3, 0]}
label={{ position: 'right', style: { ...AXIS_STYLE, fill: '#64748B' }, formatter: v => `${v}×` }}
/>
</BarChart>
</ResponsiveContainer>
);
}
// ---------------------------------------------------------------------------
// Chart 6 — Archer Exception Ticket Pipeline (stacked bar by creation date)
// ---------------------------------------------------------------------------
function ArcherPipelineChart({ data }) {
if (data.length === 0) return <NoData msg="No Archer tickets recorded yet" />;
return (
<ResponsiveContainer width="100%" height={210}>
<BarChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
<CartesianGrid {...GRID_STYLE} />
<XAxis dataKey="date" tick={AXIS_STYLE} />
<YAxis tick={AXIS_STYLE} allowDecimals={false} />
<Tooltip content={<DarkTooltip />} />
<Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
{Object.entries(ARCHER_STATUS_COLORS).map(([status, color], i, arr) => (
<Bar
key={status}
dataKey={status} name={status} stackId="s"
fill={color} fillOpacity={0.85}
radius={i === arr.length - 1 ? [2, 2, 0, 0] : [0, 0, 0, 0]}
/>
))}
</BarChart>
</ResponsiveContainer>
);
}
// ---------------------------------------------------------------------------
// Main panel
// ---------------------------------------------------------------------------
export default function ComplianceChartsPanel() {
const [collapsed, setCollapsed] = useState(false);
const [loading, setLoading] = useState(true);
const [trends, setTrends] = useState([]);
const [mttr, setMttr] = useState([]);
const [recurring, setRecurring] = useState([]);
const [archerRaw, setArcherRaw] = useState([]);
useEffect(() => {
let cancelled = false;
const load = async () => {
setLoading(true);
try {
const [tRes, mRes, rRes, aRes] = await Promise.all([
fetch(`${API_BASE}/compliance/trends`, { credentials: 'include' }),
fetch(`${API_BASE}/compliance/mttr`, { credentials: 'include' }),
fetch(`${API_BASE}/compliance/top-recurring`, { credentials: 'include' }),
fetch(`${API_BASE}/archer-tickets/status-trend`, { credentials: 'include' }),
]);
if (cancelled) return;
if (tRes.ok) { const d = await tRes.json(); setTrends(d.trends || []); }
if (mRes.ok) { const d = await mRes.json(); setMttr(d.mttr || []); }
if (rRes.ok) { const d = await rRes.json(); setRecurring(d.items || []); }
if (aRes.ok) { const d = await aRes.json(); setArcherRaw(d.statusTrend || []); }
} catch { /* silent — charts will show no-data state */ }
finally { if (!cancelled) setLoading(false); }
};
load();
return () => { cancelled = true; };
}, []);
// Format trend rows — add short date label
const formattedTrends = useMemo(
() => trends.map(t => ({ ...t, date: fmtDate(t.report_date) })),
[trends]
);
// Pivot archer raw rows → one object per date
const archerByDate = useMemo(() => {
if (!archerRaw.length) return [];
const map = {};
archerRaw.forEach(r => {
if (!map[r.date]) map[r.date] = { date: fmtDate(r.date) };
map[r.date][r.status] = r.count;
});
return Object.values(map).sort((a, b) => a.date.localeCompare(b.date));
}, [archerRaw]);
return (
<div style={{ marginBottom: '1.5rem' }}>
{/* ── Section header / collapse toggle ──────────────────────── */}
<button
onClick={() => setCollapsed(c => !c)}
style={{
width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
background: 'none', border: 'none', cursor: 'pointer',
padding: '0 0 0.625rem 0',
borderBottom: collapsed ? 'none' : '1px solid rgba(20,184,166,0.1)',
marginBottom: collapsed ? 0 : '0.875rem',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<TrendingUp style={{ width: '14px', height: '14px', color: TEAL }} />
<span style={{
fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '700',
color: '#334155', textTransform: 'uppercase', letterSpacing: '0.1em',
}}>
Historical Trends
</span>
{loading && (
<Loader style={{ width: '12px', height: '12px', color: '#334155', animation: 'spin 1s linear infinite' }} />
)}
</div>
{collapsed
? <ChevronDown style={{ width: '14px', height: '14px', color: '#334155' }} />
: <ChevronUp style={{ width: '14px', height: '14px', color: '#334155' }} />
}
</button>
{!collapsed && (
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(420px, 1fr))',
gap: '1rem',
}}>
{/* 1. Active findings over time */}
<ChartCard
title="Active Findings Over Time"
subtitle="Total non-compliant items per report cycle (solid) + per team (dashed)"
>
<ActiveTrendChart data={formattedTrends} />
</ChartCard>
{/* 2. New / Recurring / Resolved delta per cycle */}
<ChartCard
title="Change per Report Cycle"
subtitle="New (red) and recurring (amber) stacked; resolved (green) as separate bars"
>
<DeltaChart data={formattedTrends} />
</ChartCard>
{/* 3. Team health multi-line */}
<ChartCard
title="Team Compliance Health"
subtitle="Active findings per team per cycle — lower is better"
>
<TeamTrendChart data={formattedTrends} />
</ChartCard>
{/* 4. MTTR per team */}
<ChartCard
title="Mean Time to Resolution"
subtitle="Average calendar days between first-seen and resolved, by team"
>
<MttrChart data={mttr} />
</ChartCard>
{/* 5. Most persistent / recurring findings */}
<ChartCard
title="Most Persistent Findings"
subtitle="Active items with the highest recurrence count (top 10)"
>
<RecurringChart data={recurring} />
</ChartCard>
{/* 6. Archer ticket pipeline */}
<ChartCard
title="Archer Exception Pipeline"
subtitle="Exception ticket status distribution by creation date"
>
<ArcherPipelineChart data={archerByDate} />
</ChartCard>
</div>
)}
</div>
);
}

View File

@@ -37,7 +37,7 @@ function MetricChip({ metricId, category, status }) {
);
}
export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded }) {
export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded, onNavigate }) {
const [detail, setDetail] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
@@ -158,7 +158,7 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded }
{activeMetrics.length > 0 && (
<Section title="Failing Metrics" icon={<Shield style={{ width: '14px', height: '14px' }} />}>
{activeMetrics.map(m => (
<MetricRow key={m.metric_id} metric={m} />
<MetricRow key={m.metric_id} metric={m} onNavigate={onNavigate} />
))}
</Section>
)}
@@ -288,10 +288,14 @@ function Section({ title, icon, children, muted, grow }) {
);
}
function MetricRow({ metric, resolved }) {
function MetricRow({ metric, resolved, onNavigate }) {
const color = resolved ? '#475569' : categoryColor(metric.category);
const extra = metric.extra || {};
const ivantiId = (!resolved && metric.metric_id?.startsWith('2.3'))
? (extra['Ivanti_Vulnerability_ID'] || null)
: null;
// Surface the most useful extra fields per metric type
const highlights = [];
if (extra['CVEs_Associated']) highlights.push({ label: 'CVEs', value: extra['CVEs_Associated'] });
@@ -317,10 +321,38 @@ function MetricRow({ metric, resolved }) {
{resolved && <span style={{ fontSize: '0.68rem', color: '#334155', fontFamily: 'monospace' }}>resolved {metric.resolved_on || ''}</span>}
</div>
{metric.metric_desc && (
<div style={{ fontSize: '0.72rem', color: '#475569', marginBottom: highlights.length ? '0.4rem' : 0, lineHeight: 1.4 }}>
<div style={{ fontSize: '0.72rem', color: '#475569', marginBottom: (highlights.length || ivantiId) ? '0.4rem' : 0, lineHeight: 1.4 }}>
{metric.metric_desc.length > 100 ? metric.metric_desc.slice(0, 100) + '…' : metric.metric_desc}
</div>
)}
{ivantiId && (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: highlights.length ? '0.25rem' : 0 }}>
<div style={{ display: 'flex', gap: '0.4rem', alignItems: 'center', minWidth: 0 }}>
<span style={{ fontSize: '0.68rem', color: '#475569', fontFamily: 'monospace', flexShrink: 0 }}>Ivanti ID</span>
<span style={{ fontSize: '0.68rem', color: '#94A3B8', fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{ivantiId}</span>
</div>
{onNavigate && (
<button
onClick={e => { e.stopPropagation(); onNavigate('triage'); }}
style={{
flexShrink: 0, marginLeft: '0.5rem',
background: 'rgba(14,165,233,0.1)',
border: '1px solid rgba(14,165,233,0.4)',
borderRadius: '0.25rem',
color: '#0EA5E9',
fontSize: '0.65rem', fontFamily: 'monospace',
padding: '0.2rem 0.5rem',
cursor: 'pointer', whiteSpace: 'nowrap',
transition: 'all 0.15s',
}}
onMouseEnter={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.18)'; e.currentTarget.style.borderColor = 'rgba(14,165,233,0.7)'; }}
onMouseLeave={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.1)'; e.currentTarget.style.borderColor = 'rgba(14,165,233,0.4)'; }}
>
View in Triage
</button>
)}
</div>
)}
{highlights.map(h => (
<div key={h.label} style={{ display: 'flex', gap: '0.4rem', marginTop: '0.25rem' }}>
<span style={{ fontSize: '0.68rem', color: '#475569', fontFamily: 'monospace', minWidth: '48px' }}>{h.label}</span>

View File

@@ -3,6 +3,7 @@ import { Upload, MessageSquare, RefreshCw, AlertCircle, Loader } from 'lucide-re
import { useAuth } from '../../contexts/AuthContext';
import ComplianceUploadModal from './ComplianceUploadModal';
import ComplianceDetailPanel from './ComplianceDetailPanel';
import ComplianceChartsPanel from './ComplianceChartsPanel';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
const TEAL = '#14B8A6';
@@ -29,10 +30,6 @@ const CATEGORY_COLORS = {
'Endpoint Protection': '#F97316',
};
function metricColor(metricId, category) {
return CATEGORY_COLORS[category] || '#94A3B8';
}
function statusColor(status) {
return STATUS_COLOR[status] || '#EF4444';
}
@@ -145,7 +142,7 @@ function SeenBadge({ count }) {
// ---------------------------------------------------------------------------
// Main Page
// ---------------------------------------------------------------------------
export default function CompliancePage() {
export default function CompliancePage({ onNavigate }) {
const { canWrite } = useAuth();
const [activeTeam, setActiveTeam] = useState('STEAM');
@@ -209,10 +206,6 @@ export default function CompliancePage() {
const metrics = teamMetrics(summary.entries, activeTeam);
const lastUpload = summary.upload;
// Active tab counts (pre-filter for display)
const activeCount = activeTab === 'active' ? filteredDevices.length : null;
const resolvedCount = activeTab === 'resolved' ? filteredDevices.length : null;
return (
<div style={{ paddingBottom: '2rem' }}>
@@ -331,6 +324,9 @@ export default function CompliancePage() {
</div>
) : null}
{/* ── Historical trend charts ──────────────────────────────── */}
<ComplianceChartsPanel />
{/* ── Device table ─────────────────────────────────────────── */}
<div style={{
background: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
@@ -432,6 +428,7 @@ export default function CompliancePage() {
hostname={selectedHost}
onClose={() => setSelectedHost(null)}
onNoteAdded={refresh}
onNavigate={onNavigate}
/>
)}

View File

@@ -1,5 +1,5 @@
import React, { useState, useRef } from 'react';
import { X, Upload, CheckCircle, AlertCircle, Loader, FileSpreadsheet } from 'lucide-react';
import { X, CheckCircle, AlertCircle, Loader, FileSpreadsheet } from 'lucide-react';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';

View File

@@ -0,0 +1,207 @@
// IvantiCountsChart.js
// Collapsible trend panel for the Vulnerability Triage page.
// Shows open vs closed Ivanti finding counts over time (last sync per day).
import React, { useState, useEffect, useMemo } from 'react';
import {
LineChart, Line,
XAxis, YAxis, CartesianGrid,
Tooltip, Legend, ReferenceLine,
ResponsiveContainer,
} from 'recharts';
import { TrendingUp, ChevronDown, ChevronUp, Loader } from 'lucide-react';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
const AMBER = '#F59E0B';
const SKY = '#0EA5E9';
const GREEN = '#10B981';
const RED = '#EF4444';
const AXIS_STYLE = { fontFamily: 'monospace', fontSize: '0.6rem', fill: '#475569' };
const GRID_STYLE = { stroke: 'rgba(255,255,255,0.05)', strokeDasharray: '3 3' };
const LEGEND_STYLE = { fontFamily: 'monospace', fontSize: '0.62rem', color: '#64748B' };
// ---------------------------------------------------------------------------
// Custom dark tooltip
// ---------------------------------------------------------------------------
function DarkTooltip({ active, payload, label }) {
if (!active || !payload?.length) return null;
const openVal = payload.find(p => p.dataKey === 'open_count')?.value;
const closedVal = payload.find(p => p.dataKey === 'closed_count')?.value;
return (
<div style={{
background: 'rgba(10,17,32,0.97)',
border: '1px solid rgba(245,158,11,0.3)',
borderRadius: '0.375rem',
padding: '0.5rem 0.75rem',
fontFamily: 'monospace',
fontSize: '0.7rem',
minWidth: '160px',
}}>
<div style={{ color: AMBER, marginBottom: '0.35rem', fontWeight: '700', fontSize: '0.65rem' }}>
{label}
</div>
{payload.map(p => (
<div key={p.dataKey} style={{ color: p.color, marginTop: '0.125rem', display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
<span style={{ opacity: 0.8 }}>{p.name}</span>
<span style={{ fontWeight: '700' }}>{p.value}</span>
</div>
))}
{openVal != null && closedVal != null && (
<div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', marginTop: '0.35rem', paddingTop: '0.3rem', color: '#475569', display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
<span>total</span>
<span style={{ color: '#64748B', fontWeight: '600' }}>{openVal + closedVal}</span>
</div>
)}
</div>
);
}
// ---------------------------------------------------------------------------
// Shorten YYYY-MM-DD to MM/DD/YY
// ---------------------------------------------------------------------------
function fmtDate(d) {
if (!d) return '';
const p = d.split('-');
if (p.length === 3) return `${p[1]}/${p[2]}/${p[0].slice(2)}`;
return d;
}
// ---------------------------------------------------------------------------
// Main component
// ---------------------------------------------------------------------------
export default function IvantiCountsChart() {
const [collapsed, setCollapsed] = useState(false);
const [loading, setLoading] = useState(true);
const [history, setHistory] = useState([]);
useEffect(() => {
let cancelled = false;
const load = async () => {
setLoading(true);
try {
const res = await fetch(`${API_BASE}/ivanti/findings/counts/history`, { credentials: 'include' });
if (res.ok && !cancelled) {
const d = await res.json();
setHistory(d.history || []);
}
} catch { /* silent — chart shows no-data state */ }
finally { if (!cancelled) setLoading(false); }
};
load();
return () => { cancelled = true; };
}, []);
const chartData = useMemo(
() => history.map(r => ({ ...r, date: fmtDate(r.date) })),
[history]
);
// Compute a simple delta label for the latest vs previous point
const deltaLabel = useMemo(() => {
if (chartData.length < 2) return null;
const latest = chartData[chartData.length - 1];
const prev = chartData[chartData.length - 2];
const delta = latest.open_count - prev.open_count;
if (delta === 0) return { text: 'no change in open', color: '#475569' };
if (delta < 0) return { text: `${Math.abs(delta)} open since ${prev.date}`, color: GREEN };
return { text: `${delta} open since ${prev.date}`, color: RED };
}, [chartData]);
return (
<div style={{ marginBottom: '1.25rem' }}>
{/* ── Header ────────────────────────────────────────────────── */}
<button
onClick={() => setCollapsed(c => !c)}
style={{
width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
background: 'none', border: 'none', cursor: 'pointer',
padding: '0 0 0.625rem 0',
borderBottom: collapsed ? 'none' : '1px solid rgba(245,158,11,0.1)',
marginBottom: collapsed ? 0 : '0.875rem',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<TrendingUp style={{ width: '14px', height: '14px', color: AMBER }} />
<span style={{
fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '700',
color: '#334155', textTransform: 'uppercase', letterSpacing: '0.1em',
}}>
Findings Trend
</span>
{loading && (
<Loader style={{ width: '12px', height: '12px', color: '#334155', animation: 'spin 1s linear infinite' }} />
)}
{!loading && deltaLabel && (
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', color: deltaLabel.color, marginLeft: '0.25rem' }}>
{deltaLabel.text}
</span>
)}
</div>
{collapsed
? <ChevronDown style={{ width: '14px', height: '14px', color: '#334155' }} />
: <ChevronUp style={{ width: '14px', height: '14px', color: '#334155' }} />
}
</button>
{!collapsed && (
<div style={{
background: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
border: '1px solid rgba(245,158,11,0.15)',
borderRadius: '0.5rem',
padding: '1rem 1.25rem 0.875rem',
}}>
<div style={{ marginBottom: '0.625rem', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
<div style={{ fontFamily: 'monospace', fontSize: '0.65rem', color: '#334155', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
Open vs Closed end-of-day snapshot per sync day
</div>
{chartData.length > 0 && (
<div style={{ fontFamily: 'monospace', fontSize: '0.62rem', color: '#334155' }}>
{chartData.length} day{chartData.length !== 1 ? 's' : ''} of data
</div>
)}
</div>
{chartData.length < 2 ? (
<div style={{
display: 'flex', alignItems: 'center', justifyContent: 'center',
height: '160px', color: '#334155',
fontFamily: 'monospace', fontSize: '0.72rem',
border: '1px dashed rgba(245,158,11,0.1)', borderRadius: '0.375rem',
}}>
{chartData.length === 0
? 'Trend data begins accumulating after the first sync — check back tomorrow'
: 'Need at least 2 days of syncs to display a trend'}
</div>
) : (
<ResponsiveContainer width="100%" height={220}>
<LineChart data={chartData} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
<CartesianGrid {...GRID_STYLE} />
<XAxis dataKey="date" tick={AXIS_STYLE} />
<YAxis tick={AXIS_STYLE} allowDecimals={false} />
<Tooltip content={<DarkTooltip />} />
<Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
<Line
type="monotone" dataKey="open_count" name="Open"
stroke={AMBER} strokeWidth={2}
dot={{ r: 3, fill: AMBER, strokeWidth: 0 }}
activeDot={{ r: 5 }}
/>
<Line
type="monotone" dataKey="closed_count" name="Closed"
stroke={SKY} strokeWidth={2}
dot={{ r: 3, fill: SKY, strokeWidth: 0 }}
activeDot={{ r: 5 }}
/>
</LineChart>
</ResponsiveContainer>
)}
</div>
)}
</div>
);
}

View File

@@ -1,25 +1,484 @@
import React from 'react';
import { BookOpen } from 'lucide-react';
// KnowledgeBasePage.js
// Full-page knowledge base library — browse, search, filter, and read
// articles inline. Upload and delete require editor/admin role.
// Reuses existing KnowledgeBaseViewer and KnowledgeBaseModal components.
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import {
BookOpen, Search, Upload, RefreshCw, Loader,
AlertCircle, FileText, File, Trash2, X,
} from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';
import KnowledgeBaseModal from '../KnowledgeBaseModal';
import KnowledgeBaseViewer from '../KnowledgeBaseViewer';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
const GREEN = '#10B981';
// ---------------------------------------------------------------------------
// Static config
// ---------------------------------------------------------------------------
const CATEGORY_COLORS = {
General: '#94A3B8',
Policy: '#0EA5E9',
Procedure: GREEN,
Guide: '#F59E0B',
Reference: '#8B5CF6',
};
const FILE_EXT_COLORS = {
pdf: '#EF4444',
md: '#10B981',
txt: '#94A3B8',
doc: '#0EA5E9',
docx: '#0EA5E9',
xls: '#10B981',
xlsx: '#10B981',
ppt: '#F97316',
pptx: '#F97316',
html: '#8B5CF6',
};
const CATEGORY_ORDER = ['Procedure', 'Guide', 'Policy', 'Reference', 'General'];
// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
function extOf(filename) {
return (filename || '').split('.').pop().toLowerCase();
}
function extColor(filename) {
return FILE_EXT_COLORS[extOf(filename)] || '#64748B';
}
function fmtSize(bytes) {
if (!bytes) return '';
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}
function fmtDate(str) {
if (!str) return '';
return new Date(str).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
}
function catColor(cat) {
return CATEGORY_COLORS[cat] || '#94A3B8';
}
// ---------------------------------------------------------------------------
// ArticleCard
// ---------------------------------------------------------------------------
function ArticleCard({ article, selected, onSelect, onDelete, canDelete }) {
const color = catColor(article.category);
const fileColor = extColor(article.file_name);
const ext = extOf(article.file_name).toUpperCase();
export default function KnowledgeBasePage() {
return (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '60vh' }}>
<div style={{ textAlign: 'center' }}>
<div style={{
width: '72px', height: '72px', borderRadius: '1rem', margin: '0 auto 1.5rem',
background: 'rgba(16, 185, 129, 0.1)',
border: '1px solid rgba(16, 185, 129, 0.3)',
display: 'flex', alignItems: 'center', justifyContent: 'center'
<div
onClick={() => onSelect(article)}
style={{
background: selected
? `linear-gradient(135deg,rgba(16,185,129,0.1) 0%,rgba(15,23,42,0.98) 100%)`
: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
border: `1.5px solid ${selected ? GREEN : 'rgba(16,185,129,0.12)'}`,
borderRadius: '0.5rem',
padding: '1rem',
cursor: 'pointer',
transition: 'all 0.15s',
position: 'relative',
display: 'flex',
flexDirection: 'column',
gap: '0.5rem',
}}
onMouseEnter={e => { if (!selected) e.currentTarget.style.borderColor = 'rgba(16,185,129,0.35)'; }}
onMouseLeave={e => { if (!selected) e.currentTarget.style.borderColor = 'rgba(16,185,129,0.12)'; }}
>
{/* File type badge + delete button */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{
fontFamily: 'monospace', fontSize: '0.58rem', fontWeight: '700',
color: fileColor, padding: '0.15rem 0.4rem',
background: `${fileColor}15`, borderRadius: '0.2rem',
border: `1px solid ${fileColor}30`,
}}>
<BookOpen style={{ width: '36px', height: '36px', color: '#10B981' }} />
{ext}
</span>
{canDelete && (
<button
onClick={e => { e.stopPropagation(); onDelete(article); }}
title="Delete article"
style={{
background: 'none', border: 'none', cursor: 'pointer',
color: '#334155', padding: '0.15rem',
borderRadius: '0.2rem', display: 'flex', alignItems: 'center',
}}
onMouseEnter={e => { e.currentTarget.style.color = '#EF4444'; }}
onMouseLeave={e => { e.currentTarget.style.color = '#334155'; }}
>
<Trash2 style={{ width: '12px', height: '12px' }} />
</button>
)}
</div>
{/* Title */}
<div style={{
fontFamily: 'monospace', fontSize: '0.82rem', fontWeight: '700',
color: selected ? GREEN : '#E2E8F0',
lineHeight: 1.3,
}}>
{article.title}
</div>
{/* Description */}
{article.description && (
<div style={{
fontSize: '0.7rem', color: '#475569',
lineHeight: 1.45, display: '-webkit-box',
WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
overflow: 'hidden',
}}>
{article.description}
</div>
)}
{/* Footer — category + date */}
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 'auto', paddingTop: '0.375rem', borderTop: '1px solid rgba(255,255,255,0.04)' }}>
<span style={{
fontFamily: 'monospace', fontSize: '0.6rem', fontWeight: '600',
color, padding: '0.15rem 0.4rem',
background: `${color}12`, borderRadius: '0.2rem',
border: `1px solid ${color}25`,
textTransform: 'uppercase', letterSpacing: '0.04em',
}}>
{article.category}
</span>
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
{article.file_size && (
<span style={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#334155' }}>
{fmtSize(article.file_size)}
</span>
)}
<span style={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#334155' }}>
{fmtDate(article.created_at)}
</span>
</div>
<h2 style={{ fontFamily: 'monospace', fontSize: '1.5rem', fontWeight: '700', color: '#10B981', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '0.5rem' }}>
Knowledge Base
</h2>
<p style={{ color: '#475569', fontSize: '0.875rem', fontFamily: 'monospace' }}>
Under construction coming soon
</p>
</div>
</div>
);
}
// ---------------------------------------------------------------------------
// Empty state
// ---------------------------------------------------------------------------
function EmptyState({ hasFilter, onClear }) {
return (
<div style={{
gridColumn: '1 / -1',
display: 'flex', flexDirection: 'column', alignItems: 'center',
justifyContent: 'center', padding: '4rem 2rem',
border: '1px dashed rgba(16,185,129,0.15)', borderRadius: '0.5rem',
color: '#334155',
}}>
<BookOpen style={{ width: '36px', height: '36px', marginBottom: '1rem', opacity: 0.4 }} />
<div style={{ fontFamily: 'monospace', fontSize: '0.8rem', marginBottom: '0.375rem' }}>
{hasFilter ? 'No articles match your search' : 'No articles yet'}
</div>
{hasFilter ? (
<button onClick={onClear} style={{
background: 'none', border: 'none', cursor: 'pointer',
color: GREEN, fontFamily: 'monospace', fontSize: '0.72rem',
marginTop: '0.375rem',
}}>
Clear filters
</button>
) : (
<div style={{ fontFamily: 'monospace', fontSize: '0.7rem', color: '#475569' }}>
Upload a document to get started
</div>
)}
</div>
);
}
// ---------------------------------------------------------------------------
// Main page
// ---------------------------------------------------------------------------
export default function KnowledgeBasePage() {
const { canWrite } = useAuth();
const [articles, setArticles] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [search, setSearch] = useState('');
const [activeCategory, setActiveCategory] = useState('All');
const [selected, setSelected] = useState(null);
const [showUpload, setShowUpload] = useState(false);
// -------------------------------------------------------------------------
// Fetch
// -------------------------------------------------------------------------
const fetchArticles = useCallback(async () => {
setLoading(true);
setError(null);
try {
const res = await fetch(`${API_BASE}/knowledge-base`, { credentials: 'include' });
if (!res.ok) throw new Error('Failed to load articles');
const data = await res.json();
setArticles(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}, []);
useEffect(() => { fetchArticles(); }, [fetchArticles]);
// -------------------------------------------------------------------------
// Delete
// -------------------------------------------------------------------------
const handleDelete = useCallback(async (article) => {
if (!window.confirm(`Delete "${article.title}"? This cannot be undone.`)) return;
try {
const res = await fetch(`${API_BASE}/knowledge-base/${article.id}`, {
method: 'DELETE', credentials: 'include',
});
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]);
// -------------------------------------------------------------------------
// Filtering
// -------------------------------------------------------------------------
const filtered = useMemo(() => {
const q = search.trim().toLowerCase();
return articles.filter(a => {
const matchesCat = activeCategory === 'All' || a.category === activeCategory;
const matchesSearch = !q ||
a.title.toLowerCase().includes(q) ||
(a.description || '').toLowerCase().includes(q);
return matchesCat && matchesSearch;
});
}, [articles, activeCategory, search]);
// Category tab counts (always from full list, not filtered by search)
const categoryCounts = useMemo(() => {
const counts = { All: articles.length };
CATEGORY_ORDER.forEach(cat => {
counts[cat] = articles.filter(a => a.category === cat).length;
});
return counts;
}, [articles]);
const activeTabs = ['All', ...CATEGORY_ORDER.filter(c => categoryCounts[c] > 0)];
const clearFilters = () => { setSearch(''); setActiveCategory('All'); };
const hasFilter = search.trim() !== '' || activeCategory !== 'All';
// -------------------------------------------------------------------------
// Render
// -------------------------------------------------------------------------
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', paddingBottom: '2rem' }}>
{/* ── Page header ─────────────────────────────────────────── */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<div>
<h2 style={{
fontFamily: 'monospace', fontSize: '1.5rem', fontWeight: '700',
color: GREEN, textTransform: 'uppercase', letterSpacing: '0.1em',
textShadow: `0 0 16px ${GREEN}40`, marginBottom: '0.25rem',
}}>
Knowledge Base
</h2>
<div style={{ fontSize: '0.72rem', color: '#475569', fontFamily: 'monospace' }}>
{loading ? '…' : `${articles.length} article${articles.length !== 1 ? 's' : ''}`}
{articles.length > 0 && activeCategory !== 'All' && (
<span style={{ marginLeft: '0.5rem', color: '#334155' }}>
· {categoryCounts[activeCategory] || 0} in {activeCategory}
</span>
)}
</div>
</div>
<div style={{ display: 'flex', gap: '0.5rem', flexShrink: 0 }}>
<button
onClick={fetchArticles}
title="Refresh"
style={{
background: 'none', border: `1px solid rgba(16,185,129,0.25)`,
borderRadius: '0.375rem', padding: '0.5rem', cursor: 'pointer', color: '#475569',
}}
onMouseEnter={e => { e.currentTarget.style.color = GREEN; e.currentTarget.style.borderColor = `${GREEN}60`; }}
onMouseLeave={e => { e.currentTarget.style.color = '#475569'; e.currentTarget.style.borderColor = 'rgba(16,185,129,0.25)'; }}
>
<RefreshCw style={{ width: '16px', height: '16px' }} />
</button>
{canWrite() && (
<button
onClick={() => setShowUpload(true)}
style={{
display: 'flex', alignItems: 'center', gap: '0.4rem',
background: `${GREEN}18`, border: `1px solid ${GREEN}`,
color: GREEN, padding: '0.5rem 1rem',
fontFamily: 'monospace', fontSize: '0.75rem', fontWeight: '600',
textTransform: 'uppercase', letterSpacing: '0.05em',
cursor: 'pointer', borderRadius: '0.375rem',
}}
>
<Upload style={{ width: '14px', height: '14px' }} />
Upload Article
</button>
)}
</div>
</div>
{/* ── Search + category tabs ───────────────────────────────── */}
<div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
{/* Search */}
<div style={{ position: 'relative', flexShrink: 0 }}>
<Search style={{
position: 'absolute', left: '0.625rem', top: '50%', transform: 'translateY(-50%)',
width: '13px', height: '13px', color: '#334155', pointerEvents: 'none',
}} />
<input
value={search}
onChange={e => setSearch(e.target.value)}
placeholder="Search articles…"
style={{
paddingLeft: '2rem', paddingRight: search ? '2rem' : '0.625rem',
paddingTop: '0.4rem', paddingBottom: '0.4rem',
background: 'rgba(15,23,42,0.8)',
border: '1px solid rgba(16,185,129,0.2)',
borderRadius: '0.375rem', color: '#E2E8F0',
outline: 'none', fontFamily: 'monospace', fontSize: '0.75rem',
width: '220px',
}}
onFocus={e => e.target.style.borderColor = `${GREEN}60`}
onBlur={e => e.target.style.borderColor = 'rgba(16,185,129,0.2)'}
/>
{search && (
<button
onClick={() => setSearch('')}
style={{
position: 'absolute', right: '0.5rem', top: '50%', transform: 'translateY(-50%)',
background: 'none', border: 'none', cursor: 'pointer', color: '#334155', padding: 0,
}}
>
<X style={{ width: '12px', height: '12px' }} />
</button>
)}
</div>
{/* Category tabs */}
<div style={{ display: 'flex', gap: '0.3rem', flexWrap: 'wrap' }}>
{activeTabs.map(cat => {
const isActive = activeCategory === cat;
const color = cat === 'All' ? GREEN : catColor(cat);
return (
<button
key={cat}
onClick={() => setActiveCategory(cat)}
style={{
padding: '0.35rem 0.75rem',
fontFamily: 'monospace', fontSize: '0.7rem', fontWeight: '600',
textTransform: 'uppercase', letterSpacing: '0.05em',
cursor: 'pointer', borderRadius: '0.25rem',
border: isActive ? `1px solid ${color}` : '1px solid transparent',
background: isActive ? `${color}15` : 'transparent',
color: isActive ? color : '#475569',
transition: 'all 0.12s',
}}
onMouseEnter={e => { if (!isActive) { e.currentTarget.style.color = '#94A3B8'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)'; }}}
onMouseLeave={e => { if (!isActive) { e.currentTarget.style.color = '#475569'; e.currentTarget.style.borderColor = 'transparent'; }}}
>
{cat}
<span style={{ marginLeft: '0.35rem', opacity: 0.6, fontWeight: '400' }}>
{categoryCounts[cat] ?? 0}
</span>
</button>
);
})}
</div>
</div>
{/* ── Error state ──────────────────────────────────────────── */}
{error && (
<div style={{
display: 'flex', alignItems: 'center', gap: '0.5rem',
padding: '0.875rem 1rem',
background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.3)',
borderRadius: '0.5rem', color: '#F87171',
fontFamily: 'monospace', fontSize: '0.78rem',
}}>
<AlertCircle style={{ width: '15px', height: '15px', flexShrink: 0 }} />
{error}
<button
onClick={fetchArticles}
style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', color: '#F87171', fontFamily: 'monospace', fontSize: '0.72rem' }}
>
Retry
</button>
</div>
)}
{/* ── Loading state ────────────────────────────────────────── */}
{loading && (
<div style={{ display: 'flex', justifyContent: 'center', padding: '3rem' }}>
<Loader style={{ width: '28px', height: '28px', color: GREEN, animation: 'spin 1s linear infinite' }} />
</div>
)}
{/* ── Article grid ─────────────────────────────────────────── */}
{!loading && !error && (
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
gap: '0.875rem',
}}>
{filtered.length === 0 ? (
<EmptyState hasFilter={hasFilter} onClear={clearFilters} />
) : (
filtered.map(article => (
<ArticleCard
key={article.id}
article={article}
selected={selected?.id === article.id}
onSelect={a => setSelected(selected?.id === a.id ? null : a)}
onDelete={handleDelete}
canDelete={canWrite()}
/>
))
)}
</div>
)}
{/* ── Inline viewer ────────────────────────────────────────── */}
{selected && (
<div style={{ marginTop: '0.25rem' }}>
<KnowledgeBaseViewer
article={selected}
onClose={() => setSelected(null)}
/>
</div>
)}
{/* ── Upload modal ─────────────────────────────────────────── */}
{showUpload && (
<KnowledgeBaseModal
onClose={() => setShowUpload(false)}
onUpdate={() => { fetchArticles(); setShowUpload(false); }}
/>
)}
</div>
);
}

View File

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import { RefreshCw, Loader, AlertCircle, PieChart, ChevronUp, ChevronDown, ChevronsUpDown, Settings2, GripVertical, Eye, EyeOff, Filter, Download, RotateCcw, Trash2, X, ListTodo } from 'lucide-react';
import * as XLSX from 'xlsx';
import { useAuth } from '../../contexts/AuthContext';
import IvantiCountsChart from './IvantiCountsChart';
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
const STORAGE_KEY = 'steam_findings_columns_v2';
@@ -1536,7 +1537,7 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
// ---------------------------------------------------------------------------
// Main ReportingPage
// ---------------------------------------------------------------------------
export default function ReportingPage({ filterDate, filterEXC }) {
export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
const { canWrite } = useAuth();
const [findings, setFindings] = useState([]);
const [total, setTotal] = useState(null);
@@ -1965,6 +1966,11 @@ export default function ReportingPage({ filterDate, filterEXC }) {
</div>
</div>
{/* ----------------------------------------------------------------
Panel 1.5 — Open vs Closed trend over time
---------------------------------------------------------------- */}
<IvantiCountsChart />
{/* ----------------------------------------------------------------
Panel 2 — Findings table
---------------------------------------------------------------- */}