Compare commits
6 Commits
5405926550
...
feature/cv
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
9b36a58959 | ||
|
|
690c30aac0 | ||
|
|
fc68097821 | ||
|
|
d9fdaf5cbb | ||
|
|
cb3da6980c | ||
|
|
ccc3576706 |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -51,3 +51,6 @@ backend/add_vendor_to_documents.js
|
|||||||
backend/fix_multivendor_constraint.js
|
backend/fix_multivendor_constraint.js
|
||||||
backend/server.js-backup
|
backend/server.js-backup
|
||||||
backend/setup.js-backup
|
backend/setup.js-backup
|
||||||
|
|
||||||
|
# Kiro implementation summary (internal only)
|
||||||
|
docs/kiro-implementation-summary.md
|
||||||
|
|||||||
1
.kiro/specs/batch-finding-disposition/.config.kiro
Normal file
1
.kiro/specs/batch-finding-disposition/.config.kiro
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"specId": "9f5c16d4-43ea-4d7a-beb1-9329d79a5acc", "workflowType": "requirements-first", "specType": "feature"}
|
||||||
331
.kiro/specs/batch-finding-disposition/design.md
Normal file
331
.kiro/specs/batch-finding-disposition/design.md
Normal file
@@ -0,0 +1,331 @@
|
|||||||
|
# Design Document: Batch Finding Disposition
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
This feature adds multi-select capability to the Vulnerability Triage page's findings table, enabling engineers to select multiple findings and add them all to the Ivanti Queue in a single operation. The current flow requires clicking each finding individually, configuring a popover, and submitting one at a time — this design replaces that with a batch selection toolbar and a bulk-add API endpoint while preserving the existing single-select popover for one-off additions.
|
||||||
|
|
||||||
|
The design touches three layers:
|
||||||
|
1. A new `POST /api/ivanti/todo-queue/batch` backend endpoint that accepts an array of findings in a single transactional insert
|
||||||
|
2. Frontend multi-select state management (selection set, shift-click range select, select-all)
|
||||||
|
3. A sticky Selection Toolbar component with workflow type toggles, vendor input, and batch submit
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
The feature extends the existing Ivanti Queue subsystem without introducing new services or tables. The `ivanti_todo_queue` table schema is unchanged — batch add simply inserts multiple rows in a single SQLite transaction.
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
flowchart TD
|
||||||
|
subgraph Frontend ["Frontend (ReportingPage.js)"]
|
||||||
|
CB[Row Checkboxes] --> SS[Selection State<br/>Set of finding IDs]
|
||||||
|
SS --> ST[Selection Toolbar]
|
||||||
|
ST -->|"Add to Queue"| BA[Batch API Call]
|
||||||
|
CB -->|"No selection + click"| PO[AddToQueuePopover<br/>existing single-add]
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph Backend ["Backend (ivantiTodoQueue.js)"]
|
||||||
|
BA -->|"POST /batch"| BH[Batch Handler]
|
||||||
|
BH -->|"BEGIN TRANSACTION"| DB[(ivanti_todo_queue)]
|
||||||
|
BH -->|"logAudit()"| AL[(audit_logs)]
|
||||||
|
PO -->|"POST /"| SH[Single Handler<br/>existing]
|
||||||
|
SH --> DB
|
||||||
|
end
|
||||||
|
```
|
||||||
|
|
||||||
|
### Key Design Decisions
|
||||||
|
|
||||||
|
1. **No new database table or migration** — batch insert reuses the existing `ivanti_todo_queue` schema. Each finding becomes its own row, identical to what the single-add endpoint creates.
|
||||||
|
|
||||||
|
2. **SQLite transaction for atomicity** — all findings in a batch are inserted inside `db.serialize()` with `BEGIN TRANSACTION` / `COMMIT`. If any insert fails, the entire batch is rolled back. This satisfies the all-or-nothing requirement (Req 3.7, 3.8, 3.11).
|
||||||
|
|
||||||
|
3. **Selection state lives in the VulnerabilityTriagePage component** — a `Set<string>` of finding IDs managed via `useState`. This keeps the selection co-located with the existing `findings`, `sorted`, `filtered`, and `queueItems` state. No new context or global store needed.
|
||||||
|
|
||||||
|
4. **Dual-mode checkbox behavior** — when no findings are selected, clicking a checkbox opens the existing `AddToQueuePopover` (preserving the single-select flow per Req 5). Once one or more findings are selected, subsequent checkbox clicks toggle selection instead. This is the simplest UX that satisfies both Req 1 and Req 5.
|
||||||
|
|
||||||
|
5. **Selection Toolbar as inline sticky bar** — rendered between the table header controls and the `<table>` element, using `position: sticky` to stay visible during scroll. This avoids portal complexity and keeps the toolbar visually anchored to the table.
|
||||||
|
|
||||||
|
6. **200-item batch limit** — prevents oversized payloads and keeps SQLite transaction time reasonable. The findings table typically has 200-800 rows, so this covers most realistic batch sizes.
|
||||||
|
|
||||||
|
## Components and Interfaces
|
||||||
|
|
||||||
|
### Backend
|
||||||
|
|
||||||
|
#### `POST /api/ivanti/todo-queue/batch`
|
||||||
|
|
||||||
|
Added to the existing `createIvantiTodoQueueRouter` factory in `backend/routes/ivantiTodoQueue.js`.
|
||||||
|
|
||||||
|
**Request body:**
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"findings": [
|
||||||
|
{
|
||||||
|
"finding_id": "FID-12345",
|
||||||
|
"finding_title": "OpenSSL vulnerability",
|
||||||
|
"cves": ["CVE-2024-0001"],
|
||||||
|
"ip_address": "10.0.1.50"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"workflow_type": "FP",
|
||||||
|
"vendor": "Juniper"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Validation rules:**
|
||||||
|
- `findings` — array, 1–200 items
|
||||||
|
- Each item: `finding_id` required, non-empty string; `finding_title`, `cves`, `ip_address` optional
|
||||||
|
- `workflow_type` — must be `FP`, `Archer`, or `CARD`
|
||||||
|
- `vendor` — required non-empty string (≤200 chars) for FP/Archer; ignored for CARD
|
||||||
|
- If any finding fails validation, reject entire batch with 400
|
||||||
|
|
||||||
|
**Auth:** `requireAuth(db)`, `requireGroup('Admin', 'Standard_User')`
|
||||||
|
|
||||||
|
**Response (201):**
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"id": 42,
|
||||||
|
"user_id": 1,
|
||||||
|
"finding_id": "FID-12345",
|
||||||
|
"finding_title": "OpenSSL vulnerability",
|
||||||
|
"cves_json": "[\"CVE-2024-0001\"]",
|
||||||
|
"ip_address": "10.0.1.50",
|
||||||
|
"vendor": "Juniper",
|
||||||
|
"workflow_type": "FP",
|
||||||
|
"status": "pending",
|
||||||
|
"created_at": "2025-01-15 12:00:00",
|
||||||
|
"updated_at": "2025-01-15 12:00:00",
|
||||||
|
"cves": ["CVE-2024-0001"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Error responses:**
|
||||||
|
- `400` — validation failure (descriptive message)
|
||||||
|
- `401` — not authenticated
|
||||||
|
- `403` — insufficient permissions
|
||||||
|
- `500` — database transaction failure (all inserts rolled back)
|
||||||
|
|
||||||
|
### Frontend
|
||||||
|
|
||||||
|
#### Selection State (in VulnerabilityTriagePage)
|
||||||
|
|
||||||
|
New state variables added to the main component:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const [selectedIds, setSelectedIds] = useState(new Set()); // Set<string> of finding IDs
|
||||||
|
const [lastClickedId, setLastClickedId] = useState(null); // for shift-click range select
|
||||||
|
const [batchSubmitting, setBatchSubmitting] = useState(false); // loading state
|
||||||
|
const [batchError, setBatchError] = useState(null); // error message from failed batch
|
||||||
|
const [batchWorkflowType, setBatchWorkflowType] = useState('FP');
|
||||||
|
const [batchVendor, setBatchVendor] = useState('');
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Checkbox Click Logic
|
||||||
|
|
||||||
|
```
|
||||||
|
onClick(finding, event):
|
||||||
|
if finding is already queued → return (no-op)
|
||||||
|
if selectedIds.size === 0 AND not shift-click:
|
||||||
|
→ open AddToQueuePopover (existing single-select flow)
|
||||||
|
else:
|
||||||
|
if shift-click AND lastClickedId exists:
|
||||||
|
→ range-select all visible findings between lastClickedId and finding.id
|
||||||
|
else:
|
||||||
|
→ toggle finding.id in selectedIds
|
||||||
|
set lastClickedId = finding.id
|
||||||
|
```
|
||||||
|
|
||||||
|
#### SelectionToolbar Component
|
||||||
|
|
||||||
|
Rendered inline above the table when `selectedIds.size > 0`. Contains:
|
||||||
|
- Selected count badge
|
||||||
|
- "Clear Selection" button
|
||||||
|
- Workflow type toggle buttons (FP / Archer / CARD) with existing color scheme
|
||||||
|
- Vendor text input (hidden when CARD selected)
|
||||||
|
- "Add to Queue" submit button (disabled until valid)
|
||||||
|
- Error message display area
|
||||||
|
|
||||||
|
#### Selection Persistence Across Filters
|
||||||
|
|
||||||
|
When `columnFilters`, `actionFilter`, or `excFilter` change, the selection set is pruned to only include IDs that remain in the `filtered` array. This is done via a `useEffect` that intersects `selectedIds` with the current filtered finding IDs.
|
||||||
|
|
||||||
|
#### Select All / Deselect All
|
||||||
|
|
||||||
|
The checkbox column header renders a "Select All" control when `selectedIds.size > 0` or as a standard header otherwise. Clicking it:
|
||||||
|
- If not all visible non-queued findings are selected → selects all visible non-queued findings
|
||||||
|
- If all are already selected → deselects all
|
||||||
|
|
||||||
|
## Data Models
|
||||||
|
|
||||||
|
### Database Schema (unchanged)
|
||||||
|
|
||||||
|
The `ivanti_todo_queue` table is reused as-is:
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE TABLE ivanti_todo_queue (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
finding_id TEXT NOT NULL,
|
||||||
|
finding_title TEXT,
|
||||||
|
cves_json TEXT,
|
||||||
|
ip_address TEXT,
|
||||||
|
vendor TEXT NOT NULL,
|
||||||
|
workflow_type TEXT NOT NULL CHECK(workflow_type IN ('FP', 'Archer', 'CARD')),
|
||||||
|
status TEXT NOT NULL DEFAULT 'pending' CHECK(status IN ('pending', 'complete')),
|
||||||
|
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Each batch-added finding creates one row, identical to single-add. The `vendor` and `workflow_type` are shared across all findings in a batch (set once in the toolbar).
|
||||||
|
|
||||||
|
### API Request Schema
|
||||||
|
|
||||||
|
```
|
||||||
|
BatchAddRequest {
|
||||||
|
findings: Array<{
|
||||||
|
finding_id: string (required, non-empty, trimmed)
|
||||||
|
finding_title: string | null (max 500 chars)
|
||||||
|
cves: string[] | null
|
||||||
|
ip_address: string | null (max 64 chars)
|
||||||
|
}> (1–200 items)
|
||||||
|
workflow_type: "FP" | "Archer" | "CARD"
|
||||||
|
vendor: string (required for FP/Archer, ≤200 chars; empty/absent for CARD)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Frontend State Shape
|
||||||
|
|
||||||
|
```
|
||||||
|
Selection State:
|
||||||
|
selectedIds: Set<string> — finding IDs currently selected
|
||||||
|
lastClickedId: string | null — last checkbox clicked (for shift-range)
|
||||||
|
batchSubmitting: boolean — true while POST /batch in flight
|
||||||
|
batchError: string | null — error message from last failed batch
|
||||||
|
batchWorkflowType: "FP" | "Archer" | "CARD"
|
||||||
|
batchVendor: string
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Correctness Properties
|
||||||
|
|
||||||
|
*A property is a characteristic or behavior that should hold true across all valid executions of a system — essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
|
||||||
|
|
||||||
|
### Property 1: Selection pruning preserves only visible findings
|
||||||
|
|
||||||
|
*For any* set of selected finding IDs and any set of currently visible (filtered) finding IDs, pruning the selection after a filter change should produce exactly the intersection of the two sets — every ID in the result is both selected and visible, and no visible selected ID is lost.
|
||||||
|
|
||||||
|
**Validates: Requirements 1.4**
|
||||||
|
|
||||||
|
### Property 2: Select-all produces the complete visible non-queued set
|
||||||
|
|
||||||
|
*For any* list of visible findings and any set of queued finding IDs, the select-all operation should produce a set containing exactly the IDs of visible findings that are not in the queued set — no queued findings included, no non-queued visible findings omitted.
|
||||||
|
|
||||||
|
**Validates: Requirements 1.6**
|
||||||
|
|
||||||
|
### Property 3: Submit button enabled state matches validation rule
|
||||||
|
|
||||||
|
*For any* workflow type (FP, Archer, CARD) and any vendor string, the "Add to Queue" button should be enabled if and only if the workflow type is CARD, or the vendor string trimmed is non-empty. No other combination should enable the button.
|
||||||
|
|
||||||
|
**Validates: Requirements 2.7**
|
||||||
|
|
||||||
|
### Property 4: Batch size validation accepts only 1–200 items
|
||||||
|
|
||||||
|
*For any* integer N representing the number of findings in a batch request, the endpoint should accept the request (assuming all other fields are valid) if and only if 1 ≤ N ≤ 200. Arrays of size 0 or greater than 200 should be rejected with a 400 response.
|
||||||
|
|
||||||
|
**Validates: Requirements 3.2**
|
||||||
|
|
||||||
|
### Property 5: Vendor validation is conditional on workflow type
|
||||||
|
|
||||||
|
*For any* workflow type and any vendor string, the batch endpoint should require a non-empty vendor of 200 characters or fewer when workflow_type is FP or Archer, and should accept any vendor value (including empty or absent) when workflow_type is CARD.
|
||||||
|
|
||||||
|
**Validates: Requirements 3.5, 3.6**
|
||||||
|
|
||||||
|
### Property 6: One invalid finding rejects the entire batch
|
||||||
|
|
||||||
|
*For any* valid batch of findings, if exactly one finding is replaced with an invalid finding (empty finding_id, missing finding_id, or non-string finding_id) at any position in the array, the entire batch should be rejected with a 400 response and zero rows should be inserted.
|
||||||
|
|
||||||
|
**Validates: Requirements 3.3, 3.8**
|
||||||
|
|
||||||
|
### Property 7: Successful batch response matches request
|
||||||
|
|
||||||
|
*For any* valid batch request of N findings, the 201 response should contain exactly N items, each with a unique numeric `id`, and the set of `finding_id` values in the response should equal the set of `finding_id` values in the request.
|
||||||
|
|
||||||
|
**Validates: Requirements 3.9**
|
||||||
|
|
||||||
|
### Property 8: Shift-click range select covers exactly the between range
|
||||||
|
|
||||||
|
*For any* sorted list of visible findings, any last-clicked index, and any current-click index, the shift-click range select should produce a set containing exactly the non-queued findings between those two indices (inclusive), regardless of which index is larger.
|
||||||
|
|
||||||
|
**Validates: Requirements 6.1**
|
||||||
|
|
||||||
|
## Error Handling
|
||||||
|
|
||||||
|
### Backend Errors
|
||||||
|
|
||||||
|
| Scenario | Response | Behavior |
|
||||||
|
|----------|----------|----------|
|
||||||
|
| Empty findings array or > 200 items | 400 | `{ error: "findings array must contain 1-200 items." }` |
|
||||||
|
| Any finding missing/empty finding_id | 400 | `{ error: "Each finding must have a non-empty finding_id string." }` |
|
||||||
|
| Invalid workflow_type | 400 | `{ error: "workflow_type must be FP, Archer, or CARD." }` |
|
||||||
|
| Missing vendor for FP/Archer | 400 | `{ error: "vendor is required for FP and Archer workflows." }` |
|
||||||
|
| Vendor exceeds 200 chars | 400 | `{ error: "vendor must be under 200 chars." }` |
|
||||||
|
| Not authenticated | 401 | Standard auth middleware response |
|
||||||
|
| Insufficient permissions (Read_Only) | 403 | Standard group middleware response |
|
||||||
|
| SQLite transaction failure | 500 | Transaction rolled back, `{ error: "Internal server error." }` |
|
||||||
|
|
||||||
|
### Frontend Errors
|
||||||
|
|
||||||
|
| Scenario | Behavior |
|
||||||
|
|----------|----------|
|
||||||
|
| Batch POST returns 4xx/5xx | Display error message in Selection Toolbar, keep selection intact |
|
||||||
|
| Network failure during batch POST | Display "Network error — please try again" in toolbar, keep selection |
|
||||||
|
| Batch POST timeout | Same as network failure handling |
|
||||||
|
|
||||||
|
### Edge Cases
|
||||||
|
|
||||||
|
- **Duplicate finding_ids in batch**: Allowed — the same finding could appear on multiple hosts. The backend does not enforce uniqueness on finding_id within a batch.
|
||||||
|
- **Finding already in queue**: The frontend prevents selecting already-queued findings (checkbox is disabled), so duplicates should not reach the API. No server-side duplicate check is added to keep the endpoint simple.
|
||||||
|
- **Concurrent batch submissions**: The SQLite transaction serializes writes. If two users submit overlapping batches, both succeed independently (each user has their own queue scoped by user_id).
|
||||||
|
- **Selection of 0 findings**: The "Add to Queue" button is only rendered when selectedIds.size > 0, so this state cannot be reached through the UI. The backend still validates for it.
|
||||||
|
|
||||||
|
## Testing Strategy
|
||||||
|
|
||||||
|
### Unit Tests
|
||||||
|
|
||||||
|
Focus on specific examples and edge cases:
|
||||||
|
|
||||||
|
- **Backend validation**: Test each validation rule with concrete valid/invalid inputs (empty array, 201 items, missing finding_id, invalid workflow_type, vendor edge cases)
|
||||||
|
- **Transaction rollback**: Mock a database error mid-insert, verify no rows are committed
|
||||||
|
- **Frontend checkbox dual-mode**: Test that clicking with empty selection opens popover, clicking with existing selection toggles selection
|
||||||
|
- **Toolbar visibility**: Test toolbar appears/disappears based on selection state
|
||||||
|
- **Clear selection**: Test that clear button empties selection
|
||||||
|
- **Escape key**: Test that Escape clears selection
|
||||||
|
- **Select-all toggle**: Test select-all and deselect-all behavior
|
||||||
|
- **Queue panel update**: Test that successful batch updates queueItems state
|
||||||
|
|
||||||
|
### Property-Based Tests
|
||||||
|
|
||||||
|
Using [fast-check](https://github.com/dubzzz/fast-check) for JavaScript property-based testing.
|
||||||
|
|
||||||
|
Each property test runs a minimum of 100 iterations with randomly generated inputs. Tests are tagged with their corresponding design property.
|
||||||
|
|
||||||
|
| Property | What's Generated | What's Verified |
|
||||||
|
|----------|-----------------|-----------------|
|
||||||
|
| Property 1: Selection pruning | Random sets of selected IDs and filtered IDs | Result = intersection of both sets |
|
||||||
|
| Property 2: Select-all | Random finding lists and queued ID sets | Result = visible IDs minus queued IDs |
|
||||||
|
| Property 3: Submit enabled | Random workflow types and vendor strings | Enabled iff CARD or non-empty vendor |
|
||||||
|
| Property 4: Batch size | Random integers 0–300 | Accepted iff 1 ≤ N ≤ 200 |
|
||||||
|
| Property 5: Vendor validation | Random workflow types and vendor strings (0–300 chars) | Conditional acceptance rule |
|
||||||
|
| Property 6: Invalid finding rejection | Valid batches with one injected invalid item | Entire batch rejected, 0 rows inserted |
|
||||||
|
| Property 7: Response shape | Valid batches of 1–50 findings | Response count matches, IDs match |
|
||||||
|
| Property 8: Range select | Random sorted lists and two index positions | Correct range of non-queued findings |
|
||||||
|
|
||||||
|
### Integration Tests
|
||||||
|
|
||||||
|
- End-to-end batch submission: POST valid batch, verify rows in database, verify response shape
|
||||||
|
- Auth enforcement: Verify 401 for unauthenticated, 403 for Read_Only users
|
||||||
|
- Transaction atomicity: Verify rollback on database error
|
||||||
|
- Frontend → Backend: Mock API, verify correct request payload from toolbar submit
|
||||||
97
.kiro/specs/batch-finding-disposition/requirements.md
Normal file
97
.kiro/specs/batch-finding-disposition/requirements.md
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
# Requirements Document
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
The Batch Finding Disposition feature adds multi-select capability to the Vulnerability Triage page's findings table, allowing engineers to select multiple findings at once and add them all to the Ivanti Queue with a shared workflow type and vendor in a single operation. Currently, each finding must be individually clicked, configured via a popover, and submitted — a repetitive process that slows down triage when working through many findings. This feature replaces that one-at-a-time flow with a batch selection toolbar and a bulk-add API endpoint.
|
||||||
|
|
||||||
|
## Glossary
|
||||||
|
|
||||||
|
- **Findings_Table**: The sortable, filterable table of Ivanti host findings rendered in the VulnerabilityTriagePage component (`ReportingPage.js`), where each row represents one finding.
|
||||||
|
- **Selection_Toolbar**: A floating toolbar that appears above the Findings_Table when one or more findings are selected via their row checkboxes, displaying the count of selected findings and batch action controls.
|
||||||
|
- **Batch_Add_Panel**: The inline panel within the Selection_Toolbar that provides workflow type selection (FP, Archer, CARD), an optional vendor input, and a submit button for adding all selected findings to the queue in one operation.
|
||||||
|
- **Todo_Queue_API**: The backend Express router at `/api/ivanti/todo-queue` that manages CRUD operations on the `ivanti_todo_queue` table.
|
||||||
|
- **Queue_Panel**: The existing right-side slide-out panel (`QueuePanel` component) that displays the user's current queue items grouped by vendor.
|
||||||
|
- **Workflow_Type**: One of three disposition categories: FP (false positive), Archer (risk acceptance), or CARD (remediation card). Each finding added to the queue is assigned exactly one Workflow_Type.
|
||||||
|
- **Finding**: A single Ivanti host vulnerability record containing an ID, title, CVEs, IP address, severity, and other metadata.
|
||||||
|
|
||||||
|
## Requirements
|
||||||
|
|
||||||
|
### Requirement 1: Multi-Select Findings via Row Checkboxes
|
||||||
|
|
||||||
|
**User Story:** As an engineer, I want to select multiple findings using checkboxes so that I can batch-process them instead of handling each one individually.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. THE Findings_Table SHALL render a checkbox in the first column of each finding row that is not already in the queue.
|
||||||
|
2. WHEN a user clicks a finding row's checkbox, THE Findings_Table SHALL toggle that Finding's selected state without opening the AddToQueuePopover.
|
||||||
|
3. WHEN one or more findings are selected, THE Findings_Table SHALL visually distinguish selected rows from unselected rows using a highlighted background.
|
||||||
|
4. THE Findings_Table SHALL maintain the selected findings set across sort and filter changes, removing only findings that are no longer visible after filtering.
|
||||||
|
5. WHEN a finding is already in the queue, THE Findings_Table SHALL display that row's checkbox as checked and disabled, preventing re-selection.
|
||||||
|
6. WHILE findings are selected, THE Findings_Table SHALL display a "Select All (visible)" control in the checkbox column header that selects all visible, non-queued findings.
|
||||||
|
7. WHEN the "Select All" control is clicked while all visible non-queued findings are already selected, THE Findings_Table SHALL deselect all findings.
|
||||||
|
|
||||||
|
### Requirement 2: Selection Toolbar with Batch Actions
|
||||||
|
|
||||||
|
**User Story:** As an engineer, I want a toolbar that appears when I have findings selected so that I can see how many are selected and take batch actions on them.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN one or more findings are selected, THE Selection_Toolbar SHALL appear as a sticky bar above the Findings_Table header row.
|
||||||
|
2. THE Selection_Toolbar SHALL display the count of currently selected findings.
|
||||||
|
3. THE Selection_Toolbar SHALL provide a "Clear Selection" button that deselects all findings and hides the Selection_Toolbar.
|
||||||
|
4. THE Selection_Toolbar SHALL provide workflow type toggle buttons for FP, Archer, and CARD, matching the existing color scheme (FP: amber, Archer: blue, CARD: green).
|
||||||
|
5. WHEN the selected Workflow_Type is FP or Archer, THE Selection_Toolbar SHALL display a vendor text input field.
|
||||||
|
6. WHEN the selected Workflow_Type is CARD, THE Selection_Toolbar SHALL hide the vendor input field and display a "No vendor required" indicator.
|
||||||
|
7. THE Selection_Toolbar SHALL provide an "Add to Queue" submit button that is enabled only when a Workflow_Type is selected and vendor is provided (for FP/Archer) or Workflow_Type is CARD.
|
||||||
|
8. THE Selection_Toolbar SHALL follow the existing dark theme design system (monospace fonts, dark gradient backgrounds, accent-colored borders).
|
||||||
|
|
||||||
|
### Requirement 3: Bulk Add to Queue API Endpoint
|
||||||
|
|
||||||
|
**User Story:** As an engineer, I want the backend to accept multiple findings in a single request so that batch additions are processed efficiently.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. THE Todo_Queue_API SHALL expose a `POST /api/ivanti/todo-queue/batch` endpoint that accepts an array of finding objects with a shared workflow_type and vendor.
|
||||||
|
2. THE Todo_Queue_API SHALL validate that the findings array contains between 1 and 200 items.
|
||||||
|
3. THE Todo_Queue_API SHALL validate that each finding object contains a non-empty finding_id string.
|
||||||
|
4. THE Todo_Queue_API SHALL validate that workflow_type is one of FP, Archer, or CARD.
|
||||||
|
5. WHEN workflow_type is FP or Archer, THE Todo_Queue_API SHALL validate that vendor is a non-empty string of 200 characters or fewer.
|
||||||
|
6. WHEN workflow_type is CARD, THE Todo_Queue_API SHALL accept an empty or absent vendor field.
|
||||||
|
7. THE Todo_Queue_API SHALL insert all valid findings into the `ivanti_todo_queue` table within a single database transaction.
|
||||||
|
8. IF any finding in the batch fails validation, THEN THE Todo_Queue_API SHALL reject the entire batch and return a 400 response with a descriptive error message.
|
||||||
|
9. THE Todo_Queue_API SHALL return a 201 response containing the array of newly created queue items with their assigned IDs.
|
||||||
|
10. THE Todo_Queue_API SHALL require authentication and the Admin or Standard_User group.
|
||||||
|
11. IF a database error occurs during the transaction, THEN THE Todo_Queue_API SHALL roll back all inserts and return a 500 response.
|
||||||
|
|
||||||
|
### Requirement 4: Frontend Batch Submission Flow
|
||||||
|
|
||||||
|
**User Story:** As an engineer, I want clicking "Add to Queue" on the toolbar to submit all selected findings at once so that I save time during triage.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the user clicks "Add to Queue" on the Selection_Toolbar, THE Findings_Table SHALL send a single POST request to `POST /api/ivanti/todo-queue/batch` containing all selected findings with the chosen workflow_type and vendor.
|
||||||
|
2. WHILE the batch request is in progress, THE Selection_Toolbar SHALL disable the "Add to Queue" button and display a loading indicator.
|
||||||
|
3. WHEN the batch request succeeds, THE Findings_Table SHALL add all returned queue items to the local queue state, clear the selection, and hide the Selection_Toolbar.
|
||||||
|
4. WHEN the batch request succeeds, THE Findings_Table SHALL update each newly queued finding's row checkbox to show the checked-and-disabled (already queued) state.
|
||||||
|
5. IF the batch request fails, THEN THE Selection_Toolbar SHALL display the error message returned by the API and keep the current selection intact.
|
||||||
|
6. WHEN the batch request succeeds and the Queue_Panel is open, THE Queue_Panel SHALL reflect the newly added items immediately without requiring a manual refresh.
|
||||||
|
|
||||||
|
### Requirement 5: Preserve Single-Select Popover Flow
|
||||||
|
|
||||||
|
**User Story:** As an engineer, I want to still be able to add a single finding to the queue quickly without going through the batch flow, so that simple one-off additions remain fast.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN no findings are currently selected and a user clicks a finding row's checkbox, THE Findings_Table SHALL open the existing AddToQueuePopover for that single finding.
|
||||||
|
2. WHEN one or more findings are already selected and a user clicks another finding row's checkbox, THE Findings_Table SHALL add that finding to the selection set instead of opening the AddToQueuePopover.
|
||||||
|
3. THE AddToQueuePopover SHALL continue to use the existing single-item `POST /api/ivanti/todo-queue` endpoint for individual additions.
|
||||||
|
|
||||||
|
### Requirement 6: Keyboard Accessibility for Multi-Select
|
||||||
|
|
||||||
|
**User Story:** As an engineer, I want to use keyboard shortcuts to speed up multi-select so that I can triage even faster.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN a user holds Shift and clicks a finding row's checkbox, THE Findings_Table SHALL select all visible findings between the last clicked checkbox and the current checkbox (range select).
|
||||||
|
2. THE Selection_Toolbar SHALL be navigable via keyboard Tab order, with all interactive elements (workflow buttons, vendor input, submit button) reachable by Tab key.
|
||||||
|
3. WHEN the Escape key is pressed while the Selection_Toolbar is visible, THE Findings_Table SHALL clear the selection and hide the Selection_Toolbar.
|
||||||
116
.kiro/specs/batch-finding-disposition/tasks.md
Normal file
116
.kiro/specs/batch-finding-disposition/tasks.md
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
# Implementation Plan: Batch Finding Disposition
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Add multi-select capability to the Vulnerability Triage findings table with a batch-add-to-queue API endpoint. The backend gets a new `POST /api/ivanti/todo-queue/batch` route in `ivantiTodoQueue.js`. The frontend gets selection state, checkbox dual-mode logic, a SelectionToolbar component, shift-click range select, select-all, and Escape-to-clear — all within `ReportingPage.js`.
|
||||||
|
|
||||||
|
## Tasks
|
||||||
|
|
||||||
|
- [x] 1. Add `POST /api/ivanti/todo-queue/batch` endpoint
|
||||||
|
- [x] 1.1 Add batch route handler to `backend/routes/ivantiTodoQueue.js`
|
||||||
|
- Add `POST /batch` route inside `createIvantiTodoQueueRouter`, before the `POST /` route
|
||||||
|
- Apply `requireAuth(db)` and `requireGroup('Admin', 'Standard_User')` middleware
|
||||||
|
- Validate request body: `findings` array (1–200 items), each with non-empty `finding_id` string
|
||||||
|
- Validate `workflow_type` is one of `FP`, `Archer`, `CARD`
|
||||||
|
- Validate `vendor`: required non-empty string ≤200 chars for FP/Archer; ignored for CARD
|
||||||
|
- If any validation fails, return 400 with descriptive error message and reject entire batch
|
||||||
|
- _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.8, 3.10_
|
||||||
|
- [x] 1.2 Implement transactional batch insert with SQLite
|
||||||
|
- Use `db.serialize()` with `BEGIN TRANSACTION` / `COMMIT` to insert all findings atomically
|
||||||
|
- For each finding: insert row into `ivanti_todo_queue` with `user_id`, `finding_id`, `finding_title`, `cves_json`, `ip_address`, `vendor`, `workflow_type`
|
||||||
|
- On success: fetch all inserted rows, parse `cves_json` back to arrays, return 201 with `{ items: [...] }`
|
||||||
|
- On any DB error: `ROLLBACK` the transaction and return 500
|
||||||
|
- _Requirements: 3.7, 3.8, 3.9, 3.11_
|
||||||
|
- [x] 1.3 Add audit logging for batch additions
|
||||||
|
- After successful commit, call `logAudit(db, { ... })` with action `'batch_add_to_queue'`, entityType `'ivanti_todo_queue'`, and details including the count and workflow_type
|
||||||
|
- Import `logAudit` from `../helpers/auditLog`
|
||||||
|
- _Requirements: 3.7_
|
||||||
|
|
||||||
|
- [x] 2. Checkpoint — Verify backend endpoint
|
||||||
|
- Ensure the batch endpoint is syntactically correct and the route file has no errors. Ask the user if questions arise.
|
||||||
|
|
||||||
|
- [x] 3. Add multi-select state and checkbox dual-mode logic to `ReportingPage.js`
|
||||||
|
- [x] 3.1 Add selection state variables to `VulnerabilityTriagePage`
|
||||||
|
- Add `selectedIds` (`new Set()`), `lastClickedId` (null), `batchSubmitting` (false), `batchError` (null), `batchWorkflowType` ('FP'), `batchVendor` ('') as new `useState` hooks
|
||||||
|
- _Requirements: 1.1, 2.1_
|
||||||
|
- [x] 3.2 Implement checkbox dual-mode click handler
|
||||||
|
- Replace the existing `<td>` onClick in the checkbox cell with new logic:
|
||||||
|
- If finding is already queued → no-op (existing behavior)
|
||||||
|
- If `selectedIds.size === 0` AND not shift-click → open `AddToQueuePopover` (preserves single-select flow)
|
||||||
|
- If shift-click AND `lastClickedId` exists → range-select all visible non-queued findings between `lastClickedId` and current finding in the `sorted` array
|
||||||
|
- Otherwise → toggle finding.id in `selectedIds`
|
||||||
|
- Always update `lastClickedId` when toggling selection
|
||||||
|
- _Requirements: 1.1, 1.2, 5.1, 5.2, 6.1_
|
||||||
|
- [x] 3.3 Add visual highlighting for selected rows
|
||||||
|
- When a finding's ID is in `selectedIds`, apply a highlighted background (e.g. `rgba(14,165,233,0.12)`) to the row
|
||||||
|
- Override the existing alternating row background and hover for selected rows
|
||||||
|
- _Requirements: 1.3_
|
||||||
|
- [x] 3.4 Disable checkbox for already-queued findings
|
||||||
|
- Keep existing behavior: queued findings show checked + disabled checkbox, preventing re-selection
|
||||||
|
- Ensure queued findings are excluded from shift-click range select and select-all
|
||||||
|
- _Requirements: 1.5_
|
||||||
|
|
||||||
|
- [x] 4. Implement Select All / Deselect All in column header
|
||||||
|
- Modify the checkbox column `<th>` to render a clickable "Select All" checkbox when `selectedIds.size > 0` or when the user interacts with it
|
||||||
|
- Click behavior: if not all visible non-queued findings are selected → select all visible non-queued; if all are selected → deselect all
|
||||||
|
- _Requirements: 1.6, 1.7_
|
||||||
|
|
||||||
|
- [x] 5. Add selection pruning on filter changes
|
||||||
|
- Add a `useEffect` that watches `filtered` (the filtered findings array) and prunes `selectedIds` to only include IDs still present in the filtered set
|
||||||
|
- This ensures selection stays consistent when `columnFilters`, `actionFilter`, or `excFilter` change
|
||||||
|
- _Requirements: 1.4_
|
||||||
|
|
||||||
|
- [x] 6. Implement SelectionToolbar component
|
||||||
|
- [x] 6.1 Create the `SelectionToolbar` inline component in `ReportingPage.js`
|
||||||
|
- Render between the panel header controls and the `<table>` element, only when `selectedIds.size > 0`
|
||||||
|
- Use `position: sticky` with appropriate `top` value to stay visible during scroll
|
||||||
|
- Follow the dark theme design system: monospace fonts, dark gradient background, accent-colored borders
|
||||||
|
- _Requirements: 2.1, 2.8_
|
||||||
|
- [x] 6.2 Add toolbar controls: count badge, Clear Selection, workflow toggles, vendor input, submit button
|
||||||
|
- Display selected count badge (e.g. "12 selected")
|
||||||
|
- "Clear Selection" button that empties `selectedIds` and hides toolbar
|
||||||
|
- Workflow type toggle buttons (FP / Archer / CARD) using existing color scheme: FP = amber (`#F59E0B`), Archer = blue (`#0EA5E9`), CARD = green (`#10B981`)
|
||||||
|
- Vendor text input (hidden when CARD is selected, show "No vendor required" indicator for CARD)
|
||||||
|
- "Add to Queue" submit button — enabled only when workflow_type is CARD, or vendor is non-empty
|
||||||
|
- _Requirements: 2.2, 2.3, 2.4, 2.5, 2.6, 2.7_
|
||||||
|
|
||||||
|
- [x] 7. Implement batch submission flow
|
||||||
|
- [x] 7.1 Add `submitBatch` async function to `VulnerabilityTriagePage`
|
||||||
|
- Build request payload from `selectedIds` (map each ID to its finding object from `sorted`/`filtered` for `finding_id`, `finding_title`, `cves`, `ip_address`), plus `batchWorkflowType` and `batchVendor`
|
||||||
|
- POST to `${API_BASE}/ivanti/todo-queue/batch` with `credentials: 'include'`
|
||||||
|
- Set `batchSubmitting = true` before request, `false` after
|
||||||
|
- _Requirements: 4.1, 4.2_
|
||||||
|
- [x] 7.2 Handle batch success response
|
||||||
|
- On 201: merge returned items into `queueItems` state (sorted by vendor then id, matching existing pattern)
|
||||||
|
- Clear `selectedIds`, reset `batchWorkflowType` to 'FP', reset `batchVendor` to '', clear `batchError`
|
||||||
|
- The newly queued findings will automatically show as checked+disabled via the existing `isQueued()` helper
|
||||||
|
- _Requirements: 4.3, 4.4, 4.6_
|
||||||
|
- [x] 7.3 Handle batch error response
|
||||||
|
- On 4xx/5xx: parse error message from response JSON, set `batchError` to display in toolbar
|
||||||
|
- On network failure: set `batchError` to "Network error — please try again"
|
||||||
|
- Keep selection intact on error so user can retry
|
||||||
|
- _Requirements: 4.5_
|
||||||
|
|
||||||
|
- [x] 8. Add Escape key handler to clear selection
|
||||||
|
- Add a `useEffect` with a `keydown` listener for Escape that clears `selectedIds` when the SelectionToolbar is visible (i.e. `selectedIds.size > 0`)
|
||||||
|
- Ensure it doesn't conflict with the existing Escape handler on `AddToQueuePopover`
|
||||||
|
- _Requirements: 6.3_
|
||||||
|
|
||||||
|
- [x] 9. Ensure keyboard Tab accessibility for SelectionToolbar
|
||||||
|
- Verify all interactive elements in the toolbar (workflow buttons, vendor input, submit button, clear button) are focusable via Tab key
|
||||||
|
- Use native `<button>` and `<input>` elements (which are inherently tabbable) rather than `<div>` with onClick
|
||||||
|
- _Requirements: 6.2_
|
||||||
|
|
||||||
|
- [x] 10. Final checkpoint — Full integration verification
|
||||||
|
- Ensure all files have no syntax errors or diagnostic issues
|
||||||
|
- Verify the checkbox dual-mode logic: no selection → popover, existing selection → toggle
|
||||||
|
- Verify the SelectionToolbar renders/hides correctly based on selection state
|
||||||
|
- Verify batch submit wires through to the backend endpoint and updates queue state
|
||||||
|
- Ensure all tests pass, ask the user if questions arise.
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- No new database migration needed — batch insert reuses the existing `ivanti_todo_queue` schema
|
||||||
|
- The batch endpoint must be registered before `POST /` in the router to avoid Express route conflicts
|
||||||
|
- All testing is done on the dev server after push — no local test tasks included
|
||||||
|
- Each task references specific acceptance criteria from the requirements document for traceability
|
||||||
1
.kiro/specs/cve-tooltip-hover/.config.kiro
Normal file
1
.kiro/specs/cve-tooltip-hover/.config.kiro
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"specId": "b8855eb4-3949-426e-86ac-36fe069a6bb1", "workflowType": "requirements-first", "specType": "feature"}
|
||||||
229
.kiro/specs/cve-tooltip-hover/design.md
Normal file
229
.kiro/specs/cve-tooltip-hover/design.md
Normal file
@@ -0,0 +1,229 @@
|
|||||||
|
# Design Document: CVE Tooltip Hover
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
This feature adds a hover tooltip to CVE badges in the Reporting Page findings table. When a user pauses their cursor over a CVE identifier badge, the system fetches a brief description and severity from the backend and displays it in a styled floating tooltip. Responses are cached in-memory to avoid redundant API calls, and a 300ms hover delay prevents tooltip flicker during fast mouse movement.
|
||||||
|
|
||||||
|
The implementation spans two layers:
|
||||||
|
1. A new lightweight backend endpoint (`/api/cves/:cveId/tooltip`) that queries the existing `cves` SQLite table and returns a trimmed response.
|
||||||
|
2. A frontend `CveTooltip` component rendered via a React portal, with an in-memory cache (React ref), hover delay timer, and viewport-aware positioning.
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
sequenceDiagram
|
||||||
|
participant User
|
||||||
|
participant CVEBadge as CVE Badge (ReportingPage)
|
||||||
|
participant Tooltip as CveTooltip Component
|
||||||
|
participant Cache as Tooltip Cache (useRef)
|
||||||
|
participant API as /api/cves/:cveId/tooltip
|
||||||
|
participant DB as SQLite (cves table)
|
||||||
|
|
||||||
|
User->>CVEBadge: mouseenter
|
||||||
|
CVEBadge->>Tooltip: start 300ms delay timer
|
||||||
|
Note over Tooltip: If mouseout before 300ms, cancel
|
||||||
|
|
||||||
|
alt Cache hit
|
||||||
|
Tooltip->>Cache: lookup(cveId)
|
||||||
|
Cache-->>Tooltip: cached data
|
||||||
|
Tooltip->>User: show tooltip (or skip if exists:false)
|
||||||
|
else Cache miss
|
||||||
|
Tooltip->>API: GET /api/cves/:cveId/tooltip
|
||||||
|
API->>DB: SELECT cve_id, description, severity FROM cves WHERE cve_id = ?
|
||||||
|
DB-->>API: row or null
|
||||||
|
API-->>Tooltip: { exists, cve_id, description, severity }
|
||||||
|
Tooltip->>Cache: store response
|
||||||
|
Tooltip->>User: show tooltip (or skip if exists:false)
|
||||||
|
end
|
||||||
|
|
||||||
|
User->>CVEBadge: mouseleave
|
||||||
|
CVEBadge->>Tooltip: hide + clear timer
|
||||||
|
```
|
||||||
|
|
||||||
|
### Key Design Decisions
|
||||||
|
|
||||||
|
1. **Inline endpoint in server.js** — The tooltip endpoint is a single GET route on the existing `/api/cves` path prefix. It follows the pattern of other simple CVE endpoints already defined inline in `server.js` (e.g., `/api/cves/check/:cveId`, `/api/cves/:cveId/vendors`). No separate route module needed.
|
||||||
|
|
||||||
|
2. **React portal for tooltip rendering** — The tooltip is rendered via `ReactDOM.createPortal` to `document.body`, avoiding overflow/clipping issues from the table's scroll container. The ReportingPage already imports `ReactDOM` for other portal usage.
|
||||||
|
|
||||||
|
3. **useRef for cache instead of useState** — The cache is a plain `Map` stored in a `useRef`. This avoids re-renders when cache entries are added and persists across renders without triggering updates. The cache is cleared when the findings data is re-synced.
|
||||||
|
|
||||||
|
4. **Single shared tooltip instance** — Only one tooltip is visible at a time. The parent component tracks which CVE badge is hovered and passes the active CVE ID + badge position to the tooltip component.
|
||||||
|
|
||||||
|
## Components and Interfaces
|
||||||
|
|
||||||
|
### Backend
|
||||||
|
|
||||||
|
#### `GET /api/cves/:cveId/tooltip`
|
||||||
|
|
||||||
|
Added inline in `server.js` alongside existing CVE endpoints.
|
||||||
|
|
||||||
|
- **Auth**: `requireAuth(db)` — session cookie required
|
||||||
|
- **Params**: `:cveId` — validated against `CVE_ID_PATTERN` (`/^CVE-\d{4}-\d{4,}$/`)
|
||||||
|
- **Query**: `SELECT cve_id, description, severity FROM cves WHERE cve_id = ? LIMIT 1`
|
||||||
|
- **Response (found)**:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"exists": true,
|
||||||
|
"cve_id": "CVE-2024-12345",
|
||||||
|
"description": "A vulnerability in...",
|
||||||
|
"severity": "High"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
- **Response (not found)**:
|
||||||
|
```json
|
||||||
|
{ "exists": false }
|
||||||
|
```
|
||||||
|
- **Description truncation**: If `description.length > 300`, return `description.substring(0, 300) + '…'`
|
||||||
|
|
||||||
|
### Frontend
|
||||||
|
|
||||||
|
#### `CveTooltip` Component (new file: `frontend/src/components/CveTooltip.js`)
|
||||||
|
|
||||||
|
A portal-rendered tooltip that receives positioning data and CVE info.
|
||||||
|
|
||||||
|
**Props:**
|
||||||
|
| Prop | Type | Description |
|
||||||
|
|------|------|-------------|
|
||||||
|
| `cveId` | `string \| null` | The CVE ID to display. `null` hides the tooltip. |
|
||||||
|
| `anchorRect` | `DOMRect \| null` | Bounding rect of the hovered badge for positioning. |
|
||||||
|
| `cache` | `React.MutableRefObject<Map>` | Shared cache ref from parent. |
|
||||||
|
|
||||||
|
**Internal state:**
|
||||||
|
- `data` — fetched tooltip payload (`{ exists, cve_id, description, severity }` or `null`)
|
||||||
|
- `loading` — boolean, true while fetch is in-flight
|
||||||
|
|
||||||
|
**Behavior:**
|
||||||
|
1. When `cveId` changes to a non-null value, check `cache.current` for the CVE ID.
|
||||||
|
2. If cached and `exists: false`, render nothing.
|
||||||
|
3. If cached and `exists: true`, display immediately.
|
||||||
|
4. If not cached, set `loading = true`, fetch from API, store result in cache, set `loading = false`.
|
||||||
|
5. Position the tooltip above the badge by default. If the tooltip would overflow the top of the viewport, position it below instead.
|
||||||
|
6. Render via `ReactDOM.createPortal` to `document.body`.
|
||||||
|
|
||||||
|
#### ReportingPage Integration
|
||||||
|
|
||||||
|
Modifications to the existing `renderCell` function for the `'cves'` case:
|
||||||
|
|
||||||
|
- Add `onMouseEnter` / `onMouseLeave` handlers to each CVE badge `<span>`.
|
||||||
|
- `onMouseEnter`: Start a 300ms `setTimeout`. On fire, set active CVE ID + badge `getBoundingClientRect()` into state.
|
||||||
|
- `onMouseLeave`: Clear the timeout. Set active CVE ID to `null`.
|
||||||
|
- Render a single `<CveTooltip>` instance at the bottom of the component, passing the active CVE ID, anchor rect, and cache ref.
|
||||||
|
- On data sync (when findings are refreshed), call `cache.current.clear()`.
|
||||||
|
|
||||||
|
## Data Models
|
||||||
|
|
||||||
|
### Existing: `cves` Table (SQLite)
|
||||||
|
|
||||||
|
The tooltip endpoint queries the existing table. No schema changes required.
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE TABLE cves (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
cve_id TEXT NOT NULL,
|
||||||
|
vendor TEXT NOT NULL,
|
||||||
|
severity TEXT CHECK(severity IN ('Critical', 'High', 'Medium', 'Low')),
|
||||||
|
description TEXT,
|
||||||
|
published_date TEXT,
|
||||||
|
status TEXT DEFAULT 'Open',
|
||||||
|
created_by INTEGER,
|
||||||
|
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
UNIQUE(cve_id, vendor)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
The query uses `LIMIT 1` since a CVE may have multiple vendor rows — the description and severity from any row suffice for the tooltip blurb.
|
||||||
|
|
||||||
|
### Frontend Cache Structure
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// cache.current is a Map<string, object>
|
||||||
|
// Key: CVE ID string (e.g. "CVE-2024-12345")
|
||||||
|
// Value: API response object
|
||||||
|
// { exists: false }
|
||||||
|
// OR
|
||||||
|
// { exists: true, cve_id: string, description: string, severity: string }
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Correctness Properties
|
||||||
|
|
||||||
|
*A property is a characteristic or behavior that should hold true across all valid executions of a system — essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
|
||||||
|
|
||||||
|
### Property 1: Tooltip endpoint returns correct data for existing CVEs
|
||||||
|
|
||||||
|
*For any* CVE record inserted into the `cves` table with a valid `cve_id`, `description`, and `severity`, a GET request to `/api/cves/:cveId/tooltip` SHALL return `{ exists: true }` with the matching `cve_id` and `severity`, and a `description` that is either the original (if ≤ 300 chars) or truncated to 300 chars + ellipsis.
|
||||||
|
|
||||||
|
**Validates: Requirements 1.1, 1.3, 1.5**
|
||||||
|
|
||||||
|
### Property 2: Description truncation preserves content and enforces length
|
||||||
|
|
||||||
|
*For any* string of arbitrary length, the truncation function SHALL return the original string unchanged if its length is ≤ 300, or return exactly the first 300 characters followed by "…" if its length exceeds 300. In both cases, the output starts with the same characters as the input.
|
||||||
|
|
||||||
|
**Validates: Requirements 1.5**
|
||||||
|
|
||||||
|
### Property 3: Tooltip positioning flips based on available viewport space
|
||||||
|
|
||||||
|
*For any* anchor rectangle position and viewport height, the tooltip SHALL be positioned above the anchor when `anchorRect.top` provides sufficient space for the tooltip height, and below the anchor otherwise. The tooltip SHALL never overflow the top or bottom of the viewport.
|
||||||
|
|
||||||
|
**Validates: Requirements 3.1, 3.2**
|
||||||
|
|
||||||
|
### Property 4: Cache round-trip — fetch then cache-hit avoids network call
|
||||||
|
|
||||||
|
*For any* CVE ID, after the tooltip system fetches data from the API and stores it in the cache, a subsequent tooltip request for the same CVE ID SHALL return the identical cached data object without making an additional network request.
|
||||||
|
|
||||||
|
**Validates: Requirements 4.1, 4.2**
|
||||||
|
|
||||||
|
## Error Handling
|
||||||
|
|
||||||
|
| Scenario | Layer | Behavior |
|
||||||
|
|----------|-------|----------|
|
||||||
|
| Invalid CVE ID format in URL param | Backend | Return `400 { error: 'Invalid CVE ID format.' }` |
|
||||||
|
| Database query error | Backend | Log error, return `500 { error: 'Internal server error.' }` |
|
||||||
|
| No session cookie / expired session | Backend | `requireAuth` middleware returns `401` |
|
||||||
|
| Network error during fetch | Frontend | Catch error, hide tooltip (do not cache failures), log to console |
|
||||||
|
| Fetch timeout / slow response | Frontend | Show loading state; if user moves away, cancel via AbortController |
|
||||||
|
| Component unmounts during fetch | Frontend | AbortController signal aborts in-flight request, no state update |
|
||||||
|
|
||||||
|
**Key principle**: Transient errors (network failures, timeouts) are NOT cached. Only successful API responses (both `exists: true` and `exists: false`) are stored in the cache. This ensures a retry on next hover for failed requests.
|
||||||
|
|
||||||
|
## Testing Strategy
|
||||||
|
|
||||||
|
### Unit Tests (Example-Based)
|
||||||
|
|
||||||
|
| Test | Validates |
|
||||||
|
|------|-----------|
|
||||||
|
| Endpoint returns `{ exists: false }` for unknown CVE ID | Req 1.2 |
|
||||||
|
| Endpoint returns 401 without session cookie | Req 1.4 |
|
||||||
|
| Endpoint returns 400 for malformed CVE ID (e.g. "not-a-cve") | Req 1.1 (error path) |
|
||||||
|
| Tooltip appears after 300ms hover delay | Req 5.1 |
|
||||||
|
| Tooltip cancelled if mouseout before 300ms | Req 5.2 |
|
||||||
|
| Tooltip hidden on mouseleave | Req 2.2 |
|
||||||
|
| Loading indicator shown while fetching | Req 2.5 |
|
||||||
|
| No tooltip shown when API returns `exists: false` | Req 2.6 |
|
||||||
|
| Severity badge uses correct color per level | Req 2.4 |
|
||||||
|
| Tooltip has max-width of 320px | Req 3.3 |
|
||||||
|
| Tooltip includes directional arrow element | Req 3.5 |
|
||||||
|
| Cache cleared on data sync/refresh | Req 4.4 |
|
||||||
|
| Cached `exists: false` suppresses tooltip and API call | Req 4.3 |
|
||||||
|
|
||||||
|
### Property-Based Tests
|
||||||
|
|
||||||
|
Property-based tests use **fast-check** (JavaScript PBT library, already compatible with the Jest/react-scripts test runner).
|
||||||
|
|
||||||
|
Each property test runs a minimum of **100 iterations**.
|
||||||
|
|
||||||
|
| Property | Tag | Focus |
|
||||||
|
|----------|-----|-------|
|
||||||
|
| Property 1 | `Feature: cve-tooltip-hover, Property 1: Tooltip endpoint returns correct data for existing CVEs` | Generate random CVE records (varying description lengths 0–1000, all 4 severity levels), insert into test DB, call endpoint, verify response shape and truncation |
|
||||||
|
| Property 2 | `Feature: cve-tooltip-hover, Property 2: Description truncation preserves content and enforces length` | Generate random strings of length 0–2000, apply truncation function, verify length invariant and prefix preservation |
|
||||||
|
| Property 3 | `Feature: cve-tooltip-hover, Property 3: Tooltip positioning flips based on available viewport space` | Generate random anchorRect.top (0–2000), tooltip height (50–200), viewport height (400–1200), verify position is within viewport bounds |
|
||||||
|
| Property 4 | `Feature: cve-tooltip-hover, Property 4: Cache round-trip` | Generate random CVE IDs and response payloads, store in cache Map, verify subsequent lookups return identical objects and no fetch is triggered |
|
||||||
|
|
||||||
|
### Test Configuration
|
||||||
|
|
||||||
|
- Test runner: `react-scripts test` (Jest) — already configured in the project
|
||||||
|
- PBT library: `fast-check` — install via `npm install --save-dev fast-check` in the `frontend/` directory
|
||||||
|
- Backend endpoint tests: Use supertest or direct handler invocation with a test SQLite DB
|
||||||
|
- Frontend component tests: React Testing Library with mocked fetch
|
||||||
73
.kiro/specs/cve-tooltip-hover/requirements.md
Normal file
73
.kiro/specs/cve-tooltip-hover/requirements.md
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
# Requirements Document
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
Add a hover tooltip to CVE badges in the Reporting Page (vuln triage view). When a user hovers over a CVE identifier badge in the findings table, the system checks whether that CVE exists in the local SQLite database. If it does, a small tooltip appears showing a brief description/blurb about that CVE. CVEs not present in the database show no tooltip.
|
||||||
|
|
||||||
|
## Glossary
|
||||||
|
|
||||||
|
- **Reporting_Page**: The vulnerability triage view at `frontend/src/components/pages/ReportingPage.js` that displays Ivanti host findings in a sortable, filterable table.
|
||||||
|
- **CVE_Badge**: The styled `<span>` element in the CVEs column of the findings table that displays a CVE identifier (e.g. CVE-2024-12345) with a purple pill/box appearance.
|
||||||
|
- **CVE_Tooltip**: A small floating box that appears on mouse hover over a CVE_Badge, displaying a text blurb about the CVE.
|
||||||
|
- **CVE_Database**: The `cves` table in the SQLite database (`backend/cve_database.db`) that stores CVE records including descriptions, severity, and vendor information.
|
||||||
|
- **Tooltip_Cache**: An in-memory lookup (React state or ref) that stores previously fetched CVE descriptions to avoid redundant API calls during the same session.
|
||||||
|
- **API_Server**: The Express backend at `backend/server.js` that serves CVE data via `/api` endpoints.
|
||||||
|
|
||||||
|
## Requirements
|
||||||
|
|
||||||
|
### Requirement 1: CVE Tooltip Data Endpoint
|
||||||
|
|
||||||
|
**User Story:** As a frontend component, I want to fetch a brief description for a given CVE ID, so that the tooltip can display relevant information without loading unnecessary data.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN a GET request is made to `/api/cves/:cveId/tooltip`, THE API_Server SHALL return a JSON object containing the `cve_id`, `description`, and `severity` fields for the matching CVE record.
|
||||||
|
2. WHEN a GET request is made to `/api/cves/:cveId/tooltip` for a CVE ID that does not exist in the CVE_Database, THE API_Server SHALL return a JSON object with `{ exists: false }` and HTTP status 200.
|
||||||
|
3. WHEN a GET request is made to `/api/cves/:cveId/tooltip` for a CVE ID that exists in the CVE_Database, THE API_Server SHALL return a JSON object with `{ exists: true, cve_id, description, severity }` and HTTP status 200.
|
||||||
|
4. THE API_Server SHALL require a valid session cookie for the `/api/cves/:cveId/tooltip` endpoint.
|
||||||
|
5. WHEN the `description` field exceeds 300 characters, THE API_Server SHALL truncate the description to 300 characters and append an ellipsis ("…").
|
||||||
|
|
||||||
|
### Requirement 2: Tooltip Display on CVE Badge Hover
|
||||||
|
|
||||||
|
**User Story:** As a security analyst triaging findings, I want to see a brief description of a CVE when I hover over its badge in the findings table, so that I can quickly understand the vulnerability without leaving the page.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the user hovers the mouse cursor over a CVE_Badge in the Reporting_Page findings table, THE Reporting_Page SHALL display a CVE_Tooltip near the hovered badge.
|
||||||
|
2. WHEN the user moves the mouse cursor away from the CVE_Badge, THE Reporting_Page SHALL hide the CVE_Tooltip.
|
||||||
|
3. THE CVE_Tooltip SHALL display the CVE description text returned by the API_Server.
|
||||||
|
4. THE CVE_Tooltip SHALL display the severity level of the CVE using the existing severity color scheme (Critical: red, High: amber, Medium: sky blue, Low: emerald).
|
||||||
|
5. WHILE the CVE data is being fetched from the API_Server, THE CVE_Tooltip SHALL display a loading indicator.
|
||||||
|
6. WHEN the API_Server returns `exists: false` for a CVE ID, THE Reporting_Page SHALL not display a CVE_Tooltip for that badge.
|
||||||
|
|
||||||
|
### Requirement 3: Tooltip Positioning and Styling
|
||||||
|
|
||||||
|
**User Story:** As a security analyst, I want the CVE tooltip to be readable and not obstruct other table content, so that I can continue triaging while viewing CVE details.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. THE CVE_Tooltip SHALL appear above the hovered CVE_Badge by default.
|
||||||
|
2. WHEN there is insufficient viewport space above the CVE_Badge, THE CVE_Tooltip SHALL appear below the badge instead.
|
||||||
|
3. THE CVE_Tooltip SHALL have a maximum width of 320 pixels.
|
||||||
|
4. THE CVE_Tooltip SHALL use the design system dark theme styling: dark background gradient, accent border, monospace font for the CVE ID, and standard font for the description text.
|
||||||
|
5. THE CVE_Tooltip SHALL include a small directional arrow pointing toward the CVE_Badge.
|
||||||
|
|
||||||
|
### Requirement 4: Tooltip Response Caching
|
||||||
|
|
||||||
|
**User Story:** As a security analyst scrolling through many findings, I want CVE tooltip data to load instantly for CVEs I have already hovered over, so that repeated hovers do not cause redundant network requests.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the Reporting_Page fetches tooltip data for a CVE ID, THE Tooltip_Cache SHALL store the response for that CVE ID.
|
||||||
|
2. WHEN the user hovers over a CVE_Badge for a CVE ID that exists in the Tooltip_Cache, THE Reporting_Page SHALL display the cached data without making an API call.
|
||||||
|
3. WHEN the user hovers over a CVE_Badge for a CVE ID where the Tooltip_Cache stores `exists: false`, THE Reporting_Page SHALL not display a tooltip and SHALL not make an API call.
|
||||||
|
4. WHEN the Reporting_Page performs a full data sync (refresh), THE Tooltip_Cache SHALL be cleared.
|
||||||
|
|
||||||
|
### Requirement 5: Hover Delay
|
||||||
|
|
||||||
|
**User Story:** As a security analyst, I want the tooltip to only appear after a brief pause on a CVE badge, so that tooltips do not flash distractingly when I move the mouse across the table quickly.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the user hovers over a CVE_Badge, THE Reporting_Page SHALL wait 300 milliseconds before initiating the tooltip display sequence.
|
||||||
|
2. IF the user moves the mouse away from the CVE_Badge before 300 milliseconds have elapsed, THEN THE Reporting_Page SHALL cancel the tooltip display and not make an API call.
|
||||||
107
.kiro/specs/cve-tooltip-hover/tasks.md
Normal file
107
.kiro/specs/cve-tooltip-hover/tasks.md
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
# Implementation Plan: CVE Tooltip Hover
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Implement a hover tooltip for CVE badges in the Reporting Page findings table. The feature spans a backend endpoint (`GET /api/cves/:cveId/tooltip`) and a frontend `CveTooltip` portal component with in-memory caching and 300ms hover delay. Tasks are ordered backend-first, then frontend component, then integration, with property tests alongside each layer.
|
||||||
|
|
||||||
|
## Tasks
|
||||||
|
|
||||||
|
- [x] 1. Add backend tooltip endpoint
|
||||||
|
- [x] 1.1 Add `GET /api/cves/:cveId/tooltip` route inline in `backend/server.js`
|
||||||
|
- Place it alongside existing CVE endpoints (after `/api/cves/:cveId/vendors`)
|
||||||
|
- Validate `:cveId` against existing `CVE_ID_PATTERN`; return 400 for invalid format
|
||||||
|
- Query: `SELECT cve_id, description, severity FROM cves WHERE cve_id = ? LIMIT 1`
|
||||||
|
- If no row: return `{ exists: false }` with status 200
|
||||||
|
- If row found: truncate `description` to 300 chars + "…" if needed, return `{ exists: true, cve_id, description, severity }`
|
||||||
|
- Protect with `requireAuth(db)` middleware
|
||||||
|
- _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5_
|
||||||
|
|
||||||
|
- [ ]* 1.2 Write property test for tooltip endpoint data correctness
|
||||||
|
- **Property 1: Tooltip endpoint returns correct data for existing CVEs**
|
||||||
|
- Install `fast-check` as dev dependency in `frontend/` (shared test runner)
|
||||||
|
- Generate random CVE records with description lengths 0–1000 and all 4 severity levels
|
||||||
|
- Verify response shape, truncation at 300 chars, and prefix preservation
|
||||||
|
- **Validates: Requirements 1.1, 1.3, 1.5**
|
||||||
|
|
||||||
|
- [ ]* 1.3 Write property test for description truncation
|
||||||
|
- **Property 2: Description truncation preserves content and enforces length**
|
||||||
|
- Extract truncation logic into a testable pure function
|
||||||
|
- Generate random strings of length 0–2000, verify length invariant and prefix match
|
||||||
|
- **Validates: Requirements 1.5**
|
||||||
|
|
||||||
|
- [x] 2. Checkpoint — Verify backend endpoint
|
||||||
|
- Ensure all tests pass, ask the user if questions arise.
|
||||||
|
|
||||||
|
- [x] 3. Create CveTooltip frontend component
|
||||||
|
- [x] 3.1 Create `frontend/src/components/CveTooltip.js`
|
||||||
|
- Portal-rendered component using `ReactDOM.createPortal` to `document.body`
|
||||||
|
- Props: `cveId` (string|null), `anchorRect` (DOMRect|null), `cache` (useRef Map)
|
||||||
|
- Internal state: `data`, `loading`
|
||||||
|
- On `cveId` change: check cache → if miss, fetch from `/api/cves/:cveId/tooltip` with AbortController
|
||||||
|
- If cached `exists: false` or fetch returns `exists: false`, render nothing
|
||||||
|
- Show loading spinner (Loader from lucide-react) while fetching
|
||||||
|
- Display: CVE ID in monospace, severity badge with design system colors, description text
|
||||||
|
- Max-width 320px, dark theme gradient background, accent border, directional arrow
|
||||||
|
- Position above anchor by default; flip below if insufficient viewport space above
|
||||||
|
- Do not cache transient errors (network failures)
|
||||||
|
- _Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 3.1, 3.2, 3.3, 3.4, 3.5_
|
||||||
|
|
||||||
|
- [ ]* 3.2 Write property test for tooltip positioning logic
|
||||||
|
- **Property 3: Tooltip positioning flips based on available viewport space**
|
||||||
|
- Extract positioning calculation into a pure function
|
||||||
|
- Generate random anchorRect.top (0–2000), tooltip height (50–200), viewport height (400–1200)
|
||||||
|
- Verify tooltip never overflows top or bottom of viewport
|
||||||
|
- **Validates: Requirements 3.1, 3.2**
|
||||||
|
|
||||||
|
- [ ]* 3.3 Write unit tests for CveTooltip component
|
||||||
|
- Test loading state renders spinner
|
||||||
|
- Test `exists: false` renders nothing
|
||||||
|
- Test severity badge uses correct color per level
|
||||||
|
- Test max-width constraint
|
||||||
|
- Test directional arrow element is present
|
||||||
|
- _Requirements: 2.4, 2.5, 2.6, 3.3, 3.5_
|
||||||
|
|
||||||
|
- [x] 4. Checkpoint — Verify CveTooltip component
|
||||||
|
- Ensure all tests pass, ask the user if questions arise.
|
||||||
|
|
||||||
|
- [x] 5. Integrate tooltip into ReportingPage
|
||||||
|
- [x] 5.1 Add hover state and cache ref to ReportingPage
|
||||||
|
- Add state: `tooltipCveId` (string|null), `tooltipAnchorRect` (DOMRect|null)
|
||||||
|
- Add `useRef(new Map())` for tooltip cache
|
||||||
|
- Add `useRef` for hover delay timer
|
||||||
|
- Clear cache when findings data is re-synced (inside existing sync callback)
|
||||||
|
- _Requirements: 4.1, 4.4, 5.1_
|
||||||
|
|
||||||
|
- [x] 5.2 Add mouseenter/mouseleave handlers to CVE badge spans
|
||||||
|
- In the `renderCell` function for the `'cves'` column case, wrap each CVE badge `<span>` with `onMouseEnter` and `onMouseLeave`
|
||||||
|
- `onMouseEnter`: start 300ms setTimeout; on fire, set `tooltipCveId` and `tooltipAnchorRect` from `getBoundingClientRect()`
|
||||||
|
- `onMouseLeave`: clear timeout, set `tooltipCveId` to null
|
||||||
|
- _Requirements: 2.1, 2.2, 5.1, 5.2_
|
||||||
|
|
||||||
|
- [x] 5.3 Render CveTooltip instance in ReportingPage
|
||||||
|
- Add single `<CveTooltip>` at the bottom of the ReportingPage return, passing `tooltipCveId`, `tooltipAnchorRect`, and cache ref
|
||||||
|
- _Requirements: 2.1, 4.2, 4.3_
|
||||||
|
|
||||||
|
- [ ]* 5.4 Write property test for cache round-trip behavior
|
||||||
|
- **Property 4: Cache round-trip — fetch then cache-hit avoids network call**
|
||||||
|
- Generate random CVE IDs and response payloads, store in Map, verify lookups return identical objects
|
||||||
|
- **Validates: Requirements 4.1, 4.2**
|
||||||
|
|
||||||
|
- [ ]* 5.5 Write unit tests for hover delay and cache integration
|
||||||
|
- Test tooltip appears after 300ms delay (use fake timers)
|
||||||
|
- Test tooltip cancelled if mouseout before 300ms
|
||||||
|
- Test cached `exists: false` suppresses tooltip and API call
|
||||||
|
- Test cache cleared on data sync/refresh
|
||||||
|
- _Requirements: 4.3, 4.4, 5.1, 5.2_
|
||||||
|
|
||||||
|
- [x] 6. Final checkpoint — Ensure all tests pass
|
||||||
|
- Ensure all tests pass, ask the user if questions arise.
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- Tasks marked with `*` are optional and can be skipped for faster MVP
|
||||||
|
- Each task references specific requirements for traceability
|
||||||
|
- Checkpoints ensure incremental validation
|
||||||
|
- Property tests validate universal correctness properties from the design document
|
||||||
|
- Unit tests validate specific examples and edge cases
|
||||||
|
- The project uses plain JavaScript (no TypeScript), fast-check for PBT, and react-scripts test (Jest)
|
||||||
1
.kiro/specs/queue-hostname-ip-display/.config.kiro
Normal file
1
.kiro/specs/queue-hostname-ip-display/.config.kiro
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"specId": "b8855eb4-3949-426e-86ac-36fe069a6bb1", "workflowType": "requirements-first", "specType": "feature"}
|
||||||
175
.kiro/specs/queue-hostname-ip-display/design.md
Normal file
175
.kiro/specs/queue-hostname-ip-display/design.md
Normal file
@@ -0,0 +1,175 @@
|
|||||||
|
# Design Document: Queue Hostname & IP Display
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
This feature adds hostname tracking to the Ivanti todo queue. Currently the queue stores `ip_address` but not `hostname`. The change spans three layers:
|
||||||
|
|
||||||
|
1. **Database** — A migration adds a `hostname TEXT` column to `ivanti_todo_queue`.
|
||||||
|
2. **Backend API** — The POST (single + batch) endpoints accept and store an optional `hostname` field. The GET endpoint already uses `SELECT *`, so hostname is returned automatically once the column exists.
|
||||||
|
3. **Frontend** — The `addToQueue` and `submitBatch` functions pass `finding.hostName` as `hostname`. The QueuePanel renders hostname and IP address for both CARD and vendor-grouped (FP/Archer) sections.
|
||||||
|
|
||||||
|
The change is additive and backward-compatible. Existing rows get `NULL` for hostname. No existing behavior changes unless both hostname and ip_address are present.
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
The data flows through three layers in a straight pipeline:
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
flowchart LR
|
||||||
|
A[Ivanti Finding<br/>hostName, ipAddress] -->|POST /todo-queue| B[Express Route<br/>ivantiTodoQueue.js]
|
||||||
|
B -->|INSERT hostname, ip_address| C[SQLite<br/>ivanti_todo_queue]
|
||||||
|
C -->|SELECT *| B
|
||||||
|
B -->|GET response| D[QueuePanel<br/>ReportingPage.js]
|
||||||
|
```
|
||||||
|
|
||||||
|
No new services, tables, or route modules are introduced. The migration script is a standalone Node.js file following the existing pattern in `backend/migrations/`.
|
||||||
|
|
||||||
|
## Components and Interfaces
|
||||||
|
|
||||||
|
### Migration Script: `backend/migrations/add_todo_queue_hostname.js`
|
||||||
|
|
||||||
|
Follows the exact pattern of `add_todo_queue_ip_address.js`:
|
||||||
|
|
||||||
|
- Opens `cve_database.db` via `sqlite3`
|
||||||
|
- Runs `ALTER TABLE ivanti_todo_queue ADD COLUMN hostname TEXT`
|
||||||
|
- Catches `duplicate column name` error to make it idempotent
|
||||||
|
- Closes the database connection
|
||||||
|
|
||||||
|
### Backend Route: `backend/routes/ivantiTodoQueue.js`
|
||||||
|
|
||||||
|
Changes to two endpoints:
|
||||||
|
|
||||||
|
**POST `/` (single-item)**
|
||||||
|
- Extract `hostname` from `req.body`
|
||||||
|
- Sanitize: if present and a string, trim and slice to 255 chars; otherwise `null`
|
||||||
|
- Add to the INSERT column list and parameter array
|
||||||
|
|
||||||
|
**POST `/batch`**
|
||||||
|
- For each finding in the `findings` array, extract `hostname` from `f.hostname`
|
||||||
|
- Same sanitization as single-item
|
||||||
|
- Add to the per-row INSERT column list and parameter array
|
||||||
|
|
||||||
|
**GET `/`** — No code change needed. `SELECT *` already returns all columns.
|
||||||
|
|
||||||
|
**PUT `/:id`** — No change. Hostname is set at insert time and not editable.
|
||||||
|
|
||||||
|
### Frontend: `ReportingPage.js`
|
||||||
|
|
||||||
|
**`addToQueue` function**
|
||||||
|
- Add `hostname: finding.hostName || null` to the POST body
|
||||||
|
|
||||||
|
**`submitBatch` function**
|
||||||
|
- Add `hostname: f.hostName || null` to each finding object in `findingsPayload`
|
||||||
|
|
||||||
|
**QueuePanel rendering (per item)**
|
||||||
|
|
||||||
|
For CARD items, the content `<div>` currently shows:
|
||||||
|
1. `finding_id`
|
||||||
|
2. `ip_address` (if present)
|
||||||
|
|
||||||
|
New rendering for CARD items:
|
||||||
|
1. `finding_id`
|
||||||
|
2. `hostname` (if present)
|
||||||
|
3. `ip_address` (if present)
|
||||||
|
|
||||||
|
For vendor-grouped items (FP/Archer), the content `<div>` currently shows:
|
||||||
|
1. `finding_id`
|
||||||
|
2. CVE list (if present)
|
||||||
|
|
||||||
|
New rendering for vendor-grouped items:
|
||||||
|
1. `finding_id`
|
||||||
|
2. CVE list (if present)
|
||||||
|
3. `hostname` (if present)
|
||||||
|
4. `ip_address` (if present)
|
||||||
|
|
||||||
|
Both hostname and IP use the same monospace styling at `0.68rem` / `0.62rem` with muted colors consistent with the existing design system.
|
||||||
|
|
||||||
|
## Data Models
|
||||||
|
|
||||||
|
### `ivanti_todo_queue` table (after migration)
|
||||||
|
|
||||||
|
| Column | Type | Nullable | Notes |
|
||||||
|
|--------|------|----------|-------|
|
||||||
|
| id | INTEGER | NO | PRIMARY KEY AUTOINCREMENT |
|
||||||
|
| user_id | INTEGER | NO | FK → users(id) |
|
||||||
|
| finding_id | TEXT | NO | |
|
||||||
|
| finding_title | TEXT | YES | max 500 chars |
|
||||||
|
| cves_json | TEXT | YES | JSON array string |
|
||||||
|
| ip_address | TEXT | YES | max 64 chars |
|
||||||
|
| **hostname** | **TEXT** | **YES** | **max 255 chars (new)** |
|
||||||
|
| vendor | TEXT | NO | |
|
||||||
|
| workflow_type | TEXT | NO | FP, Archer, or CARD |
|
||||||
|
| status | TEXT | NO | pending or complete |
|
||||||
|
| created_at | DATETIME | NO | DEFAULT CURRENT_TIMESTAMP |
|
||||||
|
| updated_at | DATETIME | NO | DEFAULT CURRENT_TIMESTAMP |
|
||||||
|
|
||||||
|
### API Request/Response Changes
|
||||||
|
|
||||||
|
**POST `/api/ivanti/todo-queue` body** — adds optional field:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"finding_id": "...",
|
||||||
|
"finding_title": "...",
|
||||||
|
"cves": [],
|
||||||
|
"ip_address": "...",
|
||||||
|
"hostname": "server01.example.com",
|
||||||
|
"vendor": "...",
|
||||||
|
"workflow_type": "CARD"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**POST `/api/ivanti/todo-queue/batch` body** — adds optional field per finding:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"findings": [
|
||||||
|
{ "finding_id": "...", "ip_address": "...", "hostname": "server01.example.com" }
|
||||||
|
],
|
||||||
|
"workflow_type": "FP",
|
||||||
|
"vendor": "VendorName"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**GET response** — `hostname` field included automatically via `SELECT *`:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"finding_id": "...",
|
||||||
|
"hostname": "server01.example.com",
|
||||||
|
"ip_address": "10.0.0.1",
|
||||||
|
"..."
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Correctness Properties
|
||||||
|
|
||||||
|
*A property is a characteristic or behavior that should hold true across all valid executions of a system — essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
|
||||||
|
|
||||||
|
### Property 1: Hostname storage round-trip
|
||||||
|
|
||||||
|
*For any* valid hostname string (up to 255 characters), storing it via the queue API (single or batch endpoint) and then retrieving it via GET should return the exact same trimmed string. When the hostname is omitted, null, or empty, the stored and returned value should be null.
|
||||||
|
|
||||||
|
**Validates: Requirements 2.1, 2.2, 2.3, 2.4**
|
||||||
|
|
||||||
|
### Property 2: Hostname display presence
|
||||||
|
|
||||||
|
*For any* queue item with a non-null hostname value, the rendered QueuePanel output should contain the hostname text, regardless of whether the item is a CARD item or a vendor-grouped (FP/Archer) item.
|
||||||
|
|
||||||
|
**Validates: Requirements 4.1, 5.1**
|
||||||
|
|
||||||
|
## Error Handling
|
||||||
|
|
||||||
|
| Scenario | Handling |
|
||||||
|
|----------|----------|
|
||||||
|
| Migration run when column already exists | Catch `duplicate column name` SQLite error, log skip message, exit cleanly |
|
||||||
|
| `hostname` field is not a string | Treat as null — store NULL in database |
|
||||||
|
| `hostname` exceeds 255 characters | Truncate to 255 characters via `.slice(0, 255)` |
|
||||||
|
| `hostname` is undefined/null/empty string | Store NULL in database |
|
||||||
|
| GET returns item with null hostname | Frontend conditionally renders — no hostname line shown |
|
||||||
|
| GET returns item with null ip_address and null hostname | CARD: show only finding_id. Vendor: show finding_id + CVEs only |
|
||||||
|
|
||||||
|
No new error codes or HTTP status changes are introduced. The hostname field is optional and its absence is a normal case, not an error.
|
||||||
|
|
||||||
|
## Testing Strategy
|
||||||
|
|
||||||
|
Testing is out of scope for this feature. Manual verification will be performed after implementation.
|
||||||
70
.kiro/specs/queue-hostname-ip-display/requirements.md
Normal file
70
.kiro/specs/queue-hostname-ip-display/requirements.md
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
# Requirements Document
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
The Ivanti Queue (todo queue) in the STEAM Security Dashboard currently stores and displays `ip_address` for CARD workflow items but omits hostname entirely. Vendor-grouped sections (FP/Archer) display only `finding_id` and CVEs, hiding the `ip_address` that is already stored. This feature adds a `hostname` column to the database, passes hostname through the backend API, and displays both hostname and IP address across all queue sections (CARD, FP, Archer).
|
||||||
|
|
||||||
|
## Glossary
|
||||||
|
|
||||||
|
- **Queue_Panel**: The slide-out side panel (`QueuePanel` component) that displays the user's staged Ivanti findings grouped by workflow type and vendor.
|
||||||
|
- **Queue_API**: The Express route module (`ivantiTodoQueue.js`) that handles CRUD operations on the `ivanti_todo_queue` table.
|
||||||
|
- **Queue_Table**: The SQLite table `ivanti_todo_queue` that persists per-user queue items.
|
||||||
|
- **CARD_Section**: The top group in the Queue_Panel that displays items with `workflow_type = 'CARD'`.
|
||||||
|
- **Vendor_Section**: Groups in the Queue_Panel for FP and Archer workflow items, organized by vendor name.
|
||||||
|
- **Finding**: An Ivanti host finding record containing fields such as `id`, `title`, `hostName`, `ipAddress`, `cves`, and `severity`.
|
||||||
|
- **Migration_Script**: A standalone Node.js script in `backend/migrations/` that alters the SQLite schema.
|
||||||
|
|
||||||
|
## Requirements
|
||||||
|
|
||||||
|
### Requirement 1: Add hostname column to the queue database table
|
||||||
|
|
||||||
|
**User Story:** As a developer, I want the queue table to have a `hostname` column, so that hostname data can be persisted alongside each queued finding.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. THE Migration_Script SHALL add a `hostname` TEXT column to the Queue_Table.
|
||||||
|
2. WHEN the `hostname` column already exists, THE Migration_Script SHALL skip the alteration and log a message indicating the column already exists.
|
||||||
|
3. THE Migration_Script SHALL preserve all existing rows and column data in the Queue_Table.
|
||||||
|
|
||||||
|
### Requirement 2: Accept and store hostname in queue API endpoints
|
||||||
|
|
||||||
|
**User Story:** As a developer, I want the queue API to accept a `hostname` field, so that hostname data is stored when findings are added to the queue.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN a POST request is received at the single-item endpoint, THE Queue_API SHALL accept an optional `hostname` string field (max 255 characters) and store it in the Queue_Table.
|
||||||
|
2. WHEN a POST request is received at the batch endpoint, THE Queue_API SHALL accept an optional `hostname` string field on each finding object (max 255 characters) and store it in the Queue_Table.
|
||||||
|
3. WHEN the `hostname` field is omitted or empty, THE Queue_API SHALL store NULL for the `hostname` column.
|
||||||
|
4. WHEN a GET request is received, THE Queue_API SHALL return the `hostname` field for each queue item in the response.
|
||||||
|
|
||||||
|
### Requirement 3: Pass hostname from the frontend to the queue API
|
||||||
|
|
||||||
|
**User Story:** As a developer, I want the frontend to send hostname data when adding findings to the queue, so that hostname is captured from the Ivanti findings data.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN a single finding is added to the queue, THE ReportingPage SHALL include the finding's `hostName` value in the `hostname` field of the POST request body.
|
||||||
|
2. WHEN findings are added via batch submission, THE ReportingPage SHALL include each finding's `hostName` value in the `hostname` field of the corresponding finding object in the POST request body.
|
||||||
|
|
||||||
|
### Requirement 4: Display hostname and IP address in the CARD section
|
||||||
|
|
||||||
|
**User Story:** As a security analyst, I want to see both hostname and IP address for CARD items in the queue, so that I can identify the affected host at a glance.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN a CARD item has a `hostname` value, THE CARD_Section SHALL display the hostname below the finding ID.
|
||||||
|
2. WHEN a CARD item has an `ip_address` value, THE CARD_Section SHALL display the IP address below the hostname.
|
||||||
|
3. WHEN a CARD item has both `hostname` and `ip_address`, THE CARD_Section SHALL display hostname on one line and IP address on the next line.
|
||||||
|
4. WHEN a CARD item has only `ip_address` and no `hostname`, THE CARD_Section SHALL display the IP address (preserving current behavior).
|
||||||
|
5. WHEN a CARD item has only `hostname` and no `ip_address`, THE CARD_Section SHALL display the hostname.
|
||||||
|
|
||||||
|
### Requirement 5: Display hostname and IP address in vendor sections (FP/Archer)
|
||||||
|
|
||||||
|
**User Story:** As a security analyst, I want to see hostname and IP address for FP and Archer items in the queue, so that I can identify affected hosts without leaving the queue panel.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN a vendor-grouped item has a `hostname` value, THE Vendor_Section SHALL display the hostname below the CVE list.
|
||||||
|
2. WHEN a vendor-grouped item has an `ip_address` value, THE Vendor_Section SHALL display the IP address below the hostname (or below the CVE list if no hostname exists).
|
||||||
|
3. WHEN a vendor-grouped item has both `hostname` and `ip_address`, THE Vendor_Section SHALL display hostname on one line and IP address on the next line, both below the CVE list.
|
||||||
|
4. WHEN a vendor-grouped item has neither `hostname` nor `ip_address`, THE Vendor_Section SHALL display only the finding ID and CVE list (preserving current behavior).
|
||||||
56
.kiro/specs/queue-hostname-ip-display/tasks.md
Normal file
56
.kiro/specs/queue-hostname-ip-display/tasks.md
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
# Implementation Plan: Queue Hostname & IP Display
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Add hostname tracking to the Ivanti todo queue across database, backend API, and frontend display layers. All changes are additive and backward-compatible.
|
||||||
|
|
||||||
|
## Tasks
|
||||||
|
|
||||||
|
- [x] 1. Create database migration to add hostname column
|
||||||
|
- Create `backend/migrations/add_todo_queue_hostname.js` following the exact pattern of `add_todo_queue_ip_address.js`
|
||||||
|
- Use `ALTER TABLE ivanti_todo_queue ADD COLUMN hostname TEXT`
|
||||||
|
- Handle `duplicate column name` error for idempotency
|
||||||
|
- Log appropriate messages for success and skip scenarios
|
||||||
|
- _Requirements: 1.1, 1.2, 1.3_
|
||||||
|
|
||||||
|
- [x] 2. Update backend API endpoints to accept and store hostname
|
||||||
|
- [x] 2.1 Update POST `/` (single-item) endpoint in `backend/routes/ivantiTodoQueue.js`
|
||||||
|
- Extract `hostname` from `req.body`
|
||||||
|
- Sanitize: if present and a string, trim and slice to 255 chars; otherwise `null`
|
||||||
|
- Add `hostname` to the INSERT column list and parameter array
|
||||||
|
- _Requirements: 2.1, 2.3_
|
||||||
|
|
||||||
|
- [x] 2.2 Update POST `/batch` endpoint in `backend/routes/ivantiTodoQueue.js`
|
||||||
|
- For each finding, extract `hostname` from `f.hostname`
|
||||||
|
- Apply same sanitization as single-item (trim, slice to 255, or null)
|
||||||
|
- Add `hostname` to the per-row INSERT column list and parameter array
|
||||||
|
- _Requirements: 2.2, 2.3_
|
||||||
|
|
||||||
|
- [x] 3. Checkpoint
|
||||||
|
- Ensure all backend changes are consistent, ask the user if questions arise.
|
||||||
|
|
||||||
|
- [x] 4. Update frontend to pass hostname and display it in the queue panel
|
||||||
|
- [x] 4.1 Update `addToQueue` function in `ReportingPage.js`
|
||||||
|
- Add `hostname: finding.hostName || null` to the POST request body
|
||||||
|
- _Requirements: 3.1_
|
||||||
|
|
||||||
|
- [x] 4.2 Update `submitBatch` function in `ReportingPage.js`
|
||||||
|
- Add `hostname: f.hostName || null` to each finding object in the payload
|
||||||
|
- _Requirements: 3.2_
|
||||||
|
|
||||||
|
- [x] 4.3 Update CARD section rendering in QueuePanel (`ReportingPage.js`)
|
||||||
|
- Display `hostname` below finding_id (when present)
|
||||||
|
- Display `ip_address` below hostname (when present)
|
||||||
|
- Handle all combinations: both present, only hostname, only ip_address, neither
|
||||||
|
- Use monospace styling at `0.68rem` consistent with existing ip_address display
|
||||||
|
- _Requirements: 4.1, 4.2, 4.3, 4.4, 4.5_
|
||||||
|
|
||||||
|
- [x] 4.4 Update vendor section (FP/Archer) rendering in QueuePanel (`ReportingPage.js`)
|
||||||
|
- Display `hostname` below the CVE list (when present)
|
||||||
|
- Display `ip_address` below hostname or below CVE list if no hostname
|
||||||
|
- Handle all combinations: both present, only one, neither
|
||||||
|
- Use monospace styling at `0.62rem` / `0.68rem` with muted colors matching existing design
|
||||||
|
- _Requirements: 5.1, 5.2, 5.3, 5.4_
|
||||||
|
|
||||||
|
- [x] 5. Final checkpoint
|
||||||
|
- Ensure all changes are wired together end-to-end, ask the user if questions arise.
|
||||||
25
backend/migrations/add_todo_queue_hostname.js
Normal file
25
backend/migrations/add_todo_queue_hostname.js
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
// Migration: Add hostname column to ivanti_todo_queue
|
||||||
|
const sqlite3 = require('sqlite3').verbose();
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const dbPath = path.join(__dirname, '..', 'cve_database.db');
|
||||||
|
const db = new sqlite3.Database(dbPath);
|
||||||
|
|
||||||
|
console.log('Starting add_todo_queue_hostname migration...');
|
||||||
|
|
||||||
|
db.run(
|
||||||
|
'ALTER TABLE ivanti_todo_queue ADD COLUMN hostname TEXT',
|
||||||
|
(err) => {
|
||||||
|
if (err) {
|
||||||
|
// Column may already exist if migration was run before
|
||||||
|
if (err.message.includes('duplicate column name')) {
|
||||||
|
console.log('✓ hostname column already exists, skipping');
|
||||||
|
} else {
|
||||||
|
console.error('Error adding column:', err);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log('✓ hostname column added');
|
||||||
|
}
|
||||||
|
db.close(() => console.log('Migration complete!'));
|
||||||
|
}
|
||||||
|
);
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
// routes/ivantiTodoQueue.js
|
// routes/ivantiTodoQueue.js
|
||||||
const express = require('express');
|
const express = require('express');
|
||||||
const { requireGroup } = require('../middleware/auth');
|
const { requireGroup } = require('../middleware/auth');
|
||||||
|
const logAudit = require('../helpers/auditLog');
|
||||||
|
|
||||||
const VALID_WORKFLOW_TYPES = ['FP', 'Archer', 'CARD'];
|
const VALID_WORKFLOW_TYPES = ['FP', 'Archer', 'CARD'];
|
||||||
const VALID_STATUSES = ['pending', 'complete'];
|
const VALID_STATUSES = ['pending', 'complete'];
|
||||||
@@ -14,8 +15,16 @@ function isValidVendor(vendor) {
|
|||||||
function createIvantiTodoQueueRouter(db, requireAuth) {
|
function createIvantiTodoQueueRouter(db, requireAuth) {
|
||||||
const router = express.Router();
|
const router = express.Router();
|
||||||
|
|
||||||
// GET /api/ivanti/todo-queue
|
/**
|
||||||
// Fetch current user's queue items, ordered by vendor then created_at
|
* GET /api/ivanti/todo-queue
|
||||||
|
*
|
||||||
|
* Fetch the current user's queue items, ordered by vendor then created_at.
|
||||||
|
*
|
||||||
|
* @returns {Array<Object>} 200 - Array of queue items, each with:
|
||||||
|
* id, user_id, finding_id, finding_title, cves_json, ip_address,
|
||||||
|
* vendor, workflow_type, status, created_at, updated_at, cves (parsed array)
|
||||||
|
* @returns {Object} 500 - { error: string } on database error
|
||||||
|
*/
|
||||||
router.get('/', requireAuth(db), (req, res) => {
|
router.get('/', requireAuth(db), (req, res) => {
|
||||||
db.all(
|
db.all(
|
||||||
`SELECT * FROM ivanti_todo_queue
|
`SELECT * FROM ivanti_todo_queue
|
||||||
@@ -37,10 +46,174 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// POST /api/ivanti/todo-queue
|
/**
|
||||||
// Add a finding to the queue
|
* POST /api/ivanti/todo-queue/batch
|
||||||
|
*
|
||||||
|
* Add multiple findings to the current user's queue in a single transaction.
|
||||||
|
*
|
||||||
|
* @body {Object[]} findings - Required array of 1–200 finding objects
|
||||||
|
* @body {string} findings[].finding_id - Required, non-empty finding identifier
|
||||||
|
* @body {string} [findings[].finding_title] - Optional finding title (max 500 chars)
|
||||||
|
* @body {string[]} [findings[].cves] - Optional array of CVE identifiers
|
||||||
|
* @body {string} [findings[].ip_address] - Optional IP address (max 64 chars)
|
||||||
|
* @body {string} [findings[].hostname] - Optional hostname (max 255 chars)
|
||||||
|
* @body {string} workflow_type - One of 'FP', 'Archer', 'CARD'
|
||||||
|
* @body {string} vendor - Required for FP/Archer (max 200 chars); optional for CARD
|
||||||
|
*
|
||||||
|
* @returns {Object} 201 - { items: Array<Object> } array of created queue items,
|
||||||
|
* each with: id, user_id, finding_id, finding_title, cves_json, ip_address,
|
||||||
|
* vendor, workflow_type, status, created_at, updated_at, cves (parsed array)
|
||||||
|
* @returns {Object} 400 - { error: string } on validation failure
|
||||||
|
* @returns {Object} 500 - { error: string } on database/transaction error (all inserts rolled back)
|
||||||
|
*/
|
||||||
|
router.post('/batch', requireAuth(db), requireGroup('Admin', 'Standard_User'), (req, res) => {
|
||||||
|
const { findings, workflow_type, vendor } = req.body;
|
||||||
|
|
||||||
|
// --- Validation ---
|
||||||
|
if (!Array.isArray(findings) || findings.length < 1 || findings.length > 200) {
|
||||||
|
return res.status(400).json({ error: 'findings array must contain 1-200 items.' });
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < findings.length; i++) {
|
||||||
|
const f = findings[i];
|
||||||
|
if (!f || typeof f.finding_id !== 'string' || f.finding_id.trim().length === 0) {
|
||||||
|
return res.status(400).json({ error: 'Each finding must have a non-empty finding_id string.' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!VALID_WORKFLOW_TYPES.includes(workflow_type)) {
|
||||||
|
return res.status(400).json({ error: 'workflow_type must be FP, Archer, or CARD.' });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (workflow_type !== 'CARD') {
|
||||||
|
if (!isValidVendor(vendor)) {
|
||||||
|
return res.status(400).json({ error: 'vendor is required for FP and Archer workflows.' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (vendor !== undefined && vendor !== '' && typeof vendor === 'string' && vendor.trim().length > 200) {
|
||||||
|
return res.status(400).json({ error: 'vendor must be under 200 chars.' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const vendorVal = workflow_type === 'CARD' ? '' : vendor.trim();
|
||||||
|
const userId = req.user.id;
|
||||||
|
|
||||||
|
// --- Transactional batch insert ---
|
||||||
|
// Prepare all row values upfront
|
||||||
|
const rows = findings.map((f) => {
|
||||||
|
const findingId = f.finding_id.trim();
|
||||||
|
const title = f.finding_title && typeof f.finding_title === 'string'
|
||||||
|
? f.finding_title.slice(0, 500)
|
||||||
|
: null;
|
||||||
|
const cvesJson = Array.isArray(f.cves) ? JSON.stringify(f.cves) : null;
|
||||||
|
const ipVal = f.ip_address && typeof f.ip_address === 'string'
|
||||||
|
? f.ip_address.trim().slice(0, 64)
|
||||||
|
: null;
|
||||||
|
const hostVal = f.hostname && typeof f.hostname === 'string'
|
||||||
|
? f.hostname.trim().slice(0, 255)
|
||||||
|
: null;
|
||||||
|
return [userId, findingId, title, cvesJson, ipVal, hostVal, vendorVal, workflow_type];
|
||||||
|
});
|
||||||
|
|
||||||
|
const insertedIds = [];
|
||||||
|
let insertError = null;
|
||||||
|
let remaining = rows.length;
|
||||||
|
|
||||||
|
db.serialize(() => {
|
||||||
|
db.run('BEGIN TRANSACTION');
|
||||||
|
|
||||||
|
rows.forEach((params) => {
|
||||||
|
db.run(
|
||||||
|
`INSERT INTO ivanti_todo_queue
|
||||||
|
(user_id, finding_id, finding_title, cves_json, ip_address, hostname, vendor, workflow_type)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
|
||||||
|
params,
|
||||||
|
function (err) {
|
||||||
|
if (err && !insertError) {
|
||||||
|
insertError = err;
|
||||||
|
} else if (!err) {
|
||||||
|
insertedIds.push(this.lastID);
|
||||||
|
}
|
||||||
|
remaining--;
|
||||||
|
|
||||||
|
// After all insert callbacks have fired, commit or rollback
|
||||||
|
if (remaining === 0) {
|
||||||
|
if (insertError) {
|
||||||
|
db.run('ROLLBACK', () => {
|
||||||
|
console.error('Batch insert error:', insertError);
|
||||||
|
return res.status(500).json({ error: 'Internal server error.' });
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
db.run('COMMIT', (commitErr) => {
|
||||||
|
if (commitErr) {
|
||||||
|
console.error('Batch commit error:', commitErr);
|
||||||
|
db.run('ROLLBACK', () => {});
|
||||||
|
return res.status(500).json({ error: 'Internal server error.' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch all inserted rows
|
||||||
|
const placeholders = insertedIds.map(() => '?').join(',');
|
||||||
|
db.all(
|
||||||
|
`SELECT * FROM ivanti_todo_queue WHERE id IN (${placeholders})`,
|
||||||
|
insertedIds,
|
||||||
|
(fetchErr, fetchedRows) => {
|
||||||
|
if (fetchErr) {
|
||||||
|
console.error('Error fetching inserted batch rows:', fetchErr);
|
||||||
|
return res.status(500).json({ error: 'Internal server error.' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const items = (fetchedRows || []).map((r) => ({
|
||||||
|
...r,
|
||||||
|
cves: r.cves_json ? JSON.parse(r.cves_json) : [],
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Audit log (fire-and-forget)
|
||||||
|
logAudit(db, {
|
||||||
|
userId: req.user.id,
|
||||||
|
username: req.user.username,
|
||||||
|
action: 'batch_add_to_queue',
|
||||||
|
entityType: 'ivanti_todo_queue',
|
||||||
|
entityId: null,
|
||||||
|
details: {
|
||||||
|
count: insertedIds.length,
|
||||||
|
workflow_type: workflow_type,
|
||||||
|
finding_ids: findings.map((f) => f.finding_id.trim()),
|
||||||
|
},
|
||||||
|
ipAddress: req.ip,
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.status(201).json({ items });
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* POST /api/ivanti/todo-queue
|
||||||
|
*
|
||||||
|
* Add a single finding to the current user's queue.
|
||||||
|
*
|
||||||
|
* @body {string} finding_id - Required, non-empty finding identifier
|
||||||
|
* @body {string} [finding_title] - Optional finding title (max 500 chars)
|
||||||
|
* @body {string[]} [cves] - Optional array of CVE identifiers
|
||||||
|
* @body {string} [ip_address] - Optional IP address (max 64 chars)
|
||||||
|
* @body {string} [hostname] - Optional hostname (max 255 chars) * @body {string} vendor - Required for FP/Archer (max 200 chars); optional for CARD
|
||||||
|
* @body {string} workflow_type - One of 'FP', 'Archer', 'CARD'
|
||||||
|
*
|
||||||
|
* @returns {Object} 201 - Created queue item with parsed cves array:
|
||||||
|
* id, user_id, finding_id, finding_title, cves_json, ip_address,
|
||||||
|
* vendor, workflow_type, status, created_at, updated_at, cves
|
||||||
|
* @returns {Object} 400 - { error: string } on validation failure
|
||||||
|
* @returns {Object} 500 - { error: string } on database error
|
||||||
|
*/
|
||||||
router.post('/', requireAuth(db), requireGroup('Admin', 'Standard_User'), (req, res) => {
|
router.post('/', requireAuth(db), requireGroup('Admin', 'Standard_User'), (req, res) => {
|
||||||
const { finding_id, finding_title, cves, ip_address, vendor, workflow_type } = req.body;
|
const { finding_id, finding_title, cves, ip_address, hostname, vendor, workflow_type } = req.body;
|
||||||
|
|
||||||
if (!finding_id || typeof finding_id !== 'string' || finding_id.trim().length === 0) {
|
if (!finding_id || typeof finding_id !== 'string' || finding_id.trim().length === 0) {
|
||||||
return res.status(400).json({ error: 'finding_id is required.' });
|
return res.status(400).json({ error: 'finding_id is required.' });
|
||||||
@@ -59,15 +232,16 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
|
|||||||
const vendorVal = workflow_type === 'CARD' ? '' : vendor.trim();
|
const vendorVal = workflow_type === 'CARD' ? '' : vendor.trim();
|
||||||
const cvesJson = Array.isArray(cves) ? JSON.stringify(cves) : null;
|
const cvesJson = Array.isArray(cves) ? JSON.stringify(cves) : null;
|
||||||
const ipVal = ip_address && typeof ip_address === 'string' ? ip_address.trim().slice(0, 64) : null;
|
const ipVal = ip_address && typeof ip_address === 'string' ? ip_address.trim().slice(0, 64) : null;
|
||||||
|
const hostVal = hostname && typeof hostname === 'string' ? hostname.trim().slice(0, 255) : null;
|
||||||
const title = finding_title && typeof finding_title === 'string'
|
const title = finding_title && typeof finding_title === 'string'
|
||||||
? finding_title.slice(0, 500)
|
? finding_title.slice(0, 500)
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
db.run(
|
db.run(
|
||||||
`INSERT INTO ivanti_todo_queue
|
`INSERT INTO ivanti_todo_queue
|
||||||
(user_id, finding_id, finding_title, cves_json, ip_address, vendor, workflow_type)
|
(user_id, finding_id, finding_title, cves_json, ip_address, hostname, vendor, workflow_type)
|
||||||
VALUES (?, ?, ?, ?, ?, ?, ?)`,
|
VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
|
||||||
[req.user.id, finding_id.trim(), title, cvesJson, ipVal, vendorVal, workflow_type],
|
[req.user.id, finding_id.trim(), title, cvesJson, ipVal, hostVal, vendorVal, workflow_type],
|
||||||
function (err) {
|
function (err) {
|
||||||
if (err) {
|
if (err) {
|
||||||
console.error('Error adding to queue:', err);
|
console.error('Error adding to queue:', err);
|
||||||
@@ -87,8 +261,23 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// PUT /api/ivanti/todo-queue/:id
|
/**
|
||||||
// Update vendor, workflow_type, or status — scoped to current user
|
* PUT /api/ivanti/todo-queue/:id
|
||||||
|
*
|
||||||
|
* Update vendor, workflow_type, or status on a queue item — scoped to current user.
|
||||||
|
*
|
||||||
|
* @param {string} id - Queue item ID (URL parameter)
|
||||||
|
* @body {string} [vendor] - New vendor string (max 200 chars)
|
||||||
|
* @body {string} [workflow_type] - One of 'FP', 'Archer', 'CARD'
|
||||||
|
* @body {string} [status] - One of 'pending', 'complete'
|
||||||
|
*
|
||||||
|
* @returns {Object} 200 - Updated queue item with parsed cves array:
|
||||||
|
* id, user_id, finding_id, finding_title, cves_json, ip_address,
|
||||||
|
* vendor, workflow_type, status, created_at, updated_at, cves
|
||||||
|
* @returns {Object} 400 - { error: string } on validation failure or no fields to update
|
||||||
|
* @returns {Object} 404 - { error: string } if item not found for current user
|
||||||
|
* @returns {Object} 500 - { error: string } on database error
|
||||||
|
*/
|
||||||
router.put('/:id', requireAuth(db), requireGroup('Admin', 'Standard_User'), (req, res) => {
|
router.put('/:id', requireAuth(db), requireGroup('Admin', 'Standard_User'), (req, res) => {
|
||||||
const { id } = req.params;
|
const { id } = req.params;
|
||||||
const { vendor, workflow_type, status } = req.body;
|
const { vendor, workflow_type, status } = req.body;
|
||||||
@@ -162,9 +351,15 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// DELETE /api/ivanti/todo-queue/completed
|
/**
|
||||||
// Bulk-delete all completed items for the current user
|
* DELETE /api/ivanti/todo-queue/completed
|
||||||
// IMPORTANT: This route must be registered BEFORE DELETE /:id
|
*
|
||||||
|
* Bulk-delete all completed items for the current user.
|
||||||
|
* IMPORTANT: This route must be registered BEFORE DELETE /:id.
|
||||||
|
*
|
||||||
|
* @returns {Object} 200 - { message: string, deleted: number }
|
||||||
|
* @returns {Object} 500 - { error: string } on database error
|
||||||
|
*/
|
||||||
router.delete('/completed', requireAuth(db), requireGroup('Admin', 'Standard_User'), (req, res) => {
|
router.delete('/completed', requireAuth(db), requireGroup('Admin', 'Standard_User'), (req, res) => {
|
||||||
db.run(
|
db.run(
|
||||||
"DELETE FROM ivanti_todo_queue WHERE user_id = ? AND status = 'complete'",
|
"DELETE FROM ivanti_todo_queue WHERE user_id = ? AND status = 'complete'",
|
||||||
@@ -179,8 +374,17 @@ function createIvantiTodoQueueRouter(db, requireAuth) {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// DELETE /api/ivanti/todo-queue/:id
|
/**
|
||||||
// Delete a single item — scoped to current user
|
* DELETE /api/ivanti/todo-queue/:id
|
||||||
|
*
|
||||||
|
* Delete a single queue item — scoped to current user.
|
||||||
|
*
|
||||||
|
* @param {string} id - Queue item ID (URL parameter)
|
||||||
|
*
|
||||||
|
* @returns {Object} 200 - { message: string }
|
||||||
|
* @returns {Object} 404 - { error: string } if item not found for current user
|
||||||
|
* @returns {Object} 500 - { error: string } on database error
|
||||||
|
*/
|
||||||
router.delete('/:id', requireAuth(db), requireGroup('Admin', 'Standard_User'), (req, res) => {
|
router.delete('/:id', requireAuth(db), requireGroup('Admin', 'Standard_User'), (req, res) => {
|
||||||
const { id } = req.params;
|
const { id } = req.params;
|
||||||
|
|
||||||
|
|||||||
@@ -348,6 +348,29 @@ app.get('/api/cves/:cveId/vendors', requireAuth(db), (req, res) => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Get tooltip data for a specific CVE (authenticated users)
|
||||||
|
app.get('/api/cves/:cveId/tooltip', requireAuth(db), (req, res) => {
|
||||||
|
const { cveId } = req.params;
|
||||||
|
|
||||||
|
if (!CVE_ID_PATTERN.test(cveId)) {
|
||||||
|
return res.status(400).json({ error: 'Invalid CVE ID format.' });
|
||||||
|
}
|
||||||
|
|
||||||
|
db.get('SELECT cve_id, description, severity FROM cves WHERE cve_id = ? LIMIT 1', [cveId], (err, row) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('Error fetching CVE tooltip:', err);
|
||||||
|
return res.status(500).json({ error: 'Internal server error.' });
|
||||||
|
}
|
||||||
|
if (!row) {
|
||||||
|
return res.json({ exists: false });
|
||||||
|
}
|
||||||
|
let description = row.description || '';
|
||||||
|
if (description.length > 300) {
|
||||||
|
description = description.substring(0, 300) + '\u2026';
|
||||||
|
}
|
||||||
|
res.json({ exists: true, cve_id: row.cve_id, description, severity: row.severity });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// Compliance export — reads from cve_document_status view
|
// Compliance export — reads from cve_document_status view
|
||||||
app.get('/api/cves/compliance', requireAuth(db), (req, res) => {
|
app.get('/api/cves/compliance', requireAuth(db), (req, res) => {
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ Key details:
|
|||||||
- `operator` values: `EXACT`, `IN`, `LIKE`, `WILDCARD`, `RANGE`, `CIDR`
|
- `operator` values: `EXACT`, `IN`, `LIKE`, `WILDCARD`, `RANGE`, `CIDR`
|
||||||
- For empty workflows, use `{"subject":"hostFinding","filterRequest":{"filters":[]}}` with `isEmptyWorkflow=true`
|
- For empty workflows, use `{"subject":"hostFinding","filterRequest":{"filters":[]}}` with `isEmptyWorkflow=true`
|
||||||
|
|
||||||
#### Response (200)
|
#### Response (200/202)
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
@@ -72,7 +72,7 @@ Key details:
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Returns a numeric `id` (the workflow batch job ID) and `created` timestamp. No `generatedId` or `uuid` in this response.
|
Returns HTTP 200 or 202 (Accepted — async job creation). Response contains a numeric `id` (the workflow batch job ID) and `created` timestamp. No `generatedId` or `uuid` in this response.
|
||||||
|
|
||||||
### Other Workflow Endpoints (from Swagger)
|
### Other Workflow Endpoints (from Swagger)
|
||||||
|
|
||||||
|
|||||||
243
frontend/src/components/CveTooltip.js
Normal file
243
frontend/src/components/CveTooltip.js
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import { Loader } from 'lucide-react';
|
||||||
|
|
||||||
|
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Severity color mapping — matches DESIGN_SYSTEM.md badge colors
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
const SEVERITY_COLORS = {
|
||||||
|
Critical: { border: '#EF4444', bg: 'rgba(239, 68, 68, 0.25)', text: '#FCA5A5', dot: '#EF4444' },
|
||||||
|
High: { border: '#F59E0B', bg: 'rgba(245, 158, 11, 0.25)', text: '#FCD34D', dot: '#F59E0B' },
|
||||||
|
Medium: { border: '#0EA5E9', bg: 'rgba(14, 165, 233, 0.25)', text: '#7DD3FC', dot: '#0EA5E9' },
|
||||||
|
Low: { border: '#10B981', bg: 'rgba(16, 185, 129, 0.25)', text: '#6EE7B7', dot: '#10B981' },
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Pure positioning function — exported for testability
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
const TOOLTIP_GAP = 8;
|
||||||
|
const ARROW_SIZE = 6;
|
||||||
|
|
||||||
|
export function calcTooltipPosition(anchorRect, tooltipHeight, viewportHeight) {
|
||||||
|
const spaceAbove = anchorRect.top;
|
||||||
|
const spaceBelow = viewportHeight - anchorRect.bottom;
|
||||||
|
const needed = tooltipHeight + TOOLTIP_GAP + ARROW_SIZE;
|
||||||
|
|
||||||
|
const placeAbove = spaceAbove >= needed || spaceAbove >= spaceBelow;
|
||||||
|
|
||||||
|
let top;
|
||||||
|
if (placeAbove) {
|
||||||
|
top = anchorRect.top - tooltipHeight - TOOLTIP_GAP - ARROW_SIZE;
|
||||||
|
if (top < 0) top = 0;
|
||||||
|
} else {
|
||||||
|
top = anchorRect.bottom + TOOLTIP_GAP + ARROW_SIZE;
|
||||||
|
if (top + tooltipHeight > viewportHeight) top = viewportHeight - tooltipHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
const left = anchorRect.left + anchorRect.width / 2;
|
||||||
|
|
||||||
|
return { top, left, placeAbove };
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// CveTooltip component
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
export default function CveTooltip({ cveId, anchorRect, cache }) {
|
||||||
|
const [data, setData] = useState(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!cveId) {
|
||||||
|
setData(null);
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check cache first
|
||||||
|
if (cache.current.has(cveId)) {
|
||||||
|
setData(cache.current.get(cveId));
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cache miss — fetch from API
|
||||||
|
const controller = new AbortController();
|
||||||
|
setLoading(true);
|
||||||
|
setData(null);
|
||||||
|
|
||||||
|
fetch(`${API_BASE}/cves/${encodeURIComponent(cveId)}/tooltip`, {
|
||||||
|
credentials: 'include',
|
||||||
|
signal: controller.signal,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then((payload) => {
|
||||||
|
cache.current.set(cveId, payload);
|
||||||
|
setData(payload);
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
if (err.name === 'AbortError') return;
|
||||||
|
// Do not cache transient errors
|
||||||
|
console.error('CveTooltip fetch error:', err);
|
||||||
|
setData(null);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => controller.abort();
|
||||||
|
}, [cveId, cache]);
|
||||||
|
|
||||||
|
// Nothing to show
|
||||||
|
if (!cveId || !anchorRect) return null;
|
||||||
|
if (!loading && !data) return null;
|
||||||
|
if (data && data.exists === false) return null;
|
||||||
|
|
||||||
|
const severity = data?.severity || '';
|
||||||
|
const colors = SEVERITY_COLORS[severity] || SEVERITY_COLORS.Medium;
|
||||||
|
|
||||||
|
return ReactDOM.createPortal(
|
||||||
|
<TooltipBody
|
||||||
|
data={data}
|
||||||
|
loading={loading}
|
||||||
|
anchorRect={anchorRect}
|
||||||
|
colors={colors}
|
||||||
|
severity={severity}
|
||||||
|
/>,
|
||||||
|
document.body,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// TooltipBody — inner component that measures itself for positioning
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function TooltipBody({ data, loading, anchorRect, colors, severity }) {
|
||||||
|
const tooltipRef = React.useRef(null);
|
||||||
|
const [pos, setPos] = React.useState({ top: 0, left: 0, placeAbove: true });
|
||||||
|
|
||||||
|
React.useLayoutEffect(() => {
|
||||||
|
if (!tooltipRef.current || !anchorRect) return;
|
||||||
|
const rect = tooltipRef.current.getBoundingClientRect();
|
||||||
|
const vp = window.innerHeight;
|
||||||
|
setPos(calcTooltipPosition(anchorRect, rect.height, vp));
|
||||||
|
}, [anchorRect, data, loading]);
|
||||||
|
|
||||||
|
const tooltipStyle = {
|
||||||
|
position: 'fixed',
|
||||||
|
zIndex: 99999,
|
||||||
|
top: pos.top,
|
||||||
|
left: pos.left,
|
||||||
|
transform: 'translateX(-50%)',
|
||||||
|
maxWidth: 320,
|
||||||
|
minWidth: 200,
|
||||||
|
background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(51, 65, 85, 0.95))',
|
||||||
|
border: `1.5px solid ${colors.border}`,
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
padding: '0.75rem',
|
||||||
|
boxShadow: `0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px ${colors.border}33`,
|
||||||
|
pointerEvents: 'none',
|
||||||
|
transition: 'opacity 0.15s ease',
|
||||||
|
};
|
||||||
|
|
||||||
|
// Directional arrow
|
||||||
|
const arrowStyle = {
|
||||||
|
position: 'absolute',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translateX(-50%)',
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
borderLeft: `${ARROW_SIZE}px solid transparent`,
|
||||||
|
borderRight: `${ARROW_SIZE}px solid transparent`,
|
||||||
|
...(pos.placeAbove
|
||||||
|
? {
|
||||||
|
bottom: -ARROW_SIZE,
|
||||||
|
borderTop: `${ARROW_SIZE}px solid ${colors.border}`,
|
||||||
|
borderBottom: 'none',
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
top: -ARROW_SIZE,
|
||||||
|
borderBottom: `${ARROW_SIZE}px solid ${colors.border}`,
|
||||||
|
borderTop: 'none',
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={tooltipRef} style={tooltipStyle} data-testid="cve-tooltip">
|
||||||
|
{/* Arrow */}
|
||||||
|
<div style={arrowStyle} data-testid="cve-tooltip-arrow" />
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0.5rem 0' }}>
|
||||||
|
<Loader
|
||||||
|
style={{ width: 18, height: 18, color: '#0EA5E9', animation: 'spin 1s linear infinite' }}
|
||||||
|
data-testid="cve-tooltip-loader"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : data && data.exists ? (
|
||||||
|
<>
|
||||||
|
{/* CVE ID header */}
|
||||||
|
<div style={{
|
||||||
|
fontFamily: "'JetBrains Mono', monospace",
|
||||||
|
fontSize: '0.8rem',
|
||||||
|
fontWeight: 700,
|
||||||
|
color: '#E2E8F0',
|
||||||
|
marginBottom: '0.4rem',
|
||||||
|
letterSpacing: '0.02em',
|
||||||
|
}}>
|
||||||
|
{data.cve_id}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Severity badge */}
|
||||||
|
{severity && (
|
||||||
|
<div style={{
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '0.35rem',
|
||||||
|
padding: '0.2rem 0.5rem',
|
||||||
|
borderRadius: '0.25rem',
|
||||||
|
border: `1.5px solid ${colors.border}`,
|
||||||
|
background: colors.bg,
|
||||||
|
marginBottom: '0.5rem',
|
||||||
|
}}>
|
||||||
|
{/* Glow dot */}
|
||||||
|
<span style={{
|
||||||
|
width: 7,
|
||||||
|
height: 7,
|
||||||
|
borderRadius: '50%',
|
||||||
|
background: colors.dot,
|
||||||
|
boxShadow: `0 0 6px ${colors.dot}`,
|
||||||
|
flexShrink: 0,
|
||||||
|
}} />
|
||||||
|
<span style={{
|
||||||
|
fontFamily: "'JetBrains Mono', monospace",
|
||||||
|
fontSize: '0.65rem',
|
||||||
|
fontWeight: 700,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: '0.04em',
|
||||||
|
color: colors.text,
|
||||||
|
}}>
|
||||||
|
{severity}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
{data.description && (
|
||||||
|
<div style={{
|
||||||
|
fontSize: '0.75rem',
|
||||||
|
lineHeight: 1.5,
|
||||||
|
color: '#CBD5E1',
|
||||||
|
wordBreak: 'break-word',
|
||||||
|
}}>
|
||||||
|
{data.description}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -4,6 +4,7 @@ import { RefreshCw, Loader, AlertCircle, PieChart, ChevronUp, ChevronDown, Chevr
|
|||||||
import * as XLSX from 'xlsx';
|
import * as XLSX from 'xlsx';
|
||||||
import { useAuth } from '../../contexts/AuthContext';
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
import IvantiCountsChart from './IvantiCountsChart';
|
import IvantiCountsChart from './IvantiCountsChart';
|
||||||
|
import CveTooltip from '../CveTooltip';
|
||||||
|
|
||||||
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';
|
||||||
@@ -920,7 +921,7 @@ function FilterDropdown({ anchorEl, colKey, findings, activeFilter, onFilterChan
|
|||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Render a single table cell by column key
|
// Render a single table cell by column key
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
function TableCell({ colKey, finding, canWrite }) {
|
function TableCell({ colKey, finding, canWrite, onCveMouseEnter, onCveMouseLeave }) {
|
||||||
switch (colKey) {
|
switch (colKey) {
|
||||||
case 'findingId':
|
case 'findingId':
|
||||||
return (
|
return (
|
||||||
@@ -956,7 +957,12 @@ function TableCell({ colKey, finding, canWrite }) {
|
|||||||
<td style={{ padding: '0.45rem 0.75rem', minWidth: '160px', maxWidth: '240px' }}>
|
<td style={{ padding: '0.45rem 0.75rem', minWidth: '160px', maxWidth: '240px' }}>
|
||||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.2rem' }}>
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.2rem' }}>
|
||||||
{shown.map((cve) => (
|
{shown.map((cve) => (
|
||||||
<span key={cve} style={{ padding: '0.1rem 0.35rem', borderRadius: '0.2rem', background: 'rgba(139,92,246,0.1)', border: '1px solid rgba(139,92,246,0.3)', color: '#A78BFA', fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '600', whiteSpace: 'nowrap' }}>
|
<span
|
||||||
|
key={cve}
|
||||||
|
onMouseEnter={onCveMouseEnter ? (e) => onCveMouseEnter(cve, e) : undefined}
|
||||||
|
onMouseLeave={onCveMouseLeave || undefined}
|
||||||
|
style={{ padding: '0.1rem 0.35rem', borderRadius: '0.2rem', background: 'rgba(139,92,246,0.1)', border: '1px solid rgba(139,92,246,0.3)', color: '#A78BFA', fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '600', whiteSpace: 'nowrap' }}
|
||||||
|
>
|
||||||
{cve}
|
{cve}
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
@@ -1430,7 +1436,18 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
|
|||||||
{item.finding_id}
|
{item.finding_id}
|
||||||
</div>
|
</div>
|
||||||
{isCardItem ? (
|
{isCardItem ? (
|
||||||
item.ip_address && (
|
<>
|
||||||
|
{item.hostname && (
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600',
|
||||||
|
color: done ? '#334155' : '#94A3B8',
|
||||||
|
textDecoration: done ? 'line-through' : 'none',
|
||||||
|
marginTop: '2px',
|
||||||
|
}}>
|
||||||
|
{item.hostname}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.ip_address && (
|
||||||
<div style={{
|
<div style={{
|
||||||
fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600',
|
fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600',
|
||||||
color: done ? '#334155' : '#10B981',
|
color: done ? '#334155' : '#10B981',
|
||||||
@@ -1439,9 +1456,11 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
|
|||||||
}}>
|
}}>
|
||||||
{item.ip_address}
|
{item.ip_address}
|
||||||
</div>
|
</div>
|
||||||
)
|
)}
|
||||||
|
</>
|
||||||
) : (
|
) : (
|
||||||
cves.length > 0 && (
|
<>
|
||||||
|
{cves.length > 0 && (
|
||||||
<div style={{
|
<div style={{
|
||||||
fontFamily: 'monospace', fontSize: '0.62rem',
|
fontFamily: 'monospace', fontSize: '0.62rem',
|
||||||
color: done ? '#334155' : '#64748B',
|
color: done ? '#334155' : '#64748B',
|
||||||
@@ -1451,7 +1470,28 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
|
|||||||
}} title={cves.join(', ')}>
|
}} title={cves.join(', ')}>
|
||||||
{cveDisplay}
|
{cveDisplay}
|
||||||
</div>
|
</div>
|
||||||
)
|
)}
|
||||||
|
{item.hostname && (
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'monospace', fontSize: '0.62rem',
|
||||||
|
color: done ? '#334155' : '#94A3B8',
|
||||||
|
textDecoration: done ? 'line-through' : 'none',
|
||||||
|
marginTop: '1px',
|
||||||
|
}}>
|
||||||
|
{item.hostname}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.ip_address && (
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600',
|
||||||
|
color: done ? '#334155' : '#10B981',
|
||||||
|
textDecoration: done ? 'line-through' : 'none',
|
||||||
|
marginTop: '1px',
|
||||||
|
}}>
|
||||||
|
{item.ip_address}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -2113,6 +2153,139 @@ function FpWorkflowModal({ open, onClose, selectedItems, onSuccess }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// SelectionToolbar — batch action bar for multi-selected findings
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function SelectionToolbar({ count, workflowType, vendor, submitting, error, onWorkflowChange, onVendorChange, onSubmit, onClear }) {
|
||||||
|
const isCard = workflowType === 'CARD';
|
||||||
|
const canSubmit = !submitting && (isCard || vendor.trim().length > 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
position: 'sticky', top: 0, zIndex: 20,
|
||||||
|
display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap',
|
||||||
|
padding: '0.625rem 1rem',
|
||||||
|
background: 'linear-gradient(180deg, #0F1A2E 0%, #0A1628 100%)',
|
||||||
|
border: '1px solid rgba(14,165,233,0.25)',
|
||||||
|
borderRadius: '0.375rem',
|
||||||
|
marginBottom: '0.5rem',
|
||||||
|
}}>
|
||||||
|
{/* Count badge */}
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: '0.375rem',
|
||||||
|
fontFamily: 'monospace', fontSize: '0.75rem', fontWeight: '700', color: '#E2E8F0',
|
||||||
|
}}>
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
minWidth: '22px', height: '22px', padding: '0 6px',
|
||||||
|
background: 'rgba(14,165,233,0.2)', border: '1px solid rgba(14,165,233,0.4)',
|
||||||
|
borderRadius: '999px', fontFamily: 'monospace', fontSize: '0.7rem', fontWeight: '700', color: '#0EA5E9',
|
||||||
|
}}>
|
||||||
|
{count}
|
||||||
|
</span>
|
||||||
|
selected
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* Workflow type toggles */}
|
||||||
|
<div style={{ display: 'flex', gap: '0.25rem' }}>
|
||||||
|
{[
|
||||||
|
{ type: 'FP', color: '#F59E0B', rgb: '245,158,11' },
|
||||||
|
{ type: 'Archer', color: '#0EA5E9', rgb: '14,165,233' },
|
||||||
|
{ type: 'CARD', color: '#10B981', rgb: '16,185,129' },
|
||||||
|
].map(({ type, color, rgb }) => {
|
||||||
|
const active = workflowType === type;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={type}
|
||||||
|
onClick={() => onWorkflowChange(type)}
|
||||||
|
style={{
|
||||||
|
padding: '0.25rem 0.5rem',
|
||||||
|
background: active ? `rgba(${rgb},0.2)` : 'transparent',
|
||||||
|
border: `1px solid rgba(${rgb},${active ? '0.5' : '0.15'})`,
|
||||||
|
borderRadius: '0.25rem',
|
||||||
|
color: active ? color : '#475569',
|
||||||
|
fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '700',
|
||||||
|
cursor: 'pointer', textTransform: 'uppercase', letterSpacing: '0.05em',
|
||||||
|
transition: 'all 0.12s',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{type}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Vendor input or CARD indicator */}
|
||||||
|
{isCard ? (
|
||||||
|
<span style={{
|
||||||
|
fontFamily: 'monospace', fontSize: '0.68rem', color: '#10B981',
|
||||||
|
padding: '0.25rem 0.5rem',
|
||||||
|
background: 'rgba(16,185,129,0.06)', border: '1px solid rgba(16,185,129,0.2)',
|
||||||
|
borderRadius: '0.25rem',
|
||||||
|
}}>
|
||||||
|
No vendor required
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={vendor}
|
||||||
|
onChange={(e) => onVendorChange(e.target.value)}
|
||||||
|
placeholder="Vendor / Platform"
|
||||||
|
style={{
|
||||||
|
width: '160px', boxSizing: 'border-box',
|
||||||
|
background: 'rgba(14,165,233,0.05)', border: '1px solid rgba(14,165,233,0.2)',
|
||||||
|
borderRadius: '0.25rem', padding: '0.3rem 0.5rem',
|
||||||
|
color: '#CBD5E1', fontSize: '0.75rem', fontFamily: 'monospace', outline: 'none',
|
||||||
|
}}
|
||||||
|
onKeyDown={(e) => { if (e.key === 'Enter' && canSubmit) onSubmit(); }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Add to Queue button */}
|
||||||
|
<button
|
||||||
|
onClick={onSubmit}
|
||||||
|
disabled={!canSubmit}
|
||||||
|
style={{
|
||||||
|
padding: '0.3rem 0.75rem',
|
||||||
|
background: canSubmit ? 'rgba(14,165,233,0.15)' : 'transparent',
|
||||||
|
border: `1px solid rgba(14,165,233,${canSubmit ? '0.4' : '0.1'})`,
|
||||||
|
borderRadius: '0.25rem',
|
||||||
|
color: canSubmit ? '#0EA5E9' : '#334155',
|
||||||
|
fontFamily: 'monospace', fontSize: '0.72rem', fontWeight: '600',
|
||||||
|
cursor: canSubmit ? 'pointer' : 'not-allowed',
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||||||
|
transition: 'all 0.12s',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{submitting ? 'Adding…' : 'Add to Queue'}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Clear selection */}
|
||||||
|
<button
|
||||||
|
onClick={onClear}
|
||||||
|
style={{
|
||||||
|
background: 'none', border: 'none', cursor: 'pointer',
|
||||||
|
color: '#475569', padding: '4px', lineHeight: 1,
|
||||||
|
}}
|
||||||
|
title="Clear selection"
|
||||||
|
>
|
||||||
|
<X style={{ width: '16px', height: '16px' }} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Error message */}
|
||||||
|
{error && (
|
||||||
|
<span style={{
|
||||||
|
fontFamily: 'monospace', fontSize: '0.68rem', color: '#EF4444',
|
||||||
|
display: 'flex', alignItems: 'center', gap: '0.25rem',
|
||||||
|
}}>
|
||||||
|
<AlertCircle style={{ width: '12px', height: '12px' }} />
|
||||||
|
{error}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Main ReportingPage
|
// Main ReportingPage
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
@@ -2138,11 +2311,39 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
|||||||
const [actionFilter, setActionFilter] = useState(null);
|
const [actionFilter, setActionFilter] = useState(null);
|
||||||
const [excFilter, setExcFilter] = useState(filterEXC || null);
|
const [excFilter, setExcFilter] = useState(filterEXC || null);
|
||||||
|
|
||||||
|
const [selectedIds, setSelectedIds] = useState(new Set());
|
||||||
|
const [lastClickedId, setLastClickedId] = useState(null);
|
||||||
|
const [batchSubmitting, setBatchSubmitting] = useState(false);
|
||||||
|
const [batchError, setBatchError] = useState(null);
|
||||||
|
const [batchWorkflowType, setBatchWorkflowType] = useState('FP');
|
||||||
|
const [batchVendor, setBatchVendor] = useState('');
|
||||||
|
|
||||||
|
// CVE tooltip state & refs
|
||||||
|
const [tooltipCveId, setTooltipCveId] = useState(null);
|
||||||
|
const [tooltipAnchorRect, setTooltipAnchorRect] = useState(null);
|
||||||
|
const tooltipCacheRef = useRef(new Map());
|
||||||
|
const hoverTimerRef = useRef(null);
|
||||||
|
|
||||||
const updateColumns = useCallback((newOrder) => {
|
const updateColumns = useCallback((newOrder) => {
|
||||||
setColumnOrder(newOrder);
|
setColumnOrder(newOrder);
|
||||||
saveColumnOrder(newOrder);
|
saveColumnOrder(newOrder);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// CVE tooltip hover handlers
|
||||||
|
const handleCveMouseEnter = useCallback((cveId, e) => {
|
||||||
|
clearTimeout(hoverTimerRef.current);
|
||||||
|
hoverTimerRef.current = setTimeout(() => {
|
||||||
|
setTooltipCveId(cveId);
|
||||||
|
setTooltipAnchorRect(e.target.getBoundingClientRect());
|
||||||
|
}, 300);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleCveMouseLeave = useCallback(() => {
|
||||||
|
clearTimeout(hoverTimerRef.current);
|
||||||
|
setTooltipCveId(null);
|
||||||
|
setTooltipAnchorRect(null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const applyState = (data) => {
|
const applyState = (data) => {
|
||||||
setTotal(data.total ?? 0);
|
setTotal(data.total ?? 0);
|
||||||
setFindings(data.findings || []);
|
setFindings(data.findings || []);
|
||||||
@@ -2184,7 +2385,10 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
|||||||
try {
|
try {
|
||||||
const res = await fetch(`${API_BASE}/ivanti/findings`, { credentials: 'include' });
|
const res = await fetch(`${API_BASE}/ivanti/findings`, { credentials: 'include' });
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
if (res.ok) applyState(data);
|
if (res.ok) {
|
||||||
|
applyState(data);
|
||||||
|
tooltipCacheRef.current.clear();
|
||||||
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Error loading findings:', e);
|
console.error('Error loading findings:', e);
|
||||||
} finally {
|
} finally {
|
||||||
@@ -2199,6 +2403,7 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
|||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
applyState(data);
|
applyState(data);
|
||||||
|
tooltipCacheRef.current.clear();
|
||||||
fetchCounts(); // refresh counts after sync
|
fetchCounts(); // refresh counts after sync
|
||||||
fetchFPWorkflowCounts(); // refresh FP workflow counts after sync
|
fetchFPWorkflowCounts(); // refresh FP workflow counts after sync
|
||||||
}
|
}
|
||||||
@@ -2344,6 +2549,7 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
|||||||
finding_title: finding.title || null,
|
finding_title: finding.title || null,
|
||||||
cves: finding.cves || [],
|
cves: finding.cves || [],
|
||||||
ip_address: finding.ipAddress || null,
|
ip_address: finding.ipAddress || null,
|
||||||
|
hostname: finding.hostName || null,
|
||||||
vendor: queueForm.vendor.trim(),
|
vendor: queueForm.vendor.trim(),
|
||||||
workflow_type: queueForm.workflowType,
|
workflow_type: queueForm.workflowType,
|
||||||
}),
|
}),
|
||||||
@@ -2361,6 +2567,74 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
|||||||
setQueueForm({ vendor: '', workflowType: 'FP' });
|
setQueueForm({ vendor: '', workflowType: 'FP' });
|
||||||
}, [addPopover, queueForm]);
|
}, [addPopover, queueForm]);
|
||||||
|
|
||||||
|
// Prune selection when filters change — keep only IDs still in filtered set
|
||||||
|
useEffect(() => {
|
||||||
|
setSelectedIds((prev) => {
|
||||||
|
if (prev.size === 0) return prev;
|
||||||
|
const visibleIds = new Set(filtered.map((f) => f.id));
|
||||||
|
const next = new Set([...prev].filter((id) => visibleIds.has(id)));
|
||||||
|
return next.size === prev.size ? prev : next;
|
||||||
|
});
|
||||||
|
}, [filtered]);
|
||||||
|
|
||||||
|
// Escape key clears selection
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedIds.size === 0) return;
|
||||||
|
const handler = (e) => {
|
||||||
|
if (e.key === 'Escape' && selectedIds.size > 0 && !addPopover) {
|
||||||
|
setSelectedIds(new Set());
|
||||||
|
setBatchError(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('keydown', handler);
|
||||||
|
return () => document.removeEventListener('keydown', handler);
|
||||||
|
}, [selectedIds, addPopover]);
|
||||||
|
|
||||||
|
const submitBatch = useCallback(async () => {
|
||||||
|
if (selectedIds.size === 0) return;
|
||||||
|
setBatchSubmitting(true);
|
||||||
|
setBatchError(null);
|
||||||
|
try {
|
||||||
|
const findingsPayload = [...selectedIds].map((id) => {
|
||||||
|
const f = findings.find((ff) => ff.id === id);
|
||||||
|
return f ? {
|
||||||
|
finding_id: f.id,
|
||||||
|
finding_title: f.title || null,
|
||||||
|
cves: f.cves || [],
|
||||||
|
ip_address: f.ipAddress || null,
|
||||||
|
hostname: f.hostName || null,
|
||||||
|
} : { finding_id: id };
|
||||||
|
});
|
||||||
|
const res = await fetch(`${API_BASE}/ivanti/todo-queue/batch`, {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
findings: findingsPayload,
|
||||||
|
workflow_type: batchWorkflowType,
|
||||||
|
vendor: batchWorkflowType === 'CARD' ? '' : batchVendor.trim(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (res.ok) {
|
||||||
|
setQueueItems((prev) => [...prev, ...(data.items || [])].sort((a, b) =>
|
||||||
|
(a.vendor || '').localeCompare(b.vendor || '') || a.id - b.id
|
||||||
|
));
|
||||||
|
setSelectedIds(new Set());
|
||||||
|
setBatchWorkflowType('FP');
|
||||||
|
setBatchVendor('');
|
||||||
|
setBatchError(null);
|
||||||
|
} else {
|
||||||
|
setBatchError(data.error || 'Failed to add findings to queue.');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Error in batch add:', e);
|
||||||
|
setBatchError('Network error — please try again.');
|
||||||
|
} finally {
|
||||||
|
setBatchSubmitting(false);
|
||||||
|
}
|
||||||
|
}, [selectedIds, findings, batchWorkflowType, batchVendor]);
|
||||||
|
|
||||||
const updateQueueItem = useCallback(async (id, changes) => {
|
const updateQueueItem = useCallback(async (id, changes) => {
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`${API_BASE}/ivanti/todo-queue/${id}`, {
|
const res = await fetch(`${API_BASE}/ivanti/todo-queue/${id}`, {
|
||||||
@@ -2786,6 +3060,19 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div style={{ overflowX: 'auto', overflowY: 'auto', maxHeight: 'calc(100vh - 420px)', minHeight: '200px', marginTop: '0.75rem' }}>
|
<div style={{ overflowX: 'auto', overflowY: 'auto', maxHeight: 'calc(100vh - 420px)', minHeight: '200px', marginTop: '0.75rem' }}>
|
||||||
|
{selectedIds.size > 0 && canWrite() && (
|
||||||
|
<SelectionToolbar
|
||||||
|
count={selectedIds.size}
|
||||||
|
workflowType={batchWorkflowType}
|
||||||
|
vendor={batchVendor}
|
||||||
|
submitting={batchSubmitting}
|
||||||
|
error={batchError}
|
||||||
|
onWorkflowChange={setBatchWorkflowType}
|
||||||
|
onVendorChange={setBatchVendor}
|
||||||
|
onSubmit={submitBatch}
|
||||||
|
onClear={() => { setSelectedIds(new Set()); setBatchError(null); }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.75rem', fontFamily: 'sans-serif' }}>
|
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.75rem', fontFamily: 'sans-serif' }}>
|
||||||
<thead>
|
<thead>
|
||||||
<tr style={{ borderBottom: '1px solid rgba(14,165,233,0.2)' }}>
|
<tr style={{ borderBottom: '1px solid rgba(14,165,233,0.2)' }}>
|
||||||
@@ -2796,8 +3083,31 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
|||||||
background: 'rgb(10, 20, 36)',
|
background: 'rgb(10, 20, 36)',
|
||||||
position: 'sticky', top: 0, zIndex: 10,
|
position: 'sticky', top: 0, zIndex: 10,
|
||||||
boxShadow: '0 1px 0 rgba(14,165,233,0.2)',
|
boxShadow: '0 1px 0 rgba(14,165,233,0.2)',
|
||||||
|
textAlign: 'center',
|
||||||
}}
|
}}
|
||||||
|
>
|
||||||
|
{canWrite() && (
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={sorted.length > 0 && sorted.filter((f) => !isQueued(f.id)).length > 0 && sorted.filter((f) => !isQueued(f.id)).every((f) => selectedIds.has(f.id))}
|
||||||
|
onChange={() => {
|
||||||
|
const nonQueued = sorted.filter((f) => !isQueued(f.id));
|
||||||
|
const allSelected = nonQueued.length > 0 && nonQueued.every((f) => selectedIds.has(f.id));
|
||||||
|
if (allSelected) {
|
||||||
|
setSelectedIds(new Set());
|
||||||
|
} else {
|
||||||
|
setSelectedIds(new Set(nonQueued.map((f) => f.id)));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
accentColor: '#0EA5E9',
|
||||||
|
width: '13px', height: '13px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
title="Select all visible findings"
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
|
</th>
|
||||||
{visibleCols.map((col) => {
|
{visibleCols.map((col) => {
|
||||||
const def = COLUMN_DEFS[col.key];
|
const def = COLUMN_DEFS[col.key];
|
||||||
const active = sort.field === col.key;
|
const active = sort.field === col.key;
|
||||||
@@ -2849,31 +3159,53 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{sorted.map((finding, idx) => {
|
{sorted.map((finding, idx) => {
|
||||||
const rowBg = idx % 2 === 0 ? 'rgba(15,26,46,0.4)' : 'rgba(10,18,32,0.4)';
|
const isSelected = selectedIds.has(finding.id);
|
||||||
|
const rowBg = isSelected ? 'rgba(14,165,233,0.12)' : (idx % 2 === 0 ? 'rgba(15,26,46,0.4)' : 'rgba(10,18,32,0.4)');
|
||||||
const queued = isQueued(finding.id);
|
const queued = isQueued(finding.id);
|
||||||
return (
|
return (
|
||||||
<tr
|
<tr
|
||||||
key={finding.id}
|
key={finding.id}
|
||||||
style={{ borderBottom: '1px solid rgba(255,255,255,0.04)', background: rowBg }}
|
style={{ borderBottom: '1px solid rgba(255,255,255,0.04)', background: rowBg }}
|
||||||
onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(14,165,233,0.05)'}
|
onMouseEnter={(e) => { if (!isSelected) e.currentTarget.style.background = 'rgba(14,165,233,0.05)'; }}
|
||||||
onMouseLeave={(e) => e.currentTarget.style.background = rowBg}
|
onMouseLeave={(e) => { e.currentTarget.style.background = rowBg; }}
|
||||||
>
|
>
|
||||||
{/* Checkbox cell */}
|
{/* Checkbox cell */}
|
||||||
<td
|
<td
|
||||||
style={{ padding: '0.45rem 0.5rem', textAlign: 'center', width: '36px' }}
|
style={{ padding: '0.45rem 0.5rem', textAlign: 'center', width: '36px' }}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
if (queued) return;
|
if (queued) return;
|
||||||
const rect = e.currentTarget.getBoundingClientRect();
|
// Shift-click range select
|
||||||
setAddPopover({ finding, anchorRect: rect });
|
if (e.shiftKey && lastClickedId) {
|
||||||
setQueueForm({ vendor: '', workflowType: 'FP' });
|
const lastIdx = sorted.findIndex((f) => f.id === lastClickedId);
|
||||||
|
const currIdx = sorted.findIndex((f) => f.id === finding.id);
|
||||||
|
if (lastIdx !== -1 && currIdx !== -1) {
|
||||||
|
const start = Math.min(lastIdx, currIdx);
|
||||||
|
const end = Math.max(lastIdx, currIdx);
|
||||||
|
setSelectedIds((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
for (let i = start; i <= end; i++) {
|
||||||
|
if (!isQueued(sorted[i].id)) next.add(sorted[i].id);
|
||||||
|
}
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Regular click — toggle selection
|
||||||
|
setSelectedIds((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(finding.id)) next.delete(finding.id); else next.add(finding.id);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setLastClickedId(finding.id);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
readOnly
|
readOnly
|
||||||
checked={queued}
|
checked={queued || isSelected}
|
||||||
style={{
|
style={{
|
||||||
accentColor: '#0EA5E9',
|
accentColor: queued ? '#10B981' : '#0EA5E9',
|
||||||
width: '13px', height: '13px',
|
width: '13px', height: '13px',
|
||||||
cursor: queued ? 'default' : 'pointer',
|
cursor: queued ? 'default' : 'pointer',
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
@@ -2881,7 +3213,7 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
|||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
{visibleCols.map((col) => (
|
{visibleCols.map((col) => (
|
||||||
<TableCell key={col.key} colKey={col.key} finding={finding} canWrite={canWrite()} />
|
<TableCell key={col.key} colKey={col.key} finding={finding} canWrite={canWrite()} onCveMouseEnter={handleCveMouseEnter} onCveMouseLeave={handleCveMouseLeave} />
|
||||||
))}
|
))}
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
@@ -2944,6 +3276,11 @@ export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
|||||||
selectedItems={fpModalItems}
|
selectedItems={fpModalItems}
|
||||||
onSuccess={handleFpWorkflowSuccess}
|
onSuccess={handleFpWorkflowSuccess}
|
||||||
/>
|
/>
|
||||||
|
<CveTooltip
|
||||||
|
cveId={tooltipCveId}
|
||||||
|
anchorRect={tooltipAnchorRect}
|
||||||
|
cache={tooltipCacheRef}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user