Compare commits
13 Commits
4676279a72
...
feature/co
| Author | SHA1 | Date | |
|---|---|---|---|
| 0d48c109b3 | |||
| 18ad31228e | |||
| 3dcb91a1fc | |||
| 5102a2c5b4 | |||
| a0a8979c63 | |||
| 15ad207464 | |||
| b111273e5a | |||
| a7c74f625f | |||
| 8aef51b59a | |||
| d0087ba9b7 | |||
| 3d6062f3fa | |||
| 7af44608d0 | |||
| 3bb86e8369 |
361
README.md
361
README.md
@@ -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)
|
- [Running the Application](#running-the-application)
|
||||||
- [Features](#features)
|
- [Features](#features)
|
||||||
- [Authentication and User Roles](#authentication-and-user-roles)
|
- [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)
|
- [Reporting — Host Findings](#reporting--host-findings)
|
||||||
|
- [Ivanti Queue](#ivanti-queue)
|
||||||
|
- [Compliance — AEO Posture](#compliance--aeo-posture)
|
||||||
- [Knowledge Base](#knowledge-base)
|
- [Knowledge Base](#knowledge-base)
|
||||||
|
- [Exports](#exports)
|
||||||
- [Archer Risk Acceptance Tickets](#archer-risk-acceptance-tickets)
|
- [Archer Risk Acceptance Tickets](#archer-risk-acceptance-tickets)
|
||||||
- [Weekly Reports](#weekly-reports)
|
- [User Management (Admin)](#user-management-admin)
|
||||||
- [User Management](#user-management-admin)
|
- [Audit Log (Admin)](#audit-log-admin)
|
||||||
- [Audit Log](#audit-log-admin)
|
|
||||||
- [Scripts](#scripts)
|
- [Scripts](#scripts)
|
||||||
- [API Reference](#api-reference)
|
- [API Reference](#api-reference)
|
||||||
- [Architecture](#architecture)
|
- [Architecture](#architecture)
|
||||||
@@ -32,16 +34,17 @@ A self-hosted vulnerability management dashboard for tracking CVE remediation st
|
|||||||
|
|
||||||
## Overview
|
## 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:
|
The application provides:
|
||||||
|
|
||||||
- A searchable, filterable CVE list with per-vendor tracking and document storage
|
- A searchable, filterable CVE list with per-vendor tracking and document storage
|
||||||
- NVD API integration to auto-populate CVE metadata
|
- NVD API integration to auto-populate CVE metadata
|
||||||
- **Ivanti/RiskSense integration** to sync open and closed host findings with live FP workflow tracking
|
- **Ivanti/RiskSense integration** — sync open host findings with live FP workflow tracking
|
||||||
- **Reporting page** with donut charts, advanced per-column filtering, inline editing, and CSV/XLSX export
|
- **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
|
- 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
|
- A knowledge base for internal documentation and policies
|
||||||
- Role-based access control with a full audit trail
|
- Role-based access control with a full audit trail
|
||||||
|
|
||||||
@@ -56,8 +59,8 @@ The application provides:
|
|||||||
| File uploads | Multer 2 |
|
| File uploads | Multer 2 |
|
||||||
| Auth | bcryptjs, cookie-based sessions |
|
| Auth | bcryptjs, cookie-based sessions |
|
||||||
| Frontend | React 19, lucide-react, xlsx |
|
| Frontend | React 19, lucide-react, xlsx |
|
||||||
| Report processing | Python 3 (stdlib only — no extra packages required for notes import) |
|
| Compliance xlsx parsing | Python 3, pandas, openpyxl |
|
||||||
| Weekly report processing | Python 3, pandas, openpyxl |
|
| Bulk notes import | Python 3 (stdlib only) |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -65,7 +68,7 @@ The application provides:
|
|||||||
|
|
||||||
- Node.js 18 or later
|
- Node.js 18 or later
|
||||||
- npm
|
- 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
|
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
|
```bash
|
||||||
cd backend/scripts
|
apt install -y python3-pandas python3-openpyxl
|
||||||
pip install -r requirements.txt
|
|
||||||
```
|
```
|
||||||
|
|
||||||
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.
|
> 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
|
### 6. Run database migrations
|
||||||
|
|
||||||
After the initial setup, apply feature migrations in order:
|
Apply all feature migrations in order:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
cd backend
|
cd backend
|
||||||
node migrations/add_weekly_reports_table.js
|
|
||||||
node migrations/add_knowledge_base_table.js
|
node migrations/add_knowledge_base_table.js
|
||||||
node migrations/add_archer_tickets_table.js
|
node migrations/add_archer_tickets_table.js
|
||||||
node migrations/add_ivanti_sync_table.js
|
node migrations/add_ivanti_sync_table.js
|
||||||
node migrations/add_ivanti_findings_tables.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
|
cd backend
|
||||||
node server.js
|
node server.js
|
||||||
|
|
||||||
# Terminal 2 — frontend
|
# Terminal 2 — frontend (development server)
|
||||||
cd frontend
|
cd frontend
|
||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
@@ -217,17 +231,17 @@ All routes require authentication. Three roles are supported:
|
|||||||
|
|
||||||
| Role | Permissions |
|
| Role | Permissions |
|
||||||
|---|---|
|
|---|---|
|
||||||
| `viewer` | Read-only: CVEs, documents, findings, reports, knowledge base, Archer tickets |
|
| `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 articles, manage Archer tickets, upload weekly reports |
|
| `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 |
|
| `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.
|
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**
|
**CVE List**
|
||||||
- Search CVEs by keyword (matches CVE ID, vendor, description)
|
- 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 Ticket Quick Navigation**
|
||||||
- Archer EXC numbers shown on CVE rows
|
- 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**
|
**Calendar Widget**
|
||||||
- Shows current month with red dot indicators on dates where Ivanti findings are due
|
- 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
|
#### Syncing Data
|
||||||
|
|
||||||
Click **Sync** in the top-right of the page to pull the latest findings from Ivanti. The sync:
|
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.5–9.9)
|
1. Fetches all open host findings matching your BU filters and severity range (8.5–9.9 VRR)
|
||||||
2. Fetches the closed finding count separately
|
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
|
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
|
#### Metric Charts
|
||||||
|
|
||||||
Four donut charts are shown at the top of the page.
|
|
||||||
|
|
||||||
| Chart | What it shows |
|
| 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. |
|
| **Open vs Closed** | Total open vs closed host findings direct from the Ivanti API |
|
||||||
| **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. |
|
| **Action Coverage** | Findings by action taken: FP Request · Archer Exception · Pending. Click a 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 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 FP# ticket can cover many findings; this chart counts tickets, not findings. |
|
| **FP Workflow Status** | How many *unique FP# ticket IDs* are in each state — one ticket can cover many findings |
|
||||||
|
|
||||||
#### Findings Table
|
#### Findings Table
|
||||||
|
|
||||||
The table shows all open findings from the cache. Each row represents a single host finding.
|
Each row represents a single Ivanti host finding.
|
||||||
|
|
||||||
**Columns**
|
|
||||||
|
|
||||||
| Column | Description |
|
| Column | Description |
|
||||||
|---|---|
|
|---|---|
|
||||||
| Finding ID | Ivanti finding identifier |
|
| Finding ID | Ivanti finding identifier |
|
||||||
| Severity | Numerical VRR score with group label (CRITICAL / HIGH) |
|
| Severity | Numerical VRR score with group label (CRITICAL / HIGH) |
|
||||||
| Title | Vulnerability title |
|
| Title | Vulnerability title |
|
||||||
| CVEs | Associated CVE IDs — up to 2 shown, remainder as "+N" |
|
| CVEs | Associated CVE IDs — up to 2 shown, remainder as "+N" badge |
|
||||||
| Host | Hostname — inline editable (see Overrides below) |
|
| Host | Hostname — inline editable |
|
||||||
| IP Address | Host IP address |
|
| IP Address | Host IP address |
|
||||||
| DNS | DNS/FQDN — inline editable |
|
| DNS | DNS/FQDN — inline editable |
|
||||||
| Due Date | Remediation due date; red if overdue, amber if within 30 days |
|
| Due Date | Remediation due date; red if overdue, amber if within 30 days |
|
||||||
| SLA | SLA status: OVERDUE / AT_RISK / WITHIN_SLA |
|
| SLA | SLA status: OVERDUE / AT_RISK / WITHIN_SLA |
|
||||||
| BU | Business unit; STEAM rows are highlighted |
|
| BU | Business unit |
|
||||||
| Workflow | FP# ticket ID and state badge — color-coded by state |
|
| Workflow | FP# ticket ID and state badge — colour-coded by urgency |
|
||||||
| Last Found | Last detection date from Ivanti |
|
| 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:
|
**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.
|
||||||
- Toggle column visibility with the eye icon
|
|
||||||
- Drag rows to reorder columns
|
|
||||||
- Column order and visibility persist to `localStorage`
|
|
||||||
|
|
||||||
**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:
|
### Ivanti Queue
|
||||||
- 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
|
|
||||||
|
|
||||||
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.
|
**Queue panel:** Click the **Queue** button (top right of Reporting page) to open the slide-out panel:
|
||||||
- **Notes**: Click to edit. Saves on blur. Maximum 255 characters. Notes survive cache refreshes.
|
- **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):
|
Queue items are stored in the database, are **personal to your login**, and persist across sessions and page refreshes.
|
||||||
- **CSV** — UTF-8 with BOM for Excel compatibility
|
|
||||||
- **Excel (.xlsx)** — Auto-fitted column widths
|
|
||||||
|
|
||||||
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
|
### 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
|
- 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
|
- Download any document
|
||||||
- Filter and browse by category
|
- Filter and browse by category
|
||||||
- Editors and admins can upload and delete; all authenticated users can view
|
- 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
|
### Archer Risk Acceptance Tickets
|
||||||
|
|
||||||
Track Archer exception tickets (EXC numbers) linked to specific CVE/vendor pairs.
|
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`
|
- Statuses: `Draft`, `Open`, `Under Review`, `Accepted`
|
||||||
- Optional Archer URL field for deep-linking to the Archer record
|
- Optional Archer URL field for deep-linking to the Archer record
|
||||||
- Filter tickets by CVE ID, vendor, or status
|
- Filter tickets by CVE ID, vendor, or status
|
||||||
- EXC numbers are unique across the system
|
- Clicking an EXC badge on the Home page navigates to the Reporting page pre-filtered to findings with that EXC number in their notes
|
||||||
- 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.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### User Management (Admin)
|
### User Management (Admin)
|
||||||
|
|
||||||
Admins can manage user accounts from the UI:
|
|
||||||
|
|
||||||
- Create users with a role assignment
|
- Create users with a role assignment
|
||||||
- Change username, email, password, role, or active status
|
- Change username, email, password, role, or active status
|
||||||
- Deactivating a user immediately invalidates all their active sessions
|
- Deactivating a user immediately invalidates all their active sessions
|
||||||
@@ -404,12 +444,27 @@ Admins can manage user accounts from the UI:
|
|||||||
|
|
||||||
### Audit Log (Admin)
|
### 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
|
## 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`
|
### `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.
|
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
|
## API Reference
|
||||||
|
|
||||||
All endpoints are prefixed with `/api`. All endpoints except `/api/auth/login` and `/api/auth/logout` require a valid session cookie.
|
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 |
|
| 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 |
|
| POST | `/api/cves/nvd-sync` | editor+ | Bulk update CVE metadata from NVD |
|
||||||
|
|
||||||
### Ivanti / RiskSense — Workflows
|
### Ivanti — Host Findings
|
||||||
|
|
||||||
| 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
|
|
||||||
|
|
||||||
| Method | Path | Role | Description |
|
| Method | Path | Role | Description |
|
||||||
|---|---|---|---|
|
|---|---|---|---|
|
||||||
| GET | `/api/ivanti/findings` | viewer+ | Get cached findings with notes and overrides merged in |
|
| 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 |
|
| 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/counts` | viewer+ | Open vs closed finding totals |
|
||||||
| GET | `/api/ivanti/findings/fp-workflow-counts` | viewer+ | FP workflow state breakdown — returns `findingCounts`, `findingTotal`, `idCounts`, `idTotal` |
|
| GET | `/api/ivanti/findings/fp-workflow-counts` | viewer+ | FP workflow state breakdown |
|
||||||
| PUT | `/api/ivanti/findings/:findingId/override` | editor+ | Override `hostName` or `dns` for a finding; empty value clears the override |
|
| 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) |
|
| PUT | `/api/ivanti/findings/:findingId/note` | viewer+ | Save or update a finding note (max 255 chars) |
|
||||||
|
|
||||||
### Weekly Reports
|
### Ivanti — Workflows
|
||||||
|
|
||||||
| Method | Path | Role | Description |
|
| Method | Path | Role | Description |
|
||||||
|---|---|---|---|
|
|---|---|---|---|
|
||||||
| POST | `/api/weekly-reports/upload` | editor+ | Upload and process a `.xlsx` vulnerability report |
|
| GET | `/api/ivanti/workflows` | viewer+ | Get cached workflow data |
|
||||||
| GET | `/api/weekly-reports` | viewer+ | List all uploaded reports |
|
| POST | `/api/ivanti/workflows/sync` | viewer+ | Trigger an immediate workflow sync |
|
||||||
| 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 |
|
### 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
|
### Knowledge Base
|
||||||
|
|
||||||
@@ -568,7 +629,7 @@ All endpoints are prefixed with `/api`. All endpoints except `/api/auth/login` a
|
|||||||
| Method | Path | Role | Description |
|
| Method | Path | Role | Description |
|
||||||
|---|---|---|---|
|
|---|---|---|---|
|
||||||
| GET | `/api/vendors` | viewer+ | List all distinct vendor names |
|
| 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
|
├── stop-servers.sh # Stop all servers
|
||||||
│
|
│
|
||||||
├── backend/
|
├── 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
|
│ ├── setup.js # One-time DB initialization and default admin creation
|
||||||
│ ├── cve_database.db # SQLite database (gitignored)
|
│ ├── cve_database.db # SQLite database (gitignored)
|
||||||
│ ├── uploads/ # File storage root (gitignored)
|
│ ├── uploads/ # File storage root (gitignored)
|
||||||
│ │ ├── <CVE-ID>/
|
│ │ ├── <CVE-ID>/<vendor>/ # CVE documents
|
||||||
│ │ │ └── <vendor>/ # CVE documents stored here
|
|
||||||
│ │ ├── weekly_reports/ # Uploaded vulnerability reports
|
|
||||||
│ │ ├── knowledge_base/ # Knowledge base documents
|
│ │ ├── knowledge_base/ # Knowledge base documents
|
||||||
│ │ └── temp/ # Temporary upload staging directory
|
│ │ └── temp/ # Temporary upload staging
|
||||||
│ ├── routes/
|
│ ├── routes/
|
||||||
│ │ ├── auth.js # Login, logout, session check
|
│ │ ├── auth.js # Login, logout, session check
|
||||||
│ │ ├── users.js # User CRUD (admin)
|
│ │ ├── users.js # User CRUD (admin)
|
||||||
│ │ ├── auditLog.js # Audit log viewer (admin)
|
│ │ ├── auditLog.js # Audit log viewer (admin)
|
||||||
│ │ ├── nvdLookup.js # NVD API proxy
|
│ │ ├── nvdLookup.js # NVD API proxy
|
||||||
│ │ ├── weeklyReports.js # Weekly report upload and management
|
|
||||||
│ │ ├── knowledgeBase.js # Knowledge base document management
|
│ │ ├── knowledgeBase.js # Knowledge base document management
|
||||||
│ │ ├── archerTickets.js # Archer EXC ticket CRUD
|
│ │ ├── archerTickets.js # Archer EXC ticket CRUD
|
||||||
│ │ ├── ivantiWorkflows.js # Ivanti workflow batch sync and cache
|
│ │ ├── 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/
|
│ ├── middleware/
|
||||||
│ │ └── auth.js # requireAuth and requireRole middleware
|
│ │ └── auth.js # requireAuth and requireRole middleware
|
||||||
│ ├── helpers/
|
│ ├── helpers/
|
||||||
│ │ ├── auditLog.js # logAudit helper (fire-and-forget)
|
│ │ ├── auditLog.js # logAudit helper (fire-and-forget)
|
||||||
│ │ └── excelProcessor.js # Calls Python script for report processing
|
|
||||||
│ ├── migrations/
|
│ ├── migrations/
|
||||||
│ │ ├── add_weekly_reports_table.js
|
|
||||||
│ │ ├── add_knowledge_base_table.js
|
│ │ ├── add_knowledge_base_table.js
|
||||||
│ │ ├── add_archer_tickets_table.js
|
│ │ ├── add_archer_tickets_table.js
|
||||||
│ │ ├── add_ivanti_sync_table.js # Ivanti workflow cache table
|
│ │ ├── add_ivanti_sync_table.js
|
||||||
│ │ └── add_ivanti_findings_tables.js # Findings cache, notes, counts, overrides tables
|
│ │ ├── 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/
|
│ └── 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
|
│ ├── import_notes_from_csv.py # Bulk-import finding notes from CSV
|
||||||
│ └── requirements.txt # pandas, openpyxl (weekly report processing only)
|
│ └── requirements.txt # pandas, openpyxl
|
||||||
│
|
│
|
||||||
└── frontend/
|
└── frontend/
|
||||||
└── src/
|
└── src/
|
||||||
@@ -628,13 +690,16 @@ cve-dashboard/
|
|||||||
├── CalendarWidget.js # Due-date calendar with Ivanti finding indicators
|
├── CalendarWidget.js # Due-date calendar with Ivanti finding indicators
|
||||||
├── UserManagement.js # Admin user management panel
|
├── UserManagement.js # Admin user management panel
|
||||||
├── AuditLog.js # Admin audit log viewer
|
├── 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
|
├── KnowledgeBaseModal.js # Knowledge base upload/list modal
|
||||||
├── KnowledgeBaseViewer.js # Inline document viewer
|
├── KnowledgeBaseViewer.js # Inline document viewer
|
||||||
└── pages/
|
└── pages/
|
||||||
├── ReportingPage.js # Host findings: charts, table, filters, export
|
├── ReportingPage.js # Host findings: charts, table, queue, export
|
||||||
├── KnowledgeBasePage.js # Knowledge base page (placeholder)
|
├── CompliancePage.js # AEO compliance: metric cards, device table
|
||||||
└── ExportsPage.js # Exports page (placeholder)
|
├── 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)
|
### 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.
|
**`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:
|
**`ivanti_counts_cache`** — Single-row cache for finding metrics: open/closed counts, FP workflow state breakdowns by finding and by unique ticket ID.
|
||||||
- `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_finding_overrides`** — Editor-applied overrides for `hostName` and `dns` fields. `UNIQUE(finding_id, field)`.
|
**`ivanti_finding_overrides`** — Editor-applied overrides for `hostName` and `dns` fields. `UNIQUE(finding_id, field)`.
|
||||||
|
|
||||||
|
**`ivanti_todo_queue`** — Personal per-user queue of findings staged for FP, Archer, or CARD processing. Keyed by `(user_id, finding_id)`.
|
||||||
|
|
||||||
|
**`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
|
### 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`).
|
**`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`
|
- Status must be one of: `Open`, `Addressed`, `In Progress`, `Resolved`
|
||||||
- Archer EXC numbers must match `/^EXC-\d+$/`
|
- Archer EXC numbers must match `/^EXC-\d+$/`
|
||||||
- Finding override field must be one of: `hostName`, `dns`
|
- 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
|
### Error handling
|
||||||
|
|
||||||
- 500 responses never expose internal error messages to the client
|
- 500 responses never expose internal error messages to the client
|
||||||
- Full errors are logged server-side only
|
- 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
|
### Security headers
|
||||||
|
|
||||||
@@ -729,21 +797,24 @@ Applied to all responses:
|
|||||||
|
|
||||||
## Migrations
|
## 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
|
```bash
|
||||||
cd backend
|
cd backend
|
||||||
node migrations/add_weekly_reports_table.js
|
|
||||||
node migrations/add_knowledge_base_table.js
|
node migrations/add_knowledge_base_table.js
|
||||||
node migrations/add_archer_tickets_table.js
|
node migrations/add_archer_tickets_table.js
|
||||||
node migrations/add_ivanti_sync_table.js
|
node migrations/add_ivanti_sync_table.js
|
||||||
node migrations/add_ivanti_findings_tables.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_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-audit-log.js` — Adds the `audit_logs` table to pre-auth deployments
|
||||||
- `migrate-to-1.1.js` — General 1.0 → 1.1 schema update
|
- `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.
|
||||||
|
|||||||
@@ -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
|
|
||||||
@@ -251,14 +251,14 @@
|
|||||||
"updated": 1,
|
"updated": 1,
|
||||||
"link": null,
|
"link": null,
|
||||||
"locked": false,
|
"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,
|
"fontSize": 14,
|
||||||
"fontFamily": 1,
|
"fontFamily": 1,
|
||||||
"textAlign": "left",
|
"textAlign": "left",
|
||||||
"verticalAlign": "middle",
|
"verticalAlign": "middle",
|
||||||
"baseline": 163,
|
"baseline": 163,
|
||||||
"containerId": "backend-box",
|
"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",
|
"id": "db-box",
|
||||||
@@ -820,14 +820,14 @@
|
|||||||
"updated": 1,
|
"updated": 1,
|
||||||
"link": null,
|
"link": null,
|
||||||
"locked": false,
|
"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,
|
"fontSize": 12,
|
||||||
"fontFamily": 1,
|
"fontFamily": 1,
|
||||||
"textAlign": "left",
|
"textAlign": "left",
|
||||||
"verticalAlign": "top",
|
"verticalAlign": "top",
|
||||||
"baseline": 113,
|
"baseline": 113,
|
||||||
"containerId": null,
|
"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": {
|
"appState": {
|
||||||
|
|||||||
41
backend/migrations/add_ivanti_counts_history_table.js
Normal file
41
backend/migrations/add_ivanti_counts_history_table.js
Normal 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.');
|
||||||
|
});
|
||||||
@@ -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;
|
return router;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ const fs = require('fs');
|
|||||||
const { spawn } = require('child_process');
|
const { spawn } = require('child_process');
|
||||||
|
|
||||||
const PARSER_SCRIPT = path.join(__dirname, '../scripts/parse_compliance_xlsx.py');
|
const PARSER_SCRIPT = path.join(__dirname, '../scripts/parse_compliance_xlsx.py');
|
||||||
|
const PYTHON_BIN = process.env.PYTHON_BIN || 'python3';
|
||||||
const TEMP_DIR = path.join(process.cwd(), 'uploads', 'temp');
|
const TEMP_DIR = path.join(process.cwd(), 'uploads', 'temp');
|
||||||
const ALLOWED_TEAMS = new Set(['STEAM', 'ACCESS-ENG', 'ACCESS-OPS', 'INTELDEV']);
|
const ALLOWED_TEAMS = new Set(['STEAM', 'ACCESS-ENG', 'ACCESS-OPS', 'INTELDEV']);
|
||||||
|
|
||||||
@@ -47,7 +48,7 @@ function dbAll(db, sql, params = []) {
|
|||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
function parseXlsx(filePath) {
|
function parseXlsx(filePath) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const py = spawn('python3', [PARSER_SCRIPT, filePath]);
|
const py = spawn(PYTHON_BIN, [PARSER_SCRIPT, filePath]);
|
||||||
let out = '';
|
let out = '';
|
||||||
let err = '';
|
let err = '';
|
||||||
py.stdout.on('data', d => { out += d; });
|
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;
|
return router;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -175,6 +175,15 @@ function initTables(db) {
|
|||||||
db.run(`
|
db.run(`
|
||||||
CREATE INDEX IF NOT EXISTS idx_finding_overrides_finding_id
|
CREATE INDEX IF NOT EXISTS idx_finding_overrides_finding_id
|
||||||
ON ivanti_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) => {
|
`, (err) => {
|
||||||
if (err) reject(err);
|
if (err) reject(err);
|
||||||
else resolve();
|
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`,
|
`UPDATE ivanti_counts_cache SET open_count=?, closed_count=?, synced_at=datetime('now') WHERE id=1`,
|
||||||
[openCount, closedCount]
|
[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}`);
|
console.log(`[Ivanti Findings] Counts updated — open: ${openCount}, closed: ${closedCount}`);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('[Ivanti Findings] Failed to fetch closed count:', err.message);
|
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)
|
// GET /fp-workflow-counts — FP finding + unique workflow counts (open + closed)
|
||||||
router.get('/fp-workflow-counts', async (req, res) => {
|
router.get('/fp-workflow-counts', async (req, res) => {
|
||||||
try {
|
try {
|
||||||
|
|||||||
73
docs/python-venv-setup.md
Normal file
73
docs/python-venv-setup.md
Normal 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.
|
||||||
183
docs/security-posture-workflow-diagrams.md
Normal file
183
docs/security-posture-workflow-diagrams.md
Normal 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 1–5)
|
||||||
|
|
||||||
|
```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 1–5 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`*
|
||||||
175
docs/security-posture-workflow-lucidchart.md
Normal file
175
docs/security-posture-workflow-lucidchart.md
Normal 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
|
||||||
|
```
|
||||||
158
docs/team-training-agenda.md
Normal file
158
docs/team-training-agenda.md
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
# STEAM Security Dashboard — Team Training Agenda
|
||||||
|
|
||||||
|
**Session length:** 30–40 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.5–9.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
|
||||||
333
docs/time-based-reporting-recommendations.md
Normal file
333
docs/time-based-reporting-recommendations.md
Normal 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) | Low–Medium |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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.1–1.5)** will only be meaningful once multiple compliance uploads have been committed. If only 1–2 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.*
|
||||||
@@ -12,6 +12,7 @@
|
|||||||
"react-dom": "^19.2.4",
|
"react-dom": "^19.2.4",
|
||||||
"react-markdown": "^10.1.0",
|
"react-markdown": "^10.1.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
"recharts": "^3.8.1",
|
||||||
"web-vitals": "^2.1.4",
|
"web-vitals": "^2.1.4",
|
||||||
"xlsx": "^0.18.5"
|
"xlsx": "^0.18.5"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -6,11 +6,9 @@ import UserMenu from './components/UserMenu';
|
|||||||
import UserManagement from './components/UserManagement';
|
import UserManagement from './components/UserManagement';
|
||||||
import AuditLog from './components/AuditLog';
|
import AuditLog from './components/AuditLog';
|
||||||
import NvdSyncModal from './components/NvdSyncModal';
|
import NvdSyncModal from './components/NvdSyncModal';
|
||||||
import KnowledgeBaseModal from './components/KnowledgeBaseModal';
|
|
||||||
import KnowledgeBaseViewer from './components/KnowledgeBaseViewer';
|
|
||||||
import NavDrawer from './components/NavDrawer';
|
import NavDrawer from './components/NavDrawer';
|
||||||
import CalendarWidget from './components/CalendarWidget';
|
import CalendarWidget from './components/CalendarWidget';
|
||||||
import ReportingPage from './components/pages/ReportingPage';
|
import VulnerabilityTriagePage from './components/pages/ReportingPage';
|
||||||
import KnowledgeBasePage from './components/pages/KnowledgeBasePage';
|
import KnowledgeBasePage from './components/pages/KnowledgeBasePage';
|
||||||
import ExportsPage from './components/pages/ExportsPage';
|
import ExportsPage from './components/pages/ExportsPage';
|
||||||
import CompliancePage from './components/pages/CompliancePage';
|
import CompliancePage from './components/pages/CompliancePage';
|
||||||
@@ -185,9 +183,6 @@ export default function App() {
|
|||||||
const [showUserManagement, setShowUserManagement] = useState(false);
|
const [showUserManagement, setShowUserManagement] = useState(false);
|
||||||
const [showAuditLog, setShowAuditLog] = useState(false);
|
const [showAuditLog, setShowAuditLog] = useState(false);
|
||||||
const [showNvdSync, setShowNvdSync] = 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({
|
const [newCVE, setNewCVE] = useState({
|
||||||
cve_id: '',
|
cve_id: '',
|
||||||
vendor: '',
|
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 () => {
|
const fetchJiraTickets = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`${API_BASE}/jira-tickets`, {
|
const response = await fetch(`${API_BASE}/jira-tickets`, {
|
||||||
@@ -442,45 +424,6 @@ export default function App() {
|
|||||||
alert(`Exporting ${selectedDocuments.length} documents for report attachment`);
|
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) => {
|
const handleAddCVE = async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
try {
|
try {
|
||||||
@@ -916,7 +859,6 @@ export default function App() {
|
|||||||
fetchJiraTickets();
|
fetchJiraTickets();
|
||||||
fetchArcherTickets();
|
fetchArcherTickets();
|
||||||
fetchIvantiWorkflows();
|
fetchIvantiWorkflows();
|
||||||
fetchKnowledgeBaseArticles();
|
|
||||||
}
|
}
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [isAuthenticated]);
|
}, [isAuthenticated]);
|
||||||
@@ -966,14 +908,14 @@ export default function App() {
|
|||||||
currentPage={currentPage}
|
currentPage={currentPage}
|
||||||
onNavigate={(page) => {
|
onNavigate={(page) => {
|
||||||
// Clear contextual filters when navigating directly via the nav drawer
|
// 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);
|
setCurrentPage(page);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{/* Scanning line effect */}
|
{/* Scanning line effect */}
|
||||||
<div className="scan-line"></div>
|
<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 */}
|
{/* Header */}
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<div className="flex justify-between items-start mb-6">
|
<div className="flex justify-between items-start mb-6">
|
||||||
@@ -1043,8 +985,8 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Page content */}
|
{/* Page content */}
|
||||||
{currentPage === 'reporting' && <ReportingPage filterDate={calendarFilter} filterEXC={reportingExcFilter} />}
|
{currentPage === 'triage' && <VulnerabilityTriagePage filterDate={calendarFilter} filterEXC={reportingExcFilter} />}
|
||||||
{currentPage === 'compliance' && <CompliancePage />}
|
{currentPage === 'compliance' && <CompliancePage onNavigate={setCurrentPage} />}
|
||||||
{currentPage === 'knowledge-base' && <KnowledgeBasePage />}
|
{currentPage === 'knowledge-base' && <KnowledgeBasePage />}
|
||||||
{currentPage === 'exports' && <ExportsPage />}
|
{currentPage === 'exports' && <ExportsPage />}
|
||||||
|
|
||||||
@@ -1063,14 +1005,6 @@ export default function App() {
|
|||||||
<NvdSyncModal onClose={() => setShowNvdSync(false)} onSyncComplete={() => fetchCVEs()} />
|
<NvdSyncModal onClose={() => setShowNvdSync(false)} onSyncComplete={() => fetchCVEs()} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Knowledge Base Modal */}
|
|
||||||
{showKnowledgeBase && (
|
|
||||||
<KnowledgeBaseModal
|
|
||||||
onClose={() => setShowKnowledgeBase(false)}
|
|
||||||
onUpdate={fetchKnowledgeBaseArticles}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Add CVE Modal */}
|
{/* Add CVE Modal */}
|
||||||
{showAddCVE && (
|
{showAddCVE && (
|
||||||
<div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
|
<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>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Three Column Layout - Home page only */}
|
{/* Two Column Layout - Home page only */}
|
||||||
{currentPage === 'home' && <div className="grid grid-cols-12 gap-6">
|
{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 */}
|
{/* CENTER PANEL - Main Content */}
|
||||||
<div className="col-span-12 lg:col-span-6 space-y-4">
|
<div className="col-span-12 lg:col-span-9 space-y-4">
|
||||||
{/* Knowledge Base Viewer */}
|
|
||||||
{selectedKBArticle ? (
|
|
||||||
<KnowledgeBaseViewer
|
|
||||||
article={selectedKBArticle}
|
|
||||||
onClose={() => setSelectedKBArticle(null)}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<>
|
<>
|
||||||
{/* Quick Check */}
|
{/* Quick Check */}
|
||||||
<div style={{...STYLES.intelCard, padding: '1.5rem'}} className="rounded-lg">
|
<div style={{...STYLES.intelCard, padding: '1.5rem'}} className="rounded-lg">
|
||||||
@@ -2216,7 +2071,6 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
{/* End Center Panel */}
|
{/* End Center Panel */}
|
||||||
|
|
||||||
@@ -2231,7 +2085,7 @@ export default function App() {
|
|||||||
<CalendarWidget
|
<CalendarWidget
|
||||||
onDateClick={(dateStr) => {
|
onDateClick={(dateStr) => {
|
||||||
setCalendarFilter(dateStr);
|
setCalendarFilter(dateStr);
|
||||||
setCurrentPage('reporting');
|
setCurrentPage('triage');
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -2337,7 +2191,7 @@ export default function App() {
|
|||||||
</a>
|
</a>
|
||||||
<div className="flex gap-1">
|
<div className="flex gap-1">
|
||||||
<button
|
<button
|
||||||
onClick={() => { setReportingExcFilter(ticket.exc_number); setCurrentPage('reporting'); }}
|
onClick={() => { setReportingExcFilter(ticket.exc_number); setCurrentPage('triage'); }}
|
||||||
title="View findings referencing this ticket"
|
title="View findings referencing this ticket"
|
||||||
className="text-gray-400 hover:text-sky-400 transition-colors"
|
className="text-gray-400 hover:text-sky-400 transition-colors"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { X, Home, BarChart2, BookOpen, Download, ShieldCheck } from 'lucide-reac
|
|||||||
|
|
||||||
const NAV_ITEMS = [
|
const NAV_ITEMS = [
|
||||||
{ id: 'home', label: 'Home', icon: Home, color: '#0EA5E9', description: 'Main dashboard' },
|
{ 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: '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: 'knowledge-base', label: 'Knowledge Base', icon: BookOpen, color: '#10B981', description: 'Articles & documentation' },
|
||||||
{ id: 'exports', label: 'Exports', icon: Download, color: '#8B5CF6', description: 'Export data & reports' },
|
{ id: 'exports', label: 'Exports', icon: Download, color: '#8B5CF6', description: 'Export data & reports' },
|
||||||
|
|||||||
424
frontend/src/components/pages/ComplianceChartsPanel.js
Normal file
424
frontend/src/components/pages/ComplianceChartsPanel.js
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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 [detail, setDetail] = useState(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
@@ -158,7 +158,7 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded }
|
|||||||
{activeMetrics.length > 0 && (
|
{activeMetrics.length > 0 && (
|
||||||
<Section title="Failing Metrics" icon={<Shield style={{ width: '14px', height: '14px' }} />}>
|
<Section title="Failing Metrics" icon={<Shield style={{ width: '14px', height: '14px' }} />}>
|
||||||
{activeMetrics.map(m => (
|
{activeMetrics.map(m => (
|
||||||
<MetricRow key={m.metric_id} metric={m} />
|
<MetricRow key={m.metric_id} metric={m} onNavigate={onNavigate} />
|
||||||
))}
|
))}
|
||||||
</Section>
|
</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 color = resolved ? '#475569' : categoryColor(metric.category);
|
||||||
const extra = metric.extra || {};
|
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
|
// Surface the most useful extra fields per metric type
|
||||||
const highlights = [];
|
const highlights = [];
|
||||||
if (extra['CVEs_Associated']) highlights.push({ label: 'CVEs', value: extra['CVEs_Associated'] });
|
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>}
|
{resolved && <span style={{ fontSize: '0.68rem', color: '#334155', fontFamily: 'monospace' }}>resolved {metric.resolved_on || ''}</span>}
|
||||||
</div>
|
</div>
|
||||||
{metric.metric_desc && (
|
{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}
|
{metric.metric_desc.length > 100 ? metric.metric_desc.slice(0, 100) + '…' : metric.metric_desc}
|
||||||
</div>
|
</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 => (
|
{highlights.map(h => (
|
||||||
<div key={h.label} style={{ display: 'flex', gap: '0.4rem', marginTop: '0.25rem' }}>
|
<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>
|
<span style={{ fontSize: '0.68rem', color: '#475569', fontFamily: 'monospace', minWidth: '48px' }}>{h.label}</span>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { Upload, MessageSquare, RefreshCw, AlertCircle, Loader } from 'lucide-re
|
|||||||
import { useAuth } from '../../contexts/AuthContext';
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
import ComplianceUploadModal from './ComplianceUploadModal';
|
import ComplianceUploadModal from './ComplianceUploadModal';
|
||||||
import ComplianceDetailPanel from './ComplianceDetailPanel';
|
import ComplianceDetailPanel from './ComplianceDetailPanel';
|
||||||
|
import ComplianceChartsPanel from './ComplianceChartsPanel';
|
||||||
|
|
||||||
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||||
const TEAL = '#14B8A6';
|
const TEAL = '#14B8A6';
|
||||||
@@ -29,10 +30,6 @@ const CATEGORY_COLORS = {
|
|||||||
'Endpoint Protection': '#F97316',
|
'Endpoint Protection': '#F97316',
|
||||||
};
|
};
|
||||||
|
|
||||||
function metricColor(metricId, category) {
|
|
||||||
return CATEGORY_COLORS[category] || '#94A3B8';
|
|
||||||
}
|
|
||||||
|
|
||||||
function statusColor(status) {
|
function statusColor(status) {
|
||||||
return STATUS_COLOR[status] || '#EF4444';
|
return STATUS_COLOR[status] || '#EF4444';
|
||||||
}
|
}
|
||||||
@@ -145,7 +142,7 @@ function SeenBadge({ count }) {
|
|||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Main Page
|
// Main Page
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
export default function CompliancePage() {
|
export default function CompliancePage({ onNavigate }) {
|
||||||
const { canWrite } = useAuth();
|
const { canWrite } = useAuth();
|
||||||
|
|
||||||
const [activeTeam, setActiveTeam] = useState('STEAM');
|
const [activeTeam, setActiveTeam] = useState('STEAM');
|
||||||
@@ -209,10 +206,6 @@ export default function CompliancePage() {
|
|||||||
const metrics = teamMetrics(summary.entries, activeTeam);
|
const metrics = teamMetrics(summary.entries, activeTeam);
|
||||||
const lastUpload = summary.upload;
|
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 (
|
return (
|
||||||
<div style={{ paddingBottom: '2rem' }}>
|
<div style={{ paddingBottom: '2rem' }}>
|
||||||
|
|
||||||
@@ -331,6 +324,9 @@ export default function CompliancePage() {
|
|||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
|
{/* ── Historical trend charts ──────────────────────────────── */}
|
||||||
|
<ComplianceChartsPanel />
|
||||||
|
|
||||||
{/* ── Device table ─────────────────────────────────────────── */}
|
{/* ── Device table ─────────────────────────────────────────── */}
|
||||||
<div style={{
|
<div style={{
|
||||||
background: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
|
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}
|
hostname={selectedHost}
|
||||||
onClose={() => setSelectedHost(null)}
|
onClose={() => setSelectedHost(null)}
|
||||||
onNoteAdded={refresh}
|
onNoteAdded={refresh}
|
||||||
|
onNavigate={onNavigate}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import React, { useState, useRef } from 'react';
|
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';
|
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||||
|
|
||||||
|
|||||||
207
frontend/src/components/pages/IvantiCountsChart.js
Normal file
207
frontend/src/components/pages/IvantiCountsChart.js
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,25 +1,484 @@
|
|||||||
import React from 'react';
|
// KnowledgeBasePage.js
|
||||||
import { BookOpen } from 'lucide-react';
|
// 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 (
|
return (
|
||||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '60vh' }}>
|
<div
|
||||||
<div style={{ textAlign: 'center' }}>
|
onClick={() => onSelect(article)}
|
||||||
<div style={{
|
style={{
|
||||||
width: '72px', height: '72px', borderRadius: '1rem', margin: '0 auto 1.5rem',
|
background: selected
|
||||||
background: 'rgba(16, 185, 129, 0.1)',
|
? `linear-gradient(135deg,rgba(16,185,129,0.1) 0%,rgba(15,23,42,0.98) 100%)`
|
||||||
border: '1px solid rgba(16, 185, 129, 0.3)',
|
: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
|
||||||
display: 'flex', alignItems: 'center', justifyContent: 'center'
|
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>
|
</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>
|
||||||
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@@ -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 { 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 * as XLSX from 'xlsx';
|
||||||
import { useAuth } from '../../contexts/AuthContext';
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
|
import IvantiCountsChart from './IvantiCountsChart';
|
||||||
|
|
||||||
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||||
const STORAGE_KEY = 'steam_findings_columns_v2';
|
const STORAGE_KEY = 'steam_findings_columns_v2';
|
||||||
@@ -1536,7 +1537,7 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
|
|||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Main ReportingPage
|
// Main ReportingPage
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
export default function ReportingPage({ filterDate, filterEXC }) {
|
export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
||||||
const { canWrite } = useAuth();
|
const { canWrite } = useAuth();
|
||||||
const [findings, setFindings] = useState([]);
|
const [findings, setFindings] = useState([]);
|
||||||
const [total, setTotal] = useState(null);
|
const [total, setTotal] = useState(null);
|
||||||
@@ -1965,6 +1966,11 @@ export default function ReportingPage({ filterDate, filterEXC }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* ----------------------------------------------------------------
|
||||||
|
Panel 1.5 — Open vs Closed trend over time
|
||||||
|
---------------------------------------------------------------- */}
|
||||||
|
<IvantiCountsChart />
|
||||||
|
|
||||||
{/* ----------------------------------------------------------------
|
{/* ----------------------------------------------------------------
|
||||||
Panel 2 — Findings table
|
Panel 2 — Findings table
|
||||||
---------------------------------------------------------------- */}
|
---------------------------------------------------------------- */}
|
||||||
|
|||||||
Reference in New Issue
Block a user