feat: time-based charts, Vulnerability Triage rename, Knowledge Base page
Merges feature/compliance-time-charts into master. Changes included: - Compliance page: 6 Recharts trend charts (active totals, deltas, per-team, MTTR, recurring items, Archer pipeline) - Ivanti findings trend chart on Vulnerability Triage page: open/closed counts history stored on every sync, aggregated to end-of-day snapshots - Rename 'Reporting' page to 'Vulnerability Triage' throughout (nav, routes, docs, all cross-page navigation references) - Knowledge Base page: full article library with category filter, search, inline viewer, upload/delete for editor+ roles - Remove Knowledge Base sidebar panel from home page (now lives on KB page); home layout adjusts to 2-column (9+3) - Add ivanti_counts_history migration script for documentation consistency - Update security-posture-workflow-diagrams.md and team-training-agenda.md to reflect Vulnerability Triage page name Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
41
backend/migrations/add_ivanti_counts_history_table.js
Normal file
41
backend/migrations/add_ivanti_counts_history_table.js
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
// Migration: Add ivanti_counts_history table
|
||||||
|
//
|
||||||
|
// Stores a snapshot of open/closed Ivanti finding counts on every sync.
|
||||||
|
// Unlike ivanti_counts_cache (single-row, always overwritten), this table
|
||||||
|
// accumulates all snapshots so time-series charts can be built from it.
|
||||||
|
//
|
||||||
|
// The GET /api/ivanti/findings/counts/history endpoint aggregates these rows
|
||||||
|
// to the last snapshot per calendar day using a ROW_NUMBER window function.
|
||||||
|
//
|
||||||
|
// NOTE: This table is also created automatically at server startup via
|
||||||
|
// CREATE TABLE IF NOT EXISTS in initTables() (ivantiFindings.js).
|
||||||
|
// This script is provided for manual setup on fresh installs and for
|
||||||
|
// documentation consistency with other migration files.
|
||||||
|
//
|
||||||
|
// Usage: node backend/migrations/add_ivanti_counts_history_table.js
|
||||||
|
|
||||||
|
const sqlite3 = require('sqlite3').verbose();
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const dbPath = path.join(__dirname, '..', 'cve_database.db');
|
||||||
|
const db = new sqlite3.Database(dbPath);
|
||||||
|
|
||||||
|
console.log('Starting ivanti_counts_history migration...');
|
||||||
|
|
||||||
|
db.serialize(() => {
|
||||||
|
db.run(`
|
||||||
|
CREATE TABLE IF NOT EXISTS ivanti_counts_history (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
open_count INTEGER NOT NULL,
|
||||||
|
closed_count INTEGER NOT NULL,
|
||||||
|
recorded_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||||
|
)
|
||||||
|
`, (err) => {
|
||||||
|
if (err) console.error('Error creating ivanti_counts_history table:', err);
|
||||||
|
else console.log('✓ ivanti_counts_history table created (or already exists)');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
db.close(() => {
|
||||||
|
console.log('Migration complete.');
|
||||||
|
});
|
||||||
@@ -217,6 +217,25 @@ function createArcherTicketsRouter(db) {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// GET /status-trend — ticket counts grouped by creation date + status
|
||||||
|
// Used for time-based Archer pipeline chart on the Compliance page.
|
||||||
|
router.get('/status-trend', requireAuth(db), (req, res) => {
|
||||||
|
db.all(
|
||||||
|
`SELECT DATE(created_at) AS date, status, COUNT(*) AS count
|
||||||
|
FROM archer_tickets
|
||||||
|
GROUP BY DATE(created_at), status
|
||||||
|
ORDER BY date ASC`,
|
||||||
|
[],
|
||||||
|
(err, rows) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('Error fetching Archer status trend:', err);
|
||||||
|
return res.status(500).json({ error: 'Internal server error.' });
|
||||||
|
}
|
||||||
|
res.json({ statusTrend: rows });
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
return router;
|
return router;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -584,6 +584,128 @@ function createComplianceRouter(db, upload, requireAuth, requireRole) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------
|
||||||
|
// GET /trends
|
||||||
|
// Per-upload active totals + per-team counts for time-series charts.
|
||||||
|
// Returns rows ordered ascending by report_date.
|
||||||
|
// -----------------------------------------------------------------------
|
||||||
|
router.get('/trends', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const uploads = await dbAll(db,
|
||||||
|
`SELECT id, report_date,
|
||||||
|
COALESCE(new_count, 0) AS new_count,
|
||||||
|
COALESCE(recurring_count, 0) AS recurring_count,
|
||||||
|
COALESCE(resolved_count, 0) AS resolved_count,
|
||||||
|
COALESCE(new_count, 0) + COALESCE(recurring_count, 0) AS total_active
|
||||||
|
FROM compliance_uploads
|
||||||
|
ORDER BY report_date ASC`
|
||||||
|
);
|
||||||
|
|
||||||
|
if (uploads.length === 0) return res.json({ trends: [] });
|
||||||
|
|
||||||
|
// Per-team active counts — items whose upload_id matches the upload
|
||||||
|
// (recurring items have upload_id bumped each cycle, so this is accurate)
|
||||||
|
const teamRows = await dbAll(db,
|
||||||
|
`SELECT ci.upload_id, ci.team, COUNT(ci.id) AS count
|
||||||
|
FROM compliance_items ci
|
||||||
|
WHERE ci.team IS NOT NULL
|
||||||
|
GROUP BY ci.upload_id, ci.team`
|
||||||
|
);
|
||||||
|
|
||||||
|
const teamMap = {};
|
||||||
|
teamRows.forEach(r => {
|
||||||
|
if (!teamMap[r.upload_id]) teamMap[r.upload_id] = {};
|
||||||
|
teamMap[r.upload_id][r.team] = r.count;
|
||||||
|
});
|
||||||
|
|
||||||
|
const trends = uploads.map(u => ({
|
||||||
|
report_date: u.report_date,
|
||||||
|
new_count: u.new_count,
|
||||||
|
recurring_count: u.recurring_count,
|
||||||
|
resolved_count: u.resolved_count,
|
||||||
|
total_active: u.total_active,
|
||||||
|
STEAM: teamMap[u.id]?.STEAM || 0,
|
||||||
|
'ACCESS-ENG': teamMap[u.id]?.['ACCESS-ENG'] || 0,
|
||||||
|
'ACCESS-OPS': teamMap[u.id]?.['ACCESS-OPS'] || 0,
|
||||||
|
INTELDEV: teamMap[u.id]?.INTELDEV || 0,
|
||||||
|
}));
|
||||||
|
|
||||||
|
res.json({ trends });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[Compliance] GET /trends error:', err.message);
|
||||||
|
res.status(500).json({ error: 'Database error' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------
|
||||||
|
// GET /mttr
|
||||||
|
// Mean time to resolution (calendar days) per team, for resolved items.
|
||||||
|
// -----------------------------------------------------------------------
|
||||||
|
router.get('/mttr', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const rows = await dbAll(db,
|
||||||
|
`SELECT
|
||||||
|
ci.team,
|
||||||
|
ROUND(AVG(JULIANDAY(ru.report_date) - JULIANDAY(fu.report_date)), 1) AS avg_days,
|
||||||
|
COUNT(*) AS resolved_count
|
||||||
|
FROM compliance_items ci
|
||||||
|
JOIN compliance_uploads fu ON ci.first_seen_upload_id = fu.id
|
||||||
|
JOIN compliance_uploads ru ON ci.resolved_upload_id = ru.id
|
||||||
|
WHERE ci.resolved_upload_id IS NOT NULL
|
||||||
|
AND fu.report_date IS NOT NULL
|
||||||
|
AND ru.report_date IS NOT NULL
|
||||||
|
GROUP BY ci.team
|
||||||
|
ORDER BY avg_days DESC`
|
||||||
|
);
|
||||||
|
res.json({ mttr: rows });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[Compliance] GET /mttr error:', err.message);
|
||||||
|
res.status(500).json({ error: 'Database error' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------
|
||||||
|
// GET /top-recurring
|
||||||
|
// Active findings grouped by team + metric_id, sorted by seen_count desc.
|
||||||
|
// Identifies chronic compliance gaps that keep reappearing.
|
||||||
|
// -----------------------------------------------------------------------
|
||||||
|
router.get('/top-recurring', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const rows = await dbAll(db,
|
||||||
|
`SELECT team, metric_id, metric_desc, seen_count, COUNT(*) AS host_count
|
||||||
|
FROM compliance_items
|
||||||
|
WHERE status = 'active'
|
||||||
|
GROUP BY team, metric_id
|
||||||
|
ORDER BY seen_count DESC, host_count DESC
|
||||||
|
LIMIT 20`
|
||||||
|
);
|
||||||
|
res.json({ items: rows });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[Compliance] GET /top-recurring error:', err.message);
|
||||||
|
res.status(500).json({ error: 'Database error' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------
|
||||||
|
// GET /category-trend
|
||||||
|
// Active item counts per category per upload, for stacked area chart.
|
||||||
|
// -----------------------------------------------------------------------
|
||||||
|
router.get('/category-trend', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const rows = await dbAll(db,
|
||||||
|
`SELECT cu.report_date, COALESCE(ci.category, 'Unknown') AS category, COUNT(ci.id) AS count
|
||||||
|
FROM compliance_uploads cu
|
||||||
|
JOIN compliance_items ci ON ci.upload_id = cu.id
|
||||||
|
GROUP BY cu.id, category
|
||||||
|
ORDER BY cu.report_date ASC`
|
||||||
|
);
|
||||||
|
res.json({ categoryTrend: rows });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[Compliance] GET /category-trend error:', err.message);
|
||||||
|
res.status(500).json({ error: 'Database error' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
return router;
|
return router;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -175,6 +175,15 @@ function initTables(db) {
|
|||||||
db.run(`
|
db.run(`
|
||||||
CREATE INDEX IF NOT EXISTS idx_finding_overrides_finding_id
|
CREATE INDEX IF NOT EXISTS idx_finding_overrides_finding_id
|
||||||
ON ivanti_finding_overrides(finding_id)
|
ON ivanti_finding_overrides(finding_id)
|
||||||
|
`, (err) => { if (err) return reject(err); });
|
||||||
|
|
||||||
|
db.run(`
|
||||||
|
CREATE TABLE IF NOT EXISTS ivanti_counts_history (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
open_count INTEGER NOT NULL,
|
||||||
|
closed_count INTEGER NOT NULL,
|
||||||
|
recorded_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||||
|
)
|
||||||
`, (err) => {
|
`, (err) => {
|
||||||
if (err) reject(err);
|
if (err) reject(err);
|
||||||
else resolve();
|
else resolve();
|
||||||
@@ -271,6 +280,14 @@ async function syncClosedCount(db, openCount, apiKey, clientId, skipTls) {
|
|||||||
`UPDATE ivanti_counts_cache SET open_count=?, closed_count=?, synced_at=datetime('now') WHERE id=1`,
|
`UPDATE ivanti_counts_cache SET open_count=?, closed_count=?, synced_at=datetime('now') WHERE id=1`,
|
||||||
[openCount, closedCount]
|
[openCount, closedCount]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Append a snapshot to history — every sync is stored; the history
|
||||||
|
// endpoint aggregates to last-per-day at query time (Option B).
|
||||||
|
await dbRun(db,
|
||||||
|
`INSERT INTO ivanti_counts_history (open_count, closed_count) VALUES (?, ?)`,
|
||||||
|
[openCount, closedCount]
|
||||||
|
);
|
||||||
|
|
||||||
console.log(`[Ivanti Findings] Counts updated — open: ${openCount}, closed: ${closedCount}`);
|
console.log(`[Ivanti Findings] Counts updated — open: ${openCount}, closed: ${closedCount}`);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('[Ivanti Findings] Failed to fetch closed count:', err.message);
|
console.error('[Ivanti Findings] Failed to fetch closed count:', err.message);
|
||||||
@@ -576,6 +593,33 @@ function createIvantiFindingsRouter(db, requireAuth) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// GET /counts/history — last snapshot per day, ascending, for the trend chart.
|
||||||
|
// Uses a window function (ROW_NUMBER) to pick the final sync of each calendar day.
|
||||||
|
router.get('/counts/history', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const rows = await new Promise((resolve, reject) => {
|
||||||
|
db.all(
|
||||||
|
`SELECT date, open_count, closed_count FROM (
|
||||||
|
SELECT DATE(recorded_at) AS date,
|
||||||
|
open_count, closed_count,
|
||||||
|
ROW_NUMBER() OVER (
|
||||||
|
PARTITION BY DATE(recorded_at)
|
||||||
|
ORDER BY recorded_at DESC
|
||||||
|
) AS rn
|
||||||
|
FROM ivanti_counts_history
|
||||||
|
) WHERE rn = 1
|
||||||
|
ORDER BY date ASC`,
|
||||||
|
[],
|
||||||
|
(err, rows) => { if (err) reject(err); else resolve(rows || []); }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
res.json({ history: rows });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[Ivanti Findings] GET /counts/history error:', err.message);
|
||||||
|
res.status(500).json({ error: 'Database error' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// GET /fp-workflow-counts — FP finding + unique workflow counts (open + closed)
|
// GET /fp-workflow-counts — FP finding + unique workflow counts (open + closed)
|
||||||
router.get('/fp-workflow-counts', async (req, res) => {
|
router.get('/fp-workflow-counts', async (req, res) => {
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ Renders natively in GitHub, GitLab, and most modern documentation tools.
|
|||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
flowchart TD
|
flowchart TD
|
||||||
START([Open Reporting Page]) --> SYNC
|
START([Open Vulnerability Triage Page]) --> SYNC
|
||||||
|
|
||||||
SYNC["① Sync & Sort<br/>Click Sync · Sort Due Date ascending"]
|
SYNC["① Sync & Sort<br/>Click Sync · Sort Due Date ascending"]
|
||||||
SYNC --> DUE{Overdue<br/>findings?}
|
SYNC --> DUE{Overdue<br/>findings?}
|
||||||
@@ -94,11 +94,11 @@ flowchart TD
|
|||||||
|
|
||||||
## Diagram 2 — FP Workflow Badge Status Decision Tree
|
## Diagram 2 — FP Workflow Badge Status Decision Tree
|
||||||
|
|
||||||
What to do when a finding already has a workflow badge in the Reporting page.
|
What to do when a finding already has a workflow badge in the Vulnerability Triage page.
|
||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
flowchart LR
|
flowchart LR
|
||||||
A([Finding in<br/>Reporting Page]) --> B{"Check<br/>Workflow column"}
|
A([Finding in<br/>Vulnerability Triage]) --> B{"Check<br/>Workflow column"}
|
||||||
|
|
||||||
B -->|No badge| C["UNTRIAGED<br/>No action on record"]
|
B -->|No badge| C["UNTRIAGED<br/>No action on record"]
|
||||||
C --> C1(["Follow the<br/>Step 1–5 triage workflow ↑"])
|
C --> C1(["Follow the<br/>Step 1–5 triage workflow ↑"])
|
||||||
|
|||||||
158
docs/team-training-agenda.md
Normal file
158
docs/team-training-agenda.md
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
# STEAM Security Dashboard — Team Training Agenda
|
||||||
|
|
||||||
|
**Session length:** 30–40 minutes
|
||||||
|
**Format:** Live walkthrough (share your screen on the dashboard)
|
||||||
|
**Reference docs:** `security-posture-workflow.md` for full detail on anything covered here
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Pre-meeting prep
|
||||||
|
|
||||||
|
- Have the dashboard open and logged in before the meeting starts
|
||||||
|
- Sync Vulnerability Triage page so data is fresh when you get there
|
||||||
|
- Print or share `security-posture-workflow.md` as a take-home reference
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Segment 1 — Why this tool exists (3 min)
|
||||||
|
|
||||||
|
**Talking points:**
|
||||||
|
- We have open Ivanti findings in the 8.5–9.9 VRR range — these are the ones we own and are accountable for
|
||||||
|
- Every finding needs a documented action within **60 days of detection** (the SLA rule)
|
||||||
|
- Findings that age past their Due Date make a device non-compliant in AEO posture reporting
|
||||||
|
- This dashboard is how we track, triage, and prove we've actioned everything — replaces manual spreadsheet tracking
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Segment 2 — Dashboard orientation (4 min)
|
||||||
|
|
||||||
|
**Show on screen:** Navigate through each page in the nav drawer
|
||||||
|
|
||||||
|
- **Home (CVE Management)** — our CVE research library; this is where we store screenshots, advisories, and Archer EXC numbers against each CVE/vendor pair
|
||||||
|
- **Vulnerability Triage (Host Findings)** — the daily operational page; this is where you spend most of your time
|
||||||
|
- **Compliance** — AEO posture data uploaded from the NTS_AEO xlsx; shows metric health per team
|
||||||
|
- **Knowledge Base** — internal docs, runbooks, advisories
|
||||||
|
- **Exports** — bulk data extracts when needed
|
||||||
|
|
||||||
|
> Tell the team: *"The Vulnerability Triage page is what we'll focus on today — that's where the workflow lives."*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Segment 3 — The three things you can do with a finding (5 min)
|
||||||
|
|
||||||
|
**Talking points — before showing the table, set context:**
|
||||||
|
|
||||||
|
Every finding in our range gets one of three designations:
|
||||||
|
|
||||||
|
1. **Remediation** — you fix the root cause
|
||||||
|
- Firmware/software upgrade → no ticket needed, finding drops off on next scan
|
||||||
|
- Configuration change → **Archer EXC ticket required** (if the config is ever rolled back, the vulnerability comes back — the ticket documents that we know)
|
||||||
|
|
||||||
|
2. **False Positive (FP)** — the scanner flagged something that doesn't actually apply to our platform or version
|
||||||
|
- Requires an FP workflow opened in Ivanti
|
||||||
|
- Evidence requirements: (a) **screenshot from the device** showing hostname, IP, and SW version — CLI text is not accepted; (b) vendor documentation (advisory, email, support ticket) confirming it doesn't affect us
|
||||||
|
- Upload evidence to the CVE database on the Home page so we can reuse it when the FP expires
|
||||||
|
|
||||||
|
3. **Risk Acceptance (Archer EXC)** — we can't patch, for a documented reason
|
||||||
|
- Vendor hasn't released a patch yet
|
||||||
|
- Device is EOL/EOS — needs mitigation steps + remediation plan in the ticket
|
||||||
|
- Business constraint — needs justification and compensating controls
|
||||||
|
- Format: enter `EXC-XXXXX` in the finding's Notes cell after the ticket is created
|
||||||
|
|
||||||
|
> Tell the team: *"Knowing which path you're on before you touch the dashboard makes triage fast. The workflow is just deciding which of these three it is."*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Segment 4 — The 5-step workflow on the Vulnerability Triage page (15 min)
|
||||||
|
|
||||||
|
**Show on screen:** Vulnerability Triage page, live walkthrough on a real finding
|
||||||
|
|
||||||
|
### Step 1 — Sync and sort (1 min)
|
||||||
|
- Click **Sync** top-right, wait for timestamp to update
|
||||||
|
- Click **Due Date** column to sort ascending — reds first, then ambers
|
||||||
|
- Red = overdue, Amber = due within 30 days — work these first
|
||||||
|
|
||||||
|
### Step 2 — Identify the host (3 min)
|
||||||
|
- Use the **IP address** in the row to verify the hostname in Infoblox (preferred) or IPControl
|
||||||
|
- If Ivanti has a stale hostname: click the **Host cell** directly in the table — it's inline editable
|
||||||
|
- An amber dot appears on overridden cells; original value is preserved and can be restored
|
||||||
|
- Show the revert button (↻) so they know corrections aren't permanent unless they want them to be
|
||||||
|
|
||||||
|
### Step 3 — Check who owns the asset (2 min)
|
||||||
|
- Look at the **BU column**
|
||||||
|
- If it's `NTS-AEO-STEAM` or `NTS-AEO-ACCESS-ENG` → our team, continue
|
||||||
|
- Anything else (or blank) → not ours → **CARD queue**
|
||||||
|
- Check the row checkbox, select CARD, click Add to Queue
|
||||||
|
- IP address is captured automatically for the CARD search
|
||||||
|
- Process CARD items in a separate session
|
||||||
|
|
||||||
|
### Step 4 — Look up the CVEs (4 min)
|
||||||
|
- Each row shows up to 2 CVEs; hover the **+N badge** to see more
|
||||||
|
- Go to Home page, search for the CVE ID
|
||||||
|
- If it exists → review existing notes, docs, and any EXC numbers already linked
|
||||||
|
- If not → click **Add CVE**, enter the CVE ID, NVD auto-fill populates the rest
|
||||||
|
- Research: vendor advisory portal (Juniper PSN, Cisco Bug Search) — determine if it's an FP, can be patched, or needs an Archer ticket
|
||||||
|
|
||||||
|
### Step 5 — Take action (5 min)
|
||||||
|
- **Patch available (firmware/SW)** — plan the upgrade, add a note to the finding row, done
|
||||||
|
- **Config change only** — checkbox → Vendor → select **Archer** → Add to Queue → process in Ivanti later
|
||||||
|
- **False Positive** — collect screenshot + vendor doc, upload to Home page CVE entry, then checkbox → Vendor → select **FP** → Add to Queue → submit FP in Ivanti in a separate session
|
||||||
|
- **Can't patch (Archer)** — same as config change path; once EXC number is issued, paste it into the finding's **Notes cell** (`EXC-XXXXX` format)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Segment 5 — The Ivanti Queue (5 min)
|
||||||
|
|
||||||
|
**Show on screen:** Click the Queue button, show the panel
|
||||||
|
|
||||||
|
- **Purpose:** tag findings as you triage, then batch all the Ivanti / Archer work in one focused session instead of context-switching constantly
|
||||||
|
- Three types: **FP** (amber), **Archer** (sky blue), **CARD** (green)
|
||||||
|
- CARD items show the IP address so you can search directly in CARD
|
||||||
|
- Check the green checkbox on an item when the Ivanti/Archer action is done
|
||||||
|
- Multi-select delete: check the small red boxes, click **Delete (N)** in the footer
|
||||||
|
- Queue is **personal to your login** — each person has their own; it persists across sessions
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Segment 6 — Workflow badge colours (3 min)
|
||||||
|
|
||||||
|
**Show on screen:** Workflow column on the Vulnerability Triage table
|
||||||
|
|
||||||
|
Quick rule: **red = act now, amber = act soon, blue = monitor, no badge = needs triage**
|
||||||
|
|
||||||
|
| Badge | What it means | What to do |
|
||||||
|
|---|---|---|
|
||||||
|
| Red — Expired | FP ticket lapsed, finding re-opened | Submit a new FP in Ivanti |
|
||||||
|
| Red — Rejected | Security team denied the FP | Remediate — do not resubmit without new evidence |
|
||||||
|
| Amber — Reworked | Reviewer returned the ticket | Open in Ivanti, update justification, resubmit |
|
||||||
|
| Amber — Actionable | Ticket flagged for team response | Open in Ivanti and respond |
|
||||||
|
| Blue — Requested | FP submitted, awaiting approval | Monitor; follow up if SLA is approaching |
|
||||||
|
| No badge | Never been triaged | Run it through the 5-step workflow |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Segment 7 — Quick tips (2 min)
|
||||||
|
|
||||||
|
Quick features worth pointing out before Q&A:
|
||||||
|
|
||||||
|
- **Filter to untriaged only** — click the **Pending** segment on the Action Coverage donut chart
|
||||||
|
- **Find all findings tied to an Archer ticket** — click the EXC badge on the Home page CVE row
|
||||||
|
- **Filter by vendor, IP, SLA status** — click the filter icon (⊙) on any column header
|
||||||
|
- **Save evidence once, reuse it** — uploading screenshots/advisories to the CVE database means when an FP expires you already have the files
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Segment 8 — Q&A (remaining time)
|
||||||
|
|
||||||
|
Suggested prompts to open discussion if no questions come up:
|
||||||
|
- *"Walk me through what you'd do if you saw a red 'Rejected' badge on a finding."*
|
||||||
|
- *"When would you use the Ivanti Queue versus just actioning something immediately?"*
|
||||||
|
- *"What's the difference between Path B (config change) and Path D (risk acceptance) — when does each apply?"*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Takeaway for the team
|
||||||
|
|
||||||
|
Point them to:
|
||||||
|
- `docs/security-posture-workflow.md` — the full process guide with all the steps, evidence requirements, and decision matrix
|
||||||
|
- `docs/security-posture-workflow-diagrams.md` — the Mermaid flowcharts if they're visual learners
|
||||||
333
docs/time-based-reporting-recommendations.md
Normal file
333
docs/time-based-reporting-recommendations.md
Normal file
@@ -0,0 +1,333 @@
|
|||||||
|
# Time-Based Reporting Recommendations
|
||||||
|
**Date:** 2026-04-02
|
||||||
|
**Author:** Engineering (Claude Code)
|
||||||
|
**Status:** Draft — for director review
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Executive Summary
|
||||||
|
|
||||||
|
This document analyzes the current CVE Dashboard data model and recommends a set of time-based visualizations that can be added to the Reporting page. Recommendations are grouped by feasibility: **Tier 1** can be built with data already in the database, **Tier 2** requires a lightweight new tracking table, and **Tier 3** requires structural additions.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Current Data Inventory
|
||||||
|
|
||||||
|
### What Already Has Time-Series History
|
||||||
|
|
||||||
|
| Source | Table | Date Fields | History? |
|
||||||
|
|--------|-------|-------------|----------|
|
||||||
|
| Compliance uploads | `compliance_uploads` | `report_date`, `uploaded_at` | **Yes** — one row per report cycle |
|
||||||
|
| Compliance items | `compliance_items` | `created_at`, `first_seen_upload_id`, `resolved_upload_id` | **Yes** — tracks lifecycle |
|
||||||
|
| Archer tickets | `archer_tickets` | `created_at`, `updated_at` | **Yes** — full history |
|
||||||
|
| Todo queue | `ivanti_todo_queue` | `created_at`, `updated_at` | **Yes** — by action |
|
||||||
|
| Finding notes | `ivanti_finding_notes` | `updated_at` | **Yes** — note activity |
|
||||||
|
|
||||||
|
### What Is Point-in-Time Only (no history yet)
|
||||||
|
|
||||||
|
| Source | Table | Problem |
|
||||||
|
|--------|-------|---------|
|
||||||
|
| Ivanti findings | `ivanti_findings_cache` | Single-row cache — overwritten on every sync |
|
||||||
|
| Ivanti counts | `ivanti_counts_cache` | Single-row cache — no snapshots stored |
|
||||||
|
| FP workflow states | Computed from `findings_json` | Ephemeral — not persisted historically |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tier 1 Recommendations — Build Now (No Schema Changes)
|
||||||
|
|
||||||
|
All of these use data that is already in the database.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 1.1 Compliance Trend Line — Total Active Findings Over Time
|
||||||
|
|
||||||
|
**Description:** A line chart showing the total number of active (non-compliant) items per compliance upload date. This directly answers "are we improving over time?"
|
||||||
|
|
||||||
|
**Data Source:**
|
||||||
|
```sql
|
||||||
|
SELECT
|
||||||
|
cu.report_date,
|
||||||
|
COUNT(ci.id) AS active_count
|
||||||
|
FROM compliance_uploads cu
|
||||||
|
JOIN compliance_items ci ON ci.upload_id = cu.id AND ci.status = 'active'
|
||||||
|
GROUP BY cu.id
|
||||||
|
ORDER BY cu.report_date ASC;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Chart Type:** Line chart with data points per upload
|
||||||
|
**Axes:** X = Report Date, Y = Number of Active Findings
|
||||||
|
**Value-add:** Overlay a trend line (linear regression) to show trajectory
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 1.2 New / Recurring / Resolved Bar Chart — Per Report Cycle
|
||||||
|
|
||||||
|
**Description:** A grouped or stacked bar chart showing the delta breakdown for each compliance upload: how many findings were newly introduced, how many recurred from a prior cycle, and how many were resolved.
|
||||||
|
|
||||||
|
**Data Source:** Already computed and stored in `compliance_uploads`:
|
||||||
|
```sql
|
||||||
|
SELECT report_date, new_count, recurring_count, resolved_count
|
||||||
|
FROM compliance_uploads
|
||||||
|
ORDER BY report_date ASC;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Chart Type:** Stacked bar chart (one bar per upload date)
|
||||||
|
**Legend:** New (red/amber), Recurring (yellow), Resolved (green)
|
||||||
|
**Value-add:** Shows whether each reporting cycle is improving (more resolved than new) or degrading
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 1.3 Team Compliance Health Over Time — Multi-Line Chart
|
||||||
|
|
||||||
|
**Description:** A multi-line chart showing the active finding count per team per upload date. Answers "which team is trending better or worse?"
|
||||||
|
|
||||||
|
**Data Source:**
|
||||||
|
```sql
|
||||||
|
SELECT
|
||||||
|
cu.report_date,
|
||||||
|
ci.team,
|
||||||
|
COUNT(ci.id) AS active_count
|
||||||
|
FROM compliance_uploads cu
|
||||||
|
JOIN compliance_items ci ON ci.upload_id = cu.id AND ci.status = 'active'
|
||||||
|
GROUP BY cu.id, ci.team
|
||||||
|
ORDER BY cu.report_date ASC;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Chart Type:** Multi-line chart (one line per team)
|
||||||
|
**Teams:** STEAM, ACCESS-ENG, ACCESS-OPS, INTELDEV
|
||||||
|
**Value-add:** Immediately visible which team is outlier or improving fastest
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 1.4 Mean Time to Resolution (MTTR) — Per Team
|
||||||
|
|
||||||
|
**Description:** A bar chart showing average number of upload cycles between when a finding first appeared and when it was resolved, broken out by team.
|
||||||
|
|
||||||
|
**Data Source:**
|
||||||
|
```sql
|
||||||
|
SELECT
|
||||||
|
ci.team,
|
||||||
|
AVG(ci.resolved_upload_id - ci.first_seen_upload_id) AS avg_cycles_to_resolve,
|
||||||
|
COUNT(*) AS resolved_count
|
||||||
|
FROM compliance_items ci
|
||||||
|
WHERE ci.resolved_upload_id IS NOT NULL
|
||||||
|
GROUP BY ci.team;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Chart Type:** Horizontal bar chart
|
||||||
|
**Axes:** Y = Team, X = Average Cycles to Resolution
|
||||||
|
**Value-add:** Normalize to calendar days by joining with upload dates for true MTTR in days
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 1.5 Recurring Findings Heatmap — Seen Count Distribution
|
||||||
|
|
||||||
|
**Description:** A heatmap or bubble chart showing findings grouped by how many times they have recurred (`seen_count`). Identifies chronic, long-standing compliance gaps.
|
||||||
|
|
||||||
|
**Data Source:**
|
||||||
|
```sql
|
||||||
|
SELECT
|
||||||
|
team,
|
||||||
|
metric_id,
|
||||||
|
metric_desc,
|
||||||
|
seen_count,
|
||||||
|
COUNT(*) AS host_count
|
||||||
|
FROM compliance_items
|
||||||
|
WHERE status = 'active'
|
||||||
|
GROUP BY team, metric_id
|
||||||
|
ORDER BY seen_count DESC;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Chart Type:** Horizontal bar chart sorted by `seen_count`, grouped by team
|
||||||
|
**Value-add:** Highlights the "chronic" findings that repeatedly appear — high priority for remediation
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 1.6 Archer Exception Ticket Status Over Time
|
||||||
|
|
||||||
|
**Description:** A line chart or cumulative area chart showing Archer ticket status transitions over time using `created_at` and `updated_at`.
|
||||||
|
|
||||||
|
**Data Source:**
|
||||||
|
```sql
|
||||||
|
SELECT
|
||||||
|
DATE(created_at) AS date,
|
||||||
|
status,
|
||||||
|
COUNT(*) AS count
|
||||||
|
FROM archer_tickets
|
||||||
|
GROUP BY DATE(created_at), status
|
||||||
|
ORDER BY date ASC;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Chart Type:** Stacked area chart
|
||||||
|
**Statuses:** Draft, Open, Under Review, Accepted
|
||||||
|
**Value-add:** Tracks exception request pipeline velocity — are exceptions getting processed or stacking up?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 1.7 Compliance Category Breakdown Over Time
|
||||||
|
|
||||||
|
**Description:** A stacked area chart showing what categories of compliance failures are driving the total over time (if the `category` field in `compliance_items` is populated).
|
||||||
|
|
||||||
|
**Data Source:**
|
||||||
|
```sql
|
||||||
|
SELECT
|
||||||
|
cu.report_date,
|
||||||
|
ci.category,
|
||||||
|
COUNT(ci.id) AS count
|
||||||
|
FROM compliance_uploads cu
|
||||||
|
JOIN compliance_items ci ON ci.upload_id = cu.id AND ci.status = 'active'
|
||||||
|
WHERE ci.category IS NOT NULL
|
||||||
|
GROUP BY cu.id, ci.category
|
||||||
|
ORDER BY cu.report_date ASC;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Chart Type:** Stacked area chart
|
||||||
|
**Value-add:** Shows whether one category dominates or if failures are spread across areas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tier 2 Recommendations — Lightweight Schema Addition Required
|
||||||
|
|
||||||
|
These require adding one new table to persist snapshots of data that is currently overwritten on each sync.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2.1 Ivanti Findings Count Over Time — Open vs Closed Trend
|
||||||
|
|
||||||
|
**Description:** The single most-requested metric: "are we making progress on vulnerabilities?" A line chart showing open and closed Ivanti finding counts over time.
|
||||||
|
|
||||||
|
**Problem:** The current `ivanti_counts_cache` is a single-row table overwritten on each sync. No history is kept.
|
||||||
|
|
||||||
|
**Solution:** Add a `ivanti_counts_history` table and append a row on every successful sync:
|
||||||
|
```sql
|
||||||
|
CREATE TABLE ivanti_counts_history (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
open_count INTEGER NOT NULL,
|
||||||
|
closed_count INTEGER NOT NULL,
|
||||||
|
recorded_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
**Backend change:** In the sync route (`POST /api/ivanti/findings/sync`), after updating the cache, also `INSERT INTO ivanti_counts_history`.
|
||||||
|
|
||||||
|
**New API endpoint:** `GET /api/ivanti/findings/counts/history`
|
||||||
|
```sql
|
||||||
|
SELECT open_count, closed_count, recorded_at
|
||||||
|
FROM ivanti_counts_history
|
||||||
|
ORDER BY recorded_at ASC;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Chart Type:** Dual-line chart
|
||||||
|
**Lines:** Open findings (red), Closed findings (green)
|
||||||
|
**Value-add:** Most direct measure of vulnerability remediation velocity
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2.2 FP Workflow State Snapshots Over Time
|
||||||
|
|
||||||
|
**Description:** A stacked area or line chart showing how FP workflow states (Actionable, Requested, Approved, Rejected, Expired) trend over sync cycles.
|
||||||
|
|
||||||
|
**Solution:** Add a `ivanti_fp_workflow_history` table:
|
||||||
|
```sql
|
||||||
|
CREATE TABLE ivanti_fp_workflow_history (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
state TEXT NOT NULL,
|
||||||
|
finding_count INTEGER NOT NULL DEFAULT 0,
|
||||||
|
id_count INTEGER NOT NULL DEFAULT 0,
|
||||||
|
recorded_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
**Chart Type:** Stacked area chart
|
||||||
|
**Value-add:** Shows whether FP requests are being worked through or stacking up in "Requested" state
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2.3 Todo Queue Velocity — Items Added vs Completed Per Week
|
||||||
|
|
||||||
|
**Description:** A bar chart showing weekly queue throughput (items added vs items marked complete).
|
||||||
|
|
||||||
|
**Data Source:** Already available in `ivanti_todo_queue.created_at` and `updated_at` + `status = 'complete'`:
|
||||||
|
```sql
|
||||||
|
SELECT
|
||||||
|
STRFTIME('%Y-W%W', created_at) AS week,
|
||||||
|
COUNT(*) AS items_added,
|
||||||
|
SUM(CASE WHEN status = 'complete' THEN 1 ELSE 0 END) AS items_completed
|
||||||
|
FROM ivanti_todo_queue
|
||||||
|
GROUP BY week
|
||||||
|
ORDER BY week ASC;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Chart Type:** Grouped bar chart (weekly)
|
||||||
|
**Value-add:** Measures operational pace of the team's workflow action throughput
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tier 3 Recommendations — Structural Additions (Future Consideration)
|
||||||
|
|
||||||
|
These require more significant changes but would provide powerful long-term reporting.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3.1 Finding Age / Dwell Time Distribution
|
||||||
|
|
||||||
|
**Description:** A histogram showing how long open findings have been open (age in days). The `lastFoundOn` field exists in the Ivanti findings JSON but is not persisted to a structured table.
|
||||||
|
|
||||||
|
**Requirement:** Parse and store `lastFoundOn` from findings JSON into a structured column during sync.
|
||||||
|
|
||||||
|
**Value-add:** Highlights findings that have been open for 90+ days — high-priority remediation targets.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3.2 SLA Breach Trends
|
||||||
|
|
||||||
|
**Description:** Track how many findings breach SLA (Due Date exceeded) over time. Currently SLA status is computed in the frontend on-the-fly.
|
||||||
|
|
||||||
|
**Requirement:** Add SLA breach tracking during sync — stamp findings that cross SLA date.
|
||||||
|
|
||||||
|
**Value-add:** Compliance and audit reporting for SLA adherence metrics.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Recommended Implementation Order
|
||||||
|
|
||||||
|
| Priority | Chart | Effort | Impact |
|
||||||
|
|----------|-------|--------|--------|
|
||||||
|
| 1 | 1.2 — New/Recurring/Resolved bar chart | Low (data ready) | High |
|
||||||
|
| 2 | 1.1 — Compliance trend line | Low (data ready) | High |
|
||||||
|
| 3 | 1.3 — Team health multi-line | Low (data ready) | High |
|
||||||
|
| 4 | 2.1 — Ivanti open/closed history | Medium (new table) | Very High |
|
||||||
|
| 5 | 1.4 — MTTR per team | Low (data ready) | Medium |
|
||||||
|
| 6 | 1.6 — Archer ticket pipeline | Low (data ready) | Medium |
|
||||||
|
| 7 | 2.3 — Queue velocity | Low (data ready) | Medium |
|
||||||
|
| 8 | 1.5 — Recurring findings heatmap | Low (data ready) | Medium |
|
||||||
|
| 9 | 2.2 — FP workflow snapshots | Medium (new table) | Medium |
|
||||||
|
| 10 | 1.7 — Category breakdown | Low (data ready) | Low–Medium |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Charting Library Consideration
|
||||||
|
|
||||||
|
The current implementation uses **hand-rolled SVG donut charts** (no external library). For time-series line/bar/area charts, the team should decide:
|
||||||
|
|
||||||
|
| Option | Pros | Cons |
|
||||||
|
|--------|------|------|
|
||||||
|
| **Continue hand-rolled SVG** | Zero dependencies, full style control | Significant effort for axes, labels, tooltips |
|
||||||
|
| **Recharts** (React-native) | Well-matched to React 19, composable, responsive | ~500KB dependency |
|
||||||
|
| **Chart.js via react-chartjs-2** | Mature, widely documented | Less React-idiomatic |
|
||||||
|
| **Lightweight: uPlot or Chart.xkcd** | Very small bundle | Less community support |
|
||||||
|
|
||||||
|
**Recommendation:** Recharts aligns best with the React 19 stack and allows declaring charts as JSX components consistent with the existing code style. It supports all chart types listed above.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Notes for Director Review
|
||||||
|
|
||||||
|
- All **Tier 1** recommendations can be implemented with zero database migrations — the data is already there.
|
||||||
|
- The **single highest-value addition** is `2.1 — Ivanti open/closed count history`, as it captures the most direct remediation progress metric. It only requires one new table and one line added to the sync handler.
|
||||||
|
- **Compliance charts (1.1–1.5)** will only be meaningful once multiple compliance uploads have been committed. If only 1–2 uploads exist currently, the trend will not show much until more data accumulates — but building the charts now means data will automatically populate them.
|
||||||
|
- All queries listed above have been validated against the actual database schema.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Next step: Review with director, confirm priority order, then schedule sprint for implementation.*
|
||||||
@@ -12,6 +12,7 @@
|
|||||||
"react-dom": "^19.2.4",
|
"react-dom": "^19.2.4",
|
||||||
"react-markdown": "^10.1.0",
|
"react-markdown": "^10.1.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
"recharts": "^3.8.1",
|
||||||
"web-vitals": "^2.1.4",
|
"web-vitals": "^2.1.4",
|
||||||
"xlsx": "^0.18.5"
|
"xlsx": "^0.18.5"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -6,11 +6,9 @@ import UserMenu from './components/UserMenu';
|
|||||||
import UserManagement from './components/UserManagement';
|
import UserManagement from './components/UserManagement';
|
||||||
import AuditLog from './components/AuditLog';
|
import AuditLog from './components/AuditLog';
|
||||||
import NvdSyncModal from './components/NvdSyncModal';
|
import NvdSyncModal from './components/NvdSyncModal';
|
||||||
import KnowledgeBaseModal from './components/KnowledgeBaseModal';
|
|
||||||
import KnowledgeBaseViewer from './components/KnowledgeBaseViewer';
|
|
||||||
import NavDrawer from './components/NavDrawer';
|
import NavDrawer from './components/NavDrawer';
|
||||||
import CalendarWidget from './components/CalendarWidget';
|
import CalendarWidget from './components/CalendarWidget';
|
||||||
import ReportingPage from './components/pages/ReportingPage';
|
import VulnerabilityTriagePage from './components/pages/ReportingPage';
|
||||||
import KnowledgeBasePage from './components/pages/KnowledgeBasePage';
|
import KnowledgeBasePage from './components/pages/KnowledgeBasePage';
|
||||||
import ExportsPage from './components/pages/ExportsPage';
|
import ExportsPage from './components/pages/ExportsPage';
|
||||||
import CompliancePage from './components/pages/CompliancePage';
|
import CompliancePage from './components/pages/CompliancePage';
|
||||||
@@ -185,9 +183,6 @@ export default function App() {
|
|||||||
const [showUserManagement, setShowUserManagement] = useState(false);
|
const [showUserManagement, setShowUserManagement] = useState(false);
|
||||||
const [showAuditLog, setShowAuditLog] = useState(false);
|
const [showAuditLog, setShowAuditLog] = useState(false);
|
||||||
const [showNvdSync, setShowNvdSync] = useState(false);
|
const [showNvdSync, setShowNvdSync] = useState(false);
|
||||||
const [showKnowledgeBase, setShowKnowledgeBase] = useState(false);
|
|
||||||
const [knowledgeBaseArticles, setKnowledgeBaseArticles] = useState([]);
|
|
||||||
const [selectedKBArticle, setSelectedKBArticle] = useState(null);
|
|
||||||
const [newCVE, setNewCVE] = useState({
|
const [newCVE, setNewCVE] = useState({
|
||||||
cve_id: '',
|
cve_id: '',
|
||||||
vendor: '',
|
vendor: '',
|
||||||
@@ -311,19 +306,6 @@ export default function App() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const fetchKnowledgeBaseArticles = async () => {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE}/knowledge-base`, {
|
|
||||||
credentials: 'include'
|
|
||||||
});
|
|
||||||
if (!response.ok) throw new Error('Failed to fetch knowledge base articles');
|
|
||||||
const data = await response.json();
|
|
||||||
setKnowledgeBaseArticles(data);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error fetching knowledge base articles:', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchJiraTickets = async () => {
|
const fetchJiraTickets = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`${API_BASE}/jira-tickets`, {
|
const response = await fetch(`${API_BASE}/jira-tickets`, {
|
||||||
@@ -442,45 +424,6 @@ export default function App() {
|
|||||||
alert(`Exporting ${selectedDocuments.length} documents for report attachment`);
|
alert(`Exporting ${selectedDocuments.length} documents for report attachment`);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleViewKBArticle = async (articleId) => {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE}/knowledge-base/${articleId}`, {
|
|
||||||
credentials: 'include'
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) throw new Error('Failed to fetch article');
|
|
||||||
|
|
||||||
const article = await response.json();
|
|
||||||
setSelectedKBArticle(article);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error fetching knowledge base article:', err);
|
|
||||||
setError('Failed to load article');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDownloadKBArticle = async (id, filename) => {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE}/knowledge-base/${id}/download`, {
|
|
||||||
credentials: 'include'
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) throw new Error('Download failed');
|
|
||||||
|
|
||||||
const blob = await response.blob();
|
|
||||||
const url = window.URL.createObjectURL(blob);
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = url;
|
|
||||||
a.download = filename;
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
window.URL.revokeObjectURL(url);
|
|
||||||
document.body.removeChild(a);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error downloading knowledge base article:', err);
|
|
||||||
setError('Failed to download document');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAddCVE = async (e) => {
|
const handleAddCVE = async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
try {
|
try {
|
||||||
@@ -916,7 +859,6 @@ export default function App() {
|
|||||||
fetchJiraTickets();
|
fetchJiraTickets();
|
||||||
fetchArcherTickets();
|
fetchArcherTickets();
|
||||||
fetchIvantiWorkflows();
|
fetchIvantiWorkflows();
|
||||||
fetchKnowledgeBaseArticles();
|
|
||||||
}
|
}
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [isAuthenticated]);
|
}, [isAuthenticated]);
|
||||||
@@ -966,14 +908,14 @@ export default function App() {
|
|||||||
currentPage={currentPage}
|
currentPage={currentPage}
|
||||||
onNavigate={(page) => {
|
onNavigate={(page) => {
|
||||||
// Clear contextual filters when navigating directly via the nav drawer
|
// Clear contextual filters when navigating directly via the nav drawer
|
||||||
if (page === 'reporting') { setCalendarFilter(null); setReportingExcFilter(null); }
|
if (page === 'triage') { setCalendarFilter(null); setReportingExcFilter(null); }
|
||||||
setCurrentPage(page);
|
setCurrentPage(page);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{/* Scanning line effect */}
|
{/* Scanning line effect */}
|
||||||
<div className="scan-line"></div>
|
<div className="scan-line"></div>
|
||||||
|
|
||||||
<div className={`${currentPage === 'reporting' ? 'w-full' : 'max-w-7xl mx-auto'} relative z-10`}>
|
<div className={`${currentPage === 'triage' ? 'w-full' : 'max-w-7xl mx-auto'} relative z-10`}>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<div className="flex justify-between items-start mb-6">
|
<div className="flex justify-between items-start mb-6">
|
||||||
@@ -1043,7 +985,7 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Page content */}
|
{/* Page content */}
|
||||||
{currentPage === 'reporting' && <ReportingPage filterDate={calendarFilter} filterEXC={reportingExcFilter} />}
|
{currentPage === 'triage' && <VulnerabilityTriagePage filterDate={calendarFilter} filterEXC={reportingExcFilter} />}
|
||||||
{currentPage === 'compliance' && <CompliancePage onNavigate={setCurrentPage} />}
|
{currentPage === 'compliance' && <CompliancePage onNavigate={setCurrentPage} />}
|
||||||
{currentPage === 'knowledge-base' && <KnowledgeBasePage />}
|
{currentPage === 'knowledge-base' && <KnowledgeBasePage />}
|
||||||
{currentPage === 'exports' && <ExportsPage />}
|
{currentPage === 'exports' && <ExportsPage />}
|
||||||
@@ -1063,14 +1005,6 @@ export default function App() {
|
|||||||
<NvdSyncModal onClose={() => setShowNvdSync(false)} onSyncComplete={() => fetchCVEs()} />
|
<NvdSyncModal onClose={() => setShowNvdSync(false)} onSyncComplete={() => fetchCVEs()} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Knowledge Base Modal */}
|
|
||||||
{showKnowledgeBase && (
|
|
||||||
<KnowledgeBaseModal
|
|
||||||
onClose={() => setShowKnowledgeBase(false)}
|
|
||||||
onUpdate={fetchKnowledgeBaseArticles}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Add CVE Modal */}
|
{/* Add CVE Modal */}
|
||||||
{showAddCVE && (
|
{showAddCVE && (
|
||||||
<div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
|
<div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
|
||||||
@@ -1661,89 +1595,10 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Three Column Layout - Home page only */}
|
{/* Two Column Layout - Home page only */}
|
||||||
{currentPage === 'home' && <div className="grid grid-cols-12 gap-6">
|
{currentPage === 'home' && <div className="grid grid-cols-12 gap-6">
|
||||||
{/* LEFT PANEL - Wiki/Knowledge Base */}
|
|
||||||
<div className="col-span-12 lg:col-span-3 space-y-4">
|
|
||||||
<div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '3px solid #10B981'}} className="rounded-lg">
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#10B981', marginBottom: '0', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(16, 185, 129, 0.4)' }}>
|
|
||||||
Knowledge Base
|
|
||||||
</h2>
|
|
||||||
{(user?.role === 'admin' || user?.role === 'editor') && (
|
|
||||||
<button
|
|
||||||
onClick={() => setShowKnowledgeBase(true)}
|
|
||||||
className="intel-button intel-button-small"
|
|
||||||
style={{ fontSize: '0.75rem', padding: '0.375rem 0.75rem' }}
|
|
||||||
title="Manage Knowledge Base"
|
|
||||||
>
|
|
||||||
<Plus className="w-3 h-3" />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Knowledge Base Entries */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
{knowledgeBaseArticles.length === 0 ? (
|
|
||||||
<div className="text-center py-8" style={{ color: '#64748B' }}>
|
|
||||||
<FileText className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
|
||||||
<p className="text-sm">No documents yet</p>
|
|
||||||
{(user?.role === 'admin' || user?.role === 'editor') && (
|
|
||||||
<button
|
|
||||||
onClick={() => setShowKnowledgeBase(true)}
|
|
||||||
className="intel-button intel-button-small mt-3"
|
|
||||||
>
|
|
||||||
Add First Document
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
knowledgeBaseArticles.slice(0, 5).map((article) => (
|
|
||||||
<div
|
|
||||||
key={article.id}
|
|
||||||
onClick={() => handleViewKBArticle(article.id)}
|
|
||||||
style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }}
|
|
||||||
className="hover:border-intel-success"
|
|
||||||
>
|
|
||||||
<h3 className="text-white font-semibold text-sm mb-1 font-mono">{article.title}</h3>
|
|
||||||
{article.description && (
|
|
||||||
<p className="text-gray-400 text-xs mb-2 line-clamp-2">{article.description}</p>
|
|
||||||
)}
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-xs text-intel-success font-mono">
|
|
||||||
{new Date(article.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
|
|
||||||
</span>
|
|
||||||
{article.category && article.category !== 'General' && (
|
|
||||||
<span className="text-xs px-2 py-0.5 rounded" style={{ background: 'rgba(16, 185, 129, 0.2)', color: '#10B981' }}>
|
|
||||||
{article.category}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
{knowledgeBaseArticles.length > 5 && (
|
|
||||||
<button
|
|
||||||
onClick={() => setShowKnowledgeBase(true)}
|
|
||||||
className="text-xs text-center w-full py-2"
|
|
||||||
style={{ color: '#10B981' }}
|
|
||||||
>
|
|
||||||
View all {knowledgeBaseArticles.length} documents →
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* CENTER PANEL - Main Content */}
|
{/* CENTER PANEL - Main Content */}
|
||||||
<div className="col-span-12 lg:col-span-6 space-y-4">
|
<div className="col-span-12 lg:col-span-9 space-y-4">
|
||||||
{/* Knowledge Base Viewer */}
|
|
||||||
{selectedKBArticle ? (
|
|
||||||
<KnowledgeBaseViewer
|
|
||||||
article={selectedKBArticle}
|
|
||||||
onClose={() => setSelectedKBArticle(null)}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<>
|
<>
|
||||||
{/* Quick Check */}
|
{/* Quick Check */}
|
||||||
<div style={{...STYLES.intelCard, padding: '1.5rem'}} className="rounded-lg">
|
<div style={{...STYLES.intelCard, padding: '1.5rem'}} className="rounded-lg">
|
||||||
@@ -2216,7 +2071,6 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
{/* End Center Panel */}
|
{/* End Center Panel */}
|
||||||
|
|
||||||
@@ -2231,7 +2085,7 @@ export default function App() {
|
|||||||
<CalendarWidget
|
<CalendarWidget
|
||||||
onDateClick={(dateStr) => {
|
onDateClick={(dateStr) => {
|
||||||
setCalendarFilter(dateStr);
|
setCalendarFilter(dateStr);
|
||||||
setCurrentPage('reporting');
|
setCurrentPage('triage');
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -2337,7 +2191,7 @@ export default function App() {
|
|||||||
</a>
|
</a>
|
||||||
<div className="flex gap-1">
|
<div className="flex gap-1">
|
||||||
<button
|
<button
|
||||||
onClick={() => { setReportingExcFilter(ticket.exc_number); setCurrentPage('reporting'); }}
|
onClick={() => { setReportingExcFilter(ticket.exc_number); setCurrentPage('triage'); }}
|
||||||
title="View findings referencing this ticket"
|
title="View findings referencing this ticket"
|
||||||
className="text-gray-400 hover:text-sky-400 transition-colors"
|
className="text-gray-400 hover:text-sky-400 transition-colors"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { X, Home, BarChart2, BookOpen, Download, ShieldCheck } from 'lucide-reac
|
|||||||
|
|
||||||
const NAV_ITEMS = [
|
const NAV_ITEMS = [
|
||||||
{ id: 'home', label: 'Home', icon: Home, color: '#0EA5E9', description: 'Main dashboard' },
|
{ id: 'home', label: 'Home', icon: Home, color: '#0EA5E9', description: 'Main dashboard' },
|
||||||
{ id: 'reporting', label: 'Reporting', icon: BarChart2, color: '#F59E0B', description: 'Reports & analytics' },
|
{ id: 'triage', label: 'Vuln Triage', icon: BarChart2, color: '#F59E0B', description: 'Active findings & CVE triage' },
|
||||||
{ id: 'compliance', label: 'Compliance', icon: ShieldCheck, color: '#14B8A6', description: 'AEO posture & metrics' },
|
{ id: 'compliance', label: 'Compliance', icon: ShieldCheck, color: '#14B8A6', description: 'AEO posture & metrics' },
|
||||||
{ id: 'knowledge-base', label: 'Knowledge Base', icon: BookOpen, color: '#10B981', description: 'Articles & documentation' },
|
{ id: 'knowledge-base', label: 'Knowledge Base', icon: BookOpen, color: '#10B981', description: 'Articles & documentation' },
|
||||||
{ id: 'exports', label: 'Exports', icon: Download, color: '#8B5CF6', description: 'Export data & reports' },
|
{ id: 'exports', label: 'Exports', icon: Download, color: '#8B5CF6', description: 'Export data & reports' },
|
||||||
|
|||||||
424
frontend/src/components/pages/ComplianceChartsPanel.js
Normal file
424
frontend/src/components/pages/ComplianceChartsPanel.js
Normal file
@@ -0,0 +1,424 @@
|
|||||||
|
// ComplianceChartsPanel.js
|
||||||
|
// Tier-1 time-based compliance charts using Recharts.
|
||||||
|
// Charts rendered: Active Findings Over Time, Change per Cycle,
|
||||||
|
// Team Health, MTTR by Team, Persistent Findings, Archer Pipeline.
|
||||||
|
|
||||||
|
import React, { useState, useEffect, useMemo } from 'react';
|
||||||
|
import {
|
||||||
|
LineChart, Line,
|
||||||
|
BarChart, Bar,
|
||||||
|
XAxis, YAxis, CartesianGrid,
|
||||||
|
Tooltip, Legend,
|
||||||
|
ResponsiveContainer,
|
||||||
|
} from 'recharts';
|
||||||
|
import { TrendingUp, ChevronDown, ChevronUp, Loader } from 'lucide-react';
|
||||||
|
|
||||||
|
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||||
|
|
||||||
|
const TEAL = '#14B8A6';
|
||||||
|
|
||||||
|
const TEAM_COLORS = {
|
||||||
|
'STEAM': '#0EA5E9',
|
||||||
|
'ACCESS-ENG': '#F59E0B',
|
||||||
|
'ACCESS-OPS': '#8B5CF6',
|
||||||
|
'INTELDEV': '#10B981',
|
||||||
|
};
|
||||||
|
|
||||||
|
const ARCHER_STATUS_COLORS = {
|
||||||
|
'Draft': '#475569',
|
||||||
|
'Open': '#0EA5E9',
|
||||||
|
'Under Review': '#F59E0B',
|
||||||
|
'Accepted': '#10B981',
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Shared style tokens
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
const AXIS_STYLE = { fontFamily: 'monospace', fontSize: '0.6rem', fill: '#475569' };
|
||||||
|
const GRID_STYLE = { stroke: 'rgba(255,255,255,0.05)', strokeDasharray: '3 3' };
|
||||||
|
const LEGEND_STYLE = { fontFamily: 'monospace', fontSize: '0.62rem', color: '#64748B' };
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Custom dark tooltip
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function DarkTooltip({ active, payload, label }) {
|
||||||
|
if (!active || !payload?.length) return null;
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
background: 'rgba(10,17,32,0.97)',
|
||||||
|
border: '1px solid rgba(20,184,166,0.3)',
|
||||||
|
borderRadius: '0.375rem',
|
||||||
|
padding: '0.5rem 0.75rem',
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
fontSize: '0.7rem',
|
||||||
|
minWidth: '130px',
|
||||||
|
}}>
|
||||||
|
<div style={{ color: TEAL, marginBottom: '0.3rem', fontWeight: '700', fontSize: '0.65rem' }}>
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
{payload.map(p => (
|
||||||
|
<div key={p.dataKey} style={{ color: p.color || '#94A3B8', marginTop: '0.125rem', display: 'flex', justifyContent: 'space-between', gap: '0.75rem' }}>
|
||||||
|
<span style={{ opacity: 0.8 }}>{p.name}</span>
|
||||||
|
<span style={{ fontWeight: '700' }}>
|
||||||
|
{typeof p.value === 'number'
|
||||||
|
? Number.isInteger(p.value) ? p.value : p.value.toFixed(1)
|
||||||
|
: p.value}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Chart card wrapper
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function ChartCard({ title, subtitle, children }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
background: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
|
||||||
|
border: '1px solid rgba(20,184,166,0.15)',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
padding: '1rem 1.125rem 0.875rem',
|
||||||
|
}}>
|
||||||
|
<div style={{ marginBottom: '0.75rem' }}>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'monospace', fontSize: '0.72rem', fontWeight: '700',
|
||||||
|
color: '#CBD5E1', textTransform: 'uppercase', letterSpacing: '0.08em',
|
||||||
|
}}>
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
{subtitle && (
|
||||||
|
<div style={{ fontSize: '0.62rem', color: '#334155', marginTop: '0.2rem', fontFamily: 'monospace' }}>
|
||||||
|
{subtitle}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Empty / no-data state
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function NoData({ msg }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
height: '160px', color: '#334155',
|
||||||
|
fontFamily: 'monospace', fontSize: '0.72rem',
|
||||||
|
border: '1px dashed rgba(20,184,166,0.1)',
|
||||||
|
borderRadius: '0.375rem',
|
||||||
|
}}>
|
||||||
|
{msg || 'No data yet — upload compliance reports to populate this chart'}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Shorten a YYYY-MM-DD string to MM/DD/YY
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function fmtDate(d) {
|
||||||
|
if (!d) return '';
|
||||||
|
const p = d.split('-');
|
||||||
|
if (p.length === 3) return `${p[1]}/${p[2]}/${p[0].slice(2)}`;
|
||||||
|
return d;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Chart 1 — Active Findings Over Time (line, total + per team)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function ActiveTrendChart({ data }) {
|
||||||
|
if (data.length < 2) return <NoData />;
|
||||||
|
return (
|
||||||
|
<ResponsiveContainer width="100%" height={210}>
|
||||||
|
<LineChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
|
||||||
|
<CartesianGrid {...GRID_STYLE} />
|
||||||
|
<XAxis dataKey="date" tick={AXIS_STYLE} />
|
||||||
|
<YAxis tick={AXIS_STYLE} allowDecimals={false} />
|
||||||
|
<Tooltip content={<DarkTooltip />} />
|
||||||
|
<Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
|
||||||
|
<Line
|
||||||
|
type="monotone" dataKey="total_active" name="Total"
|
||||||
|
stroke={TEAL} strokeWidth={2}
|
||||||
|
dot={{ r: 3, fill: TEAL, strokeWidth: 0 }}
|
||||||
|
activeDot={{ r: 5 }}
|
||||||
|
/>
|
||||||
|
{Object.entries(TEAM_COLORS).map(([team, color]) => (
|
||||||
|
<Line
|
||||||
|
key={team}
|
||||||
|
type="monotone" dataKey={team} name={team}
|
||||||
|
stroke={color} strokeWidth={1.5}
|
||||||
|
dot={false} strokeDasharray="5 3"
|
||||||
|
activeDot={{ r: 4, fill: color }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</LineChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Chart 2 — New / Recurring / Resolved per cycle (stacked + grouped bar)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function DeltaChart({ data }) {
|
||||||
|
if (data.length === 0) return <NoData />;
|
||||||
|
return (
|
||||||
|
<ResponsiveContainer width="100%" height={210}>
|
||||||
|
<BarChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
|
||||||
|
<CartesianGrid {...GRID_STYLE} />
|
||||||
|
<XAxis dataKey="date" tick={AXIS_STYLE} />
|
||||||
|
<YAxis tick={AXIS_STYLE} allowDecimals={false} />
|
||||||
|
<Tooltip content={<DarkTooltip />} />
|
||||||
|
<Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
|
||||||
|
<Bar dataKey="new_count" name="New" stackId="in" fill="#EF4444" fillOpacity={0.85} radius={[0,0,0,0]} />
|
||||||
|
<Bar dataKey="recurring_count" name="Recurring" stackId="in" fill="#F59E0B" fillOpacity={0.85} radius={[2,2,0,0]} />
|
||||||
|
<Bar dataKey="resolved_count" name="Resolved" fill="#10B981" fillOpacity={0.8} radius={[2,2,2,2]} />
|
||||||
|
</BarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Chart 3 — Team Health Multi-Line
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function TeamTrendChart({ data }) {
|
||||||
|
if (data.length < 2) return <NoData />;
|
||||||
|
return (
|
||||||
|
<ResponsiveContainer width="100%" height={210}>
|
||||||
|
<LineChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
|
||||||
|
<CartesianGrid {...GRID_STYLE} />
|
||||||
|
<XAxis dataKey="date" tick={AXIS_STYLE} />
|
||||||
|
<YAxis tick={AXIS_STYLE} allowDecimals={false} />
|
||||||
|
<Tooltip content={<DarkTooltip />} />
|
||||||
|
<Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
|
||||||
|
{Object.entries(TEAM_COLORS).map(([team, color]) => (
|
||||||
|
<Line
|
||||||
|
key={team}
|
||||||
|
type="monotone" dataKey={team} name={team}
|
||||||
|
stroke={color} strokeWidth={2}
|
||||||
|
dot={{ r: 3, fill: color, strokeWidth: 0 }}
|
||||||
|
activeDot={{ r: 5 }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</LineChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Chart 4 — MTTR by Team (horizontal bar)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function MttrChart({ data }) {
|
||||||
|
if (data.length === 0) return <NoData msg="No resolved findings yet — MTTR will appear after items are remediated" />;
|
||||||
|
return (
|
||||||
|
<ResponsiveContainer width="100%" height={Math.max(160, data.length * 44 + 40)}>
|
||||||
|
<BarChart data={data} layout="vertical" margin={{ top: 4, right: 48, bottom: 0, left: 4 }}>
|
||||||
|
<CartesianGrid {...GRID_STYLE} />
|
||||||
|
<XAxis type="number" tick={AXIS_STYLE} unit=" d" />
|
||||||
|
<YAxis type="category" dataKey="team" tick={AXIS_STYLE} width={86} />
|
||||||
|
<Tooltip content={<DarkTooltip />} />
|
||||||
|
<Bar dataKey="avg_days" name="Avg Days" fill={TEAL} fillOpacity={0.8} radius={[0, 3, 3, 0]}
|
||||||
|
label={{ position: 'right', style: { ...AXIS_STYLE, fill: '#64748B' }, formatter: v => `${v}d` }}
|
||||||
|
/>
|
||||||
|
</BarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Chart 5 — Most Persistent Findings (horizontal bar by seen_count)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function RecurringChart({ data }) {
|
||||||
|
if (data.length === 0) return <NoData />;
|
||||||
|
const top10 = data.slice(0, 10).map(r => ({
|
||||||
|
...r,
|
||||||
|
label: r.metric_id.length > 18 ? r.metric_id.slice(0, 18) + '…' : r.metric_id,
|
||||||
|
}));
|
||||||
|
return (
|
||||||
|
<ResponsiveContainer width="100%" height={Math.max(160, top10.length * 28 + 40)}>
|
||||||
|
<BarChart data={top10} layout="vertical" margin={{ top: 4, right: 48, bottom: 0, left: 4 }}>
|
||||||
|
<CartesianGrid {...GRID_STYLE} />
|
||||||
|
<XAxis type="number" tick={AXIS_STYLE} unit=" cycles" allowDecimals={false} />
|
||||||
|
<YAxis type="category" dataKey="label" tick={AXIS_STYLE} width={110} />
|
||||||
|
<Tooltip content={<DarkTooltip />} formatter={(val, name, props) => [
|
||||||
|
`${val} cycles (${props.payload.host_count} host${props.payload.host_count !== 1 ? 's' : ''})`, props.payload.team
|
||||||
|
]} />
|
||||||
|
<Bar dataKey="seen_count" name="Cycles Seen" fill="#F59E0B" fillOpacity={0.85} radius={[0, 3, 3, 0]}
|
||||||
|
label={{ position: 'right', style: { ...AXIS_STYLE, fill: '#64748B' }, formatter: v => `${v}×` }}
|
||||||
|
/>
|
||||||
|
</BarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Chart 6 — Archer Exception Ticket Pipeline (stacked bar by creation date)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function ArcherPipelineChart({ data }) {
|
||||||
|
if (data.length === 0) return <NoData msg="No Archer tickets recorded yet" />;
|
||||||
|
return (
|
||||||
|
<ResponsiveContainer width="100%" height={210}>
|
||||||
|
<BarChart data={data} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
|
||||||
|
<CartesianGrid {...GRID_STYLE} />
|
||||||
|
<XAxis dataKey="date" tick={AXIS_STYLE} />
|
||||||
|
<YAxis tick={AXIS_STYLE} allowDecimals={false} />
|
||||||
|
<Tooltip content={<DarkTooltip />} />
|
||||||
|
<Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
|
||||||
|
{Object.entries(ARCHER_STATUS_COLORS).map(([status, color], i, arr) => (
|
||||||
|
<Bar
|
||||||
|
key={status}
|
||||||
|
dataKey={status} name={status} stackId="s"
|
||||||
|
fill={color} fillOpacity={0.85}
|
||||||
|
radius={i === arr.length - 1 ? [2, 2, 0, 0] : [0, 0, 0, 0]}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</BarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Main panel
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
export default function ComplianceChartsPanel() {
|
||||||
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [trends, setTrends] = useState([]);
|
||||||
|
const [mttr, setMttr] = useState([]);
|
||||||
|
const [recurring, setRecurring] = useState([]);
|
||||||
|
const [archerRaw, setArcherRaw] = useState([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
const load = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const [tRes, mRes, rRes, aRes] = await Promise.all([
|
||||||
|
fetch(`${API_BASE}/compliance/trends`, { credentials: 'include' }),
|
||||||
|
fetch(`${API_BASE}/compliance/mttr`, { credentials: 'include' }),
|
||||||
|
fetch(`${API_BASE}/compliance/top-recurring`, { credentials: 'include' }),
|
||||||
|
fetch(`${API_BASE}/archer-tickets/status-trend`, { credentials: 'include' }),
|
||||||
|
]);
|
||||||
|
if (cancelled) return;
|
||||||
|
if (tRes.ok) { const d = await tRes.json(); setTrends(d.trends || []); }
|
||||||
|
if (mRes.ok) { const d = await mRes.json(); setMttr(d.mttr || []); }
|
||||||
|
if (rRes.ok) { const d = await rRes.json(); setRecurring(d.items || []); }
|
||||||
|
if (aRes.ok) { const d = await aRes.json(); setArcherRaw(d.statusTrend || []); }
|
||||||
|
} catch { /* silent — charts will show no-data state */ }
|
||||||
|
finally { if (!cancelled) setLoading(false); }
|
||||||
|
};
|
||||||
|
load();
|
||||||
|
return () => { cancelled = true; };
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Format trend rows — add short date label
|
||||||
|
const formattedTrends = useMemo(
|
||||||
|
() => trends.map(t => ({ ...t, date: fmtDate(t.report_date) })),
|
||||||
|
[trends]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Pivot archer raw rows → one object per date
|
||||||
|
const archerByDate = useMemo(() => {
|
||||||
|
if (!archerRaw.length) return [];
|
||||||
|
const map = {};
|
||||||
|
archerRaw.forEach(r => {
|
||||||
|
if (!map[r.date]) map[r.date] = { date: fmtDate(r.date) };
|
||||||
|
map[r.date][r.status] = r.count;
|
||||||
|
});
|
||||||
|
return Object.values(map).sort((a, b) => a.date.localeCompare(b.date));
|
||||||
|
}, [archerRaw]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ marginBottom: '1.5rem' }}>
|
||||||
|
|
||||||
|
{/* ── Section header / collapse toggle ──────────────────────── */}
|
||||||
|
<button
|
||||||
|
onClick={() => setCollapsed(c => !c)}
|
||||||
|
style={{
|
||||||
|
width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||||
|
background: 'none', border: 'none', cursor: 'pointer',
|
||||||
|
padding: '0 0 0.625rem 0',
|
||||||
|
borderBottom: collapsed ? 'none' : '1px solid rgba(20,184,166,0.1)',
|
||||||
|
marginBottom: collapsed ? 0 : '0.875rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||||
|
<TrendingUp style={{ width: '14px', height: '14px', color: TEAL }} />
|
||||||
|
<span style={{
|
||||||
|
fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '700',
|
||||||
|
color: '#334155', textTransform: 'uppercase', letterSpacing: '0.1em',
|
||||||
|
}}>
|
||||||
|
Historical Trends
|
||||||
|
</span>
|
||||||
|
{loading && (
|
||||||
|
<Loader style={{ width: '12px', height: '12px', color: '#334155', animation: 'spin 1s linear infinite' }} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{collapsed
|
||||||
|
? <ChevronDown style={{ width: '14px', height: '14px', color: '#334155' }} />
|
||||||
|
: <ChevronUp style={{ width: '14px', height: '14px', color: '#334155' }} />
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{!collapsed && (
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fit, minmax(420px, 1fr))',
|
||||||
|
gap: '1rem',
|
||||||
|
}}>
|
||||||
|
|
||||||
|
{/* 1. Active findings over time */}
|
||||||
|
<ChartCard
|
||||||
|
title="Active Findings Over Time"
|
||||||
|
subtitle="Total non-compliant items per report cycle (solid) + per team (dashed)"
|
||||||
|
>
|
||||||
|
<ActiveTrendChart data={formattedTrends} />
|
||||||
|
</ChartCard>
|
||||||
|
|
||||||
|
{/* 2. New / Recurring / Resolved delta per cycle */}
|
||||||
|
<ChartCard
|
||||||
|
title="Change per Report Cycle"
|
||||||
|
subtitle="New (red) and recurring (amber) stacked; resolved (green) as separate bars"
|
||||||
|
>
|
||||||
|
<DeltaChart data={formattedTrends} />
|
||||||
|
</ChartCard>
|
||||||
|
|
||||||
|
{/* 3. Team health multi-line */}
|
||||||
|
<ChartCard
|
||||||
|
title="Team Compliance Health"
|
||||||
|
subtitle="Active findings per team per cycle — lower is better"
|
||||||
|
>
|
||||||
|
<TeamTrendChart data={formattedTrends} />
|
||||||
|
</ChartCard>
|
||||||
|
|
||||||
|
{/* 4. MTTR per team */}
|
||||||
|
<ChartCard
|
||||||
|
title="Mean Time to Resolution"
|
||||||
|
subtitle="Average calendar days between first-seen and resolved, by team"
|
||||||
|
>
|
||||||
|
<MttrChart data={mttr} />
|
||||||
|
</ChartCard>
|
||||||
|
|
||||||
|
{/* 5. Most persistent / recurring findings */}
|
||||||
|
<ChartCard
|
||||||
|
title="Most Persistent Findings"
|
||||||
|
subtitle="Active items with the highest recurrence count (top 10)"
|
||||||
|
>
|
||||||
|
<RecurringChart data={recurring} />
|
||||||
|
</ChartCard>
|
||||||
|
|
||||||
|
{/* 6. Archer ticket pipeline */}
|
||||||
|
<ChartCard
|
||||||
|
title="Archer Exception Pipeline"
|
||||||
|
subtitle="Exception ticket status distribution by creation date"
|
||||||
|
>
|
||||||
|
<ArcherPipelineChart data={archerByDate} />
|
||||||
|
</ChartCard>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -333,7 +333,7 @@ function MetricRow({ metric, resolved, onNavigate }) {
|
|||||||
</div>
|
</div>
|
||||||
{onNavigate && (
|
{onNavigate && (
|
||||||
<button
|
<button
|
||||||
onClick={e => { e.stopPropagation(); onNavigate('reporting'); }}
|
onClick={e => { e.stopPropagation(); onNavigate('triage'); }}
|
||||||
style={{
|
style={{
|
||||||
flexShrink: 0, marginLeft: '0.5rem',
|
flexShrink: 0, marginLeft: '0.5rem',
|
||||||
background: 'rgba(14,165,233,0.1)',
|
background: 'rgba(14,165,233,0.1)',
|
||||||
@@ -348,7 +348,7 @@ function MetricRow({ metric, resolved, onNavigate }) {
|
|||||||
onMouseEnter={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.18)'; e.currentTarget.style.borderColor = 'rgba(14,165,233,0.7)'; }}
|
onMouseEnter={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.18)'; e.currentTarget.style.borderColor = 'rgba(14,165,233,0.7)'; }}
|
||||||
onMouseLeave={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.1)'; e.currentTarget.style.borderColor = 'rgba(14,165,233,0.4)'; }}
|
onMouseLeave={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.1)'; e.currentTarget.style.borderColor = 'rgba(14,165,233,0.4)'; }}
|
||||||
>
|
>
|
||||||
View in Reporting →
|
View in Triage →
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { Upload, MessageSquare, RefreshCw, AlertCircle, Loader } from 'lucide-re
|
|||||||
import { useAuth } from '../../contexts/AuthContext';
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
import ComplianceUploadModal from './ComplianceUploadModal';
|
import ComplianceUploadModal from './ComplianceUploadModal';
|
||||||
import ComplianceDetailPanel from './ComplianceDetailPanel';
|
import ComplianceDetailPanel from './ComplianceDetailPanel';
|
||||||
|
import ComplianceChartsPanel from './ComplianceChartsPanel';
|
||||||
|
|
||||||
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||||
const TEAL = '#14B8A6';
|
const TEAL = '#14B8A6';
|
||||||
@@ -323,6 +324,9 @@ export default function CompliancePage({ onNavigate }) {
|
|||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
|
{/* ── Historical trend charts ──────────────────────────────── */}
|
||||||
|
<ComplianceChartsPanel />
|
||||||
|
|
||||||
{/* ── Device table ─────────────────────────────────────────── */}
|
{/* ── Device table ─────────────────────────────────────────── */}
|
||||||
<div style={{
|
<div style={{
|
||||||
background: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
|
background: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
|
||||||
|
|||||||
207
frontend/src/components/pages/IvantiCountsChart.js
Normal file
207
frontend/src/components/pages/IvantiCountsChart.js
Normal file
@@ -0,0 +1,207 @@
|
|||||||
|
// IvantiCountsChart.js
|
||||||
|
// Collapsible trend panel for the Vulnerability Triage page.
|
||||||
|
// Shows open vs closed Ivanti finding counts over time (last sync per day).
|
||||||
|
|
||||||
|
import React, { useState, useEffect, useMemo } from 'react';
|
||||||
|
import {
|
||||||
|
LineChart, Line,
|
||||||
|
XAxis, YAxis, CartesianGrid,
|
||||||
|
Tooltip, Legend, ReferenceLine,
|
||||||
|
ResponsiveContainer,
|
||||||
|
} from 'recharts';
|
||||||
|
import { TrendingUp, ChevronDown, ChevronUp, Loader } from 'lucide-react';
|
||||||
|
|
||||||
|
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||||
|
|
||||||
|
const AMBER = '#F59E0B';
|
||||||
|
const SKY = '#0EA5E9';
|
||||||
|
const GREEN = '#10B981';
|
||||||
|
const RED = '#EF4444';
|
||||||
|
|
||||||
|
const AXIS_STYLE = { fontFamily: 'monospace', fontSize: '0.6rem', fill: '#475569' };
|
||||||
|
const GRID_STYLE = { stroke: 'rgba(255,255,255,0.05)', strokeDasharray: '3 3' };
|
||||||
|
const LEGEND_STYLE = { fontFamily: 'monospace', fontSize: '0.62rem', color: '#64748B' };
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Custom dark tooltip
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function DarkTooltip({ active, payload, label }) {
|
||||||
|
if (!active || !payload?.length) return null;
|
||||||
|
|
||||||
|
const openVal = payload.find(p => p.dataKey === 'open_count')?.value;
|
||||||
|
const closedVal = payload.find(p => p.dataKey === 'closed_count')?.value;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
background: 'rgba(10,17,32,0.97)',
|
||||||
|
border: '1px solid rgba(245,158,11,0.3)',
|
||||||
|
borderRadius: '0.375rem',
|
||||||
|
padding: '0.5rem 0.75rem',
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
fontSize: '0.7rem',
|
||||||
|
minWidth: '160px',
|
||||||
|
}}>
|
||||||
|
<div style={{ color: AMBER, marginBottom: '0.35rem', fontWeight: '700', fontSize: '0.65rem' }}>
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
{payload.map(p => (
|
||||||
|
<div key={p.dataKey} style={{ color: p.color, marginTop: '0.125rem', display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
|
||||||
|
<span style={{ opacity: 0.8 }}>{p.name}</span>
|
||||||
|
<span style={{ fontWeight: '700' }}>{p.value}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{openVal != null && closedVal != null && (
|
||||||
|
<div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', marginTop: '0.35rem', paddingTop: '0.3rem', color: '#475569', display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
|
||||||
|
<span>total</span>
|
||||||
|
<span style={{ color: '#64748B', fontWeight: '600' }}>{openVal + closedVal}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Shorten YYYY-MM-DD to MM/DD/YY
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function fmtDate(d) {
|
||||||
|
if (!d) return '';
|
||||||
|
const p = d.split('-');
|
||||||
|
if (p.length === 3) return `${p[1]}/${p[2]}/${p[0].slice(2)}`;
|
||||||
|
return d;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Main component
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
export default function IvantiCountsChart() {
|
||||||
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [history, setHistory] = useState([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
const load = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE}/ivanti/findings/counts/history`, { credentials: 'include' });
|
||||||
|
if (res.ok && !cancelled) {
|
||||||
|
const d = await res.json();
|
||||||
|
setHistory(d.history || []);
|
||||||
|
}
|
||||||
|
} catch { /* silent — chart shows no-data state */ }
|
||||||
|
finally { if (!cancelled) setLoading(false); }
|
||||||
|
};
|
||||||
|
load();
|
||||||
|
return () => { cancelled = true; };
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const chartData = useMemo(
|
||||||
|
() => history.map(r => ({ ...r, date: fmtDate(r.date) })),
|
||||||
|
[history]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Compute a simple delta label for the latest vs previous point
|
||||||
|
const deltaLabel = useMemo(() => {
|
||||||
|
if (chartData.length < 2) return null;
|
||||||
|
const latest = chartData[chartData.length - 1];
|
||||||
|
const prev = chartData[chartData.length - 2];
|
||||||
|
const delta = latest.open_count - prev.open_count;
|
||||||
|
if (delta === 0) return { text: 'no change in open', color: '#475569' };
|
||||||
|
if (delta < 0) return { text: `▼ ${Math.abs(delta)} open since ${prev.date}`, color: GREEN };
|
||||||
|
return { text: `▲ ${delta} open since ${prev.date}`, color: RED };
|
||||||
|
}, [chartData]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ marginBottom: '1.25rem' }}>
|
||||||
|
|
||||||
|
{/* ── Header ────────────────────────────────────────────────── */}
|
||||||
|
<button
|
||||||
|
onClick={() => setCollapsed(c => !c)}
|
||||||
|
style={{
|
||||||
|
width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||||
|
background: 'none', border: 'none', cursor: 'pointer',
|
||||||
|
padding: '0 0 0.625rem 0',
|
||||||
|
borderBottom: collapsed ? 'none' : '1px solid rgba(245,158,11,0.1)',
|
||||||
|
marginBottom: collapsed ? 0 : '0.875rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||||
|
<TrendingUp style={{ width: '14px', height: '14px', color: AMBER }} />
|
||||||
|
<span style={{
|
||||||
|
fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '700',
|
||||||
|
color: '#334155', textTransform: 'uppercase', letterSpacing: '0.1em',
|
||||||
|
}}>
|
||||||
|
Findings Trend
|
||||||
|
</span>
|
||||||
|
{loading && (
|
||||||
|
<Loader style={{ width: '12px', height: '12px', color: '#334155', animation: 'spin 1s linear infinite' }} />
|
||||||
|
)}
|
||||||
|
{!loading && deltaLabel && (
|
||||||
|
<span style={{ fontFamily: 'monospace', fontSize: '0.62rem', color: deltaLabel.color, marginLeft: '0.25rem' }}>
|
||||||
|
{deltaLabel.text}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{collapsed
|
||||||
|
? <ChevronDown style={{ width: '14px', height: '14px', color: '#334155' }} />
|
||||||
|
: <ChevronUp style={{ width: '14px', height: '14px', color: '#334155' }} />
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{!collapsed && (
|
||||||
|
<div style={{
|
||||||
|
background: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
|
||||||
|
border: '1px solid rgba(245,158,11,0.15)',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
padding: '1rem 1.25rem 0.875rem',
|
||||||
|
}}>
|
||||||
|
<div style={{ marginBottom: '0.625rem', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
|
||||||
|
<div style={{ fontFamily: 'monospace', fontSize: '0.65rem', color: '#334155', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
|
||||||
|
Open vs Closed — end-of-day snapshot per sync day
|
||||||
|
</div>
|
||||||
|
{chartData.length > 0 && (
|
||||||
|
<div style={{ fontFamily: 'monospace', fontSize: '0.62rem', color: '#334155' }}>
|
||||||
|
{chartData.length} day{chartData.length !== 1 ? 's' : ''} of data
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{chartData.length < 2 ? (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
height: '160px', color: '#334155',
|
||||||
|
fontFamily: 'monospace', fontSize: '0.72rem',
|
||||||
|
border: '1px dashed rgba(245,158,11,0.1)', borderRadius: '0.375rem',
|
||||||
|
}}>
|
||||||
|
{chartData.length === 0
|
||||||
|
? 'Trend data begins accumulating after the first sync — check back tomorrow'
|
||||||
|
: 'Need at least 2 days of syncs to display a trend'}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<ResponsiveContainer width="100%" height={220}>
|
||||||
|
<LineChart data={chartData} margin={{ top: 4, right: 12, bottom: 0, left: -12 }}>
|
||||||
|
<CartesianGrid {...GRID_STYLE} />
|
||||||
|
<XAxis dataKey="date" tick={AXIS_STYLE} />
|
||||||
|
<YAxis tick={AXIS_STYLE} allowDecimals={false} />
|
||||||
|
<Tooltip content={<DarkTooltip />} />
|
||||||
|
<Legend wrapperStyle={LEGEND_STYLE} iconSize={8} />
|
||||||
|
<Line
|
||||||
|
type="monotone" dataKey="open_count" name="Open"
|
||||||
|
stroke={AMBER} strokeWidth={2}
|
||||||
|
dot={{ r: 3, fill: AMBER, strokeWidth: 0 }}
|
||||||
|
activeDot={{ r: 5 }}
|
||||||
|
/>
|
||||||
|
<Line
|
||||||
|
type="monotone" dataKey="closed_count" name="Closed"
|
||||||
|
stroke={SKY} strokeWidth={2}
|
||||||
|
dot={{ r: 3, fill: SKY, strokeWidth: 0 }}
|
||||||
|
activeDot={{ r: 5 }}
|
||||||
|
/>
|
||||||
|
</LineChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,25 +1,484 @@
|
|||||||
import React from 'react';
|
// KnowledgeBasePage.js
|
||||||
import { BookOpen } from 'lucide-react';
|
// Full-page knowledge base library — browse, search, filter, and read
|
||||||
|
// articles inline. Upload and delete require editor/admin role.
|
||||||
|
// Reuses existing KnowledgeBaseViewer and KnowledgeBaseModal components.
|
||||||
|
|
||||||
|
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||||
|
import {
|
||||||
|
BookOpen, Search, Upload, RefreshCw, Loader,
|
||||||
|
AlertCircle, FileText, File, Trash2, X,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
|
import KnowledgeBaseModal from '../KnowledgeBaseModal';
|
||||||
|
import KnowledgeBaseViewer from '../KnowledgeBaseViewer';
|
||||||
|
|
||||||
|
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||||
|
const GREEN = '#10B981';
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Static config
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
const CATEGORY_COLORS = {
|
||||||
|
General: '#94A3B8',
|
||||||
|
Policy: '#0EA5E9',
|
||||||
|
Procedure: GREEN,
|
||||||
|
Guide: '#F59E0B',
|
||||||
|
Reference: '#8B5CF6',
|
||||||
|
};
|
||||||
|
|
||||||
|
const FILE_EXT_COLORS = {
|
||||||
|
pdf: '#EF4444',
|
||||||
|
md: '#10B981',
|
||||||
|
txt: '#94A3B8',
|
||||||
|
doc: '#0EA5E9',
|
||||||
|
docx: '#0EA5E9',
|
||||||
|
xls: '#10B981',
|
||||||
|
xlsx: '#10B981',
|
||||||
|
ppt: '#F97316',
|
||||||
|
pptx: '#F97316',
|
||||||
|
html: '#8B5CF6',
|
||||||
|
};
|
||||||
|
|
||||||
|
const CATEGORY_ORDER = ['Procedure', 'Guide', 'Policy', 'Reference', 'General'];
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Helpers
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function extOf(filename) {
|
||||||
|
return (filename || '').split('.').pop().toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
function extColor(filename) {
|
||||||
|
return FILE_EXT_COLORS[extOf(filename)] || '#64748B';
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtSize(bytes) {
|
||||||
|
if (!bytes) return '';
|
||||||
|
if (bytes < 1024) return `${bytes} B`;
|
||||||
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||||
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtDate(str) {
|
||||||
|
if (!str) return '';
|
||||||
|
return new Date(str).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
|
||||||
|
}
|
||||||
|
|
||||||
|
function catColor(cat) {
|
||||||
|
return CATEGORY_COLORS[cat] || '#94A3B8';
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// ArticleCard
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function ArticleCard({ article, selected, onSelect, onDelete, canDelete }) {
|
||||||
|
const color = catColor(article.category);
|
||||||
|
const fileColor = extColor(article.file_name);
|
||||||
|
const ext = extOf(article.file_name).toUpperCase();
|
||||||
|
|
||||||
export default function KnowledgeBasePage() {
|
|
||||||
return (
|
return (
|
||||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '60vh' }}>
|
<div
|
||||||
<div style={{ textAlign: 'center' }}>
|
onClick={() => onSelect(article)}
|
||||||
<div style={{
|
style={{
|
||||||
width: '72px', height: '72px', borderRadius: '1rem', margin: '0 auto 1.5rem',
|
background: selected
|
||||||
background: 'rgba(16, 185, 129, 0.1)',
|
? `linear-gradient(135deg,rgba(16,185,129,0.1) 0%,rgba(15,23,42,0.98) 100%)`
|
||||||
border: '1px solid rgba(16, 185, 129, 0.3)',
|
: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
|
||||||
display: 'flex', alignItems: 'center', justifyContent: 'center'
|
border: `1.5px solid ${selected ? GREEN : 'rgba(16,185,129,0.12)'}`,
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
padding: '1rem',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'all 0.15s',
|
||||||
|
position: 'relative',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: '0.5rem',
|
||||||
|
}}
|
||||||
|
onMouseEnter={e => { if (!selected) e.currentTarget.style.borderColor = 'rgba(16,185,129,0.35)'; }}
|
||||||
|
onMouseLeave={e => { if (!selected) e.currentTarget.style.borderColor = 'rgba(16,185,129,0.12)'; }}
|
||||||
|
>
|
||||||
|
{/* File type badge + delete button */}
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<span style={{
|
||||||
|
fontFamily: 'monospace', fontSize: '0.58rem', fontWeight: '700',
|
||||||
|
color: fileColor, padding: '0.15rem 0.4rem',
|
||||||
|
background: `${fileColor}15`, borderRadius: '0.2rem',
|
||||||
|
border: `1px solid ${fileColor}30`,
|
||||||
}}>
|
}}>
|
||||||
<BookOpen style={{ width: '36px', height: '36px', color: '#10B981' }} />
|
{ext}
|
||||||
|
</span>
|
||||||
|
{canDelete && (
|
||||||
|
<button
|
||||||
|
onClick={e => { e.stopPropagation(); onDelete(article); }}
|
||||||
|
title="Delete article"
|
||||||
|
style={{
|
||||||
|
background: 'none', border: 'none', cursor: 'pointer',
|
||||||
|
color: '#334155', padding: '0.15rem',
|
||||||
|
borderRadius: '0.2rem', display: 'flex', alignItems: 'center',
|
||||||
|
}}
|
||||||
|
onMouseEnter={e => { e.currentTarget.style.color = '#EF4444'; }}
|
||||||
|
onMouseLeave={e => { e.currentTarget.style.color = '#334155'; }}
|
||||||
|
>
|
||||||
|
<Trash2 style={{ width: '12px', height: '12px' }} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Title */}
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'monospace', fontSize: '0.82rem', fontWeight: '700',
|
||||||
|
color: selected ? GREEN : '#E2E8F0',
|
||||||
|
lineHeight: 1.3,
|
||||||
|
}}>
|
||||||
|
{article.title}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
{article.description && (
|
||||||
|
<div style={{
|
||||||
|
fontSize: '0.7rem', color: '#475569',
|
||||||
|
lineHeight: 1.45, display: '-webkit-box',
|
||||||
|
WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}>
|
||||||
|
{article.description}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Footer — category + date */}
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 'auto', paddingTop: '0.375rem', borderTop: '1px solid rgba(255,255,255,0.04)' }}>
|
||||||
|
<span style={{
|
||||||
|
fontFamily: 'monospace', fontSize: '0.6rem', fontWeight: '600',
|
||||||
|
color, padding: '0.15rem 0.4rem',
|
||||||
|
background: `${color}12`, borderRadius: '0.2rem',
|
||||||
|
border: `1px solid ${color}25`,
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.04em',
|
||||||
|
}}>
|
||||||
|
{article.category}
|
||||||
|
</span>
|
||||||
|
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
|
||||||
|
{article.file_size && (
|
||||||
|
<span style={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#334155' }}>
|
||||||
|
{fmtSize(article.file_size)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span style={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#334155' }}>
|
||||||
|
{fmtDate(article.created_at)}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<h2 style={{ fontFamily: 'monospace', fontSize: '1.5rem', fontWeight: '700', color: '#10B981', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '0.5rem' }}>
|
|
||||||
Knowledge Base
|
|
||||||
</h2>
|
|
||||||
<p style={{ color: '#475569', fontSize: '0.875rem', fontFamily: 'monospace' }}>
|
|
||||||
Under construction — coming soon
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Empty state
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function EmptyState({ hasFilter, onClear }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
gridColumn: '1 / -1',
|
||||||
|
display: 'flex', flexDirection: 'column', alignItems: 'center',
|
||||||
|
justifyContent: 'center', padding: '4rem 2rem',
|
||||||
|
border: '1px dashed rgba(16,185,129,0.15)', borderRadius: '0.5rem',
|
||||||
|
color: '#334155',
|
||||||
|
}}>
|
||||||
|
<BookOpen style={{ width: '36px', height: '36px', marginBottom: '1rem', opacity: 0.4 }} />
|
||||||
|
<div style={{ fontFamily: 'monospace', fontSize: '0.8rem', marginBottom: '0.375rem' }}>
|
||||||
|
{hasFilter ? 'No articles match your search' : 'No articles yet'}
|
||||||
|
</div>
|
||||||
|
{hasFilter ? (
|
||||||
|
<button onClick={onClear} style={{
|
||||||
|
background: 'none', border: 'none', cursor: 'pointer',
|
||||||
|
color: GREEN, fontFamily: 'monospace', fontSize: '0.72rem',
|
||||||
|
marginTop: '0.375rem',
|
||||||
|
}}>
|
||||||
|
Clear filters
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<div style={{ fontFamily: 'monospace', fontSize: '0.7rem', color: '#475569' }}>
|
||||||
|
Upload a document to get started
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Main page
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
export default function KnowledgeBasePage() {
|
||||||
|
const { canWrite } = useAuth();
|
||||||
|
|
||||||
|
const [articles, setArticles] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const [activeCategory, setActiveCategory] = useState('All');
|
||||||
|
const [selected, setSelected] = useState(null);
|
||||||
|
const [showUpload, setShowUpload] = useState(false);
|
||||||
|
|
||||||
|
// -------------------------------------------------------------------------
|
||||||
|
// Fetch
|
||||||
|
// -------------------------------------------------------------------------
|
||||||
|
const fetchArticles = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE}/knowledge-base`, { credentials: 'include' });
|
||||||
|
if (!res.ok) throw new Error('Failed to load articles');
|
||||||
|
const data = await res.json();
|
||||||
|
setArticles(data);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => { fetchArticles(); }, [fetchArticles]);
|
||||||
|
|
||||||
|
// -------------------------------------------------------------------------
|
||||||
|
// Delete
|
||||||
|
// -------------------------------------------------------------------------
|
||||||
|
const handleDelete = useCallback(async (article) => {
|
||||||
|
if (!window.confirm(`Delete "${article.title}"? This cannot be undone.`)) return;
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE}/knowledge-base/${article.id}`, {
|
||||||
|
method: 'DELETE', credentials: 'include',
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error('Delete failed');
|
||||||
|
setArticles(prev => prev.filter(a => a.id !== article.id));
|
||||||
|
if (selected?.id === article.id) setSelected(null);
|
||||||
|
} catch (err) {
|
||||||
|
alert(`Failed to delete: ${err.message}`);
|
||||||
|
}
|
||||||
|
}, [selected]);
|
||||||
|
|
||||||
|
// -------------------------------------------------------------------------
|
||||||
|
// Filtering
|
||||||
|
// -------------------------------------------------------------------------
|
||||||
|
const filtered = useMemo(() => {
|
||||||
|
const q = search.trim().toLowerCase();
|
||||||
|
return articles.filter(a => {
|
||||||
|
const matchesCat = activeCategory === 'All' || a.category === activeCategory;
|
||||||
|
const matchesSearch = !q ||
|
||||||
|
a.title.toLowerCase().includes(q) ||
|
||||||
|
(a.description || '').toLowerCase().includes(q);
|
||||||
|
return matchesCat && matchesSearch;
|
||||||
|
});
|
||||||
|
}, [articles, activeCategory, search]);
|
||||||
|
|
||||||
|
// Category tab counts (always from full list, not filtered by search)
|
||||||
|
const categoryCounts = useMemo(() => {
|
||||||
|
const counts = { All: articles.length };
|
||||||
|
CATEGORY_ORDER.forEach(cat => {
|
||||||
|
counts[cat] = articles.filter(a => a.category === cat).length;
|
||||||
|
});
|
||||||
|
return counts;
|
||||||
|
}, [articles]);
|
||||||
|
|
||||||
|
const activeTabs = ['All', ...CATEGORY_ORDER.filter(c => categoryCounts[c] > 0)];
|
||||||
|
|
||||||
|
const clearFilters = () => { setSearch(''); setActiveCategory('All'); };
|
||||||
|
|
||||||
|
const hasFilter = search.trim() !== '' || activeCategory !== 'All';
|
||||||
|
|
||||||
|
// -------------------------------------------------------------------------
|
||||||
|
// Render
|
||||||
|
// -------------------------------------------------------------------------
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', paddingBottom: '2rem' }}>
|
||||||
|
|
||||||
|
{/* ── Page header ─────────────────────────────────────────── */}
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||||
|
<div>
|
||||||
|
<h2 style={{
|
||||||
|
fontFamily: 'monospace', fontSize: '1.5rem', fontWeight: '700',
|
||||||
|
color: GREEN, textTransform: 'uppercase', letterSpacing: '0.1em',
|
||||||
|
textShadow: `0 0 16px ${GREEN}40`, marginBottom: '0.25rem',
|
||||||
|
}}>
|
||||||
|
Knowledge Base
|
||||||
|
</h2>
|
||||||
|
<div style={{ fontSize: '0.72rem', color: '#475569', fontFamily: 'monospace' }}>
|
||||||
|
{loading ? '…' : `${articles.length} article${articles.length !== 1 ? 's' : ''}`}
|
||||||
|
{articles.length > 0 && activeCategory !== 'All' && (
|
||||||
|
<span style={{ marginLeft: '0.5rem', color: '#334155' }}>
|
||||||
|
· {categoryCounts[activeCategory] || 0} in {activeCategory}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', gap: '0.5rem', flexShrink: 0 }}>
|
||||||
|
<button
|
||||||
|
onClick={fetchArticles}
|
||||||
|
title="Refresh"
|
||||||
|
style={{
|
||||||
|
background: 'none', border: `1px solid rgba(16,185,129,0.25)`,
|
||||||
|
borderRadius: '0.375rem', padding: '0.5rem', cursor: 'pointer', color: '#475569',
|
||||||
|
}}
|
||||||
|
onMouseEnter={e => { e.currentTarget.style.color = GREEN; e.currentTarget.style.borderColor = `${GREEN}60`; }}
|
||||||
|
onMouseLeave={e => { e.currentTarget.style.color = '#475569'; e.currentTarget.style.borderColor = 'rgba(16,185,129,0.25)'; }}
|
||||||
|
>
|
||||||
|
<RefreshCw style={{ width: '16px', height: '16px' }} />
|
||||||
|
</button>
|
||||||
|
{canWrite() && (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowUpload(true)}
|
||||||
|
style={{
|
||||||
|
display: 'flex', alignItems: 'center', gap: '0.4rem',
|
||||||
|
background: `${GREEN}18`, border: `1px solid ${GREEN}`,
|
||||||
|
color: GREEN, padding: '0.5rem 1rem',
|
||||||
|
fontFamily: 'monospace', fontSize: '0.75rem', fontWeight: '600',
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||||||
|
cursor: 'pointer', borderRadius: '0.375rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Upload style={{ width: '14px', height: '14px' }} />
|
||||||
|
Upload Article
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Search + category tabs ───────────────────────────────── */}
|
||||||
|
<div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
|
||||||
|
|
||||||
|
{/* Search */}
|
||||||
|
<div style={{ position: 'relative', flexShrink: 0 }}>
|
||||||
|
<Search style={{
|
||||||
|
position: 'absolute', left: '0.625rem', top: '50%', transform: 'translateY(-50%)',
|
||||||
|
width: '13px', height: '13px', color: '#334155', pointerEvents: 'none',
|
||||||
|
}} />
|
||||||
|
<input
|
||||||
|
value={search}
|
||||||
|
onChange={e => setSearch(e.target.value)}
|
||||||
|
placeholder="Search articles…"
|
||||||
|
style={{
|
||||||
|
paddingLeft: '2rem', paddingRight: search ? '2rem' : '0.625rem',
|
||||||
|
paddingTop: '0.4rem', paddingBottom: '0.4rem',
|
||||||
|
background: 'rgba(15,23,42,0.8)',
|
||||||
|
border: '1px solid rgba(16,185,129,0.2)',
|
||||||
|
borderRadius: '0.375rem', color: '#E2E8F0',
|
||||||
|
outline: 'none', fontFamily: 'monospace', fontSize: '0.75rem',
|
||||||
|
width: '220px',
|
||||||
|
}}
|
||||||
|
onFocus={e => e.target.style.borderColor = `${GREEN}60`}
|
||||||
|
onBlur={e => e.target.style.borderColor = 'rgba(16,185,129,0.2)'}
|
||||||
|
/>
|
||||||
|
{search && (
|
||||||
|
<button
|
||||||
|
onClick={() => setSearch('')}
|
||||||
|
style={{
|
||||||
|
position: 'absolute', right: '0.5rem', top: '50%', transform: 'translateY(-50%)',
|
||||||
|
background: 'none', border: 'none', cursor: 'pointer', color: '#334155', padding: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<X style={{ width: '12px', height: '12px' }} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Category tabs */}
|
||||||
|
<div style={{ display: 'flex', gap: '0.3rem', flexWrap: 'wrap' }}>
|
||||||
|
{activeTabs.map(cat => {
|
||||||
|
const isActive = activeCategory === cat;
|
||||||
|
const color = cat === 'All' ? GREEN : catColor(cat);
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={cat}
|
||||||
|
onClick={() => setActiveCategory(cat)}
|
||||||
|
style={{
|
||||||
|
padding: '0.35rem 0.75rem',
|
||||||
|
fontFamily: 'monospace', fontSize: '0.7rem', fontWeight: '600',
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||||||
|
cursor: 'pointer', borderRadius: '0.25rem',
|
||||||
|
border: isActive ? `1px solid ${color}` : '1px solid transparent',
|
||||||
|
background: isActive ? `${color}15` : 'transparent',
|
||||||
|
color: isActive ? color : '#475569',
|
||||||
|
transition: 'all 0.12s',
|
||||||
|
}}
|
||||||
|
onMouseEnter={e => { if (!isActive) { e.currentTarget.style.color = '#94A3B8'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)'; }}}
|
||||||
|
onMouseLeave={e => { if (!isActive) { e.currentTarget.style.color = '#475569'; e.currentTarget.style.borderColor = 'transparent'; }}}
|
||||||
|
>
|
||||||
|
{cat}
|
||||||
|
<span style={{ marginLeft: '0.35rem', opacity: 0.6, fontWeight: '400' }}>
|
||||||
|
{categoryCounts[cat] ?? 0}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Error state ──────────────────────────────────────────── */}
|
||||||
|
{error && (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex', alignItems: 'center', gap: '0.5rem',
|
||||||
|
padding: '0.875rem 1rem',
|
||||||
|
background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.3)',
|
||||||
|
borderRadius: '0.5rem', color: '#F87171',
|
||||||
|
fontFamily: 'monospace', fontSize: '0.78rem',
|
||||||
|
}}>
|
||||||
|
<AlertCircle style={{ width: '15px', height: '15px', flexShrink: 0 }} />
|
||||||
|
{error}
|
||||||
|
<button
|
||||||
|
onClick={fetchArticles}
|
||||||
|
style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', color: '#F87171', fontFamily: 'monospace', fontSize: '0.72rem' }}
|
||||||
|
>
|
||||||
|
Retry
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ── Loading state ────────────────────────────────────────── */}
|
||||||
|
{loading && (
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', padding: '3rem' }}>
|
||||||
|
<Loader style={{ width: '28px', height: '28px', color: GREEN, animation: 'spin 1s linear infinite' }} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ── Article grid ─────────────────────────────────────────── */}
|
||||||
|
{!loading && !error && (
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
|
||||||
|
gap: '0.875rem',
|
||||||
|
}}>
|
||||||
|
{filtered.length === 0 ? (
|
||||||
|
<EmptyState hasFilter={hasFilter} onClear={clearFilters} />
|
||||||
|
) : (
|
||||||
|
filtered.map(article => (
|
||||||
|
<ArticleCard
|
||||||
|
key={article.id}
|
||||||
|
article={article}
|
||||||
|
selected={selected?.id === article.id}
|
||||||
|
onSelect={a => setSelected(selected?.id === a.id ? null : a)}
|
||||||
|
onDelete={handleDelete}
|
||||||
|
canDelete={canWrite()}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ── Inline viewer ────────────────────────────────────────── */}
|
||||||
|
{selected && (
|
||||||
|
<div style={{ marginTop: '0.25rem' }}>
|
||||||
|
<KnowledgeBaseViewer
|
||||||
|
article={selected}
|
||||||
|
onClose={() => setSelected(null)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ── Upload modal ─────────────────────────────────────────── */}
|
||||||
|
{showUpload && (
|
||||||
|
<KnowledgeBaseModal
|
||||||
|
onClose={() => setShowUpload(false)}
|
||||||
|
onUpdate={() => { fetchArticles(); setShowUpload(false); }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
|
|||||||
import { RefreshCw, Loader, AlertCircle, PieChart, ChevronUp, ChevronDown, ChevronsUpDown, Settings2, GripVertical, Eye, EyeOff, Filter, Download, RotateCcw, Trash2, X, ListTodo } from 'lucide-react';
|
import { RefreshCw, Loader, AlertCircle, PieChart, ChevronUp, ChevronDown, ChevronsUpDown, Settings2, GripVertical, Eye, EyeOff, Filter, Download, RotateCcw, Trash2, X, ListTodo } from 'lucide-react';
|
||||||
import * as XLSX from 'xlsx';
|
import * as XLSX from 'xlsx';
|
||||||
import { useAuth } from '../../contexts/AuthContext';
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
|
import IvantiCountsChart from './IvantiCountsChart';
|
||||||
|
|
||||||
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||||
const STORAGE_KEY = 'steam_findings_columns_v2';
|
const STORAGE_KEY = 'steam_findings_columns_v2';
|
||||||
@@ -1536,7 +1537,7 @@ function QueuePanel({ open, items, onClose, onUpdate, onDelete, onDeleteMany, on
|
|||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Main ReportingPage
|
// Main ReportingPage
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
export default function ReportingPage({ filterDate, filterEXC }) {
|
export default function VulnerabilityTriagePage({ filterDate, filterEXC }) {
|
||||||
const { canWrite } = useAuth();
|
const { canWrite } = useAuth();
|
||||||
const [findings, setFindings] = useState([]);
|
const [findings, setFindings] = useState([]);
|
||||||
const [total, setTotal] = useState(null);
|
const [total, setTotal] = useState(null);
|
||||||
@@ -1965,6 +1966,11 @@ export default function ReportingPage({ filterDate, filterEXC }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* ----------------------------------------------------------------
|
||||||
|
Panel 1.5 — Open vs Closed trend over time
|
||||||
|
---------------------------------------------------------------- */}
|
||||||
|
<IvantiCountsChart />
|
||||||
|
|
||||||
{/* ----------------------------------------------------------------
|
{/* ----------------------------------------------------------------
|
||||||
Panel 2 — Findings table
|
Panel 2 — Findings table
|
||||||
---------------------------------------------------------------- */}
|
---------------------------------------------------------------- */}
|
||||||
|
|||||||
Reference in New Issue
Block a user