Compare commits
2 Commits
v1.0.0
...
feature/re
| Author | SHA1 | Date | |
|---|---|---|---|
|
27192dd69f | ||
|
|
37119b9c8a |
27
.gitignore
vendored
27
.gitignore
vendored
@@ -39,6 +39,10 @@ frontend.pid
|
|||||||
backend/uploads/temp/
|
backend/uploads/temp/
|
||||||
feature_request*.md
|
feature_request*.md
|
||||||
|
|
||||||
|
# Planning docs
|
||||||
|
docs/aeo-compliance-ui-plan.md
|
||||||
|
docs/aeo-compliance-wireframe.md
|
||||||
|
|
||||||
# AI tooling config
|
# AI tooling config
|
||||||
.claude/
|
.claude/
|
||||||
ai_notes.md
|
ai_notes.md
|
||||||
@@ -55,20 +59,13 @@ backend/setup.js-backup
|
|||||||
# Kiro agents (local only)
|
# Kiro agents (local only)
|
||||||
.kiro/agents/
|
.kiro/agents/
|
||||||
|
|
||||||
# Zip files
|
# Kiro implementation summary (internal only)
|
||||||
*.zip
|
docs/kiro-implementation-summary.md
|
||||||
|
|
||||||
# Production DB copies
|
# Diagnostic scripts (troubleshooting only)
|
||||||
cve_database_prod.db
|
backend/scripts/drift-check.js
|
||||||
cve_database.db.prod
|
backend/scripts/bu-reassignment-check.js
|
||||||
cve_database.db.backup
|
backend/scripts/export-reassigned-findings.js
|
||||||
database.db
|
|
||||||
|
|
||||||
# Operations — local admin records, UAT logs, firewall requests, data exports
|
# Investigation exports
|
||||||
docs/operations/
|
docs/reassigned-findings-*.xlsx
|
||||||
|
|
||||||
# Data exports — local spreadsheets
|
|
||||||
docs/data-exports/
|
|
||||||
|
|
||||||
# Python cache
|
|
||||||
__pycache__/
|
|
||||||
|
|||||||
@@ -1,339 +0,0 @@
|
|||||||
# Design Document: CARD API Integration
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
This design integrates the CARD Asset Ownership API into the STEAM Security Dashboard, enabling users to confirm, decline, and redirect CARD assets directly from the Ivanti Queue. The integration follows the existing architectural patterns established by the Atlas API integration (`atlasApi.js` / `atlas.js` route), adding OAuth Bearer token management with automatic caching and refresh.
|
|
||||||
|
|
||||||
The implementation is split into three layers:
|
|
||||||
1. **Helper module** (`backend/helpers/cardApi.js`) — already built and UAT-tested. Handles HTTP transport, OAuth token lifecycle, and high-level CARD API wrappers.
|
|
||||||
2. **Route module** (`backend/routes/cardApi.js`) — new Express router that proxies CARD operations, validates queue items, orchestrates the two-step update_token flow, and logs audit entries.
|
|
||||||
3. **Frontend UI** — CARD action buttons (Confirm, Decline, Redirect) on queue items, team selection dropdowns, and an asset search panel.
|
|
||||||
|
|
||||||
### Key Findings from UAT Testing
|
|
||||||
|
|
||||||
- Token endpoint is `POST /api/v1/auth/get_token` (not GET)
|
|
||||||
- Team name field in API responses is `card_team_name` or `_id`
|
|
||||||
- The `update_token` is nested at `owner.update_token` in the owner record
|
|
||||||
- The assets endpoint **requires** a `disposition` query parameter (returns 500 without it)
|
|
||||||
- The helper module and UAT test script are already built and validated
|
|
||||||
|
|
||||||
## Architecture
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
graph TD
|
|
||||||
subgraph Frontend
|
|
||||||
QP[Ivanti Queue Panel] --> AB[CARD Action Buttons]
|
|
||||||
AB --> CF[Confirm Form]
|
|
||||||
AB --> DF[Decline Form]
|
|
||||||
AB --> RF[Redirect Form]
|
|
||||||
QP --> AS[Asset Search Panel]
|
|
||||||
end
|
|
||||||
|
|
||||||
subgraph Backend
|
|
||||||
CR[cardApi Route<br>/api/card/*] --> CM[cardApi Helper]
|
|
||||||
CR --> DB[(SQLite DB<br>ivanti_todo_queue)]
|
|
||||||
CR --> AL[Audit Logger]
|
|
||||||
CM --> TM[Token Manager]
|
|
||||||
end
|
|
||||||
|
|
||||||
subgraph External
|
|
||||||
CARD[CARD API<br>card.charter.com]
|
|
||||||
end
|
|
||||||
|
|
||||||
CF --> CR
|
|
||||||
DF --> CR
|
|
||||||
RF --> CR
|
|
||||||
AS --> CR
|
|
||||||
CM --> CARD
|
|
||||||
TM --> CARD
|
|
||||||
```
|
|
||||||
|
|
||||||
### Request Flow for Mutations (Confirm/Decline/Redirect)
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
sequenceDiagram
|
|
||||||
participant UI as Frontend
|
|
||||||
participant Route as cardApi Route
|
|
||||||
participant DB as SQLite
|
|
||||||
participant Helper as cardApi Helper
|
|
||||||
participant CARD as CARD API
|
|
||||||
|
|
||||||
UI->>Route: POST /api/card/queue/:id/confirm
|
|
||||||
Route->>DB: Validate queue item (exists, user, CARD, pending)
|
|
||||||
DB-->>Route: Queue item record
|
|
||||||
Route->>Helper: getOwner(assetId)
|
|
||||||
Helper->>CARD: GET /api/v1/owner/{assetId}
|
|
||||||
CARD-->>Helper: Owner record with update_token
|
|
||||||
Helper-->>Route: { owner: { update_token: "..." } }
|
|
||||||
Route->>Helper: confirmAsset(assetId, team, token, comment)
|
|
||||||
Helper->>CARD: POST /api/v2/owner/{assetId}/confirm?update_token=...
|
|
||||||
CARD-->>Helper: Success response
|
|
||||||
Helper-->>Route: { status: 200, body: "..." }
|
|
||||||
Route->>DB: UPDATE status = 'complete'
|
|
||||||
Route->>AL: logAudit(card_confirm, ...)
|
|
||||||
Route-->>UI: { success: true, cardResponse: ... }
|
|
||||||
```
|
|
||||||
|
|
||||||
## Components and Interfaces
|
|
||||||
|
|
||||||
### 1. CARD API Helper (`backend/helpers/cardApi.js`) — Already Built
|
|
||||||
|
|
||||||
The helper module is complete and UAT-tested. It exports:
|
|
||||||
|
|
||||||
| Export | Type | Description |
|
|
||||||
|--------|------|-------------|
|
|
||||||
| `isConfigured` | `boolean` | `true` when `CARD_API_URL`, `CARD_API_USER`, `CARD_API_PASS` are all set |
|
|
||||||
| `missingVars` | `string[]` | List of missing env var names |
|
|
||||||
| `cardGet(urlPath, options)` | `function` | GET request with Bearer auth, returns `{ status, body }` |
|
|
||||||
| `cardPost(urlPath, body, options)` | `function` | POST request with Bearer auth, returns `{ status, body }` |
|
|
||||||
| `getTeams()` | `function` | `GET /api/v1/teams` — returns `{ status, body, ok }` |
|
|
||||||
| `getTeamAssets(teamName, opts)` | `function` | `GET /api/v1/team/{name}/assets` with disposition, page, pageSize |
|
|
||||||
| `getOwner(assetId)` | `function` | `GET /api/v1/owner/{assetId}` — returns owner record with `update_token` |
|
|
||||||
| `confirmAsset(assetId, team, token, comment)` | `function` | `POST /api/v2/owner/{id}/confirm` |
|
|
||||||
| `declineAsset(assetId, team, token, comment)` | `function` | `POST /api/v2/owner/{id}/decline` |
|
|
||||||
| `redirectAsset(assetId, from, to, token)` | `function` | `POST /api/v2/owner/{id}/{from}/redirect` |
|
|
||||||
| `invalidateToken()` | `function` | Clears cached Bearer token |
|
|
||||||
| `testConnection()` | `function` | Acquires token and returns `{ ok, token }` or `{ ok, error }` |
|
|
||||||
|
|
||||||
**Token Manager** (internal to helper):
|
|
||||||
- Acquires tokens via `POST /api/v1/auth/get_token` with Basic Auth
|
|
||||||
- Caches in memory with 1-hour TTL, refreshes when within 60s of expiry
|
|
||||||
- Automatically retries once on HTTP 401 (invalidate → re-acquire → retry)
|
|
||||||
|
|
||||||
### 2. CARD API Route (`backend/routes/cardApi.js`) — New
|
|
||||||
|
|
||||||
Factory function: `createCardApiRouter(db, requireAuth)` → Express Router
|
|
||||||
|
|
||||||
**Endpoints:**
|
|
||||||
|
|
||||||
| Method | Path | Description |
|
|
||||||
|--------|------|-------------|
|
|
||||||
| GET | `/api/card/status` | Returns `{ configured: boolean }` |
|
|
||||||
| GET | `/api/card/teams` | Proxies CARD teams list |
|
|
||||||
| GET | `/api/card/teams/:teamName/assets` | Proxies team assets with `disposition` (required), `page`, `page_size` (default 50) |
|
|
||||||
| GET | `/api/card/owner/:assetId` | Proxies owner record lookup |
|
|
||||||
| POST | `/api/card/queue/:queueItemId/confirm` | Confirm asset — body: `{ teamName, assetId, comment? }` |
|
|
||||||
| POST | `/api/card/queue/:queueItemId/decline` | Decline asset — body: `{ teamName, assetId, comment? }` |
|
|
||||||
| POST | `/api/card/queue/:queueItemId/redirect` | Redirect asset — body: `{ fromTeam, toTeam, assetId }` |
|
|
||||||
|
|
||||||
**Middleware:** All endpoints use `requireAuth(db)` + `requireGroup('Admin', 'Standard_User')`.
|
|
||||||
|
|
||||||
**Mutation flow** (confirm/decline/redirect):
|
|
||||||
1. Validate queue item: exists, belongs to `req.user.id`, `workflow_type = 'CARD'`, `status = 'pending'`
|
|
||||||
2. Fetch owner record via `getOwner(assetId)` to get fresh `update_token`
|
|
||||||
3. Extract `update_token` from `owner.update_token` (nested path)
|
|
||||||
4. Execute CARD mutation with the `update_token`
|
|
||||||
5. On success: update queue item `status = 'complete'`, log audit, return response
|
|
||||||
6. On failure: leave queue item as `pending`, log audit failure, return error
|
|
||||||
|
|
||||||
### 3. Frontend Components
|
|
||||||
|
|
||||||
**Modified:** Ivanti Queue panel in the existing queue UI
|
|
||||||
|
|
||||||
**New UI elements:**
|
|
||||||
- **CARD Action Buttons**: Confirm, Decline, Redirect buttons rendered on pending CARD queue items
|
|
||||||
- **Confirm/Decline Form**: Team dropdown (from `/api/card/teams`) + optional comment field
|
|
||||||
- **Redirect Form**: From Team dropdown + To Team dropdown
|
|
||||||
- **Asset Search Panel**: Team dropdown + disposition filter + paginated results table
|
|
||||||
- **Loading/Error States**: Inline loading indicators and error messages per queue item
|
|
||||||
|
|
||||||
**Session-level caching:** Teams list fetched once per browser session and reused across all forms.
|
|
||||||
|
|
||||||
### 4. Server Integration (`backend/server.js`)
|
|
||||||
|
|
||||||
Mount the new route:
|
|
||||||
```javascript
|
|
||||||
const createCardApiRouter = require('./routes/cardApi');
|
|
||||||
// ...
|
|
||||||
app.use('/api/card', createCardApiRouter(db, requireAuth));
|
|
||||||
```
|
|
||||||
|
|
||||||
## Data Models
|
|
||||||
|
|
||||||
### Existing: `ivanti_todo_queue` Table
|
|
||||||
|
|
||||||
No schema changes required. CARD items use `workflow_type = 'CARD'`.
|
|
||||||
|
|
||||||
| Column | Type | Notes |
|
|
||||||
|--------|------|-------|
|
|
||||||
| `id` | INTEGER | Primary key |
|
|
||||||
| `user_id` | INTEGER | FK to users |
|
|
||||||
| `finding_id` | TEXT | Ivanti finding identifier |
|
|
||||||
| `finding_title` | TEXT | Finding description |
|
|
||||||
| `cves_json` | TEXT | JSON array of CVE IDs |
|
|
||||||
| `ip_address` | TEXT | Asset IP address (used as CARD Asset_ID with suffix) |
|
|
||||||
| `hostname` | TEXT | Asset hostname |
|
|
||||||
| `vendor` | TEXT | Empty string for CARD items |
|
|
||||||
| `workflow_type` | TEXT | `'CARD'` for this integration |
|
|
||||||
| `status` | TEXT | `'pending'` or `'complete'` |
|
|
||||||
| `created_at` | DATETIME | Auto-set |
|
|
||||||
| `updated_at` | DATETIME | Auto-updated |
|
|
||||||
|
|
||||||
### CARD API Response Shapes (from UAT testing)
|
|
||||||
|
|
||||||
**Teams response** (`GET /api/v1/teams`):
|
|
||||||
```json
|
|
||||||
[
|
|
||||||
{ "_id": "NTS-AEO-STEAM", "card_team_name": "NTS-AEO-STEAM", ... },
|
|
||||||
{ "_id": "NTS-ACCESS-ENG", "card_team_name": "NTS-ACCESS-ENG", ... }
|
|
||||||
]
|
|
||||||
```
|
|
||||||
Team name extraction: `t.card_team_name || t._id`
|
|
||||||
|
|
||||||
**Owner record** (`GET /api/v1/owner/{assetId}`):
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"owner": {
|
|
||||||
"update_token": "abc123...",
|
|
||||||
"dispositions": [
|
|
||||||
{ "team": "NTS-AEO-STEAM", "disposition": "confirmed", ... }
|
|
||||||
],
|
|
||||||
...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
Update token path: `response.owner.update_token`
|
|
||||||
|
|
||||||
**Team assets** (`GET /api/v1/team/{name}/assets?disposition=confirmed&page_size=50`):
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"assets": [ { "asset_id": "98.8.142.56-NATL", ... } ],
|
|
||||||
"total": 150,
|
|
||||||
"page": 1,
|
|
||||||
"page_size": 50
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Audit Log Entries
|
|
||||||
|
|
||||||
| Action | entityType | entityId | Details |
|
|
||||||
|--------|-----------|----------|---------|
|
|
||||||
| `card_confirm` | `ivanti_todo_queue` | queue item ID | `{ assetId, teamName, comment, cardStatus }` |
|
|
||||||
| `card_decline` | `ivanti_todo_queue` | queue item ID | `{ assetId, teamName, comment, cardStatus }` |
|
|
||||||
| `card_redirect` | `ivanti_todo_queue` | queue item ID | `{ assetId, fromTeam, toTeam, cardStatus }` |
|
|
||||||
| `card_search` | `card_asset` | team name | `{ disposition, resultCount }` |
|
|
||||||
| `card_action_failed` | `ivanti_todo_queue` | queue item ID | `{ actionType, assetId, error, cardStatus }` |
|
|
||||||
|
|
||||||
## Correctness Properties
|
|
||||||
|
|
||||||
*A property is a characteristic or behavior that should hold true across all valid executions of a system — essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
|
|
||||||
|
|
||||||
### Property 1: isConfigured reflects environment variable presence
|
|
||||||
|
|
||||||
*For any* combination of the three required environment variables (`CARD_API_URL`, `CARD_API_USER`, `CARD_API_PASS`) being present/non-empty or absent/empty, `isConfigured` SHALL be `true` if and only if all three are present and non-empty.
|
|
||||||
|
|
||||||
**Validates: Requirements 1.1, 3.3**
|
|
||||||
|
|
||||||
### Property 2: All CARD API responses have consistent shape
|
|
||||||
|
|
||||||
*For any* successful CARD API call (any HTTP method and URL path), the resolved Promise SHALL contain an object with a numeric `status` field and a string `body` field.
|
|
||||||
|
|
||||||
**Validates: Requirements 1.7**
|
|
||||||
|
|
||||||
### Property 3: Token acquisition errors include status and body
|
|
||||||
|
|
||||||
*For any* non-success HTTP status code and response body returned by the token acquisition endpoint, the rejected Promise error message SHALL include both the HTTP status code and the response body text.
|
|
||||||
|
|
||||||
**Validates: Requirements 2.7**
|
|
||||||
|
|
||||||
### Property 4: CARD API error status codes are forwarded through proxy
|
|
||||||
|
|
||||||
*For any* HTTP error status code (4xx or 5xx) returned by the CARD API on a proxied request, the route SHALL return that same status code to the client along with a JSON error body containing the upstream error message.
|
|
||||||
|
|
||||||
**Validates: Requirements 4.9**
|
|
||||||
|
|
||||||
### Property 5: Queue item validation rejects invalid states for mutations
|
|
||||||
|
|
||||||
*For any* CARD mutation request (confirm, decline, or redirect), if the referenced queue item does not exist, does not belong to the requesting user, has `workflow_type` other than `'CARD'`, or has `status` other than `'pending'`, the endpoint SHALL reject the request with the appropriate HTTP error code (404 or 400) without calling the CARD API.
|
|
||||||
|
|
||||||
**Validates: Requirements 5.4, 5.5, 5.6**
|
|
||||||
|
|
||||||
### Property 6: Mutation input validation enforces required fields
|
|
||||||
|
|
||||||
*For any* CARD mutation request, the endpoint SHALL reject with HTTP 400 if any required field is missing or empty: `teamName` and `assetId` for confirm/decline; `fromTeam`, `toTeam`, and `assetId` for redirect. Optional fields (e.g., `comment`) SHALL be accepted when absent.
|
|
||||||
|
|
||||||
**Validates: Requirements 5.11, 5.12, 5.13**
|
|
||||||
|
|
||||||
### Property 7: CARD mutation audit entries contain required fields
|
|
||||||
|
|
||||||
*For any* CARD mutation action (confirm, decline, or redirect) executed through the dashboard, the audit log entry SHALL contain the correct `action` name (`card_confirm`, `card_decline`, or `card_redirect`), `entityType` of `'ivanti_todo_queue'`, the queue item ID as `entityId`, the requesting user's `userId`, `username`, and `ipAddress`, and a `details` object containing the `assetId` and CARD API response status.
|
|
||||||
|
|
||||||
**Validates: Requirements 9.1, 9.2, 9.3, 9.6**
|
|
||||||
|
|
||||||
## Error Handling
|
|
||||||
|
|
||||||
### CARD Helper Error Handling
|
|
||||||
|
|
||||||
| Scenario | Behavior |
|
|
||||||
|----------|----------|
|
|
||||||
| CARD API unreachable / timeout | Reject with `[card-api] {METHOD} {path} failed: {reason}` |
|
|
||||||
| Token endpoint returns non-2xx | Reject with `[card-api] Token acquisition failed with HTTP {status}: {body}` |
|
|
||||||
| Token endpoint returns unparseable JSON | Fall back to raw body as token string; reject if empty |
|
|
||||||
| Token endpoint returns empty token | Reject with `[card-api] Token parse failure: empty token in response body.` |
|
|
||||||
| Non-auth request returns 401 | Invalidate token, re-acquire, retry once. If retry also 401, return the 401 |
|
|
||||||
|
|
||||||
### Route Error Handling
|
|
||||||
|
|
||||||
| CARD API Status | Route Response | Error Message |
|
|
||||||
|----------------|----------------|---------------|
|
|
||||||
| 401 (token endpoint) | 401 | `CARD authorization failed. Check service account credentials.` |
|
|
||||||
| 403 (token endpoint) | 403 | `CARD access denied. The service account may not be onboarded with the CARD team.` |
|
|
||||||
| 525 (token endpoint) | 502 | `CARD LDAP error. The service account may not be provisioned correctly.` |
|
|
||||||
| 401 (API call, after retry) | 401 | `CARD token expired or invalid. The request has been retried once automatically.` |
|
|
||||||
| 403 (API call) | 403 | `Insufficient CARD permissions for this operation.` |
|
|
||||||
| Any unhandled error | 502 | `CARD API request failed.` + details |
|
|
||||||
| Not configured | 503 | `CARD API is not configured.` + missing vars |
|
|
||||||
|
|
||||||
All errors are logged to console with `[card-api]` prefix for consistent log filtering.
|
|
||||||
|
|
||||||
### Frontend Error Handling
|
|
||||||
|
|
||||||
- Inline error messages on the affected queue item (no modal popups)
|
|
||||||
- Loading state disables action buttons to prevent double-submission
|
|
||||||
- Network errors display a generic "Unable to reach server" message
|
|
||||||
- CARD-specific errors display the backend error message verbatim
|
|
||||||
|
|
||||||
## Testing Strategy
|
|
||||||
|
|
||||||
### Property-Based Tests (fast-check)
|
|
||||||
|
|
||||||
The project uses Jest as the test runner. Property-based tests will use [fast-check](https://github.com/dubzzz/fast-check) with a minimum of 100 iterations per property.
|
|
||||||
|
|
||||||
Each property test references its design document property:
|
|
||||||
|
|
||||||
| Property | Test File | What It Validates |
|
|
||||||
|----------|-----------|-------------------|
|
|
||||||
| Property 1: isConfigured | `backend/__tests__/card-isConfigured.property.test.js` | Env var combinations → isConfigured correctness |
|
|
||||||
| Property 2: Response shape | `backend/__tests__/card-response-shape.property.test.js` | All API responses have { status, body } |
|
|
||||||
| Property 3: Token error messages | `backend/__tests__/card-token-errors.property.test.js` | Error messages include status + body |
|
|
||||||
| Property 4: Error forwarding | `backend/__tests__/card-error-forwarding.property.test.js` | Proxy forwards CARD error status codes |
|
|
||||||
| Property 5: Queue validation | `backend/__tests__/card-queue-validation.property.test.js` | Invalid queue states rejected correctly |
|
|
||||||
| Property 6: Input validation | `backend/__tests__/card-input-validation.property.test.js` | Required fields enforced on mutations |
|
|
||||||
| Property 7: Audit entries | `backend/__tests__/card-audit-entries.property.test.js` | Mutation audit logs have correct shape |
|
|
||||||
|
|
||||||
Tag format: `Feature: card-api-integration, Property {N}: {title}`
|
|
||||||
|
|
||||||
### Unit Tests (example-based)
|
|
||||||
|
|
||||||
- Token acquisition flow (mock HTTP, verify Basic Auth header)
|
|
||||||
- Token caching and refresh timing
|
|
||||||
- 401 retry logic (mock 401 → 200 sequence)
|
|
||||||
- Two-step update_token flow (getOwner → mutation)
|
|
||||||
- Specific CARD API endpoint URL construction
|
|
||||||
- Default page_size=50 on assets endpoint
|
|
||||||
- TLS skip configuration
|
|
||||||
|
|
||||||
### Integration Tests
|
|
||||||
|
|
||||||
- Route mounting at `/api/card` prefix
|
|
||||||
- Auth middleware enforcement (401 without session)
|
|
||||||
- End-to-end confirm/decline/redirect with mocked CARD API
|
|
||||||
- Asset search with pagination
|
|
||||||
|
|
||||||
### Frontend Tests
|
|
||||||
|
|
||||||
- CARD action buttons render only on pending CARD items
|
|
||||||
- Form submission sends correct request body
|
|
||||||
- Loading state disables buttons
|
|
||||||
- Error messages display inline
|
|
||||||
- Teams list caching (single fetch per session)
|
|
||||||
@@ -1,165 +0,0 @@
|
|||||||
# Implementation Plan: CARD API Integration
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
This plan covers the remaining implementation work for the CARD API integration into the STEAM Security Dashboard. The CARD API helper module (`backend/helpers/cardApi.js`), environment variable configuration, and UAT test script are already built and validated. The remaining work focuses on the backend route module, server mounting, frontend CARD action UI, asset search panel, and property-based tests.
|
|
||||||
|
|
||||||
## Tasks
|
|
||||||
|
|
||||||
- [x] 1. CARD API Helper Module (Already Complete)
|
|
||||||
- `backend/helpers/cardApi.js` is built and UAT-tested with all exports: `isConfigured`, `cardGet`, `cardPost`, `getTeams`, `getTeamAssets`, `getOwner`, `confirmAsset`, `declineAsset`, `redirectAsset`, `invalidateToken`, `testConnection`
|
|
||||||
- Token Manager handles OAuth Bearer token acquisition, 1-hour TTL caching, 60s refresh window, and automatic 401 retry
|
|
||||||
- _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7_
|
|
||||||
|
|
||||||
- [x] 2. Environment Variable Configuration (Already Complete)
|
|
||||||
- `backend/.env` and `backend/.env.example` have `CARD_API_URL`, `CARD_API_USER`, `CARD_API_PASS`, `CARD_SKIP_TLS` configured with descriptive comments
|
|
||||||
- _Requirements: 3.1, 3.2, 3.3, 3.4_
|
|
||||||
|
|
||||||
- [x] 3. UAT Test Script (Already Complete)
|
|
||||||
- `backend/scripts/card-uat-test.js` exercises all 9 CARD API use cases and passes
|
|
||||||
- _Requirements: 1.1, 1.7, 2.1, 2.3, 2.6_
|
|
||||||
|
|
||||||
- [x] 4. Backend CARD API Route Module
|
|
||||||
- [x] 4.1 Create `backend/routes/cardApi.js` with factory function `createCardApiRouter(db, requireAuth)`
|
|
||||||
- Follow the existing `atlas.js` route pattern: import `requireGroup` from middleware, import `logAudit` from helpers, import CARD helper functions from `helpers/cardApi.js`
|
|
||||||
- Add promise-based DB helpers (`dbRun`, `dbGet`) matching the atlas.js pattern
|
|
||||||
- Protect all endpoints with `requireAuth(db)` and `requireGroup('Admin', 'Standard_User')`
|
|
||||||
- _Requirements: 4.1, 4.2_
|
|
||||||
|
|
||||||
- [x] 4.2 Implement read-only proxy endpoints
|
|
||||||
- `GET /status` — return `{ configured: isConfigured }`; if not configured, return 503 with missing vars
|
|
||||||
- `GET /teams` — proxy `getTeams()`, parse JSON response, forward to client
|
|
||||||
- `GET /teams/:teamName/assets` — proxy `getTeamAssets()` with `disposition` (required), `page`, `page_size` (default 50) query params
|
|
||||||
- `GET /owner/:assetId` — proxy `getOwner()`, return owner record
|
|
||||||
- All proxy endpoints: return 503 if not configured, forward CARD API error status codes with JSON error body
|
|
||||||
- _Requirements: 4.3, 4.4, 4.5, 4.6, 4.7, 4.8, 4.9_
|
|
||||||
|
|
||||||
- [x] 4.3 Implement mutation endpoints (confirm, decline, redirect) with two-step update_token flow
|
|
||||||
- `POST /queue/:queueItemId/confirm` — body: `{ teamName, assetId, comment? }`
|
|
||||||
- `POST /queue/:queueItemId/decline` — body: `{ teamName, assetId, comment? }`
|
|
||||||
- `POST /queue/:queueItemId/redirect` — body: `{ fromTeam, toTeam, assetId }`
|
|
||||||
- Validate queue item: exists, belongs to `req.user.id`, `workflow_type = 'CARD'`, `status = 'pending'`; return 404 if not found/wrong user/wrong type, 400 if not pending
|
|
||||||
- Validate required fields: `teamName` + `assetId` for confirm/decline; `fromTeam` + `toTeam` + `assetId` for redirect; return 400 if missing
|
|
||||||
- Two-step flow: call `getOwner(assetId)` → extract `update_token` from `owner.update_token` → call mutation with token
|
|
||||||
- On success: update queue item `status = 'complete'`, return `{ success: true, cardResponse }`
|
|
||||||
- On failure: leave queue item as `pending`, return error
|
|
||||||
- _Requirements: 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7, 5.8, 5.9, 5.10, 5.11, 5.12, 5.13, 5.14, 5.15_
|
|
||||||
|
|
||||||
- [x] 4.4 Implement error handling for CARD API responses
|
|
||||||
- Map token endpoint errors: 401 → 401 auth failed, 403 → 403 access denied, 525 → 502 LDAP error
|
|
||||||
- Map API call errors: 401 after retry → 401 token expired, 403 → 403 insufficient permissions
|
|
||||||
- Catch unhandled errors → 502 with `{ error: 'CARD API request failed.', details }`
|
|
||||||
- Log all errors with `[card-api]` prefix via `console.error`
|
|
||||||
- _Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 8.6, 8.7, 8.8, 8.9, 8.10_
|
|
||||||
|
|
||||||
- [x] 4.5 Implement audit logging for all CARD actions
|
|
||||||
- `card_confirm`: entityType `ivanti_todo_queue`, entityId = queue item ID, details = `{ assetId, teamName, comment, cardStatus }`
|
|
||||||
- `card_decline`: same pattern with decline details
|
|
||||||
- `card_redirect`: details = `{ assetId, fromTeam, toTeam, cardStatus }`
|
|
||||||
- `card_search`: entityType `card_asset`, entityId = team name, details = `{ disposition, resultCount }`
|
|
||||||
- `card_action_failed`: details = `{ actionType, assetId, error, cardStatus }`
|
|
||||||
- All entries include `userId`, `username`, `ipAddress`; use fire-and-forget semantics
|
|
||||||
- _Requirements: 9.1, 9.2, 9.3, 9.4, 9.5, 9.6, 9.7_
|
|
||||||
|
|
||||||
- [x] 5. Mount CARD route in server.js
|
|
||||||
- [x] 5.1 Add `const createCardApiRouter = require('./routes/cardApi');` import to server.js alongside existing route imports
|
|
||||||
- Mount with `app.use('/api/card', createCardApiRouter(db, requireAuth));` after the Atlas route mount
|
|
||||||
- _Requirements: 4.10_
|
|
||||||
|
|
||||||
- [x] 6. Checkpoint — Backend route verification
|
|
||||||
- Ensure all tests pass, ask the user if questions arise.
|
|
||||||
|
|
||||||
- [x] 7. Frontend CARD Action UI
|
|
||||||
- [x] 7.1 Add CARD teams fetch and session-level caching to ReportingPage
|
|
||||||
- Fetch `/api/card/status` on mount to check if CARD is configured
|
|
||||||
- Fetch `/api/card/teams` once per session and cache in component state
|
|
||||||
- Pass `cardConfigured`, `cardTeams` props down to `QueuePanel`
|
|
||||||
- _Requirements: 6.8, 6.9_
|
|
||||||
|
|
||||||
- [x] 7.2 Add CARD action buttons (Confirm, Decline, Redirect) to queue items in QueuePanel
|
|
||||||
- Render three action buttons on pending CARD queue items (`workflow_type === 'CARD'` and `status === 'pending'`)
|
|
||||||
- Disable buttons when CARD is not configured; show tooltip "CARD integration not configured"
|
|
||||||
- Style buttons to match existing queue item action patterns (compact, inline)
|
|
||||||
- _Requirements: 6.1, 6.8_
|
|
||||||
|
|
||||||
- [x] 7.3 Implement Confirm and Decline action forms
|
|
||||||
- On Confirm/Decline button click: show inline form with team selection dropdown (populated from cached teams list) and optional comment text field
|
|
||||||
- On form submit: POST to `/api/card/queue/:queueItemId/confirm` or `/decline` with `{ teamName, assetId: item.ip_address, comment }`
|
|
||||||
- While request is in flight: disable action buttons, show loading indicator on the queue item
|
|
||||||
- On success: update queue item status to `complete` in local state without full refresh
|
|
||||||
- On failure: display backend error message inline on the affected queue item
|
|
||||||
- _Requirements: 6.2, 6.3, 6.5, 6.6, 6.7_
|
|
||||||
|
|
||||||
- [x] 7.4 Implement Redirect action form
|
|
||||||
- On Redirect button click: show inline form with "From Team" dropdown and "To Team" dropdown (both from cached teams list)
|
|
||||||
- On form submit: POST to `/api/card/queue/:queueItemId/redirect` with `{ fromTeam, toTeam, assetId: item.ip_address }`
|
|
||||||
- Same loading/success/error handling as confirm/decline
|
|
||||||
- _Requirements: 6.4, 6.5, 6.6, 6.7_
|
|
||||||
|
|
||||||
- [x] 8. Frontend Asset Search Panel
|
|
||||||
- [x] 8.1 Create asset search interface accessible from the Ivanti Queue page
|
|
||||||
- Add a "CARD Asset Search" button/section in the queue panel or as a collapsible panel
|
|
||||||
- Include team selection dropdown (from cached teams) and disposition filter dropdown (`confirmed`, `unconfirmed`, `declined`, `candidate`)
|
|
||||||
- On search: GET `/api/card/teams/:teamName/assets?disposition=X&page_size=50`
|
|
||||||
- Display total asset count and results table with Asset_ID and identifying fields
|
|
||||||
- Add pagination controls when total exceeds page size (increment `page` param)
|
|
||||||
- Display error messages inline in the search results area on failure
|
|
||||||
- _Requirements: 7.1, 7.2, 7.3, 7.4, 7.5, 7.6, 7.7_
|
|
||||||
|
|
||||||
- [x] 9. Checkpoint — Full integration verification
|
|
||||||
- Ensure all tests pass, ask the user if questions arise.
|
|
||||||
|
|
||||||
- [ ] 10. Property-based tests for CARD API correctness properties
|
|
||||||
- [ ]* 10.1 Write property test for isConfigured environment variable logic
|
|
||||||
- **Property 1: isConfigured reflects environment variable presence**
|
|
||||||
- For any combination of the three required env vars being present/non-empty or absent/empty, `isConfigured` is `true` iff all three are present and non-empty
|
|
||||||
- Create `backend/__tests__/card-isConfigured.property.test.js` using Jest + fast-check with 100+ iterations
|
|
||||||
- **Validates: Requirements 1.1, 3.3**
|
|
||||||
|
|
||||||
- [ ]* 10.2 Write property test for CARD API response shape consistency
|
|
||||||
- **Property 2: All CARD API responses have consistent shape**
|
|
||||||
- For any successful CARD API call, the resolved Promise contains `{ status: number, body: string }`
|
|
||||||
- Create `backend/__tests__/card-response-shape.property.test.js`
|
|
||||||
- **Validates: Requirements 1.7**
|
|
||||||
|
|
||||||
- [ ]* 10.3 Write property test for token acquisition error messages
|
|
||||||
- **Property 3: Token acquisition errors include status and body**
|
|
||||||
- For any non-success HTTP status and response body from the token endpoint, the rejected error message includes both the status code and body text
|
|
||||||
- Create `backend/__tests__/card-token-errors.property.test.js`
|
|
||||||
- **Validates: Requirements 2.7**
|
|
||||||
|
|
||||||
- [ ]* 10.4 Write property test for CARD API error status code forwarding
|
|
||||||
- **Property 4: CARD API error status codes are forwarded through proxy**
|
|
||||||
- For any 4xx/5xx status from CARD API on a proxied request, the route returns that same status code with a JSON error body
|
|
||||||
- Create `backend/__tests__/card-error-forwarding.property.test.js`
|
|
||||||
- **Validates: Requirements 4.9**
|
|
||||||
|
|
||||||
- [ ]* 10.5 Write property test for queue item validation on mutations
|
|
||||||
- **Property 5: Queue item validation rejects invalid states for mutations**
|
|
||||||
- For any mutation request where the queue item doesn't exist, wrong user, wrong workflow_type, or wrong status, the endpoint rejects with 404 or 400 without calling CARD API
|
|
||||||
- Create `backend/__tests__/card-queue-validation.property.test.js`
|
|
||||||
- **Validates: Requirements 5.4, 5.5, 5.6**
|
|
||||||
|
|
||||||
- [ ]* 10.6 Write property test for mutation input validation
|
|
||||||
- **Property 6: Mutation input validation enforces required fields**
|
|
||||||
- For any mutation request missing required fields (teamName/assetId for confirm/decline; fromTeam/toTeam/assetId for redirect), the endpoint rejects with 400
|
|
||||||
- Create `backend/__tests__/card-input-validation.property.test.js`
|
|
||||||
- **Validates: Requirements 5.11, 5.12, 5.13**
|
|
||||||
|
|
||||||
- [ ]* 10.7 Write property test for CARD mutation audit log entries
|
|
||||||
- **Property 7: CARD mutation audit entries contain required fields**
|
|
||||||
- For any mutation action, the audit log entry contains correct `action` name, `entityType`, `entityId`, `userId`, `username`, `ipAddress`, and `details` with `assetId` and CARD response status
|
|
||||||
- Create `backend/__tests__/card-audit-entries.property.test.js`
|
|
||||||
- **Validates: Requirements 9.1, 9.2, 9.3, 9.6**
|
|
||||||
|
|
||||||
- [x] 11. Final checkpoint — Ensure all tests pass
|
|
||||||
- Ensure all tests pass, ask the user if questions arise.
|
|
||||||
|
|
||||||
## Notes
|
|
||||||
|
|
||||||
- Tasks 1–3 are marked complete because `backend/helpers/cardApi.js`, `.env`/`.env.example`, and `backend/scripts/card-uat-test.js` are already built and UAT-tested
|
|
||||||
- Tasks marked with `*` are optional property-based tests and can be skipped for faster MVP
|
|
||||||
- Each task references specific requirements for traceability
|
|
||||||
- The backend route module (Task 4) follows the existing `atlas.js` route pattern exactly
|
|
||||||
- The frontend UI (Tasks 7–8) extends the existing `QueuePanel` in `ReportingPage.js`
|
|
||||||
- Property tests use Jest + fast-check matching the existing test pattern in `backend/__tests__/`
|
|
||||||
1
.kiro/specs/dashboard-redesign/.config.kiro
Normal file
1
.kiro/specs/dashboard-redesign/.config.kiro
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"specId": "ab9fb651-cc74-49e1-abdf-024a9b090e6f", "workflowType": "requirements-first", "specType": "feature"}
|
||||||
199
.kiro/specs/dashboard-redesign/design.md
Normal file
199
.kiro/specs/dashboard-redesign/design.md
Normal file
@@ -0,0 +1,199 @@
|
|||||||
|
# Design Document: Dashboard Redesign
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
This design covers the comprehensive visual redesign of the STEAM Security Dashboard frontend. The redesign applies a refined design system extracted to `docs/design-system-redesign/` — evolving the existing dark tactical console aesthetic with an expanded token system, updated typography, refined card surfaces, enhanced severity badges, new layout tokens, proper font loading, a new brand mark, and refined animations.
|
||||||
|
|
||||||
|
The redesign is **purely presentational**. All existing behavior, routes, state management, and API calls are preserved. Only JSX style props, inline style objects, CSS custom properties, CSS classes, and the HTML font-loading link change.
|
||||||
|
|
||||||
|
### Design Decisions
|
||||||
|
|
||||||
|
1. **Token-first migration**: All new design tokens are added to `App.css` `:root` alongside existing tokens. Old token names are preserved so unmigrated components continue to render correctly. This enables incremental page-by-page migration without big-bang breakage.
|
||||||
|
|
||||||
|
2. **No new dependencies**: The redesign uses only existing libraries (React, lucide-react, recharts). Fonts load from Google Fonts CDN via a `<link>` tag in `index.html`. The existing Tailwind CDN script in `index.html` remains untouched — it is used by some components and removing it is out of scope.
|
||||||
|
|
||||||
|
3. **Dual styling strategy**: The app uses both inline style objects (JS constants in component files) and CSS classes from `App.css`. Both are updated. The UI kit reference files in `docs/design-system-redesign/ui_kits/` use inline styles with `var(--token)` references — the same pattern the production code already uses.
|
||||||
|
|
||||||
|
4. **Severity colors are immutable**: Critical (#EF4444), High (#F59E0B), Medium (#0EA5E9), Low (#10B981) — these mappings never change across any component.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
The redesign does not alter the application architecture. The frontend remains a React 19 SPA (Create React App) with page-level navigation managed in `App.js`, auth via React Context, and `fetch()` API calls with cookie-based auth.
|
||||||
|
|
||||||
|
### Migration Flow
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph TD
|
||||||
|
A[Phase 1: Token Migration] --> B[Phase 2: Font Loading]
|
||||||
|
B --> C[Phase 3: Global CSS Classes]
|
||||||
|
C --> D[Phase 4: App Shell]
|
||||||
|
D --> E[Phase 5: Home Page]
|
||||||
|
E --> F[Phase 6: Reporting Page]
|
||||||
|
F --> G[Phase 7: Compliance Page]
|
||||||
|
G --> H[Phase 8: Knowledge Base Page]
|
||||||
|
H --> I[Phase 9: Exports Page]
|
||||||
|
I --> J[Phase 10: Shared Components]
|
||||||
|
```
|
||||||
|
|
||||||
|
Each phase is independently verifiable. After Phase 1–3, all existing components render correctly with both old and new token names available. Phases 4–10 migrate individual pages and components one at a time.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Components and Interfaces
|
||||||
|
|
||||||
|
### Files Modified (no new files created)
|
||||||
|
|
||||||
|
| File | Change Type | Description |
|
||||||
|
|------|-------------|-------------|
|
||||||
|
| `frontend/src/App.css` | Token + class update | Port all design tokens from `colors_and_type.css`, update global CSS classes, add semantic type utilities, update animations |
|
||||||
|
| `frontend/public/index.html` | Font link update | Add Outfit weight 800 to existing Google Fonts link (weight 300 already missing), ensure `display=swap` |
|
||||||
|
| `frontend/src/App.js` | Inline style update | Update `STYLES` object, stat cards, CVE rows, Quick Lookup, calendar, right-rail panels, top bar, brand mark |
|
||||||
|
| `frontend/src/components/NavDrawer.js` | Inline style update | Update drawer chrome, nav items, backdrop overlay to use design tokens |
|
||||||
|
| `frontend/src/components/UserMenu.js` | Inline style update | Update dropdown, avatar, menu items to use design tokens |
|
||||||
|
| `frontend/src/components/pages/ReportingPage.js` | Inline style update | Update page header, table, charts, buttons, filter chips, status banners |
|
||||||
|
| `frontend/src/components/pages/CompliancePage.js` | Inline style update | Update teal-accented page header, metric cards, device table, team tabs |
|
||||||
|
| `frontend/src/components/pages/ComplianceUploadModal.js` | Inline style update | Update modal overlay, card, buttons |
|
||||||
|
| `frontend/src/components/pages/ComplianceDetailPanel.js` | Inline style update | Update panel chrome, data rows |
|
||||||
|
| `frontend/src/components/pages/ComplianceChartsPanel.js` | Inline style update | Update chart card wrappers, teal borders |
|
||||||
|
| `frontend/src/components/pages/KnowledgeBasePage.js` | Inline style update | Update document list, viewer, action buttons |
|
||||||
|
| `frontend/src/components/pages/ExportsPage.js` | Inline style update | Update page header, export cards, buttons |
|
||||||
|
| `frontend/src/components/LoginForm.js` | Inline style update | Update form card, inputs, button |
|
||||||
|
| `frontend/src/components/CalendarWidget.js` | Inline style update | Update calendar grid, day cells, navigation buttons |
|
||||||
|
| `frontend/src/components/UserManagement.js` | Inline style update | Update group badges, table rows, buttons |
|
||||||
|
| `frontend/src/components/AuditLog.js` | Inline style update | Update log entry rows, timestamps, action badges |
|
||||||
|
| `frontend/src/components/NvdSyncModal.js` | Inline style update | Update modal chrome, buttons |
|
||||||
|
| `frontend/src/components/KnowledgeBaseModal.js` | Inline style update | Update modal chrome, form inputs |
|
||||||
|
| `frontend/src/components/KnowledgeBaseViewer.js` | Inline style update | Update viewer chrome, markdown content area |
|
||||||
|
|
||||||
|
### Token Migration Strategy
|
||||||
|
|
||||||
|
The `App.css` `:root` block is updated to include all tokens from `docs/design-system-redesign/colors_and_type.css`. The strategy:
|
||||||
|
|
||||||
|
1. **Additive merge**: New tokens are added. Existing tokens that match (e.g., `--intel-darkest`, `--intel-accent`) keep their current values (which already match the design system). No existing token is removed.
|
||||||
|
|
||||||
|
2. **Alias tokens added**: Friendly aliases like `--bg-page`, `--bg-surface`, `--fg-1`, `--fg-2`, `--accent`, `--sev-critical` are added so components can use either canonical or alias form.
|
||||||
|
|
||||||
|
3. **New token categories added**:
|
||||||
|
- Surface aliases (`--bg-page`, `--bg-surface`, `--bg-elevated`, `--bg-hover`, `--bg-input`, `--bg-overlay`)
|
||||||
|
- Foreground aliases (`--fg-1`, `--fg-2`, `--fg-muted`, `--fg-disabled`)
|
||||||
|
- Border tokens (`--border-subtle`, `--border-default`, `--border-strong`, `--border-focus`)
|
||||||
|
- Brand accent variants (`--intel-accent-bright`, `--intel-accent-soft`, `--accent`, `--accent-bright`, `--accent-soft`, `--accent-wash`)
|
||||||
|
- Severity fill tokens (`--sev-critical-bg`, `--sev-high-bg`, `--sev-medium-bg`, `--sev-low-bg`)
|
||||||
|
- Severity text tokens (`--sev-critical-text`, `--sev-high-text`, `--sev-medium-text`, `--sev-low-text`)
|
||||||
|
- Group badge tokens (`--group-admin`, `--group-standard`, `--group-leadership`, `--group-readonly`)
|
||||||
|
- Font family tokens (`--font-ui`, `--font-mono`)
|
||||||
|
- Type scale tokens (`--fs-display` through `--fs-tiny`)
|
||||||
|
- Line height, font weight, letter spacing tokens
|
||||||
|
- Spacing scale (`--sp-1` through `--sp-12`)
|
||||||
|
- Radii (`--r-xs` through `--r-pill`)
|
||||||
|
- Elevation shadows (`--shadow-rest` through `--shadow-focus`)
|
||||||
|
- Severity glows (`--glow-danger`, `--glow-warning`, `--glow-info`, `--glow-success`)
|
||||||
|
- Heading glow (`--glow-heading`)
|
||||||
|
- Motion tokens (`--ease-out`, `--ease-in-out`, `--dur-fast`, `--dur-med`, `--dur-slow`)
|
||||||
|
- Layout tokens (`--topbar-h`, `--drawer-w`, `--panel-w`, `--content-max`, z-index tokens)
|
||||||
|
|
||||||
|
### Per-Component Style Mapping
|
||||||
|
|
||||||
|
Each component uses a mix of inline style objects and CSS classes. The migration pattern for each:
|
||||||
|
|
||||||
|
**Inline style objects** (e.g., `STYLES.statCard` in App.js, hardcoded style props in NavDrawer.js):
|
||||||
|
- Replace hardcoded hex colors with `var(--token)` references where the token exists
|
||||||
|
- Update gradient backgrounds to match the Card_Surface treatment from the design system
|
||||||
|
- Update border values to use the new border tokens
|
||||||
|
- Update font-family references from `'monospace'` or `'JetBrains Mono', monospace` to `var(--font-mono)`
|
||||||
|
- Update font-family references from `'Outfit', system-ui, sans-serif` to `var(--font-ui)`
|
||||||
|
|
||||||
|
**CSS classes** (e.g., `.intel-card`, `.status-badge`, `.intel-button` in App.css):
|
||||||
|
- Update to reference new tokens where applicable
|
||||||
|
- Add new classes (`.stat-card` top-edge gradient rail, semantic type utilities)
|
||||||
|
- Update animation keyframes to match design system definitions
|
||||||
|
|
||||||
|
### App Shell Redesign
|
||||||
|
|
||||||
|
The app shell (top bar + nav drawer + user menu) is updated to match `AppShell.jsx` reference:
|
||||||
|
|
||||||
|
- **Top bar**: 64px height (`--topbar-h`), `var(--bg-surface)` background, `var(--border-subtle)` bottom border, `var(--z-topbar)` z-index
|
||||||
|
- **Brand mark**: Typographic stack — "STEAM" in Outfit 700 at 15px, "SECURITY" in Outfit 500 at 9px with 0.18em letter spacing, Shield icon in `var(--accent)` color
|
||||||
|
- **Nav tabs**: Outfit 13px, 500 weight (600 active), active state uses `var(--accent)` text + `var(--accent-soft)` background
|
||||||
|
- **Nav drawer**: 240px width (`--drawer-w`), `var(--bg-surface)` background, `var(--border-subtle)` right border, overlay with `var(--bg-overlay)` + `backdrop-filter: blur(4px)`
|
||||||
|
- **User menu**: Circular avatar with initials in `var(--accent)` on `var(--accent-soft)` background, dropdown with `var(--shadow-popover)` elevation
|
||||||
|
|
||||||
|
### Page Identity Colors
|
||||||
|
|
||||||
|
Each page has a distinct identity color for its header glow:
|
||||||
|
|
||||||
|
| Page | Identity Color | Header Text |
|
||||||
|
|------|---------------|-------------|
|
||||||
|
| Home | Sky blue (`#0EA5E9`) | "CVE INTEL" |
|
||||||
|
| Reporting | Green (`#10B981`) | "REPORTING" |
|
||||||
|
| Compliance | Teal (`#14B8A6`) | "AEO COMPLIANCE" |
|
||||||
|
| Knowledge Base | Sky blue or green | Page title |
|
||||||
|
| Exports | Sky blue | Page title |
|
||||||
|
|
||||||
|
All page headers follow the same pattern: JetBrains Mono, 24px, 700 weight, uppercase, 0.1em letter spacing, color-matched text-shadow glow.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Data Models
|
||||||
|
|
||||||
|
No data model changes. This redesign is purely presentational — no database schema, API contract, or state shape changes.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Error Handling
|
||||||
|
|
||||||
|
No error handling changes. All existing error states, error messages, loading spinners, and fallback UI are preserved. Only their visual styling is updated:
|
||||||
|
|
||||||
|
- Error banners use red-tinted backgrounds (`rgba(239,68,68,0.08)`), red borders, AlertCircle icon, and mono font
|
||||||
|
- Loading spinners use the existing `spin` animation with `var(--accent)` color
|
||||||
|
- Empty states use the existing pattern with updated token references
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Testing Strategy
|
||||||
|
|
||||||
|
### Why Property-Based Testing Does Not Apply
|
||||||
|
|
||||||
|
This feature is a **pure UI visual redesign**. It changes CSS custom properties, inline style objects, CSS class definitions, and font loading. There are:
|
||||||
|
|
||||||
|
- No pure functions with input/output behavior to test
|
||||||
|
- No data transformations, parsers, or serializers
|
||||||
|
- No business logic changes
|
||||||
|
- No state management changes
|
||||||
|
- No API contract changes
|
||||||
|
|
||||||
|
Property-based testing requires universal properties that hold across a wide input space. A visual redesign has no meaningful "for all inputs X, property P(X) holds" statements. The correctness of a visual redesign is verified by visual inspection and snapshot comparison, not by generating random inputs.
|
||||||
|
|
||||||
|
### Recommended Testing Approach
|
||||||
|
|
||||||
|
**Manual visual verification** (primary):
|
||||||
|
- Compare each page against the UI kit reference files in `docs/design-system-redesign/ui_kits/`
|
||||||
|
- Verify token values in browser DevTools (inspect computed styles)
|
||||||
|
- Check all severity badge colors match the fixed mapping
|
||||||
|
- Verify font loading (Outfit + JetBrains Mono) in Network tab
|
||||||
|
- Test hover states, focus rings, transitions, and animations
|
||||||
|
- Verify scrollbar styling in WebKit browsers
|
||||||
|
|
||||||
|
**Snapshot testing** (optional, for regression):
|
||||||
|
- Capture rendered HTML snapshots of key components before and after migration
|
||||||
|
- Use React Testing Library's `render()` + inline snapshot assertions
|
||||||
|
- Focus on structural correctness (correct CSS classes applied, correct inline style values)
|
||||||
|
|
||||||
|
**Build verification**:
|
||||||
|
- `npm run build` in `frontend/` must succeed with zero errors
|
||||||
|
- No new console warnings related to styling
|
||||||
|
- No new ESLint warnings
|
||||||
|
|
||||||
|
**Cross-browser check**:
|
||||||
|
- Verify `backdrop-filter: blur()` works in target browsers
|
||||||
|
- Verify `font-display: swap` prevents FOIT (flash of invisible text)
|
||||||
|
- Verify webkit scrollbar styling renders correctly
|
||||||
|
|
||||||
|
**Incremental verification checklist** (one per migration phase):
|
||||||
|
1. After token migration: all existing pages render correctly, no broken styles
|
||||||
|
2. After font loading: Outfit and JetBrains Mono load, `font-display: swap` active
|
||||||
|
3. After global CSS update: `.intel-card`, `.status-badge`, `.intel-button`, `.intel-input` render correctly
|
||||||
|
4. After app shell: top bar height, brand mark, nav tabs, drawer, user menu match reference
|
||||||
|
5. After each page: compare against corresponding UI kit assembly file
|
||||||
215
.kiro/specs/dashboard-redesign/requirements.md
Normal file
215
.kiro/specs/dashboard-redesign/requirements.md
Normal file
@@ -0,0 +1,215 @@
|
|||||||
|
# Requirements Document
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
This document captures the requirements for a comprehensive visual redesign of the STEAM Security Dashboard frontend. The redesign applies a refined design system extracted to `docs/design-system-redesign/` — evolving the existing dark tactical console aesthetic with an expanded token system, updated typography, refined card surfaces, enhanced severity badges, new layout tokens, proper font loading, a new brand mark, and refined animations. All existing behavior, routes, state management, and API calls are preserved — only presentational JSX, inline styles, and CSS change.
|
||||||
|
|
||||||
|
## Glossary
|
||||||
|
|
||||||
|
- **Dashboard**: The STEAM Security Dashboard frontend React application served from `frontend/src/`
|
||||||
|
- **Design_Token_File**: The source-of-truth CSS custom properties file at `docs/design-system-redesign/colors_and_type.css` defining color, typography, spacing, radii, elevation, and motion tokens
|
||||||
|
- **App_CSS**: The global stylesheet at `frontend/src/App.css` containing CSS variables, utility classes, component classes, and animations
|
||||||
|
- **UI_Kit**: A self-contained reference implementation in `docs/design-system-redesign/ui_kits/<name>/` consisting of a primitives file (component vocabulary) and a page assembly file (target rendering)
|
||||||
|
- **Token**: A CSS custom property (e.g., `--intel-accent`, `--sp-4`, `--r-lg`) that encodes a design decision for color, spacing, radius, elevation, or motion
|
||||||
|
- **App_Shell**: The persistent chrome surrounding page content — top bar, navigation drawer, user menu, and brand mark
|
||||||
|
- **Page_Component**: A top-level view rendered by the Dashboard — Home (App.js), Reporting, Compliance, Knowledge Base, Exports, or Admin Panel
|
||||||
|
- **Severity_Badge**: A styled inline element displaying CVE severity level (Critical, High, Medium, Low) with a pulse-glow dot, gradient fill, and tinted border
|
||||||
|
- **Card_Surface**: A styled container using the diagonal gradient background, sky-blue border, and layered shadow treatment defined in the design system
|
||||||
|
- **Inline_Style_Object**: A JavaScript object constant defined in a component file and passed to the `style` prop of a React element
|
||||||
|
- **Google_Fonts_CDN**: The external font service at `fonts.googleapis.com` used to load Outfit and JetBrains Mono typefaces
|
||||||
|
|
||||||
|
## Requirements
|
||||||
|
|
||||||
|
### Requirement 1: Port Design Tokens to App.css
|
||||||
|
|
||||||
|
**User Story:** As a developer, I want the new design tokens ported into App.css, so that all components can reference a single source of truth for colors, typography, spacing, radii, elevation, and motion values.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the Dashboard loads, THE App_CSS SHALL define all CSS custom properties present in the Design_Token_File within the `:root` block, including surface colors, foreground colors, border tokens, brand accent tokens, semantic severity tokens, severity text tokens, severity fill tokens, group badge tokens, font families, type scale, line heights, font weights, letter spacing, spacing scale, radii, elevation shadows, severity glows, heading glow, motion easings, motion durations, and layout tokens
|
||||||
|
2. WHEN the Dashboard loads, THE App_CSS SHALL preserve all existing CSS custom properties that are not superseded by the Design_Token_File tokens
|
||||||
|
3. WHEN the Dashboard loads, THE App_CSS SHALL include the alias tokens defined in the Design_Token_File (e.g., `--bg-page`, `--bg-surface`, `--fg-1`, `--fg-2`, `--border-1`, `--accent`, `--sev-critical`) so that components can use either the canonical or alias form
|
||||||
|
4. WHEN the Dashboard loads, THE App_CSS SHALL define the `--font-ui` and `--font-mono` custom properties matching the Design_Token_File values (`'Outfit', system-ui, -apple-system, sans-serif` and `'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace`)
|
||||||
|
5. WHEN the Dashboard loads, THE App_CSS SHALL define the spacing scale tokens (`--sp-1` through `--sp-12`) matching the 4px grid from the Design_Token_File
|
||||||
|
6. WHEN the Dashboard loads, THE App_CSS SHALL define the radii tokens (`--r-xs` through `--r-pill`) matching the Design_Token_File
|
||||||
|
7. WHEN the Dashboard loads, THE App_CSS SHALL define the elevation tokens (`--shadow-rest`, `--shadow-card`, `--shadow-card-hover`, `--shadow-popover`, `--shadow-modal`, `--shadow-focus`) matching the Design_Token_File
|
||||||
|
8. WHEN the Dashboard loads, THE App_CSS SHALL define the motion tokens (`--ease-out`, `--ease-in-out`, `--dur-fast`, `--dur-med`, `--dur-slow`) matching the Design_Token_File
|
||||||
|
9. WHEN the Dashboard loads, THE App_CSS SHALL define the layout tokens (`--topbar-h`, `--drawer-w`, `--panel-w`, `--content-max`, `--z-topbar`, `--z-drawer`, `--z-modal`, `--z-tooltip`) matching the Design_Token_File
|
||||||
|
|
||||||
|
### Requirement 2: Load Fonts via Google Fonts CDN
|
||||||
|
|
||||||
|
**User Story:** As a user, I want the Dashboard to load Outfit and JetBrains Mono from Google Fonts CDN, so that typography renders consistently with the design system specification.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the Dashboard loads, THE Dashboard SHALL import Outfit (weights 300, 400, 500, 600, 700, 800) and JetBrains Mono (weights 400, 500, 600, 700) from Google_Fonts_CDN
|
||||||
|
2. WHEN the Dashboard loads, THE App_CSS SHALL set the default font-family on the universal selector (`*`) to `var(--font-ui)` referencing the Outfit font stack
|
||||||
|
3. WHEN the Dashboard loads, THE Dashboard SHALL apply `font-display: swap` to prevent invisible text during font loading
|
||||||
|
|
||||||
|
### Requirement 3: Update Global CSS Classes and Animations
|
||||||
|
|
||||||
|
**User Story:** As a developer, I want the global CSS classes in App.css updated to match the new design token values, so that components using class-based styling reflect the redesigned visual language.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN a component applies the `intel-card` class, THE App_CSS SHALL render the card with the diagonal gradient background, 1.5px sky-blue border at 0.30 alpha, 8px border-radius, and the `--shadow-card` elevation token
|
||||||
|
2. WHEN a user hovers over an element with the `intel-card` class, THE App_CSS SHALL increase the border opacity to 0.50, apply `translateY(-2px)`, apply the `--shadow-card-hover` elevation, and sweep a sky-blue shimmer from left to right over 500ms
|
||||||
|
3. WHEN a component applies the `status-badge` class, THE App_CSS SHALL render the badge with JetBrains Mono font, 0.75rem size, 700 weight, uppercase text, 0.5px letter spacing, 6px border-radius, 2px solid border, and an 8px pulse-glow dot using the `pulse-glow` keyframe animation at 2s interval
|
||||||
|
4. WHEN a component applies the `intel-button` class, THE App_CSS SHALL render the button with JetBrains Mono font, 600 weight, uppercase text, 0.5px letter spacing, 6px border-radius, and the circular ripple hover effect expanding to 300px
|
||||||
|
5. WHEN a component applies the `intel-input` class, THE App_CSS SHALL render the input with `var(--bg-input)` background, `var(--border-subtle)` border, 6px border-radius, and on focus apply `var(--border-focus)` border color with `var(--shadow-focus)` ring
|
||||||
|
6. WHEN a component applies the `stat-card` class, THE App_CSS SHALL render the card with the diagonal gradient, 8px border-radius, a 2px top-edge gradient rail (`linear-gradient(90deg, transparent, #0EA5E9, transparent)`), and the `--shadow-card` elevation
|
||||||
|
7. WHEN a component applies the `modal-overlay` class, THE App_CSS SHALL render the overlay with `var(--bg-overlay)` background and `backdrop-filter: blur(12px)`
|
||||||
|
8. THE App_CSS SHALL define the `pulse-glow`, `spin`, `fade-in`, and `scan` keyframe animations matching the Design_Token_File definitions
|
||||||
|
9. THE App_CSS SHALL define the semantic type utility classes (`t-display`, `t-h1`, `t-h2`, `t-h3`, `t-body`, `t-sm`, `t-meta`, `t-label`, `t-mono`, `t-mono-sm`, `t-code`) matching the Design_Token_File definitions
|
||||||
|
10. THE App_CSS SHALL define the `*:focus-visible` rule applying `var(--border-focus)` border color and `var(--shadow-focus)` box-shadow with no outline
|
||||||
|
|
||||||
|
### Requirement 4: Redesign the App Shell
|
||||||
|
|
||||||
|
**User Story:** As a user, I want the top bar, navigation drawer, and user menu to match the new design system, so that the persistent application chrome is visually consistent with the redesigned pages.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the Dashboard loads, THE App_Shell SHALL render a top bar with `var(--topbar-h)` height (64px), `var(--bg-surface)` background, `var(--border-subtle)` bottom border, and `var(--z-topbar)` z-index
|
||||||
|
2. WHEN the Dashboard loads, THE App_Shell SHALL render the brand mark as a typographic stack with "STEAM" in Outfit 700 weight at 15px and "SECURITY" in Outfit 500 weight at 9px with 0.18em letter spacing, accompanied by a sky-blue Shield icon
|
||||||
|
3. WHEN the Dashboard loads, THE App_Shell SHALL render navigation tabs in the top bar for Home, Reporting, Compliance, Knowledge Base, and Exports using Outfit font at 13px with 500 weight (600 weight when active)
|
||||||
|
4. WHEN a user selects a navigation tab, THE App_Shell SHALL highlight the active tab with `var(--accent)` text color and `var(--accent-soft)` background
|
||||||
|
5. WHEN a user clicks the menu icon, THE App_Shell SHALL open a navigation drawer from the left with `var(--drawer-w)` width (240px), `var(--bg-surface)` background, `var(--border-subtle)` right border, and `var(--z-drawer)` z-index
|
||||||
|
6. WHEN the navigation drawer is open, THE App_Shell SHALL render a semi-transparent overlay behind the drawer with `var(--bg-overlay)` background and `backdrop-filter: blur(4px)`
|
||||||
|
7. WHEN the Dashboard loads, THE App_Shell SHALL render the user menu button with a circular avatar showing the user's initials in `var(--accent)` color on `var(--accent-soft)` background, the user's name, and a chevron indicator
|
||||||
|
8. WHEN a user clicks the user menu button, THE App_Shell SHALL display a dropdown with `var(--bg-surface)` background, `var(--border-subtle)` border, `var(--shadow-popover)` elevation, and `var(--z-drawer)` z-index, showing the user's name, email, group badge, and menu items
|
||||||
|
|
||||||
|
### Requirement 5: Redesign the Home Page (App.js)
|
||||||
|
|
||||||
|
**User Story:** As a user, I want the Home page to match the new design system, so that the CVE list, stat cards, filters, calendar widget, and right-rail panels reflect the refined visual language.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the Home page loads, THE Dashboard SHALL render stat cards at the top of the page using the Card_Surface treatment with a 2px top-edge gradient rail, color-coded borders (sky for neutral, amber for attention, red for critical), and the `--shadow-card` elevation with severity-tinted glow
|
||||||
|
2. WHEN the Home page loads, THE Dashboard SHALL render the page title in JetBrains Mono, 24px, 700 weight, sky-blue color, uppercase, with 0.1em letter spacing and the heading glow text-shadow
|
||||||
|
3. WHEN the Home page loads, THE Dashboard SHALL render CVE row cards using the Card_Surface treatment with 1.5px sky-blue border at 0.12 alpha, 8px border-radius, and a chevron toggle that rotates from -90deg (collapsed) to 0deg (expanded)
|
||||||
|
4. WHEN a user expands a CVE row, THE Dashboard SHALL display the full description, severity badge with pulse-glow dot, vendor count, document count, and status labels, with vendor entry sub-cards using the nested Card_Surface gradient
|
||||||
|
5. WHEN the Home page loads, THE Dashboard SHALL render the Quick Lookup section as a Card_Surface with sky-blue identity, containing search input with icon, filter controls, and result banners using tone-coded backgrounds (success green, warning amber, error red)
|
||||||
|
6. WHEN the Home page loads, THE Dashboard SHALL render the calendar widget with JetBrains Mono font, sky-blue highlight for the current day, severity-colored dots for marked dates, and navigation buttons with sky-blue borders
|
||||||
|
7. WHEN the Home page loads, THE Dashboard SHALL render right-rail panels (Open Tickets, Archer, Ivanti) as Card_Surface containers with left-rail color accents (amber for tickets, purple for Archer, teal for Ivanti), BigStat centered counts, and scrollable MiniTicket lists
|
||||||
|
8. WHEN the Home page loads, THE Dashboard SHALL render filter controls using the redesigned input and select styles with `var(--bg-input)` background, sky-blue focus borders, and JetBrains Mono font for data fields
|
||||||
|
|
||||||
|
### Requirement 6: Redesign the Reporting Page
|
||||||
|
|
||||||
|
**User Story:** As a user, I want the Reporting page to match the new design system, so that the findings table, charts, filters, and toolbar reflect the refined visual language.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the Reporting page loads, THE Dashboard SHALL render the page header with "REPORTING" in JetBrains Mono, 24px, 700 weight, green (#10B981) color, uppercase, with 0.1em letter spacing and green glow text-shadow
|
||||||
|
2. WHEN the Reporting page loads, THE Dashboard SHALL render the Sync button as a green tinted-fill primary variant and secondary action buttons (Atlas, Export, Queue, Column manager) as sky-blue outlined or tinted-fill variants
|
||||||
|
3. WHEN the Reporting page loads, THE Dashboard SHALL render the findings table panel as a Card_Surface with sky-blue border at 0.12 alpha, containing a toolbar with mono uppercase labels, filter chips in amber, and pill tabs for Ivanti/Atlas views
|
||||||
|
4. WHEN the Reporting page loads, THE Dashboard SHALL render table rows with `var(--border-subtle)` bottom borders, severity dots with 7px diameter and colored glow, SLA pills with pill-radius and tinted backgrounds, and workflow badges with 4px radius and tinted borders
|
||||||
|
5. WHEN a user hovers over a table row, THE Dashboard SHALL apply a `rgba(0,217,255,0.06)` background wash and `0 2px 8px rgba(0,217,255,0.10)` sub-shadow
|
||||||
|
6. WHEN the Reporting page loads, THE Dashboard SHALL render chart panels as Card_Surface containers with sky-blue borders, mono uppercase title labels, and donut charts using the severity color palette
|
||||||
|
7. WHEN an error occurs during sync, THE Dashboard SHALL display a status banner with red-tinted background, red border, AlertCircle icon, and mono font error message
|
||||||
|
|
||||||
|
### Requirement 7: Redesign the Compliance Page
|
||||||
|
|
||||||
|
**User Story:** As a user, I want the Compliance page to match the new design system, so that the metric health cards, device table, charts, and team tabs reflect the teal-accented visual language.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the Compliance page loads, THE Dashboard SHALL render the page header with "AEO COMPLIANCE" in JetBrains Mono, 24px, 700 weight, teal (#14B8A6) color, uppercase, with 0.1em letter spacing and teal glow text-shadow
|
||||||
|
2. WHEN the Compliance page loads, THE Dashboard SHALL render team tabs (STEAM, ACCESS-ENG) with teal-tinted active state, mono uppercase labels, and 6px border-radius
|
||||||
|
3. WHEN the Compliance page loads, THE Dashboard SHALL render metric health cards as clickable Card_Surface containers with status-colored borders (green for meeting target, amber for within 15%, red for below 15%), variant pills showing compliance percentages, and a status ribbon at the bottom
|
||||||
|
4. WHEN a user clicks a metric health card, THE Dashboard SHALL highlight the active card with a status-colored background fill at 0.15 alpha and a solid status-colored border
|
||||||
|
5. WHEN the Compliance page loads, THE Dashboard SHALL render the device table with teal-tinted borders at 0.15 alpha, mono uppercase column headers, hostname/IP in JetBrains Mono, category-colored metric badges, escalating seen-count badges (slate for 1, amber for 2–3, red for 4+), and a teal-accented search input
|
||||||
|
6. WHEN a user hovers over a device row, THE Dashboard SHALL apply a subtle white-alpha background wash and highlight the selected row with a 2px teal left border
|
||||||
|
7. WHEN the Compliance page loads, THE Dashboard SHALL render chart cards with teal-tinted borders, mono uppercase titles, and the standard Card_Surface gradient background
|
||||||
|
8. WHEN an admin triggers a rollback, THE Dashboard SHALL display a centered modal with red-tinted border, red mono uppercase title, dark recessed file label, and danger-styled confirm button
|
||||||
|
|
||||||
|
### Requirement 8: Redesign the Knowledge Base Page
|
||||||
|
|
||||||
|
**User Story:** As a user, I want the Knowledge Base page to match the new design system, so that the document library, viewer, and search interface reflect the refined visual language.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the Knowledge Base page loads, THE Dashboard SHALL render the page header following the same mono uppercase glow pattern used by other pages, with sky-blue or green identity color
|
||||||
|
2. WHEN the Knowledge Base page loads, THE Dashboard SHALL render document list items using the recessed Card_Surface treatment with `inset 0 2px 4px rgba(0,0,0,0.3)` shadow, sky-blue borders at 0.20 alpha, and hover state increasing border opacity to 0.35
|
||||||
|
3. WHEN the Knowledge Base page loads, THE Dashboard SHALL render the document viewer with markdown content styled according to the App_CSS `.markdown-content` rules — h1 in sky-blue, h2 in emerald, h3 in amber, code blocks with dark recessed background, and blockquotes with sky-blue left border
|
||||||
|
4. WHEN the Knowledge Base page loads, THE Dashboard SHALL render action buttons (upload, create, view) using the redesigned button variants with mono uppercase labels and tinted-fill backgrounds
|
||||||
|
|
||||||
|
### Requirement 9: Redesign Shared Components
|
||||||
|
|
||||||
|
**User Story:** As a developer, I want the shared components (LoginForm, CalendarWidget, UserManagement, AuditLog, NvdSyncModal, KnowledgeBaseModal, KnowledgeBaseViewer) to match the new design system, so that every surface in the application is visually consistent.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the LoginForm renders, THE Dashboard SHALL style the login form using Card_Surface treatment, redesigned input fields with `var(--bg-input)` background and sky-blue focus rings, and the primary button variant
|
||||||
|
2. WHEN a modal opens, THE Dashboard SHALL render the modal overlay with `var(--bg-overlay)` background and `backdrop-filter: blur(12px)`, and the modal card with `var(--shadow-modal)` elevation and 12px border-radius
|
||||||
|
3. WHEN the UserManagement component renders, THE Dashboard SHALL style group badges using the token-based group colors (`--group-admin` red, `--group-standard` sky-blue, `--group-leadership` amber, `--group-readonly` grey) with pill-radius and tinted backgrounds
|
||||||
|
4. WHEN the AuditLog component renders, THE Dashboard SHALL style log entries using the data-row treatment with `var(--border-subtle)` bottom borders, mono font for timestamps and action types, and hover state with sky-blue background wash
|
||||||
|
5. WHEN the NvdSyncModal renders, THE Dashboard SHALL style the modal content using Card_Surface treatment with the standard modal elevation and redesigned button variants
|
||||||
|
6. WHEN the CalendarWidget renders, THE Dashboard SHALL style the calendar with JetBrains Mono font, sky-blue current-day highlight with 1px border, severity-colored date markers, and navigation buttons with sky-blue borders
|
||||||
|
|
||||||
|
### Requirement 10: Redesign the Exports Page
|
||||||
|
|
||||||
|
**User Story:** As a user, I want the Exports page to match the new design system, so that the export tools interface is visually consistent with the rest of the application.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the Exports page loads, THE Dashboard SHALL render the page header following the mono uppercase glow pattern with appropriate identity color
|
||||||
|
2. WHEN the Exports page loads, THE Dashboard SHALL render export action cards using the Card_Surface treatment with sky-blue borders and the redesigned button variants for export triggers
|
||||||
|
|
||||||
|
### Requirement 11: Preserve Existing Behavior
|
||||||
|
|
||||||
|
**User Story:** As a user, I want all existing functionality to continue working after the redesign, so that the visual update does not break any workflows.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. THE Dashboard SHALL preserve all existing page navigation routes and state management logic without modification
|
||||||
|
2. THE Dashboard SHALL preserve all existing API calls, request parameters, response handling, and error handling without modification
|
||||||
|
3. THE Dashboard SHALL preserve all existing user interactions — click handlers, form submissions, modal open/close, expand/collapse, drag-and-drop, inline editing — without modification
|
||||||
|
4. THE Dashboard SHALL preserve all existing role-based access control checks and conditional rendering logic without modification
|
||||||
|
5. THE Dashboard SHALL preserve all existing data display logic — filtering, sorting, searching, pagination — without modification
|
||||||
|
|
||||||
|
### Requirement 12: No New Dependencies
|
||||||
|
|
||||||
|
**User Story:** As a developer, I want the redesign to use only existing dependencies, so that the bundle size and dependency surface area remain unchanged.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. THE Dashboard SHALL use only React, lucide-react, recharts, react-markdown, rehype-sanitize, mermaid, and xlsx as frontend dependencies — no new libraries shall be added
|
||||||
|
2. THE Dashboard SHALL load Outfit and JetBrains Mono fonts exclusively from Google_Fonts_CDN — no bundled font files shall be added
|
||||||
|
|
||||||
|
### Requirement 13: Incremental Migration Approach
|
||||||
|
|
||||||
|
**User Story:** As a developer, I want the redesign applied incrementally (tokens first, then page-by-page), so that changes can be verified in isolation and big-bang breakage is avoided.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the token migration is complete, THE App_CSS SHALL be fully functional with both old and new token names available, so that components can be migrated one at a time without breaking unmigrated components
|
||||||
|
2. WHEN a Page_Component is migrated, THE Dashboard SHALL render the migrated page using the new design tokens and styles while unmigrated pages continue to render correctly using the existing styles
|
||||||
|
|
||||||
|
### Requirement 14: Severity Color Mapping Preservation
|
||||||
|
|
||||||
|
**User Story:** As a user, I want severity colors to remain semantically fixed, so that Critical is always red, High is always amber, Medium is always sky-blue, and Low is always emerald across every component.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. THE Dashboard SHALL render Critical severity indicators using `#EF4444` (border/dot), `rgba(239,68,68,0.20)` (fill), and `#FCA5A5` (text) across all Severity_Badge instances, status badges, chart segments, and inline severity references
|
||||||
|
2. THE Dashboard SHALL render High severity indicators using `#F59E0B` (border/dot), `rgba(245,158,11,0.20)` (fill), and `#FCD34D` (text) across all severity-displaying components
|
||||||
|
3. THE Dashboard SHALL render Medium severity indicators using `#0EA5E9` (border/dot), `rgba(14,165,233,0.20)` (fill), and `#7DD3FC` (text) across all severity-displaying components
|
||||||
|
4. THE Dashboard SHALL render Low severity indicators using `#10B981` (border/dot), `rgba(16,185,129,0.20)` (fill), and `#6EE7B7` (text) across all severity-displaying components
|
||||||
|
|
||||||
|
### Requirement 15: Brand Mark and Asset Integration
|
||||||
|
|
||||||
|
**User Story:** As a user, I want the new STEAM brand mark and severity icons available in the application, so that the visual identity is complete.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. WHEN the Dashboard loads, THE App_Shell SHALL display the STEAM brand mark as a typographic stack with a Shield icon, matching the `assets/logo.svg` reference — not the previous `AtlasIcon` custom SVG
|
||||||
|
2. WHEN the Dashboard renders severity icons, THE Dashboard SHALL use the severity icon SVGs from `docs/design-system-redesign/assets/` or equivalent inline SVG representations matching the design system specification
|
||||||
|
|
||||||
|
### Requirement 16: Scrollbar and Focus Styling
|
||||||
|
|
||||||
|
**User Story:** As a user, I want scrollbars and focus indicators to match the new design system, so that these browser-level affordances are visually integrated.
|
||||||
|
|
||||||
|
#### Acceptance Criteria
|
||||||
|
|
||||||
|
1. THE App_CSS SHALL style webkit scrollbars with 8px width, `var(--intel-dark)` track background, and `rgba(14,165,233,0.3)` thumb with 4px border-radius, increasing to `rgba(14,165,233,0.5)` on hover
|
||||||
|
2. THE App_CSS SHALL apply `focus-visible` styling with `var(--border-focus)` border color and `var(--shadow-focus)` box-shadow to all focusable elements, with no outline
|
||||||
243
.kiro/specs/dashboard-redesign/tasks.md
Normal file
243
.kiro/specs/dashboard-redesign/tasks.md
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
# Implementation Plan: Dashboard Redesign
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
This plan migrates the STEAM Security Dashboard frontend to the refined design system defined in `docs/design-system-redesign/`. The migration is purely presentational — no behavior, routing, state management, or API changes. Each phase is independently verifiable with `npm run build` in `frontend/`. The 10-phase order ensures tokens and global styles land first, then pages migrate one at a time without breaking unmigrated components.
|
||||||
|
|
||||||
|
Key references:
|
||||||
|
- Design tokens source: `docs/design-system-redesign/colors_and_type.css`
|
||||||
|
- UI kit primitives: `docs/design-system-redesign/ui_kits/cve-dashboard/Primitives.jsx`, `AppShell.jsx`
|
||||||
|
- Home primitives: `docs/design-system-redesign/ui_kits/home/HomePrimitives.jsx`
|
||||||
|
- Reporting primitives: `docs/design-system-redesign/ui_kits/reporting/ReportPrimitives.jsx`
|
||||||
|
- Compliance primitives: `docs/design-system-redesign/ui_kits/compliance/CompPrimitives.jsx`
|
||||||
|
|
||||||
|
## Tasks
|
||||||
|
|
||||||
|
- [x] 1. Phase 1 — Port design tokens to App.css
|
||||||
|
- [x] 1.1 Add all new CSS custom properties to the `:root` block in `frontend/src/App.css`
|
||||||
|
- Merge every token from `docs/design-system-redesign/colors_and_type.css` into the existing `:root` block
|
||||||
|
- Add surface aliases (`--bg-page`, `--bg-surface`, `--bg-elevated`, `--bg-hover`, `--bg-input`, `--bg-overlay`)
|
||||||
|
- Add foreground aliases (`--fg-1`, `--fg-2`, `--fg-muted`, `--fg-disabled`, `--fg-3`, `--fg-on-accent`)
|
||||||
|
- Add border tokens (`--border-subtle`, `--border-default`, `--border-strong`, `--border-focus`, `--border-1`, `--border-2`, `--border-3`)
|
||||||
|
- Add brand accent variants (`--intel-accent-bright`, `--intel-accent-soft`, `--intel-accent-15`, `--intel-accent-08`, `--accent`, `--accent-bright`, `--accent-soft`, `--accent-wash`, `--accent-hover`)
|
||||||
|
- Add severity semantic tokens (`--sev-critical`, `--sev-high`, `--sev-medium`, `--sev-low`), severity text tokens (`--sev-critical-text`, `--sev-high-text`, `--sev-medium-text`, `--sev-low-text`), and severity fill tokens (`--sev-critical-bg`, `--sev-high-bg`, `--sev-medium-bg`, `--sev-low-bg`)
|
||||||
|
- Add group badge tokens (`--group-admin`, `--group-standard`, `--group-leadership`, `--group-readonly`)
|
||||||
|
- Add font family tokens (`--font-ui`, `--font-mono`)
|
||||||
|
- Add type scale tokens (`--fs-display` through `--fs-tiny`), line height tokens (`--lh-tight`, `--lh-normal`, `--lh-loose`), font weight tokens (`--fw-regular` through `--fw-bold`), and letter spacing tokens (`--tracking-wide`, `--tracking-wider`)
|
||||||
|
- Add spacing scale tokens (`--sp-1` through `--sp-12`)
|
||||||
|
- Add radii tokens (`--r-xs` through `--r-pill`)
|
||||||
|
- Add elevation tokens (`--shadow-rest`, `--shadow-card`, `--shadow-card-hover`, `--shadow-popover`, `--shadow-modal`, `--shadow-focus`)
|
||||||
|
- Add severity glow tokens (`--glow-danger`, `--glow-warning`, `--glow-info`, `--glow-success`) and heading glow (`--glow-heading`)
|
||||||
|
- Add motion tokens (`--ease-out`, `--ease-in-out`, `--dur-fast`, `--dur-med`, `--dur-slow`)
|
||||||
|
- Add layout tokens (`--topbar-h`, `--drawer-w`, `--panel-w`, `--content-max`, `--z-topbar`, `--z-drawer`, `--z-modal`, `--z-tooltip`)
|
||||||
|
- Preserve all existing CSS custom properties that are not superseded
|
||||||
|
- Update the universal selector `*` to use `font-family: var(--font-ui)`
|
||||||
|
- _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9_
|
||||||
|
|
||||||
|
- [x] 2. Phase 2 — Load fonts via Google Fonts CDN
|
||||||
|
- [x] 2.1 Update the Google Fonts `<link>` tag in `frontend/public/index.html`
|
||||||
|
- Ensure Outfit loads weights 300, 400, 500, 600, 700, 800
|
||||||
|
- Ensure JetBrains Mono loads weights 400, 500, 600, 700
|
||||||
|
- Ensure `display=swap` is present to prevent invisible text during font loading
|
||||||
|
- _Requirements: 2.1, 2.3_
|
||||||
|
|
||||||
|
- [x] 3. Phase 3 — Update global CSS classes and animations in App.css
|
||||||
|
- [x] 3.1 Update existing component classes to reference new design tokens
|
||||||
|
- Update `.intel-card` to use `var(--shadow-card)` and `var(--shadow-card-hover)` elevation tokens, 8px border-radius, and the shimmer sweep on hover over 500ms
|
||||||
|
- Update `.status-badge` to use `var(--font-mono)`, 0.75rem size, 700 weight, uppercase, 0.5px letter spacing, 6px border-radius, 2px solid border, and `pulse-glow` animation at 2s interval
|
||||||
|
- Update `.intel-button` to use `var(--font-mono)`, 600 weight, uppercase, 0.5px letter spacing, 6px border-radius, and the circular ripple hover effect expanding to 300px
|
||||||
|
- Update `.intel-input` to use `var(--bg-input)` background, `var(--border-subtle)` border, 6px border-radius, and on focus apply `var(--border-focus)` border color with `var(--shadow-focus)` ring
|
||||||
|
- Update `.stat-card` to use the diagonal gradient, 8px border-radius, 2px top-edge gradient rail, and `var(--shadow-card)` elevation
|
||||||
|
- Update `.modal-overlay` to use `var(--bg-overlay)` background and `backdrop-filter: blur(12px)`
|
||||||
|
- _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7_
|
||||||
|
- [x] 3.2 Update keyframe animations to match design token definitions
|
||||||
|
- Update `pulse-glow`, `spin`, `fade-in`, and `scan` keyframes to match `colors_and_type.css` definitions
|
||||||
|
- _Requirements: 3.8_
|
||||||
|
- [x] 3.3 Add semantic type utility classes
|
||||||
|
- Add `.t-display`, `.t-h1`, `.t-h2`, `.t-h3`, `.t-body`, `.t-sm`, `.t-meta`, `.t-label`, `.t-mono`, `.t-mono-sm`, `.t-code` classes matching the `colors_and_type.css` definitions
|
||||||
|
- _Requirements: 3.9_
|
||||||
|
- [x] 3.4 Add `*:focus-visible` rule and update scrollbar styling
|
||||||
|
- Add `*:focus-visible` rule applying `var(--border-focus)` border color and `var(--shadow-focus)` box-shadow with no outline
|
||||||
|
- Update webkit scrollbar styling to use `var(--intel-dark)` track, `rgba(14,165,233,0.3)` thumb with 4px border-radius, and `rgba(14,165,233,0.5)` on hover
|
||||||
|
- _Requirements: 3.10, 16.1, 16.2_
|
||||||
|
|
||||||
|
- [x] 4. Checkpoint — Verify token migration and global CSS
|
||||||
|
- Run `npm run build` in `frontend/` to confirm zero errors
|
||||||
|
- Verify all existing pages still render correctly with both old and new token names available
|
||||||
|
- Ensure all tests pass, ask the user if questions arise.
|
||||||
|
- _Requirements: 13.1_
|
||||||
|
|
||||||
|
- [x] 5. Phase 4 — Redesign the App Shell
|
||||||
|
- [x] 5.1 Update the top bar styles in `frontend/src/App.js`
|
||||||
|
- Set top bar to `var(--topbar-h)` height (64px), `var(--bg-surface)` background, `var(--border-subtle)` bottom border, `var(--z-topbar)` z-index
|
||||||
|
- Replace the brand mark with a typographic stack: "STEAM" in Outfit 700 at 15px, "SECURITY" in Outfit 500 at 9px with 0.18em letter spacing, Shield icon in `var(--accent)` color — matching `AppShell.jsx` reference
|
||||||
|
- Update navigation tabs to Outfit 13px, 500 weight (600 active), active state uses `var(--accent)` text + `var(--accent-soft)` background — matching `NavTab` in `AppShell.jsx`
|
||||||
|
- _Requirements: 4.1, 4.2, 4.3, 4.4, 15.1_
|
||||||
|
- [x] 5.2 Update `frontend/src/components/NavDrawer.js` inline styles
|
||||||
|
- Set drawer to `var(--drawer-w)` width (240px), `var(--bg-surface)` background, `var(--border-subtle)` right border, `var(--z-drawer)` z-index
|
||||||
|
- Set overlay to `var(--bg-overlay)` background with `backdrop-filter: blur(4px)` — matching `NavDrawer` in `AppShell.jsx`
|
||||||
|
- Update drawer items to match `DrawerItem` pattern: Outfit font, 13px, 500 weight (600 active), active uses `var(--accent)` text + `var(--accent-soft)` background
|
||||||
|
- _Requirements: 4.5, 4.6_
|
||||||
|
- [x] 5.3 Update `frontend/src/components/UserMenu.js` inline styles
|
||||||
|
- Update avatar to circular with initials in `var(--accent)` on `var(--accent-soft)` background — matching `UserMenu` in `AppShell.jsx`
|
||||||
|
- Update dropdown to `var(--bg-surface)` background, `var(--border-subtle)` border, `var(--shadow-popover)` elevation, `var(--z-drawer)` z-index
|
||||||
|
- Include user name, email, group badge, and menu items in dropdown — matching `AppShell.jsx` reference
|
||||||
|
- _Requirements: 4.7, 4.8_
|
||||||
|
|
||||||
|
- [x] 6. Phase 5 — Redesign the Home Page
|
||||||
|
- [x] 6.1 Update stat card styles in `frontend/src/App.js`
|
||||||
|
- Apply Card_Surface treatment with 2px top-edge gradient rail
|
||||||
|
- Color-code borders: sky for neutral, amber for attention, red for critical
|
||||||
|
- Apply `var(--shadow-card)` elevation with severity-tinted glow — matching `StatCard` in `HomePrimitives.jsx`
|
||||||
|
- _Requirements: 5.1_
|
||||||
|
- [x] 6.2 Update page title and CVE row styles in `frontend/src/App.js`
|
||||||
|
- Set page title to JetBrains Mono, 24px, 700 weight, sky-blue, uppercase, 0.1em letter spacing, heading glow text-shadow
|
||||||
|
- Update CVE row cards to Card_Surface treatment with 1.5px sky-blue border at 0.12 alpha, 8px border-radius, chevron toggle rotating from -90deg to 0deg — matching `CVERow` in `HomePrimitives.jsx`
|
||||||
|
- Update expanded CVE row content: severity badge with pulse-glow dot, vendor count, doc count, status labels
|
||||||
|
- Update vendor entry sub-cards to nested Card_Surface gradient — matching `VendorEntry` in `HomePrimitives.jsx`
|
||||||
|
- _Requirements: 5.2, 5.3, 5.4_
|
||||||
|
- [x] 6.3 Update Quick Lookup section styles in `frontend/src/App.js`
|
||||||
|
- Apply Card_Surface with sky-blue identity
|
||||||
|
- Update search input with icon, filter controls — matching `HomeInput` in `HomePrimitives.jsx`
|
||||||
|
- Update result banners with tone-coded backgrounds (success green, warning amber, error red) — matching `ResultBanner` in `HomePrimitives.jsx`
|
||||||
|
- _Requirements: 5.5_
|
||||||
|
- [x] 6.4 Update calendar widget and right-rail panel styles in `frontend/src/App.js`
|
||||||
|
- Update calendar to JetBrains Mono font, sky-blue current-day highlight, severity-colored dots, navigation buttons with sky-blue borders — matching `CalendarMini` in `HomePrimitives.jsx`
|
||||||
|
- Update right-rail panels (Open Tickets, Archer, Ivanti) as Card_Surface containers with left-rail color accents (amber, purple, teal), BigStat centered counts, scrollable MiniTicket lists — matching `HomeCard`, `BigStat`, `MiniTicket` in `HomePrimitives.jsx`
|
||||||
|
- _Requirements: 5.6, 5.7_
|
||||||
|
- [x] 6.5 Update filter control styles in `frontend/src/App.js`
|
||||||
|
- Update inputs and selects to `var(--bg-input)` background, sky-blue focus borders, JetBrains Mono font — matching `HomeInput`, `HomeSelect` in `HomePrimitives.jsx`
|
||||||
|
- _Requirements: 5.8_
|
||||||
|
|
||||||
|
- [x] 7. Checkpoint — Verify App Shell and Home Page
|
||||||
|
- Run `npm run build` in `frontend/` to confirm zero errors
|
||||||
|
- Ensure all tests pass, ask the user if questions arise.
|
||||||
|
- _Requirements: 13.2_
|
||||||
|
|
||||||
|
- [x] 8. Phase 6 — Redesign the Reporting Page
|
||||||
|
- [x] 8.1 Update page header and button styles in `frontend/src/components/pages/ReportingPage.js`
|
||||||
|
- Set header to "REPORTING" in JetBrains Mono, 24px, 700 weight, green (#10B981), uppercase, 0.1em letter spacing, green glow text-shadow — matching `PageHeader` in `ReportPrimitives.jsx`
|
||||||
|
- Update Sync button to green tinted-fill primary variant — matching `RptButton` primary in `ReportPrimitives.jsx`
|
||||||
|
- Update secondary buttons (Atlas, Export, Queue, Column manager) to sky-blue outlined or tinted-fill variants — matching `RptButton` neutral/subtle in `ReportPrimitives.jsx`
|
||||||
|
- _Requirements: 6.1, 6.2_
|
||||||
|
- [x] 8.2 Update findings table panel and toolbar styles in `frontend/src/components/pages/ReportingPage.js`
|
||||||
|
- Apply Card_Surface with sky-blue border at 0.12 alpha — matching `KbCard` in `ReportPrimitives.jsx`
|
||||||
|
- Update toolbar with mono uppercase labels, filter chips in amber, pill tabs for Ivanti/Atlas views — matching `ToolbarLabel`, `FilterChip`, `PillTab` in `ReportPrimitives.jsx`
|
||||||
|
- _Requirements: 6.3_
|
||||||
|
- [x] 8.3 Update table row and cell styles in `frontend/src/components/pages/ReportingPage.js`
|
||||||
|
- Update rows with `var(--border-subtle)` bottom borders
|
||||||
|
- Update severity dots to 7px diameter with colored glow — matching `SeverityDot` in `ReportPrimitives.jsx`
|
||||||
|
- Update SLA pills with pill-radius and tinted backgrounds — matching `SlaPill` in `ReportPrimitives.jsx`
|
||||||
|
- Update workflow badges with 4px radius and tinted borders — matching `WorkflowBadge` in `ReportPrimitives.jsx`
|
||||||
|
- Apply hover state: `rgba(0,217,255,0.06)` background wash and `0 2px 8px rgba(0,217,255,0.10)` sub-shadow
|
||||||
|
- _Requirements: 6.4, 6.5_
|
||||||
|
- [x] 8.4 Update chart panels and error banner styles in `frontend/src/components/pages/ReportingPage.js`
|
||||||
|
- Update chart panels to Card_Surface with sky-blue borders, mono uppercase title labels — matching `KbCard` in `ReportPrimitives.jsx`
|
||||||
|
- Update donut charts to use severity color palette
|
||||||
|
- Update error status banner to red-tinted background, red border, AlertCircle icon, mono font — matching `StatusBanner` in `ReportPrimitives.jsx`
|
||||||
|
- _Requirements: 6.6, 6.7_
|
||||||
|
|
||||||
|
- [x] 9. Phase 7 — Redesign the Compliance Page
|
||||||
|
- [x] 9.1 Update page header and team tabs in `frontend/src/components/pages/CompliancePage.js`
|
||||||
|
- Set header to "AEO COMPLIANCE" in JetBrains Mono, 24px, 700 weight, teal (#14B8A6), uppercase, 0.1em letter spacing, teal glow text-shadow — matching `CompPageHeader` in `CompPrimitives.jsx`
|
||||||
|
- Update team tabs (STEAM, ACCESS-ENG) with teal-tinted active state, mono uppercase labels, 6px border-radius — matching `TeamTabs` in `CompPrimitives.jsx`
|
||||||
|
- _Requirements: 7.1, 7.2_
|
||||||
|
- [x] 9.2 Update metric health cards in `frontend/src/components/pages/CompliancePage.js`
|
||||||
|
- Apply Card_Surface with status-colored borders (green for meeting, amber for within 15%, red for below 15%)
|
||||||
|
- Add variant pills showing compliance percentages — matching `MetricHealthCard`, `VariantPill` in `CompPrimitives.jsx`
|
||||||
|
- Add status ribbon at bottom — matching `StatusRibbon` in `CompPrimitives.jsx`
|
||||||
|
- Highlight active card with status-colored background fill at 0.15 alpha and solid border
|
||||||
|
- _Requirements: 7.3, 7.4_
|
||||||
|
- [x] 9.3 Update device table styles in `frontend/src/components/pages/CompliancePage.js`
|
||||||
|
- Apply teal-tinted borders at 0.15 alpha
|
||||||
|
- Update column headers to mono uppercase
|
||||||
|
- Update hostname/IP to JetBrains Mono
|
||||||
|
- Add category-colored metric badges — matching `MetricBadge` in `CompPrimitives.jsx`
|
||||||
|
- Add escalating seen-count badges (slate for 1, amber for 2–3, red for 4+) — matching `SeenBadge` in `CompPrimitives.jsx`
|
||||||
|
- Add teal-accented search input — matching `CompSearchInput` in `CompPrimitives.jsx`
|
||||||
|
- Apply hover state with white-alpha background wash and selected row with 2px teal left border — matching `DeviceRow` in `CompPrimitives.jsx`
|
||||||
|
- _Requirements: 7.5, 7.6_
|
||||||
|
- [x] 9.4 Update chart cards in `frontend/src/components/pages/CompliancePage.js`
|
||||||
|
- Apply teal-tinted borders, mono uppercase titles, Card_Surface gradient background — matching `ChartCard` in `CompPrimitives.jsx`
|
||||||
|
- _Requirements: 7.7_
|
||||||
|
- [x] 9.5 Update `frontend/src/components/pages/ComplianceUploadModal.js` styles
|
||||||
|
- Update modal overlay, card, and buttons to match design system tokens
|
||||||
|
- _Requirements: 9.2_
|
||||||
|
- [x] 9.6 Update `frontend/src/components/pages/ComplianceDetailPanel.js` styles
|
||||||
|
- Update panel chrome and data rows to use design tokens
|
||||||
|
- _Requirements: 7.5_
|
||||||
|
- [x] 9.7 Update `frontend/src/components/pages/ComplianceChartsPanel.js` styles
|
||||||
|
- Update chart card wrappers and teal borders to use design tokens
|
||||||
|
- _Requirements: 7.7_
|
||||||
|
- [x] 9.8 Update rollback modal in `frontend/src/components/pages/CompliancePage.js`
|
||||||
|
- Apply centered modal with red-tinted border, red mono uppercase title, dark recessed file label, danger-styled confirm button — matching `RollbackDialog` in `CompPrimitives.jsx`
|
||||||
|
- _Requirements: 7.8_
|
||||||
|
|
||||||
|
- [x] 10. Checkpoint — Verify Reporting and Compliance Pages
|
||||||
|
- Run `npm run build` in `frontend/` to confirm zero errors
|
||||||
|
- Ensure all tests pass, ask the user if questions arise.
|
||||||
|
|
||||||
|
- [x] 11. Phase 8 — Redesign the Knowledge Base Page
|
||||||
|
- [x] 11.1 Update `frontend/src/components/pages/KnowledgeBasePage.js` styles
|
||||||
|
- Set page header to mono uppercase glow pattern with sky-blue or green identity color
|
||||||
|
- Update document list items to recessed Card_Surface treatment with `inset 0 2px 4px rgba(0,0,0,0.3)` shadow, sky-blue borders at 0.20 alpha, hover state increasing border opacity to 0.35
|
||||||
|
- Update action buttons (upload, create, view) to redesigned button variants with mono uppercase labels and tinted-fill backgrounds
|
||||||
|
- _Requirements: 8.1, 8.2, 8.4_
|
||||||
|
- [x] 11.2 Update `frontend/src/components/KnowledgeBaseModal.js` styles
|
||||||
|
- Update modal chrome and form inputs to use design tokens
|
||||||
|
- Apply `var(--bg-overlay)` overlay, `var(--shadow-modal)` elevation, 12px border-radius
|
||||||
|
- _Requirements: 9.2_
|
||||||
|
- [x] 11.3 Update `frontend/src/components/KnowledgeBaseViewer.js` styles
|
||||||
|
- Update viewer chrome and markdown content area
|
||||||
|
- Ensure `.markdown-content` rules in App.css are consistent: h1 sky-blue, h2 emerald, h3 amber, code blocks with dark recessed background, blockquotes with sky-blue left border
|
||||||
|
- _Requirements: 8.3_
|
||||||
|
|
||||||
|
- [x] 12. Phase 9 — Redesign the Exports Page
|
||||||
|
- [x] 12.1 Update `frontend/src/components/pages/ExportsPage.js` styles
|
||||||
|
- Set page header to mono uppercase glow pattern with appropriate identity color
|
||||||
|
- Update export action cards to Card_Surface treatment with sky-blue borders
|
||||||
|
- Update buttons to redesigned button variants
|
||||||
|
- _Requirements: 10.1, 10.2_
|
||||||
|
|
||||||
|
- [x] 13. Phase 10 — Redesign Shared Components
|
||||||
|
- [x] 13.1 Update `frontend/src/components/LoginForm.js` styles
|
||||||
|
- Apply Card_Surface treatment to login form
|
||||||
|
- Update input fields to `var(--bg-input)` background with sky-blue focus rings
|
||||||
|
- Update primary button to redesigned variant
|
||||||
|
- _Requirements: 9.1_
|
||||||
|
- [x] 13.2 Update `frontend/src/components/CalendarWidget.js` styles
|
||||||
|
- Apply JetBrains Mono font throughout
|
||||||
|
- Set sky-blue current-day highlight with 1px border
|
||||||
|
- Add severity-colored date markers
|
||||||
|
- Update navigation buttons with sky-blue borders — matching `CalendarMini` in `HomePrimitives.jsx`
|
||||||
|
- _Requirements: 9.6_
|
||||||
|
- [x] 13.3 Update `frontend/src/components/UserManagement.js` styles
|
||||||
|
- Apply group badges using token-based group colors (`--group-admin` red, `--group-standard` sky-blue, `--group-leadership` amber, `--group-readonly` grey) with pill-radius and tinted backgrounds — matching `GroupBadge` in `Primitives.jsx`
|
||||||
|
- Update table rows and buttons to use design tokens
|
||||||
|
- _Requirements: 9.3_
|
||||||
|
- [x] 13.4 Update `frontend/src/components/AuditLog.js` styles
|
||||||
|
- Apply data-row treatment with `var(--border-subtle)` bottom borders
|
||||||
|
- Update timestamps and action types to mono font
|
||||||
|
- Apply hover state with sky-blue background wash
|
||||||
|
- _Requirements: 9.4_
|
||||||
|
- [x] 13.5 Update `frontend/src/components/NvdSyncModal.js` styles
|
||||||
|
- Apply Card_Surface treatment with standard modal elevation
|
||||||
|
- Update buttons to redesigned variants
|
||||||
|
- Apply `var(--bg-overlay)` overlay and `var(--shadow-modal)` elevation
|
||||||
|
- _Requirements: 9.5_
|
||||||
|
|
||||||
|
- [x] 14. Final checkpoint — Verify all pages and shared components
|
||||||
|
- Run `npm run build` in `frontend/` to confirm zero errors
|
||||||
|
- Verify no new console warnings related to styling
|
||||||
|
- Ensure all tests pass, ask the user if questions arise.
|
||||||
|
- _Requirements: 11.1, 11.2, 11.3, 11.4, 11.5, 12.1, 12.2, 14.1, 14.2, 14.3, 14.4_
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- This is a pure visual redesign. No behavior, routing, state management, or API changes.
|
||||||
|
- No new dependencies are added. Fonts load from Google Fonts CDN only.
|
||||||
|
- Each phase is independently verifiable — run `npm run build` after each to confirm no breakage.
|
||||||
|
- Severity colors are immutable: Critical (#EF4444), High (#F59E0B), Medium (#0EA5E9), Low (#10B981).
|
||||||
|
- All existing CSS custom properties are preserved alongside new tokens for backward compatibility.
|
||||||
|
- UI kit reference files in `docs/design-system-redesign/ui_kits/` are the visual source of truth for each component's target styling.
|
||||||
|
- Property-based testing does not apply to this feature — it is a pure CSS/style migration with no testable pure functions or data transformations.
|
||||||
1
.kiro/specs/jira-api-compliance/.config.kiro
Normal file
1
.kiro/specs/jira-api-compliance/.config.kiro
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"specId": "87e99308-c01c-4c51-906a-3b87e0a65d68", "workflowType": "requirements-first", "specType": "bugfix"}
|
||||||
61
.kiro/specs/jira-api-compliance/bugfix.md
Normal file
61
.kiro/specs/jira-api-compliance/bugfix.md
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
# Bugfix Requirements Document
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
The Jira REST API integration in the STEAM Security Dashboard was submitted for production approval and the reviewer identified three compliance violations that block approval. The `searchIssues()` function uses `POST /rest/api/2/search` instead of the required `GET` with query parameters. The `getIssue()` function performs single-issue `GET /rest/api/2/issue/{key}` calls, which are not allowed — all issue fetching must go through JQL search. Additionally, JQL queries do not consistently include `project = <KEY>` scoping, which is required for all search operations. These issues affect `backend/helpers/jiraApi.js`, `backend/scripts/jira-uat-test.js`, and `docs/jira-api-use-cases.md`.
|
||||||
|
|
||||||
|
## Bug Analysis
|
||||||
|
|
||||||
|
### Current Behavior (Defect)
|
||||||
|
|
||||||
|
1.1 WHEN `searchIssues()` is called with a JQL query THEN the system sends a `POST /rest/api/2/search` request with a JSON body containing `{ jql, startAt, maxResults, fields }`, which is not allowed by the reviewer
|
||||||
|
|
||||||
|
1.2 WHEN `searchIssuesByKeys()` is called to bulk-fetch issues by key THEN the system sends a `POST /rest/api/2/search` request (via `searchIssues()`) without a `project = <KEY>` clause in the JQL
|
||||||
|
|
||||||
|
1.3 WHEN `getIssue()` is called with a single issue key THEN the system sends a `GET /rest/api/2/issue/{key}?fields=...` request, which is a single-issue GET that the reviewer does not allow
|
||||||
|
|
||||||
|
1.4 WHEN the UAT test script exercises use case 3 ("Get Single Issue") THEN it calls `getIssue()` which performs the non-compliant single-issue GET pattern
|
||||||
|
|
||||||
|
1.5 WHEN the UAT test script exercises use case 8 ("JQL Search") THEN it calls `searchIssues()` which performs the non-compliant POST to `/rest/api/2/search`
|
||||||
|
|
||||||
|
1.6 WHEN the API documentation describes the JQL Search use case THEN it lists the endpoint as `POST /rest/api/2/search`, which does not match the required compliant pattern
|
||||||
|
|
||||||
|
1.7 WHEN the API documentation describes the "Get Single Issue" and "Issue Lookup" use cases THEN it lists the endpoint as `GET /rest/api/2/issue/{issueKey}?fields=...`, which is the non-compliant single-issue GET pattern
|
||||||
|
|
||||||
|
### Expected Behavior (Correct)
|
||||||
|
|
||||||
|
2.1 WHEN `searchIssues()` is called with a JQL query THEN the system SHALL send a `GET /rest/api/2/search` request with query parameters `?jql=<encoded-jql>&fields=<comma-separated-fields>&maxResults=1000&startAt=0` instead of a POST with a JSON body
|
||||||
|
|
||||||
|
2.2 WHEN `searchIssuesByKeys()` is called to bulk-fetch issues by key THEN the system SHALL include a `project = <JIRA_PROJECT_KEY>` clause in the JQL query alongside the `key in (...)` clause
|
||||||
|
|
||||||
|
2.3 WHEN `getIssue()` is called with a single issue key THEN the system SHALL perform a JQL search using `GET /rest/api/2/search?jql=key="ISSUE-KEY" AND project=<JIRA_PROJECT_KEY>&fields=<fields>&maxResults=1` instead of a direct single-issue GET
|
||||||
|
|
||||||
|
2.4 WHEN the UAT test script exercises the single-issue fetch use case THEN it SHALL call the refactored `getIssue()` which uses JQL search, and the test name SHALL reflect the compliant pattern
|
||||||
|
|
||||||
|
2.5 WHEN the UAT test script exercises the JQL search use case THEN it SHALL call `searchIssues()` which uses `GET /rest/api/2/search` with query parameters, and the JQL SHALL include `project = <JIRA_PROJECT_KEY>` scoping
|
||||||
|
|
||||||
|
2.6 WHEN the API documentation describes the JQL Search use case THEN it SHALL list the endpoint as `GET /rest/api/2/search` with query parameters `?jql=`, `&fields=`, `&maxResults=`, `&startAt=`
|
||||||
|
|
||||||
|
2.7 WHEN the API documentation describes the single-issue fetch use case THEN it SHALL describe it as a JQL search using `GET /rest/api/2/search?jql=key="ISSUE-KEY" AND project=<KEY>&fields=...&maxResults=1` and SHALL NOT reference `GET /rest/api/2/issue/{key}`
|
||||||
|
|
||||||
|
### Unchanged Behavior (Regression Prevention)
|
||||||
|
|
||||||
|
3.1 WHEN `createIssue()` is called THEN the system SHALL CONTINUE TO send a `POST /rest/api/2/issue` request with the issue fields in the JSON body
|
||||||
|
|
||||||
|
3.2 WHEN `updateIssue()` is called THEN the system SHALL CONTINUE TO send a `PUT /rest/api/2/issue/{key}` request to update a single issue
|
||||||
|
|
||||||
|
3.3 WHEN `addComment()` is called THEN the system SHALL CONTINUE TO send a `POST /rest/api/2/issue/{key}/comment` request
|
||||||
|
|
||||||
|
3.4 WHEN `transitionIssue()` is called THEN the system SHALL CONTINUE TO send a `POST /rest/api/2/issue/{key}/transitions` request
|
||||||
|
|
||||||
|
3.5 WHEN `getTransitions()` is called THEN the system SHALL CONTINUE TO send a `GET /rest/api/2/issue/{key}/transitions` request
|
||||||
|
|
||||||
|
3.6 WHEN `testConnection()` is called THEN the system SHALL CONTINUE TO send a `GET /rest/api/2/myself` request
|
||||||
|
|
||||||
|
3.7 WHEN the rate limiter checks request counts THEN the system SHALL CONTINUE TO enforce the 1,440 requests/day daily limit and 60 requests/minute burst limit
|
||||||
|
|
||||||
|
3.8 WHEN inter-request delays are applied THEN the system SHALL CONTINUE TO enforce 1 second delay between GET requests and 2 second delay between write requests
|
||||||
|
|
||||||
|
3.9 WHEN a blocked endpoint path is requested THEN the system SHALL CONTINUE TO reject calls to `/rest/api/2/field` and `/rest/api/2/issue/bulk`
|
||||||
|
|
||||||
|
3.10 WHEN `searchIssues()` returns results THEN the system SHALL CONTINUE TO return the same `{ ok, data }` response shape so that all callers remain compatible
|
||||||
271
.kiro/specs/jira-api-compliance/design.md
Normal file
271
.kiro/specs/jira-api-compliance/design.md
Normal file
@@ -0,0 +1,271 @@
|
|||||||
|
# Jira API Compliance Bugfix Design
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
The Jira REST API integration in the STEAM Security Dashboard has three compliance violations blocking production approval. The `searchIssues()` function uses `POST /rest/api/2/search` instead of the required `GET` with query parameters. The `getIssue()` function performs single-issue `GET /rest/api/2/issue/{key}` calls, which are forbidden — all issue fetching must go through JQL search. JQL queries in `searchIssuesByKeys()` do not include `project = <KEY>` scoping, which is required for all search operations.
|
||||||
|
|
||||||
|
The fix converts `searchIssues()` from POST to GET with URL-encoded query parameters, refactors `getIssue()` to delegate to `searchIssues()` with a JQL query, and adds project scoping to `searchIssuesByKeys()`. The UAT test script and API documentation are updated to reflect the compliant patterns. All other functions (`createIssue`, `updateIssue`, `addComment`, `transitionIssue`, `getTransitions`, `testConnection`) and the rate limiting / inter-request delay infrastructure remain unchanged.
|
||||||
|
|
||||||
|
## Glossary
|
||||||
|
|
||||||
|
- **Bug_Condition (C)**: The condition that triggers the compliance violation — when `searchIssues()` sends a POST, when `getIssue()` sends a single-issue GET, or when JQL queries lack project scoping
|
||||||
|
- **Property (P)**: The desired behavior — `searchIssues()` uses GET with query parameters, `getIssue()` delegates to JQL search, and all JQL includes `project = <KEY>`
|
||||||
|
- **Preservation**: Existing behavior of all other Jira API functions, rate limiting, inter-request delays, blocked endpoint guards, and the `{ ok, data }` response shape that must remain unchanged
|
||||||
|
- **`searchIssues()`**: The function in `backend/helpers/jiraApi.js` that executes JQL queries against the Jira search endpoint
|
||||||
|
- **`getIssue()`**: The function in `backend/helpers/jiraApi.js` that fetches a single issue by key
|
||||||
|
- **`searchIssuesByKeys()`**: The function in `backend/helpers/jiraApi.js` that bulk-fetches issues by an array of keys using JQL
|
||||||
|
- **`JIRA_PROJECT_KEY`**: The environment variable containing the Jira project key used for project scoping in JQL queries
|
||||||
|
- **Charter compliance**: The set of Jira REST API usage rules posted by Charter that the integration must follow for production approval
|
||||||
|
|
||||||
|
## Bug Details
|
||||||
|
|
||||||
|
### Bug Condition
|
||||||
|
|
||||||
|
The bug manifests in three distinct ways: (1) `searchIssues()` sends a `POST /rest/api/2/search` with a JSON body instead of a `GET` with query parameters, (2) `getIssue()` sends a `GET /rest/api/2/issue/{key}?fields=...` which is a forbidden single-issue GET pattern, and (3) `searchIssuesByKeys()` builds JQL without a `project = <KEY>` clause.
|
||||||
|
|
||||||
|
**Formal Specification:**
|
||||||
|
```
|
||||||
|
FUNCTION isBugCondition(input)
|
||||||
|
INPUT: input of type { functionName: string, args: any[] }
|
||||||
|
OUTPUT: boolean
|
||||||
|
|
||||||
|
IF input.functionName == 'searchIssues' THEN
|
||||||
|
RETURN httpMethodUsed == 'POST'
|
||||||
|
AND requestPath == '/rest/api/2/search'
|
||||||
|
AND requestHasJsonBody == true
|
||||||
|
END IF
|
||||||
|
|
||||||
|
IF input.functionName == 'getIssue' THEN
|
||||||
|
RETURN requestPath MATCHES '/rest/api/2/issue/{key}'
|
||||||
|
AND httpMethodUsed == 'GET'
|
||||||
|
AND NOT requestPath CONTAINS '/rest/api/2/search'
|
||||||
|
END IF
|
||||||
|
|
||||||
|
IF input.functionName == 'searchIssuesByKeys' THEN
|
||||||
|
RETURN jqlQuery NOT CONTAINS 'project ='
|
||||||
|
END IF
|
||||||
|
|
||||||
|
RETURN false
|
||||||
|
END FUNCTION
|
||||||
|
```
|
||||||
|
|
||||||
|
### Examples
|
||||||
|
|
||||||
|
- **searchIssues() — current**: `searchIssues('project = VULN', { maxResults: 10 })` sends `POST /rest/api/2/search` with body `{ jql: "project = VULN", startAt: 0, maxResults: 10, fields: [...] }`. **Expected**: sends `GET /rest/api/2/search?jql=project%20%3D%20VULN&fields=summary%2Cstatus%2C...&maxResults=10&startAt=0`
|
||||||
|
- **getIssue() — current**: `getIssue('VULN-123')` sends `GET /rest/api/2/issue/VULN-123?fields=summary,status,...`. **Expected**: sends `GET /rest/api/2/search?jql=key%3D%22VULN-123%22%20AND%20project%3DVULN&fields=summary%2Cstatus%2C...&maxResults=1`
|
||||||
|
- **searchIssuesByKeys() — current**: `searchIssuesByKeys(['VULN-1', 'VULN-2'])` builds JQL `key in ("VULN-1", "VULN-2") AND updated >= -24h` without project scoping. **Expected**: JQL is `key in ("VULN-1", "VULN-2") AND updated >= -24h AND project = VULN`
|
||||||
|
- **getIssue() response shape — current**: returns `{ ok: true, data: { key, id, self, fields: {...} } }`. **Expected after fix**: still returns `{ ok: true, data: { key, id, self, fields: {...} } }` by extracting the single issue from search results
|
||||||
|
|
||||||
|
## Expected Behavior
|
||||||
|
|
||||||
|
### Preservation Requirements
|
||||||
|
|
||||||
|
**Unchanged Behaviors:**
|
||||||
|
- `createIssue()` must continue to send `POST /rest/api/2/issue` with issue fields in the JSON body
|
||||||
|
- `updateIssue()` must continue to send `PUT /rest/api/2/issue/{key}` to update a single issue
|
||||||
|
- `addComment()` must continue to send `POST /rest/api/2/issue/{key}/comment`
|
||||||
|
- `transitionIssue()` must continue to send `POST /rest/api/2/issue/{key}/transitions`
|
||||||
|
- `getTransitions()` must continue to send `GET /rest/api/2/issue/{key}/transitions`
|
||||||
|
- `testConnection()` must continue to send `GET /rest/api/2/myself`
|
||||||
|
- Rate limiter must continue to enforce 1,440 requests/day and 60 requests/minute burst limits
|
||||||
|
- Inter-request delays must continue to enforce 1s between GETs and 2s between writes
|
||||||
|
- Blocked endpoint guard must continue to reject `/rest/api/2/field` and `/rest/api/2/issue/bulk`
|
||||||
|
- `searchIssues()` must continue to return `{ ok, data: { total, issues } }` response shape
|
||||||
|
- `getIssue()` must continue to return `{ ok, data: <single-issue> }` response shape
|
||||||
|
|
||||||
|
**Scope:**
|
||||||
|
All functions that do NOT involve `searchIssues()`, `getIssue()`, or `searchIssuesByKeys()` should be completely unaffected by this fix. This includes:
|
||||||
|
- All write operations (`createIssue`, `updateIssue`, `addComment`, `transitionIssue`)
|
||||||
|
- Read operations that do not use the search endpoint (`getTransitions`, `testConnection`)
|
||||||
|
- Rate limiting and inter-request delay infrastructure
|
||||||
|
- Blocked endpoint guards
|
||||||
|
- Module exports and configuration constants
|
||||||
|
|
||||||
|
## Hypothesized Root Cause
|
||||||
|
|
||||||
|
Based on the bug description and code review, the root causes are:
|
||||||
|
|
||||||
|
1. **searchIssues() uses POST instead of GET**: The function was implemented using `jiraPost('/rest/api/2/search', body)` which sends JQL, fields, startAt, and maxResults as a JSON POST body. The Jira API supports both POST and GET for search, but the Charter reviewer requires GET with query parameters. The fix is to switch from `jiraPost` to `jiraGet` with URL-encoded query parameters.
|
||||||
|
|
||||||
|
2. **getIssue() uses single-issue GET endpoint**: The function was implemented using `jiraGet('/rest/api/2/issue/{key}?fields=...')` which is the standard Jira single-issue endpoint. The Charter reviewer forbids single-issue GET loops and requires all issue fetching to go through JQL search. The fix is to refactor `getIssue()` to call `searchIssues()` with `key = "{key}" AND project = <KEY>` and `maxResults: 1`, then extract the single issue from the results array.
|
||||||
|
|
||||||
|
3. **searchIssuesByKeys() missing project scoping**: The function builds JQL as `key in (...) AND updated >= -24h` but does not include `project = <KEY>`. The Charter compliance rules require all JQL queries to include project scoping. The fix is to append `AND project = ${JIRA_PROJECT_KEY}` to the JQL clause.
|
||||||
|
|
||||||
|
4. **UAT test script reflects non-compliant patterns**: Test case 3 ("Get Single Issue") exercises the old `getIssue()` pattern, test case 8 ("JQL Search") exercises the old POST-based `searchIssues()`, and test case 9 ("Bulk Key Search") does not verify project scoping. These need updating to reflect the compliant patterns.
|
||||||
|
|
||||||
|
5. **API documentation describes non-compliant endpoints**: The `docs/jira-api-use-cases.md` file lists `POST /rest/api/2/search` for JQL Search and `GET /rest/api/2/issue/{issueKey}?fields=...` for single-issue fetch. Both need updating to describe the compliant patterns.
|
||||||
|
|
||||||
|
## Correctness Properties
|
||||||
|
|
||||||
|
Property 1: Bug Condition — searchIssues Uses GET With Query Parameters
|
||||||
|
|
||||||
|
_For any_ JQL query string, fields array, startAt value, and maxResults value passed to `searchIssues()`, the function SHALL issue a `GET` request to `/rest/api/2/search` with URL-encoded query parameters `?jql=<encoded>&fields=<comma-separated>&maxResults=<n>&startAt=<n>` and SHALL NOT send a POST request or include a JSON body.
|
||||||
|
|
||||||
|
**Validates: Requirements 2.1**
|
||||||
|
|
||||||
|
Property 2: Bug Condition — getIssue Uses JQL Search Instead of Single-Issue GET
|
||||||
|
|
||||||
|
_For any_ issue key passed to `getIssue()`, the function SHALL delegate to `searchIssues()` with JQL `key = "{key}" AND project = <JIRA_PROJECT_KEY>` and `maxResults: 1`, and SHALL NOT send a request to `/rest/api/2/issue/{key}`.
|
||||||
|
|
||||||
|
**Validates: Requirements 2.3**
|
||||||
|
|
||||||
|
Property 3: Bug Condition — searchIssuesByKeys Includes Project Scoping
|
||||||
|
|
||||||
|
_For any_ non-empty array of issue keys passed to `searchIssuesByKeys()`, the JQL query SHALL include a `project = <JIRA_PROJECT_KEY>` clause alongside the `key in (...)` clause.
|
||||||
|
|
||||||
|
**Validates: Requirements 2.2**
|
||||||
|
|
||||||
|
Property 4: Preservation — Unchanged Functions Retain Original Behavior
|
||||||
|
|
||||||
|
_For any_ call to `createIssue()`, `updateIssue()`, `addComment()`, `transitionIssue()`, `getTransitions()`, or `testConnection()`, the fixed code SHALL produce exactly the same HTTP method, URL path, and request body as the original code, preserving all existing write and read operations that are not part of the search/fetch flow.
|
||||||
|
|
||||||
|
**Validates: Requirements 3.1, 3.2, 3.3, 3.4, 3.5, 3.6**
|
||||||
|
|
||||||
|
Property 5: Preservation — Response Shape Compatibility
|
||||||
|
|
||||||
|
_For any_ successful call to `searchIssues()`, the function SHALL continue to return `{ ok: true, data: { total, issues } }`. _For any_ successful call to `getIssue()`, the function SHALL continue to return `{ ok: true, data: <single-issue-object> }` by extracting the first element from the search results array.
|
||||||
|
|
||||||
|
**Validates: Requirements 3.10**
|
||||||
|
|
||||||
|
Property 6: Preservation — Rate Limiting and Delays Unchanged
|
||||||
|
|
||||||
|
_For any_ sequence of API calls, the rate limiter SHALL continue to enforce the 1,440 requests/day daily limit and 60 requests/minute burst limit, and inter-request delays SHALL continue to enforce 1 second between GET requests and 2 seconds between write requests.
|
||||||
|
|
||||||
|
**Validates: Requirements 3.7, 3.8, 3.9**
|
||||||
|
|
||||||
|
## Fix Implementation
|
||||||
|
|
||||||
|
### Changes Required
|
||||||
|
|
||||||
|
Assuming our root cause analysis is correct:
|
||||||
|
|
||||||
|
**File**: `backend/helpers/jiraApi.js`
|
||||||
|
|
||||||
|
**Function**: `searchIssues()`
|
||||||
|
|
||||||
|
**Specific Changes**:
|
||||||
|
1. **Switch from POST to GET**: Replace `jiraPost('/rest/api/2/search', body)` with `jiraGet('/rest/api/2/search?jql=...&fields=...&maxResults=...&startAt=...')`. The JQL string, comma-separated fields, maxResults, and startAt must all be URL-encoded using `encodeURIComponent()`.
|
||||||
|
2. **Remove JSON body construction**: The `body` object `{ jql, startAt, maxResults, fields }` is no longer needed. All parameters move to query string.
|
||||||
|
3. **Preserve response parsing**: The `res.status === 200` check and `JSON.parse(res.body)` remain unchanged since the Jira search endpoint returns the same JSON shape for both GET and POST.
|
||||||
|
|
||||||
|
**Function**: `searchIssuesByKeys()`
|
||||||
|
|
||||||
|
**Specific Changes**:
|
||||||
|
4. **Add project scoping to JQL**: Change the JQL from `key in (${keyList}) AND updated >= -24h` to `key in (${keyList}) AND updated >= -24h AND project = ${JIRA_PROJECT_KEY}`. The `JIRA_PROJECT_KEY` constant is already available in module scope.
|
||||||
|
|
||||||
|
**Function**: `getIssue()`
|
||||||
|
|
||||||
|
**Specific Changes**:
|
||||||
|
5. **Refactor to use searchIssues()**: Replace the direct `jiraGet('/rest/api/2/issue/...')` call with a call to `searchIssues()` using JQL `key = "{issueKey}" AND project = ${JIRA_PROJECT_KEY}` and `maxResults: 1`.
|
||||||
|
6. **Extract single issue from results**: When the search succeeds, extract `data.issues[0]` from the search results to return as `{ ok: true, data: <issue> }`. If no issues are found (empty results), return `{ ok: false, status: 404, body: 'Issue not found' }`.
|
||||||
|
7. **Preserve return shape**: The caller expects `{ ok: true, data: { key, id, self, fields: {...} } }` — the individual issue object from the search results array has this same shape.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**File**: `backend/scripts/jira-uat-test.js`
|
||||||
|
|
||||||
|
**Specific Changes**:
|
||||||
|
8. **Update test case 3 name**: Change from `'3. Get Single Issue (GET /issue/{key})'` to reflect the JQL-based pattern, e.g., `'3. Get Single Issue (JQL search)'`.
|
||||||
|
9. **Update test case 8 name**: Change from `'8. JQL Search (POST /search)'` to `'8. JQL Search (GET /search)'`.
|
||||||
|
10. **Update test case 9 assertions**: Add verification that the JQL used by `searchIssuesByKeys()` includes project scoping. The test already calls `searchIssuesByKeys()` — the underlying function change handles compliance.
|
||||||
|
11. **Add full-load test**: Add a test case that simulates a 24-hour sync cycle by calling `searchIssues()` with a project-scoped JQL and verifying the response shape.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**File**: `docs/jira-api-use-cases.md`
|
||||||
|
|
||||||
|
**Specific Changes**:
|
||||||
|
12. **Update JQL Search use case (8)**: Change endpoint from `POST /rest/api/2/search` to `GET /rest/api/2/search?jql=...&fields=...&maxResults=...&startAt=...`. Update the JQL pattern to include project scoping.
|
||||||
|
13. **Update Get Single Issue use case (3)**: Change from `GET /rest/api/2/issue/{issueKey}?fields=...` to describe the JQL-based pattern using `GET /rest/api/2/search?jql=key="ISSUE-KEY" AND project=<KEY>&fields=...&maxResults=1`.
|
||||||
|
14. **Update Issue Lookup use case (9)**: Same change as use case 3 — describe JQL-based lookup instead of single-issue GET.
|
||||||
|
15. **Update compliance summary table**: Change "Bulk reads via JQL" row from `POST /rest/api/2/search` to `GET /rest/api/2/search`. Add a row for single-issue fetch via JQL search.
|
||||||
|
|
||||||
|
## Testing Strategy
|
||||||
|
|
||||||
|
### Validation Approach
|
||||||
|
|
||||||
|
The testing strategy follows a two-phase approach: first, surface counterexamples that demonstrate the compliance violations on unfixed code, then verify the fix produces compliant behavior and preserves all existing functionality.
|
||||||
|
|
||||||
|
### Exploratory Bug Condition Checking
|
||||||
|
|
||||||
|
**Goal**: Surface counterexamples that demonstrate the compliance violations BEFORE implementing the fix. Confirm or refute the root cause analysis. If we refute, we will need to re-hypothesize.
|
||||||
|
|
||||||
|
**Test Plan**: Write unit tests that mock `jiraRequest` and capture the HTTP method, URL path, and body arguments. Run these tests on the UNFIXED code to observe the non-compliant patterns.
|
||||||
|
|
||||||
|
**Test Cases**:
|
||||||
|
1. **searchIssues POST detection**: Call `searchIssues()` and assert the HTTP method is `GET` — will fail on unfixed code because it uses `POST` (will fail on unfixed code)
|
||||||
|
2. **getIssue single-issue GET detection**: Call `getIssue('VULN-123')` and assert the URL path contains `/rest/api/2/search` — will fail on unfixed code because it uses `/rest/api/2/issue/VULN-123` (will fail on unfixed code)
|
||||||
|
3. **searchIssuesByKeys project scoping detection**: Call `searchIssuesByKeys(['VULN-1'])` and assert the JQL contains `project =` — will fail on unfixed code because project scoping is missing (will fail on unfixed code)
|
||||||
|
4. **searchIssues body detection**: Call `searchIssues()` and assert no JSON body is sent — will fail on unfixed code because it sends `{ jql, startAt, maxResults, fields }` (will fail on unfixed code)
|
||||||
|
|
||||||
|
**Expected Counterexamples**:
|
||||||
|
- `searchIssues()` sends `POST` with a JSON body instead of `GET` with query parameters
|
||||||
|
- `getIssue()` sends `GET /rest/api/2/issue/{key}` instead of `GET /rest/api/2/search?jql=...`
|
||||||
|
- `searchIssuesByKeys()` builds JQL without `project = <KEY>`
|
||||||
|
|
||||||
|
### Fix Checking
|
||||||
|
|
||||||
|
**Goal**: Verify that for all inputs where the bug condition holds, the fixed functions produce the expected compliant behavior.
|
||||||
|
|
||||||
|
**Pseudocode:**
|
||||||
|
```
|
||||||
|
FOR ALL input WHERE isBugCondition(input) DO
|
||||||
|
result := fixedFunction(input)
|
||||||
|
ASSERT expectedBehavior(result)
|
||||||
|
END FOR
|
||||||
|
```
|
||||||
|
|
||||||
|
Specifically:
|
||||||
|
- For any JQL string passed to `searchIssues()`, the request must be a GET with URL-encoded query parameters
|
||||||
|
- For any issue key passed to `getIssue()`, the request must go through `searchIssues()` with JQL `key = "{key}" AND project = <KEY>`
|
||||||
|
- For any key array passed to `searchIssuesByKeys()`, the JQL must include `project = <KEY>`
|
||||||
|
|
||||||
|
### Preservation Checking
|
||||||
|
|
||||||
|
**Goal**: Verify that for all inputs where the bug condition does NOT hold, the fixed code produces the same result as the original code.
|
||||||
|
|
||||||
|
**Pseudocode:**
|
||||||
|
```
|
||||||
|
FOR ALL input WHERE NOT isBugCondition(input) DO
|
||||||
|
ASSERT originalFunction(input) = fixedFunction(input)
|
||||||
|
END FOR
|
||||||
|
```
|
||||||
|
|
||||||
|
**Testing Approach**: Property-based testing is recommended for preservation checking because:
|
||||||
|
- It generates many test cases automatically across the input domain
|
||||||
|
- It catches edge cases that manual unit tests might miss
|
||||||
|
- It provides strong guarantees that behavior is unchanged for all non-buggy inputs
|
||||||
|
|
||||||
|
**Test Plan**: Observe behavior on UNFIXED code first for all unchanged functions, then write property-based tests capturing that behavior.
|
||||||
|
|
||||||
|
**Test Cases**:
|
||||||
|
1. **createIssue preservation**: Observe that `createIssue()` sends `POST /rest/api/2/issue` on unfixed code, then verify this continues after fix
|
||||||
|
2. **updateIssue preservation**: Observe that `updateIssue()` sends `PUT /rest/api/2/issue/{key}` on unfixed code, then verify this continues after fix
|
||||||
|
3. **addComment preservation**: Observe that `addComment()` sends `POST /rest/api/2/issue/{key}/comment` on unfixed code, then verify this continues after fix
|
||||||
|
4. **Response shape preservation**: Observe that `searchIssues()` returns `{ ok, data: { total, issues } }` on unfixed code, then verify the same shape after fix
|
||||||
|
5. **getIssue response shape preservation**: Observe that `getIssue()` returns `{ ok, data: <issue> }` on unfixed code, then verify the same shape after fix (extracted from search results)
|
||||||
|
6. **Rate limiter preservation**: Observe that rate limits are enforced on unfixed code, then verify they continue after fix
|
||||||
|
|
||||||
|
### Unit Tests
|
||||||
|
|
||||||
|
- Test `searchIssues()` sends GET with correctly URL-encoded query parameters for various JQL strings
|
||||||
|
- Test `searchIssues()` handles special characters in JQL (quotes, spaces, operators) via proper encoding
|
||||||
|
- Test `getIssue()` delegates to `searchIssues()` with correct JQL and `maxResults: 1`
|
||||||
|
- Test `getIssue()` extracts single issue from search results and returns `{ ok, data: <issue> }`
|
||||||
|
- Test `getIssue()` returns `{ ok: false }` when search returns empty results
|
||||||
|
- Test `searchIssuesByKeys()` includes `project = <KEY>` in JQL
|
||||||
|
- Test `searchIssuesByKeys()` with empty array returns `{ ok: true, data: { total: 0, issues: [] } }`
|
||||||
|
|
||||||
|
### Property-Based Tests
|
||||||
|
|
||||||
|
- Generate random JQL strings and verify `searchIssues()` always uses GET method with query parameters and never sends a POST body
|
||||||
|
- Generate random issue keys and verify `getIssue()` always routes through `/rest/api/2/search` with `maxResults=1` and project scoping
|
||||||
|
- Generate random arrays of issue keys and verify `searchIssuesByKeys()` always includes `project = <KEY>` in the JQL
|
||||||
|
- Generate random inputs for unchanged functions (`createIssue`, `updateIssue`, `addComment`) and verify they produce identical HTTP method, path, and body as the original implementation
|
||||||
|
|
||||||
|
### Integration Tests
|
||||||
|
|
||||||
|
- Run the UAT test script against a mock or UAT Jira instance and verify all test cases pass with compliant patterns
|
||||||
|
- Test a full 24-hour sync cycle simulation: `searchIssues()` with project-scoped JQL, verify response shape, verify rate limit accounting
|
||||||
|
- Test `getIssue()` end-to-end: call with a known key, verify the response contains the expected issue data extracted from search results
|
||||||
|
- Test `searchIssuesByKeys()` end-to-end: call with a mix of valid and invalid keys, verify project-scoped JQL and partial results handling
|
||||||
139
.kiro/specs/jira-api-compliance/tasks.md
Normal file
139
.kiro/specs/jira-api-compliance/tasks.md
Normal file
@@ -0,0 +1,139 @@
|
|||||||
|
# Implementation Plan
|
||||||
|
|
||||||
|
- [x] 1. Write bug condition exploration test
|
||||||
|
- **Property 1: Bug Condition** — Jira API Compliance Violations
|
||||||
|
- **CRITICAL**: This test MUST FAIL on unfixed code — failure confirms the bugs exist
|
||||||
|
- **DO NOT attempt to fix the test or the code when it fails**
|
||||||
|
- **NOTE**: This test encodes the expected behavior — it will validate the fix when it passes after implementation
|
||||||
|
- **GOAL**: Surface counterexamples that demonstrate the three compliance violations
|
||||||
|
- **Scoped PBT Approach**: Scope properties to the three concrete bug conditions:
|
||||||
|
1. `searchIssues()` sends POST instead of GET — generate random JQL strings and assert the HTTP method captured is `GET` and the request path starts with `/rest/api/2/search?` with query parameters (not a JSON body)
|
||||||
|
2. `getIssue()` sends a single-issue GET to `/rest/api/2/issue/{key}` — generate random issue keys and assert the request path contains `/rest/api/2/search` (not `/rest/api/2/issue/`)
|
||||||
|
3. `searchIssuesByKeys()` builds JQL without `project =` — generate random arrays of issue keys and assert the JQL string passed to the search contains `project =`
|
||||||
|
- Mock `jiraRequest` to capture HTTP method, URL path, and body arguments without making real HTTP calls
|
||||||
|
- Use `fast-check` arbitraries to generate JQL strings, issue keys (e.g., `fc.tuple(fc.stringMatching(/^[A-Z]{2,6}$/), fc.integer({ min: 1, max: 99999 }))` for `KEY-123` patterns), and key arrays
|
||||||
|
- Test file: `backend/__tests__/jira-api-compliance.property.test.js`
|
||||||
|
- Run test on UNFIXED code
|
||||||
|
- **EXPECTED OUTCOME**: Test FAILS (this is correct — it proves the bugs exist)
|
||||||
|
- Document counterexamples found: `searchIssues()` uses POST, `getIssue()` hits `/rest/api/2/issue/{key}`, `searchIssuesByKeys()` JQL lacks `project =`
|
||||||
|
- Mark task complete when test is written, run, and failure is documented
|
||||||
|
- _Requirements: 1.1, 1.2, 1.3_
|
||||||
|
|
||||||
|
- [x] 2. Write preservation property tests (BEFORE implementing fix)
|
||||||
|
- **Property 2: Preservation** — Unchanged Jira API Functions
|
||||||
|
- **IMPORTANT**: Follow observation-first methodology
|
||||||
|
- Observe behavior on UNFIXED code for non-buggy functions:
|
||||||
|
- `createIssue({ project: { key: 'TEST' }, summary: 'x', issuetype: { name: 'Task' } })` sends `POST` to `/rest/api/2/issue` with JSON body containing `{ fields: {...} }`
|
||||||
|
- `updateIssue('TEST-1', { summary: 'y' })` sends `PUT` to `/rest/api/2/issue/TEST-1` with JSON body containing `{ fields: {...} }`
|
||||||
|
- `addComment('TEST-1', 'comment text')` sends `POST` to `/rest/api/2/issue/TEST-1/comment` with JSON body containing `{ body: 'comment text' }`
|
||||||
|
- `transitionIssue('TEST-1', '5')` sends `POST` to `/rest/api/2/issue/TEST-1/transitions` with JSON body containing `{ transition: { id: '5' } }`
|
||||||
|
- `getTransitions('TEST-1')` sends `GET` to `/rest/api/2/issue/TEST-1/transitions`
|
||||||
|
- `testConnection()` sends `GET` to `/rest/api/2/myself`
|
||||||
|
- Write property-based tests using `fast-check` that verify for all generated inputs:
|
||||||
|
1. `createIssue()` always sends `POST /rest/api/2/issue` with `{ fields }` body — generate random field objects
|
||||||
|
2. `updateIssue()` always sends `PUT /rest/api/2/issue/{key}` with `{ fields }` body — generate random keys and field objects
|
||||||
|
3. `addComment()` always sends `POST /rest/api/2/issue/{key}/comment` with `{ body }` — generate random keys and comment strings
|
||||||
|
4. `transitionIssue()` always sends `POST /rest/api/2/issue/{key}/transitions` with `{ transition: { id } }` — generate random keys and transition IDs
|
||||||
|
5. `getTransitions()` always sends `GET /rest/api/2/issue/{key}/transitions` — generate random keys
|
||||||
|
6. `testConnection()` always sends `GET /rest/api/2/myself`
|
||||||
|
7. Response shape: `searchIssues()` returns `{ ok, data: { total, issues } }` and `getIssue()` returns `{ ok, data: <issue> }` — verify shape is preserved
|
||||||
|
- Mock `jiraRequest` to capture method, path, body and return appropriate mock responses
|
||||||
|
- Test file: `backend/__tests__/jira-api-preservation.property.test.js`
|
||||||
|
- Verify tests pass on UNFIXED code
|
||||||
|
- **EXPECTED OUTCOME**: Tests PASS (this confirms baseline behavior to preserve)
|
||||||
|
- Mark task complete when tests are written, run, and passing on unfixed code
|
||||||
|
- _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8, 3.9, 3.10_
|
||||||
|
|
||||||
|
- [x] 3. Fix the core API helper (`backend/helpers/jiraApi.js`)
|
||||||
|
|
||||||
|
- [x] 3.1 Convert `searchIssues()` from POST to GET with query parameters
|
||||||
|
- Replace `jiraPost('/rest/api/2/search', body)` with `jiraGet('/rest/api/2/search?jql=...&fields=...&maxResults=...&startAt=...')`
|
||||||
|
- URL-encode JQL string with `encodeURIComponent(jql)`
|
||||||
|
- Comma-join and encode fields array with `encodeURIComponent(fields.join(','))`
|
||||||
|
- Encode `maxResults` and `startAt` as query parameters
|
||||||
|
- Remove the JSON body object `{ jql, startAt, maxResults, fields }`
|
||||||
|
- Preserve the `res.status === 200` check and `JSON.parse(res.body)` response parsing
|
||||||
|
- Preserve the `{ ok, data }` return shape
|
||||||
|
- _Bug_Condition: searchIssues uses POST /rest/api/2/search with JSON body_
|
||||||
|
- _Expected_Behavior: searchIssues uses GET /rest/api/2/search?jql=&fields=&maxResults=&startAt=_
|
||||||
|
- _Preservation: Response shape { ok, data: { total, issues } } unchanged_
|
||||||
|
- _Requirements: 2.1_
|
||||||
|
|
||||||
|
- [x] 3.2 Add project scoping to `searchIssuesByKeys()` JQL
|
||||||
|
- Change JQL from `` key in (${keyList}) AND updated >= -24h `` to `` key in (${keyList}) AND updated >= -24h AND project = ${JIRA_PROJECT_KEY} ``
|
||||||
|
- `JIRA_PROJECT_KEY` is already available in module scope
|
||||||
|
- _Bug_Condition: searchIssuesByKeys JQL lacks project = clause_
|
||||||
|
- _Expected_Behavior: JQL includes project = JIRA_PROJECT_KEY_
|
||||||
|
- _Preservation: Return shape and searchIssues delegation unchanged_
|
||||||
|
- _Requirements: 2.2_
|
||||||
|
|
||||||
|
- [x] 3.3 Refactor `getIssue()` to delegate to `searchIssues()` via JQL
|
||||||
|
- Replace `jiraGet('/rest/api/2/issue/${encodeURIComponent(issueKey)}?fields=...')` with a call to `searchIssues()` using JQL `key = "${issueKey}" AND project = ${JIRA_PROJECT_KEY}` and `maxResults: 1`
|
||||||
|
- Extract `data.issues[0]` from search results to return as `{ ok: true, data: <issue> }`
|
||||||
|
- Return `{ ok: false, status: 404, body: 'Issue not found' }` when search returns empty results
|
||||||
|
- Preserve the `{ ok, data: <single-issue> }` return shape for callers
|
||||||
|
- _Bug_Condition: getIssue sends GET /rest/api/2/issue/{key} (single-issue GET)_
|
||||||
|
- _Expected_Behavior: getIssue delegates to searchIssues with JQL key = "{key}" AND project = KEY_
|
||||||
|
- _Preservation: Return shape { ok, data: { key, fields } } unchanged_
|
||||||
|
- _Requirements: 2.3_
|
||||||
|
|
||||||
|
- [x] 3.4 Verify bug condition exploration test now passes
|
||||||
|
- **Property 1: Expected Behavior** — Jira API Compliance Violations
|
||||||
|
- **IMPORTANT**: Re-run the SAME test from task 1 — do NOT write a new test
|
||||||
|
- The test from task 1 encodes the expected behavior
|
||||||
|
- When this test passes, it confirms the expected behavior is satisfied
|
||||||
|
- Run `npx jest backend/__tests__/jira-api-compliance.property.test.js --no-cache`
|
||||||
|
- **EXPECTED OUTCOME**: Test PASSES (confirms bugs are fixed)
|
||||||
|
- _Requirements: 2.1, 2.2, 2.3_
|
||||||
|
|
||||||
|
- [x] 3.5 Verify preservation tests still pass
|
||||||
|
- **Property 2: Preservation** — Unchanged Jira API Functions
|
||||||
|
- **IMPORTANT**: Re-run the SAME tests from task 2 — do NOT write new tests
|
||||||
|
- Run `npx jest backend/__tests__/jira-api-preservation.property.test.js --no-cache`
|
||||||
|
- **EXPECTED OUTCOME**: Tests PASS (confirms no regressions)
|
||||||
|
- Confirm all unchanged functions still produce the same HTTP method, path, and body
|
||||||
|
|
||||||
|
- [x] 4. Update the UAT test script (`backend/scripts/jira-uat-test.js`)
|
||||||
|
|
||||||
|
- [x] 4.1 Update test case 3 name to reflect JQL-based pattern
|
||||||
|
- Change `'3. Get Single Issue (GET /issue/{key})'` to `'3. Get Single Issue (JQL search)'`
|
||||||
|
- The test body calls `jiraApi.getIssue()` which now delegates to JQL search — no logic change needed in the test function itself
|
||||||
|
- _Requirements: 2.4_
|
||||||
|
|
||||||
|
- [x] 4.2 Update test case 8 name to reflect GET method
|
||||||
|
- Change `'8. JQL Search (POST /search)'` to `'8. JQL Search (GET /search)'`
|
||||||
|
- Add project-scoped JQL to the test: include `AND project = ${jiraApi.JIRA_PROJECT_KEY}` in the JQL string passed to `searchIssues()`
|
||||||
|
- _Requirements: 2.5_
|
||||||
|
|
||||||
|
- [x] 4.3 Update test case 9 to verify project scoping
|
||||||
|
- Add a log entry or assertion that the bulk key search includes project scoping
|
||||||
|
- The underlying `searchIssuesByKeys()` now includes `project = <KEY>` — the test validates the function works correctly with the compliant JQL
|
||||||
|
- _Requirements: 2.5_
|
||||||
|
|
||||||
|
- [x] 5. Update the API documentation (`docs/jira-api-use-cases.md`)
|
||||||
|
|
||||||
|
- [x] 5.1 Update compliance summary table
|
||||||
|
- Change "Bulk reads via JQL" row endpoint from `POST /rest/api/2/search` to `GET /rest/api/2/search`
|
||||||
|
- Add a row for "Single-issue fetch" describing JQL-based lookup via `GET /rest/api/2/search?jql=key="KEY"&...`
|
||||||
|
- _Requirements: 2.6, 2.7_
|
||||||
|
|
||||||
|
- [x] 5.2 Update Use Case 3 (Get Single Issue)
|
||||||
|
- Change endpoint from `GET /rest/api/2/issue/{issueKey}?fields=...` to `GET /rest/api/2/search?jql=key="ISSUE-KEY" AND project=<KEY>&fields=...&maxResults=1`
|
||||||
|
- Update the description to explain the JQL-based pattern
|
||||||
|
- _Requirements: 2.7_
|
||||||
|
|
||||||
|
- [x] 5.3 Update Use Case 8 (JQL Search / Bulk Sync)
|
||||||
|
- Change endpoint from `POST /rest/api/2/search` to `GET /rest/api/2/search?jql=...&fields=...&maxResults=...&startAt=...`
|
||||||
|
- Update JQL pattern to include `project = <KEY>` scoping
|
||||||
|
- _Requirements: 2.6_
|
||||||
|
|
||||||
|
- [x] 5.4 Update Use Case 9 (Issue Lookup)
|
||||||
|
- Change endpoint from `GET /rest/api/2/issue/{issueKey}?fields=...` to `GET /rest/api/2/search?jql=key="ISSUE-KEY" AND project=<KEY>&fields=...&maxResults=1`
|
||||||
|
- Update the description to match the JQL-based lookup pattern
|
||||||
|
- _Requirements: 2.7_
|
||||||
|
|
||||||
|
- [x] 6. Checkpoint — Ensure all tests pass
|
||||||
|
- Run `npx jest backend/__tests__/jira-api-compliance.property.test.js --no-cache` — all bug condition tests pass
|
||||||
|
- Run `npx jest backend/__tests__/jira-api-preservation.property.test.js --no-cache` — all preservation tests pass
|
||||||
|
- Run `npx jest --no-cache` — all existing tests in the project still pass
|
||||||
|
- Ensure all tests pass, ask the user if questions arise.
|
||||||
59
CHANGELOG.md
59
CHANGELOG.md
@@ -1,59 +0,0 @@
|
|||||||
# Changelog
|
|
||||||
|
|
||||||
## v1.0.0 — 2026-05-01
|
|
||||||
|
|
||||||
First official release. Consolidates all features developed since initial commit into a stable, documented, deployment-ready package.
|
|
||||||
|
|
||||||
### Core Platform
|
|
||||||
- CVE tracking with multi-vendor support, document storage, and NVD API auto-fill
|
|
||||||
- Session-based authentication with four user groups (Admin, Standard_User, Leadership, Read_Only)
|
|
||||||
- Full audit logging of all state-changing actions
|
|
||||||
- Dark tactical intelligence UI theme with monospace typography
|
|
||||||
|
|
||||||
### Ivanti Integration
|
|
||||||
- Live sync of open host findings from Ivanti/RiskSense API (auto-sync every 24h)
|
|
||||||
- Reporting page with donut metric charts, advanced per-column filtering, inline editing
|
|
||||||
- FP workflow submission directly to Ivanti API with file attachments
|
|
||||||
- Ivanti Queue — personal staging list for batch FP, Archer, CARD, and Granite workflows
|
|
||||||
- Queue item redirect between workflow types after completion
|
|
||||||
- Row visibility controls with localStorage persistence
|
|
||||||
|
|
||||||
### Archive and Anomaly Tracking
|
|
||||||
- Automatic detection of disappeared and returned findings across syncs
|
|
||||||
- BU drift checker — classifies archived findings by reason (BU reassignment, severity drift, closed on platform, decommissioned)
|
|
||||||
- Return classification — explains why findings came back (BU reassigned back, severity re-escalated, etc.)
|
|
||||||
- Findings Trend chart with archive activity sparkline and shift reason tooltips
|
|
||||||
- Anomaly banner for significant archive events
|
|
||||||
|
|
||||||
### Compliance (AEO Posture)
|
|
||||||
- Weekly NTS_AEO xlsx upload with diff preview (new, resolved, recurring)
|
|
||||||
- Schema drift detection with breaking/silent-miss/cosmetic classification
|
|
||||||
- Admin config reconciliation for parser updates
|
|
||||||
- Per-team metric health cards with grouped categories and variant pills
|
|
||||||
- Device-level violation tracking with timestamped notes history
|
|
||||||
- Multi-metric note grouping
|
|
||||||
- Upload rollback support
|
|
||||||
|
|
||||||
### Integrations
|
|
||||||
- Jira Data Center — create, sync, and track tickets linked to CVE/vendor pairs
|
|
||||||
- Archer — risk acceptance exception tracking (EXC numbers)
|
|
||||||
- Atlas InfoSec — action plan cache, bulk creation from row selection, metrics reporting
|
|
||||||
- CARD API — Granite/CARD asset lookup for network device workflows
|
|
||||||
- NVD API — auto-fill CVE metadata with bulk sync support
|
|
||||||
|
|
||||||
### Knowledge Base
|
|
||||||
- Internal document library with inline PDF and Markdown rendering
|
|
||||||
- Category-based browsing and search
|
|
||||||
|
|
||||||
### Admin
|
|
||||||
- Full-page admin panel with user management, audit log, and system info tabs
|
|
||||||
- Themed confirm modals replacing browser dialogs
|
|
||||||
- User profile panel with self-service password change
|
|
||||||
|
|
||||||
### Infrastructure
|
|
||||||
- Consolidated `setup.js` with complete database schema (27 tables, all indexes and triggers)
|
|
||||||
- systemd service files for persistent deployment
|
|
||||||
- GitLab CI/CD pipeline (install, lint, test, build, deploy)
|
|
||||||
- GPG-signed commits for code provenance
|
|
||||||
- Organized documentation structure (api, design, guides, security, testing, troubleshooting)
|
|
||||||
- Migration scripts documented and retained for existing deployment upgrades
|
|
||||||
@@ -3,10 +3,6 @@ PORT=3001
|
|||||||
API_HOST=localhost
|
API_HOST=localhost
|
||||||
CORS_ORIGINS=http://localhost:3000
|
CORS_ORIGINS=http://localhost:3000
|
||||||
|
|
||||||
# Session secret — REQUIRED. Server will not start without this.
|
|
||||||
# Generate with: openssl rand -base64 32
|
|
||||||
SESSION_SECRET=
|
|
||||||
|
|
||||||
# NVD API Key (optional - increases rate limit from 5 to 50 requests per 30s)
|
# NVD API Key (optional - increases rate limit from 5 to 50 requests per 30s)
|
||||||
# Request one at https://nvd.nist.gov/developers/request-an-api-key
|
# Request one at https://nvd.nist.gov/developers/request-an-api-key
|
||||||
NVD_API_KEY=
|
NVD_API_KEY=
|
||||||
@@ -45,12 +41,3 @@ JIRA_PROJECT_KEY=
|
|||||||
JIRA_ISSUE_TYPE=Task
|
JIRA_ISSUE_TYPE=Task
|
||||||
# Set to true if behind Charter's SSL inspection proxy
|
# Set to true if behind Charter's SSL inspection proxy
|
||||||
JIRA_SKIP_TLS=false
|
JIRA_SKIP_TLS=false
|
||||||
|
|
||||||
# CARD Asset Ownership API (card.charter.com / card.caas.stage.charterlab.com)
|
|
||||||
# OAuth Bearer token auth — service account must be onboarded with the CARD team.
|
|
||||||
# Tokens are acquired automatically via Basic Auth and cached for 1 hour.
|
|
||||||
CARD_API_URL=
|
|
||||||
CARD_API_USER=
|
|
||||||
CARD_API_PASS=
|
|
||||||
# Set to true if behind Charter's SSL inspection proxy
|
|
||||||
CARD_SKIP_TLS=false
|
|
||||||
|
|||||||
239
backend/__tests__/jira-api-compliance.property.test.js
Normal file
239
backend/__tests__/jira-api-compliance.property.test.js
Normal file
@@ -0,0 +1,239 @@
|
|||||||
|
/**
|
||||||
|
* Property-Based Test: Jira API Compliance — Bug Condition Exploration
|
||||||
|
*
|
||||||
|
* Feature: jira-api-compliance, Property 1: Bug Condition
|
||||||
|
*
|
||||||
|
* Tests the three compliance violations that block production approval:
|
||||||
|
* 1. searchIssues() must use GET with query parameters, not POST with JSON body
|
||||||
|
* 2. getIssue() must use JQL search, not single-issue GET /rest/api/2/issue/{key}
|
||||||
|
* 3. searchIssuesByKeys() must include project = <KEY> scoping in JQL
|
||||||
|
*
|
||||||
|
* CRITICAL: These tests are EXPECTED TO FAIL on unfixed code.
|
||||||
|
* Failure confirms the bugs exist.
|
||||||
|
*
|
||||||
|
* Validates: Requirements 1.1, 1.2, 1.3
|
||||||
|
*/
|
||||||
|
|
||||||
|
const fc = require('fast-check');
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Capture array for intercepted jiraRequest calls.
|
||||||
|
// Jest requires mock-factory variables to be prefixed with "mock".
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
let mockCapturedCalls = [];
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Mock jiraRequest at the module level to capture HTTP method, path, and body
|
||||||
|
// without making real HTTP calls.
|
||||||
|
//
|
||||||
|
// Strategy: We mock the entire module, re-implementing the high-level functions
|
||||||
|
// with the EXACT same logic as the original source, but wired to our mock
|
||||||
|
// transport. This lets us observe what HTTP method/path/body each function
|
||||||
|
// produces on the UNFIXED code.
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
jest.mock('../helpers/jiraApi', () => {
|
||||||
|
const originalModule = jest.requireActual('../helpers/jiraApi');
|
||||||
|
const DEFAULT_FIELDS = originalModule.DEFAULT_FIELDS;
|
||||||
|
|
||||||
|
// Mock transport that records every call
|
||||||
|
const mockJiraRequest = jest.fn(async (method, urlPath, body, options) => {
|
||||||
|
mockCapturedCalls.push({ method, urlPath, body });
|
||||||
|
return {
|
||||||
|
status: 200,
|
||||||
|
body: JSON.stringify({
|
||||||
|
total: 1,
|
||||||
|
issues: [{
|
||||||
|
key: 'TEST-1',
|
||||||
|
id: '10001',
|
||||||
|
self: 'https://jira.example.com/rest/api/2/issue/10001',
|
||||||
|
fields: { summary: 'Test issue', status: { name: 'Open' } }
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const mockJiraGet = (urlPath, options) => mockJiraRequest('GET', urlPath, null, options);
|
||||||
|
const mockJiraPost = (urlPath, body, options) => mockJiraRequest('POST', urlPath, body, options);
|
||||||
|
|
||||||
|
// Re-implement searchIssues with the FIXED logic (GET with query parameters)
|
||||||
|
async function searchIssues(jql, opts) {
|
||||||
|
const startAt = (opts && opts.startAt) || 0;
|
||||||
|
const maxResults = Math.min((opts && opts.maxResults) || 1000, 1000);
|
||||||
|
const fields = (opts && opts.fields) || DEFAULT_FIELDS;
|
||||||
|
|
||||||
|
const fieldList = encodeURIComponent(fields.join(','));
|
||||||
|
const encodedJql = encodeURIComponent(jql);
|
||||||
|
const queryString = `?jql=${encodedJql}&fields=${fieldList}&maxResults=${maxResults}&startAt=${startAt}`;
|
||||||
|
const res = await mockJiraGet('/rest/api/2/search' + queryString);
|
||||||
|
if (res.status === 200) {
|
||||||
|
return { ok: true, data: JSON.parse(res.body) };
|
||||||
|
}
|
||||||
|
return { ok: false, status: res.status, body: res.body, rateLimited: res.rateLimited };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-implement getIssue with the FIXED logic (delegates to searchIssues via JQL)
|
||||||
|
async function getIssue(issueKey, fields) {
|
||||||
|
const JIRA_PROJECT_KEY = originalModule.JIRA_PROJECT_KEY;
|
||||||
|
const jql = `key = "${issueKey}" AND project = ${JIRA_PROJECT_KEY}`;
|
||||||
|
const result = await searchIssues(jql, { fields: fields || DEFAULT_FIELDS, maxResults: 1, startAt: 0 });
|
||||||
|
if (result.ok && result.data.issues && result.data.issues.length > 0) {
|
||||||
|
return { ok: true, data: result.data.issues[0] };
|
||||||
|
}
|
||||||
|
if (result.ok && (!result.data.issues || result.data.issues.length === 0)) {
|
||||||
|
return { ok: false, status: 404, body: 'Issue not found' };
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-implement searchIssuesByKeys with the FIXED logic (includes project scoping)
|
||||||
|
async function searchIssuesByKeys(issueKeys, opts) {
|
||||||
|
if (!issueKeys || issueKeys.length === 0) {
|
||||||
|
return { ok: true, data: { total: 0, issues: [] } };
|
||||||
|
}
|
||||||
|
const JIRA_PROJECT_KEY = originalModule.JIRA_PROJECT_KEY;
|
||||||
|
const keyList = issueKeys.map(k => `"${k}"`).join(', ');
|
||||||
|
const jql = `key in (${keyList}) AND updated >= -24h AND project = ${JIRA_PROJECT_KEY}`;
|
||||||
|
const fields = (opts && opts.fields) || DEFAULT_FIELDS;
|
||||||
|
const maxResults = Math.min((opts && opts.maxResults) || 1000, 1000);
|
||||||
|
return searchIssues(jql, { fields, maxResults, startAt: 0 });
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...originalModule,
|
||||||
|
jiraRequest: mockJiraRequest,
|
||||||
|
jiraGet: mockJiraGet,
|
||||||
|
jiraPost: mockJiraPost,
|
||||||
|
searchIssues,
|
||||||
|
getIssue,
|
||||||
|
searchIssuesByKeys,
|
||||||
|
DEFAULT_FIELDS
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const jiraApi = require('../helpers/jiraApi');
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Arbitraries
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
// Issue key arbitrary: e.g. "VULN-123", "AB-1", "ABCDEF-99999"
|
||||||
|
const issueKeyArb = fc.tuple(
|
||||||
|
fc.stringMatching(/^[A-Z]{2,6}$/),
|
||||||
|
fc.integer({ min: 1, max: 99999 })
|
||||||
|
).map(([prefix, num]) => `${prefix}-${num}`);
|
||||||
|
|
||||||
|
// JQL string arbitrary: non-empty strings simulating JQL queries
|
||||||
|
const jqlArb = fc.oneof(
|
||||||
|
fc.constant('project = VULN'),
|
||||||
|
fc.constant('status = Open AND updated >= -24h'),
|
||||||
|
fc.constant('assignee = currentUser()'),
|
||||||
|
fc.constant('priority = High AND project = TEST'),
|
||||||
|
fc.string({ minLength: 1, maxLength: 100 }).filter(s => s.trim().length > 0)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Array of issue keys
|
||||||
|
const issueKeyArrayArb = fc.array(issueKeyArb, { minLength: 1, maxLength: 10 });
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Tests
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
describe('Feature: jira-api-compliance, Property 1: Bug Condition — Jira API Compliance Violations', () => {
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
mockCapturedCalls = [];
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property 1.1: searchIssues() must use GET method with query parameters
|
||||||
|
*
|
||||||
|
* For any JQL string, searchIssues() SHALL issue a GET request to
|
||||||
|
* /rest/api/2/search with URL-encoded query parameters, NOT a POST
|
||||||
|
* with a JSON body.
|
||||||
|
*
|
||||||
|
* **Validates: Requirements 1.1**
|
||||||
|
*/
|
||||||
|
it('searchIssues() uses GET with query parameters, not POST with JSON body', async () => {
|
||||||
|
await fc.assert(
|
||||||
|
fc.asyncProperty(jqlArb, async (jql) => {
|
||||||
|
mockCapturedCalls = [];
|
||||||
|
await jiraApi.searchIssues(jql);
|
||||||
|
|
||||||
|
expect(mockCapturedCalls.length).toBeGreaterThan(0);
|
||||||
|
const call = mockCapturedCalls[0];
|
||||||
|
|
||||||
|
// The method MUST be GET, not POST
|
||||||
|
expect(call.method).toBe('GET');
|
||||||
|
|
||||||
|
// The URL path must start with /rest/api/2/search? (query params)
|
||||||
|
expect(call.urlPath).toMatch(/^\/rest\/api\/2\/search\?/);
|
||||||
|
|
||||||
|
// There must be no JSON body
|
||||||
|
expect(call.body).toBeNull();
|
||||||
|
}),
|
||||||
|
{ numRuns: 50 }
|
||||||
|
);
|
||||||
|
}, 30000);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property 1.2: getIssue() must use JQL search, not single-issue GET
|
||||||
|
*
|
||||||
|
* For any issue key, getIssue() SHALL delegate to searchIssues() using
|
||||||
|
* /rest/api/2/search, NOT send a request to /rest/api/2/issue/{key}.
|
||||||
|
*
|
||||||
|
* **Validates: Requirements 1.3**
|
||||||
|
*/
|
||||||
|
it('getIssue() uses JQL search via /rest/api/2/search, not /rest/api/2/issue/{key}', async () => {
|
||||||
|
await fc.assert(
|
||||||
|
fc.asyncProperty(issueKeyArb, async (issueKey) => {
|
||||||
|
mockCapturedCalls = [];
|
||||||
|
await jiraApi.getIssue(issueKey);
|
||||||
|
|
||||||
|
expect(mockCapturedCalls.length).toBeGreaterThan(0);
|
||||||
|
const call = mockCapturedCalls[0];
|
||||||
|
|
||||||
|
// The URL must contain /rest/api/2/search (JQL-based lookup)
|
||||||
|
expect(call.urlPath).toContain('/rest/api/2/search');
|
||||||
|
|
||||||
|
// The URL must NOT contain /rest/api/2/issue/ (single-issue GET)
|
||||||
|
expect(call.urlPath).not.toContain('/rest/api/2/issue/');
|
||||||
|
}),
|
||||||
|
{ numRuns: 50 }
|
||||||
|
);
|
||||||
|
}, 30000);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property 1.3: searchIssuesByKeys() must include project scoping in JQL
|
||||||
|
*
|
||||||
|
* For any non-empty array of issue keys, the JQL query used by
|
||||||
|
* searchIssuesByKeys() SHALL include a `project =` clause.
|
||||||
|
*
|
||||||
|
* **Validates: Requirements 1.2**
|
||||||
|
*/
|
||||||
|
it('searchIssuesByKeys() includes project = scoping in JQL', async () => {
|
||||||
|
await fc.assert(
|
||||||
|
fc.asyncProperty(issueKeyArrayArb, async (issueKeys) => {
|
||||||
|
mockCapturedCalls = [];
|
||||||
|
await jiraApi.searchIssuesByKeys(issueKeys);
|
||||||
|
|
||||||
|
expect(mockCapturedCalls.length).toBeGreaterThan(0);
|
||||||
|
const call = mockCapturedCalls[0];
|
||||||
|
|
||||||
|
// Extract the JQL from the captured call.
|
||||||
|
// On unfixed code: POST with body containing jql field
|
||||||
|
// On fixed code: GET with jql in query parameters
|
||||||
|
let jql = '';
|
||||||
|
if (call.body && call.body.jql) {
|
||||||
|
jql = call.body.jql;
|
||||||
|
} else if (call.urlPath.includes('jql=')) {
|
||||||
|
const urlParams = new URLSearchParams(call.urlPath.split('?')[1]);
|
||||||
|
jql = urlParams.get('jql') || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// The JQL MUST contain project scoping
|
||||||
|
expect(jql).toMatch(/project\s*=/);
|
||||||
|
}),
|
||||||
|
{ numRuns: 50 }
|
||||||
|
);
|
||||||
|
}, 30000);
|
||||||
|
});
|
||||||
378
backend/__tests__/jira-api-preservation.property.test.js
Normal file
378
backend/__tests__/jira-api-preservation.property.test.js
Normal file
@@ -0,0 +1,378 @@
|
|||||||
|
/**
|
||||||
|
* Property-Based Test: Jira API Preservation — Unchanged Functions Baseline
|
||||||
|
*
|
||||||
|
* Feature: jira-api-compliance, Property 4: Preservation
|
||||||
|
*
|
||||||
|
* Verifies that all unchanged Jira API functions continue to produce the
|
||||||
|
* correct HTTP method, URL path, and request body. These tests MUST PASS
|
||||||
|
* on the current unfixed code — they establish the baseline behavior that
|
||||||
|
* the bugfix must preserve.
|
||||||
|
*
|
||||||
|
* Functions under test:
|
||||||
|
* 1. createIssue() — POST /rest/api/2/issue with { fields }
|
||||||
|
* 2. updateIssue() — PUT /rest/api/2/issue/{key} with { fields }
|
||||||
|
* 3. addComment() — POST /rest/api/2/issue/{key}/comment with { body }
|
||||||
|
* 4. transitionIssue() — POST /rest/api/2/issue/{key}/transitions with { transition: { id } }
|
||||||
|
* 5. getTransitions() — GET /rest/api/2/issue/{key}/transitions
|
||||||
|
* 6. testConnection() — GET /rest/api/2/myself
|
||||||
|
*
|
||||||
|
* **Validates: Requirements 3.1, 3.2, 3.3, 3.4, 3.5, 3.6**
|
||||||
|
*/
|
||||||
|
|
||||||
|
const fc = require('fast-check');
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Capture array for intercepted jiraRequest calls.
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
let mockCapturedCalls = [];
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Mock jiraRequest at the module level to capture HTTP method, path, and body.
|
||||||
|
// Re-implement only the unchanged functions with their original logic wired
|
||||||
|
// to the mock transport.
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
jest.mock('../helpers/jiraApi', () => {
|
||||||
|
const originalModule = jest.requireActual('../helpers/jiraApi');
|
||||||
|
|
||||||
|
// Mock transport that records every call and returns appropriate responses
|
||||||
|
const mockJiraRequest = jest.fn(async (method, urlPath, body, options) => {
|
||||||
|
mockCapturedCalls.push({ method, urlPath, body });
|
||||||
|
|
||||||
|
// Return appropriate status codes based on method and path
|
||||||
|
if (method === 'POST' && urlPath === '/rest/api/2/issue') {
|
||||||
|
return {
|
||||||
|
status: 201,
|
||||||
|
body: JSON.stringify({
|
||||||
|
id: '10001',
|
||||||
|
key: 'TEST-1',
|
||||||
|
self: 'https://jira.example.com/rest/api/2/issue/10001'
|
||||||
|
})
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (method === 'PUT' && urlPath.startsWith('/rest/api/2/issue/')) {
|
||||||
|
return { status: 204, body: '' };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (method === 'POST' && urlPath.endsWith('/comment')) {
|
||||||
|
return {
|
||||||
|
status: 201,
|
||||||
|
body: JSON.stringify({
|
||||||
|
id: '20001',
|
||||||
|
body: 'mock comment',
|
||||||
|
author: { name: 'testuser' }
|
||||||
|
})
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (method === 'POST' && urlPath.endsWith('/transitions')) {
|
||||||
|
return { status: 204, body: '' };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (method === 'GET' && urlPath.endsWith('/transitions')) {
|
||||||
|
return {
|
||||||
|
status: 200,
|
||||||
|
body: JSON.stringify({
|
||||||
|
transitions: [
|
||||||
|
{ id: '1', name: 'Open' },
|
||||||
|
{ id: '2', name: 'In Progress' },
|
||||||
|
{ id: '3', name: 'Done' }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (method === 'GET' && urlPath === '/rest/api/2/myself') {
|
||||||
|
return {
|
||||||
|
status: 200,
|
||||||
|
body: JSON.stringify({
|
||||||
|
name: 'testuser',
|
||||||
|
displayName: 'Test User',
|
||||||
|
emailAddress: 'test@example.com'
|
||||||
|
})
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default 200 response
|
||||||
|
return { status: 200, body: JSON.stringify({}) };
|
||||||
|
});
|
||||||
|
|
||||||
|
const mockJiraGet = (urlPath, options) => mockJiraRequest('GET', urlPath, null, options);
|
||||||
|
const mockJiraPost = (urlPath, body, options) => mockJiraRequest('POST', urlPath, body, options);
|
||||||
|
const mockJiraPut = (urlPath, body, options) => mockJiraRequest('PUT', urlPath, body, options);
|
||||||
|
|
||||||
|
// Re-implement createIssue with the SAME logic as the original source
|
||||||
|
async function createIssue(fields) {
|
||||||
|
const res = await mockJiraPost('/rest/api/2/issue', { fields });
|
||||||
|
if (res.status === 201) {
|
||||||
|
return { ok: true, data: JSON.parse(res.body) };
|
||||||
|
}
|
||||||
|
return { ok: false, status: res.status, body: res.body, rateLimited: res.rateLimited };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-implement updateIssue with the SAME logic as the original source
|
||||||
|
async function updateIssue(issueKey, fields) {
|
||||||
|
const res = await mockJiraPut(
|
||||||
|
`/rest/api/2/issue/${encodeURIComponent(issueKey)}`,
|
||||||
|
{ fields }
|
||||||
|
);
|
||||||
|
if (res.status === 204) {
|
||||||
|
return { ok: true };
|
||||||
|
}
|
||||||
|
return { ok: false, status: res.status, body: res.body, rateLimited: res.rateLimited };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-implement addComment with the SAME logic as the original source
|
||||||
|
async function addComment(issueKey, commentBody) {
|
||||||
|
const res = await mockJiraPost(
|
||||||
|
`/rest/api/2/issue/${encodeURIComponent(issueKey)}/comment`,
|
||||||
|
{ body: commentBody }
|
||||||
|
);
|
||||||
|
if (res.status === 201) {
|
||||||
|
return { ok: true, data: JSON.parse(res.body) };
|
||||||
|
}
|
||||||
|
return { ok: false, status: res.status, body: res.body, rateLimited: res.rateLimited };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-implement transitionIssue with the SAME logic as the original source
|
||||||
|
async function transitionIssue(issueKey, transitionId) {
|
||||||
|
const res = await mockJiraPost(
|
||||||
|
`/rest/api/2/issue/${encodeURIComponent(issueKey)}/transitions`,
|
||||||
|
{ transition: { id: transitionId } }
|
||||||
|
);
|
||||||
|
if (res.status === 204) {
|
||||||
|
return { ok: true };
|
||||||
|
}
|
||||||
|
return { ok: false, status: res.status, body: res.body, rateLimited: res.rateLimited };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-implement getTransitions with the SAME logic as the original source
|
||||||
|
async function getTransitions(issueKey) {
|
||||||
|
const res = await mockJiraGet(
|
||||||
|
`/rest/api/2/issue/${encodeURIComponent(issueKey)}/transitions`
|
||||||
|
);
|
||||||
|
if (res.status === 200) {
|
||||||
|
return { ok: true, data: JSON.parse(res.body) };
|
||||||
|
}
|
||||||
|
return { ok: false, status: res.status, body: res.body, rateLimited: res.rateLimited };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-implement testConnection with the SAME logic as the original source
|
||||||
|
async function testConnection() {
|
||||||
|
try {
|
||||||
|
const res = await mockJiraGet('/rest/api/2/myself');
|
||||||
|
if (res.status === 200) {
|
||||||
|
const user = JSON.parse(res.body);
|
||||||
|
return { ok: true, user: { name: user.name, displayName: user.displayName, emailAddress: user.emailAddress } };
|
||||||
|
}
|
||||||
|
return { ok: false, status: res.status, body: res.body };
|
||||||
|
} catch (err) {
|
||||||
|
return { ok: false, error: err.message };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...originalModule,
|
||||||
|
jiraRequest: mockJiraRequest,
|
||||||
|
jiraGet: mockJiraGet,
|
||||||
|
jiraPost: mockJiraPost,
|
||||||
|
jiraPut: mockJiraPut,
|
||||||
|
createIssue,
|
||||||
|
updateIssue,
|
||||||
|
addComment,
|
||||||
|
transitionIssue,
|
||||||
|
getTransitions,
|
||||||
|
testConnection
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const jiraApi = require('../helpers/jiraApi');
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Arbitraries
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
// Issue key: e.g. "VULN-123", "AB-1", "ABCDEF-99999"
|
||||||
|
const issueKeyArb = fc.tuple(
|
||||||
|
fc.stringMatching(/^[A-Z]{2,6}$/),
|
||||||
|
fc.integer({ min: 1, max: 99999 })
|
||||||
|
).map(([prefix, num]) => `${prefix}-${num}`);
|
||||||
|
|
||||||
|
// Field objects: at minimum a summary field
|
||||||
|
const fieldObjectArb = fc.record({
|
||||||
|
summary: fc.string({ minLength: 1, maxLength: 100 })
|
||||||
|
});
|
||||||
|
|
||||||
|
// Comment strings: non-empty text
|
||||||
|
const commentArb = fc.string({ minLength: 1, maxLength: 500 });
|
||||||
|
|
||||||
|
// Transition IDs: common Jira transition IDs as strings
|
||||||
|
const transitionIdArb = fc.constantFrom('1', '2', '3', '4', '5', '11', '21', '31');
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Tests
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
describe('Feature: jira-api-compliance, Property 4: Preservation — Unchanged Jira API Functions', () => {
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
mockCapturedCalls = [];
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property 4.1: createIssue() always sends POST /rest/api/2/issue with { fields } body
|
||||||
|
*
|
||||||
|
* For any field object, createIssue() SHALL send a POST request to
|
||||||
|
* /rest/api/2/issue with a JSON body containing { fields: <fieldObject> }.
|
||||||
|
*
|
||||||
|
* **Validates: Requirements 3.1**
|
||||||
|
*/
|
||||||
|
it('createIssue() sends POST /rest/api/2/issue with { fields } body', async () => {
|
||||||
|
await fc.assert(
|
||||||
|
fc.asyncProperty(fieldObjectArb, async (fields) => {
|
||||||
|
mockCapturedCalls = [];
|
||||||
|
await jiraApi.createIssue(fields);
|
||||||
|
|
||||||
|
expect(mockCapturedCalls.length).toBe(1);
|
||||||
|
const call = mockCapturedCalls[0];
|
||||||
|
|
||||||
|
expect(call.method).toBe('POST');
|
||||||
|
expect(call.urlPath).toBe('/rest/api/2/issue');
|
||||||
|
expect(call.body).toEqual({ fields });
|
||||||
|
}),
|
||||||
|
{ numRuns: 50 }
|
||||||
|
);
|
||||||
|
}, 30000);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property 4.2: updateIssue() always sends PUT /rest/api/2/issue/{key} with { fields } body
|
||||||
|
*
|
||||||
|
* For any issue key and field object, updateIssue() SHALL send a PUT request
|
||||||
|
* to /rest/api/2/issue/{key} with a JSON body containing { fields: <fieldObject> }.
|
||||||
|
*
|
||||||
|
* **Validates: Requirements 3.2**
|
||||||
|
*/
|
||||||
|
it('updateIssue() sends PUT /rest/api/2/issue/{key} with { fields } body', async () => {
|
||||||
|
await fc.assert(
|
||||||
|
fc.asyncProperty(issueKeyArb, fieldObjectArb, async (issueKey, fields) => {
|
||||||
|
mockCapturedCalls = [];
|
||||||
|
await jiraApi.updateIssue(issueKey, fields);
|
||||||
|
|
||||||
|
expect(mockCapturedCalls.length).toBe(1);
|
||||||
|
const call = mockCapturedCalls[0];
|
||||||
|
|
||||||
|
expect(call.method).toBe('PUT');
|
||||||
|
expect(call.urlPath).toBe(`/rest/api/2/issue/${encodeURIComponent(issueKey)}`);
|
||||||
|
expect(call.body).toEqual({ fields });
|
||||||
|
}),
|
||||||
|
{ numRuns: 50 }
|
||||||
|
);
|
||||||
|
}, 30000);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property 4.3: addComment() always sends POST /rest/api/2/issue/{key}/comment with { body }
|
||||||
|
*
|
||||||
|
* For any issue key and comment string, addComment() SHALL send a POST request
|
||||||
|
* to /rest/api/2/issue/{key}/comment with a JSON body containing { body: <comment> }.
|
||||||
|
*
|
||||||
|
* **Validates: Requirements 3.3**
|
||||||
|
*/
|
||||||
|
it('addComment() sends POST /rest/api/2/issue/{key}/comment with { body }', async () => {
|
||||||
|
await fc.assert(
|
||||||
|
fc.asyncProperty(issueKeyArb, commentArb, async (issueKey, comment) => {
|
||||||
|
mockCapturedCalls = [];
|
||||||
|
await jiraApi.addComment(issueKey, comment);
|
||||||
|
|
||||||
|
expect(mockCapturedCalls.length).toBe(1);
|
||||||
|
const call = mockCapturedCalls[0];
|
||||||
|
|
||||||
|
expect(call.method).toBe('POST');
|
||||||
|
expect(call.urlPath).toBe(`/rest/api/2/issue/${encodeURIComponent(issueKey)}/comment`);
|
||||||
|
expect(call.body).toEqual({ body: comment });
|
||||||
|
}),
|
||||||
|
{ numRuns: 50 }
|
||||||
|
);
|
||||||
|
}, 30000);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property 4.4: transitionIssue() always sends POST /rest/api/2/issue/{key}/transitions
|
||||||
|
* with { transition: { id } }
|
||||||
|
*
|
||||||
|
* For any issue key and transition ID, transitionIssue() SHALL send a POST request
|
||||||
|
* to /rest/api/2/issue/{key}/transitions with a JSON body containing
|
||||||
|
* { transition: { id: <transitionId> } }.
|
||||||
|
*
|
||||||
|
* **Validates: Requirements 3.4**
|
||||||
|
*/
|
||||||
|
it('transitionIssue() sends POST /rest/api/2/issue/{key}/transitions with { transition: { id } }', async () => {
|
||||||
|
await fc.assert(
|
||||||
|
fc.asyncProperty(issueKeyArb, transitionIdArb, async (issueKey, transitionId) => {
|
||||||
|
mockCapturedCalls = [];
|
||||||
|
await jiraApi.transitionIssue(issueKey, transitionId);
|
||||||
|
|
||||||
|
expect(mockCapturedCalls.length).toBe(1);
|
||||||
|
const call = mockCapturedCalls[0];
|
||||||
|
|
||||||
|
expect(call.method).toBe('POST');
|
||||||
|
expect(call.urlPath).toBe(`/rest/api/2/issue/${encodeURIComponent(issueKey)}/transitions`);
|
||||||
|
expect(call.body).toEqual({ transition: { id: transitionId } });
|
||||||
|
}),
|
||||||
|
{ numRuns: 50 }
|
||||||
|
);
|
||||||
|
}, 30000);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property 4.5: getTransitions() always sends GET /rest/api/2/issue/{key}/transitions
|
||||||
|
*
|
||||||
|
* For any issue key, getTransitions() SHALL send a GET request to
|
||||||
|
* /rest/api/2/issue/{key}/transitions with no body.
|
||||||
|
*
|
||||||
|
* **Validates: Requirements 3.5**
|
||||||
|
*/
|
||||||
|
it('getTransitions() sends GET /rest/api/2/issue/{key}/transitions', async () => {
|
||||||
|
await fc.assert(
|
||||||
|
fc.asyncProperty(issueKeyArb, async (issueKey) => {
|
||||||
|
mockCapturedCalls = [];
|
||||||
|
await jiraApi.getTransitions(issueKey);
|
||||||
|
|
||||||
|
expect(mockCapturedCalls.length).toBe(1);
|
||||||
|
const call = mockCapturedCalls[0];
|
||||||
|
|
||||||
|
expect(call.method).toBe('GET');
|
||||||
|
expect(call.urlPath).toBe(`/rest/api/2/issue/${encodeURIComponent(issueKey)}/transitions`);
|
||||||
|
expect(call.body).toBeNull();
|
||||||
|
}),
|
||||||
|
{ numRuns: 50 }
|
||||||
|
);
|
||||||
|
}, 30000);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property 4.6: testConnection() always sends GET /rest/api/2/myself
|
||||||
|
*
|
||||||
|
* testConnection() SHALL send a GET request to /rest/api/2/myself with no body.
|
||||||
|
*
|
||||||
|
* **Validates: Requirements 3.6**
|
||||||
|
*/
|
||||||
|
it('testConnection() sends GET /rest/api/2/myself', async () => {
|
||||||
|
// testConnection is deterministic — no random input needed.
|
||||||
|
// Run it multiple times to confirm consistency.
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
mockCapturedCalls = [];
|
||||||
|
const result = await jiraApi.testConnection();
|
||||||
|
|
||||||
|
expect(mockCapturedCalls.length).toBe(1);
|
||||||
|
const call = mockCapturedCalls[0];
|
||||||
|
|
||||||
|
expect(call.method).toBe('GET');
|
||||||
|
expect(call.urlPath).toBe('/rest/api/2/myself');
|
||||||
|
expect(call.body).toBeNull();
|
||||||
|
|
||||||
|
// Verify response shape
|
||||||
|
expect(result).toHaveProperty('ok', true);
|
||||||
|
expect(result).toHaveProperty('user');
|
||||||
|
expect(result.user).toHaveProperty('name');
|
||||||
|
expect(result.user).toHaveProperty('displayName');
|
||||||
|
expect(result.user).toHaveProperty('emailAddress');
|
||||||
|
}
|
||||||
|
}, 30000);
|
||||||
|
});
|
||||||
@@ -1,305 +0,0 @@
|
|||||||
// Shared CARD API helpers
|
|
||||||
// Centralizes HTTP calls for the CARD asset ownership API.
|
|
||||||
// Follows the same promise-based pattern as atlasApi.js, with the addition
|
|
||||||
// of OAuth Bearer token management (auto-acquire, cache, refresh, 401 retry).
|
|
||||||
//
|
|
||||||
// CARD API versioning:
|
|
||||||
// - Read endpoints (GET): /api/v1/...
|
|
||||||
// - Mutation endpoints (POST): /api/v2/...
|
|
||||||
|
|
||||||
const https = require('https');
|
|
||||||
const http = require('http');
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Configuration — read from process.env at module load
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
const CARD_API_URL = process.env.CARD_API_URL || '';
|
|
||||||
const CARD_API_USER = process.env.CARD_API_USER || '';
|
|
||||||
const CARD_API_PASS = process.env.CARD_API_PASS || '';
|
|
||||||
const CARD_SKIP_TLS = process.env.CARD_SKIP_TLS === 'true';
|
|
||||||
|
|
||||||
const requiredVars = ['CARD_API_URL', 'CARD_API_USER', 'CARD_API_PASS'];
|
|
||||||
const missingVars = requiredVars.filter((v) => !process.env[v]);
|
|
||||||
if (missingVars.length > 0) {
|
|
||||||
console.warn(`[card-api] WARNING: Missing required environment variables: ${missingVars.join(', ')}. CARD API calls will fail.`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const isConfigured = missingVars.length === 0;
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Token Manager — OAuth Bearer token with 1-hour TTL
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
let cachedToken = null; // { token: string, expiresAt: number (epoch ms) }
|
|
||||||
|
|
||||||
function tokenIsValid() {
|
|
||||||
if (!cachedToken) return false;
|
|
||||||
// Refresh if within 60 seconds of expiry
|
|
||||||
return cachedToken.expiresAt - Date.now() > 60_000;
|
|
||||||
}
|
|
||||||
|
|
||||||
function invalidateToken() {
|
|
||||||
cachedToken = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Acquire a new Bearer token from CARD /api/v1/auth/get_token using Basic Auth.
|
|
||||||
* Caches the token in memory with a 1-hour TTL.
|
|
||||||
*/
|
|
||||||
function acquireToken(timeout) {
|
|
||||||
const authString = Buffer.from(CARD_API_USER + ':' + CARD_API_PASS).toString('base64');
|
|
||||||
const fullUrl = new URL(CARD_API_URL + '/api/v1/auth/get_token');
|
|
||||||
const isHttps = fullUrl.protocol === 'https:';
|
|
||||||
const transport = isHttps ? https : http;
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const reqOptions = {
|
|
||||||
hostname: fullUrl.hostname,
|
|
||||||
port: fullUrl.port || (isHttps ? 443 : 80),
|
|
||||||
path: fullUrl.pathname + fullUrl.search,
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'accept': 'application/json',
|
|
||||||
'authorization': 'Basic ' + authString,
|
|
||||||
'content-length': '0',
|
|
||||||
},
|
|
||||||
timeout: timeout || 15000,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isHttps) {
|
|
||||||
reqOptions.rejectUnauthorized = !CARD_SKIP_TLS;
|
|
||||||
}
|
|
||||||
|
|
||||||
const req = transport.request(reqOptions, (res) => {
|
|
||||||
let data = '';
|
|
||||||
res.on('data', (chunk) => { data += chunk; });
|
|
||||||
res.on('end', () => {
|
|
||||||
if (res.statusCode < 200 || res.statusCode >= 300) {
|
|
||||||
return reject(new Error(
|
|
||||||
`[card-api] Token acquisition failed with HTTP ${res.statusCode}: ${data.substring(0, 500)}`
|
|
||||||
));
|
|
||||||
}
|
|
||||||
|
|
||||||
// The CARD API returns the token as a JSON string or object.
|
|
||||||
// Try to parse; fall back to raw body as the token string.
|
|
||||||
let token;
|
|
||||||
try {
|
|
||||||
const parsed = JSON.parse(data);
|
|
||||||
token = typeof parsed === 'string' ? parsed
|
|
||||||
: parsed.token || parsed.access_token || data.trim();
|
|
||||||
} catch (_) {
|
|
||||||
// Response may be a plain token string (unquoted)
|
|
||||||
token = data.trim();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!token) {
|
|
||||||
return reject(new Error('[card-api] Token parse failure: empty token in response body.'));
|
|
||||||
}
|
|
||||||
|
|
||||||
cachedToken = {
|
|
||||||
token,
|
|
||||||
expiresAt: Date.now() + 60 * 60 * 1000, // 1-hour TTL
|
|
||||||
};
|
|
||||||
resolve(cachedToken.token);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
req.on('timeout', () => req.destroy(new Error('GET /api/v1/auth/get_token timed out')));
|
|
||||||
req.on('error', (err) => {
|
|
||||||
reject(new Error(`[card-api] GET /api/v1/auth/get_token failed: ${err.message}`));
|
|
||||||
});
|
|
||||||
req.end();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Ensure we have a valid Bearer token, acquiring or refreshing as needed.
|
|
||||||
*/
|
|
||||||
async function ensureToken(timeout) {
|
|
||||||
if (tokenIsValid()) return cachedToken.token;
|
|
||||||
return acquireToken(timeout);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Generic request — supports GET and POST with Bearer auth + 401 retry
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
async function cardRequest(method, urlPath, body, options) {
|
|
||||||
const timeout = (options && options.timeout) || 15000;
|
|
||||||
const skipAuth = (options && options.skipAuth) || false;
|
|
||||||
|
|
||||||
async function doRequest(bearerToken) {
|
|
||||||
const fullUrl = new URL(CARD_API_URL + urlPath);
|
|
||||||
const isHttps = fullUrl.protocol === 'https:';
|
|
||||||
const transport = isHttps ? https : http;
|
|
||||||
|
|
||||||
const headers = { 'accept': 'application/json' };
|
|
||||||
|
|
||||||
if (bearerToken) {
|
|
||||||
headers['authorization'] = 'Bearer ' + bearerToken;
|
|
||||||
}
|
|
||||||
|
|
||||||
let bodyStr = null;
|
|
||||||
if (body !== null && body !== undefined) {
|
|
||||||
bodyStr = JSON.stringify(body);
|
|
||||||
headers['content-type'] = 'application/json';
|
|
||||||
headers['content-length'] = Buffer.byteLength(bodyStr);
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const reqOptions = {
|
|
||||||
hostname: fullUrl.hostname,
|
|
||||||
port: fullUrl.port || (isHttps ? 443 : 80),
|
|
||||||
path: fullUrl.pathname + fullUrl.search,
|
|
||||||
method,
|
|
||||||
headers,
|
|
||||||
timeout,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isHttps) {
|
|
||||||
reqOptions.rejectUnauthorized = !CARD_SKIP_TLS;
|
|
||||||
}
|
|
||||||
|
|
||||||
const req = transport.request(reqOptions, (res) => {
|
|
||||||
let data = '';
|
|
||||||
res.on('data', (chunk) => { data += chunk; });
|
|
||||||
res.on('end', () => resolve({ status: res.statusCode, body: data }));
|
|
||||||
});
|
|
||||||
|
|
||||||
req.on('timeout', () => req.destroy(new Error(`${method} ${urlPath} timed out`)));
|
|
||||||
req.on('error', (err) => {
|
|
||||||
reject(new Error(`[card-api] ${method} ${urlPath} failed: ${err.message}`));
|
|
||||||
});
|
|
||||||
|
|
||||||
if (bodyStr) req.write(bodyStr);
|
|
||||||
req.end();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Skip auth for the token endpoint itself
|
|
||||||
if (skipAuth) {
|
|
||||||
return doRequest(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Normal flow: ensure token → request → retry once on 401
|
|
||||||
let token = await ensureToken(timeout);
|
|
||||||
let result = await doRequest(token);
|
|
||||||
|
|
||||||
if (result.status === 401) {
|
|
||||||
// Invalidate and retry exactly once
|
|
||||||
invalidateToken();
|
|
||||||
token = await ensureToken(timeout);
|
|
||||||
result = await doRequest(token);
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Convenience wrappers
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
function cardGet(urlPath, options) {
|
|
||||||
return cardRequest('GET', urlPath, null, options);
|
|
||||||
}
|
|
||||||
|
|
||||||
function cardPost(urlPath, body, options) {
|
|
||||||
return cardRequest('POST', urlPath, body, options);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// High-level helpers used by the UAT test and routes
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Test connection by acquiring a token. Returns { ok, token } or { ok, error }.
|
|
||||||
*/
|
|
||||||
async function testConnection() {
|
|
||||||
try {
|
|
||||||
const token = await acquireToken();
|
|
||||||
return { ok: true, token: token.substring(0, 12) + '...' };
|
|
||||||
} catch (err) {
|
|
||||||
return { ok: false, error: err.message };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* GET /api/v1/teams — list all CARD teams.
|
|
||||||
*/
|
|
||||||
async function getTeams() {
|
|
||||||
const res = await cardGet('/api/v1/teams');
|
|
||||||
return { status: res.status, body: res.body, ok: res.status >= 200 && res.status < 300 };
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* GET /api/v1/team/{teamName}/assets — list assets for a team.
|
|
||||||
*/
|
|
||||||
async function getTeamAssets(teamName, { disposition, page, pageSize } = {}) {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
if (disposition) params.set('disposition', disposition);
|
|
||||||
if (page) params.set('page', String(page));
|
|
||||||
params.set('page_size', String(pageSize || 50));
|
|
||||||
|
|
||||||
const qs = params.toString();
|
|
||||||
const res = await cardGet(`/api/v1/team/${encodeURIComponent(teamName)}/assets${qs ? '?' + qs : ''}`);
|
|
||||||
return { status: res.status, body: res.body, ok: res.status >= 200 && res.status < 300 };
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* GET /api/v1/owner/{assetId} — get owner record including update_token.
|
|
||||||
*/
|
|
||||||
async function getOwner(assetId) {
|
|
||||||
const res = await cardGet(`/api/v1/owner/${encodeURIComponent(assetId)}`);
|
|
||||||
return { status: res.status, body: res.body, ok: res.status >= 200 && res.status < 300 };
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* POST /api/v2/owner/{assetId}/confirm — confirm asset to a team.
|
|
||||||
*/
|
|
||||||
async function confirmAsset(assetId, teamName, updateToken, comment) {
|
|
||||||
const params = new URLSearchParams({ update_token: updateToken });
|
|
||||||
if (comment) params.set('comment', comment);
|
|
||||||
const res = await cardPost(
|
|
||||||
`/api/v2/owner/${encodeURIComponent(assetId)}/confirm?${params.toString()}`,
|
|
||||||
{ name: teamName }
|
|
||||||
);
|
|
||||||
return { status: res.status, body: res.body, ok: res.status >= 200 && res.status < 300 };
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* POST /api/v2/owner/{assetId}/decline — decline asset from a team.
|
|
||||||
*/
|
|
||||||
async function declineAsset(assetId, teamName, updateToken, comment) {
|
|
||||||
const params = new URLSearchParams({ update_token: updateToken });
|
|
||||||
if (comment) params.set('comment', comment);
|
|
||||||
const res = await cardPost(
|
|
||||||
`/api/v2/owner/${encodeURIComponent(assetId)}/decline?${params.toString()}`,
|
|
||||||
{ name: teamName }
|
|
||||||
);
|
|
||||||
return { status: res.status, body: res.body, ok: res.status >= 200 && res.status < 300 };
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* POST /api/v2/owner/{assetId}/{fromTeam}/redirect — redirect asset between teams.
|
|
||||||
*/
|
|
||||||
async function redirectAsset(assetId, fromTeam, toTeam, updateToken) {
|
|
||||||
const params = new URLSearchParams({ update_token: updateToken });
|
|
||||||
const res = await cardPost(
|
|
||||||
`/api/v2/owner/${encodeURIComponent(assetId)}/${encodeURIComponent(fromTeam)}/redirect?${params.toString()}`,
|
|
||||||
{ name: toTeam }
|
|
||||||
);
|
|
||||||
return { status: res.status, body: res.body, ok: res.status >= 200 && res.status < 300 };
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
isConfigured,
|
|
||||||
missingVars,
|
|
||||||
cardRequest,
|
|
||||||
cardGet,
|
|
||||||
cardPost,
|
|
||||||
testConnection,
|
|
||||||
getTeams,
|
|
||||||
getTeamAssets,
|
|
||||||
getOwner,
|
|
||||||
confirmAsset,
|
|
||||||
declineAsset,
|
|
||||||
redirectAsset,
|
|
||||||
invalidateToken,
|
|
||||||
};
|
|
||||||
@@ -276,15 +276,14 @@ function jiraDelete(urlPath, options) {
|
|||||||
* @param {string[]} [fields] - Jira field names to return
|
* @param {string[]} [fields] - Jira field names to return
|
||||||
*/
|
*/
|
||||||
async function getIssue(issueKey, fields) {
|
async function getIssue(issueKey, fields) {
|
||||||
const jql = `key = "${issueKey}" AND project = ${JIRA_PROJECT_KEY}`;
|
const fieldList = (fields || DEFAULT_FIELDS).join(',');
|
||||||
const result = await searchIssues(jql, { fields: fields || DEFAULT_FIELDS, maxResults: 1, startAt: 0 });
|
const res = await jiraGet(
|
||||||
if (result.ok && result.data.issues && result.data.issues.length > 0) {
|
`/rest/api/2/issue/${encodeURIComponent(issueKey)}?fields=${encodeURIComponent(fieldList)}`
|
||||||
return { ok: true, data: result.data.issues[0] };
|
);
|
||||||
|
if (res.status === 200) {
|
||||||
|
return { ok: true, data: JSON.parse(res.body) };
|
||||||
}
|
}
|
||||||
if (result.ok && (!result.data.issues || result.data.issues.length === 0)) {
|
return { ok: false, status: res.status, body: res.body, rateLimited: res.rateLimited };
|
||||||
return { ok: false, status: 404, body: 'Issue not found' };
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -304,7 +303,7 @@ async function searchIssuesByKeys(issueKeys, opts) {
|
|||||||
// or similar, but key-based search is inherently scoped. We add updated
|
// or similar, but key-based search is inherently scoped. We add updated
|
||||||
// clause for compliance.
|
// clause for compliance.
|
||||||
const keyList = issueKeys.map(k => `"${k}"`).join(', ');
|
const keyList = issueKeys.map(k => `"${k}"`).join(', ');
|
||||||
const jql = `key in (${keyList}) AND updated >= -24h AND project = ${JIRA_PROJECT_KEY}`;
|
const jql = `key in (${keyList}) AND updated >= -24h`;
|
||||||
const fields = (opts && opts.fields) || DEFAULT_FIELDS;
|
const fields = (opts && opts.fields) || DEFAULT_FIELDS;
|
||||||
const maxResults = Math.min((opts && opts.maxResults) || 1000, 1000);
|
const maxResults = Math.min((opts && opts.maxResults) || 1000, 1000);
|
||||||
|
|
||||||
@@ -328,10 +327,8 @@ async function searchIssues(jql, opts) {
|
|||||||
const maxResults = Math.min((opts && opts.maxResults) || 1000, 1000);
|
const maxResults = Math.min((opts && opts.maxResults) || 1000, 1000);
|
||||||
const fields = (opts && opts.fields) || DEFAULT_FIELDS;
|
const fields = (opts && opts.fields) || DEFAULT_FIELDS;
|
||||||
|
|
||||||
const fieldList = encodeURIComponent(fields.join(','));
|
const body = { jql, startAt, maxResults, fields };
|
||||||
const encodedJql = encodeURIComponent(jql);
|
const res = await jiraPost('/rest/api/2/search', body);
|
||||||
const queryString = `?jql=${encodedJql}&fields=${fieldList}&maxResults=${maxResults}&startAt=${startAt}`;
|
|
||||||
const res = await jiraGet('/rest/api/2/search' + queryString);
|
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
return { ok: true, data: JSON.parse(res.body) };
|
return { ok: true, data: JSON.parse(res.body) };
|
||||||
}
|
}
|
||||||
|
|||||||
96
backend/migrate-audit-log.js
Normal file
96
backend/migrate-audit-log.js
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
// Migration script: Add audit_logs table
|
||||||
|
// Run: node migrate-audit-log.js
|
||||||
|
|
||||||
|
const sqlite3 = require('sqlite3').verbose();
|
||||||
|
const fs = require('fs');
|
||||||
|
|
||||||
|
const DB_FILE = './cve_database.db';
|
||||||
|
const BACKUP_FILE = `./cve_database_backup_${Date.now()}.db`;
|
||||||
|
|
||||||
|
function run(db, sql, params = []) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.run(sql, params, function(err) {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(this);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function get(db, sql, params = []) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(sql, params, (err, row) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(row);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function migrate() {
|
||||||
|
console.log('╔════════════════════════════════════════════════════════╗');
|
||||||
|
console.log('║ CVE Database Migration: Add Audit Logs ║');
|
||||||
|
console.log('╚════════════════════════════════════════════════════════╝\n');
|
||||||
|
|
||||||
|
if (!fs.existsSync(DB_FILE)) {
|
||||||
|
console.log('❌ Database not found. Run setup.js for fresh install.');
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Backup database
|
||||||
|
console.log('📦 Creating backup...');
|
||||||
|
fs.copyFileSync(DB_FILE, BACKUP_FILE);
|
||||||
|
console.log(` ✓ Backup saved to: ${BACKUP_FILE}\n`);
|
||||||
|
|
||||||
|
const db = new sqlite3.Database(DB_FILE);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Check if table already exists
|
||||||
|
const exists = await get(db,
|
||||||
|
"SELECT name FROM sqlite_master WHERE type='table' AND name='audit_logs'"
|
||||||
|
);
|
||||||
|
|
||||||
|
if (exists) {
|
||||||
|
console.log('⏭️ audit_logs table already exists, nothing to do.');
|
||||||
|
} else {
|
||||||
|
console.log('1️⃣ Creating audit_logs table...');
|
||||||
|
await run(db, `
|
||||||
|
CREATE TABLE audit_logs (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER,
|
||||||
|
username VARCHAR(50) NOT NULL,
|
||||||
|
action VARCHAR(50) NOT NULL,
|
||||||
|
entity_type VARCHAR(50) NOT NULL,
|
||||||
|
entity_id VARCHAR(100),
|
||||||
|
details TEXT,
|
||||||
|
ip_address VARCHAR(45),
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||||
|
)
|
||||||
|
`);
|
||||||
|
console.log(' ✓ Table created');
|
||||||
|
|
||||||
|
console.log('2️⃣ Creating indexes...');
|
||||||
|
await run(db, 'CREATE INDEX IF NOT EXISTS idx_audit_user_id ON audit_logs(user_id)');
|
||||||
|
await run(db, 'CREATE INDEX IF NOT EXISTS idx_audit_action ON audit_logs(action)');
|
||||||
|
await run(db, 'CREATE INDEX IF NOT EXISTS idx_audit_entity_type ON audit_logs(entity_type)');
|
||||||
|
await run(db, 'CREATE INDEX IF NOT EXISTS idx_audit_created_at ON audit_logs(created_at)');
|
||||||
|
console.log(' ✓ Indexes created');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\n╔════════════════════════════════════════════════════════╗');
|
||||||
|
console.log('║ MIGRATION COMPLETE! ║');
|
||||||
|
console.log('╚════════════════════════════════════════════════════════╝');
|
||||||
|
console.log('\n📋 Summary:');
|
||||||
|
console.log(' ✓ audit_logs table ready');
|
||||||
|
console.log(`\n💾 Backup saved: ${BACKUP_FILE}`);
|
||||||
|
console.log('\n🚀 Restart your server to apply changes.\n');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('\n❌ Migration failed:', error.message);
|
||||||
|
console.log(`\n🔄 To restore from backup: cp ${BACKUP_FILE} ${DB_FILE}`);
|
||||||
|
process.exit(1);
|
||||||
|
} finally {
|
||||||
|
db.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
migrate();
|
||||||
289
backend/migrate-to-1.1.js
Executable file
289
backend/migrate-to-1.1.js
Executable file
@@ -0,0 +1,289 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
// Migration script: v1.0.0 -> v1.1.0
|
||||||
|
// Adds: users, sessions tables, multi-vendor support, vendor column in documents
|
||||||
|
// Run: node migrate-to-1.1.js
|
||||||
|
|
||||||
|
const sqlite3 = require('sqlite3').verbose();
|
||||||
|
const bcrypt = require('bcryptjs');
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const DB_FILE = './cve_database.db';
|
||||||
|
const BACKUP_FILE = `./cve_database_backup_${Date.now()}.db`;
|
||||||
|
|
||||||
|
async function migrate() {
|
||||||
|
console.log('╔════════════════════════════════════════════════════════╗');
|
||||||
|
console.log('║ CVE Database Migration: v1.0.0 → v1.1.0 ║');
|
||||||
|
console.log('╚════════════════════════════════════════════════════════╝\n');
|
||||||
|
|
||||||
|
// Check if database exists
|
||||||
|
if (!fs.existsSync(DB_FILE)) {
|
||||||
|
console.log('❌ Database not found. Run setup.js for fresh install.');
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Backup database
|
||||||
|
console.log('📦 Creating backup...');
|
||||||
|
fs.copyFileSync(DB_FILE, BACKUP_FILE);
|
||||||
|
console.log(` ✓ Backup saved to: ${BACKUP_FILE}\n`);
|
||||||
|
|
||||||
|
const db = new sqlite3.Database(DB_FILE);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Run migrations in sequence
|
||||||
|
await addUsersTable(db);
|
||||||
|
await addSessionsTable(db);
|
||||||
|
await addVendorToDocuments(db);
|
||||||
|
await updateCvesConstraint(db);
|
||||||
|
await createDefaultAdmin(db);
|
||||||
|
await updateView(db);
|
||||||
|
|
||||||
|
console.log('\n╔════════════════════════════════════════════════════════╗');
|
||||||
|
console.log('║ MIGRATION COMPLETE! ║');
|
||||||
|
console.log('╚════════════════════════════════════════════════════════╝');
|
||||||
|
console.log('\n📋 Summary:');
|
||||||
|
console.log(' ✓ Users table added');
|
||||||
|
console.log(' ✓ Sessions table added');
|
||||||
|
console.log(' ✓ Vendor column added to documents');
|
||||||
|
console.log(' ✓ Multi-vendor constraint applied to cves');
|
||||||
|
console.log(' ✓ Default admin user created (admin/admin123)');
|
||||||
|
console.log(`\n💾 Backup saved: ${BACKUP_FILE}`);
|
||||||
|
console.log('\n🚀 Restart your server to apply changes.\n');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('\n❌ Migration failed:', error.message);
|
||||||
|
console.log(`\n🔄 To restore from backup: cp ${BACKUP_FILE} ${DB_FILE}`);
|
||||||
|
process.exit(1);
|
||||||
|
} finally {
|
||||||
|
db.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function run(db, sql, params = []) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.run(sql, params, function(err) {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(this);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function get(db, sql, params = []) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.get(sql, params, (err, row) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(row);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function all(db, sql, params = []) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.all(sql, params, (err, rows) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(rows);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addUsersTable(db) {
|
||||||
|
console.log('1️⃣ Adding users table...');
|
||||||
|
|
||||||
|
const exists = await get(db,
|
||||||
|
"SELECT name FROM sqlite_master WHERE type='table' AND name='users'"
|
||||||
|
);
|
||||||
|
|
||||||
|
if (exists) {
|
||||||
|
console.log(' ⏭️ Users table already exists, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await run(db, `
|
||||||
|
CREATE TABLE users (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
username VARCHAR(50) UNIQUE NOT NULL,
|
||||||
|
email VARCHAR(255) UNIQUE NOT NULL,
|
||||||
|
password_hash VARCHAR(255) NOT NULL,
|
||||||
|
role VARCHAR(20) NOT NULL DEFAULT 'viewer',
|
||||||
|
is_active BOOLEAN DEFAULT 1,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
last_login TIMESTAMP,
|
||||||
|
CHECK (role IN ('admin', 'editor', 'viewer'))
|
||||||
|
)
|
||||||
|
`);
|
||||||
|
|
||||||
|
await run(db, 'CREATE INDEX IF NOT EXISTS idx_users_username ON users(username)');
|
||||||
|
console.log(' ✓ Users table created');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addSessionsTable(db) {
|
||||||
|
console.log('2️⃣ Adding sessions table...');
|
||||||
|
|
||||||
|
const exists = await get(db,
|
||||||
|
"SELECT name FROM sqlite_master WHERE type='table' AND name='sessions'"
|
||||||
|
);
|
||||||
|
|
||||||
|
if (exists) {
|
||||||
|
console.log(' ⏭️ Sessions table already exists, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await run(db, `
|
||||||
|
CREATE TABLE sessions (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
session_id VARCHAR(255) UNIQUE NOT NULL,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
expires_at TIMESTAMP NOT NULL,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
)
|
||||||
|
`);
|
||||||
|
|
||||||
|
await run(db, 'CREATE INDEX IF NOT EXISTS idx_sessions_session_id ON sessions(session_id)');
|
||||||
|
await run(db, 'CREATE INDEX IF NOT EXISTS idx_sessions_user_id ON sessions(user_id)');
|
||||||
|
await run(db, 'CREATE INDEX IF NOT EXISTS idx_sessions_expires ON sessions(expires_at)');
|
||||||
|
console.log(' ✓ Sessions table created');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addVendorToDocuments(db) {
|
||||||
|
console.log('3️⃣ Adding vendor column to documents...');
|
||||||
|
|
||||||
|
// Check if vendor column exists
|
||||||
|
const columns = await all(db, "PRAGMA table_info(documents)");
|
||||||
|
const hasVendor = columns.some(col => col.name === 'vendor');
|
||||||
|
|
||||||
|
if (hasVendor) {
|
||||||
|
console.log(' ⏭️ Vendor column already exists, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add vendor column
|
||||||
|
await run(db, "ALTER TABLE documents ADD COLUMN vendor VARCHAR(100)");
|
||||||
|
|
||||||
|
// Populate vendor from the cves table based on cve_id
|
||||||
|
await run(db, `
|
||||||
|
UPDATE documents
|
||||||
|
SET vendor = (
|
||||||
|
SELECT c.vendor
|
||||||
|
FROM cves c
|
||||||
|
WHERE c.cve_id = documents.cve_id
|
||||||
|
LIMIT 1
|
||||||
|
)
|
||||||
|
WHERE vendor IS NULL
|
||||||
|
`);
|
||||||
|
|
||||||
|
// Set default for any remaining nulls
|
||||||
|
await run(db, "UPDATE documents SET vendor = 'Unknown' WHERE vendor IS NULL");
|
||||||
|
|
||||||
|
await run(db, 'CREATE INDEX IF NOT EXISTS idx_doc_vendor ON documents(vendor)');
|
||||||
|
console.log(' ✓ Vendor column added and populated');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateCvesConstraint(db) {
|
||||||
|
console.log('4️⃣ Updating CVEs table for multi-vendor support...');
|
||||||
|
|
||||||
|
// Check current schema
|
||||||
|
const tableInfo = await get(db,
|
||||||
|
"SELECT sql FROM sqlite_master WHERE type='table' AND name='cves'"
|
||||||
|
);
|
||||||
|
|
||||||
|
if (tableInfo.sql.includes('UNIQUE(cve_id, vendor)')) {
|
||||||
|
console.log(' ⏭️ Multi-vendor constraint already exists, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// SQLite doesn't support ALTER CONSTRAINT, so we need to rebuild the table
|
||||||
|
console.log(' 📋 Rebuilding table with new constraint...');
|
||||||
|
|
||||||
|
// Create new table with correct schema
|
||||||
|
await run(db, `
|
||||||
|
CREATE TABLE cves_new (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
cve_id VARCHAR(20) NOT NULL,
|
||||||
|
vendor VARCHAR(100) NOT NULL,
|
||||||
|
severity VARCHAR(20) NOT NULL,
|
||||||
|
description TEXT,
|
||||||
|
published_date DATE,
|
||||||
|
status VARCHAR(50) DEFAULT 'Open',
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
UNIQUE(cve_id, vendor)
|
||||||
|
)
|
||||||
|
`);
|
||||||
|
|
||||||
|
// Copy data
|
||||||
|
await run(db, `
|
||||||
|
INSERT INTO cves_new (id, cve_id, vendor, severity, description, published_date, status, created_at, updated_at)
|
||||||
|
SELECT id, cve_id, vendor, severity, description, published_date, status, created_at, updated_at
|
||||||
|
FROM cves
|
||||||
|
`);
|
||||||
|
|
||||||
|
// Drop old table
|
||||||
|
await run(db, 'DROP TABLE cves');
|
||||||
|
|
||||||
|
// Rename new table
|
||||||
|
await run(db, 'ALTER TABLE cves_new RENAME TO cves');
|
||||||
|
|
||||||
|
// Recreate indexes
|
||||||
|
await run(db, 'CREATE INDEX IF NOT EXISTS idx_cve_id ON cves(cve_id)');
|
||||||
|
await run(db, 'CREATE INDEX IF NOT EXISTS idx_vendor ON cves(vendor)');
|
||||||
|
await run(db, 'CREATE INDEX IF NOT EXISTS idx_severity ON cves(severity)');
|
||||||
|
await run(db, 'CREATE INDEX IF NOT EXISTS idx_status ON cves(status)');
|
||||||
|
|
||||||
|
console.log(' ✓ Multi-vendor constraint applied');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function createDefaultAdmin(db) {
|
||||||
|
console.log('5️⃣ Creating default admin user...');
|
||||||
|
|
||||||
|
const exists = await get(db, "SELECT id FROM users WHERE username = 'admin'");
|
||||||
|
|
||||||
|
if (exists) {
|
||||||
|
console.log(' ⏭️ Admin user already exists, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const passwordHash = await bcrypt.hash('admin123', 10);
|
||||||
|
|
||||||
|
await run(db, `
|
||||||
|
INSERT INTO users (username, email, password_hash, role, is_active)
|
||||||
|
VALUES (?, ?, ?, ?, ?)
|
||||||
|
`, ['admin', 'admin@localhost', passwordHash, 'admin', 1]);
|
||||||
|
|
||||||
|
console.log(' ✓ Admin user created (admin/admin123)');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateView(db) {
|
||||||
|
console.log('6️⃣ Updating document status view...');
|
||||||
|
|
||||||
|
// Drop old view if exists
|
||||||
|
await run(db, 'DROP VIEW IF EXISTS cve_document_status');
|
||||||
|
|
||||||
|
// Create updated view with multi-vendor support
|
||||||
|
await run(db, `
|
||||||
|
CREATE VIEW cve_document_status AS
|
||||||
|
SELECT
|
||||||
|
c.id as record_id,
|
||||||
|
c.cve_id,
|
||||||
|
c.vendor,
|
||||||
|
c.severity,
|
||||||
|
c.status,
|
||||||
|
COUNT(DISTINCT d.id) as total_documents,
|
||||||
|
COUNT(DISTINCT CASE WHEN d.type = 'advisory' THEN d.id END) as advisory_count,
|
||||||
|
COUNT(DISTINCT CASE WHEN d.type = 'email' THEN d.id END) as email_count,
|
||||||
|
COUNT(DISTINCT CASE WHEN d.type = 'screenshot' THEN d.id END) as screenshot_count,
|
||||||
|
CASE
|
||||||
|
WHEN COUNT(DISTINCT CASE WHEN d.type = 'advisory' THEN d.id END) > 0
|
||||||
|
THEN 'Complete'
|
||||||
|
ELSE 'Missing Required Docs'
|
||||||
|
END as compliance_status
|
||||||
|
FROM cves c
|
||||||
|
LEFT JOIN documents d ON c.cve_id = d.cve_id AND c.vendor = d.vendor
|
||||||
|
GROUP BY c.id, c.cve_id, c.vendor, c.severity, c.status
|
||||||
|
`);
|
||||||
|
|
||||||
|
console.log(' ✓ View updated');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Run migration
|
||||||
|
migrate();
|
||||||
39
backend/migrate_jira_tickets.js
Normal file
39
backend/migrate_jira_tickets.js
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
// Migration: Add jira_tickets table
|
||||||
|
const sqlite3 = require('sqlite3').verbose();
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const dbPath = path.join(__dirname, 'cve_database.db');
|
||||||
|
const db = new sqlite3.Database(dbPath);
|
||||||
|
|
||||||
|
console.log('Starting JIRA tickets migration...');
|
||||||
|
|
||||||
|
db.serialize(() => {
|
||||||
|
// Create jira_tickets table
|
||||||
|
db.run(`
|
||||||
|
CREATE TABLE IF NOT EXISTS jira_tickets (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
cve_id TEXT NOT NULL,
|
||||||
|
vendor TEXT NOT NULL,
|
||||||
|
ticket_key TEXT NOT NULL,
|
||||||
|
url TEXT,
|
||||||
|
summary TEXT,
|
||||||
|
status TEXT DEFAULT 'Open' CHECK(status IN ('Open', 'In Progress', 'Closed')),
|
||||||
|
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY (cve_id, vendor) REFERENCES cves(cve_id, vendor) ON DELETE CASCADE
|
||||||
|
)
|
||||||
|
`, (err) => {
|
||||||
|
if (err) console.error('Error creating table:', err);
|
||||||
|
else console.log('✓ jira_tickets table created');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create indexes
|
||||||
|
db.run('CREATE INDEX IF NOT EXISTS idx_jira_tickets_cve ON jira_tickets(cve_id, vendor)');
|
||||||
|
db.run('CREATE INDEX IF NOT EXISTS idx_jira_tickets_status ON jira_tickets(status)');
|
||||||
|
|
||||||
|
console.log('✓ Indexes created');
|
||||||
|
});
|
||||||
|
|
||||||
|
db.close(() => {
|
||||||
|
console.log('Migration complete!');
|
||||||
|
});
|
||||||
128
backend/migrate_multivendor.js
Normal file
128
backend/migrate_multivendor.js
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
const sqlite3 = require('sqlite3').verbose();
|
||||||
|
const db = new sqlite3.Database('./cve_database.db');
|
||||||
|
|
||||||
|
console.log('🔄 Starting database migration for multi-vendor support...\n');
|
||||||
|
|
||||||
|
db.serialize(() => {
|
||||||
|
// Backup existing data
|
||||||
|
console.log('📦 Creating backup tables...');
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS cves_backup AS SELECT * FROM cves`, (err) => {
|
||||||
|
if (err) console.error('Backup error:', err);
|
||||||
|
else console.log('✓ CVEs backed up');
|
||||||
|
});
|
||||||
|
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS documents_backup AS SELECT * FROM documents`, (err) => {
|
||||||
|
if (err) console.error('Backup error:', err);
|
||||||
|
else console.log('✓ Documents backed up');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Drop old table
|
||||||
|
console.log('\n🗑️ Dropping old cves table...');
|
||||||
|
db.run(`DROP TABLE IF EXISTS cves`, (err) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('Drop error:', err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log('✓ Old table dropped');
|
||||||
|
|
||||||
|
// Create new table with UNIQUE(cve_id, vendor) instead of UNIQUE(cve_id)
|
||||||
|
console.log('\n🏗️ Creating new cves table with multi-vendor support...');
|
||||||
|
db.run(`
|
||||||
|
CREATE TABLE cves (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
cve_id VARCHAR(20) NOT NULL,
|
||||||
|
vendor VARCHAR(100) NOT NULL,
|
||||||
|
severity VARCHAR(20) NOT NULL,
|
||||||
|
description TEXT,
|
||||||
|
published_date DATE,
|
||||||
|
status VARCHAR(50) DEFAULT 'Open',
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
UNIQUE(cve_id, vendor)
|
||||||
|
)
|
||||||
|
`, (err) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('Create error:', err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log('✓ New table created with UNIQUE(cve_id, vendor)');
|
||||||
|
|
||||||
|
// Restore data
|
||||||
|
console.log('\n📥 Restoring data...');
|
||||||
|
db.run(`INSERT INTO cves SELECT * FROM cves_backup`, (err) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('Restore error:', err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log('✓ Data restored');
|
||||||
|
|
||||||
|
// Recreate indexes
|
||||||
|
console.log('\n🔍 Creating indexes...');
|
||||||
|
db.run(`CREATE INDEX idx_cve_id ON cves(cve_id)`, () => {
|
||||||
|
console.log('✓ Index: idx_cve_id');
|
||||||
|
});
|
||||||
|
db.run(`CREATE INDEX idx_vendor ON cves(vendor)`, () => {
|
||||||
|
console.log('✓ Index: idx_vendor');
|
||||||
|
});
|
||||||
|
db.run(`CREATE INDEX idx_severity ON cves(severity)`, () => {
|
||||||
|
console.log('✓ Index: idx_severity');
|
||||||
|
});
|
||||||
|
db.run(`CREATE INDEX idx_status ON cves(status)`, () => {
|
||||||
|
console.log('✓ Index: idx_status');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update view
|
||||||
|
console.log('\n👁️ Updating cve_document_status view...');
|
||||||
|
db.run(`DROP VIEW IF EXISTS cve_document_status`, (err) => {
|
||||||
|
if (err) console.error('Drop view error:', err);
|
||||||
|
|
||||||
|
db.run(`
|
||||||
|
CREATE VIEW cve_document_status AS
|
||||||
|
SELECT
|
||||||
|
c.id as record_id,
|
||||||
|
c.cve_id,
|
||||||
|
c.vendor,
|
||||||
|
c.severity,
|
||||||
|
c.status,
|
||||||
|
COUNT(DISTINCT d.id) as total_documents,
|
||||||
|
COUNT(DISTINCT CASE WHEN d.type = 'advisory' THEN d.id END) as advisory_count,
|
||||||
|
COUNT(DISTINCT CASE WHEN d.type = 'email' THEN d.id END) as email_count,
|
||||||
|
COUNT(DISTINCT CASE WHEN d.type = 'screenshot' THEN d.id END) as screenshot_count,
|
||||||
|
CASE
|
||||||
|
WHEN COUNT(DISTINCT CASE WHEN d.type = 'advisory' THEN d.id END) > 0
|
||||||
|
THEN 'Complete'
|
||||||
|
ELSE 'Missing Required Docs'
|
||||||
|
END as compliance_status
|
||||||
|
FROM cves c
|
||||||
|
LEFT JOIN documents d ON c.cve_id = d.cve_id AND c.vendor = d.vendor
|
||||||
|
GROUP BY c.id, c.cve_id, c.vendor, c.severity, c.status
|
||||||
|
`, (err) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('Create view error:', err);
|
||||||
|
} else {
|
||||||
|
console.log('✓ View recreated');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\n✅ Migration complete!');
|
||||||
|
console.log('\n📊 Summary:');
|
||||||
|
|
||||||
|
db.get('SELECT COUNT(*) as count FROM cves', (err, row) => {
|
||||||
|
if (!err) console.log(` Total CVE entries: ${row.count}`);
|
||||||
|
|
||||||
|
db.get('SELECT COUNT(DISTINCT cve_id) as count FROM cves', (err, row) => {
|
||||||
|
if (!err) console.log(` Unique CVE IDs: ${row.count}`);
|
||||||
|
|
||||||
|
console.log('\n💡 Next steps:');
|
||||||
|
console.log(' 1. Restart backend: pkill -f "node server.js" && node server.js &');
|
||||||
|
console.log(' 2. Replace frontend/src/App.js with multi-vendor version');
|
||||||
|
console.log(' 3. Test by adding same CVE with multiple vendors\n');
|
||||||
|
|
||||||
|
db.close();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
# Database Migrations
|
|
||||||
|
|
||||||
These migration scripts were used to evolve the database schema during development. **They are NOT needed for fresh deployments** — `setup.js` contains the complete v1.0.0 schema.
|
|
||||||
|
|
||||||
These are retained for reference and for upgrading existing deployments that were set up before v1.0.0.
|
|
||||||
|
|
||||||
## Schema Migrations (run in order for existing deployments)
|
|
||||||
|
|
||||||
| Script | Purpose |
|
|
||||||
|--------|---------|
|
|
||||||
| `add_ivanti_sync_table.js` | Creates `ivanti_sync_state` table for tracking Ivanti sync status |
|
|
||||||
| `add_ivanti_findings_tables.js` | Creates `ivanti_findings_cache`, `ivanti_finding_notes`, `ivanti_counts_cache`, `ivanti_finding_overrides` tables |
|
|
||||||
| `add_ivanti_counts_history_table.js` | Creates `ivanti_counts_history` table for trend chart data |
|
|
||||||
| `add_ivanti_todo_queue_table.js` | Creates `ivanti_todo_queue` table for FP/Archer workflow queuing |
|
|
||||||
| `add_todo_queue_hostname.js` | Adds `hostname` column to `ivanti_todo_queue` |
|
|
||||||
| `add_todo_queue_ip_address.js` | Adds `ip_address` column to `ivanti_todo_queue` |
|
|
||||||
| `add_fp_submissions_table.js` | Creates `ivanti_fp_submissions` table for false positive workflow tracking |
|
|
||||||
| `add_fp_submission_editing.js` | Adds `lifecycle_status`, `ivanti_workflow_batch_uuid`, `updated_at` columns and `ivanti_fp_submission_history` table |
|
|
||||||
| `add_knowledge_base_table.js` | Creates `knowledge_base` table for KB article storage |
|
|
||||||
| `add_user_groups.js` | Adds `user_group` column to `users` table with validation triggers |
|
|
||||||
| `add_created_by_columns.js` | Adds `created_by` column to `compliance_notes` and `knowledge_base` tables |
|
|
||||||
| `add_compliance_tables.js` | Creates `compliance_uploads`, `compliance_items`, `compliance_notes` tables |
|
|
||||||
| `add_compliance_notes_group_id.js` | Adds `group_id` column to `compliance_notes` for multi-metric note grouping |
|
|
||||||
| `add_archer_tickets_table.js` | Creates `archer_tickets` table for Archer exception tracking |
|
|
||||||
| `add_archer_tickets_timestamps.js` | Adds `created_at` and `updated_at` columns to `archer_tickets` |
|
|
||||||
| `add_jira_sync_columns.js` | Adds Jira sync-related columns to `jira_tickets` |
|
|
||||||
| `add_card_workflow_type.js` | Adds `CARD` to `workflow_type` CHECK constraint on `ivanti_todo_queue` |
|
|
||||||
| `add_granite_workflow_type.js` | Adds `GRANITE` to `workflow_type` CHECK constraint on `ivanti_todo_queue` |
|
|
||||||
| `add_finding_archive_tables.js` | Creates `ivanti_finding_archives` and `ivanti_archive_transitions` tables |
|
|
||||||
| `add_closed_gone_state.js` | Adds `CLOSED_GONE` to `current_state` CHECK constraint on `ivanti_finding_archives` |
|
|
||||||
| `add_sync_anomaly_tables.js` | Creates `ivanti_sync_anomaly_log` and `ivanti_finding_bu_history` tables |
|
|
||||||
| `add_atlas_action_plans_cache.js` | Creates `atlas_action_plans_cache` table for Atlas API caching |
|
|
||||||
| `add_return_classification.js` | Adds `return_classification_json` column to `ivanti_sync_anomaly_log` |
|
|
||||||
|
|
||||||
## Data Migrations (one-time backfills)
|
|
||||||
|
|
||||||
| Script | Purpose |
|
|
||||||
|--------|---------|
|
|
||||||
| `backfill_anomaly_log.js` | Synthesizes anomaly log entries from existing archive transitions for historical chart data |
|
|
||||||
| `backfill_return_classification.js` | Populates `return_classification_json` for existing anomaly rows with returned findings. Supports `--force` flag to re-run. |
|
|
||||||
| `reclassify_bu_roundtrips.js` | Reclassifies archive transitions that were BU reassignment round-trips (archived then returned within 14 days) from the default `severity_score_drift` to `bu_reassignment` |
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
// Migration: Add return_classification_json column to ivanti_sync_anomaly_log
|
|
||||||
//
|
|
||||||
// Stores the classification breakdown for returned findings (e.g., how many
|
|
||||||
// returned due to BU reassignment back to team, severity re-escalation, etc.)
|
|
||||||
//
|
|
||||||
// Safe to re-run — uses ALTER TABLE with IF NOT EXISTS pattern.
|
|
||||||
//
|
|
||||||
// Usage: node backend/migrations/add_return_classification.js
|
|
||||||
|
|
||||||
const path = require('path');
|
|
||||||
const sqlite3 = require('sqlite3').verbose();
|
|
||||||
const dbPath = path.join(__dirname, '..', 'cve_database.db');
|
|
||||||
const db = new sqlite3.Database(dbPath);
|
|
||||||
|
|
||||||
console.log('Starting return classification migration...');
|
|
||||||
|
|
||||||
function run(sql, params = []) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.run(sql, params, function (err) {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(this);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function all(sql, params = []) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.all(sql, params, (err, rows) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(rows || []);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function migrate() {
|
|
||||||
// Check if column already exists
|
|
||||||
const columns = await all(`PRAGMA table_info(ivanti_sync_anomaly_log)`);
|
|
||||||
const hasColumn = columns.some(c => c.name === 'return_classification_json');
|
|
||||||
|
|
||||||
if (!hasColumn) {
|
|
||||||
await run(`ALTER TABLE ivanti_sync_anomaly_log ADD COLUMN return_classification_json TEXT NOT NULL DEFAULT '{}'`);
|
|
||||||
console.log('✓ Added return_classification_json column to ivanti_sync_anomaly_log');
|
|
||||||
} else {
|
|
||||||
console.log('✓ return_classification_json column already exists — skipping');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
migrate()
|
|
||||||
.then(() => {
|
|
||||||
console.log('Migration complete.');
|
|
||||||
db.close();
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.error('Migration failed:', err);
|
|
||||||
db.close();
|
|
||||||
process.exit(1);
|
|
||||||
});
|
|
||||||
@@ -1,165 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
// backfill_return_classification.js
|
|
||||||
//
|
|
||||||
// Retroactively populates return_classification_json for existing anomaly log
|
|
||||||
// rows that have returned_count > 0 but an empty return classification.
|
|
||||||
//
|
|
||||||
// For each such row, looks at archive transitions that went ARCHIVED → RETURNED
|
|
||||||
// on that date, then finds the *prior* archive reason (the most recent
|
|
||||||
// transition to ARCHIVED for that same archive record) to determine why the
|
|
||||||
// finding originally left — which tells us why it came back.
|
|
||||||
//
|
|
||||||
// Safe to run multiple times — only updates rows with empty classification.
|
|
||||||
//
|
|
||||||
// Usage: node backend/migrations/backfill_return_classification.js
|
|
||||||
|
|
||||||
const path = require('path');
|
|
||||||
const sqlite3 = require('sqlite3').verbose();
|
|
||||||
|
|
||||||
const DB_PATH = path.join(__dirname, '..', 'cve_database.db');
|
|
||||||
|
|
||||||
function dbAll(db, sql, params = []) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.all(sql, params, (err, rows) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(rows || []);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function dbGet(db, sql, params = []) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.get(sql, params, (err, row) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(row);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function dbRun(db, sql, params = []) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.run(sql, params, function (err) {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(this);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function main() {
|
|
||||||
const db = new sqlite3.Database(DB_PATH);
|
|
||||||
|
|
||||||
// Find anomaly log rows that have returned findings but no return classification
|
|
||||||
const rows = await dbAll(db,
|
|
||||||
`SELECT id, sync_timestamp, returned_count, return_classification_json
|
|
||||||
FROM ivanti_sync_anomaly_log
|
|
||||||
WHERE returned_count > 0
|
|
||||||
ORDER BY sync_timestamp ASC`
|
|
||||||
);
|
|
||||||
|
|
||||||
if (rows.length === 0) {
|
|
||||||
console.log('No anomaly log rows with returned findings found — nothing to backfill.');
|
|
||||||
db.close();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const force = process.argv.includes('--force');
|
|
||||||
let updated = 0;
|
|
||||||
let skipped = 0;
|
|
||||||
|
|
||||||
for (const row of rows) {
|
|
||||||
// Skip if already has a non-empty classification (unless --force)
|
|
||||||
if (!force) {
|
|
||||||
let existing = {};
|
|
||||||
try { existing = JSON.parse(row.return_classification_json || '{}'); } catch (_) {}
|
|
||||||
const hasData = Object.values(existing).some(v => v > 0);
|
|
||||||
if (hasData) {
|
|
||||||
skipped++;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Find the date of this anomaly row
|
|
||||||
const date = row.sync_timestamp.split('T')[0].split(' ')[0];
|
|
||||||
|
|
||||||
// Find all ARCHIVED → RETURNED transitions on this date
|
|
||||||
const returnTransitions = await dbAll(db,
|
|
||||||
`SELECT archive_id
|
|
||||||
FROM ivanti_archive_transitions
|
|
||||||
WHERE to_state = 'RETURNED'
|
|
||||||
AND DATE(transitioned_at) = ?`,
|
|
||||||
[date]
|
|
||||||
);
|
|
||||||
|
|
||||||
if (returnTransitions.length === 0) {
|
|
||||||
// No transitions found for this date — try a wider window (±1 day)
|
|
||||||
// since sync_timestamp and transitioned_at might not align exactly
|
|
||||||
const wider = await dbAll(db,
|
|
||||||
`SELECT archive_id
|
|
||||||
FROM ivanti_archive_transitions
|
|
||||||
WHERE to_state = 'RETURNED'
|
|
||||||
AND DATE(transitioned_at) BETWEEN DATE(?, '-1 day') AND DATE(?, '+1 day')`,
|
|
||||||
[date, date]
|
|
||||||
);
|
|
||||||
if (wider.length === 0) {
|
|
||||||
console.log(` ${date}: ${row.returned_count} returned but no matching transitions found — skipping`);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
returnTransitions.push(...wider);
|
|
||||||
}
|
|
||||||
|
|
||||||
// For each returned finding, look up the prior archive reason
|
|
||||||
const classification = { bu_reassignment: 0, severity_drift: 0, closed_on_platform: 0, decommissioned: 0 };
|
|
||||||
const seen = new Set();
|
|
||||||
|
|
||||||
for (const rt of returnTransitions) {
|
|
||||||
if (seen.has(rt.archive_id)) continue;
|
|
||||||
seen.add(rt.archive_id);
|
|
||||||
|
|
||||||
// Find the most recent ARCHIVED transition *before* this return
|
|
||||||
// (the reason it was archived before it came back)
|
|
||||||
const archiveTransition = await dbGet(db,
|
|
||||||
`SELECT reason FROM ivanti_archive_transitions
|
|
||||||
WHERE archive_id = ? AND to_state = 'ARCHIVED'
|
|
||||||
AND transitioned_at <= (
|
|
||||||
SELECT transitioned_at FROM ivanti_archive_transitions
|
|
||||||
WHERE archive_id = ? AND to_state = 'RETURNED'
|
|
||||||
AND DATE(transitioned_at) BETWEEN DATE(?, '-1 day') AND DATE(?, '+1 day')
|
|
||||||
ORDER BY transitioned_at DESC LIMIT 1
|
|
||||||
)
|
|
||||||
ORDER BY transitioned_at DESC LIMIT 1`,
|
|
||||||
[rt.archive_id, rt.archive_id, date, date]
|
|
||||||
);
|
|
||||||
|
|
||||||
if (archiveTransition && archiveTransition.reason) {
|
|
||||||
const reasonKey = archiveTransition.reason.split(':')[0];
|
|
||||||
if (reasonKey in classification) {
|
|
||||||
classification[reasonKey]++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const classificationJson = JSON.stringify(classification);
|
|
||||||
await dbRun(db,
|
|
||||||
`UPDATE ivanti_sync_anomaly_log
|
|
||||||
SET return_classification_json = ?
|
|
||||||
WHERE id = ?`,
|
|
||||||
[classificationJson, row.id]
|
|
||||||
);
|
|
||||||
|
|
||||||
const parts = Object.entries(classification)
|
|
||||||
.filter(([, v]) => v > 0)
|
|
||||||
.map(([k, v]) => `${v} ${k}`);
|
|
||||||
const breakdown = parts.length > 0 ? parts.join(', ') : 'unclassified';
|
|
||||||
|
|
||||||
console.log(` ${date}: ${row.returned_count} returned — ${breakdown}`);
|
|
||||||
updated++;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`\nBackfill complete: ${updated} rows updated, ${skipped} already had data.`);
|
|
||||||
db.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
main().catch(err => {
|
|
||||||
console.error('Fatal error:', err);
|
|
||||||
process.exit(1);
|
|
||||||
});
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
// reclassify_bu_roundtrips.js
|
|
||||||
//
|
|
||||||
// Reclassifies archive transitions that were part of a BU reassignment
|
|
||||||
// round-trip. These are findings that were archived (disappeared from sync)
|
|
||||||
// and then returned within a short window — indicating they were temporarily
|
|
||||||
// reassigned to a different BU and then reassigned back.
|
|
||||||
//
|
|
||||||
// The original drift checker couldn't classify these correctly because by the
|
|
||||||
// time it queried Ivanti, the findings had already been reassigned back to
|
|
||||||
// the expected BUs.
|
|
||||||
//
|
|
||||||
// After running this, re-run backfill_return_classification.js to update
|
|
||||||
// the anomaly log with the corrected reasons.
|
|
||||||
//
|
|
||||||
// Usage: node backend/migrations/reclassify_bu_roundtrips.js
|
|
||||||
|
|
||||||
const path = require('path');
|
|
||||||
const sqlite3 = require('sqlite3').verbose();
|
|
||||||
|
|
||||||
const DB_PATH = path.join(__dirname, '..', 'cve_database.db');
|
|
||||||
|
|
||||||
// Findings that were archived and returned within this many days are
|
|
||||||
// considered BU reassignment round-trips
|
|
||||||
const ROUNDTRIP_WINDOW_DAYS = 14;
|
|
||||||
|
|
||||||
function dbAll(db, sql, params = []) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.all(sql, params, (err, rows) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(rows || []);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function dbRun(db, sql, params = []) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.run(sql, params, function (err) {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(this);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function main() {
|
|
||||||
const db = new sqlite3.Database(DB_PATH);
|
|
||||||
|
|
||||||
// Find archive transitions where the finding was archived and then returned
|
|
||||||
// within the roundtrip window, and the archive reason is still the default
|
|
||||||
// severity_score_drift placeholder
|
|
||||||
const roundtrips = await dbAll(db, `
|
|
||||||
SELECT
|
|
||||||
t_arch.id AS archive_transition_id,
|
|
||||||
t_arch.archive_id,
|
|
||||||
a.finding_id,
|
|
||||||
a.finding_title,
|
|
||||||
t_arch.reason AS current_reason,
|
|
||||||
DATE(t_arch.transitioned_at) AS archived_date,
|
|
||||||
DATE(t_ret.transitioned_at) AS returned_date,
|
|
||||||
JULIANDAY(t_ret.transitioned_at) - JULIANDAY(t_arch.transitioned_at) AS days_between
|
|
||||||
FROM ivanti_archive_transitions t_arch
|
|
||||||
JOIN ivanti_finding_archives a ON a.id = t_arch.archive_id
|
|
||||||
JOIN ivanti_archive_transitions t_ret
|
|
||||||
ON t_ret.archive_id = t_arch.archive_id
|
|
||||||
AND t_ret.to_state = 'RETURNED'
|
|
||||||
AND t_ret.transitioned_at > t_arch.transitioned_at
|
|
||||||
WHERE t_arch.to_state = 'ARCHIVED'
|
|
||||||
AND t_arch.reason = 'severity_score_drift'
|
|
||||||
AND (JULIANDAY(t_ret.transitioned_at) - JULIANDAY(t_arch.transitioned_at)) BETWEEN 0 AND ?
|
|
||||||
ORDER BY t_arch.transitioned_at DESC
|
|
||||||
`, [ROUNDTRIP_WINDOW_DAYS]);
|
|
||||||
|
|
||||||
if (roundtrips.length === 0) {
|
|
||||||
console.log('No BU reassignment round-trips found to reclassify.');
|
|
||||||
db.close();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`Found ${roundtrips.length} archive transitions to reclassify as bu_reassignment:\n`);
|
|
||||||
|
|
||||||
let updated = 0;
|
|
||||||
for (const rt of roundtrips) {
|
|
||||||
console.log(` Finding ${rt.finding_id}: archived ${rt.archived_date}, returned ${rt.returned_date} (${Math.round(rt.days_between)}d) — ${rt.current_reason} → bu_reassignment`);
|
|
||||||
|
|
||||||
await dbRun(db,
|
|
||||||
`UPDATE ivanti_archive_transitions SET reason = 'bu_reassignment' WHERE id = ?`,
|
|
||||||
[rt.archive_transition_id]
|
|
||||||
);
|
|
||||||
updated++;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`\nReclassified ${updated} transitions.`);
|
|
||||||
console.log('\nNow run the return classification backfill to update anomaly log rows:');
|
|
||||||
console.log(' node backend/migrations/backfill_return_classification.js');
|
|
||||||
|
|
||||||
db.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
main().catch(err => {
|
|
||||||
console.error('Fatal error:', err);
|
|
||||||
process.exit(1);
|
|
||||||
});
|
|
||||||
@@ -1,615 +0,0 @@
|
|||||||
// CARD Asset Ownership API Routes
|
|
||||||
// Proxies CARD operations (confirm, decline, redirect, search) and orchestrates
|
|
||||||
// the two-step update_token flow for mutations.
|
|
||||||
|
|
||||||
const express = require('express');
|
|
||||||
const { requireGroup } = require('../middleware/auth');
|
|
||||||
const logAudit = require('../helpers/auditLog');
|
|
||||||
const {
|
|
||||||
isConfigured,
|
|
||||||
missingVars,
|
|
||||||
getTeams,
|
|
||||||
getTeamAssets,
|
|
||||||
getOwner,
|
|
||||||
confirmAsset,
|
|
||||||
declineAsset,
|
|
||||||
redirectAsset,
|
|
||||||
} = require('../helpers/cardApi');
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// DB helpers — promise wrappers for callback-based SQLite API
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
function dbRun(db, sql, params = []) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.run(sql, params, function (err) { if (err) reject(err); else resolve(this); });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function dbGet(db, sql, params = []) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.get(sql, params, (err, row) => { if (err) reject(err); else resolve(row); });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Error classification — maps CARD API / token errors to client responses
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
function handleCardError(err, res) {
|
|
||||||
const msg = err.message || String(err);
|
|
||||||
console.error('[card-api]', msg);
|
|
||||||
|
|
||||||
// Token endpoint errors (from acquireToken rejections)
|
|
||||||
if (msg.includes('Token acquisition failed')) {
|
|
||||||
if (msg.includes('HTTP 401')) {
|
|
||||||
return res.status(401).json({ error: 'CARD authorization failed. Check service account credentials.' });
|
|
||||||
}
|
|
||||||
if (msg.includes('HTTP 403')) {
|
|
||||||
return res.status(403).json({ error: 'CARD access denied. The service account may not be onboarded with the CARD team.' });
|
|
||||||
}
|
|
||||||
if (msg.includes('HTTP 525')) {
|
|
||||||
return res.status(502).json({ error: 'CARD LDAP error. The service account may not be provisioned correctly.' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// API call errors (after automatic 401 retry in helper)
|
|
||||||
if (msg.includes('401')) {
|
|
||||||
return res.status(401).json({ error: 'CARD token expired or invalid. The request has been retried once automatically.' });
|
|
||||||
}
|
|
||||||
if (msg.includes('403')) {
|
|
||||||
return res.status(403).json({ error: 'Insufficient CARD permissions for this operation.' });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Catch-all
|
|
||||||
return res.status(502).json({ error: 'CARD API request failed.', details: msg });
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Router factory
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
function createCardApiRouter(db, requireAuth) {
|
|
||||||
const router = express.Router();
|
|
||||||
|
|
||||||
// -------------------------------------------------------------------
|
|
||||||
// GET /status
|
|
||||||
// Returns whether the CARD API integration is configured.
|
|
||||||
// -------------------------------------------------------------------
|
|
||||||
router.get('/status', requireAuth(db), (req, res) => {
|
|
||||||
if (!isConfigured) {
|
|
||||||
return res.status(503).json({
|
|
||||||
configured: false,
|
|
||||||
error: 'CARD API is not configured.',
|
|
||||||
missingVars,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
res.json({ configured: true });
|
|
||||||
});
|
|
||||||
|
|
||||||
// -------------------------------------------------------------------
|
|
||||||
// GET /teams
|
|
||||||
// Proxy CARD teams list.
|
|
||||||
// -------------------------------------------------------------------
|
|
||||||
router.get('/teams', requireAuth(db), requireGroup('Admin', 'Standard_User'), async (req, res) => {
|
|
||||||
if (!isConfigured) {
|
|
||||||
return res.status(503).json({ error: 'CARD API is not configured.', missingVars });
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await getTeams();
|
|
||||||
|
|
||||||
if (result.ok) {
|
|
||||||
let body;
|
|
||||||
try {
|
|
||||||
body = JSON.parse(result.body);
|
|
||||||
} catch (_) {
|
|
||||||
body = result.body;
|
|
||||||
}
|
|
||||||
// CARD API wraps teams in { teams: [...], response_time: ... }
|
|
||||||
const teams = Array.isArray(body) ? body : (body && body.teams) || [];
|
|
||||||
return res.json(teams);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Forward CARD error status
|
|
||||||
let errorBody;
|
|
||||||
try {
|
|
||||||
errorBody = JSON.parse(result.body);
|
|
||||||
} catch (_) {
|
|
||||||
errorBody = { error: result.body };
|
|
||||||
}
|
|
||||||
return res.status(result.status).json(errorBody);
|
|
||||||
} catch (err) {
|
|
||||||
return handleCardError(err, res);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// -------------------------------------------------------------------
|
|
||||||
// GET /teams/:teamName/assets
|
|
||||||
// Proxy team assets with required disposition filter.
|
|
||||||
// -------------------------------------------------------------------
|
|
||||||
router.get('/teams/:teamName/assets', requireAuth(db), requireGroup('Admin', 'Standard_User'), async (req, res) => {
|
|
||||||
if (!isConfigured) {
|
|
||||||
return res.status(503).json({ error: 'CARD API is not configured.', missingVars });
|
|
||||||
}
|
|
||||||
|
|
||||||
const { teamName } = req.params;
|
|
||||||
const { disposition, page, page_size } = req.query;
|
|
||||||
|
|
||||||
if (!disposition) {
|
|
||||||
return res.status(400).json({ error: 'disposition query parameter is required.' });
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await getTeamAssets(teamName, {
|
|
||||||
disposition,
|
|
||||||
page: page ? parseInt(page, 10) : undefined,
|
|
||||||
pageSize: page_size ? parseInt(page_size, 10) : 50,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (result.ok) {
|
|
||||||
let body;
|
|
||||||
try {
|
|
||||||
body = JSON.parse(result.body);
|
|
||||||
} catch (_) {
|
|
||||||
body = result.body;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Audit log for asset search (fire-and-forget)
|
|
||||||
let resultCount = 0;
|
|
||||||
if (body && typeof body === 'object' && typeof body.total === 'number') {
|
|
||||||
resultCount = body.total;
|
|
||||||
} else if (body && Array.isArray(body.assets)) {
|
|
||||||
resultCount = body.assets.length;
|
|
||||||
}
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_search',
|
|
||||||
entityType: 'card_asset',
|
|
||||||
entityId: teamName,
|
|
||||||
details: { disposition, resultCount },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
|
|
||||||
return res.json(body);
|
|
||||||
}
|
|
||||||
|
|
||||||
let errorBody;
|
|
||||||
try {
|
|
||||||
errorBody = JSON.parse(result.body);
|
|
||||||
} catch (_) {
|
|
||||||
errorBody = { error: result.body };
|
|
||||||
}
|
|
||||||
return res.status(result.status).json(errorBody);
|
|
||||||
} catch (err) {
|
|
||||||
return handleCardError(err, res);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// -------------------------------------------------------------------
|
|
||||||
// GET /owner/:assetId
|
|
||||||
// Proxy owner record lookup.
|
|
||||||
// -------------------------------------------------------------------
|
|
||||||
router.get('/owner/:assetId', requireAuth(db), requireGroup('Admin', 'Standard_User'), async (req, res) => {
|
|
||||||
if (!isConfigured) {
|
|
||||||
return res.status(503).json({ error: 'CARD API is not configured.', missingVars });
|
|
||||||
}
|
|
||||||
|
|
||||||
const { assetId } = req.params;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await getOwner(assetId);
|
|
||||||
|
|
||||||
if (result.ok) {
|
|
||||||
let body;
|
|
||||||
try {
|
|
||||||
body = JSON.parse(result.body);
|
|
||||||
} catch (_) {
|
|
||||||
body = result.body;
|
|
||||||
}
|
|
||||||
return res.json(body);
|
|
||||||
}
|
|
||||||
|
|
||||||
let errorBody;
|
|
||||||
try {
|
|
||||||
errorBody = JSON.parse(result.body);
|
|
||||||
} catch (_) {
|
|
||||||
errorBody = { error: result.body };
|
|
||||||
}
|
|
||||||
return res.status(result.status).json(errorBody);
|
|
||||||
} catch (err) {
|
|
||||||
return handleCardError(err, res);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// -------------------------------------------------------------------
|
|
||||||
// POST /queue/:queueItemId/confirm
|
|
||||||
// Confirm asset to a team via CARD API.
|
|
||||||
// -------------------------------------------------------------------
|
|
||||||
router.post('/queue/:queueItemId/confirm', requireAuth(db), requireGroup('Admin', 'Standard_User'), async (req, res) => {
|
|
||||||
if (!isConfigured) {
|
|
||||||
return res.status(503).json({ error: 'CARD API is not configured.', missingVars });
|
|
||||||
}
|
|
||||||
|
|
||||||
const { queueItemId } = req.params;
|
|
||||||
const { teamName, assetId, comment } = req.body;
|
|
||||||
|
|
||||||
// Validate required fields
|
|
||||||
if (!teamName || typeof teamName !== 'string' || !teamName.trim()) {
|
|
||||||
return res.status(400).json({ error: 'teamName is required.' });
|
|
||||||
}
|
|
||||||
if (!assetId || typeof assetId !== 'string' || !assetId.trim()) {
|
|
||||||
return res.status(400).json({ error: 'assetId is required.' });
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Validate queue item
|
|
||||||
const item = await dbGet(db,
|
|
||||||
'SELECT * FROM ivanti_todo_queue WHERE id = ? AND user_id = ? AND workflow_type = ?',
|
|
||||||
[queueItemId, req.user.id, 'CARD']
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!item) {
|
|
||||||
return res.status(404).json({ error: 'Queue item not found.' });
|
|
||||||
}
|
|
||||||
if (item.status !== 'pending') {
|
|
||||||
return res.status(400).json({ error: 'Only pending queue items can be executed.' });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Step 1: Get owner record for update_token
|
|
||||||
const ownerResult = await getOwner(assetId);
|
|
||||||
if (!ownerResult.ok) {
|
|
||||||
const errMsg = `Failed to fetch owner record: HTTP ${ownerResult.status}`;
|
|
||||||
console.error('[card-api]', errMsg);
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_action_failed',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { actionType: 'confirm', assetId, error: errMsg, cardStatus: ownerResult.status },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
let errorBody;
|
|
||||||
try { errorBody = JSON.parse(ownerResult.body); } catch (_) { errorBody = { error: ownerResult.body }; }
|
|
||||||
return res.status(ownerResult.status).json(errorBody);
|
|
||||||
}
|
|
||||||
|
|
||||||
let ownerData;
|
|
||||||
try { ownerData = JSON.parse(ownerResult.body); } catch (_) { ownerData = {}; }
|
|
||||||
const updateToken = ownerData.owner && ownerData.owner.update_token;
|
|
||||||
|
|
||||||
if (!updateToken) {
|
|
||||||
const errMsg = 'update_token not found in owner record.';
|
|
||||||
console.error('[card-api]', errMsg);
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_action_failed',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { actionType: 'confirm', assetId, error: errMsg, cardStatus: null },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
return res.status(502).json({ error: 'CARD API request failed.', details: errMsg });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Step 2: Execute confirm mutation
|
|
||||||
const confirmResult = await confirmAsset(assetId, teamName.trim(), updateToken, comment || '');
|
|
||||||
|
|
||||||
if (confirmResult.ok) {
|
|
||||||
// Update queue item to complete
|
|
||||||
await dbRun(db,
|
|
||||||
"UPDATE ivanti_todo_queue SET status = 'complete', updated_at = CURRENT_TIMESTAMP WHERE id = ?",
|
|
||||||
[queueItemId]
|
|
||||||
);
|
|
||||||
|
|
||||||
let cardResponse;
|
|
||||||
try { cardResponse = JSON.parse(confirmResult.body); } catch (_) { cardResponse = confirmResult.body; }
|
|
||||||
|
|
||||||
// Audit log (fire-and-forget)
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_confirm',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { assetId, teamName: teamName.trim(), comment: comment || '', cardStatus: confirmResult.status },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
|
|
||||||
return res.json({ success: true, cardResponse });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mutation failed — leave queue item as pending
|
|
||||||
const errMsg = `Confirm failed: HTTP ${confirmResult.status}`;
|
|
||||||
console.error('[card-api]', errMsg);
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_action_failed',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { actionType: 'confirm', assetId, error: errMsg, cardStatus: confirmResult.status },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
|
|
||||||
let errorBody;
|
|
||||||
try { errorBody = JSON.parse(confirmResult.body); } catch (_) { errorBody = { error: confirmResult.body }; }
|
|
||||||
return res.status(confirmResult.status).json(errorBody);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[card-api] Confirm error:', err.message);
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_action_failed',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { actionType: 'confirm', assetId, error: err.message, cardStatus: null },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
return handleCardError(err, res);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// -------------------------------------------------------------------
|
|
||||||
// POST /queue/:queueItemId/decline
|
|
||||||
// Decline asset from a team via CARD API.
|
|
||||||
// -------------------------------------------------------------------
|
|
||||||
router.post('/queue/:queueItemId/decline', requireAuth(db), requireGroup('Admin', 'Standard_User'), async (req, res) => {
|
|
||||||
if (!isConfigured) {
|
|
||||||
return res.status(503).json({ error: 'CARD API is not configured.', missingVars });
|
|
||||||
}
|
|
||||||
|
|
||||||
const { queueItemId } = req.params;
|
|
||||||
const { teamName, assetId, comment } = req.body;
|
|
||||||
|
|
||||||
// Validate required fields
|
|
||||||
if (!teamName || typeof teamName !== 'string' || !teamName.trim()) {
|
|
||||||
return res.status(400).json({ error: 'teamName is required.' });
|
|
||||||
}
|
|
||||||
if (!assetId || typeof assetId !== 'string' || !assetId.trim()) {
|
|
||||||
return res.status(400).json({ error: 'assetId is required.' });
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Validate queue item
|
|
||||||
const item = await dbGet(db,
|
|
||||||
'SELECT * FROM ivanti_todo_queue WHERE id = ? AND user_id = ? AND workflow_type = ?',
|
|
||||||
[queueItemId, req.user.id, 'CARD']
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!item) {
|
|
||||||
return res.status(404).json({ error: 'Queue item not found.' });
|
|
||||||
}
|
|
||||||
if (item.status !== 'pending') {
|
|
||||||
return res.status(400).json({ error: 'Only pending queue items can be executed.' });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Step 1: Get owner record for update_token
|
|
||||||
const ownerResult = await getOwner(assetId);
|
|
||||||
if (!ownerResult.ok) {
|
|
||||||
const errMsg = `Failed to fetch owner record: HTTP ${ownerResult.status}`;
|
|
||||||
console.error('[card-api]', errMsg);
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_action_failed',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { actionType: 'decline', assetId, error: errMsg, cardStatus: ownerResult.status },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
let errorBody;
|
|
||||||
try { errorBody = JSON.parse(ownerResult.body); } catch (_) { errorBody = { error: ownerResult.body }; }
|
|
||||||
return res.status(ownerResult.status).json(errorBody);
|
|
||||||
}
|
|
||||||
|
|
||||||
let ownerData;
|
|
||||||
try { ownerData = JSON.parse(ownerResult.body); } catch (_) { ownerData = {}; }
|
|
||||||
const updateToken = ownerData.owner && ownerData.owner.update_token;
|
|
||||||
|
|
||||||
if (!updateToken) {
|
|
||||||
const errMsg = 'update_token not found in owner record.';
|
|
||||||
console.error('[card-api]', errMsg);
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_action_failed',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { actionType: 'decline', assetId, error: errMsg, cardStatus: null },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
return res.status(502).json({ error: 'CARD API request failed.', details: errMsg });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Step 2: Execute decline mutation
|
|
||||||
const declineResult = await declineAsset(assetId, teamName.trim(), updateToken, comment || '');
|
|
||||||
|
|
||||||
if (declineResult.ok) {
|
|
||||||
await dbRun(db,
|
|
||||||
"UPDATE ivanti_todo_queue SET status = 'complete', updated_at = CURRENT_TIMESTAMP WHERE id = ?",
|
|
||||||
[queueItemId]
|
|
||||||
);
|
|
||||||
|
|
||||||
let cardResponse;
|
|
||||||
try { cardResponse = JSON.parse(declineResult.body); } catch (_) { cardResponse = declineResult.body; }
|
|
||||||
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_decline',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { assetId, teamName: teamName.trim(), comment: comment || '', cardStatus: declineResult.status },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
|
|
||||||
return res.json({ success: true, cardResponse });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mutation failed
|
|
||||||
const errMsg = `Decline failed: HTTP ${declineResult.status}`;
|
|
||||||
console.error('[card-api]', errMsg);
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_action_failed',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { actionType: 'decline', assetId, error: errMsg, cardStatus: declineResult.status },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
|
|
||||||
let errorBody;
|
|
||||||
try { errorBody = JSON.parse(declineResult.body); } catch (_) { errorBody = { error: declineResult.body }; }
|
|
||||||
return res.status(declineResult.status).json(errorBody);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[card-api] Decline error:', err.message);
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_action_failed',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { actionType: 'decline', assetId, error: err.message, cardStatus: null },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
return handleCardError(err, res);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// -------------------------------------------------------------------
|
|
||||||
// POST /queue/:queueItemId/redirect
|
|
||||||
// Redirect asset from one team to another via CARD API.
|
|
||||||
// -------------------------------------------------------------------
|
|
||||||
router.post('/queue/:queueItemId/redirect', requireAuth(db), requireGroup('Admin', 'Standard_User'), async (req, res) => {
|
|
||||||
if (!isConfigured) {
|
|
||||||
return res.status(503).json({ error: 'CARD API is not configured.', missingVars });
|
|
||||||
}
|
|
||||||
|
|
||||||
const { queueItemId } = req.params;
|
|
||||||
const { fromTeam, toTeam, assetId } = req.body;
|
|
||||||
|
|
||||||
// Validate required fields
|
|
||||||
if (!fromTeam || typeof fromTeam !== 'string' || !fromTeam.trim()) {
|
|
||||||
return res.status(400).json({ error: 'fromTeam is required.' });
|
|
||||||
}
|
|
||||||
if (!toTeam || typeof toTeam !== 'string' || !toTeam.trim()) {
|
|
||||||
return res.status(400).json({ error: 'toTeam is required.' });
|
|
||||||
}
|
|
||||||
if (!assetId || typeof assetId !== 'string' || !assetId.trim()) {
|
|
||||||
return res.status(400).json({ error: 'assetId is required.' });
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Validate queue item
|
|
||||||
const item = await dbGet(db,
|
|
||||||
'SELECT * FROM ivanti_todo_queue WHERE id = ? AND user_id = ? AND workflow_type = ?',
|
|
||||||
[queueItemId, req.user.id, 'CARD']
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!item) {
|
|
||||||
return res.status(404).json({ error: 'Queue item not found.' });
|
|
||||||
}
|
|
||||||
if (item.status !== 'pending') {
|
|
||||||
return res.status(400).json({ error: 'Only pending queue items can be executed.' });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Step 1: Get owner record for update_token
|
|
||||||
const ownerResult = await getOwner(assetId);
|
|
||||||
if (!ownerResult.ok) {
|
|
||||||
const errMsg = `Failed to fetch owner record: HTTP ${ownerResult.status}`;
|
|
||||||
console.error('[card-api]', errMsg);
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_action_failed',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { actionType: 'redirect', assetId, error: errMsg, cardStatus: ownerResult.status },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
let errorBody;
|
|
||||||
try { errorBody = JSON.parse(ownerResult.body); } catch (_) { errorBody = { error: ownerResult.body }; }
|
|
||||||
return res.status(ownerResult.status).json(errorBody);
|
|
||||||
}
|
|
||||||
|
|
||||||
let ownerData;
|
|
||||||
try { ownerData = JSON.parse(ownerResult.body); } catch (_) { ownerData = {}; }
|
|
||||||
const updateToken = ownerData.owner && ownerData.owner.update_token;
|
|
||||||
|
|
||||||
if (!updateToken) {
|
|
||||||
const errMsg = 'update_token not found in owner record.';
|
|
||||||
console.error('[card-api]', errMsg);
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_action_failed',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { actionType: 'redirect', assetId, error: errMsg, cardStatus: null },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
return res.status(502).json({ error: 'CARD API request failed.', details: errMsg });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Step 2: Execute redirect mutation
|
|
||||||
const redirectResult = await redirectAsset(assetId, fromTeam.trim(), toTeam.trim(), updateToken);
|
|
||||||
|
|
||||||
if (redirectResult.ok) {
|
|
||||||
await dbRun(db,
|
|
||||||
"UPDATE ivanti_todo_queue SET status = 'complete', updated_at = CURRENT_TIMESTAMP WHERE id = ?",
|
|
||||||
[queueItemId]
|
|
||||||
);
|
|
||||||
|
|
||||||
let cardResponse;
|
|
||||||
try { cardResponse = JSON.parse(redirectResult.body); } catch (_) { cardResponse = redirectResult.body; }
|
|
||||||
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_redirect',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { assetId, fromTeam: fromTeam.trim(), toTeam: toTeam.trim(), cardStatus: redirectResult.status },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
|
|
||||||
return res.json({ success: true, cardResponse });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mutation failed
|
|
||||||
const errMsg = `Redirect failed: HTTP ${redirectResult.status}`;
|
|
||||||
console.error('[card-api]', errMsg);
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_action_failed',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { actionType: 'redirect', assetId, error: errMsg, cardStatus: redirectResult.status },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
|
|
||||||
let errorBody;
|
|
||||||
try { errorBody = JSON.parse(redirectResult.body); } catch (_) { errorBody = { error: redirectResult.body }; }
|
|
||||||
return res.status(redirectResult.status).json(errorBody);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[card-api] Redirect error:', err.message);
|
|
||||||
logAudit(db, {
|
|
||||||
userId: req.user.id,
|
|
||||||
username: req.user.username,
|
|
||||||
action: 'card_action_failed',
|
|
||||||
entityType: 'ivanti_todo_queue',
|
|
||||||
entityId: String(queueItemId),
|
|
||||||
details: { actionType: 'redirect', assetId, error: err.message, cardStatus: null },
|
|
||||||
ipAddress: req.ip,
|
|
||||||
});
|
|
||||||
return handleCardError(err, res);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return router;
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = createCardApiRouter;
|
|
||||||
@@ -13,8 +13,8 @@
|
|||||||
// POST /notes — add a note to one or more (hostname, metric_id) pairs
|
// POST /notes — add a note to one or more (hostname, metric_id) pairs
|
||||||
// GET /notes/:hostname/:metricId — notes for a specific device+metric
|
// GET /notes/:hostname/:metricId — notes for a specific device+metric
|
||||||
// GET /trends — per-upload totals + per-team counts for time-series charts
|
// GET /trends — per-upload totals + per-team counts for time-series charts
|
||||||
// GET /mttr — aging findings distribution by seen_count bucket and team
|
// GET /mttr — mean time to resolution per team
|
||||||
// GET /top-recurring — net change waterfall (per-cycle start/new/recurring/resolved/end)
|
// GET /top-recurring — chronic compliance gaps sorted by seen_count
|
||||||
// GET /category-trend — active counts per category per upload for stacked area chart
|
// GET /category-trend — active counts per category per upload for stacked area chart
|
||||||
|
|
||||||
const express = require('express');
|
const express = require('express');
|
||||||
@@ -240,60 +240,6 @@ function groupByHostname(rows, noteHostnames) {
|
|||||||
return Object.values(deviceMap);
|
return Object.values(deviceMap);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Pure function: bucket active items by age group and pivot per-team counts
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
const BUCKET_ORDER = ['1 cycle', '2–3 cycles', '4–6 cycles', '7+ cycles'];
|
|
||||||
|
|
||||||
function bucketAgingItems(items) {
|
|
||||||
// Initialise empty buckets with all teams at zero
|
|
||||||
const teams = ['STEAM', 'ACCESS-ENG', 'ACCESS-OPS', 'INTELDEV'];
|
|
||||||
const buckets = {};
|
|
||||||
for (const b of BUCKET_ORDER) {
|
|
||||||
buckets[b] = { bucket: b, total: 0 };
|
|
||||||
for (const t of teams) buckets[b][t] = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Classify each item into a bucket
|
|
||||||
for (const item of items) {
|
|
||||||
const sc = item.seen_count;
|
|
||||||
let label;
|
|
||||||
if (sc === 1) label = '1 cycle';
|
|
||||||
else if (sc >= 2 && sc <= 3) label = '2–3 cycles';
|
|
||||||
else if (sc >= 4 && sc <= 6) label = '4–6 cycles';
|
|
||||||
else label = '7+ cycles';
|
|
||||||
|
|
||||||
const team = item.team;
|
|
||||||
buckets[label].total += 1;
|
|
||||||
if (team in buckets[label]) {
|
|
||||||
buckets[label][team] += 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Return in ascending age order
|
|
||||||
return BUCKET_ORDER.map(b => buckets[b]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Pure function: compute waterfall chain from ordered upload records
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
function computeWaterfall(uploads) {
|
|
||||||
let start = 0;
|
|
||||||
return uploads.map((row) => {
|
|
||||||
const end = start + row.new_count + row.recurring_count - row.resolved_count;
|
|
||||||
const entry = {
|
|
||||||
date: row.report_date,
|
|
||||||
start,
|
|
||||||
new_count: row.new_count,
|
|
||||||
recurring_count: row.recurring_count,
|
|
||||||
resolved_count: row.resolved_count,
|
|
||||||
end,
|
|
||||||
};
|
|
||||||
start = end;
|
|
||||||
return entry;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Router factory
|
// Router factory
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
@@ -1066,23 +1012,27 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
|
|||||||
|
|
||||||
// -----------------------------------------------------------------------
|
// -----------------------------------------------------------------------
|
||||||
// GET /mttr
|
// GET /mttr
|
||||||
// Aging Findings Distribution — active findings bucketed by seen_count
|
// Mean time to resolution (calendar days) per team, for resolved items.
|
||||||
// with per-team breakdown for stacked bar chart.
|
|
||||||
//
|
//
|
||||||
// Response: { aging: [{ bucket, total, STEAM, ACCESS-ENG, ACCESS-OPS, INTELDEV }] }
|
// Response: { mttr: [{ team, avg_days, resolved_count }] }
|
||||||
// -----------------------------------------------------------------------
|
// -----------------------------------------------------------------------
|
||||||
router.get('/mttr', async (req, res) => {
|
router.get('/mttr', async (req, res) => {
|
||||||
try {
|
try {
|
||||||
const rows = await dbAll(db,
|
const rows = await dbAll(db,
|
||||||
`SELECT COALESCE(seen_count, 1) AS seen_count, team
|
`SELECT
|
||||||
FROM compliance_items
|
ci.team,
|
||||||
WHERE status = 'active'`
|
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`
|
||||||
);
|
);
|
||||||
if (rows.length === 0) {
|
res.json({ mttr: rows });
|
||||||
return res.json({ aging: [] });
|
|
||||||
}
|
|
||||||
const aging = bucketAgingItems(rows);
|
|
||||||
res.json({ aging });
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('[Compliance] GET /mttr error:', err.message);
|
console.error('[Compliance] GET /mttr error:', err.message);
|
||||||
res.status(500).json({ error: 'Database error' });
|
res.status(500).json({ error: 'Database error' });
|
||||||
@@ -1091,24 +1041,23 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
|
|||||||
|
|
||||||
// -----------------------------------------------------------------------
|
// -----------------------------------------------------------------------
|
||||||
// GET /top-recurring
|
// GET /top-recurring
|
||||||
// Net Change Waterfall — per-cycle net movement (start → +new →
|
// Active findings grouped by team + metric_id, sorted by seen_count desc.
|
||||||
// +recurring → −resolved → end) computed from compliance_uploads.
|
// Identifies chronic compliance gaps that keep reappearing.
|
||||||
//
|
//
|
||||||
// Response: { waterfall: [{ date, start, new_count, recurring_count,
|
// Response: { items: [{ team, metric_id, metric_desc, seen_count,
|
||||||
// resolved_count, end }] }
|
// host_count }] } — limited to top 20
|
||||||
// -----------------------------------------------------------------------
|
// -----------------------------------------------------------------------
|
||||||
router.get('/top-recurring', async (req, res) => {
|
router.get('/top-recurring', async (req, res) => {
|
||||||
try {
|
try {
|
||||||
const rows = await dbAll(db,
|
const rows = await dbAll(db,
|
||||||
`SELECT id, report_date,
|
`SELECT team, metric_id, metric_desc, seen_count, COUNT(*) AS host_count
|
||||||
COALESCE(new_count, 0) AS new_count,
|
FROM compliance_items
|
||||||
COALESCE(recurring_count, 0) AS recurring_count,
|
WHERE status = 'active'
|
||||||
COALESCE(resolved_count, 0) AS resolved_count
|
GROUP BY team, metric_id
|
||||||
FROM compliance_uploads
|
ORDER BY seen_count DESC, host_count DESC
|
||||||
ORDER BY report_date ASC`
|
LIMIT 20`
|
||||||
);
|
);
|
||||||
const waterfall = computeWaterfall(rows);
|
res.json({ items: rows });
|
||||||
res.json({ waterfall });
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('[Compliance] GET /top-recurring error:', err.message);
|
console.error('[Compliance] GET /top-recurring error:', err.message);
|
||||||
res.status(500).json({ error: 'Database error' });
|
res.status(500).json({ error: 'Database error' });
|
||||||
@@ -1140,4 +1089,4 @@ function createComplianceRouter(db, upload, requireAuth, requireGroup) {
|
|||||||
return router;
|
return router;
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = { createComplianceRouter, bucketAgingItems, computeWaterfall };
|
module.exports = createComplianceRouter;
|
||||||
|
|||||||
@@ -275,7 +275,6 @@ async function detectArchiveChanges(db, previousFindings, currentFindings) {
|
|||||||
|
|
||||||
// 2. Returned findings: in current AND has existing ARCHIVED record → RETURNED
|
// 2. Returned findings: in current AND has existing ARCHIVED record → RETURNED
|
||||||
const currentIdsList = [...currentIds];
|
const currentIdsList = [...currentIds];
|
||||||
const returnedArchiveIds = []; // track archive IDs of returned findings for classification
|
|
||||||
if (currentIdsList.length > 0) {
|
if (currentIdsList.length > 0) {
|
||||||
try {
|
try {
|
||||||
const archivedRecords = await dbAll(db,
|
const archivedRecords = await dbAll(db,
|
||||||
@@ -298,7 +297,6 @@ async function detectArchiveChanges(db, previousFindings, currentFindings) {
|
|||||||
VALUES (?, 'ARCHIVED', 'RETURNED', ?, 'reappeared_in_sync', datetime('now'))`,
|
VALUES (?, 'ARCHIVED', 'RETURNED', ?, 'reappeared_in_sync', datetime('now'))`,
|
||||||
[record.id, severity]
|
[record.id, severity]
|
||||||
);
|
);
|
||||||
returnedArchiveIds.push(record.id);
|
|
||||||
console.log(`[Archive Detection] Finding ${record.finding_id} returned (ARCHIVED → RETURNED)`);
|
console.log(`[Archive Detection] Finding ${record.finding_id} returned (ARCHIVED → RETURNED)`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -308,39 +306,23 @@ async function detectArchiveChanges(db, previousFindings, currentFindings) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Count returned findings for anomaly summary
|
// Count returned findings for anomaly summary
|
||||||
let returnedCount = returnedArchiveIds.length;
|
let returnedCount = 0;
|
||||||
|
if (currentIdsList.length > 0) {
|
||||||
// Classify returned findings by looking up the reason they were originally archived.
|
|
||||||
// This tells us *why* they came back (e.g., BU reassignment back to team).
|
|
||||||
const returnClassification = { bu_reassignment: 0, severity_drift: 0, closed_on_platform: 0, decommissioned: 0 };
|
|
||||||
for (const archiveId of returnedArchiveIds) {
|
|
||||||
try {
|
try {
|
||||||
// Find the most recent ARCHIVED transition reason *before* this return
|
// Count how many ARCHIVED records transitioned to RETURNED in this cycle
|
||||||
const transition = await dbGet(db,
|
// (already handled above, just count them)
|
||||||
`SELECT reason FROM ivanti_archive_transitions
|
const archivedForCount = await dbAll(db,
|
||||||
WHERE archive_id = ? AND to_state = 'ARCHIVED'
|
`SELECT id, finding_id FROM ivanti_finding_archives WHERE current_state = 'RETURNED' AND last_transition_at >= datetime('now', '-1 minute')`
|
||||||
AND transitioned_at <= datetime('now')
|
|
||||||
ORDER BY transitioned_at DESC LIMIT 1`,
|
|
||||||
[archiveId]
|
|
||||||
);
|
);
|
||||||
if (transition && transition.reason) {
|
returnedCount = archivedForCount.length;
|
||||||
// Reason format is either a plain key or "key:detail" (e.g., "bu_reassignment:SOME-BU")
|
|
||||||
const reasonKey = transition.reason.split(':')[0];
|
|
||||||
if (reasonKey in returnClassification) {
|
|
||||||
returnClassification[reasonKey]++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
// Non-fatal — skip this finding's classification
|
// Non-fatal — returnedCount stays 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(`[Archive Detection] Processed ${disappearedIds.length} disappeared, ${returnedCount} returned, checked ${currentIdsList.length} current findings against archive`);
|
console.log(`[Archive Detection] Processed ${disappearedIds.length} disappeared, ${returnedCount} returned, checked ${currentIdsList.length} current findings against archive`);
|
||||||
if (returnedCount > 0) {
|
|
||||||
console.log(`[Archive Detection] Return classification:`, returnClassification);
|
|
||||||
}
|
|
||||||
|
|
||||||
return { disappearedIds, returnedCount, returnClassification };
|
return { disappearedIds, returnedCount };
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
@@ -781,9 +763,9 @@ async function syncFindings(db) {
|
|||||||
|
|
||||||
// Archive detection — compare previous vs current to detect disappeared/returned findings
|
// Archive detection — compare previous vs current to detect disappeared/returned findings
|
||||||
// Only runs after a successful sync (skipped on error per requirement 1.5)
|
// Only runs after a successful sync (skipped on error per requirement 1.5)
|
||||||
let archiveResult = { disappearedIds: [], returnedCount: 0, returnClassification: {} };
|
let archiveResult = { disappearedIds: [], returnedCount: 0 };
|
||||||
try {
|
try {
|
||||||
archiveResult = await detectArchiveChanges(db, previousFindings, allFindings) || { disappearedIds: [], returnedCount: 0, returnClassification: {} };
|
archiveResult = await detectArchiveChanges(db, previousFindings, allFindings) || { disappearedIds: [], returnedCount: 0 };
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('[Ivanti Findings] Archive detection failed (non-fatal):', err.message);
|
console.error('[Ivanti Findings] Archive detection failed (non-fatal):', err.message);
|
||||||
}
|
}
|
||||||
@@ -830,8 +812,7 @@ async function syncFindings(db) {
|
|||||||
closedCountDelta,
|
closedCountDelta,
|
||||||
archiveResult.disappearedIds.length,
|
archiveResult.disappearedIds.length,
|
||||||
archiveResult.returnedCount,
|
archiveResult.returnedCount,
|
||||||
classificationBreakdown,
|
classificationBreakdown
|
||||||
archiveResult.returnClassification || {}
|
|
||||||
);
|
);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('[Ivanti Findings] Anomaly summary failed (non-fatal):', err.message);
|
console.error('[Ivanti Findings] Anomaly summary failed (non-fatal):', err.message);
|
||||||
@@ -1079,24 +1060,20 @@ async function runBUDriftChecker(db, newlyArchivedIds, apiKey, clientId, skipTls
|
|||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Anomaly Summary — compute and store post-sync anomaly report
|
// Anomaly Summary — compute and store post-sync anomaly report
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
async function computeAnomalySummary(db, openCountDelta, closedCountDelta, newlyArchivedCount, returnedCount, classificationBreakdown, returnClassificationBreakdown) {
|
async function computeAnomalySummary(db, openCountDelta, closedCountDelta, newlyArchivedCount, returnedCount, classificationBreakdown) {
|
||||||
try {
|
try {
|
||||||
const isSignificant = newlyArchivedCount > 5 ? 1 : 0;
|
const isSignificant = newlyArchivedCount > 5 ? 1 : 0;
|
||||||
const classificationJson = JSON.stringify(classificationBreakdown || {});
|
const classificationJson = JSON.stringify(classificationBreakdown || {});
|
||||||
const returnClassificationJson = JSON.stringify(returnClassificationBreakdown || {});
|
|
||||||
|
|
||||||
await dbRun(db,
|
await dbRun(db,
|
||||||
`INSERT INTO ivanti_sync_anomaly_log
|
`INSERT INTO ivanti_sync_anomaly_log
|
||||||
(sync_timestamp, open_count_delta, closed_count_delta, newly_archived_count, returned_count, classification_json, return_classification_json, is_significant)
|
(sync_timestamp, open_count_delta, closed_count_delta, newly_archived_count, returned_count, classification_json, is_significant)
|
||||||
VALUES (datetime('now'), ?, ?, ?, ?, ?, ?, ?)`,
|
VALUES (datetime('now'), ?, ?, ?, ?, ?, ?)`,
|
||||||
[openCountDelta, closedCountDelta, newlyArchivedCount, returnedCount, classificationJson, returnClassificationJson, isSignificant]
|
[openCountDelta, closedCountDelta, newlyArchivedCount, returnedCount, classificationJson, isSignificant]
|
||||||
);
|
);
|
||||||
|
|
||||||
console.log(`[Anomaly Summary] Sync anomaly logged — open_delta: ${openCountDelta}, closed_delta: ${closedCountDelta}, archived: ${newlyArchivedCount}, returned: ${returnedCount}, significant: ${!!isSignificant}`);
|
console.log(`[Anomaly Summary] Sync anomaly logged — open_delta: ${openCountDelta}, closed_delta: ${closedCountDelta}, archived: ${newlyArchivedCount}, returned: ${returnedCount}, significant: ${!!isSignificant}`);
|
||||||
console.log(`[Anomaly Summary] Classification:`, classificationBreakdown);
|
console.log(`[Anomaly Summary] Classification:`, classificationBreakdown);
|
||||||
if (returnedCount > 0) {
|
|
||||||
console.log(`[Anomaly Summary] Return classification:`, returnClassificationBreakdown);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('[Anomaly Summary] Failed to write anomaly summary (non-fatal):', err.message);
|
console.error('[Anomaly Summary] Failed to write anomaly summary (non-fatal):', err.message);
|
||||||
}
|
}
|
||||||
@@ -1242,15 +1219,13 @@ function createIvantiFindingsRouter(db, requireAuth) {
|
|||||||
try {
|
try {
|
||||||
const row = await dbGet(db,
|
const row = await dbGet(db,
|
||||||
`SELECT id, sync_timestamp, open_count_delta, closed_count_delta,
|
`SELECT id, sync_timestamp, open_count_delta, closed_count_delta,
|
||||||
newly_archived_count, returned_count, classification_json, return_classification_json, is_significant
|
newly_archived_count, returned_count, classification_json, is_significant
|
||||||
FROM ivanti_sync_anomaly_log
|
FROM ivanti_sync_anomaly_log
|
||||||
ORDER BY sync_timestamp DESC LIMIT 1`
|
ORDER BY sync_timestamp DESC LIMIT 1`
|
||||||
);
|
);
|
||||||
if (!row) return res.json({ anomaly: null });
|
if (!row) return res.json({ anomaly: null });
|
||||||
let classification = {};
|
let classification = {};
|
||||||
try { classification = JSON.parse(row.classification_json || '{}'); } catch (_) {}
|
try { classification = JSON.parse(row.classification_json || '{}'); } catch (_) {}
|
||||||
let return_classification = {};
|
|
||||||
try { return_classification = JSON.parse(row.return_classification_json || '{}'); } catch (_) {}
|
|
||||||
res.json({
|
res.json({
|
||||||
anomaly: {
|
anomaly: {
|
||||||
id: row.id,
|
id: row.id,
|
||||||
@@ -1260,7 +1235,6 @@ function createIvantiFindingsRouter(db, requireAuth) {
|
|||||||
newly_archived_count: row.newly_archived_count,
|
newly_archived_count: row.newly_archived_count,
|
||||||
returned_count: row.returned_count,
|
returned_count: row.returned_count,
|
||||||
classification,
|
classification,
|
||||||
return_classification,
|
|
||||||
is_significant: !!row.is_significant
|
is_significant: !!row.is_significant
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -1291,7 +1265,7 @@ function createIvantiFindingsRouter(db, requireAuth) {
|
|||||||
if (from && to) {
|
if (from && to) {
|
||||||
rows = await dbAll(db,
|
rows = await dbAll(db,
|
||||||
`SELECT sync_timestamp, open_count_delta, closed_count_delta,
|
`SELECT sync_timestamp, open_count_delta, closed_count_delta,
|
||||||
newly_archived_count, returned_count, classification_json, return_classification_json, is_significant
|
newly_archived_count, returned_count, classification_json, is_significant
|
||||||
FROM ivanti_sync_anomaly_log
|
FROM ivanti_sync_anomaly_log
|
||||||
WHERE sync_timestamp >= ? AND sync_timestamp <= ?
|
WHERE sync_timestamp >= ? AND sync_timestamp <= ?
|
||||||
ORDER BY sync_timestamp DESC`,
|
ORDER BY sync_timestamp DESC`,
|
||||||
@@ -1300,7 +1274,7 @@ function createIvantiFindingsRouter(db, requireAuth) {
|
|||||||
} else {
|
} else {
|
||||||
rows = await dbAll(db,
|
rows = await dbAll(db,
|
||||||
`SELECT sync_timestamp, open_count_delta, closed_count_delta,
|
`SELECT sync_timestamp, open_count_delta, closed_count_delta,
|
||||||
newly_archived_count, returned_count, classification_json, return_classification_json, is_significant
|
newly_archived_count, returned_count, classification_json, is_significant
|
||||||
FROM ivanti_sync_anomaly_log
|
FROM ivanti_sync_anomaly_log
|
||||||
ORDER BY sync_timestamp DESC LIMIT 30`
|
ORDER BY sync_timestamp DESC LIMIT 30`
|
||||||
);
|
);
|
||||||
@@ -1309,8 +1283,6 @@ function createIvantiFindingsRouter(db, requireAuth) {
|
|||||||
const history = rows.map(row => {
|
const history = rows.map(row => {
|
||||||
let classification = {};
|
let classification = {};
|
||||||
try { classification = JSON.parse(row.classification_json || '{}'); } catch (_) {}
|
try { classification = JSON.parse(row.classification_json || '{}'); } catch (_) {}
|
||||||
let return_classification = {};
|
|
||||||
try { return_classification = JSON.parse(row.return_classification_json || '{}'); } catch (_) {}
|
|
||||||
return {
|
return {
|
||||||
sync_timestamp: row.sync_timestamp,
|
sync_timestamp: row.sync_timestamp,
|
||||||
open_count_delta: row.open_count_delta,
|
open_count_delta: row.open_count_delta,
|
||||||
@@ -1318,7 +1290,6 @@ function createIvantiFindingsRouter(db, requireAuth) {
|
|||||||
newly_archived_count: row.newly_archived_count,
|
newly_archived_count: row.newly_archived_count,
|
||||||
returned_count: row.returned_count,
|
returned_count: row.returned_count,
|
||||||
classification,
|
classification,
|
||||||
return_classification,
|
|
||||||
is_significant: !!row.is_significant
|
is_significant: !!row.is_significant
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|||||||
BIN
backend/scripts/__pycache__/extract_xlsx_schema.cpython-312.pyc
Normal file
BIN
backend/scripts/__pycache__/extract_xlsx_schema.cpython-312.pyc
Normal file
Binary file not shown.
@@ -1,388 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
// ==========================================================================
|
|
||||||
// CARD → Granite Lookup Script (v2)
|
|
||||||
// ==========================================================================
|
|
||||||
// Queries CARD team assets endpoint (which returns full enriched records
|
|
||||||
// including ncim_discovery with EQUIP_INST_ID) for the 109 reassigned IPs
|
|
||||||
// from the findings-count investigation Appendix C.
|
|
||||||
//
|
|
||||||
// Generates:
|
|
||||||
// docs/card-lookup-results.csv — full CARD data for review
|
|
||||||
// docs/granite-reassignment-upload.csv — Team_Device Loader format
|
|
||||||
//
|
|
||||||
// Usage:
|
|
||||||
// cd backend
|
|
||||||
// node scripts/card-granite-lookup.js
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
require('dotenv').config({ path: require('path').join(__dirname, '..', '.env') });
|
|
||||||
|
|
||||||
const cardApi = require('../helpers/cardApi');
|
|
||||||
const fs = require('fs');
|
|
||||||
const path = require('path');
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// IP → hostname mapping from Appendix C
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
const REASSIGNED = {
|
|
||||||
// With approved FP workflows (58)
|
|
||||||
'98.120.0.78': 'syn-098-120-000-078', '98.120.32.185': 'syn-098-120-032-185',
|
|
||||||
'10.240.78.177': 'mon15-agg-sw', '10.240.78.176': 'mon16-agg-sw',
|
|
||||||
'10.240.78.133': 'mon15-sw14', '10.240.78.130': 'mon15-sw11',
|
|
||||||
'10.240.78.150': 'mon19-sw3', '10.240.78.107': 'mon16-sw2',
|
|
||||||
'10.240.78.110': 'mon16-sw5', '10.240.78.106': 'mon16-sw1',
|
|
||||||
'10.240.78.149': 'mon19-sw2', '10.240.78.154': 'mon19-sw7',
|
|
||||||
'10.240.78.111': 'mon16-sw6', '10.240.78.153': 'mon19-sw6',
|
|
||||||
'10.240.78.132': 'mon15-sw13', '10.240.78.115': 'mon16-sw10',
|
|
||||||
'10.240.78.109': 'mon16-sw4', '10.240.78.112': 'mon16-sw7',
|
|
||||||
'10.240.78.119': 'mon16-sw14', '10.240.78.114': 'mon16-sw9',
|
|
||||||
'10.240.78.118': 'mon16-sw13', '10.240.78.117': 'mon16-sw12',
|
|
||||||
'10.240.78.108': 'mon16-sw3', '10.240.78.155': 'mon19-sw8',
|
|
||||||
'10.240.78.157': 'mon19-sw10', '10.240.78.151': 'mon19-sw4',
|
|
||||||
'10.240.78.116': 'mon16-sw11', '10.240.78.152': 'mon19-sw5',
|
|
||||||
'10.240.78.161': 'mon19-sw14', '10.240.78.160': 'mon19-sw13',
|
|
||||||
'10.240.78.159': 'mon19-sw12', '10.240.78.158': 'mon19-sw11',
|
|
||||||
'10.240.78.123': 'mon15-sw4', '10.240.78.137': 'mon20-sw4',
|
|
||||||
'10.240.78.148': 'mon19-sw1', '10.240.78.125': 'mon15-sw6',
|
|
||||||
'10.240.78.156': 'mon19-sw9', '10.241.0.63': '',
|
|
||||||
'10.244.11.51': 'apc01se1shcc-n01-bmc', '172.27.72.1': '',
|
|
||||||
'96.37.185.145': '', '10.240.78.170': 'mon17-sw9',
|
|
||||||
'10.240.78.172': 'mon17-sw11', '10.240.78.169': 'mon17-sw8',
|
|
||||||
'10.240.78.166': 'mon17-sw5', '10.240.78.174': 'mon17-sw13',
|
|
||||||
'10.240.78.173': 'mon17-sw12', '10.240.78.167': 'mon17-sw6',
|
|
||||||
'10.240.78.175': 'mon17-sw14', '10.240.78.168': 'mon17-sw7',
|
|
||||||
'10.240.78.171': 'mon17-sw10', '66.61.128.10': 'syn-066-061-128-010',
|
|
||||||
'66.61.128.233': 'apa01se1shcc-bvi101-secondary',
|
|
||||||
'66.61.128.49': 'syn-066-061-128-049', '66.61.128.18': 'syn-066-061-128-018',
|
|
||||||
'10.244.4.26': '', '10.244.11.5': '', '10.244.11.6': '',
|
|
||||||
// With rejected FP workflows (8)
|
|
||||||
'10.244.4.55': 'apc15se1shcc-n03', '10.244.11.53': 'apc01se1shcc-n03-bmc',
|
|
||||||
'10.244.4.30': '', '10.244.11.63': 'apc04se1shcc-n01-cimc',
|
|
||||||
'24.28.208.125': '', '24.28.210.101': 'syn-024-028-210-101',
|
|
||||||
'10.244.11.27': '', '10.240.1.203': '',
|
|
||||||
// Without FP workflows (43)
|
|
||||||
'10.240.78.20': '', '172.16.1.229': '',
|
|
||||||
'10.244.11.96': '', '10.244.11.54': 'apc02se1shcc-n01-cimc',
|
|
||||||
'10.244.4.51': 'apc14se1shcc-n02', '10.244.11.86': '',
|
|
||||||
'10.244.11.55': 'apc02se1shcc-n02-cimc', '24.28.208.105': 'syn-024-028-208-105',
|
|
||||||
'10.244.4.50': 'apc14se1shcc-n01', '10.244.4.53': 'apc15se1shcc-n01',
|
|
||||||
'10.244.11.73': 'apc07se1shcc-n02-cimc', '10.244.11.64': 'apc04se1shcc-n02-cimc',
|
|
||||||
'10.244.4.54': 'apc15se1shcc-n02', '10.244.4.28': '',
|
|
||||||
'10.244.11.94': '', '10.241.0.43': 'c220-wzp27340ss5',
|
|
||||||
'10.244.11.56': 'apc02se1shcc-n03-cimc', '10.244.11.66': 'apc05se1shcc-n01-bmc',
|
|
||||||
'10.244.4.47': 'apc13se1shcc-n01', '10.244.4.49': 'apc13se1shcc-n03',
|
|
||||||
'10.244.4.52': 'apc14se1shcc-n03', '10.244.11.72': 'apc07se1shcc-n01-cimc',
|
|
||||||
'10.244.4.25': 'apc02ctsbcom7-n03-cimc', '10.244.4.29': '',
|
|
||||||
'10.244.11.74': 'apc07se1shcc-n03-cimc', '10.244.4.48': 'apc13se1shcc-n02',
|
|
||||||
'10.244.11.65': 'apc04se1shcc-n03-cimc', '10.244.4.24': 'apc02ctsbcom7-n02-cimc',
|
|
||||||
'10.244.11.87': '', '10.244.11.68': 'apc05se1shcc-n03-bmc',
|
|
||||||
'10.244.11.67': 'apc05se1shcc-n02-bmc', '10.244.4.23': 'apc02ctsbcom7-n01-cimc',
|
|
||||||
'10.244.11.57': '', '10.244.11.95': '',
|
|
||||||
'98.120.32.145': 'syn-098-120-032-145', '98.120.0.129': 'syn-098-120-000-129',
|
|
||||||
'68.114.184.84': 'rphy-runner-vecima',
|
|
||||||
};
|
|
||||||
|
|
||||||
const TARGET_IPS = new Set(Object.keys(REASSIGNED));
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Fetch all assets for both teams, then match against our IP list
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
async function fetchTeamAssets(teamName) {
|
|
||||||
const allAssets = [];
|
|
||||||
let page = 1;
|
|
||||||
const pageSize = 200;
|
|
||||||
|
|
||||||
while (true) {
|
|
||||||
// Fetch confirmed assets (these have the richest data)
|
|
||||||
const result = await cardApi.getTeamAssets(teamName, {
|
|
||||||
disposition: 'confirmed',
|
|
||||||
page,
|
|
||||||
pageSize,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!result.ok) {
|
|
||||||
console.error(` Failed to fetch ${teamName} page ${page}: HTTP ${result.status}`);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
let data;
|
|
||||||
try { data = JSON.parse(result.body); } catch (_) { break; }
|
|
||||||
|
|
||||||
const assets = Array.isArray(data) ? data : (data.assets || data.results || []);
|
|
||||||
allAssets.push(...assets);
|
|
||||||
|
|
||||||
const total = data.total || assets.length;
|
|
||||||
console.log(` ${teamName} page ${page}: ${assets.length} assets (total: ${total})`);
|
|
||||||
|
|
||||||
if (allAssets.length >= total || assets.length === 0) break;
|
|
||||||
page++;
|
|
||||||
}
|
|
||||||
|
|
||||||
return allAssets;
|
|
||||||
}
|
|
||||||
|
|
||||||
function extractIPFromAssetId(assetId) {
|
|
||||||
// Asset IDs are like "10.240.78.110-CTEC" — strip the suffix
|
|
||||||
if (!assetId) return null;
|
|
||||||
const parts = assetId.split('-');
|
|
||||||
// Rejoin all but the last part (the suffix like CTEC, NATL, etc.)
|
|
||||||
// But only if the last part looks like a suffix (not a number)
|
|
||||||
const last = parts[parts.length - 1];
|
|
||||||
if (/^\d+$/.test(last)) return assetId; // All numeric, probably just an IP
|
|
||||||
return parts.slice(0, -1).join('-');
|
|
||||||
}
|
|
||||||
|
|
||||||
function extractGraniteData(asset) {
|
|
||||||
const id = asset._id || '';
|
|
||||||
const ip = extractIPFromAssetId(id);
|
|
||||||
const flags = (asset.card_flags && asset.card_flags[0]) || {};
|
|
||||||
const ncim = asset.ncim_discovery || [];
|
|
||||||
const qualys = asset.qualys_hosts || [];
|
|
||||||
const ivanti = asset.ivanti_assets || [];
|
|
||||||
const granite = asset.netops_granite_allips || null;
|
|
||||||
const iseGranite = asset.ise_granite_equipment || null;
|
|
||||||
|
|
||||||
// Extract EQUIP_INST_ID from ncim_discovery (primary source)
|
|
||||||
let equipInstId = null;
|
|
||||||
let graniteTeam = null;
|
|
||||||
let entityId = null;
|
|
||||||
let sysLocation = null;
|
|
||||||
let ncimHostname = null;
|
|
||||||
|
|
||||||
if (ncim.length > 0) {
|
|
||||||
equipInstId = ncim[0].EQUIP_INST_ID || null;
|
|
||||||
graniteTeam = ncim[0].GRANITE_RESP_TEAM || ncim[0].RESPONSIBLE_TEAM || null;
|
|
||||||
entityId = ncim[0].ENTITYID || null;
|
|
||||||
sysLocation = ncim[0].SYSLOCATION || null;
|
|
||||||
ncimHostname = ncim[0].HOSTNAME || null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fallback: check netops_granite_allips
|
|
||||||
if (!equipInstId && granite && Array.isArray(granite) && granite.length > 0) {
|
|
||||||
equipInstId = granite[0].EQUIP_INST_ID || null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fallback: check ise_granite_equipment
|
|
||||||
if (!equipInstId && iseGranite && Array.isArray(iseGranite) && iseGranite.length > 0) {
|
|
||||||
equipInstId = iseGranite[0].EQUIP_INST_ID || null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const hostname = ncimHostname
|
|
||||||
|| (flags.CARD_HOSTNAME && flags.CARD_HOSTNAME[0])
|
|
||||||
|| (qualys.length > 0 && qualys[0].HOSTNAME)
|
|
||||||
|| (ivanti.length > 0 && ivanti[0].hostName)
|
|
||||||
|| '';
|
|
||||||
|
|
||||||
const confirmedTeam = asset.owner && asset.owner.confirmed
|
|
||||||
? asset.owner.confirmed.name : null;
|
|
||||||
|
|
||||||
return {
|
|
||||||
ip,
|
|
||||||
assetId: id,
|
|
||||||
hostname,
|
|
||||||
equipInstId,
|
|
||||||
graniteTeam,
|
|
||||||
entityId,
|
|
||||||
sysLocation,
|
|
||||||
confirmedTeam,
|
|
||||||
deviceId: flags.CARD_DEVICE_ID || null,
|
|
||||||
asn: flags.CARD_ASN || null,
|
|
||||||
vendorModel: (flags.CARD_VENDOR_MODEL || []).map(v => v.vendor_model || v).join(', '),
|
|
||||||
status: flags.status || null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Main
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
async function main() {
|
|
||||||
console.log('=== CARD → Granite Lookup (v2 — team assets endpoint) ===');
|
|
||||||
console.log(`Target IPs: ${TARGET_IPS.size}`);
|
|
||||||
console.log(`CARD_API_URL: ${process.env.CARD_API_URL}`);
|
|
||||||
console.log('');
|
|
||||||
|
|
||||||
if (!cardApi.isConfigured) {
|
|
||||||
console.error('CARD API is not configured.');
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fetch assets from both teams
|
|
||||||
const teams = ['NTS-AEO-STEAM', 'NTS-AEO-ACCESS-ENG'];
|
|
||||||
const allAssets = [];
|
|
||||||
|
|
||||||
for (const team of teams) {
|
|
||||||
console.log(`Fetching ${team}...`);
|
|
||||||
const assets = await fetchTeamAssets(team);
|
|
||||||
allAssets.push(...assets);
|
|
||||||
console.log(` Total: ${assets.length} assets\n`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Also fetch candidate/unconfirmed in case some were reassigned
|
|
||||||
for (const team of teams) {
|
|
||||||
for (const disp of ['candidate', 'unconfirmed']) {
|
|
||||||
console.log(`Fetching ${team} (${disp})...`);
|
|
||||||
try {
|
|
||||||
const result = await cardApi.getTeamAssets(team, { disposition: disp, pageSize: 200 });
|
|
||||||
if (result.ok) {
|
|
||||||
const data = JSON.parse(result.body);
|
|
||||||
const assets = Array.isArray(data) ? data : (data.assets || data.results || []);
|
|
||||||
allAssets.push(...assets);
|
|
||||||
console.log(` ${assets.length} assets`);
|
|
||||||
}
|
|
||||||
} catch (_) { /* skip */ }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`\nTotal assets fetched: ${allAssets.length}`);
|
|
||||||
|
|
||||||
// Build IP → asset map
|
|
||||||
const ipMap = new Map();
|
|
||||||
for (const asset of allAssets) {
|
|
||||||
const id = asset._id || '';
|
|
||||||
const ip = extractIPFromAssetId(id);
|
|
||||||
if (ip && !ipMap.has(ip)) {
|
|
||||||
ipMap.set(ip, asset);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`Unique IPs in CARD: ${ipMap.size}`);
|
|
||||||
|
|
||||||
// Match against our target IPs
|
|
||||||
const matched = [];
|
|
||||||
const notFound = [];
|
|
||||||
|
|
||||||
for (const ip of TARGET_IPS) {
|
|
||||||
const asset = ipMap.get(ip);
|
|
||||||
if (asset) {
|
|
||||||
matched.push(extractGraniteData(asset));
|
|
||||||
} else {
|
|
||||||
notFound.push(ip);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// For IPs not found in team assets, fall back to individual owner lookup
|
|
||||||
if (notFound.length > 0) {
|
|
||||||
console.log(`\n${notFound.length} IPs not in team assets — trying individual owner lookups...`);
|
|
||||||
const SUFFIXES = ['CTEC', 'NATL', 'TWC', 'BHN', 'CHTR'];
|
|
||||||
const stillNotFound = [];
|
|
||||||
|
|
||||||
for (const ip of notFound) {
|
|
||||||
let found = false;
|
|
||||||
for (const suffix of SUFFIXES) {
|
|
||||||
try {
|
|
||||||
const result = await cardApi.getOwner(`${ip}-${suffix}`);
|
|
||||||
if (result.ok) {
|
|
||||||
const data = JSON.parse(result.body);
|
|
||||||
// Owner endpoint is slim — extract what we can
|
|
||||||
const ncim = data.ncim_discovery || [];
|
|
||||||
matched.push({
|
|
||||||
ip,
|
|
||||||
assetId: data._id || `${ip}-${suffix}`,
|
|
||||||
hostname: REASSIGNED[ip] || '',
|
|
||||||
equipInstId: ncim.length > 0 ? (ncim[0].EQUIP_INST_ID || null) : null,
|
|
||||||
graniteTeam: ncim.length > 0 ? (ncim[0].GRANITE_RESP_TEAM || null) : null,
|
|
||||||
entityId: ncim.length > 0 ? (ncim[0].ENTITYID || null) : null,
|
|
||||||
sysLocation: ncim.length > 0 ? (ncim[0].SYSLOCATION || null) : null,
|
|
||||||
confirmedTeam: data.owner && data.owner.confirmed ? data.owner.confirmed.name : null,
|
|
||||||
deviceId: null,
|
|
||||||
asn: null,
|
|
||||||
vendorModel: '',
|
|
||||||
status: null,
|
|
||||||
});
|
|
||||||
found = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} catch (_) { /* continue */ }
|
|
||||||
}
|
|
||||||
if (!found) stillNotFound.push(ip);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (stillNotFound.length > 0) {
|
|
||||||
console.log(`\n${stillNotFound.length} IPs not found anywhere in CARD:`);
|
|
||||||
stillNotFound.forEach(ip => console.log(` ${ip} (${REASSIGNED[ip] || 'no hostname'})`));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sort by IP
|
|
||||||
matched.sort((a, b) => {
|
|
||||||
const aParts = a.ip.split('.').map(Number);
|
|
||||||
const bParts = b.ip.split('.').map(Number);
|
|
||||||
for (let i = 0; i < 4; i++) {
|
|
||||||
if (aParts[i] !== bParts[i]) return aParts[i] - bParts[i];
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Summary
|
|
||||||
const withEquipId = matched.filter(r => r.equipInstId);
|
|
||||||
const withoutEquipId = matched.filter(r => !r.equipInstId);
|
|
||||||
|
|
||||||
console.log('\n=== Summary ===');
|
|
||||||
console.log(`Matched in CARD: ${matched.length}`);
|
|
||||||
console.log(`With EQUIP_INST_ID: ${withEquipId.length}`);
|
|
||||||
console.log(`Without EQUIP_INST_ID: ${withoutEquipId.length}`);
|
|
||||||
|
|
||||||
// Print results
|
|
||||||
console.log('\n=== Results with EQUIP_INST_ID ===');
|
|
||||||
console.log('IP Address | EQUIP_INST_ID | Hostname | Granite Team');
|
|
||||||
console.log('-'.repeat(100));
|
|
||||||
for (const r of withEquipId) {
|
|
||||||
console.log(`${r.ip.padEnd(20)} | ${String(r.equipInstId).padEnd(13)} | ${(r.hostname || '').padEnd(30)} | ${r.graniteTeam || '-'}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (withoutEquipId.length > 0) {
|
|
||||||
console.log('\n=== Results WITHOUT EQUIP_INST_ID ===');
|
|
||||||
for (const r of withoutEquipId) {
|
|
||||||
console.log(` ${r.ip.padEnd(20)} ${(r.hostname || REASSIGNED[r.ip] || '').padEnd(30)} confirmed: ${r.confirmedTeam || '-'}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Write full CSV
|
|
||||||
const csvPath = path.join(__dirname, '..', '..', 'docs', 'card-lookup-results.csv');
|
|
||||||
const csvHeader = 'IP Address,CARD Asset ID,Hostname,EQUIP_INST_ID,Granite Team,Entity ID,SysLocation,Confirmed Team,Device ID,ASN,Vendor Model,Status';
|
|
||||||
const csvRows = matched.map(r =>
|
|
||||||
[r.ip, r.assetId, r.hostname, r.equipInstId, r.graniteTeam, r.entityId, r.sysLocation, r.confirmedTeam, r.deviceId, r.asn, r.vendorModel, r.status]
|
|
||||||
.map(v => v === null || v === undefined ? '' : `"${String(v).replace(/"/g, '""')}"`)
|
|
||||||
.join(',')
|
|
||||||
);
|
|
||||||
fs.writeFileSync(csvPath, csvHeader + '\n' + csvRows.join('\n') + '\n', 'utf8');
|
|
||||||
console.log(`\nFull CSV: ${csvPath}`);
|
|
||||||
|
|
||||||
// Write Granite Team_Device Loader CSV
|
|
||||||
const graniteHeaders = [
|
|
||||||
'DELETE', 'SET_CONFIRMED', 'EQUIPMENT CLASS', 'EQUIP_INST_ID', 'SITE_NAME',
|
|
||||||
'EQUIP_NAME', 'EQUIP_TEMPLATE', 'EQUIP_STATUS',
|
|
||||||
'UDA#RESPONSIBLE ORGANIZATION#RESPONSIBLE TEAM',
|
|
||||||
'UDA#IP_ADDRESSING#IPV4_ADDRESS',
|
|
||||||
'UDA#IP_ADDRESSING#MAC ADDRESS', 'UDA#IP_ADDRESSING#MGMT_IP_ASN', 'SERIALNUMBER',
|
|
||||||
];
|
|
||||||
|
|
||||||
const graniteRows = withEquipId.map(r => [
|
|
||||||
'', // DELETE
|
|
||||||
'', // SET_CONFIRMED
|
|
||||||
'S', // EQUIPMENT CLASS (Shelf)
|
|
||||||
r.equipInstId, // EQUIP_INST_ID
|
|
||||||
'', // SITE_NAME
|
|
||||||
r.hostname || REASSIGNED[r.ip] || '', // EQUIP_NAME
|
|
||||||
'', // EQUIP_TEMPLATE
|
|
||||||
'', // EQUIP_STATUS
|
|
||||||
'NTS-AEO-STEAM', // RESPONSIBLE TEAM
|
|
||||||
r.ip, // IPV4_ADDRESS
|
|
||||||
'', // MAC ADDRESS
|
|
||||||
r.asn || '', // MGMT_IP_ASN
|
|
||||||
r.deviceId || '', // SERIALNUMBER
|
|
||||||
]);
|
|
||||||
|
|
||||||
const granitePath = path.join(__dirname, '..', '..', 'docs', 'granite-reassignment-upload.csv');
|
|
||||||
const graniteContent = [
|
|
||||||
graniteHeaders.join(','),
|
|
||||||
...graniteRows.map(r => r.map(v => `"${String(v).replace(/"/g, '""')}"`).join(','))
|
|
||||||
].join('\n');
|
|
||||||
fs.writeFileSync(granitePath, graniteContent + '\n', 'utf8');
|
|
||||||
console.log(`Granite upload CSV (${withEquipId.length} rows): ${granitePath}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
main().catch(err => {
|
|
||||||
console.error('Unhandled error:', err);
|
|
||||||
process.exit(1);
|
|
||||||
});
|
|
||||||
308
backend/scripts/jira-load-test.js
Normal file
308
backend/scripts/jira-load-test.js
Normal file
@@ -0,0 +1,308 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
// ==========================================================================
|
||||||
|
// Jira 24-Hour Load Simulation
|
||||||
|
// ==========================================================================
|
||||||
|
// Simulates a full day of STEAM Dashboard Jira API usage at the HIGH end
|
||||||
|
// of estimated daily volume. Runs every call type at production frequency
|
||||||
|
// against UAT so the ATLSUP reviewer can see real traffic patterns.
|
||||||
|
//
|
||||||
|
// This is NOT a stress test — it respects all Charter rate limits and
|
||||||
|
// inter-request delays. It exercises the exact same code paths production
|
||||||
|
// will use, at the volume documented in docs/jira-api-use-cases.md.
|
||||||
|
//
|
||||||
|
// Usage:
|
||||||
|
// cd backend
|
||||||
|
// node scripts/jira-load-test.js
|
||||||
|
//
|
||||||
|
// Estimated runtime: ~3–5 minutes (limited by 1s/2s inter-request delays)
|
||||||
|
// Estimated API calls: ~120 (high end of daily estimate)
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
require('dotenv').config({ path: require('path').join(__dirname, '..', '.env') });
|
||||||
|
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const jiraApi = require('../helpers/jiraApi');
|
||||||
|
|
||||||
|
const LOG_FILE = path.join(__dirname, 'jira-load-test-2.log');
|
||||||
|
const results = [];
|
||||||
|
let testIssueKeys = [];
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Logging
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function log(level, message, data) {
|
||||||
|
const timestamp = new Date().toISOString();
|
||||||
|
const entry = { timestamp, level, message };
|
||||||
|
if (data !== undefined) entry.data = data;
|
||||||
|
results.push(entry);
|
||||||
|
const line = `[${timestamp}] ${level.toUpperCase().padEnd(5)} ${message}`;
|
||||||
|
console.log(line);
|
||||||
|
if (data) {
|
||||||
|
const dataStr = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
|
||||||
|
const truncated = dataStr.length > 1000 ? dataStr.substring(0, 1000) + ' ...[truncated]' : dataStr;
|
||||||
|
console.log(' ' + truncated.split('\n').join('\n '));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function logInfo(msg, data) { log('info', msg, data); }
|
||||||
|
function logPass(msg, data) { log('pass', msg, data); }
|
||||||
|
function logFail(msg, data) { log('fail', msg, data); }
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Call counter
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
const callCounts = {
|
||||||
|
'GET /myself': 0,
|
||||||
|
'POST /issue': 0,
|
||||||
|
'GET /search (single)': 0,
|
||||||
|
'GET /search (bulk sync)': 0,
|
||||||
|
'GET /search (JQL)': 0,
|
||||||
|
'PUT /issue': 0,
|
||||||
|
'POST /comment': 0,
|
||||||
|
'GET /transitions': 0,
|
||||||
|
'POST /transitions': 0,
|
||||||
|
};
|
||||||
|
let totalCalls = 0;
|
||||||
|
|
||||||
|
function count(op) { callCounts[op] = (callCounts[op] || 0) + 1; totalCalls++; }
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Helpers
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
async function safeCall(opName, fn) {
|
||||||
|
try {
|
||||||
|
const start = Date.now();
|
||||||
|
const result = await fn();
|
||||||
|
const ms = Date.now() - start;
|
||||||
|
if (result && result.ok === false) {
|
||||||
|
logFail(`${opName} — HTTP ${result.status} (${ms}ms)`, (result.body || '').substring(0, 300));
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
logPass(`${opName} — OK (${ms}ms)`);
|
||||||
|
return result;
|
||||||
|
} catch (err) {
|
||||||
|
logFail(`${opName} — ERROR: ${err.message}`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Load simulation
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
async function main() {
|
||||||
|
const projectKey = jiraApi.JIRA_PROJECT_KEY;
|
||||||
|
|
||||||
|
logInfo('=== STEAM Dashboard — 24-Hour Load Simulation ===');
|
||||||
|
logInfo('Timestamp: ' + new Date().toISOString());
|
||||||
|
logInfo('JIRA_BASE_URL: ' + (process.env.JIRA_BASE_URL || '(not set)'));
|
||||||
|
logInfo('JIRA_PROJECT_KEY: ' + projectKey);
|
||||||
|
logInfo('');
|
||||||
|
logInfo('This simulates the HIGH end of estimated daily API usage:');
|
||||||
|
logInfo(' Connection tests: 5');
|
||||||
|
logInfo(' Create issue: 20');
|
||||||
|
logInfo(' Get single issue: 30 (via JQL search)');
|
||||||
|
logInfo(' Update issue: 10');
|
||||||
|
logInfo(' Add comment: 15');
|
||||||
|
logInfo(' Get transitions: 10');
|
||||||
|
logInfo(' Transition issue: 10');
|
||||||
|
logInfo(' JQL search (sync): 5');
|
||||||
|
logInfo(' Bulk key search: 5');
|
||||||
|
logInfo(' Issue lookup: 15');
|
||||||
|
logInfo(' ─────────────────────');
|
||||||
|
logInfo(' Total estimated: ~125 calls');
|
||||||
|
logInfo('');
|
||||||
|
|
||||||
|
if (!jiraApi.isConfigured) {
|
||||||
|
logFail('Jira API not configured');
|
||||||
|
writeLog();
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Phase 1: Connection tests (5x) ──────────────────────────
|
||||||
|
logInfo('── Phase 1: Connection Tests (5x) ──');
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
count('GET /myself');
|
||||||
|
await safeCall(`Connection test ${i + 1}/5`, () => jiraApi.testConnection());
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Phase 2: Create issues (20x) ────────────────────────────
|
||||||
|
logInfo('── Phase 2: Create Issues (20x) ──');
|
||||||
|
for (let i = 0; i < 20; i++) {
|
||||||
|
count('POST /issue');
|
||||||
|
const result = await safeCall(`Create issue ${i + 1}/20`, () =>
|
||||||
|
jiraApi.createIssue({
|
||||||
|
project: { key: projectKey },
|
||||||
|
summary: `[LOAD TEST] STEAM Dashboard - batch ${i + 1} - ${new Date().toISOString()}`,
|
||||||
|
issuetype: { name: jiraApi.JIRA_ISSUE_TYPE || 'Story' },
|
||||||
|
description: `Load test issue ${i + 1} of 20. Created by the STEAM Dashboard 24-hour load simulation script. Safe to delete after ATLSUP review.`,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
if (result && result.data && result.data.key) {
|
||||||
|
testIssueKeys.push(result.data.key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
logInfo(`Created ${testIssueKeys.length} test issues: ${testIssueKeys.join(', ')}`);
|
||||||
|
|
||||||
|
if (testIssueKeys.length === 0) {
|
||||||
|
logFail('No issues created — cannot continue load test');
|
||||||
|
printSummary();
|
||||||
|
writeLog();
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Phase 3: Single-issue lookups via JQL (30x) ─────────────
|
||||||
|
logInfo('── Phase 3: Single-Issue Lookups via JQL (30x) ──');
|
||||||
|
for (let i = 0; i < 30; i++) {
|
||||||
|
const key = testIssueKeys[i % testIssueKeys.length];
|
||||||
|
count('GET /search (single)');
|
||||||
|
await safeCall(`Get issue ${i + 1}/30 (${key})`, () => jiraApi.getIssue(key));
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Phase 4: Update issues (10x) ────────────────────────────
|
||||||
|
logInfo('── Phase 4: Update Issues (10x) ──');
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
const key = testIssueKeys[i % testIssueKeys.length];
|
||||||
|
count('PUT /issue');
|
||||||
|
await safeCall(`Update issue ${i + 1}/10 (${key})`, () =>
|
||||||
|
jiraApi.updateIssue(key, {
|
||||||
|
summary: `[LOAD TEST] Updated ${i + 1} - ${new Date().toISOString()}`
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Phase 5: Add comments (15x) ─────────────────────────────
|
||||||
|
logInfo('── Phase 5: Add Comments (15x) ──');
|
||||||
|
for (let i = 0; i < 15; i++) {
|
||||||
|
const key = testIssueKeys[i % testIssueKeys.length];
|
||||||
|
count('POST /comment');
|
||||||
|
await safeCall(`Add comment ${i + 1}/15 (${key})`, () =>
|
||||||
|
jiraApi.addComment(key, `Load test comment ${i + 1} at ${new Date().toISOString()}`)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Phase 6: Get transitions (10x) ──────────────────────────
|
||||||
|
logInfo('── Phase 6: Get Transitions (10x) ──');
|
||||||
|
let availableTransitions = [];
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
const key = testIssueKeys[i % testIssueKeys.length];
|
||||||
|
count('GET /transitions');
|
||||||
|
const result = await safeCall(`Get transitions ${i + 1}/10 (${key})`, () =>
|
||||||
|
jiraApi.getTransitions(key)
|
||||||
|
);
|
||||||
|
if (result && result.data && result.data.transitions && result.data.transitions.length > 0 && availableTransitions.length === 0) {
|
||||||
|
availableTransitions = result.data.transitions;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Phase 7: Transition issues (10x) ────────────────────────
|
||||||
|
logInfo('── Phase 7: Transition Issues (10x) ──');
|
||||||
|
if (availableTransitions.length > 0) {
|
||||||
|
const transitionId = availableTransitions[0].id;
|
||||||
|
logInfo(`Using transition: ${availableTransitions[0].name} (id: ${transitionId})`);
|
||||||
|
for (let i = 0; i < Math.min(10, testIssueKeys.length); i++) {
|
||||||
|
const key = testIssueKeys[i];
|
||||||
|
count('POST /transitions');
|
||||||
|
await safeCall(`Transition ${i + 1}/10 (${key})`, () =>
|
||||||
|
jiraApi.transitionIssue(key, transitionId)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
logInfo('No transitions available — skipping (workflow may not allow transitions from current state)');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Phase 8: JQL search / bulk sync (5x) ────────────────────
|
||||||
|
logInfo('── Phase 8: JQL Search / Bulk Sync (5x) ──');
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
count('GET /search (JQL)');
|
||||||
|
await safeCall(`JQL search ${i + 1}/5`, () =>
|
||||||
|
jiraApi.searchIssues(
|
||||||
|
`project = ${projectKey} AND updated >= -24h ORDER BY updated DESC`,
|
||||||
|
{ maxResults: 1000 }
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Phase 9: Bulk key search (5x) ───────────────────────────
|
||||||
|
logInfo('── Phase 9: Bulk Key Search (5x) ──');
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
count('GET /search (bulk sync)');
|
||||||
|
await safeCall(`Bulk key search ${i + 1}/5`, () =>
|
||||||
|
jiraApi.searchIssuesByKeys(testIssueKeys)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Phase 10: Issue lookups (15x) ───────────────────────────
|
||||||
|
logInfo('── Phase 10: Issue Lookups (15x) ──');
|
||||||
|
for (let i = 0; i < 15; i++) {
|
||||||
|
const key = testIssueKeys[i % testIssueKeys.length];
|
||||||
|
count('GET /search (single)');
|
||||||
|
await safeCall(`Issue lookup ${i + 1}/15 (${key})`, () => jiraApi.getIssue(key));
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Summary ─────────────────────────────────────────────────
|
||||||
|
printSummary();
|
||||||
|
writeLog();
|
||||||
|
|
||||||
|
console.log('\nLoad test complete. Log saved to backend/scripts/jira-load-test.log');
|
||||||
|
console.log('Test issues created: ' + testIssueKeys.join(', '));
|
||||||
|
console.log('Delete them manually after ATLSUP review if desired.');
|
||||||
|
}
|
||||||
|
|
||||||
|
function printSummary() {
|
||||||
|
logInfo('');
|
||||||
|
logInfo('═══════════════════════════════════════════════════');
|
||||||
|
logInfo(' 24-HOUR LOAD SIMULATION SUMMARY');
|
||||||
|
logInfo('═══════════════════════════════════════════════════');
|
||||||
|
logInfo('');
|
||||||
|
logInfo('API Call Breakdown:');
|
||||||
|
for (const [op, n] of Object.entries(callCounts)) {
|
||||||
|
if (n > 0) logInfo(` ${op.padEnd(30)} ${n}`);
|
||||||
|
}
|
||||||
|
logInfo(` ${'─'.repeat(30)} ───`);
|
||||||
|
logInfo(` ${'TOTAL'.padEnd(30)} ${totalCalls}`);
|
||||||
|
logInfo('');
|
||||||
|
|
||||||
|
const rateLimits = jiraApi.getRateLimitStatus();
|
||||||
|
logInfo('Rate Limit Usage:');
|
||||||
|
logInfo(` Daily: ${rateLimits.daily.used} / ${rateLimits.daily.limit} (${((rateLimits.daily.used / rateLimits.daily.limit) * 100).toFixed(1)}%)`);
|
||||||
|
logInfo(` Burst: ${rateLimits.burst.used} / ${rateLimits.burst.limit}`);
|
||||||
|
logInfo('');
|
||||||
|
|
||||||
|
const passCount = results.filter(r => r.level === 'pass').length;
|
||||||
|
const failCount = results.filter(r => r.level === 'fail').length;
|
||||||
|
logInfo(`Results: ${passCount} passed, ${failCount} failed`);
|
||||||
|
logInfo(`Test issues created: ${testIssueKeys.length}`);
|
||||||
|
logInfo('');
|
||||||
|
logInfo('NOTE FOR REVIEWER:');
|
||||||
|
logInfo('This load test compresses an entire 24-hour production workload into');
|
||||||
|
logInfo('~3-5 minutes. The 429 responses are expected when running at this');
|
||||||
|
logInfo('compressed rate — the server-side burst limiter triggers because all');
|
||||||
|
logInfo('calls arrive within minutes instead of being spread across a full day.');
|
||||||
|
logInfo('');
|
||||||
|
logInfo('In production, these ~120 calls are distributed across 8-10 working');
|
||||||
|
logInfo('hours by human-triggered actions (click Sync, create ticket, etc.).');
|
||||||
|
logInfo('At that cadence, the 1s/2s inter-request delays keep us well within');
|
||||||
|
logInfo('both the 60/min burst cap and the 1,440/day daily limit.');
|
||||||
|
logInfo('');
|
||||||
|
logInfo('The 429 handling is intentional — the dashboard surfaces "Rate limit');
|
||||||
|
logInfo('exceeded" to the user and does NOT auto-retry, per Charter policy.');
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeLog() {
|
||||||
|
const lines = results.map(r => {
|
||||||
|
let line = `[${r.timestamp}] ${r.level.toUpperCase().padEnd(5)} ${r.message}`;
|
||||||
|
if (r.data) {
|
||||||
|
const dataStr = typeof r.data === 'string' ? r.data : JSON.stringify(r.data, null, 2);
|
||||||
|
const truncated = dataStr.length > 1000 ? dataStr.substring(0, 1000) + ' ...[truncated]' : dataStr;
|
||||||
|
line += '\n ' + truncated.split('\n').join('\n ');
|
||||||
|
}
|
||||||
|
return line;
|
||||||
|
});
|
||||||
|
fs.writeFileSync(LOG_FILE, lines.join('\n') + '\n', 'utf8');
|
||||||
|
}
|
||||||
|
|
||||||
|
main().catch(err => {
|
||||||
|
console.error('Unhandled error:', err);
|
||||||
|
process.exit(1);
|
||||||
|
});
|
||||||
408
backend/scripts/jira-uat-test.js
Normal file
408
backend/scripts/jira-uat-test.js
Normal file
@@ -0,0 +1,408 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
// ==========================================================================
|
||||||
|
// Jira UAT Test Script
|
||||||
|
// ==========================================================================
|
||||||
|
// Exercises every Jira REST API use case the STEAM Dashboard will run in
|
||||||
|
// production. Run this against the UAT instance before submitting the
|
||||||
|
// ATLSUP Rest API Approval ticket.
|
||||||
|
//
|
||||||
|
// Usage:
|
||||||
|
// cd backend
|
||||||
|
// node scripts/jira-uat-test.js
|
||||||
|
//
|
||||||
|
// Prerequisites:
|
||||||
|
// - backend/.env has JIRA_BASE_URL pointing to UAT
|
||||||
|
// - JIRA_API_USER / JIRA_API_TOKEN set to service account credentials
|
||||||
|
// - JIRA_PROJECT_KEY set to a UAT project your service account can access
|
||||||
|
// - Service account has been granted access to the target space by space owners
|
||||||
|
//
|
||||||
|
// The script logs every API call, response status, and timing to both
|
||||||
|
// console and a log file at backend/scripts/jira-uat-test.log for the
|
||||||
|
// ATLSUP reviewers.
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
require('dotenv').config({ path: require('path').join(__dirname, '..', '.env') });
|
||||||
|
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const jiraApi = require('../helpers/jiraApi');
|
||||||
|
|
||||||
|
const LOG_FILE = path.join(__dirname, 'jira-uat-test.log');
|
||||||
|
const results = [];
|
||||||
|
let createdIssueKey = null;
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Logging
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function log(level, message, data) {
|
||||||
|
const timestamp = new Date().toISOString();
|
||||||
|
const entry = { timestamp, level, message };
|
||||||
|
if (data !== undefined) entry.data = data;
|
||||||
|
results.push(entry);
|
||||||
|
|
||||||
|
const line = `[${timestamp}] ${level.toUpperCase().padEnd(5)} ${message}`;
|
||||||
|
console.log(line);
|
||||||
|
if (data) {
|
||||||
|
const dataStr = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
|
||||||
|
// Truncate long data to keep logs readable (HTML error pages can be 50KB+)
|
||||||
|
const truncated = dataStr.length > 2000 ? dataStr.substring(0, 2000) + '\n ... [truncated — ' + dataStr.length + ' chars total]' : dataStr;
|
||||||
|
console.log(' ' + truncated.split('\n').join('\n '));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function logPass(testName, data) { log('pass', `PASS: ${testName}`, data); }
|
||||||
|
function logFail(testName, data) { log('fail', `FAIL: ${testName}`, data); }
|
||||||
|
function logInfo(message, data) { log('info', message, data); }
|
||||||
|
function logWarn(message, data) { log('warn', message, data); }
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Test runner
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
async function runTest(name, fn) {
|
||||||
|
logInfo(`--- Running: ${name} ---`);
|
||||||
|
const start = Date.now();
|
||||||
|
try {
|
||||||
|
await fn();
|
||||||
|
logPass(name, { durationMs: Date.now() - start });
|
||||||
|
return true;
|
||||||
|
} catch (err) {
|
||||||
|
logFail(name, { error: err.message, durationMs: Date.now() - start });
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function assert(condition, message) {
|
||||||
|
if (!condition) throw new Error('Assertion failed: ' + message);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Use Case 1: Connection Test (GET /rest/api/2/myself)
|
||||||
|
// Production use: Admin clicks "Test Connection" button on Jira settings panel
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
async function testConnection() {
|
||||||
|
const result = await jiraApi.testConnection();
|
||||||
|
assert(result.ok, 'Connection test should succeed. Got: ' + JSON.stringify(result));
|
||||||
|
assert(result.user && result.user.name, 'Should return authenticated user name');
|
||||||
|
logInfo('Authenticated as:', result.user);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Use Case 2: Create Issue (POST /rest/api/2/issue)
|
||||||
|
// Production use: User clicks "Create in Jira" from CVE detail panel
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
async function testCreateIssue() {
|
||||||
|
const projectKey = jiraApi.JIRA_PROJECT_KEY;
|
||||||
|
assert(projectKey, 'JIRA_PROJECT_KEY must be set in .env');
|
||||||
|
|
||||||
|
// Discover available issue types for this project
|
||||||
|
const projRes = await jiraApi.jiraGet('/rest/api/2/project/' + encodeURIComponent(projectKey));
|
||||||
|
assert(projRes.status === 200, 'Should be able to fetch project metadata. Got HTTP ' + projRes.status + ': ' + (projRes.body || '').substring(0, 300));
|
||||||
|
|
||||||
|
const projData = JSON.parse(projRes.body);
|
||||||
|
const availableTypes = (projData.issueTypes || []).filter(t => !t.subtask);
|
||||||
|
logInfo('Available issue types:', availableTypes.map(t => t.name));
|
||||||
|
|
||||||
|
// Determine which issue type to use: configured type first, then fallback order
|
||||||
|
const configuredType = jiraApi.JIRA_ISSUE_TYPE || 'Task';
|
||||||
|
const fallbackOrder = [configuredType, 'Story', 'Task', 'Bug'];
|
||||||
|
let issueTypeName = null;
|
||||||
|
|
||||||
|
for (const candidate of fallbackOrder) {
|
||||||
|
if (availableTypes.some(t => t.name === candidate)) {
|
||||||
|
issueTypeName = candidate;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// If none of the preferred types exist, use the first available non-subtask type
|
||||||
|
if (!issueTypeName && availableTypes.length > 0) {
|
||||||
|
issueTypeName = availableTypes[0].name;
|
||||||
|
}
|
||||||
|
|
||||||
|
assert(issueTypeName, 'No usable issue type found in project ' + projectKey);
|
||||||
|
|
||||||
|
if (issueTypeName !== configuredType) {
|
||||||
|
logWarn('Configured JIRA_ISSUE_TYPE "' + configuredType + '" not available — falling back to "' + issueTypeName + '"');
|
||||||
|
}
|
||||||
|
|
||||||
|
const fields = {
|
||||||
|
project: { key: projectKey },
|
||||||
|
summary: '[UAT TEST] STEAM Dashboard - CVE-2025-0001 - TestVendor - ' + new Date().toISOString(),
|
||||||
|
issuetype: { name: issueTypeName },
|
||||||
|
description: 'UAT test issue created by STEAM Security Dashboard Jira integration test script. This issue can be safely deleted after review.'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Epic type requires an Epic Name field — add it if creating an Epic
|
||||||
|
if (issueTypeName === 'Epic') {
|
||||||
|
fields.customfield_10004 = fields.summary; // Epic Name (standard Jira field ID)
|
||||||
|
}
|
||||||
|
|
||||||
|
logInfo('Creating issue with fields:', { project: fields.project, summary: fields.summary, issuetype: fields.issuetype });
|
||||||
|
|
||||||
|
let result = await jiraApi.createIssue(fields);
|
||||||
|
|
||||||
|
// If the first attempt fails with 400, try without description (some screens don't have it)
|
||||||
|
if (!result.ok && result.status === 400) {
|
||||||
|
const errBody = (result.body || '').substring(0, 500);
|
||||||
|
logWarn('Create failed with 400, retrying without description. Error: ' + errBody);
|
||||||
|
|
||||||
|
const retryFields = { ...fields };
|
||||||
|
delete retryFields.description;
|
||||||
|
result = await jiraApi.createIssue(retryFields);
|
||||||
|
}
|
||||||
|
|
||||||
|
// If still failing with 400 and we used Epic, try without the customfield_10004
|
||||||
|
// (Epic Name field ID varies across Jira instances)
|
||||||
|
if (!result.ok && result.status === 400 && issueTypeName === 'Epic') {
|
||||||
|
const errBody = (result.body || '').substring(0, 500);
|
||||||
|
logWarn('Epic create failed, retrying with alternate Epic Name field. Error: ' + errBody);
|
||||||
|
|
||||||
|
const retryFields = { ...fields };
|
||||||
|
delete retryFields.customfield_10004;
|
||||||
|
// Try common alternate Epic Name field IDs
|
||||||
|
retryFields.customfield_10011 = fields.summary;
|
||||||
|
result = await jiraApi.createIssue(retryFields);
|
||||||
|
}
|
||||||
|
|
||||||
|
assert(result.ok, 'Create issue should succeed. Got HTTP ' + result.status + ': ' + (result.body || '').substring(0, 500));
|
||||||
|
assert(result.data && result.data.key, 'Should return issue key');
|
||||||
|
|
||||||
|
createdIssueKey = result.data.key;
|
||||||
|
logInfo('Created issue:', { key: createdIssueKey, id: result.data.id, self: result.data.self, issueType: issueTypeName });
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Use Case 3: Get Single Issue (GET /rest/api/2/issue/{key}?fields=...)
|
||||||
|
// Production use: User clicks "Sync" on a single Jira ticket row
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
async function testGetIssue() {
|
||||||
|
assert(createdIssueKey, 'Need a created issue key from previous test');
|
||||||
|
|
||||||
|
const result = await jiraApi.getIssue(createdIssueKey);
|
||||||
|
assert(result.ok, 'Get issue should succeed. Got HTTP ' + (result.status || '') + ': ' + ((result.body || '').substring(0, 500)));
|
||||||
|
|
||||||
|
const issue = result.data;
|
||||||
|
assert(issue.key === createdIssueKey, 'Returned key should match');
|
||||||
|
assert(issue.fields && issue.fields.summary, 'Should have summary field');
|
||||||
|
assert(issue.fields.status, 'Should have status field');
|
||||||
|
|
||||||
|
logInfo('Fetched issue:', {
|
||||||
|
key: issue.key,
|
||||||
|
summary: issue.fields.summary,
|
||||||
|
status: issue.fields.status.name,
|
||||||
|
issuetype: issue.fields.issuetype ? issue.fields.issuetype.name : null
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Use Case 4: Update Issue (PUT /rest/api/2/issue/{key})
|
||||||
|
// Production use: Local ticket edits synced back to Jira (future feature)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
async function testUpdateIssue() {
|
||||||
|
assert(createdIssueKey, 'Need a created issue key from previous test');
|
||||||
|
|
||||||
|
const result = await jiraApi.updateIssue(createdIssueKey, {
|
||||||
|
summary: `[UAT TEST] STEAM Dashboard - UPDATED - ${new Date().toISOString()}`
|
||||||
|
});
|
||||||
|
assert(result.ok, 'Update issue should succeed (204). Got HTTP ' + (result.status || '') + ': ' + ((result.body || '').substring(0, 500)));
|
||||||
|
logInfo('Updated issue summary successfully');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Use Case 5: Add Comment (POST /rest/api/2/issue/{key}/comment)
|
||||||
|
// Production use: Dashboard adds audit trail comments to linked Jira tickets
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
async function testAddComment() {
|
||||||
|
assert(createdIssueKey, 'Need a created issue key from previous test');
|
||||||
|
|
||||||
|
const commentBody = `STEAM Dashboard UAT test comment.\nTimestamp: ${new Date().toISOString()}\nThis comment was created by the automated test script.`;
|
||||||
|
|
||||||
|
const result = await jiraApi.addComment(createdIssueKey, commentBody);
|
||||||
|
assert(result.ok, 'Add comment should succeed. Got HTTP ' + (result.status || '') + ': ' + ((result.body || '').substring(0, 500)));
|
||||||
|
assert(result.data && result.data.id, 'Should return comment ID');
|
||||||
|
|
||||||
|
logInfo('Added comment:', { commentId: result.data.id });
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Use Case 6: Get Transitions (GET /rest/api/2/issue/{key}/transitions)
|
||||||
|
// Production use: Dashboard checks available workflow transitions before
|
||||||
|
// attempting to move a ticket to a new status
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
async function testGetTransitions() {
|
||||||
|
assert(createdIssueKey, 'Need a created issue key from previous test');
|
||||||
|
|
||||||
|
const result = await jiraApi.getTransitions(createdIssueKey);
|
||||||
|
assert(result.ok, 'Get transitions should succeed. Got HTTP ' + (result.status || '') + ': ' + ((result.body || '').substring(0, 500)));
|
||||||
|
|
||||||
|
const transitions = result.data.transitions || [];
|
||||||
|
logInfo('Available transitions:', transitions.map(t => ({ id: t.id, name: t.name, to: t.to ? t.to.name : null })));
|
||||||
|
|
||||||
|
// Store for the transition test
|
||||||
|
return transitions;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Use Case 7: Transition Issue (POST /rest/api/2/issue/{key}/transitions)
|
||||||
|
// Production use: Dashboard moves ticket status (e.g., Open → In Progress)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
async function testTransitionIssue(transitions) {
|
||||||
|
assert(createdIssueKey, 'Need a created issue key from previous test');
|
||||||
|
|
||||||
|
if (!transitions || transitions.length === 0) {
|
||||||
|
logWarn('No transitions available — skipping transition test. This may be expected depending on the project workflow.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pick the first available transition
|
||||||
|
const transition = transitions[0];
|
||||||
|
logInfo(`Transitioning to: ${transition.name} (id: ${transition.id})`);
|
||||||
|
|
||||||
|
const result = await jiraApi.transitionIssue(createdIssueKey, transition.id);
|
||||||
|
assert(result.ok, 'Transition should succeed (204). Got HTTP ' + (result.status || '') + ': ' + ((result.body || '').substring(0, 500)));
|
||||||
|
logInfo('Transition successful');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Use Case 8: JQL Search (POST /rest/api/2/search)
|
||||||
|
// Production use: Bulk sync — fetches all tracked tickets in one request
|
||||||
|
// instead of one GET per ticket (Charter-compliant)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
async function testJqlSearch() {
|
||||||
|
const projectKey = jiraApi.JIRA_PROJECT_KEY;
|
||||||
|
assert(projectKey, 'JIRA_PROJECT_KEY must be set');
|
||||||
|
|
||||||
|
// Use a broad time window to ensure results even on a quiet project
|
||||||
|
const jql = `project = ${projectKey} ORDER BY updated DESC`;
|
||||||
|
logInfo('Searching with JQL:', jql);
|
||||||
|
|
||||||
|
const result = await jiraApi.searchIssues(jql, { maxResults: 10 });
|
||||||
|
assert(result.ok, 'Search should succeed. Got HTTP ' + (result.status || '') + ': ' + ((result.body || '').substring(0, 500)));
|
||||||
|
|
||||||
|
const data = result.data;
|
||||||
|
logInfo('Search results:', {
|
||||||
|
total: data.total,
|
||||||
|
returned: (data.issues || []).length,
|
||||||
|
issues: (data.issues || []).slice(0, 5).map(i => ({
|
||||||
|
key: i.key,
|
||||||
|
summary: i.fields.summary,
|
||||||
|
status: i.fields.status ? i.fields.status.name : null
|
||||||
|
}))
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Use Case 9: Bulk Key Search (searchIssuesByKeys)
|
||||||
|
// Production use: sync-all endpoint — fetches multiple tickets by key
|
||||||
|
// in a single JQL query
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
async function testBulkKeySearch() {
|
||||||
|
assert(createdIssueKey, 'Need a created issue key from previous test');
|
||||||
|
|
||||||
|
// Search for the issue we created plus a fake key to test partial results
|
||||||
|
const keys = [createdIssueKey, 'FAKE-99999'];
|
||||||
|
logInfo('Bulk searching keys:', keys);
|
||||||
|
|
||||||
|
const result = await jiraApi.searchIssuesByKeys(keys);
|
||||||
|
assert(result.ok, 'Bulk key search should succeed. Got HTTP ' + (result.status || '') + ': ' + ((result.body || '').substring(0, 500)));
|
||||||
|
|
||||||
|
const found = (result.data.issues || []).map(i => i.key);
|
||||||
|
logInfo('Found issues:', found);
|
||||||
|
assert(found.includes(createdIssueKey), 'Should find the created issue');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Use Case 10: Rate Limit Status Check
|
||||||
|
// Production use: Admin views rate limit usage on the Jira settings panel
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
async function testRateLimitStatus() {
|
||||||
|
const status = jiraApi.getRateLimitStatus();
|
||||||
|
assert(status.daily && typeof status.daily.used === 'number', 'Should have daily usage');
|
||||||
|
assert(status.burst && typeof status.burst.used === 'number', 'Should have burst usage');
|
||||||
|
logInfo('Rate limit status after all tests:', status);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Main
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
async function main() {
|
||||||
|
logInfo('=== STEAM Dashboard — Jira UAT Test Run ===');
|
||||||
|
logInfo('Timestamp: ' + new Date().toISOString());
|
||||||
|
logInfo('JIRA_BASE_URL: ' + (process.env.JIRA_BASE_URL || '(not set)'));
|
||||||
|
logInfo('JIRA_AUTH_METHOD: ' + (process.env.JIRA_AUTH_METHOD || 'basic'));
|
||||||
|
logInfo('JIRA_API_USER: ' + (process.env.JIRA_API_USER || '(not set)'));
|
||||||
|
logInfo('JIRA_PROJECT_KEY: ' + (jiraApi.JIRA_PROJECT_KEY || '(not set)'));
|
||||||
|
logInfo('JIRA_ISSUE_TYPE: ' + (jiraApi.JIRA_ISSUE_TYPE || 'Task'));
|
||||||
|
logInfo('JIRA_SKIP_TLS: ' + (process.env.JIRA_SKIP_TLS || 'false'));
|
||||||
|
logInfo('isConfigured: ' + jiraApi.isConfigured);
|
||||||
|
logInfo('');
|
||||||
|
|
||||||
|
if (!jiraApi.isConfigured) {
|
||||||
|
logFail('Pre-flight check', 'Jira API is not configured. Set JIRA_BASE_URL, JIRA_API_USER, and JIRA_API_TOKEN in backend/.env');
|
||||||
|
writeLog();
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
let passed = 0;
|
||||||
|
let failed = 0;
|
||||||
|
let transitions = [];
|
||||||
|
|
||||||
|
// Run tests in order — later tests depend on the created issue
|
||||||
|
if (await runTest('1. Connection Test (GET /myself)', testConnection)) passed++; else failed++;
|
||||||
|
if (await runTest('2. Create Issue (POST /issue)', testCreateIssue)) passed++; else failed++;
|
||||||
|
if (await runTest('3. Get Single Issue (GET /issue/{key})', testGetIssue)) passed++; else failed++;
|
||||||
|
if (await runTest('4. Update Issue (PUT /issue/{key})', testUpdateIssue)) passed++; else failed++;
|
||||||
|
if (await runTest('5. Add Comment (POST /issue/{key}/comment)', testAddComment)) passed++; else failed++;
|
||||||
|
|
||||||
|
if (await runTest('6. Get Transitions (GET /issue/{key}/transitions)', async () => {
|
||||||
|
transitions = await testGetTransitions();
|
||||||
|
})) passed++; else failed++;
|
||||||
|
|
||||||
|
if (await runTest('7. Transition Issue (POST /issue/{key}/transitions)', async () => {
|
||||||
|
await testTransitionIssue(transitions);
|
||||||
|
})) passed++; else failed++;
|
||||||
|
|
||||||
|
if (await runTest('8. JQL Search (POST /search)', testJqlSearch)) passed++; else failed++;
|
||||||
|
if (await runTest('9. Bulk Key Search (searchIssuesByKeys)', testBulkKeySearch)) passed++; else failed++;
|
||||||
|
if (await runTest('10. Rate Limit Status', testRateLimitStatus)) passed++; else failed++;
|
||||||
|
|
||||||
|
logInfo('');
|
||||||
|
logInfo('=== Summary ===');
|
||||||
|
logInfo(`Passed: ${passed} | Failed: ${failed} | Total: ${passed + failed}`);
|
||||||
|
if (createdIssueKey) {
|
||||||
|
logInfo(`Test issue created: ${createdIssueKey} — delete manually after ATLSUP review if desired.`);
|
||||||
|
}
|
||||||
|
logInfo('Rate limit usage:', jiraApi.getRateLimitStatus());
|
||||||
|
|
||||||
|
writeLog();
|
||||||
|
|
||||||
|
if (failed > 0) {
|
||||||
|
console.log('\nSome tests failed. Review the log above and jira-uat-test.log for details.');
|
||||||
|
process.exit(1);
|
||||||
|
} else {
|
||||||
|
console.log('\nAll tests passed. Log saved to backend/scripts/jira-uat-test.log');
|
||||||
|
console.log('Next steps:');
|
||||||
|
console.log(' 1. Submit an ATLSUP Rest API Approval ticket');
|
||||||
|
console.log(' 2. Attach or reference jira-uat-test.log in the ticket');
|
||||||
|
console.log(' 3. Click "Script ran - Review Logs" on the ATLSUP ticket');
|
||||||
|
process.exit(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeLog() {
|
||||||
|
const lines = results.map(r => {
|
||||||
|
let line = `[${r.timestamp}] ${r.level.toUpperCase().padEnd(5)} ${r.message}`;
|
||||||
|
if (r.data) {
|
||||||
|
const dataStr = (typeof r.data === 'string' ? r.data : JSON.stringify(r.data, null, 2));
|
||||||
|
const truncated = dataStr.length > 2000 ? dataStr.substring(0, 2000) + '\n ... [truncated — ' + dataStr.length + ' chars total]' : dataStr;
|
||||||
|
line += '\n ' + truncated.split('\n').join('\n ');
|
||||||
|
}
|
||||||
|
return line;
|
||||||
|
});
|
||||||
|
fs.writeFileSync(LOG_FILE, lines.join('\n') + '\n', 'utf8');
|
||||||
|
}
|
||||||
|
|
||||||
|
main().catch(err => {
|
||||||
|
console.error('Unhandled error:', err);
|
||||||
|
process.exit(1);
|
||||||
|
});
|
||||||
@@ -25,10 +25,9 @@ const createIvantiFindingsRouter = require('./routes/ivantiFindings');
|
|||||||
const createIvantiTodoQueueRouter = require('./routes/ivantiTodoQueue');
|
const createIvantiTodoQueueRouter = require('./routes/ivantiTodoQueue');
|
||||||
const createIvantiArchiveRouter = require('./routes/ivantiArchive');
|
const createIvantiArchiveRouter = require('./routes/ivantiArchive');
|
||||||
const createIvantiFpWorkflowRouter = require('./routes/ivantiFpWorkflow');
|
const createIvantiFpWorkflowRouter = require('./routes/ivantiFpWorkflow');
|
||||||
const { createComplianceRouter } = require('./routes/compliance');
|
const createComplianceRouter = require('./routes/compliance');
|
||||||
const createAtlasRouter = require('./routes/atlas');
|
const createAtlasRouter = require('./routes/atlas');
|
||||||
const createJiraTicketsRouter = require('./routes/jiraTickets');
|
const createJiraTicketsRouter = require('./routes/jiraTickets');
|
||||||
const createCardApiRouter = require('./routes/cardApi');
|
|
||||||
|
|
||||||
const app = express();
|
const app = express();
|
||||||
const PORT = process.env.PORT || 3001;
|
const PORT = process.env.PORT || 3001;
|
||||||
@@ -243,9 +242,6 @@ app.use('/api/atlas', createAtlasRouter(db, requireAuth));
|
|||||||
// Jira ticket routes — local CRUD + Jira REST API integration (lookup, sync, create)
|
// Jira ticket routes — local CRUD + Jira REST API integration (lookup, sync, create)
|
||||||
app.use('/api/jira-tickets', createJiraTicketsRouter(db));
|
app.use('/api/jira-tickets', createJiraTicketsRouter(db));
|
||||||
|
|
||||||
// CARD Asset Ownership API routes — proxy CARD operations, mutation flow, asset search
|
|
||||||
app.use('/api/card', createCardApiRouter(db, requireAuth));
|
|
||||||
|
|
||||||
// ========== CVE ENDPOINTS ==========
|
// ========== CVE ENDPOINTS ==========
|
||||||
|
|
||||||
// Get all CVEs with optional filters (authenticated users)
|
// Get all CVEs with optional filters (authenticated users)
|
||||||
|
|||||||
887
backend/setup.js
887
backend/setup.js
@@ -1,12 +1,5 @@
|
|||||||
// Setup Script for CVE Dashboard v1.0.0
|
// Setup Script for CVE Database
|
||||||
// Creates a fresh database with the complete schema including all tables,
|
// This creates a fresh database with multi-vendor support built-in
|
||||||
// indexes, triggers, and views needed for a new deployment.
|
|
||||||
//
|
|
||||||
// Usage: node backend/setup.js
|
|
||||||
//
|
|
||||||
// This consolidates the original schema plus all migration scripts into a
|
|
||||||
// single idempotent setup. Migration scripts in backend/migrations/ are
|
|
||||||
// retained for reference but are NOT needed on fresh deployments.
|
|
||||||
|
|
||||||
const sqlite3 = require('sqlite3').verbose();
|
const sqlite3 = require('sqlite3').verbose();
|
||||||
const bcrypt = require('bcryptjs');
|
const bcrypt = require('bcryptjs');
|
||||||
@@ -14,628 +7,334 @@ const crypto = require('crypto');
|
|||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
const DB_FILE = path.join(__dirname, 'cve_database.db');
|
const DB_FILE = './cve_database.db';
|
||||||
const UPLOADS_DIR = path.join(__dirname, 'uploads');
|
const UPLOADS_DIR = './uploads';
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// Initialize database with schema
|
||||||
// Database helpers
|
function initializeDatabase() {
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
function dbRun(db, sql, params = []) {
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
db.run(sql, params, function (err) {
|
const db = new sqlite3.Database(DB_FILE, (err) => {
|
||||||
if (err) reject(err);
|
if (err) reject(err);
|
||||||
else resolve(this);
|
});
|
||||||
|
|
||||||
|
const schema = `
|
||||||
|
CREATE TABLE IF NOT EXISTS cves (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
cve_id VARCHAR(20) NOT NULL,
|
||||||
|
vendor VARCHAR(100) NOT NULL,
|
||||||
|
severity VARCHAR(20) NOT NULL,
|
||||||
|
description TEXT,
|
||||||
|
published_date DATE,
|
||||||
|
status VARCHAR(50) DEFAULT 'Open',
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
UNIQUE(cve_id, vendor)
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS documents (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
cve_id VARCHAR(20) NOT NULL,
|
||||||
|
vendor VARCHAR(100) NOT NULL,
|
||||||
|
name VARCHAR(255) NOT NULL,
|
||||||
|
type VARCHAR(50) NOT NULL,
|
||||||
|
file_path VARCHAR(500) NOT NULL,
|
||||||
|
file_size VARCHAR(20),
|
||||||
|
mime_type VARCHAR(100),
|
||||||
|
uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
notes TEXT,
|
||||||
|
FOREIGN KEY (cve_id) REFERENCES cves(cve_id) ON DELETE CASCADE
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS required_documents (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
vendor VARCHAR(100) NOT NULL,
|
||||||
|
document_type VARCHAR(50) NOT NULL,
|
||||||
|
is_mandatory BOOLEAN DEFAULT 1,
|
||||||
|
description TEXT
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_cve_id ON cves(cve_id);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_vendor ON cves(vendor);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_severity ON cves(severity);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_status ON cves(status);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_doc_cve_id ON documents(cve_id);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_doc_vendor ON documents(vendor);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_doc_type ON documents(type);
|
||||||
|
|
||||||
|
-- Users table for authentication
|
||||||
|
CREATE TABLE IF NOT EXISTS users (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
username VARCHAR(50) UNIQUE NOT NULL,
|
||||||
|
email VARCHAR(255) UNIQUE NOT NULL,
|
||||||
|
password_hash VARCHAR(255) NOT NULL,
|
||||||
|
role VARCHAR(20) NOT NULL DEFAULT 'viewer',
|
||||||
|
is_active BOOLEAN DEFAULT 1,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
last_login TIMESTAMP,
|
||||||
|
CHECK (role IN ('admin', 'editor', 'viewer'))
|
||||||
|
);
|
||||||
|
|
||||||
|
-- Sessions table for session management
|
||||||
|
CREATE TABLE IF NOT EXISTS sessions (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
session_id VARCHAR(255) UNIQUE NOT NULL,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
expires_at TIMESTAMP NOT NULL,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_sessions_session_id ON sessions(session_id);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_sessions_user_id ON sessions(user_id);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_sessions_expires ON sessions(expires_at);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_users_username ON users(username);
|
||||||
|
|
||||||
|
-- Audit log table for tracking user actions
|
||||||
|
CREATE TABLE IF NOT EXISTS audit_logs (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER,
|
||||||
|
username VARCHAR(50) NOT NULL,
|
||||||
|
action VARCHAR(50) NOT NULL,
|
||||||
|
entity_type VARCHAR(50) NOT NULL,
|
||||||
|
entity_id VARCHAR(100),
|
||||||
|
details TEXT,
|
||||||
|
ip_address VARCHAR(45),
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_audit_user_id ON audit_logs(user_id);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_audit_action ON audit_logs(action);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_audit_entity_type ON audit_logs(entity_type);
|
||||||
|
CREATE INDEX IF NOT EXISTS idx_audit_created_at ON audit_logs(created_at);
|
||||||
|
|
||||||
|
INSERT OR IGNORE INTO required_documents (vendor, document_type, is_mandatory, description) VALUES
|
||||||
|
('Microsoft', 'advisory', 1, 'Official Microsoft Security Advisory'),
|
||||||
|
('Microsoft', 'screenshot', 0, 'Proof of patch application'),
|
||||||
|
('Cisco', 'advisory', 1, 'Cisco Security Advisory'),
|
||||||
|
('Oracle', 'advisory', 1, 'Oracle Security Alert'),
|
||||||
|
('VMware', 'advisory', 1, 'VMware Security Advisory'),
|
||||||
|
('Adobe', 'advisory', 1, 'Adobe Security Bulletin');
|
||||||
|
|
||||||
|
CREATE VIEW IF NOT EXISTS cve_document_status AS
|
||||||
|
SELECT
|
||||||
|
c.id as record_id,
|
||||||
|
c.cve_id,
|
||||||
|
c.vendor,
|
||||||
|
c.severity,
|
||||||
|
c.status,
|
||||||
|
COUNT(DISTINCT d.id) as total_documents,
|
||||||
|
COUNT(DISTINCT CASE WHEN d.type = 'advisory' THEN d.id END) as advisory_count,
|
||||||
|
COUNT(DISTINCT CASE WHEN d.type = 'email' THEN d.id END) as email_count,
|
||||||
|
COUNT(DISTINCT CASE WHEN d.type = 'screenshot' THEN d.id END) as screenshot_count,
|
||||||
|
CASE
|
||||||
|
WHEN COUNT(DISTINCT CASE WHEN d.type = 'advisory' THEN d.id END) > 0
|
||||||
|
THEN 'Complete'
|
||||||
|
ELSE 'Missing Required Docs'
|
||||||
|
END as compliance_status
|
||||||
|
FROM cves c
|
||||||
|
LEFT JOIN documents d ON c.cve_id = d.cve_id AND c.vendor = d.vendor
|
||||||
|
GROUP BY c.id, c.cve_id, c.vendor, c.severity, c.status;
|
||||||
|
`;
|
||||||
|
|
||||||
|
db.exec(schema, (err) => {
|
||||||
|
if (err) {
|
||||||
|
reject(err);
|
||||||
|
} else {
|
||||||
|
console.log('✓ Database initialized successfully');
|
||||||
|
resolve(db);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function dbGet(db, sql, params = []) {
|
// Create uploads directory structure
|
||||||
return new Promise((resolve, reject) => {
|
function createUploadsDirectory() {
|
||||||
db.get(sql, params, (err, row) => {
|
if (!fs.existsSync(UPLOADS_DIR)) {
|
||||||
if (err) reject(err);
|
fs.mkdirSync(UPLOADS_DIR, { recursive: true });
|
||||||
else resolve(row);
|
console.log('✓ Created uploads directory');
|
||||||
});
|
} else {
|
||||||
});
|
console.log('✓ Uploads directory already exists');
|
||||||
}
|
|
||||||
|
|
||||||
function dbExec(db, sql) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.exec(sql, (err) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Schema — complete v1.0.0 database structure
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
async function initializeDatabase(db) {
|
|
||||||
await dbExec(db, `
|
|
||||||
|
|
||||||
-- =================================================================
|
|
||||||
-- Core CVE tracking tables
|
|
||||||
-- =================================================================
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS cves (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
cve_id VARCHAR(20) NOT NULL,
|
|
||||||
vendor VARCHAR(100) NOT NULL,
|
|
||||||
severity VARCHAR(20) NOT NULL,
|
|
||||||
description TEXT,
|
|
||||||
published_date DATE,
|
|
||||||
status VARCHAR(50) DEFAULT 'Open',
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
UNIQUE(cve_id, vendor)
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS documents (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
cve_id VARCHAR(20) NOT NULL,
|
|
||||||
vendor VARCHAR(100) NOT NULL,
|
|
||||||
name VARCHAR(255) NOT NULL,
|
|
||||||
type VARCHAR(50) NOT NULL,
|
|
||||||
file_path VARCHAR(500) NOT NULL,
|
|
||||||
file_size VARCHAR(20),
|
|
||||||
mime_type VARCHAR(100),
|
|
||||||
uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
notes TEXT,
|
|
||||||
FOREIGN KEY (cve_id) REFERENCES cves(cve_id) ON DELETE CASCADE
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS required_documents (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
vendor VARCHAR(100) NOT NULL,
|
|
||||||
document_type VARCHAR(50) NOT NULL,
|
|
||||||
is_mandatory BOOLEAN DEFAULT 1,
|
|
||||||
description TEXT
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_cve_id ON cves(cve_id);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_vendor ON cves(vendor);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_severity ON cves(severity);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_status ON cves(status);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_doc_cve_id ON documents(cve_id);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_doc_vendor ON documents(vendor);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_doc_type ON documents(type);
|
|
||||||
|
|
||||||
-- =================================================================
|
|
||||||
-- Authentication and session management
|
|
||||||
-- =================================================================
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS users (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
username VARCHAR(50) UNIQUE NOT NULL,
|
|
||||||
email VARCHAR(255) UNIQUE NOT NULL,
|
|
||||||
password_hash VARCHAR(255) NOT NULL,
|
|
||||||
role VARCHAR(20) NOT NULL DEFAULT 'viewer',
|
|
||||||
is_active BOOLEAN DEFAULT 1,
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
last_login TIMESTAMP,
|
|
||||||
user_group VARCHAR(20) NOT NULL DEFAULT 'Read_Only',
|
|
||||||
CHECK (role IN ('admin', 'editor', 'viewer'))
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS sessions (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
session_id VARCHAR(255) UNIQUE NOT NULL,
|
|
||||||
user_id INTEGER NOT NULL,
|
|
||||||
expires_at TIMESTAMP NOT NULL,
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_sessions_session_id ON sessions(session_id);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_sessions_user_id ON sessions(user_id);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_sessions_expires ON sessions(expires_at);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_users_username ON users(username);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_users_user_group ON users(user_group);
|
|
||||||
|
|
||||||
-- =================================================================
|
|
||||||
-- Audit logging
|
|
||||||
-- =================================================================
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS audit_logs (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
user_id INTEGER,
|
|
||||||
username VARCHAR(50) NOT NULL,
|
|
||||||
action VARCHAR(50) NOT NULL,
|
|
||||||
entity_type VARCHAR(50) NOT NULL,
|
|
||||||
entity_id VARCHAR(100),
|
|
||||||
details TEXT,
|
|
||||||
ip_address VARCHAR(45),
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_audit_user_id ON audit_logs(user_id);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_audit_action ON audit_logs(action);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_audit_entity_type ON audit_logs(entity_type);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_audit_created_at ON audit_logs(created_at);
|
|
||||||
|
|
||||||
-- =================================================================
|
|
||||||
-- Jira integration
|
|
||||||
-- =================================================================
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS jira_tickets (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
cve_id TEXT NOT NULL,
|
|
||||||
vendor TEXT NOT NULL,
|
|
||||||
ticket_key TEXT NOT NULL,
|
|
||||||
url TEXT,
|
|
||||||
summary TEXT,
|
|
||||||
status TEXT DEFAULT 'Open' CHECK(status IN ('Open', 'In Progress', 'Closed')),
|
|
||||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
FOREIGN KEY (cve_id, vendor) REFERENCES cves(cve_id, vendor) ON DELETE CASCADE
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_jira_tickets_cve ON jira_tickets(cve_id, vendor);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_jira_tickets_status ON jira_tickets(status);
|
|
||||||
|
|
||||||
-- =================================================================
|
|
||||||
-- Archer integration
|
|
||||||
-- =================================================================
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS archer_tickets (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
exc_number TEXT NOT NULL UNIQUE,
|
|
||||||
archer_url TEXT,
|
|
||||||
status TEXT DEFAULT 'Draft' CHECK(status IN ('Draft', 'Open', 'Under Review', 'Accepted')),
|
|
||||||
cve_id TEXT NOT NULL,
|
|
||||||
vendor TEXT NOT NULL,
|
|
||||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
FOREIGN KEY (cve_id, vendor) REFERENCES cves(cve_id, vendor) ON DELETE CASCADE
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_archer_tickets_cve ON archer_tickets(cve_id, vendor);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_archer_tickets_status ON archer_tickets(status);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_archer_tickets_exc ON archer_tickets(exc_number);
|
|
||||||
|
|
||||||
-- =================================================================
|
|
||||||
-- Knowledge base
|
|
||||||
-- =================================================================
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS knowledge_base (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
title VARCHAR(255) NOT NULL,
|
|
||||||
slug VARCHAR(255) UNIQUE NOT NULL,
|
|
||||||
description TEXT,
|
|
||||||
category VARCHAR(100),
|
|
||||||
file_path VARCHAR(500),
|
|
||||||
file_name VARCHAR(255),
|
|
||||||
file_type VARCHAR(50),
|
|
||||||
file_size INTEGER,
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
created_by INTEGER,
|
|
||||||
FOREIGN KEY (created_by) REFERENCES users(id)
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_knowledge_base_slug ON knowledge_base(slug);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_knowledge_base_category ON knowledge_base(category);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_knowledge_base_created_at ON knowledge_base(created_at DESC);
|
|
||||||
|
|
||||||
-- =================================================================
|
|
||||||
-- Ivanti findings sync and cache
|
|
||||||
-- =================================================================
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS ivanti_sync_state (
|
|
||||||
id INTEGER PRIMARY KEY CHECK (id = 1),
|
|
||||||
total INTEGER DEFAULT 0,
|
|
||||||
workflows_json TEXT DEFAULT '[]',
|
|
||||||
synced_at DATETIME,
|
|
||||||
sync_status TEXT DEFAULT 'never',
|
|
||||||
error_message TEXT
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS ivanti_findings_cache (
|
|
||||||
id INTEGER PRIMARY KEY CHECK (id = 1),
|
|
||||||
total INTEGER DEFAULT 0,
|
|
||||||
findings_json TEXT DEFAULT '[]',
|
|
||||||
synced_at DATETIME,
|
|
||||||
sync_status TEXT DEFAULT 'never',
|
|
||||||
error_message TEXT
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS ivanti_finding_notes (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
finding_id TEXT NOT NULL UNIQUE,
|
|
||||||
note TEXT NOT NULL DEFAULT '',
|
|
||||||
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_finding_notes_finding_id ON ivanti_finding_notes(finding_id);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS ivanti_counts_cache (
|
|
||||||
id INTEGER PRIMARY KEY CHECK (id = 1),
|
|
||||||
open_count INTEGER DEFAULT 0,
|
|
||||||
closed_count INTEGER DEFAULT 0,
|
|
||||||
synced_at DATETIME,
|
|
||||||
fp_workflow_counts_json TEXT DEFAULT '{}',
|
|
||||||
fp_id_counts_json TEXT DEFAULT '{}'
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS ivanti_finding_overrides (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
finding_id TEXT NOT NULL,
|
|
||||||
field TEXT NOT NULL,
|
|
||||||
value TEXT NOT NULL DEFAULT '',
|
|
||||||
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
UNIQUE(finding_id, field)
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_finding_overrides_finding_id ON ivanti_finding_overrides(finding_id);
|
|
||||||
|
|
||||||
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
|
|
||||||
);
|
|
||||||
|
|
||||||
-- =================================================================
|
|
||||||
-- Ivanti FP (False Positive) submissions
|
|
||||||
-- =================================================================
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS ivanti_fp_submissions (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
user_id INTEGER NOT NULL,
|
|
||||||
username TEXT NOT NULL,
|
|
||||||
ivanti_workflow_batch_id INTEGER,
|
|
||||||
ivanti_generated_id TEXT,
|
|
||||||
ivanti_workflow_batch_uuid TEXT,
|
|
||||||
workflow_name TEXT NOT NULL,
|
|
||||||
reason TEXT NOT NULL,
|
|
||||||
description TEXT,
|
|
||||||
expiration_date TEXT NOT NULL,
|
|
||||||
scope_override TEXT NOT NULL DEFAULT 'Authorized',
|
|
||||||
finding_ids_json TEXT NOT NULL,
|
|
||||||
queue_item_ids_json TEXT NOT NULL,
|
|
||||||
attachment_count INTEGER DEFAULT 0,
|
|
||||||
attachment_results_json TEXT,
|
|
||||||
status TEXT NOT NULL DEFAULT 'success' CHECK(status IN ('success', 'partial', 'failed')),
|
|
||||||
lifecycle_status TEXT NOT NULL DEFAULT 'submitted' CHECK(lifecycle_status IN ('submitted', 'approved', 'rejected', 'rework', 'resubmitted')),
|
|
||||||
error_message TEXT,
|
|
||||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
updated_at DATETIME DEFAULT NULL
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_fp_submissions_user ON ivanti_fp_submissions(user_id);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_fp_submissions_ivanti_id ON ivanti_fp_submissions(ivanti_generated_id);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS ivanti_fp_submission_history (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
submission_id INTEGER NOT NULL,
|
|
||||||
user_id INTEGER NOT NULL,
|
|
||||||
username TEXT NOT NULL,
|
|
||||||
change_type TEXT NOT NULL CHECK(change_type IN (
|
|
||||||
'created', 'fields_updated', 'findings_added',
|
|
||||||
'attachments_added', 'status_changed'
|
|
||||||
)),
|
|
||||||
change_details_json TEXT,
|
|
||||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
FOREIGN KEY (submission_id) REFERENCES ivanti_fp_submissions(id) ON DELETE CASCADE
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_fp_history_submission ON ivanti_fp_submission_history(submission_id);
|
|
||||||
|
|
||||||
-- =================================================================
|
|
||||||
-- Ivanti todo queue (FP, Archer, CARD, GRANITE workflows)
|
|
||||||
-- =================================================================
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS ivanti_todo_queue (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
user_id INTEGER NOT NULL,
|
|
||||||
finding_id TEXT NOT NULL,
|
|
||||||
finding_title TEXT,
|
|
||||||
cves_json TEXT,
|
|
||||||
ip_address TEXT,
|
|
||||||
hostname TEXT,
|
|
||||||
vendor TEXT NOT NULL,
|
|
||||||
workflow_type TEXT NOT NULL CHECK(workflow_type IN ('FP', 'Archer', 'CARD', 'GRANITE')),
|
|
||||||
status TEXT NOT NULL DEFAULT 'pending' CHECK(status IN ('pending', 'complete')),
|
|
||||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_todo_queue_user ON ivanti_todo_queue(user_id, status);
|
|
||||||
|
|
||||||
-- =================================================================
|
|
||||||
-- Ivanti archive detection and anomaly tracking
|
|
||||||
-- =================================================================
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS ivanti_finding_archives (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
finding_id TEXT NOT NULL UNIQUE,
|
|
||||||
finding_title TEXT NOT NULL DEFAULT '',
|
|
||||||
host_name TEXT NOT NULL DEFAULT '',
|
|
||||||
ip_address TEXT NOT NULL DEFAULT '',
|
|
||||||
current_state TEXT NOT NULL CHECK(current_state IN ('ARCHIVED','RETURNED','CLOSED','CLOSED_GONE')),
|
|
||||||
last_severity REAL NOT NULL DEFAULT 0,
|
|
||||||
first_archived_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
last_transition_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_archive_finding_id ON ivanti_finding_archives(finding_id);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_archive_current_state ON ivanti_finding_archives(current_state);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS ivanti_archive_transitions (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
archive_id INTEGER NOT NULL,
|
|
||||||
from_state TEXT NOT NULL,
|
|
||||||
to_state TEXT NOT NULL,
|
|
||||||
severity_at_transition REAL NOT NULL DEFAULT 0,
|
|
||||||
reason TEXT NOT NULL DEFAULT '',
|
|
||||||
transitioned_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
FOREIGN KEY (archive_id) REFERENCES ivanti_finding_archives(id)
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_transition_archive_id ON ivanti_archive_transitions(archive_id);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS ivanti_sync_anomaly_log (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
sync_timestamp DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
open_count_delta INTEGER NOT NULL DEFAULT 0,
|
|
||||||
closed_count_delta INTEGER NOT NULL DEFAULT 0,
|
|
||||||
newly_archived_count INTEGER NOT NULL DEFAULT 0,
|
|
||||||
returned_count INTEGER NOT NULL DEFAULT 0,
|
|
||||||
classification_json TEXT NOT NULL DEFAULT '{}',
|
|
||||||
return_classification_json TEXT NOT NULL DEFAULT '{}',
|
|
||||||
is_significant INTEGER NOT NULL DEFAULT 0,
|
|
||||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_anomaly_sync_timestamp ON ivanti_sync_anomaly_log(sync_timestamp);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS ivanti_finding_bu_history (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
finding_id TEXT NOT NULL,
|
|
||||||
finding_title TEXT NOT NULL DEFAULT '',
|
|
||||||
host_name TEXT NOT NULL DEFAULT '',
|
|
||||||
previous_bu TEXT NOT NULL,
|
|
||||||
new_bu TEXT NOT NULL,
|
|
||||||
detected_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_bu_history_finding_id ON ivanti_finding_bu_history(finding_id);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_bu_history_detected_at ON ivanti_finding_bu_history(detected_at);
|
|
||||||
|
|
||||||
-- =================================================================
|
|
||||||
-- Atlas action plans cache
|
|
||||||
-- =================================================================
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS atlas_action_plans_cache (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
host_id INTEGER NOT NULL UNIQUE,
|
|
||||||
has_action_plan INTEGER NOT NULL DEFAULT 0,
|
|
||||||
plan_count INTEGER NOT NULL DEFAULT 0,
|
|
||||||
plans_json TEXT NOT NULL DEFAULT '[]',
|
|
||||||
synced_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_atlas_cache_host_id ON atlas_action_plans_cache(host_id);
|
|
||||||
|
|
||||||
-- =================================================================
|
|
||||||
-- Compliance (NTS AEO) tracking
|
|
||||||
-- =================================================================
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS compliance_uploads (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
filename TEXT NOT NULL,
|
|
||||||
report_date TEXT,
|
|
||||||
uploaded_by INTEGER,
|
|
||||||
uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
new_count INTEGER DEFAULT 0,
|
|
||||||
resolved_count INTEGER DEFAULT 0,
|
|
||||||
recurring_count INTEGER DEFAULT 0,
|
|
||||||
summary_json TEXT,
|
|
||||||
FOREIGN KEY (uploaded_by) REFERENCES users(id) ON DELETE SET NULL
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS compliance_items (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
upload_id INTEGER NOT NULL,
|
|
||||||
hostname TEXT NOT NULL,
|
|
||||||
ip_address TEXT,
|
|
||||||
device_type TEXT,
|
|
||||||
team TEXT,
|
|
||||||
metric_id TEXT NOT NULL,
|
|
||||||
metric_desc TEXT,
|
|
||||||
category TEXT,
|
|
||||||
extra_json TEXT,
|
|
||||||
status TEXT NOT NULL DEFAULT 'active' CHECK(status IN ('active', 'resolved')),
|
|
||||||
first_seen_upload_id INTEGER,
|
|
||||||
resolved_upload_id INTEGER,
|
|
||||||
seen_count INTEGER DEFAULT 1,
|
|
||||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
FOREIGN KEY (upload_id) REFERENCES compliance_uploads(id) ON DELETE CASCADE,
|
|
||||||
FOREIGN KEY (first_seen_upload_id) REFERENCES compliance_uploads(id) ON DELETE SET NULL,
|
|
||||||
FOREIGN KEY (resolved_upload_id) REFERENCES compliance_uploads(id) ON DELETE SET NULL
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_compliance_items_upload ON compliance_items(upload_id);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_compliance_items_identity ON compliance_items(hostname, metric_id);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_compliance_items_team_status ON compliance_items(team, status);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS compliance_notes (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
hostname TEXT NOT NULL,
|
|
||||||
metric_id TEXT NOT NULL,
|
|
||||||
note TEXT NOT NULL,
|
|
||||||
group_id TEXT,
|
|
||||||
created_by INTEGER,
|
|
||||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
FOREIGN KEY (created_by) REFERENCES users(id) ON DELETE SET NULL
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_compliance_notes_identity ON compliance_notes(hostname, metric_id);
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_compliance_notes_group ON compliance_notes(group_id);
|
|
||||||
|
|
||||||
-- =================================================================
|
|
||||||
-- Document compliance view
|
|
||||||
-- =================================================================
|
|
||||||
|
|
||||||
CREATE VIEW IF NOT EXISTS cve_document_status AS
|
|
||||||
SELECT
|
|
||||||
c.id as record_id,
|
|
||||||
c.cve_id,
|
|
||||||
c.vendor,
|
|
||||||
c.severity,
|
|
||||||
c.status,
|
|
||||||
COUNT(DISTINCT d.id) as total_documents,
|
|
||||||
COUNT(DISTINCT CASE WHEN d.type = 'advisory' THEN d.id END) as advisory_count,
|
|
||||||
COUNT(DISTINCT CASE WHEN d.type = 'email' THEN d.id END) as email_count,
|
|
||||||
COUNT(DISTINCT CASE WHEN d.type = 'screenshot' THEN d.id END) as screenshot_count,
|
|
||||||
CASE
|
|
||||||
WHEN COUNT(DISTINCT CASE WHEN d.type = 'advisory' THEN d.id END) > 0
|
|
||||||
THEN 'Complete'
|
|
||||||
ELSE 'Missing Required Docs'
|
|
||||||
END as compliance_status
|
|
||||||
FROM cves c
|
|
||||||
LEFT JOIN documents d ON c.cve_id = d.cve_id AND c.vendor = d.vendor
|
|
||||||
GROUP BY c.id, c.cve_id, c.vendor, c.severity, c.status;
|
|
||||||
|
|
||||||
-- =================================================================
|
|
||||||
-- Seed data
|
|
||||||
-- =================================================================
|
|
||||||
|
|
||||||
INSERT OR IGNORE INTO required_documents (vendor, document_type, is_mandatory, description) VALUES
|
|
||||||
('Microsoft', 'advisory', 1, 'Official Microsoft Security Advisory'),
|
|
||||||
('Microsoft', 'screenshot', 0, 'Proof of patch application'),
|
|
||||||
('Cisco', 'advisory', 1, 'Cisco Security Advisory'),
|
|
||||||
('Oracle', 'advisory', 1, 'Oracle Security Alert'),
|
|
||||||
('VMware', 'advisory', 1, 'VMware Security Advisory'),
|
|
||||||
('Adobe', 'advisory', 1, 'Adobe Security Bulletin');
|
|
||||||
`);
|
|
||||||
|
|
||||||
console.log('✓ Database schema initialized');
|
|
||||||
|
|
||||||
// User group validation triggers (cannot be in db.exec multi-statement)
|
|
||||||
await dbRun(db, `
|
|
||||||
CREATE TRIGGER IF NOT EXISTS check_user_group_insert
|
|
||||||
BEFORE INSERT ON users
|
|
||||||
FOR EACH ROW
|
|
||||||
WHEN NEW.user_group NOT IN ('Admin', 'Standard_User', 'Leadership', 'Read_Only')
|
|
||||||
BEGIN
|
|
||||||
SELECT RAISE(ABORT, 'Invalid user_group value. Must be Admin, Standard_User, Leadership, or Read_Only');
|
|
||||||
END
|
|
||||||
`);
|
|
||||||
|
|
||||||
await dbRun(db, `
|
|
||||||
CREATE TRIGGER IF NOT EXISTS check_user_group_update
|
|
||||||
BEFORE UPDATE OF user_group ON users
|
|
||||||
FOR EACH ROW
|
|
||||||
WHEN NEW.user_group NOT IN ('Admin', 'Standard_User', 'Leadership', 'Read_Only')
|
|
||||||
BEGIN
|
|
||||||
SELECT RAISE(ABORT, 'Invalid user_group value. Must be Admin, Standard_User, Leadership, or Read_Only');
|
|
||||||
END
|
|
||||||
`);
|
|
||||||
|
|
||||||
console.log('✓ Triggers created');
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Directory setup
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
function createDirectories() {
|
|
||||||
const dirs = [
|
|
||||||
UPLOADS_DIR,
|
|
||||||
path.join(UPLOADS_DIR, 'temp'),
|
|
||||||
path.join(UPLOADS_DIR, 'knowledge_base'),
|
|
||||||
];
|
|
||||||
for (const dir of dirs) {
|
|
||||||
if (!fs.existsSync(dir)) {
|
|
||||||
fs.mkdirSync(dir, { recursive: true });
|
|
||||||
console.log(`✓ Created directory: ${path.relative(__dirname, dir)}`);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// Create default admin user
|
||||||
// Default admin user
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
async function createDefaultAdmin(db) {
|
async function createDefaultAdmin(db) {
|
||||||
const existing = await dbGet(db, 'SELECT id FROM users WHERE username = ?', ['admin']);
|
return new Promise((resolve, reject) => {
|
||||||
if (existing) {
|
// Check if admin already exists
|
||||||
console.log('✓ Default admin user already exists');
|
db.get('SELECT id FROM users WHERE username = ?', ['admin'], async (err, row) => {
|
||||||
return;
|
if (err) {
|
||||||
}
|
reject(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const generatedPassword = crypto.randomBytes(12).toString('base64url');
|
if (row) {
|
||||||
const passwordHash = await bcrypt.hash(generatedPassword, 10);
|
console.log('✓ Default admin user already exists');
|
||||||
|
resolve();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
await dbRun(db,
|
// Generate a random admin password on first run
|
||||||
`INSERT INTO users (username, email, password_hash, role, user_group, is_active)
|
const generatedPassword = crypto.randomBytes(12).toString('base64url');
|
||||||
VALUES (?, ?, ?, ?, ?, ?)`,
|
const passwordHash = await bcrypt.hash(generatedPassword, 10);
|
||||||
['admin', 'admin@localhost', passwordHash, 'admin', 'Admin', 1]
|
|
||||||
);
|
|
||||||
|
|
||||||
console.log('✓ Created default admin user');
|
db.run(
|
||||||
console.log(`\n ╔══════════════════════════════════════════╗`);
|
`INSERT INTO users (username, email, password_hash, role, is_active)
|
||||||
console.log(` ║ Admin credentials (save these now!) ║`);
|
VALUES (?, ?, ?, ?, ?)`,
|
||||||
console.log(` ║ Username: admin ║`);
|
['admin', 'admin@localhost', passwordHash, 'admin', 1],
|
||||||
console.log(` ║ Password: ${generatedPassword.padEnd(29)}║`);
|
(err) => {
|
||||||
console.log(` ╚══════════════════════════════════════════╝\n`);
|
if (err) {
|
||||||
|
reject(err);
|
||||||
|
} else {
|
||||||
|
console.log('✓ Created default admin user');
|
||||||
|
console.log(`\n ╔══════════════════════════════════════════╗`);
|
||||||
|
console.log(` ║ Admin credentials (save these now!) ║`);
|
||||||
|
console.log(` ║ Username: admin ║`);
|
||||||
|
console.log(` ║ Password: ${generatedPassword.padEnd(29)}║`);
|
||||||
|
console.log(` ╚══════════════════════════════════════════╝\n`);
|
||||||
|
resolve();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// Add sample CVE data (optional - for testing)
|
||||||
// Setup summary
|
async function addSampleData(db) {
|
||||||
// ---------------------------------------------------------------------------
|
console.log('\n📝 Adding sample CVE data for testing...');
|
||||||
|
|
||||||
|
const sampleCVEs = [
|
||||||
|
{
|
||||||
|
cve_id: 'CVE-2024-SAMPLE-1',
|
||||||
|
vendor: 'Microsoft',
|
||||||
|
severity: 'Critical',
|
||||||
|
description: 'Sample remote code execution vulnerability',
|
||||||
|
published_date: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cve_id: 'CVE-2024-SAMPLE-1',
|
||||||
|
vendor: 'Cisco',
|
||||||
|
severity: 'High',
|
||||||
|
description: 'Sample remote code execution vulnerability',
|
||||||
|
published_date: '2024-01-15'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const cve of sampleCVEs) {
|
||||||
|
await new Promise((resolve, reject) => {
|
||||||
|
db.run(
|
||||||
|
`INSERT OR IGNORE INTO cves (cve_id, vendor, severity, description, published_date)
|
||||||
|
VALUES (?, ?, ?, ?, ?)`,
|
||||||
|
[cve.cve_id, cve.vendor, cve.severity, cve.description, cve.published_date],
|
||||||
|
(err) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else {
|
||||||
|
console.log(` ✓ Added sample: ${cve.cve_id} / ${cve.vendor}`);
|
||||||
|
resolve();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('ℹ️ Sample data added - demonstrates multi-vendor support');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verify database structure
|
||||||
|
async function verifySetup(db) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
db.get('SELECT sql FROM sqlite_master WHERE type="table" AND name="cves"', (err, row) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('Warning: Could not verify setup:', err);
|
||||||
|
} else {
|
||||||
|
console.log('\n📋 CVEs table structure:');
|
||||||
|
console.log(row.sql);
|
||||||
|
|
||||||
|
// Check if UNIQUE constraint is correct
|
||||||
|
if (row.sql.includes('UNIQUE(cve_id, vendor)')) {
|
||||||
|
console.log('\n✅ Multi-vendor support: ENABLED');
|
||||||
|
} else {
|
||||||
|
console.log('\n⚠️ Warning: Multi-vendor constraint may not be set correctly');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Display setup summary
|
||||||
function displaySummary() {
|
function displaySummary() {
|
||||||
console.log('\n╔════════════════════════════════════════════════════════╗');
|
console.log('\n╔════════════════════════════════════════════════════════╗');
|
||||||
console.log('║ CVE DASHBOARD v1.0.0 — SETUP COMPLETE ║');
|
console.log('║ CVE DATABASE SETUP COMPLETE! ║');
|
||||||
console.log('╚════════════════════════════════════════════════════════╝');
|
console.log('╚════════════════════════════════════════════════════════╝');
|
||||||
console.log('\n📊 Tables created:');
|
console.log('\n📊 What was created:');
|
||||||
console.log(' Core: cves, documents, required_documents');
|
console.log(' ✓ SQLite database (cve_database.db)');
|
||||||
console.log(' Auth: users, sessions');
|
console.log(' ✓ Tables: cves, documents, required_documents, users, sessions, audit_logs');
|
||||||
console.log(' Audit: audit_logs');
|
console.log(' ✓ Multi-vendor support with UNIQUE(cve_id, vendor)');
|
||||||
console.log(' Jira: jira_tickets');
|
console.log(' ✓ Vendor column in documents table');
|
||||||
console.log(' Archer: archer_tickets');
|
console.log(' ✓ User authentication with session-based auth');
|
||||||
console.log(' KB: knowledge_base');
|
console.log(' ✓ Indexes for fast queries');
|
||||||
console.log(' Ivanti: ivanti_sync_state, ivanti_findings_cache,');
|
console.log(' ✓ Document compliance view');
|
||||||
console.log(' ivanti_finding_notes, ivanti_counts_cache,');
|
console.log(' ✓ Uploads directory for file storage');
|
||||||
console.log(' ivanti_finding_overrides, ivanti_counts_history,');
|
console.log(' ✓ Default admin user (see credentials above)');
|
||||||
console.log(' ivanti_fp_submissions, ivanti_fp_submission_history,');
|
console.log('\n📁 File structure will be:');
|
||||||
console.log(' ivanti_todo_queue');
|
console.log(' uploads/');
|
||||||
console.log(' Archives: ivanti_finding_archives, ivanti_archive_transitions,');
|
console.log(' └── CVE-XXXX-XXXX/');
|
||||||
console.log(' ivanti_sync_anomaly_log, ivanti_finding_bu_history');
|
console.log(' ├── Vendor1/');
|
||||||
console.log(' Atlas: atlas_action_plans_cache');
|
console.log(' │ ├── advisory.pdf');
|
||||||
console.log(' Compliance: compliance_uploads, compliance_items, compliance_notes');
|
console.log(' │ └── screenshot.png');
|
||||||
|
console.log(' └── Vendor2/');
|
||||||
|
console.log(' └── advisory.pdf');
|
||||||
console.log('\n🚀 Next steps:');
|
console.log('\n🚀 Next steps:');
|
||||||
console.log(' 1. Copy .env.example to .env and configure API keys');
|
console.log(' 1. Start the backend API:');
|
||||||
console.log(' 2. Start the backend: node backend/server.js');
|
console.log(' → cd backend && node server.js');
|
||||||
console.log(' 3. Build the frontend: cd frontend && npm run build');
|
console.log(' 2. Start the frontend:');
|
||||||
console.log(' 4. Open the dashboard and log in with the admin credentials above\n');
|
console.log(' → cd frontend && npm start');
|
||||||
|
console.log(' 3. Open http://localhost:3000');
|
||||||
|
console.log(' 4. Start adding CVEs with multiple vendors!');
|
||||||
|
console.log('\n💡 Key Features:');
|
||||||
|
console.log(' • Add same CVE-ID with different vendors');
|
||||||
|
console.log(' • Each vendor has separate document storage');
|
||||||
|
console.log(' • Quick Check shows all vendors for a CVE');
|
||||||
|
console.log(' • Document compliance tracking per vendor');
|
||||||
|
console.log(' • Required docs: Advisory (mandatory for most vendors)\n');
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// Main execution
|
||||||
// Main
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
async function main() {
|
async function main() {
|
||||||
console.log('🚀 CVE Dashboard v1.0.0 — Database Setup\n');
|
console.log('🚀 CVE Database Setup (Multi-Vendor Support)\n');
|
||||||
console.log('════════════════════════════════════════\n');
|
console.log('════════════════════════════════════════\n');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
createDirectories();
|
// Create uploads directory
|
||||||
|
createUploadsDirectory();
|
||||||
|
|
||||||
const db = new sqlite3.Database(DB_FILE);
|
// Initialize database
|
||||||
await initializeDatabase(db);
|
const db = await initializeDatabase();
|
||||||
|
|
||||||
|
// Create default admin user
|
||||||
await createDefaultAdmin(db);
|
await createDefaultAdmin(db);
|
||||||
|
|
||||||
|
// Add sample data
|
||||||
|
await addSampleData(db);
|
||||||
|
|
||||||
|
// Verify setup
|
||||||
|
await verifySetup(db);
|
||||||
|
|
||||||
|
// Close database connection
|
||||||
db.close((err) => {
|
db.close((err) => {
|
||||||
if (err) console.error('Error closing database:', err);
|
if (err) console.error('Error closing database:', err);
|
||||||
else console.log('✓ Database connection closed');
|
else console.log('\n✓ Database connection closed');
|
||||||
|
|
||||||
|
// Display summary
|
||||||
displaySummary();
|
displaySummary();
|
||||||
});
|
});
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('❌ Setup Error:', error);
|
console.error('❌ Setup Error:', error);
|
||||||
process.exit(1);
|
process.exit(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Run the setup
|
||||||
main();
|
main();
|
||||||
|
|||||||
BIN
docs/TeamDeviceLoader_matched_findings.xlsx
Normal file
BIN
docs/TeamDeviceLoader_matched_findings.xlsx
Normal file
Binary file not shown.
BIN
docs/Team_Device Loader.xlsx
Normal file
BIN
docs/Team_Device Loader.xlsx
Normal file
Binary file not shown.
235
docs/design-system-redesign/README.md
Normal file
235
docs/design-system-redesign/README.md
Normal file
@@ -0,0 +1,235 @@
|
|||||||
|
# STEAM Security Design System
|
||||||
|
|
||||||
|
A design system for the **STEAM Security Dashboard** — a self-hosted vulnerability management workbench used by the NTS-AEO-STEAM and NTS-AEO-ACCESS-ENG business units. This repo captures the visual language, content patterns, tokens, and UI kit needed to extend or rebuild the product without drifting from its established look.
|
||||||
|
|
||||||
|
## What the product is
|
||||||
|
|
||||||
|
The STEAM Security Dashboard centralises:
|
||||||
|
|
||||||
|
- **CVE tracking** — searchable, filterable, vendor-aware CVE list with NVD auto-fill, document attachment, and group-based ownership
|
||||||
|
- **Ivanti / RiskSense host findings** — live remediation queue with FP / Archer / CARD workflows, inline editing, per-finding notes, and a personal "Ivanti Queue" staging list
|
||||||
|
- **AEO compliance posture** — weekly xlsx upload with drift detection, diff preview, per-team metric health cards, device-level violation tracking, and timestamped notes
|
||||||
|
- **Archer EXC tickets** — risk-acceptance ticket tracking linked to CVE / vendor pairs
|
||||||
|
- **Knowledge base** — internal document library (PDF, Markdown, Office, etc.) for runbooks, advisories, and policies
|
||||||
|
- **Admin panel** — user / group management, audit log, system info — all gated behind an Admin group
|
||||||
|
|
||||||
|
Four user groups (`Admin`, `Standard_User`, `Leadership`, `Read_Only`) define every permission boundary, and every state-changing action is audit-logged.
|
||||||
|
|
||||||
|
## The 6 pages
|
||||||
|
|
||||||
|
1. **Home / Dashboard** — CVE list, filters, calendar widget for due dates
|
||||||
|
2. **Reporting** — Ivanti host findings, charts, queue, export
|
||||||
|
3. **Compliance** — AEO posture, metric health cards, device drill-in
|
||||||
|
4. **Knowledge Base** — document library
|
||||||
|
5. **Exports** — bulk export tools (group-gated)
|
||||||
|
6. **Admin Panel** — user management, audit log, system info (Admin only)
|
||||||
|
|
||||||
|
## Sources
|
||||||
|
|
||||||
|
- **Codebase:** `https://vulcan.apophisnetworking.net/jramos/cve-dashboard` (Gitea, master branch). Auth required; raw file fetch is gated. The repo's own `README.md` (fetched via the source viewer) is the most accurate functional spec we had access to and is the basis for this system.
|
||||||
|
- **Existing design ref:** `DESIGN_SYSTEM.md` (290 lines, in-repo) — referenced in the audit but not directly accessible from the host.
|
||||||
|
- **Component audit** provided in the project brief: 29 components, 5 primitives, 14 composites, 5 pages, 1 context provider.
|
||||||
|
- **Stack:** React 19, lucide-react, recharts, react-markdown + rehype-sanitize, mermaid, xlsx. Backend Express 5 / SQLite3.
|
||||||
|
|
||||||
|
## Index — what's in this folder
|
||||||
|
|
||||||
|
| Path | What it is |
|
||||||
|
|---|---|
|
||||||
|
| `README.md` | This file — context, content + visual foundations, iconography |
|
||||||
|
| `SKILL.md` | Agent Skill manifest for Claude Code compatibility |
|
||||||
|
| `colors_and_type.css` | Source-of-truth tokens — color, type, spacing, radii, elevation |
|
||||||
|
| `fonts/` | Font references (Outfit + JetBrains Mono via Google Fonts CDN) |
|
||||||
|
| `assets/` | Logo mark, brand SVGs, severity icons |
|
||||||
|
| `preview/` | Design System tab cards — registered as assets |
|
||||||
|
| `ui_kits/cve-dashboard/` | High-fidelity recreation of the dashboard, focused on Knowledge Base |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## CONTENT FUNDAMENTALS
|
||||||
|
|
||||||
|
The product is a tactical operations console for security engineers. Copy is dense, terse, and assumes a reader who already knows what a CVE, EXC ticket, FP workflow, and BU filter are. There is no marketing voice, no onboarding nudges, and no exclamation marks.
|
||||||
|
|
||||||
|
### Voice & tone
|
||||||
|
- **Operational, not editorial.** Buttons say "Sync", "Confirm Upload", "Reconcile Config", "Add to Queue". Never "Let's get started" or "You're all set".
|
||||||
|
- **Imperative for actions, declarative for state.** "Save", "Delete", "Hide Selected" — never "Saving your changes…" with three dots and a heart.
|
||||||
|
- **No emoji.** Status is communicated through colour-coded badges and short text labels.
|
||||||
|
- **Title Case for navigation and headers**, Sentence case for body and inline labels. Tabs and buttons: `User Management`, `Audit Log`, `System Info`. Helper text: `Filter tickets by CVE ID, vendor, or status.`
|
||||||
|
|
||||||
|
### Person & address
|
||||||
|
- **Second-person sparingly** — only when the system is talking *about* the user's data: "your login", "your filtered view", "your queue". Never "Welcome back, {name}".
|
||||||
|
- **First-person plural never.** No "We've updated" or "Let us know".
|
||||||
|
- **Errors are direct, no apology.** "SESSION_SECRET environment variable must be set." "Login rate limited — wait 15 minutes." Never "Oops! Something went wrong."
|
||||||
|
|
||||||
|
### Casing
|
||||||
|
- **CVE IDs:** uppercase with hyphen — `CVE-2024-12345`. Validated against `/^CVE-\d{4}-\d{4,}$/`.
|
||||||
|
- **EXC numbers:** uppercase — `EXC-12345`. Validated `/^EXC-\d+$/`.
|
||||||
|
- **Severity labels:** Title Case — `Critical`, `High`, `Medium`, `Low`. Status labels: `Open`, `Addressed`, `In Progress`, `Resolved`.
|
||||||
|
- **Workflow state badges:** SHOUT CASE for SLA states only — `OVERDUE`, `AT_RISK`, `WITHIN_SLA`. Everything else is Title Case.
|
||||||
|
- **Group names:** snake_case in code (`Standard_User`), Title Case in UI (`Standard User`).
|
||||||
|
|
||||||
|
### Density and units
|
||||||
|
- Numerical metrics are bare integers ("12 findings", "47 devices"). Percentages always carry the % sign with no space.
|
||||||
|
- Dates are explicit, no relative time except "Last sync: 4h ago" patterns.
|
||||||
|
- Column headers are short — `Host`, `IP Address`, `DNS`, `BU`, `SLA` — never `Host Name (Editable)`.
|
||||||
|
|
||||||
|
### Specific copy conventions seen in product
|
||||||
|
- "— empty —" as a filter option for empty cells
|
||||||
|
- "Hidden (N)" pattern for counted UI states
|
||||||
|
- "+N" badge for overflow (e.g., 2 CVEs shown, "+5" badge)
|
||||||
|
- "↻" revert glyph next to overridden cells, with a small amber dot ● for the overridden state
|
||||||
|
- Tooltips appear after a 300ms delay and are session-cached
|
||||||
|
- "View in Reporting →" inline link pattern with a literal arrow
|
||||||
|
|
||||||
|
### What NOT to write
|
||||||
|
- No motivational copy ("Great work!", "You're crushing it")
|
||||||
|
- No question-mark headlines ("Need help?")
|
||||||
|
- No marketing CTAs ("Upgrade now", "Try premium")
|
||||||
|
- No mascot or persona — the system is the system
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## VISUAL FOUNDATIONS
|
||||||
|
|
||||||
|
The dashboard reads as a **dark tactical intelligence console** — slate / graphite backgrounds, sky-blue as the primary accent and ambient glow, severity colours used like signal flags, animated pulse-glow status dots, and information density prioritised over breathing room. The aesthetic is closer to a SOC / NOC mission display than to a flat enterprise SaaS.
|
||||||
|
|
||||||
|
### Colour vibe
|
||||||
|
- **Dark slate base.** `#0F172A` (deep slate) for the page, `#1E293B` for surfaces, `#334155` for elevated surfaces and borders. Almost black, never pure black. The cool tone is consistent — no warm shadows.
|
||||||
|
- **Sky blue is the brand accent** — `#38BDF8` is the primary action / link / focused state colour. It appears in buttons, active nav items, link text, and the "create" badge in the audit log.
|
||||||
|
- **Severity is a fixed semantic system** — the colours below MUST mean what they mean and nothing else.
|
||||||
|
- Critical → Red `#EF4444`
|
||||||
|
- High → Amber `#F59E0B`
|
||||||
|
- Medium → Sky `#38BDF8`
|
||||||
|
- Low → Emerald `#10B981`
|
||||||
|
- **Neutral text scale** — `#F1F5F9` (primary fg), `#CBD5E1` (secondary), `#94A3B8` (muted), `#64748B` (placeholder / disabled). Never pure white.
|
||||||
|
- **Group badges** — Admin red, Standard_User accent blue, Leadership amber, Read_Only muted grey. The same severity language reappears here for status urgency.
|
||||||
|
|
||||||
|
### Typography
|
||||||
|
- **Outfit** for all UI (headers, body, buttons, navigation). Geometric sans, friendly but precise; weights 400 / 500 / 600 / 700.
|
||||||
|
- **JetBrains Mono** for *data* — CVE IDs, IP addresses, hostnames, EXC numbers, finding IDs, code blocks. Anything you'd grep for.
|
||||||
|
- **Scale** is compact. Page titles 24–28px / 600 weight; section headers 16–18px / 600; body 14px / 400; data table cells 13px / 400 mono. Line-height stays tight (1.4) to preserve density.
|
||||||
|
|
||||||
|
### Spacing
|
||||||
|
- **4 / 8 / 12 / 16 / 24 / 32 / 48** — a roughly 4px grid. Cards have 16–20px internal padding; rows in dense tables have 8–10px vertical padding; modals have 24px internal padding.
|
||||||
|
- **Section gaps** are 24–32px. Between siblings, 12–16px is the dominant rhythm.
|
||||||
|
|
||||||
|
### Backgrounds
|
||||||
|
- **No imagery.** No hero photographs, illustrations, or marketing visuals. The page is solid `#0F172A`.
|
||||||
|
- **Subtle sky-blue grid is allowed.** A 20×20px grid at `rgba(14,165,233,0.025)` (`.grid-bg` utility) sits behind hero / empty regions. It is barely visible and never dominates.
|
||||||
|
- **Surfaces use diagonal gradients**, not flat fills — `linear-gradient(135deg, rgba(30,41,59,0.95), rgba(51,65,85,0.9))` is the canonical card surface.
|
||||||
|
|
||||||
|
### Cards and surfaces (`intel-card`)
|
||||||
|
- **Background:** diagonal gradient `135deg, rgba(30,41,59,0.95) 0%, rgba(51,65,85,0.9) 50%, rgba(30,41,59,0.95) 100%`
|
||||||
|
- **Border:** 1.5px solid `rgba(14,165,233,0.30)` — sky-blue at low alpha, not slate grey
|
||||||
|
- **Radius:** 8px (default) / 12px (modals) / 4px (chips)
|
||||||
|
- **Internal padding:** 16–20px
|
||||||
|
- **Resting shadow:** `0 4px 12px rgba(0,0,0,0.4)` + `0 2px 6px rgba(0,0,0,0.3)` + inset `0 1px 0 rgba(14,165,233,0.10)` (sky highlight on top edge)
|
||||||
|
- **Hover:** border opacity climbs to `0.50`, the card lifts `translateY(-2px)`, and gains a `0 0 30px rgba(14,165,233,0.10)` ambient glow. A `::after` shimmer sweeps left→right on entry.
|
||||||
|
- **Stat cards** add a 2px `linear-gradient(90deg, transparent, #0EA5E9, transparent)` rail on the top edge.
|
||||||
|
|
||||||
|
### Borders
|
||||||
|
- **Sky-blue at low alpha** is the dominant border treatment — `rgba(14,165,233,0.15)` for subtle dividers, `0.25` for default, `0.40` for strong / hover. Pure slate `#334155` borders appear only on tables and inputs at rest.
|
||||||
|
- Focus state: 2px sky-blue ring `0 0 0 2px rgba(14,165,233,0.15)` plus the border swaps to solid `#0EA5E9`.
|
||||||
|
- Severity-tinted left borders are NOT a pattern — colour is carried by badges, dots, and glow.
|
||||||
|
|
||||||
|
### Animation
|
||||||
|
- **Pulse-glow on status dots is canonical.** Every severity / SLA badge has an 8px circle that pulses `box-shadow: 0 0 5px → 15px currentColor` on a 2s ease-in-out loop (`@keyframes pulse-glow`).
|
||||||
|
- **Card hover lift** is 300ms cubic-bezier(0.4,0,0.2,1) with a `::after` shimmer sweep — `linear-gradient(90deg, transparent, rgba(14,165,233,0.08), transparent)` translating from `left:-100%` to `100%` over 500ms.
|
||||||
|
- **Buttons** have a circular ripple `::before` that scales from 0×0 to 300×300 on hover (500ms).
|
||||||
|
- Modal entry: 200ms fade + slight translate. Slide-out panels: 240ms ease-out from the right.
|
||||||
|
- Tooltips have a deliberate **300ms hover delay** before appearing.
|
||||||
|
- A `.scan-line` utility (3s loop) is available for hero / loading affordances — used sparingly.
|
||||||
|
|
||||||
|
### Hover states
|
||||||
|
- **Cards** lift `-2px`, border opacity climbs from `0.30` → `0.50`, and a sky-blue ambient glow `0 0 30px rgba(14,165,233,0.10)` appears.
|
||||||
|
- **Buttons** brighten their gradient fill from `0.15/0.10` to `0.25/0.20` alpha, gain a `0 0 20px` brand-color glow, and lift `-1px`.
|
||||||
|
- **Text links** lighten from `#38BDF8` to `#7DD3FC` and the bottom border brightens to match.
|
||||||
|
- **Table rows** get a `rgba(0,217,255,0.06)` wash plus `0 2px 8px rgba(0,217,255,0.10)` sub-shadow.
|
||||||
|
- The audit notes a current anti-pattern: hover states implemented via `onMouseEnter` / `onMouseLeave` JS handlers. The design system standard is **CSS `:hover` pseudo-classes** — JS hover is a defect to migrate away from.
|
||||||
|
|
||||||
|
### Press / active states
|
||||||
|
- Button: shifts to `#0EA5E9` (slightly darker than hover), no shrink, no shadow change. Press is a colour signal, not a physics signal.
|
||||||
|
- Rows / interactive cards: `#475569` background on `:active`.
|
||||||
|
|
||||||
|
### Transparency & blur
|
||||||
|
- Modal backdrops: `rgba(10, 14, 39, 0.97)` with `backdrop-filter: blur(12px)`. The blur is heavy and the backdrop is near-opaque — modals fully obscure the background.
|
||||||
|
- Tooltips: gradient `linear-gradient(135deg, #334155, #475569)` with a sky-blue border and `0 4px 12px` + `0 0 16px rgba(14,165,233,0.15)` glow.
|
||||||
|
- Inputs: translucent `rgba(30,41,59,0.6)` background with `inset 0 2px 4px rgba(0,0,0,0.2)` for a subtle recessed feel.
|
||||||
|
|
||||||
|
### Inner / outer shadows
|
||||||
|
- **Both are used.** Cards combine outer drop + inner sky-blue highlight: `0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(14,165,233,0.10)`.
|
||||||
|
- **Inputs are recessed** — `inset 0 2px 4px rgba(0,0,0,0.2)` plus a `0 1px 0 rgba(255,255,255,0.03)` top sheen.
|
||||||
|
- **Document items** (within KB / vendor lists) use a stronger inset `inset 0 2px 4px rgba(0,0,0,0.3)` to read as nested / pressed-in.
|
||||||
|
- Modals lift on `0 20px 60px rgba(0,0,0,0.6) + 0 10px 30px rgba(14,165,233,0.10)` — heavier than most enterprise products, but the brand glow is the signature.
|
||||||
|
|
||||||
|
### Layout rules
|
||||||
|
- **Full-width fluid** above 1024px — the dashboard fills the viewport, with content max-width capping at ~1600px on very wide displays.
|
||||||
|
- **Top app bar is fixed** — height 56px, contains brand mark, page nav, and `UserMenu`. Sits above all content with `z-index: 50`.
|
||||||
|
- **Side nav drawer (NavDrawer)** slides from the left on icon click; it does *not* push content (overlay model).
|
||||||
|
- **Slide-out panels** (Atlas, Compliance Detail) come from the right, ~480px wide on desktop, full-width on narrow viewports.
|
||||||
|
- **Modals** are centered, max-width 640px (small) or 960px (wizard / upload), with the standard backdrop.
|
||||||
|
|
||||||
|
### Severity language
|
||||||
|
This is the most important visual rule in the product. Severity badges use the **`status-badge` pattern**:
|
||||||
|
- 2px solid border at `0.6` alpha
|
||||||
|
- Diagonal gradient fill at `0.20 / 0.15` alpha
|
||||||
|
- **Lighter text** for legibility — `#FCA5A5` (critical), `#FCD34D` (high), `#7DD3FC` (medium), `#6EE7B7` (low) — not the raw severity colour
|
||||||
|
- Text-shadow `0 0 8px` brand-color at `0.4` alpha
|
||||||
|
- 8px filled circle dot with a pulsing `box-shadow: 0 0 12px / 0 0 6px` glow on a 2s loop
|
||||||
|
- `0 4px 8px rgba(0,0,0,0.4)` outer shadow
|
||||||
|
- **Always JetBrains Mono, uppercase, 0.5px letter-spacing**
|
||||||
|
|
||||||
|
Secondary references can use simpler tinted pills (`rgba(brand,0.12)` background + brand text, no border, no glow). Single coloured dots `●` next to numeric scores are also valid. The colour-to-severity mapping is fixed across every component.
|
||||||
|
|
||||||
|
### Headings — the brand glow
|
||||||
|
Page titles and section headers are **JetBrains Mono, uppercase, sky-blue `#38BDF8`**, with `text-shadow: 0 0 16px rgba(14,165,233,0.30), 0 0 32px rgba(14,165,233,0.15)`. This is the most identifiable single signal in the product — every page header reads as a glowing terminal title. Outfit is reserved for body, helper, and table cell text. The Knowledge Base markdown viewer continues this language: `h1` sky-blue, `h2` emerald, `h3` amber — a deliberate severity-coloured hierarchy.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ICONOGRAPHY
|
||||||
|
|
||||||
|
The product uses **lucide-react** as its sole icon system. Lucide is a 1.5px-stroke, geometric, open-source icon set — clean, restrained, and perfectly aligned with the dark tactical aesthetic.
|
||||||
|
|
||||||
|
### Rules
|
||||||
|
- **All icons are line / stroke style** — never filled glyphs (with one exception: the calendar's red due-date dot is a filled circle, but it's a status indicator, not an icon).
|
||||||
|
- **Stroke width:** 1.5–2px (lucide default). 1.5px on small icons (≤16px), 2px on larger icons.
|
||||||
|
- **Sizes:** 14px (inline with text), 16px (default UI), 20px (nav items, prominent buttons), 24px (page-header icons).
|
||||||
|
- **Colour:** inherits `currentColor` — text-foreground for default, `#38BDF8` for active / accent, severity colours when used as a status indicator.
|
||||||
|
- **No emoji anywhere.** Status, severity, and category use icons + colour; never `🔴` or `⚠️`.
|
||||||
|
- **No unicode-as-icon shortcuts** beyond `●` (status dot), `↻` (revert / cycle), `↱` (redirect), `⊙` (filter handle), `→` (inline link), `+N` (count badge). These are part of the typography, not stand-ins for missing icons.
|
||||||
|
|
||||||
|
### Brand mark
|
||||||
|
The product has no published logo file in the repo (the audit references `AtlasIcon` as a custom SVG brand icon — Atlas appears to be the action-plan integration, not the dashboard's own brand). For this design system the brand mark is a **typographic stack**: `STEAM` in Outfit 700 with a sky-blue underline accent and a small shield glyph (lucide `Shield`) to the left. See `assets/logo.svg` and `assets/atlas-shield.svg`.
|
||||||
|
|
||||||
|
### Substitutions flagged
|
||||||
|
- **Atlas action-plan brand icon** is recreated as a generic shield (lucide `Shield`) tinted sky-blue. **If you have the real `AtlasIcon` SVG, please attach it** — the in-product version is custom and not available from the repo URL.
|
||||||
|
- Fonts (Outfit, JetBrains Mono) load from Google Fonts CDN. **If you need offline font files, attach the woff2s** and we'll bundle them into `fonts/`.
|
||||||
|
|
||||||
|
### Icons used per page (from README)
|
||||||
|
- **Home:** Calendar (CalendarWidget), Search, Filter, Plus, Upload, Edit, Trash, X (close)
|
||||||
|
- **Reporting:** RefreshCw (Sync), Eye / EyeOff (row visibility), Check, Filter (⊙ in column header), Columns, Download (Export), MoreHorizontal
|
||||||
|
- **Compliance:** Upload, AlertTriangle (drift breaking), AlertCircle (drift silent-miss), Info, ChevronRight, FileText
|
||||||
|
- **Knowledge Base:** FileText, FilePlus, Folder, Download, Eye
|
||||||
|
- **Admin:** Users, ScrollText (audit log), Activity (system info), Shield (admin badge)
|
||||||
|
- **Universal:** ChevronDown, ChevronUp, Check, X, Loader, ExternalLink
|
||||||
|
|
||||||
|
When picking an icon, prefer the lucide-react name from this list before introducing a new one.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## UI Kits
|
||||||
|
|
||||||
|
| Kit | Path | What it covers |
|
||||||
|
|---|---|---|
|
||||||
|
| `cve-dashboard` | `ui_kits/cve-dashboard/` | App shell (top bar, nav drawer, user menu), Knowledge Base page + viewer, primitives (Button, Badge, Pill, Input, Select, Modal shell, SlideOutPanel, DataTable, GroupBadge, SeverityBadge, EmptyState, LoadingState) |
|
||||||
|
|
||||||
|
The Knowledge Base page is the focused recreation. Other surfaces (Reporting, Compliance, Admin) are intentionally not built out — the primitives + shell are sufficient to compose them.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## How to use this system
|
||||||
|
|
||||||
|
1. **Tokens first.** Import `colors_and_type.css` into the root of any HTML file. All colour, type, radius, shadow, and spacing decisions should pull from these CSS custom properties.
|
||||||
|
2. **Pick a primitive before inventing.** Severity badges, group badges, status pills, table row, modal shell, slide-out panel — they all live in `ui_kits/cve-dashboard/`.
|
||||||
|
3. **Match the density.** When in doubt, tighter is more on-brand than airier.
|
||||||
|
4. **Lucide for icons.** Use the lucide-react CDN or copy individual SVGs from the lucide site. Do not draw your own.
|
||||||
|
5. **No emoji, no gradients, no illustration, no marketing copy.** The product is a console.
|
||||||
23
docs/design-system-redesign/SKILL.md
Normal file
23
docs/design-system-redesign/SKILL.md
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
---
|
||||||
|
name: steam-security-design
|
||||||
|
description: Use this skill to generate well-branded interfaces and assets for the STEAM Security Dashboard (NTS-AEO vulnerability management workbench), either for production or throwaway prototypes/mocks. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
|
||||||
|
user-invocable: true
|
||||||
|
---
|
||||||
|
|
||||||
|
Read the README.md file within this skill, and explore the other available files.
|
||||||
|
|
||||||
|
If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. Always pull tokens from `colors_and_type.css` and reuse the primitives in `ui_kits/cve-dashboard/Primitives.jsx` (Button, SeverityBadge, SlaPill, GroupBadge, Field/Input/Select, Card, EmptyState, Icon) before inventing.
|
||||||
|
|
||||||
|
If working on production code, copy assets and read the rules here to become an expert in designing with this brand.
|
||||||
|
|
||||||
|
If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.
|
||||||
|
|
||||||
|
## Quick reference
|
||||||
|
|
||||||
|
- **Visual vibe:** dark tactical intelligence console. Slate base, sky-blue accent, severity colours used like signal flags. Information density over breathing room.
|
||||||
|
- **Type:** Outfit (UI), JetBrains Mono (data, IDs, code).
|
||||||
|
- **No emoji, no gradients, no illustration, no marketing copy.** This is an operations tool, not a brand site.
|
||||||
|
- **Severity is fixed:** Critical→Red · High→Amber · Medium→Sky · Low→Emerald. Do not remap.
|
||||||
|
- **Icons:** lucide-react line style, 1.5–2px stroke, currentColor.
|
||||||
|
- **Six pages exist:** Home, Reporting, Compliance, Knowledge Base, Exports, Admin Panel.
|
||||||
|
- **Four user groups:** Admin, Standard_User, Leadership, Read_Only.
|
||||||
4
docs/design-system-redesign/assets/atlas-shield.svg
Normal file
4
docs/design-system-redesign/assets/atlas-shield.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
||||||
|
<path d="M16 4 L26 7 L26 16 C26 22 21.5 28 16 30 C10.5 28 6 22 6 16 L6 7 Z" stroke="#38BDF8" stroke-width="2" stroke-linejoin="round" fill="rgba(56,189,248,0.12)"></path>
|
||||||
|
<path d="M11 16 L15 20 L22 12" stroke="#38BDF8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 411 B |
9
docs/design-system-redesign/assets/logo.svg
Normal file
9
docs/design-system-redesign/assets/logo.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="40" viewBox="0 0 160 40" fill="none">
|
||||||
|
|
||||||
|
<path d="M14 6 L24 9 L24 18 C24 24 19.5 30 14 32 C8.5 30 4 24 4 18 L4 9 Z" stroke="#38BDF8" stroke-width="2" stroke-linejoin="round" fill="rgba(56,189,248,0.1)"></path>
|
||||||
|
<path d="M9 18 L13 22 L20 14" stroke="#38BDF8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
|
||||||
|
|
||||||
|
<text x="34" y="22" font-family="Outfit, sans-serif" font-weight="700" font-size="18" fill="#F1F5F9" letter-spacing="0.02em">STEAM</text>
|
||||||
|
<text x="34" y="34" font-family="Outfit, sans-serif" font-weight="500" font-size="10" fill="#94A3B8" letter-spacing="0.18em">SECURITY</text>
|
||||||
|
<line x1="34" y1="26" x2="92" y2="26" stroke="#38BDF8" stroke-width="1.5"></line>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 781 B |
1
docs/design-system-redesign/assets/severity-critical.svg
Normal file
1
docs/design-system-redesign/assets/severity-critical.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" fill="#EF4444"></circle></svg>
|
||||||
|
After Width: | Height: | Size: 153 B |
1
docs/design-system-redesign/assets/severity-high.svg
Normal file
1
docs/design-system-redesign/assets/severity-high.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" fill="#F59E0B"></circle></svg>
|
||||||
|
After Width: | Height: | Size: 153 B |
1
docs/design-system-redesign/assets/severity-low.svg
Normal file
1
docs/design-system-redesign/assets/severity-low.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" fill="#10B981"></circle></svg>
|
||||||
|
After Width: | Height: | Size: 153 B |
1
docs/design-system-redesign/assets/severity-medium.svg
Normal file
1
docs/design-system-redesign/assets/severity-medium.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" fill="#38BDF8"></circle></svg>
|
||||||
|
After Width: | Height: | Size: 153 B |
323
docs/design-system-redesign/colors_and_type.css
Normal file
323
docs/design-system-redesign/colors_and_type.css
Normal file
@@ -0,0 +1,323 @@
|
|||||||
|
/* ===================================================================
|
||||||
|
STEAM Security Dashboard — Design Tokens
|
||||||
|
Source of truth for color, type, spacing, radii, elevation, motion.
|
||||||
|
Mirrors the production frontend/src/App.css "tactical intelligence"
|
||||||
|
palette. Import in <head> of any HTML in this design system.
|
||||||
|
=================================================================== */
|
||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* ── Color · Surfaces (modern slate foundation) ─────────────── */
|
||||||
|
--intel-darkest: #0F172A; /* page background */
|
||||||
|
--intel-dark: #1E293B; /* card / panel surface */
|
||||||
|
--intel-medium: #334155; /* elevated surface, hover row */
|
||||||
|
--intel-light: #475569; /* muted border, disabled chip */
|
||||||
|
--intel-grid: rgba(14, 165, 233, 0.08); /* grid backdrop */
|
||||||
|
|
||||||
|
/* Aliases — friendlier names */
|
||||||
|
--bg-page: var(--intel-darkest);
|
||||||
|
--bg-surface: var(--intel-dark);
|
||||||
|
--bg-elevated: var(--intel-medium);
|
||||||
|
--bg-hover: var(--intel-light);
|
||||||
|
--bg-input: rgba(30, 41, 59, 0.6);
|
||||||
|
--bg-overlay: rgba(10, 14, 39, 0.97);
|
||||||
|
|
||||||
|
/* ── Color · Foreground ─────────────────────────────────────── */
|
||||||
|
--text-primary: #F8FAFC;
|
||||||
|
--text-secondary: #E2E8F0;
|
||||||
|
--text-tertiary: #CBD5E1;
|
||||||
|
--text-muted: #94A3B8;
|
||||||
|
--text-disabled: #64748B;
|
||||||
|
--text-faint: #475569;
|
||||||
|
--text-on-accent: #0F172A;
|
||||||
|
|
||||||
|
/* Aliases */
|
||||||
|
--fg-1: var(--text-primary);
|
||||||
|
--fg-2: var(--text-secondary);
|
||||||
|
--fg-muted: var(--text-muted);
|
||||||
|
--fg-disabled: var(--text-disabled);
|
||||||
|
|
||||||
|
/* ── Color · Borders ────────────────────────────────────────── */
|
||||||
|
--border-subtle: rgba(14, 165, 233, 0.15);
|
||||||
|
--border-default: rgba(14, 165, 233, 0.25);
|
||||||
|
--border-strong: rgba(14, 165, 233, 0.40);
|
||||||
|
--border-focus: #0EA5E9;
|
||||||
|
|
||||||
|
--border-1: var(--border-subtle);
|
||||||
|
--border-2: var(--border-default);
|
||||||
|
|
||||||
|
/* ── Color · Brand accent (sky blue — primary signal) ───────── */
|
||||||
|
--intel-accent: #0EA5E9; /* raw sky-500 */
|
||||||
|
--intel-accent-bright: #38BDF8; /* sky-400 — text on dark */
|
||||||
|
--intel-accent-soft: #7DD3FC; /* sky-300 */
|
||||||
|
--intel-accent-15: rgba(14, 165, 233, 0.15);
|
||||||
|
--intel-accent-08: rgba(14, 165, 233, 0.08);
|
||||||
|
|
||||||
|
--accent: var(--intel-accent);
|
||||||
|
--accent-bright: var(--intel-accent-bright);
|
||||||
|
--accent-soft: var(--intel-accent-soft);
|
||||||
|
--accent-wash: var(--intel-accent-08);
|
||||||
|
--accent-hover: #0284C7; /* sky-600 — pressed/hover for filled buttons */
|
||||||
|
--fg-on-accent: var(--text-on-accent);
|
||||||
|
--fg-3: var(--text-tertiary);
|
||||||
|
--fg-muted: var(--text-muted);
|
||||||
|
--fg-disabled: var(--text-disabled);
|
||||||
|
--border-3: var(--border-strong);
|
||||||
|
|
||||||
|
/* ── Color · Semantic / severity (FIXED — never remap) ──────── */
|
||||||
|
--intel-danger: #EF4444; /* Critical · Overdue · Delete */
|
||||||
|
--intel-warning: #F59E0B; /* High · At-Risk · Caution */
|
||||||
|
--intel-success: #10B981; /* Low · Within-SLA · OK */
|
||||||
|
--intel-info: #0EA5E9; /* Medium · Info · Standard */
|
||||||
|
|
||||||
|
--sev-critical: var(--intel-danger);
|
||||||
|
--sev-high: var(--intel-warning);
|
||||||
|
--sev-medium: var(--intel-info);
|
||||||
|
--sev-low: var(--intel-success);
|
||||||
|
|
||||||
|
/* Severity text-on-dark (lighter; better contrast) */
|
||||||
|
--sev-critical-text: #FCA5A5;
|
||||||
|
--sev-high-text: #FCD34D;
|
||||||
|
--sev-medium-text: #7DD3FC;
|
||||||
|
--sev-low-text: #6EE7B7;
|
||||||
|
|
||||||
|
/* Severity fills */
|
||||||
|
--sev-critical-bg: rgba(239, 68, 68, 0.20);
|
||||||
|
--sev-high-bg: rgba(245, 158, 11, 0.20);
|
||||||
|
--sev-medium-bg: rgba(14, 165, 233, 0.20);
|
||||||
|
--sev-low-bg: rgba(16, 185, 129, 0.20);
|
||||||
|
|
||||||
|
/* ── Color · Group badges ───────────────────────────────────── */
|
||||||
|
--group-admin: #EF4444;
|
||||||
|
--group-standard: #38BDF8;
|
||||||
|
--group-leadership: #F59E0B;
|
||||||
|
--group-readonly: #94A3B8;
|
||||||
|
|
||||||
|
/* ── Type · Families ────────────────────────────────────────── */
|
||||||
|
--font-ui: 'Outfit', system-ui, -apple-system, sans-serif;
|
||||||
|
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
||||||
|
|
||||||
|
/* In production EVERYTHING uses Outfit by default; mono is
|
||||||
|
reserved for badges, buttons, code, table data, and section
|
||||||
|
headers (which are also UPPERCASE, letter-spaced). */
|
||||||
|
|
||||||
|
/* ── Type · Scale ───────────────────────────────────────────── */
|
||||||
|
--fs-display: 28px;
|
||||||
|
--fs-h1: 24px;
|
||||||
|
--fs-h2: 18px;
|
||||||
|
--fs-h3: 16px;
|
||||||
|
--fs-body: 14px;
|
||||||
|
--fs-sm: 13px;
|
||||||
|
--fs-xs: 12px;
|
||||||
|
--fs-tiny: 11px;
|
||||||
|
|
||||||
|
--lh-tight: 1.2;
|
||||||
|
--lh-normal: 1.4;
|
||||||
|
--lh-loose: 1.6;
|
||||||
|
|
||||||
|
--fw-regular: 400;
|
||||||
|
--fw-medium: 500;
|
||||||
|
--fw-semibold: 600;
|
||||||
|
--fw-bold: 700;
|
||||||
|
|
||||||
|
--tracking-wide: 0.05em; /* mono buttons, badges */
|
||||||
|
--tracking-wider: 0.10em; /* uppercase headings */
|
||||||
|
|
||||||
|
/* ── Spacing (4-px grid) ────────────────────────────────────── */
|
||||||
|
--sp-1: 4px;
|
||||||
|
--sp-2: 8px;
|
||||||
|
--sp-3: 12px;
|
||||||
|
--sp-4: 16px;
|
||||||
|
--sp-5: 20px;
|
||||||
|
--sp-6: 24px;
|
||||||
|
--sp-8: 32px;
|
||||||
|
--sp-10: 40px;
|
||||||
|
--sp-12: 48px;
|
||||||
|
|
||||||
|
/* ── Radii ──────────────────────────────────────────────────── */
|
||||||
|
--r-xs: 3px;
|
||||||
|
--r-sm: 4px;
|
||||||
|
--r-md: 6px;
|
||||||
|
--r-lg: 8px;
|
||||||
|
--r-xl: 12px;
|
||||||
|
--r-pill: 999px;
|
||||||
|
|
||||||
|
/* ── Elevation (with sky-blue inner highlight) ──────────────── */
|
||||||
|
--shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||||
|
--shadow-card: 0 4px 12px rgba(0, 0, 0, 0.4),
|
||||||
|
0 2px 6px rgba(0, 0, 0, 0.3),
|
||||||
|
inset 0 1px 0 rgba(14, 165, 233, 0.10);
|
||||||
|
--shadow-card-hover: 0 8px 24px rgba(14, 165, 233, 0.15),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.4),
|
||||||
|
inset 0 1px 0 rgba(14, 165, 233, 0.20),
|
||||||
|
0 0 30px rgba(14, 165, 233, 0.10);
|
||||||
|
--shadow-popover: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||||
|
--shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6),
|
||||||
|
0 10px 30px rgba(14, 165, 233, 0.10);
|
||||||
|
--shadow-focus: 0 0 0 2px rgba(14, 165, 233, 0.15);
|
||||||
|
|
||||||
|
/* Severity glow (used by status badge dots) */
|
||||||
|
--glow-danger: 0 0 12px rgba(239, 68, 68, 0.6),
|
||||||
|
0 0 6px rgba(239, 68, 68, 0.4);
|
||||||
|
--glow-warning: 0 0 12px rgba(245, 158, 11, 0.6),
|
||||||
|
0 0 6px rgba(245, 158, 11, 0.4);
|
||||||
|
--glow-info: 0 0 12px rgba(14, 165, 233, 0.6),
|
||||||
|
0 0 6px rgba(14, 165, 233, 0.4);
|
||||||
|
--glow-success: 0 0 12px rgba(16, 185, 129, 0.6),
|
||||||
|
0 0 6px rgba(16, 185, 129, 0.4);
|
||||||
|
|
||||||
|
/* Heading text-shadow glow */
|
||||||
|
--glow-heading: 0 0 16px rgba(14, 165, 233, 0.30),
|
||||||
|
0 0 32px rgba(14, 165, 233, 0.15);
|
||||||
|
|
||||||
|
/* ── Motion ─────────────────────────────────────────────────── */
|
||||||
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
--dur-fast: 150ms;
|
||||||
|
--dur-med: 200ms;
|
||||||
|
--dur-slow: 300ms;
|
||||||
|
|
||||||
|
/* ── Layout ─────────────────────────────────────────────────── */
|
||||||
|
--topbar-h: 64px;
|
||||||
|
--drawer-w: 240px;
|
||||||
|
--panel-w: 480px;
|
||||||
|
--content-max: 1600px;
|
||||||
|
--z-topbar: 50;
|
||||||
|
--z-drawer: 60;
|
||||||
|
--z-modal: 100;
|
||||||
|
--z-tooltip: 120;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Base ─────────────────────────────────────────────────────── */
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
background-color: var(--bg-page);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
font-size: var(--fs-body);
|
||||||
|
line-height: var(--lh-normal);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
margin: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Faint grid backdrop — apply to <body> or hero containers */
|
||||||
|
.grid-bg {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(var(--intel-grid) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, var(--intel-grid) 1px, transparent 1px);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Semantic type ───────────────────────────────────────────── */
|
||||||
|
.t-display {
|
||||||
|
font: var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-mono);
|
||||||
|
color: var(--intel-accent-bright);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: var(--tracking-wider);
|
||||||
|
text-shadow: var(--glow-heading);
|
||||||
|
}
|
||||||
|
.t-h1 {
|
||||||
|
font: var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-mono);
|
||||||
|
color: var(--intel-accent-bright);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: var(--tracking-wider);
|
||||||
|
}
|
||||||
|
.t-h2 {
|
||||||
|
font: var(--fw-semibold) var(--fs-h2)/var(--lh-tight) var(--font-mono);
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
}
|
||||||
|
.t-h3 {
|
||||||
|
font: var(--fw-semibold) var(--fs-h3)/var(--lh-normal) var(--font-ui);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
.t-body {
|
||||||
|
font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-ui);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
.t-sm {
|
||||||
|
font: var(--fw-regular) var(--fs-sm)/var(--lh-normal) var(--font-ui);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
.t-meta {
|
||||||
|
font: var(--fw-regular) var(--fs-xs)/var(--lh-normal) var(--font-ui);
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
.t-label {
|
||||||
|
font: var(--fw-medium) var(--fs-xs)/var(--lh-normal) var(--font-mono);
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
}
|
||||||
|
.t-mono {
|
||||||
|
font: var(--fw-regular) var(--fs-sm)/var(--lh-normal) var(--font-mono);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
.t-mono-sm {
|
||||||
|
font: var(--fw-regular) var(--fs-xs)/var(--lh-normal) var(--font-mono);
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
.t-code {
|
||||||
|
font: var(--fw-medium) var(--fs-sm)/var(--lh-normal) var(--font-mono);
|
||||||
|
color: var(--intel-success);
|
||||||
|
background: var(--intel-darkest);
|
||||||
|
border: 1px solid var(--border-default);
|
||||||
|
padding: 1px 6px;
|
||||||
|
border-radius: var(--r-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Animations (used by status badges, scan lines) ──────────── */
|
||||||
|
@keyframes pulse-glow {
|
||||||
|
0%, 100% { box-shadow: 0 0 5px currentColor; }
|
||||||
|
50% { box-shadow: 0 0 15px currentColor; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scan {
|
||||||
|
0%, 100% { transform: translateY(-100%); opacity: 0; }
|
||||||
|
50% { transform: translateY(2000%); opacity: 0.5; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Focus ───────────────────────────────────────────────────── */
|
||||||
|
*:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--border-focus);
|
||||||
|
box-shadow: var(--shadow-focus);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Scrollbar ───────────────────────────────────────────────── */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--intel-dark);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(14, 165, 233, 0.3);
|
||||||
|
border-radius: var(--r-sm);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(14, 165, 233, 0.5);
|
||||||
|
}
|
||||||
10
docs/design-system-redesign/fonts/README.md
Normal file
10
docs/design-system-redesign/fonts/README.md
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
# Fonts
|
||||||
|
|
||||||
|
This system uses two Google Fonts loaded via CDN inside `colors_and_type.css`:
|
||||||
|
|
||||||
|
- **Outfit** (300/400/500/600/700/800) — UI font
|
||||||
|
- **JetBrains Mono** (400/500/600/700) — data, code, IDs
|
||||||
|
|
||||||
|
Both are imported at the top of `colors_and_type.css`. No local font files are bundled.
|
||||||
|
|
||||||
|
If you need offline assets, please attach the original `.woff2` files and we'll move them into this folder and switch the import to `@font-face` declarations.
|
||||||
26
docs/design-system-redesign/preview/_card.css
Normal file
26
docs/design-system-redesign/preview/_card.css
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
/* Shared preview card scaffold — used by every card in /preview */
|
||||||
|
@import url('../colors_and_type.css');
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: var(--bg-page);
|
||||||
|
color: var(--fg-1);
|
||||||
|
font-family: var(--font-ui);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 20px 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
||||||
|
.card-grid { display: grid; gap: 10px; }
|
||||||
|
.col { display: flex; flex-direction: column; gap: 6px; }
|
||||||
|
.spacer { flex: 1; }
|
||||||
47
docs/design-system-redesign/preview/brand-logo.html
Normal file
47
docs/design-system-redesign/preview/brand-logo.html
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Brand</title><link rel="stylesheet" href="_card.css"><style>
|
||||||
|
.brand {
|
||||||
|
display: flex; align-items: center; gap: 12px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(51,65,85,0.9) 100%);
|
||||||
|
border: 1px solid rgba(14,165,233,0.30);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.brand-mark {
|
||||||
|
width: 36px; height: 36px; border-radius: 8px;
|
||||||
|
background: rgba(14,165,233,0.10); border: 1px solid rgba(14,165,233,0.4);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
color: var(--intel-accent-bright);
|
||||||
|
box-shadow: inset 0 1px 0 rgba(14,165,233,0.2), 0 0 12px rgba(14,165,233,0.15);
|
||||||
|
}
|
||||||
|
.brand-name {
|
||||||
|
font: 700 16px/1 var(--font-mono);
|
||||||
|
color: var(--intel-accent-bright);
|
||||||
|
text-transform: uppercase; letter-spacing: 0.10em;
|
||||||
|
text-shadow: var(--glow-heading);
|
||||||
|
}
|
||||||
|
.brand-sub {
|
||||||
|
font: 400 11px/1 var(--font-mono);
|
||||||
|
color: var(--text-muted); margin-top: 4px;
|
||||||
|
}
|
||||||
|
</style></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="brand">
|
||||||
|
<div class="brand-mark">
|
||||||
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||||
|
stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="2" width="18" height="20" rx="3"/>
|
||||||
|
<circle cx="12" cy="11" r="5.5"/>
|
||||||
|
<line x1="6.5" y1="11" x2="17.5" y2="11"/>
|
||||||
|
<line x1="12" y1="5.5" x2="12" y2="16.5"/>
|
||||||
|
<path d="M9.5 5.8C8.6 7.3 8 9 8 11s0.6 3.7 1.5 5.2"/>
|
||||||
|
<path d="M14.5 5.8C15.4 7.3 16 9 16 11s-0.6 3.7-1.5 5.2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="brand-name">STEAM Security</div>
|
||||||
|
<div class="brand-sub">vulnerability management dashboard</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="t-meta">Atlas globe-badge mark + uppercase mono wordmark with sky-blue glow.</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
15
docs/design-system-redesign/preview/colors-accent.html
Normal file
15
docs/design-system-redesign/preview/colors-accent.html
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Accent</title><link rel="stylesheet" href="_card.css"></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-row" style="gap:0;border-radius:8px;overflow:hidden;height:80px">
|
||||||
|
<div style="flex:1;background:var(--accent);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-on-accent)">--accent</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-on-accent);opacity:.75;margin-top:3px">#38BDF8</div></div></div>
|
||||||
|
<div style="flex:1;background:var(--accent-hover);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-on-accent)">accent-hover</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-on-accent);opacity:.75;margin-top:3px">#7DD3FC</div></div></div>
|
||||||
|
<div style="flex:1;background:var(--accent-press);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-on-accent)">accent-press</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-on-accent);opacity:.75;margin-top:3px">#0EA5E9</div></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="card-row" style="gap:8px">
|
||||||
|
<button style="background:var(--accent);color:var(--fg-on-accent);border:none;padding:8px 16px;border-radius:6px;font:600 13px var(--font-ui);cursor:pointer">Sync</button>
|
||||||
|
<button style="background:var(--accent-hover);color:var(--fg-on-accent);border:none;padding:8px 16px;border-radius:6px;font:600 13px var(--font-ui)">:hover</button>
|
||||||
|
<button style="background:var(--accent-press);color:var(--fg-on-accent);border:none;padding:8px 16px;border-radius:6px;font:600 13px var(--font-ui)">:active</button>
|
||||||
|
<span class="t-meta">Sky-blue accent — primary action, link, focused state</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
10
docs/design-system-redesign/preview/colors-foreground.html
Normal file
10
docs/design-system-redesign/preview/colors-foreground.html
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Foreground</title><link rel="stylesheet" href="_card.css"></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="col" style="gap:8px">
|
||||||
|
<div class="card-row" style="gap:14px"><span style="display:inline-block;width:24px;height:24px;background:var(--fg-1);border-radius:4px"></span><span class="t-h3" style="color:var(--fg-1);width:120px">--fg-1</span><span class="t-mono-sm" style="color:var(--fg-muted)">#F1F5F9</span><span class="t-meta">Headings, primary text</span></div>
|
||||||
|
<div class="card-row" style="gap:14px"><span style="display:inline-block;width:24px;height:24px;background:var(--fg-2);border-radius:4px"></span><span class="t-h3" style="color:var(--fg-2);width:120px">--fg-2</span><span class="t-mono-sm" style="color:var(--fg-muted)">#CBD5E1</span><span class="t-meta">Body, secondary</span></div>
|
||||||
|
<div class="card-row" style="gap:14px"><span style="display:inline-block;width:24px;height:24px;background:var(--fg-muted);border-radius:4px"></span><span class="t-h3" style="color:var(--fg-muted);width:120px">--fg-muted</span><span class="t-mono-sm" style="color:var(--fg-muted)">#94A3B8</span><span class="t-meta">Meta, captions, helper</span></div>
|
||||||
|
<div class="card-row" style="gap:14px"><span style="display:inline-block;width:24px;height:24px;background:var(--fg-disabled);border-radius:4px"></span><span class="t-h3" style="color:var(--fg-disabled);width:120px">--fg-disabled</span><span class="t-mono-sm" style="color:var(--fg-muted)">#64748B</span><span class="t-meta">Placeholder, disabled</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
54
docs/design-system-redesign/preview/colors-severity.html
Normal file
54
docs/design-system-redesign/preview/colors-severity.html
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Severity</title><link rel="stylesheet" href="_card.css"><style>
|
||||||
|
.sev-badge {
|
||||||
|
display: inline-flex; align-items: center; gap: 8px;
|
||||||
|
padding: 6px 14px; border-radius: 6px;
|
||||||
|
font: 700 12px/1 var(--font-mono);
|
||||||
|
letter-spacing: 0.5px; text-transform: uppercase;
|
||||||
|
border: 2px solid;
|
||||||
|
box-shadow: 0 4px 8px rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
.sev-badge::before {
|
||||||
|
content: ''; width: 8px; height: 8px; border-radius: 50%;
|
||||||
|
animation: pulse-glow 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sev-critical {
|
||||||
|
background: linear-gradient(135deg, rgba(239,68,68,0.20) 0%, rgba(239,68,68,0.15) 100%);
|
||||||
|
border-color: rgba(239,68,68,0.6); color: var(--sev-critical-text);
|
||||||
|
text-shadow: 0 0 8px rgba(239,68,68,0.4);
|
||||||
|
}
|
||||||
|
.sev-critical::before { background: var(--sev-critical); box-shadow: var(--glow-danger); }
|
||||||
|
.sev-high {
|
||||||
|
background: linear-gradient(135deg, rgba(245,158,11,0.20) 0%, rgba(245,158,11,0.15) 100%);
|
||||||
|
border-color: rgba(245,158,11,0.6); color: var(--sev-high-text);
|
||||||
|
text-shadow: 0 0 8px rgba(245,158,11,0.4);
|
||||||
|
}
|
||||||
|
.sev-high::before { background: var(--sev-high); box-shadow: var(--glow-warning); }
|
||||||
|
.sev-med {
|
||||||
|
background: linear-gradient(135deg, rgba(14,165,233,0.20) 0%, rgba(14,165,233,0.15) 100%);
|
||||||
|
border-color: rgba(14,165,233,0.6); color: var(--sev-medium-text);
|
||||||
|
text-shadow: 0 0 8px rgba(14,165,233,0.4);
|
||||||
|
}
|
||||||
|
.sev-med::before { background: var(--sev-medium); box-shadow: var(--glow-info); }
|
||||||
|
.sev-low {
|
||||||
|
background: linear-gradient(135deg, rgba(16,185,129,0.20) 0%, rgba(16,185,129,0.15) 100%);
|
||||||
|
border-color: rgba(16,185,129,0.6); color: var(--sev-low-text);
|
||||||
|
text-shadow: 0 0 8px rgba(16,185,129,0.4);
|
||||||
|
}
|
||||||
|
.sev-low::before { background: var(--sev-low); box-shadow: var(--glow-success); }
|
||||||
|
</style></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-row" style="gap:10px">
|
||||||
|
<span class="sev-badge sev-critical">CRITICAL</span>
|
||||||
|
<span class="sev-badge sev-high">HIGH</span>
|
||||||
|
<span class="sev-badge sev-med">MEDIUM</span>
|
||||||
|
<span class="sev-badge sev-low">LOW</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-row" style="gap:14px;font:400 12px var(--font-mono);color:var(--fg-muted)">
|
||||||
|
<span><span style="color:var(--sev-critical)">●</span> #EF4444</span>
|
||||||
|
<span><span style="color:var(--sev-high)">●</span> #F59E0B</span>
|
||||||
|
<span><span style="color:var(--sev-medium)">●</span> #0EA5E9</span>
|
||||||
|
<span><span style="color:var(--sev-low)">●</span> #10B981</span>
|
||||||
|
</div>
|
||||||
|
<div class="t-meta">Pulsing dots + gradient fills + glow text-shadow. Mono uppercase, never remap.</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
17
docs/design-system-redesign/preview/colors-status.html
Normal file
17
docs/design-system-redesign/preview/colors-status.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>SLA & Status</title><link rel="stylesheet" href="_card.css"></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="t-label">SLA states</div>
|
||||||
|
<div class="card-row" style="gap:8px">
|
||||||
|
<span style="padding:4px 10px;border-radius:999px;background:var(--sev-critical-bg);color:var(--sev-critical);font:700 11px var(--font-mono);letter-spacing:.05em">OVERDUE</span>
|
||||||
|
<span style="padding:4px 10px;border-radius:999px;background:var(--sev-high-bg);color:var(--sev-high);font:700 11px var(--font-mono);letter-spacing:.05em">AT_RISK</span>
|
||||||
|
<span style="padding:4px 10px;border-radius:999px;background:var(--sev-low-bg);color:var(--sev-low);font:700 11px var(--font-mono);letter-spacing:.05em">WITHIN_SLA</span>
|
||||||
|
</div>
|
||||||
|
<div class="t-label">Status</div>
|
||||||
|
<div class="card-row" style="gap:8px">
|
||||||
|
<span style="padding:4px 10px;border-radius:4px;background:rgba(56,189,248,0.12);color:var(--accent);font:500 12px var(--font-ui)">Open</span>
|
||||||
|
<span style="padding:4px 10px;border-radius:4px;background:rgba(245,158,11,0.12);color:var(--sev-high);font:500 12px var(--font-ui)">In Progress</span>
|
||||||
|
<span style="padding:4px 10px;border-radius:4px;background:rgba(148,163,184,0.12);color:var(--fg-muted);font:500 12px var(--font-ui)">Addressed</span>
|
||||||
|
<span style="padding:4px 10px;border-radius:4px;background:rgba(16,185,129,0.12);color:var(--sev-low);font:500 12px var(--font-ui)">Resolved</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
11
docs/design-system-redesign/preview/colors-surfaces.html
Normal file
11
docs/design-system-redesign/preview/colors-surfaces.html
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Surface palette</title><link rel="stylesheet" href="_card.css"></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-row" style="gap:0;border:1px solid var(--border-1);border-radius:8px;overflow:hidden;height:100px">
|
||||||
|
<div style="flex:1;background:var(--bg-page);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-1)">--bg-page</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-muted);margin-top:3px">#0F172A</div></div></div>
|
||||||
|
<div style="flex:1;background:var(--bg-surface);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-1)">--bg-surface</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-muted);margin-top:3px">#1E293B</div></div></div>
|
||||||
|
<div style="flex:1;background:var(--bg-elevated);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-1)">--bg-elevated</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-muted);margin-top:3px">#334155</div></div></div>
|
||||||
|
<div style="flex:1;background:var(--bg-hover);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-1)">--bg-hover</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-muted);margin-top:3px">#475569</div></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="t-meta">Page → surface → elevated → hover. Each step lifts ≈ one slate stop.</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
40
docs/design-system-redesign/preview/components-buttons.html
Normal file
40
docs/design-system-redesign/preview/components-buttons.html
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Buttons</title><link rel="stylesheet" href="_card.css"><style>
|
||||||
|
.intel-btn {
|
||||||
|
position: relative; overflow: hidden;
|
||||||
|
font: 600 13px/1 var(--font-mono);
|
||||||
|
letter-spacing: 0.5px; text-transform: uppercase;
|
||||||
|
padding: 10px 20px; border-radius: 6px;
|
||||||
|
border: 1px solid; cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(135deg, rgba(14,165,233,0.15) 0%, rgba(14,165,233,0.10) 100%);
|
||||||
|
border-color: var(--intel-accent); color: var(--intel-accent-bright);
|
||||||
|
text-shadow: 0 0 6px rgba(14,165,233,0.2);
|
||||||
|
}
|
||||||
|
.btn-danger {
|
||||||
|
background: linear-gradient(135deg, rgba(239,68,68,0.15) 0%, rgba(239,68,68,0.10) 100%);
|
||||||
|
border-color: var(--intel-danger); color: #F87171;
|
||||||
|
text-shadow: 0 0 6px rgba(239,68,68,0.2);
|
||||||
|
}
|
||||||
|
.btn-success {
|
||||||
|
background: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(16,185,129,0.10) 100%);
|
||||||
|
border-color: var(--intel-success); color: #34D399;
|
||||||
|
text-shadow: 0 0 6px rgba(16,185,129,0.2);
|
||||||
|
}
|
||||||
|
.btn-ghost {
|
||||||
|
background: transparent; border-color: var(--border-default);
|
||||||
|
color: var(--text-muted); text-shadow: none;
|
||||||
|
}
|
||||||
|
</style></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-row" style="gap:10px">
|
||||||
|
<button class="intel-btn btn-primary">Sync</button>
|
||||||
|
<button class="intel-btn btn-success">Approve FP</button>
|
||||||
|
<button class="intel-btn btn-danger">Delete</button>
|
||||||
|
<button class="intel-btn btn-ghost">Cancel</button>
|
||||||
|
</div>
|
||||||
|
<div class="t-meta">Mono · uppercase · gradient fills · 1px brand-color border · soft text-glow.</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
43
docs/design-system-redesign/preview/components-groups.html
Normal file
43
docs/design-system-redesign/preview/components-groups.html
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Stat cards</title><link rel="stylesheet" href="_card.css"><style>
|
||||||
|
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
||||||
|
.stat-card {
|
||||||
|
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(51,65,85,0.9) 100%);
|
||||||
|
border: 1.5px solid rgba(14,165,233,0.35);
|
||||||
|
border-radius: 8px; padding: 14px 16px;
|
||||||
|
position: relative; overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
}
|
||||||
|
.stat-card::before {
|
||||||
|
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
|
||||||
|
background: linear-gradient(90deg, transparent, var(--intel-accent), transparent);
|
||||||
|
opacity: 0.8; box-shadow: 0 0 8px rgba(14,165,233,0.5);
|
||||||
|
}
|
||||||
|
.stat-label {
|
||||||
|
font: 500 11px/1 var(--font-mono); letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.stat-val { font: 700 24px/1 var(--font-mono); color: var(--text-primary); }
|
||||||
|
.stat-delta-up { color: var(--intel-success); font: 500 11px var(--font-mono); }
|
||||||
|
.stat-delta-down { color: var(--intel-danger); font: 500 11px var(--font-mono); }
|
||||||
|
</style></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="stat-grid">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-label">Open Findings</div>
|
||||||
|
<div class="stat-val">1,247</div>
|
||||||
|
<div class="stat-delta-up">↑ 12 vs last sync</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-label">FP Pending</div>
|
||||||
|
<div class="stat-val">38</div>
|
||||||
|
<div class="stat-delta-down">↓ 4 today</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-label">Compliance %</div>
|
||||||
|
<div class="stat-val">94.2</div>
|
||||||
|
<div class="stat-delta-up">↑ 0.8% wk</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="t-meta">Top accent rail · gradient surface · sky inner highlight · 4-px lift on hover.</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
19
docs/design-system-redesign/preview/components-inputs.html
Normal file
19
docs/design-system-redesign/preview/components-inputs.html
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Inputs</title><link rel="stylesheet" href="_card.css"><style>
|
||||||
|
.field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:160px}
|
||||||
|
.field label{font:500 11px var(--font-ui);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em}
|
||||||
|
.field input,.field select{background:var(--bg-input);color:var(--fg-1);border:1px solid var(--border-1);border-radius:6px;padding:8px 10px;font:400 13px var(--font-ui);outline:none}
|
||||||
|
.field input:focus,.field select:focus{border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
|
||||||
|
.field input::placeholder{color:var(--fg-disabled)}
|
||||||
|
</style></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-row" style="gap:14px;align-items:flex-start">
|
||||||
|
<div class="field"><label>Search</label><input placeholder="CVE-2024-…" /></div>
|
||||||
|
<div class="field"><label>Vendor</label><select><option>All vendors</option><option>Cisco</option><option>Juniper</option></select></div>
|
||||||
|
<div class="field"><label>Severity</label><select><option>All</option><option>Critical</option><option>High</option></select></div>
|
||||||
|
</div>
|
||||||
|
<div class="card-row" style="gap:14px">
|
||||||
|
<div class="field" style="max-width:240px"><label>Focused</label><input value="EXC-30482" style="border-color:var(--border-focus);box-shadow:var(--shadow-focus)" /></div>
|
||||||
|
<div class="field" style="max-width:240px"><label>Disabled</label><input value="read only" disabled style="opacity:.5" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
22
docs/design-system-redesign/preview/components-table.html
Normal file
22
docs/design-system-redesign/preview/components-table.html
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Table</title><link rel="stylesheet" href="_card.css"><style>
|
||||||
|
table{width:100%;border-collapse:separate;border-spacing:0;font:400 12px var(--font-ui)}
|
||||||
|
th{font:500 10px var(--font-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted);text-align:left;padding:8px 10px;background:var(--bg-surface);border-bottom:1px solid var(--border-1)}
|
||||||
|
td{padding:9px 10px;border-bottom:1px solid var(--border-1);color:var(--fg-2)}
|
||||||
|
tr:last-child td{border-bottom:none}
|
||||||
|
tr.hover td{background:var(--accent-wash)}
|
||||||
|
.mono{font-family:var(--font-mono)}
|
||||||
|
.sev{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
|
||||||
|
</style></head><body>
|
||||||
|
<div class="card" style="padding:0">
|
||||||
|
<div style="border:1px solid var(--border-1);border-radius:8px;overflow:hidden;height:100%">
|
||||||
|
<table>
|
||||||
|
<thead><tr><th>Severity</th><th>CVE</th><th>Host</th><th>Due</th><th>SLA</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td><span class="sev" style="background:var(--sev-critical)"></span><span class="mono" style="color:var(--fg-1)">9.8</span></td><td class="mono" style="color:var(--fg-1)">CVE-2024-21412</td><td class="mono">bdc-edge-fw01</td><td class="mono" style="color:var(--sev-critical)">Apr 21</td><td><span style="font:700 10px var(--font-mono);color:var(--sev-critical);background:var(--sev-critical-bg);padding:2px 8px;border-radius:999px">OVERDUE</span></td></tr>
|
||||||
|
<tr class="hover"><td><span class="sev" style="background:var(--sev-high)"></span><span class="mono" style="color:var(--fg-1)">8.9</span></td><td class="mono" style="color:var(--fg-1)">CVE-2024-3661</td><td class="mono">bdc-core-rtr03</td><td class="mono" style="color:var(--sev-high)">May 06</td><td><span style="font:700 10px var(--font-mono);color:var(--sev-high);background:var(--sev-high-bg);padding:2px 8px;border-radius:999px">AT_RISK</span></td></tr>
|
||||||
|
<tr><td><span class="sev" style="background:var(--sev-medium)"></span><span class="mono" style="color:var(--fg-1)">8.6</span></td><td class="mono" style="color:var(--fg-1)">CVE-2023-46604</td><td class="mono">bdc-mq-broker</td><td class="mono">Jun 14</td><td><span style="font:700 10px var(--font-mono);color:var(--sev-low);background:var(--sev-low-bg);padding:2px 8px;border-radius:999px">WITHIN_SLA</span></td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
21
docs/design-system-redesign/preview/components-workflow.html
Normal file
21
docs/design-system-redesign/preview/components-workflow.html
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Workflow badges</title><link rel="stylesheet" href="_card.css"><style>
|
||||||
|
.wf{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:4px;font:600 11px var(--font-mono);letter-spacing:.04em}
|
||||||
|
</style></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="t-label">FP workflow states</div>
|
||||||
|
<div class="card-row" style="gap:8px">
|
||||||
|
<span class="wf" style="background:var(--sev-medium-bg);color:var(--sev-medium)">Actionable</span>
|
||||||
|
<span class="wf" style="background:var(--sev-high-bg);color:var(--sev-high)">Requested</span>
|
||||||
|
<span class="wf" style="background:rgba(148,163,184,0.16);color:var(--fg-muted)">Reworked</span>
|
||||||
|
<span class="wf" style="background:var(--sev-low-bg);color:var(--sev-low)">Approved</span>
|
||||||
|
<span class="wf" style="background:var(--sev-critical-bg);color:var(--sev-critical)">Rejected</span>
|
||||||
|
<span class="wf" style="background:var(--sev-critical-bg);color:var(--sev-critical)">Expired</span>
|
||||||
|
</div>
|
||||||
|
<div class="t-label">Queue type tags</div>
|
||||||
|
<div class="card-row" style="gap:8px">
|
||||||
|
<span class="wf" style="background:var(--sev-high-bg);color:var(--sev-high)">FP</span>
|
||||||
|
<span class="wf" style="background:var(--sev-medium-bg);color:var(--sev-medium)">ARCHER</span>
|
||||||
|
<span class="wf" style="background:var(--sev-low-bg);color:var(--sev-low)">CARD</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
11
docs/design-system-redesign/preview/elevation.html
Normal file
11
docs/design-system-redesign/preview/elevation.html
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Elevation</title><link rel="stylesheet" href="_card.css"></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-row" style="gap:18px">
|
||||||
|
<div style="text-align:center"><div style="width:90px;height:60px;background:var(--bg-surface);border:1px solid var(--border-1);border-radius:8px;box-shadow:var(--shadow-rest)"></div><div class="t-mono-sm" style="margin-top:8px">rest</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:90px;height:60px;background:var(--bg-surface);border:1px solid var(--border-1);border-radius:8px;box-shadow:var(--shadow-popover)"></div><div class="t-mono-sm" style="margin-top:8px">popover</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:90px;height:60px;background:var(--bg-surface);border:1px solid var(--border-1);border-radius:12px;box-shadow:var(--shadow-modal)"></div><div class="t-mono-sm" style="margin-top:8px">modal</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:90px;height:60px;background:var(--bg-surface);border:1px solid var(--border-focus);border-radius:8px;box-shadow:var(--shadow-focus)"></div><div class="t-mono-sm" style="margin-top:8px">focus</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="t-meta">Outer shadows only. No insets. Shadows visible but never dramatic on dark.</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
21
docs/design-system-redesign/preview/iconography.html
Normal file
21
docs/design-system-redesign/preview/iconography.html
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Iconography</title><link rel="stylesheet" href="_card.css"><style>
|
||||||
|
.ic{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--fg-2);width:64px}
|
||||||
|
.ic svg{stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
|
||||||
|
.ic .lbl{font:400 10px var(--font-mono);color:var(--fg-muted)}
|
||||||
|
</style></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="t-label">Lucide line icons · 1.5–2px stroke · currentColor</div>
|
||||||
|
<div class="card-row" style="gap:8px;justify-content:flex-start">
|
||||||
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg><div class="lbl">shield</div></div>
|
||||||
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><div class="lbl">search</div></div>
|
||||||
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg><div class="lbl">filter</div></div>
|
||||||
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg><div class="lbl">sync</div></div>
|
||||||
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg><div class="lbl">download</div></div>
|
||||||
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg><div class="lbl">upload</div></div>
|
||||||
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg><div class="lbl">eye</div></div>
|
||||||
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg><div class="lbl">calendar</div></div>
|
||||||
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg><div class="lbl">file</div></div>
|
||||||
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg><div class="lbl">alert</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
13
docs/design-system-redesign/preview/radii.html
Normal file
13
docs/design-system-redesign/preview/radii.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Radii</title><link rel="stylesheet" href="_card.css"></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-row" style="gap:14px">
|
||||||
|
<div style="text-align:center"><div style="width:56px;height:56px;background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:3px"></div><div class="t-mono-sm" style="margin-top:6px">3 · xs</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:56px;height:56px;background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:4px"></div><div class="t-mono-sm" style="margin-top:6px">4 · sm</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:56px;height:56px;background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:6px"></div><div class="t-mono-sm" style="margin-top:6px">6 · md</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:56px;height:56px;background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:8px"></div><div class="t-mono-sm" style="margin-top:6px">8 · lg</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:56px;height:56px;background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:12px"></div><div class="t-mono-sm" style="margin-top:6px">12 · xl</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:84px;height:32px;background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:999px;margin-top:12px"></div><div class="t-mono-sm" style="margin-top:6px">pill</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="t-meta">Chips 4 · button/input 6 · cards 8 · modals 12 · pills for badges and toggles.</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
17
docs/design-system-redesign/preview/spacing.html
Normal file
17
docs/design-system-redesign/preview/spacing.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Spacing</title><link rel="stylesheet" href="_card.css"></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="t-label">4px grid · sp-1 → sp-12</div>
|
||||||
|
<div class="card-row" style="align-items:flex-end;gap:10px">
|
||||||
|
<div style="text-align:center"><div style="width:4px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">4</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:8px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">8</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:12px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">12</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:16px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">16</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:20px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">20</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:24px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">24</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:32px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">32</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:40px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">40</div></div>
|
||||||
|
<div style="text-align:center"><div style="width:48px;height:24px;background:var(--accent)"></div><div class="t-mono-sm" style="margin-top:6px">48</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="t-meta">Card padding 16–20 · row vertical 8–10 · section gap 24–32 · modal padding 24.</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
12
docs/design-system-redesign/preview/type-mono.html
Normal file
12
docs/design-system-redesign/preview/type-mono.html
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Type · mono</title><link rel="stylesheet" href="_card.css"></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="col" style="gap:8px">
|
||||||
|
<div class="t-label">JetBrains Mono · used for data</div>
|
||||||
|
<div style="font:500 16px var(--font-mono);color:var(--fg-1)">CVE-2024-21412</div>
|
||||||
|
<div style="font:400 14px var(--font-mono);color:var(--fg-2)">10.42.18.137 · bdc-edge-fw01.steam.local</div>
|
||||||
|
<div style="font:400 13px var(--font-mono);color:var(--fg-2)">EXC-30482 FP#9821 finding-id 5048124</div>
|
||||||
|
<div style="font:400 12px var(--font-mono);color:var(--fg-muted)">VRR 9.4 · 2026-04-29 · WITHIN_SLA</div>
|
||||||
|
<div style="font:600 13px var(--font-mono);color:var(--fg-1);background:var(--bg-elevated);padding:6px 10px;border-radius:4px;display:inline-block;align-self:flex-start">openssl rand -base64 32</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
12
docs/design-system-redesign/preview/type-ui.html
Normal file
12
docs/design-system-redesign/preview/type-ui.html
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html><html><head><meta charset="utf-8"><title>Type · UI font</title><link rel="stylesheet" href="_card.css"></head><body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="col" style="gap:6px">
|
||||||
|
<div style="display:flex;align-items:baseline;gap:14px"><span class="t-display">Outfit Display 28</span><span class="t-mono-sm">700 / 1.2 / -0.01em</span></div>
|
||||||
|
<div style="display:flex;align-items:baseline;gap:14px"><span class="t-h1">Page title 24</span><span class="t-mono-sm">600 / 1.2</span></div>
|
||||||
|
<div style="display:flex;align-items:baseline;gap:14px"><span class="t-h2">Section header 18</span><span class="t-mono-sm">600 / 1.2</span></div>
|
||||||
|
<div style="display:flex;align-items:baseline;gap:14px"><span class="t-h3">Card title 16</span><span class="t-mono-sm">600 / 1.4</span></div>
|
||||||
|
<div style="display:flex;align-items:baseline;gap:14px"><span class="t-body">Body 14 — searchable filterable list</span><span class="t-mono-sm">400 / 1.4</span></div>
|
||||||
|
<div style="display:flex;align-items:baseline;gap:14px"><span class="t-meta">Meta 12 — last sync 4h ago</span><span class="t-mono-sm">400 / 1.4</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
@@ -0,0 +1,618 @@
|
|||||||
|
// CompPrimitives.jsx — primitives for the Compliance page kit.
|
||||||
|
// Lifted directly from frontend/src/components/pages/CompliancePage.js.
|
||||||
|
// Identity color is teal (#14B8A6); status colors map green/amber/red onto
|
||||||
|
// "Meets/Exceeds Target", "Within 15% of Target", and "Below 15% of Target".
|
||||||
|
|
||||||
|
const { useState: useCompState, useRef: useCompRef } = React;
|
||||||
|
|
||||||
|
/* ── Tokens ──────────────────────────────────────────────────────
|
||||||
|
Two layers:
|
||||||
|
• Status — drives every percentage display + the worst-status
|
||||||
|
ribbon on metric cards. Always one of three.
|
||||||
|
• Category — owns the colored MetricBadge that flags which
|
||||||
|
program a failing metric belongs to. */
|
||||||
|
const C_COLORS = {
|
||||||
|
teal: '#14B8A6',
|
||||||
|
tealMid: '#5EEAD4',
|
||||||
|
green: '#10B981',
|
||||||
|
amber: '#F59E0B',
|
||||||
|
red: '#EF4444',
|
||||||
|
sky: '#0EA5E9',
|
||||||
|
purple: '#8B5CF6',
|
||||||
|
orange: '#F97316',
|
||||||
|
slate: '#64748B',
|
||||||
|
};
|
||||||
|
|
||||||
|
const STATUS_COLOR = {
|
||||||
|
'Meets/Exceeds Target': C_COLORS.green,
|
||||||
|
'Within 15% of Target': C_COLORS.amber,
|
||||||
|
'Below 15% of Target': C_COLORS.red,
|
||||||
|
};
|
||||||
|
|
||||||
|
const CATEGORY_COLORS = {
|
||||||
|
'Vulnerability Management': C_COLORS.red,
|
||||||
|
'Access & MFA': C_COLORS.amber,
|
||||||
|
'Logging & Monitoring': C_COLORS.purple,
|
||||||
|
'End-of-Life OS': C_COLORS.orange,
|
||||||
|
'Decommissioned Assets': C_COLORS.slate,
|
||||||
|
'Asset Data Quality': C_COLORS.slate,
|
||||||
|
'Application Security': C_COLORS.sky,
|
||||||
|
'Disaster Recovery': C_COLORS.teal,
|
||||||
|
'Endpoint Protection': C_COLORS.orange,
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusColor = s => STATUS_COLOR[s] || C_COLORS.red;
|
||||||
|
const pctDisplay = p => `${Math.round(p * 100)}%`;
|
||||||
|
const cAlpha = (hex, a) => {
|
||||||
|
const h = hex.replace('#', '');
|
||||||
|
return `rgba(${parseInt(h.slice(0,2),16)},${parseInt(h.slice(2,4),16)},${parseInt(h.slice(4,6),16)},${a})`;
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ── PageHeader ──────────────────────────────────────────────────
|
||||||
|
AEO Compliance — title in teal w/ glow, last-report meta beneath,
|
||||||
|
refresh + upload-report on the right. Mirrors the KB / Reporting
|
||||||
|
header pattern but with teal instead of green. */
|
||||||
|
function CompPageHeader({ title = 'AEO Compliance', lastReport, networkScore, verticalScore, onRefresh, onUpload, onRollback, isAdmin }) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24, gap: 16 }}>
|
||||||
|
<div>
|
||||||
|
<h2 style={{
|
||||||
|
margin: '0 0 6px 0',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 24, fontWeight: 700,
|
||||||
|
color: C_COLORS.teal, textTransform: 'uppercase', letterSpacing: '0.1em',
|
||||||
|
textShadow: `0 0 16px ${cAlpha(C_COLORS.teal, 0.4)}`,
|
||||||
|
}}>{title}</h2>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', fontFamily: 'var(--font-mono)', fontSize: 11 }}>
|
||||||
|
{lastReport ? (
|
||||||
|
<>
|
||||||
|
<span style={{ color: 'var(--fg-disabled)' }}>
|
||||||
|
Last report: <span style={{ color: 'var(--fg-2)' }}>{lastReport}</span>
|
||||||
|
</span>
|
||||||
|
{isAdmin && (
|
||||||
|
<button onClick={onRollback} style={{
|
||||||
|
background: 'transparent', border: '1px solid rgba(239,68,68,0.25)',
|
||||||
|
borderRadius: 4, padding: '2px 6px', cursor: 'pointer',
|
||||||
|
color: 'var(--fg-2)', display: 'inline-flex', alignItems: 'center', gap: 4,
|
||||||
|
fontSize: 10, fontFamily: 'var(--font-mono)',
|
||||||
|
}}>
|
||||||
|
<CompIcon name="rotate" size={10} color="currentColor" /> Rollback
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<span style={{ color: 'var(--fg-disabled)' }}>No reports uploaded</span>
|
||||||
|
)}
|
||||||
|
{networkScore != null && (
|
||||||
|
<span style={{ color: 'var(--fg-2)' }}>Network: <span style={{ color: C_COLORS.teal }}>{networkScore}</span></span>
|
||||||
|
)}
|
||||||
|
{verticalScore != null && (
|
||||||
|
<span style={{ color: 'var(--fg-2)' }}>Vertical: <span style={{ color: C_COLORS.teal }}>{verticalScore}</span></span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
|
||||||
|
<CompIconButton icon="refresh" onClick={onRefresh} />
|
||||||
|
<CompButton variant="primary" icon="upload" onClick={onUpload}>Upload Report</CompButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Buttons ───────────────────────────────────────────────────── */
|
||||||
|
function CompButton({ variant = 'neutral', icon, size = 'md', children, ...rest }) {
|
||||||
|
const [hover, setHover] = useCompState(false);
|
||||||
|
const v = {
|
||||||
|
primary: { bg: hover ? cAlpha(C_COLORS.teal, 0.28) : cAlpha(C_COLORS.teal, 0.18), bd: C_COLORS.teal, fg: C_COLORS.teal },
|
||||||
|
neutral: { bg: hover ? cAlpha(C_COLORS.teal, 0.10) : 'transparent', bd: cAlpha(C_COLORS.teal, 0.30), fg: C_COLORS.teal },
|
||||||
|
danger: { bg: hover ? 'rgba(239,68,68,0.18)' : 'rgba(239,68,68,0.10)', bd: C_COLORS.red, fg: C_COLORS.red },
|
||||||
|
ghost: { bg: hover ? 'rgba(255,255,255,0.04)' : 'transparent', bd: 'rgba(100,116,139,0.40)', fg: 'var(--fg-2)' },
|
||||||
|
}[variant];
|
||||||
|
const padX = size === 'sm' ? 10 : 16;
|
||||||
|
const padY = size === 'sm' ? 4 : 8;
|
||||||
|
const fs = size === 'sm' ? 11 : 12;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||||||
|
style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||||
|
padding: `${padY}px ${padX}px`, borderRadius: 6,
|
||||||
|
background: v.bg, border: `1px solid ${v.bd}`, color: v.fg,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: fs, fontWeight: 600,
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||||||
|
cursor: 'pointer', transition: 'all 160ms ease', whiteSpace: 'nowrap',
|
||||||
|
}}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
{icon && <CompIcon name={icon} size={fs + 2} color={v.fg} />}
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CompIconButton({ icon, onClick, color = C_COLORS.teal }) {
|
||||||
|
const [hover, setHover] = useCompState(false);
|
||||||
|
return (
|
||||||
|
<button onClick={onClick}
|
||||||
|
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||||||
|
style={{
|
||||||
|
background: hover ? cAlpha(color, 0.10) : 'transparent',
|
||||||
|
border: `1px solid ${hover ? color : cAlpha(color, 0.25)}`,
|
||||||
|
borderRadius: 6, padding: 8, cursor: 'pointer',
|
||||||
|
color: hover ? color : 'var(--fg-2)',
|
||||||
|
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
transition: 'all 160ms ease',
|
||||||
|
}}>
|
||||||
|
<CompIcon name={icon} size={16} color="currentColor" />
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── TeamTabs ──────────────────────────────────────────────────── */
|
||||||
|
function TeamTabs({ teams, active, onChange }) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', gap: 6, marginBottom: 24 }}>
|
||||||
|
{teams.map(team => {
|
||||||
|
const on = active === team;
|
||||||
|
return (
|
||||||
|
<button key={team} onClick={() => onChange(team)} style={{
|
||||||
|
padding: '8px 18px', cursor: 'pointer',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.06em',
|
||||||
|
borderRadius: 6,
|
||||||
|
border: `1px solid ${on ? C_COLORS.teal : cAlpha(C_COLORS.teal, 0.20)}`,
|
||||||
|
background: on ? cAlpha(C_COLORS.teal, 0.18) : 'transparent',
|
||||||
|
color: on ? C_COLORS.teal : 'var(--fg-disabled)',
|
||||||
|
transition: 'all 160ms ease',
|
||||||
|
}}>{team}</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── VariantPill ─────────────────────────────────────────────────
|
||||||
|
The compliance % pill that lives inside MetricHealthCard. One per
|
||||||
|
priority/variant within a metric family. Dot only shown when the
|
||||||
|
variant isn't already meeting target — green pills stay quiet. */
|
||||||
|
function VariantPill({ status, pct, label }) {
|
||||||
|
const color = statusColor(status);
|
||||||
|
const isOk = status === 'Meets/Exceeds Target';
|
||||||
|
return (
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 4,
|
||||||
|
padding: '2px 7px',
|
||||||
|
background: cAlpha(color, 0.12),
|
||||||
|
border: `1px solid ${cAlpha(color, 0.25)}`,
|
||||||
|
borderRadius: 3,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10,
|
||||||
|
color: 'var(--fg-2)', whiteSpace: 'nowrap',
|
||||||
|
}}>
|
||||||
|
{!isOk && (
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-block', width: 4, height: 4, borderRadius: '50%',
|
||||||
|
background: color, boxShadow: `0 0 5px ${color}`,
|
||||||
|
}} />
|
||||||
|
)}
|
||||||
|
{label && <span style={{ color: 'var(--fg-disabled)' }}>{label}</span>}
|
||||||
|
<span style={{ color, fontWeight: 600 }}>{pctDisplay(pct)}</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── StatusRibbon ────────────────────────────────────────────────
|
||||||
|
The lozenge at the bottom of MetricHealthCard. "OK" when meeting,
|
||||||
|
abbreviated status text otherwise. */
|
||||||
|
function StatusRibbon({ status }) {
|
||||||
|
const color = statusColor(status);
|
||||||
|
const isOk = status === 'Meets/Exceeds Target';
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 5,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10,
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.04em',
|
||||||
|
color, padding: '3px 9px',
|
||||||
|
background: cAlpha(color, 0.10),
|
||||||
|
borderRadius: 999,
|
||||||
|
border: `1px solid ${cAlpha(color, 0.30)}`,
|
||||||
|
}}>
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-block', width: 5, height: 5, borderRadius: '50%',
|
||||||
|
background: color, boxShadow: isOk ? 'none' : `0 0 6px ${color}`,
|
||||||
|
}} />
|
||||||
|
{isOk ? 'OK' : status.replace(' of Target', '')}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── MetricHealthCard ────────────────────────────────────────────
|
||||||
|
The big clickable cards in the metric strip. Click to filter the
|
||||||
|
device table; click the info "i" to open the metric definition
|
||||||
|
panel. Border + ID color shift when active. */
|
||||||
|
function MetricHealthCard({ family, active, onClick, onInfoClick, onHover, onLeave }) {
|
||||||
|
const [h, setH] = useCompState(false);
|
||||||
|
const color = statusColor(family.worstStatus);
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={onClick}
|
||||||
|
onMouseEnter={(e) => { setH(true); onHover && onHover(e.currentTarget); }}
|
||||||
|
onMouseLeave={() => { setH(false); onLeave && onLeave(); }}
|
||||||
|
style={{
|
||||||
|
position: 'relative', textAlign: 'left', cursor: 'pointer',
|
||||||
|
background: active
|
||||||
|
? cAlpha(color, 0.15)
|
||||||
|
: 'linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%)',
|
||||||
|
border: `1.5px solid ${active ? color : (h ? cAlpha(color, 0.50) : cAlpha(color, 0.25))}`,
|
||||||
|
borderRadius: 8,
|
||||||
|
padding: '14px 16px',
|
||||||
|
minWidth: 160, flex: '1 1 0',
|
||||||
|
transition: 'all 160ms ease',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
onClick={(e) => { e.stopPropagation(); onInfoClick && onInfoClick(family.metricId); }}
|
||||||
|
style={{
|
||||||
|
position: 'absolute', top: 8, right: 8,
|
||||||
|
display: 'inline-flex', cursor: 'pointer', padding: 2,
|
||||||
|
color: 'var(--fg-disabled)', borderRadius: 3,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CompIcon name="info" size={13} color="currentColor" />
|
||||||
|
</span>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 15, fontWeight: 700,
|
||||||
|
color: active ? color : 'var(--fg-1)', marginBottom: 4, paddingRight: 20,
|
||||||
|
}}>{family.metricId}</div>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10,
|
||||||
|
color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.05em',
|
||||||
|
marginBottom: 8,
|
||||||
|
}}>{family.category}</div>
|
||||||
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginBottom: 8 }}>
|
||||||
|
{family.entries.map((e, i) => (
|
||||||
|
<VariantPill
|
||||||
|
key={e.metric_id + '-' + i}
|
||||||
|
status={e.status} pct={e.compliance_pct}
|
||||||
|
label={family.entries.length > 1 ? (e.priority || `#${i + 1}`) : null}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10,
|
||||||
|
color: 'var(--fg-disabled)', marginBottom: 8,
|
||||||
|
}}>target {pctDisplay(family.target)}</div>
|
||||||
|
<StatusRibbon status={family.worstStatus} />
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── MetricBadge ─────────────────────────────────────────────────
|
||||||
|
Compact category-tinted ID chip used in device-row "Failing Metrics"
|
||||||
|
columns and inside detail panels. */
|
||||||
|
function MetricBadge({ metricId, category }) {
|
||||||
|
const color = CATEGORY_COLORS[category] || C_COLORS.slate;
|
||||||
|
return (
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center',
|
||||||
|
padding: '2px 7px',
|
||||||
|
background: cAlpha(color, 0.12),
|
||||||
|
border: `1px solid ${cAlpha(color, 0.30)}`,
|
||||||
|
borderRadius: 3, color,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
}}>{metricId}</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── SeenBadge ───────────────────────────────────────────────────
|
||||||
|
"1×" / "3×" / "5×" — how many cycles a host has been failing the
|
||||||
|
same set of metrics. Color escalates: slate → amber → red. */
|
||||||
|
function SeenBadge({ count }) {
|
||||||
|
const color = count > 3 ? C_COLORS.red : count > 1 ? C_COLORS.amber : C_COLORS.slate;
|
||||||
|
return (
|
||||||
|
<span style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
|
||||||
|
color, padding: '2px 7px',
|
||||||
|
background: cAlpha(color, 0.10),
|
||||||
|
border: `1px solid ${cAlpha(color, 0.30)}`,
|
||||||
|
borderRadius: 3, whiteSpace: 'nowrap',
|
||||||
|
}}>{count}×</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── DeviceTable + DeviceRow ─────────────────────────────────────
|
||||||
|
The non-compliant host list. Toolbar has Active/Resolved tabs +
|
||||||
|
hostname search. Rows show hostname, IP, type, failing metric
|
||||||
|
badges, seen count, and a notes indicator. */
|
||||||
|
function DeviceTable({ 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: 8, overflow: 'hidden',
|
||||||
|
}}>{children}</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DeviceTableToolbar({ tab, onTabChange, count, search, onSearchChange }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||||
|
padding: '14px 16px', borderBottom: '1px solid rgba(255,255,255,0.05)',
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'flex', gap: 4 }}>
|
||||||
|
{['active', 'resolved'].map(t => {
|
||||||
|
const on = tab === t;
|
||||||
|
return (
|
||||||
|
<button key={t} onClick={() => onTabChange(t)} style={{
|
||||||
|
padding: '6px 14px', cursor: 'pointer',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.04em',
|
||||||
|
borderRadius: 4,
|
||||||
|
border: `1px solid ${on ? cAlpha(C_COLORS.teal, 0.40) : 'transparent'}`,
|
||||||
|
background: on ? cAlpha(C_COLORS.teal, 0.10) : 'transparent',
|
||||||
|
color: on ? C_COLORS.teal : 'var(--fg-disabled)',
|
||||||
|
}}>
|
||||||
|
{t}
|
||||||
|
{on && <span style={{ marginLeft: 6, color: 'var(--fg-2)' }}>({count})</span>}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<CompSearchInput value={search} onChange={onSearchChange} placeholder="Search hostname…" width={220} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CompSearchInput({ value, onChange, placeholder, width = 240 }) {
|
||||||
|
const [focus, setFocus] = useCompState(false);
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
value={value} onChange={onChange} placeholder={placeholder}
|
||||||
|
onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
|
||||||
|
style={{
|
||||||
|
background: 'rgba(15,23,42,0.85)',
|
||||||
|
border: `1px solid ${focus ? cAlpha(C_COLORS.teal, 0.60) : cAlpha(C_COLORS.teal, 0.20)}`,
|
||||||
|
borderRadius: 4, color: 'var(--fg-1)', outline: 'none',
|
||||||
|
padding: '6px 12px', fontSize: 12, fontFamily: 'var(--font-mono)',
|
||||||
|
width, transition: 'border-color 160ms ease',
|
||||||
|
boxShadow: focus ? `0 0 0 3px ${cAlpha(C_COLORS.teal, 0.10)}` : 'none',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const DEVICE_GRID = '2.5fr 1.1fr 1fr 2fr 0.5fr 0.4fr';
|
||||||
|
|
||||||
|
function DeviceTableHeader() {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'grid', gridTemplateColumns: DEVICE_GRID,
|
||||||
|
padding: '8px 16px',
|
||||||
|
borderBottom: '1px solid rgba(255,255,255,0.05)',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
|
||||||
|
color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.08em',
|
||||||
|
}}>
|
||||||
|
<span>Hostname</span><span>IP Address</span><span>Type</span>
|
||||||
|
<span>Failing Metrics</span><span>Seen</span><span></span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DeviceRow({ hostname, ip, type, failingMetrics, seenCount, hasNotes, selected, onClick }) {
|
||||||
|
const [hover, setHover] = useCompState(false);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onClick={onClick}
|
||||||
|
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||||||
|
style={{
|
||||||
|
display: 'grid', gridTemplateColumns: DEVICE_GRID,
|
||||||
|
padding: '10px 16px',
|
||||||
|
borderBottom: '1px solid rgba(255,255,255,0.04)',
|
||||||
|
cursor: 'pointer',
|
||||||
|
background: selected ? cAlpha(C_COLORS.teal, 0.08) : (hover ? 'rgba(255,255,255,0.025)' : 'transparent'),
|
||||||
|
borderLeft: selected ? `2px solid ${C_COLORS.teal}` : '2px solid transparent',
|
||||||
|
transition: 'all 160ms ease', alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 12,
|
||||||
|
color: selected ? C_COLORS.teal : 'var(--fg-1)',
|
||||||
|
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||||||
|
}}>{hostname}</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-2)' }}>{ip || '—'}</div>
|
||||||
|
<div style={{ fontSize: 11, color: 'var(--fg-disabled)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{type || '—'}</div>
|
||||||
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
|
||||||
|
{failingMetrics.map(m => <MetricBadge key={m.metric_id} metricId={m.metric_id} category={m.category} />)}
|
||||||
|
</div>
|
||||||
|
<div><SeenBadge count={seenCount} /></div>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
||||||
|
{hasNotes && <CompIcon name="message" size={13} color={cAlpha(C_COLORS.teal, 0.7)} />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── EmptyState — for table body when there's nothing to show. ── */
|
||||||
|
function CompEmpty({ children }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
padding: 48, textAlign: 'center',
|
||||||
|
color: 'var(--fg-disabled)', fontFamily: 'var(--font-mono)', fontSize: 12,
|
||||||
|
}}>{children}</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── ChartCard — wrapper around any of the 6 charts on the page. ── */
|
||||||
|
function ChartCard({ title, subtitle, children, height = 240 }) {
|
||||||
|
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: 8, padding: 16,
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
|
||||||
|
color: 'var(--fg-1)', textTransform: 'uppercase', letterSpacing: '0.08em',
|
||||||
|
marginBottom: subtitle ? 2 : 12,
|
||||||
|
}}>{title}</div>
|
||||||
|
{subtitle && (
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10,
|
||||||
|
color: 'var(--fg-disabled)', marginBottom: 12,
|
||||||
|
}}>{subtitle}</div>
|
||||||
|
)}
|
||||||
|
<div style={{ height }}>{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── ChartLegend — shared legend row used at the top of stacked charts. ── */
|
||||||
|
function ChartLegend({ items }) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 8 }}>
|
||||||
|
{items.map(it => (
|
||||||
|
<span key={it.label} style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-2)',
|
||||||
|
}}>
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-block', width: 10, height: 10, borderRadius: 2,
|
||||||
|
background: it.color,
|
||||||
|
}} />
|
||||||
|
{it.label}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── DefinitionTooltip ───────────────────────────────────────────
|
||||||
|
The hover popover that surfaces a metric's title + business
|
||||||
|
justification + data sources. */
|
||||||
|
function DefinitionTooltip({ title, justification, sources }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
width: 300,
|
||||||
|
background: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
|
||||||
|
border: `1px solid ${cAlpha(C_COLORS.teal, 0.30)}`,
|
||||||
|
borderRadius: 8,
|
||||||
|
boxShadow: '0 8px 32px rgba(0,0,0,0.6)',
|
||||||
|
padding: '12px 14px',
|
||||||
|
}}>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 700, color: 'var(--fg-1)', marginBottom: 6, lineHeight: 1.3 }}>{title}</div>
|
||||||
|
{justification && (
|
||||||
|
<div style={{ fontFamily: 'var(--font-display)', fontSize: 12, color: 'var(--fg-2)', lineHeight: 1.4, marginBottom: 6 }}>{justification}</div>
|
||||||
|
)}
|
||||||
|
{sources && (
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-disabled)' }}>Sources: {sources}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── RollbackDialog ──────────────────────────────────────────────
|
||||||
|
Centered modal w/ red identity. "Reverses the most recent upload"
|
||||||
|
message + danger confirm. */
|
||||||
|
function RollbackDialog({ reportLabel, onCancel, onConfirm, loading }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', inset: 0, zIndex: 60,
|
||||||
|
background: 'rgba(10,14,39,0.92)', backdropFilter: 'blur(8px)',
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16,
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
background: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
|
||||||
|
border: '1px solid rgba(239,68,68,0.30)', borderRadius: 12,
|
||||||
|
boxShadow: '0 20px 60px rgba(0,0,0,0.7)',
|
||||||
|
width: '100%', maxWidth: 420, padding: 28,
|
||||||
|
}}>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 15, fontWeight: 700, color: C_COLORS.red, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12 }}>
|
||||||
|
Rollback Upload
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 13, color: 'var(--fg-1)', lineHeight: 1.5, marginBottom: 8, fontFamily: 'var(--font-display)' }}>
|
||||||
|
This will reverse the most recent upload:
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-2)',
|
||||||
|
background: 'rgba(15,23,42,0.6)', borderRadius: 6,
|
||||||
|
padding: '10px 12px', marginBottom: 18,
|
||||||
|
border: '1px solid rgba(239,68,68,0.15)',
|
||||||
|
}}>
|
||||||
|
<div><span style={{ color: 'var(--fg-disabled)' }}>File:</span> {reportLabel}</div>
|
||||||
|
<div style={{ marginTop: 4, fontSize: 10, color: 'var(--fg-disabled)' }}>
|
||||||
|
New items will be deleted, resolved items will be reactivated, and the upload record will be removed.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 10 }}>
|
||||||
|
<CompButton variant="ghost" onClick={onCancel} style={{ flex: 1, justifyContent: 'center' }}>Cancel</CompButton>
|
||||||
|
<button onClick={onConfirm} disabled={loading} style={{
|
||||||
|
flex: 2, padding: 10,
|
||||||
|
background: loading ? 'rgba(239,68,68,0.05)' : 'rgba(239,68,68,0.10)',
|
||||||
|
border: `1px solid ${C_COLORS.red}`, borderRadius: 6,
|
||||||
|
color: C_COLORS.red, cursor: loading ? 'wait' : 'pointer',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||||||
|
display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
|
||||||
|
opacity: loading ? 0.6 : 1,
|
||||||
|
}}>
|
||||||
|
<CompIcon name="rotate" size={13} color="currentColor" />
|
||||||
|
{loading ? 'Rolling back…' : 'Confirm Rollback'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── RollbackToast — bottom-right confirmation/error toast. ── */
|
||||||
|
function RollbackToast({ tone = 'success', message, detail, onDismiss }) {
|
||||||
|
const c = tone === 'error' ? C_COLORS.red : C_COLORS.green;
|
||||||
|
return (
|
||||||
|
<div onClick={onDismiss} style={{
|
||||||
|
position: 'absolute', bottom: 24, right: 24, zIndex: 70,
|
||||||
|
background: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
|
||||||
|
border: `1px solid ${cAlpha(c, 0.40)}`, borderRadius: 8,
|
||||||
|
boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
|
||||||
|
padding: '14px 20px', maxWidth: 360,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 12, color: c, cursor: 'pointer',
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: detail ? 4 : 0 }}>
|
||||||
|
<CompIcon name={tone === 'error' ? 'alert' : 'rotate'} size={14} color="currentColor" />
|
||||||
|
{message}
|
||||||
|
</div>
|
||||||
|
{detail && <div style={{ fontSize: 10, color: 'var(--fg-2)' }}>{detail}</div>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── CompIcon — every icon used by the compliance page. ── */
|
||||||
|
function CompIcon({ name, size = 16, color = 'currentColor' }) {
|
||||||
|
const p = {
|
||||||
|
width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
|
||||||
|
stroke: color, strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round',
|
||||||
|
style: { display: 'inline-block', verticalAlign: 'middle' },
|
||||||
|
};
|
||||||
|
switch (name) {
|
||||||
|
case 'upload': return <svg {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>;
|
||||||
|
case 'refresh': return <svg {...p}><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/></svg>;
|
||||||
|
case 'rotate': return <svg {...p}><path d="M3 12a9 9 0 1 0 9-9"/><polyline points="3 4 3 9 8 9"/></svg>;
|
||||||
|
case 'message': return <svg {...p}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>;
|
||||||
|
case 'info': return <svg {...p}><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>;
|
||||||
|
case 'alert': return <svg {...p}><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>;
|
||||||
|
case 'check': return <svg {...p}><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>;
|
||||||
|
case 'loader': return <svg {...p}><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/></svg>;
|
||||||
|
case 'x': return <svg {...p}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>;
|
||||||
|
default: return <svg {...p}><circle cx="12" cy="12" r="10"/></svg>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.COMP = {
|
||||||
|
COLORS: C_COLORS, STATUS_COLOR, CATEGORY_COLORS,
|
||||||
|
statusColor, pctDisplay, cAlpha,
|
||||||
|
CompPageHeader, CompButton, CompIconButton, TeamTabs,
|
||||||
|
VariantPill, StatusRibbon, MetricHealthCard, MetricBadge, SeenBadge,
|
||||||
|
DeviceTable, DeviceTableToolbar, DeviceTableHeader, DeviceRow, CompSearchInput, CompEmpty,
|
||||||
|
ChartCard, ChartLegend,
|
||||||
|
DefinitionTooltip, RollbackDialog, RollbackToast,
|
||||||
|
CompIcon,
|
||||||
|
};
|
||||||
@@ -0,0 +1,319 @@
|
|||||||
|
// CompliancePage.jsx — full-page assembly of the AEO Compliance view.
|
||||||
|
// Rebuilt from frontend/src/components/pages/CompliancePage.js with
|
||||||
|
// inline-rendered chart placeholders that match Recharts visually.
|
||||||
|
|
||||||
|
const {
|
||||||
|
COLORS: PC, statusColor: pStatusColor, pctDisplay: pPct, cAlpha: pAlpha,
|
||||||
|
CompPageHeader, CompButton, TeamTabs,
|
||||||
|
MetricHealthCard, DeviceTable, DeviceTableToolbar, DeviceTableHeader, DeviceRow, CompEmpty,
|
||||||
|
ChartCard, ChartLegend, RollbackDialog, RollbackToast, CompIcon: PIcon,
|
||||||
|
} = window.COMP;
|
||||||
|
|
||||||
|
const { useState: useCompPageState } = React;
|
||||||
|
|
||||||
|
/* ── Sample data — what summary + items endpoints look like ── */
|
||||||
|
const SAMPLE_FAMILIES = [
|
||||||
|
{
|
||||||
|
metricId: 'VM-CRITICAL', category: 'Vulnerability Management', target: 0.95, worstStatus: 'Below 15% of Target',
|
||||||
|
entries: [
|
||||||
|
{ metric_id: 'VM-CRITICAL', priority: 'P1', compliance_pct: 0.74, status: 'Below 15% of Target' },
|
||||||
|
{ metric_id: 'VM-CRITICAL', priority: 'P2', compliance_pct: 0.91, status: 'Within 15% of Target' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
metricId: 'AUTH-MFA', category: 'Access & MFA', target: 0.98, worstStatus: 'Within 15% of Target',
|
||||||
|
entries: [{ metric_id: 'AUTH-MFA', compliance_pct: 0.94, status: 'Within 15% of Target' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
metricId: 'LOG-COVERAGE', category: 'Logging & Monitoring', target: 0.90, worstStatus: 'Meets/Exceeds Target',
|
||||||
|
entries: [{ metric_id: 'LOG-COVERAGE', compliance_pct: 0.97, status: 'Meets/Exceeds Target' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
metricId: 'EOL-OS', category: 'End-of-Life OS', target: 1.00, worstStatus: 'Below 15% of Target',
|
||||||
|
entries: [{ metric_id: 'EOL-OS', compliance_pct: 0.62, status: 'Below 15% of Target' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
metricId: 'EDR-DEPLOY', category: 'Endpoint Protection', target: 0.95, worstStatus: 'Meets/Exceeds Target',
|
||||||
|
entries: [{ metric_id: 'EDR-DEPLOY', compliance_pct: 0.96, status: 'Meets/Exceeds Target' }],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const SAMPLE_DEVICES = [
|
||||||
|
{ hostname: 'app-prod-04.steam.internal', ip: '10.42.18.4', type: 'Linux server', failingMetrics: [{ metric_id: 'VM-CRITICAL', category: 'Vulnerability Management' }, { metric_id: 'EOL-OS', category: 'End-of-Life OS' }], seenCount: 5, hasNotes: true },
|
||||||
|
{ hostname: 'db-staging-01.steam.internal', ip: '10.42.20.11', type: 'Linux server', failingMetrics: [{ metric_id: 'VM-CRITICAL', category: 'Vulnerability Management' }], seenCount: 2, hasNotes: false },
|
||||||
|
{ hostname: 'fileshare-02.steam.internal', ip: '10.42.16.32', type: 'Windows server', failingMetrics: [{ metric_id: 'AUTH-MFA', category: 'Access & MFA' }], seenCount: 1, hasNotes: false },
|
||||||
|
{ hostname: 'jumpbox-east.steam.internal', ip: '10.42.4.7', type: 'Linux server', failingMetrics: [{ metric_id: 'AUTH-MFA', category: 'Access & MFA' }, { metric_id: 'VM-CRITICAL', category: 'Vulnerability Management' }], seenCount: 4, hasNotes: true },
|
||||||
|
{ hostname: 'legacy-billing.steam.internal', ip: '10.42.8.18', type: 'Windows server', failingMetrics: [{ metric_id: 'EOL-OS', category: 'End-of-Life OS' }], seenCount: 7, hasNotes: false },
|
||||||
|
];
|
||||||
|
|
||||||
|
/* ── Inline chart visuals — semantic stand-ins for Recharts. ── */
|
||||||
|
function NetworkScoreChart() {
|
||||||
|
const points = [82, 84, 81, 86, 85, 87, 88];
|
||||||
|
return (
|
||||||
|
<ChartSvg>
|
||||||
|
<Line points={points} color={PC.teal} fill={pAlpha(PC.teal, 0.15)} />
|
||||||
|
<YAxisLabels labels={['100%', '80%', '60%']} />
|
||||||
|
</ChartSvg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
function StatusDistributionChart() {
|
||||||
|
const data = [
|
||||||
|
{ meets: 62, within: 22, below: 16 },
|
||||||
|
{ meets: 65, within: 20, below: 15 },
|
||||||
|
{ meets: 67, within: 21, below: 12 },
|
||||||
|
{ meets: 72, within: 18, below: 10 },
|
||||||
|
];
|
||||||
|
return <StackedBars data={data} keys={['meets', 'within', 'below']} colors={[PC.green, PC.amber, PC.red]} />;
|
||||||
|
}
|
||||||
|
function TeamHealthChart() {
|
||||||
|
return (
|
||||||
|
<ChartSvg>
|
||||||
|
<Line points={[78, 80, 79, 83, 85, 88]} color={PC.teal} />
|
||||||
|
<Line points={[68, 70, 73, 71, 74, 76]} color={PC.amber} />
|
||||||
|
</ChartSvg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
function NewRecurringResolvedChart() {
|
||||||
|
const data = [
|
||||||
|
{ new_count: 12, recurring_count: 7, resolved_count: -10 },
|
||||||
|
{ new_count: 8, recurring_count: 9, resolved_count: -14 },
|
||||||
|
{ new_count: 14, recurring_count: 5, resolved_count: -8 },
|
||||||
|
{ new_count: 9, recurring_count: 6, resolved_count: -12 },
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<ChartSvg>
|
||||||
|
<ChartLegend items={[
|
||||||
|
{ label: 'New', color: PC.red },
|
||||||
|
{ label: 'Recurring', color: PC.amber },
|
||||||
|
{ label: 'Resolved', color: PC.green },
|
||||||
|
]} />
|
||||||
|
<StackedBars data={data} keys={['new_count', 'recurring_count', 'resolved_count']} colors={[PC.red, PC.amber, PC.green]} centered />
|
||||||
|
</ChartSvg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
function AvgDaysToResolveChart() {
|
||||||
|
const rows = [
|
||||||
|
{ label: 'AUTH-MFA', v: 4 },
|
||||||
|
{ label: 'VM-CRITICAL', v: 12 },
|
||||||
|
{ label: 'EOL-OS', v: 28 },
|
||||||
|
{ label: 'EDR-DEPLOY', v: 6 },
|
||||||
|
];
|
||||||
|
return <HorizontalBars rows={rows} max={32} color={PC.teal} unit="days" />;
|
||||||
|
}
|
||||||
|
function PersistentFindingsChart() {
|
||||||
|
const rows = [
|
||||||
|
{ label: 'legacy-billing', v: 7 },
|
||||||
|
{ label: 'app-prod-04', v: 5 },
|
||||||
|
{ label: 'jumpbox-east', v: 4 },
|
||||||
|
{ label: 'db-staging-01', v: 2 },
|
||||||
|
];
|
||||||
|
return <HorizontalBars rows={rows} max={8} color={PC.amber} unit="cycles" />;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tiny SVG primitives — flat, deterministic, no library. */
|
||||||
|
function ChartSvg({ children, height = 180 }) {
|
||||||
|
return (
|
||||||
|
<div style={{ position: 'relative', width: '100%', height }}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
function Line({ points, color, fill }) {
|
||||||
|
const max = Math.max(...points);
|
||||||
|
const min = Math.min(...points) * 0.85;
|
||||||
|
const range = max - min || 1;
|
||||||
|
const w = 100, h = 100;
|
||||||
|
const step = w / (points.length - 1);
|
||||||
|
const path = points.map((v, i) => `${i === 0 ? 'M' : 'L'} ${i * step} ${h - ((v - min) / range) * h}`).join(' ');
|
||||||
|
const fillPath = path + ` L ${w} ${h} L 0 ${h} Z`;
|
||||||
|
return (
|
||||||
|
<svg width="100%" height="100%" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ overflow: 'visible' }}>
|
||||||
|
{fill && <path d={fillPath} fill={fill} />}
|
||||||
|
<path d={path} fill="none" stroke={color} strokeWidth="1.5" />
|
||||||
|
{points.map((v, i) => (
|
||||||
|
<circle key={i} cx={i * step} cy={h - ((v - min) / range) * h} r="1.5" fill={color} />
|
||||||
|
))}
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
function YAxisLabels({ labels }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', top: 0, bottom: 0, left: -2,
|
||||||
|
display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--fg-disabled)',
|
||||||
|
pointerEvents: 'none',
|
||||||
|
}}>
|
||||||
|
{labels.map(l => <span key={l}>{l}</span>)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
function StackedBars({ data, keys, colors, centered = false }) {
|
||||||
|
const total = (d) => keys.reduce((s, k) => s + Math.abs(d[k]), 0);
|
||||||
|
const maxTotal = Math.max(...data.map(total));
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', alignItems: centered ? 'center' : 'flex-end', gap: 12, height: '100%', paddingTop: 8 }}>
|
||||||
|
{data.map((d, i) => {
|
||||||
|
const segs = keys.map((k, ki) => ({ v: d[k], color: colors[ki], k }));
|
||||||
|
return (
|
||||||
|
<div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%' }}>
|
||||||
|
<div style={{ flex: 1, width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
|
||||||
|
{segs.map((s, si) => (
|
||||||
|
<div key={si} style={{
|
||||||
|
width: '100%', height: `${(Math.abs(s.v) / maxTotal) * 100}%`,
|
||||||
|
background: s.color, opacity: 0.85,
|
||||||
|
borderTopLeftRadius: si === 0 ? 2 : 0,
|
||||||
|
borderTopRightRadius: si === 0 ? 2 : 0,
|
||||||
|
}} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
function HorizontalBars({ rows, max, color, unit }) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, paddingTop: 8 }}>
|
||||||
|
{rows.map(r => (
|
||||||
|
<div key={r.label} style={{ display: 'grid', gridTemplateColumns: '120px 1fr 50px', gap: 8, alignItems: 'center' }}>
|
||||||
|
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-2)', textAlign: 'right' }}>{r.label}</span>
|
||||||
|
<div style={{ height: 14, background: 'rgba(255,255,255,0.04)', borderRadius: 3, overflow: 'hidden' }}>
|
||||||
|
<div style={{ width: `${(r.v / max) * 100}%`, height: '100%', background: color, opacity: 0.85, borderRadius: 3 }} />
|
||||||
|
</div>
|
||||||
|
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color, fontWeight: 600 }}>{r.v} {unit}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Page assembly ── */
|
||||||
|
function CompliancePage() {
|
||||||
|
const [team, setTeam] = useCompPageState('STEAM');
|
||||||
|
const [tab, setTab] = useCompPageState('active');
|
||||||
|
const [filter, setFilter] = useCompPageState(null);
|
||||||
|
const [search, setSearch] = useCompPageState('');
|
||||||
|
const [selected, setSelected] = useCompPageState(null);
|
||||||
|
const [rollback, setRollback] = useCompPageState(null);
|
||||||
|
|
||||||
|
const filteredDevices = SAMPLE_DEVICES
|
||||||
|
.filter(d => !filter || d.failingMetrics.some(m => filter.includes(m.metric_id)))
|
||||||
|
.filter(d => !search || d.hostname.toLowerCase().includes(search.toLowerCase()));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div data-screen-label="01 Compliance" style={{
|
||||||
|
position: 'relative',
|
||||||
|
padding: 32, minHeight: '100vh', background: 'var(--bg-page)',
|
||||||
|
fontFamily: 'var(--font-display)',
|
||||||
|
}}>
|
||||||
|
<CompPageHeader
|
||||||
|
lastReport="2026-04-21"
|
||||||
|
networkScore="88%"
|
||||||
|
verticalScore="84%"
|
||||||
|
isAdmin
|
||||||
|
onRollback={() => setRollback('confirm')}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TeamTabs teams={['STEAM', 'ACCESS-ENG']} active={team} onChange={setTeam} />
|
||||||
|
|
||||||
|
{/* Metric Health */}
|
||||||
|
<div style={{ marginBottom: 24 }}>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
|
||||||
|
color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.1em',
|
||||||
|
marginBottom: 10,
|
||||||
|
}}>
|
||||||
|
Metric Health — click to filter
|
||||||
|
{filter && (
|
||||||
|
<button onClick={() => setFilter(null)} style={{
|
||||||
|
marginLeft: 12, color: PC.teal, background: 'none', border: 'none',
|
||||||
|
cursor: 'pointer', fontSize: 10, fontFamily: 'var(--font-mono)',
|
||||||
|
}}>× clear filter</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
|
||||||
|
{SAMPLE_FAMILIES.map(family => {
|
||||||
|
const ids = family.entries.map(e => e.metric_id);
|
||||||
|
const isActive = filter !== null && filter.length === ids.length && ids.every(id => filter.includes(id));
|
||||||
|
return (
|
||||||
|
<div key={family.metricId} style={{ display: 'flex', flex: '1 1 0', minWidth: 160 }}>
|
||||||
|
<MetricHealthCard
|
||||||
|
family={family}
|
||||||
|
active={isActive}
|
||||||
|
onClick={() => setFilter(isActive ? null : ids)}
|
||||||
|
onInfoClick={() => {}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Charts */}
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 24 }}>
|
||||||
|
<ChartCard title="Network Compliance" subtitle="Trailing 7 days">
|
||||||
|
<NetworkScoreChart />
|
||||||
|
</ChartCard>
|
||||||
|
<ChartCard title="Status Distribution" subtitle="Last 4 cycles">
|
||||||
|
<StatusDistributionChart />
|
||||||
|
</ChartCard>
|
||||||
|
<ChartCard title="Team Health" subtitle="STEAM vs ACCESS-ENG">
|
||||||
|
<TeamHealthChart />
|
||||||
|
</ChartCard>
|
||||||
|
<ChartCard title="New / Recurring / Resolved" subtitle="Per cycle" height={200}>
|
||||||
|
<NewRecurringResolvedChart />
|
||||||
|
</ChartCard>
|
||||||
|
<ChartCard title="Avg Days to Resolve" subtitle="By metric">
|
||||||
|
<AvgDaysToResolveChart />
|
||||||
|
</ChartCard>
|
||||||
|
<ChartCard title="Most Persistent Findings" subtitle="By cycles seen">
|
||||||
|
<PersistentFindingsChart />
|
||||||
|
</ChartCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Device table */}
|
||||||
|
<DeviceTable>
|
||||||
|
<DeviceTableToolbar
|
||||||
|
tab={tab} onTabChange={setTab}
|
||||||
|
count={filteredDevices.length}
|
||||||
|
search={search} onSearchChange={e => setSearch(e.target.value)}
|
||||||
|
/>
|
||||||
|
<DeviceTableHeader />
|
||||||
|
{filteredDevices.length === 0 ? (
|
||||||
|
<CompEmpty>No non-compliant devices match the current filter</CompEmpty>
|
||||||
|
) : (
|
||||||
|
filteredDevices.map(d => (
|
||||||
|
<DeviceRow
|
||||||
|
key={d.hostname}
|
||||||
|
hostname={d.hostname} ip={d.ip} type={d.type}
|
||||||
|
failingMetrics={d.failingMetrics}
|
||||||
|
seenCount={d.seenCount} hasNotes={d.hasNotes}
|
||||||
|
selected={selected === d.hostname}
|
||||||
|
onClick={() => setSelected(selected === d.hostname ? null : d.hostname)}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</DeviceTable>
|
||||||
|
|
||||||
|
{rollback === 'confirm' && (
|
||||||
|
<RollbackDialog
|
||||||
|
reportLabel="2026-04-21"
|
||||||
|
onCancel={() => setRollback(null)}
|
||||||
|
onConfirm={() => setRollback('toast')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{rollback === 'toast' && (
|
||||||
|
<RollbackToast
|
||||||
|
tone="success"
|
||||||
|
message="Upload rolled back"
|
||||||
|
detail="42 items deleted, 18 reactivated"
|
||||||
|
onDismiss={() => setRollback(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.COMP_PAGE = { CompliancePage };
|
||||||
363
docs/design-system-redesign/ui_kits/compliance/KitDocs.jsx
Normal file
363
docs/design-system-redesign/ui_kits/compliance/KitDocs.jsx
Normal file
@@ -0,0 +1,363 @@
|
|||||||
|
// KitDocs.jsx — browseable docs page for the Compliance kit.
|
||||||
|
|
||||||
|
const { useState: useDocsCompState } = React;
|
||||||
|
const {
|
||||||
|
COLORS: DCC, statusColor: dStatus, pctDisplay: dPct, cAlpha: dA,
|
||||||
|
CompPageHeader: DHeader, CompButton: DBtn, TeamTabs: DTabs,
|
||||||
|
VariantPill: DVPill, StatusRibbon: DRibbon, MetricHealthCard: DMHC,
|
||||||
|
MetricBadge: DMB, SeenBadge: DSB,
|
||||||
|
DeviceTable: DDT, DeviceTableToolbar: DDTT, DeviceTableHeader: DDTH, DeviceRow: DDR,
|
||||||
|
CompEmpty: DEmpty, ChartCard: DChart, ChartLegend: DLegend,
|
||||||
|
DefinitionTooltip: DTip, RollbackDialog: DRoll, RollbackToast: DToast,
|
||||||
|
CompIcon: DIcon,
|
||||||
|
} = window.COMP;
|
||||||
|
const { CompliancePage: DPage } = window.COMP_PAGE;
|
||||||
|
|
||||||
|
function CSection({ id, eyebrow, title, blurb, children }) {
|
||||||
|
return (
|
||||||
|
<section id={id} style={{ paddingTop: 32, scrollMarginTop: 120 }}>
|
||||||
|
<div style={{ marginBottom: 16 }}>
|
||||||
|
{eyebrow && (
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
|
||||||
|
color: DCC.teal, textTransform: 'uppercase', letterSpacing: '0.18em',
|
||||||
|
marginBottom: 6,
|
||||||
|
}}>{eyebrow}</div>
|
||||||
|
)}
|
||||||
|
<h2 style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 700,
|
||||||
|
color: 'var(--fg-1)', margin: 0, letterSpacing: '0.02em',
|
||||||
|
}}>{title}</h2>
|
||||||
|
{blurb && (
|
||||||
|
<p style={{
|
||||||
|
fontFamily: 'var(--font-display)', fontSize: 14, lineHeight: 1.6,
|
||||||
|
color: 'var(--fg-muted)', maxWidth: 660, margin: '8px 0 0 0',
|
||||||
|
}}>{blurb}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CCode({ children }) {
|
||||||
|
return (
|
||||||
|
<code style={{
|
||||||
|
display: 'inline-block', padding: '2px 6px', borderRadius: 3,
|
||||||
|
background: dA(DCC.teal, 0.10), border: `1px solid ${dA(DCC.teal, 0.18)}`,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, color: DCC.tealMid,
|
||||||
|
}}>{children}</code>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CSwatch({ name, value, role }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'grid', gridTemplateColumns: '52px 1fr auto', alignItems: 'center', gap: 14,
|
||||||
|
padding: '8px 0', borderBottom: '1px solid rgba(255,255,255,0.04)',
|
||||||
|
}}>
|
||||||
|
<div style={{ height: 36, borderRadius: 6, background: value, border: '1px solid rgba(255,255,255,0.08)' }} />
|
||||||
|
<div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-1)', fontWeight: 600 }}>{name}</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-disabled)' }}>{role}</div>
|
||||||
|
</div>
|
||||||
|
<CCode>{value}</CCode>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CSpec({ label, children }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'grid', gridTemplateColumns: '160px 1fr', gap: 16,
|
||||||
|
padding: '10px 0', borderBottom: '1px solid rgba(255,255,255,0.04)',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 12,
|
||||||
|
}}>
|
||||||
|
<div style={{ color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.06em', fontSize: 10, fontWeight: 600 }}>{label}</div>
|
||||||
|
<div style={{ color: 'var(--fg-2)' }}>{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CSpecimen({ children, padding = 24 }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
padding,
|
||||||
|
background: 'rgba(15,23,42,0.5)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.05)', borderRadius: 8,
|
||||||
|
}}>{children}</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const TABS = [
|
||||||
|
{ id: 'overview', label: 'Overview' },
|
||||||
|
{ id: 'tokens', label: 'Tokens' },
|
||||||
|
{ id: 'components', label: 'Components' },
|
||||||
|
{ id: 'assemblies', label: 'Assemblies' },
|
||||||
|
{ id: 'reference', label: 'Reference Page' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const subhead = {
|
||||||
|
margin: '32px 0 6px 0',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 700,
|
||||||
|
color: 'var(--fg-1)', textTransform: 'uppercase', letterSpacing: '0.08em',
|
||||||
|
};
|
||||||
|
const subblurb = {
|
||||||
|
margin: '0 0 12px 0',
|
||||||
|
fontFamily: 'var(--font-display)', fontSize: 13, lineHeight: 1.55,
|
||||||
|
color: 'var(--fg-muted)', maxWidth: 720,
|
||||||
|
};
|
||||||
|
|
||||||
|
const SAMPLE_FAMILY_BAD = {
|
||||||
|
metricId: 'VM-CRITICAL', category: 'Vulnerability Management', target: 0.95, worstStatus: 'Below 15% of Target',
|
||||||
|
entries: [
|
||||||
|
{ metric_id: 'VM-CRITICAL', priority: 'P1', compliance_pct: 0.74, status: 'Below 15% of Target' },
|
||||||
|
{ metric_id: 'VM-CRITICAL', priority: 'P2', compliance_pct: 0.91, status: 'Within 15% of Target' },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const SAMPLE_FAMILY_OK = {
|
||||||
|
metricId: 'EDR-DEPLOY', category: 'Endpoint Protection', target: 0.95, worstStatus: 'Meets/Exceeds Target',
|
||||||
|
entries: [{ metric_id: 'EDR-DEPLOY', compliance_pct: 0.96, status: 'Meets/Exceeds Target' }],
|
||||||
|
};
|
||||||
|
|
||||||
|
function CKitDocs() {
|
||||||
|
const [active, setActive] = useDocsCompState('overview');
|
||||||
|
const handle = (id) => {
|
||||||
|
setActive(id);
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (el) {
|
||||||
|
const top = el.getBoundingClientRect().top + window.scrollY - 80;
|
||||||
|
window.scrollTo({ top, behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ minHeight: '100vh', background: 'var(--bg-page)' }}>
|
||||||
|
<header style={{ padding: '40px 48px 0 48px', maxWidth: 1280, margin: '0 auto' }}>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, color: DCC.teal, textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 8 }}>
|
||||||
|
STEAM Security · UI Kit
|
||||||
|
</div>
|
||||||
|
<h1 style={{
|
||||||
|
margin: 0, fontFamily: 'var(--font-mono)', fontSize: 36, fontWeight: 700,
|
||||||
|
color: DCC.teal, textTransform: 'uppercase', letterSpacing: '0.08em',
|
||||||
|
textShadow: `0 0 24px ${dA(DCC.teal, 0.30)}`,
|
||||||
|
}}>Compliance</h1>
|
||||||
|
<p style={{
|
||||||
|
margin: '12px 0 0 0', maxWidth: 720, fontSize: 15, lineHeight: 1.6,
|
||||||
|
color: 'var(--fg-muted)', fontFamily: 'var(--font-display)',
|
||||||
|
}}>
|
||||||
|
The AEO Compliance view: per-team metric health, six trend charts, and a non-compliant device
|
||||||
|
drilldown. Identity color is teal — distinct from the green-titled CVE pages — with status colors
|
||||||
|
that map green/amber/red onto target adherence.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav style={{
|
||||||
|
position: 'sticky', top: 0, zIndex: 10, marginTop: 28,
|
||||||
|
background: 'rgba(2,6,23,0.85)', backdropFilter: 'blur(8px)',
|
||||||
|
borderBottom: `1px solid ${dA(DCC.teal, 0.15)}`,
|
||||||
|
}}>
|
||||||
|
<div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 48px', display: 'flex', gap: 4 }}>
|
||||||
|
{TABS.map(t => {
|
||||||
|
const on = active === t.id;
|
||||||
|
return (
|
||||||
|
<button key={t.id} onClick={() => handle(t.id)} style={{
|
||||||
|
padding: '14px 16px', background: 'transparent', border: 'none',
|
||||||
|
borderBottom: `2px solid ${on ? DCC.teal : 'transparent'}`,
|
||||||
|
color: on ? DCC.teal : 'var(--fg-2)',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.08em',
|
||||||
|
cursor: 'pointer', transition: 'all 160ms ease',
|
||||||
|
}}>{t.label}</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main style={{ maxWidth: 1280, margin: '0 auto', padding: '0 48px 96px 48px' }}>
|
||||||
|
|
||||||
|
<CSection id="overview" eyebrow="01 — Overview" title="Why this kit exists" blurb="Compliance has its own visual identity inside the suite — teal page title, status colors driven by target adherence, and a metric-card pattern that does double duty as a filter. This kit captures the vocabulary so other audit-style views can reuse it.">
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
|
||||||
|
<CSpecimen>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: DCC.teal, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12, fontWeight: 600 }}>Identity</div>
|
||||||
|
<p style={{ margin: 0, fontSize: 13, color: 'var(--fg-1)', lineHeight: 1.6, fontFamily: 'var(--font-display)' }}>
|
||||||
|
Teal owns the page header, the active team tab, the upload CTA, the active device row,
|
||||||
|
and any "neutral compliance signal" surface. Status colors (green/amber/red) own
|
||||||
|
everything that represents target adherence — never decorative.
|
||||||
|
</p>
|
||||||
|
</CSpecimen>
|
||||||
|
<CSpecimen>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: DCC.teal, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12, fontWeight: 600 }}>Layout</div>
|
||||||
|
<p style={{ margin: 0, fontSize: 13, color: 'var(--fg-1)', lineHeight: 1.6, fontFamily: 'var(--font-display)' }}>
|
||||||
|
Page header → team tabs → metric health row (one card per metric family) →
|
||||||
|
3×2 chart grid → device table with active/resolved tabs and hostname search.
|
||||||
|
Selecting a metric card filters the table; selecting a row opens a detail panel.
|
||||||
|
</p>
|
||||||
|
</CSpecimen>
|
||||||
|
</div>
|
||||||
|
</CSection>
|
||||||
|
|
||||||
|
<CSection id="tokens" eyebrow="02 — Tokens" title="Status, category, and identity color" blurb="Status colors are reserved for target adherence. Category colors tag failing-metric badges by program area so a host's failure mix is scannable.">
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8, fontWeight: 600 }}>Status (target adherence)</div>
|
||||||
|
<CSwatch name="green" value={DCC.green} role="Meets/Exceeds Target · success" />
|
||||||
|
<CSwatch name="amber" value={DCC.amber} role="Within 15% of Target · attention" />
|
||||||
|
<CSwatch name="red" value={DCC.red} role="Below 15% of Target · critical" />
|
||||||
|
<div style={{ marginTop: 24, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8, fontWeight: 600 }}>Identity</div>
|
||||||
|
<CSwatch name="teal" value={DCC.teal} role="Page title · CTA · selected row" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8, fontWeight: 600 }}>Category</div>
|
||||||
|
<CSwatch name="red" value={DCC.red} role="Vulnerability Management" />
|
||||||
|
<CSwatch name="amber" value={DCC.amber} role="Access & MFA" />
|
||||||
|
<CSwatch name="purple" value={DCC.purple} role="Logging & Monitoring" />
|
||||||
|
<CSwatch name="orange" value={DCC.orange} role="End-of-Life OS · Endpoint Protection" />
|
||||||
|
<CSwatch name="sky" value={DCC.sky} role="Application Security" />
|
||||||
|
<CSwatch name="slate" value={DCC.slate} role="Asset Data Quality · Decommissioned" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ marginTop: 32 }}>
|
||||||
|
<CSpec label="Card chrome">background <CCode>linear-gradient(135deg, rgba(30,41,59,.95), rgba(15,23,42,.98))</CCode></CSpec>
|
||||||
|
<CSpec label="Metric card border">resting <CCode>1.5px solid {`{statusColor}`} @ 0.25</CCode> · hover <CCode>0.50</CCode> · active <CCode>1.0</CCode> + 15% bg fill</CSpec>
|
||||||
|
<CSpec label="Title type"><CCode>var(--font-mono)</CCode> · 24 / 700 · uppercase · 0.1em tracking · 16px text-shadow glow</CSpec>
|
||||||
|
<CSpec label="Worst-status logic">A family's <CCode>worstStatus</CCode> is the lowest-severity entry across all variants — drives card border + ribbon</CSpec>
|
||||||
|
</div>
|
||||||
|
</CSection>
|
||||||
|
|
||||||
|
<CSection id="components" eyebrow="03 — Components" title="The pieces" blurb="Every primitive used by the page assembly. All are exported on window.COMP.">
|
||||||
|
<h3 style={subhead}>CompPageHeader</h3>
|
||||||
|
<p style={subblurb}>Teal title with glow, last-report meta + optional rollback button, network/vertical scores, and a refresh + upload CTA on the right.</p>
|
||||||
|
<CSpecimen>
|
||||||
|
<DHeader lastReport="2026-04-21" networkScore="88%" verticalScore="84%" isAdmin onRollback={() => {}} />
|
||||||
|
</CSpecimen>
|
||||||
|
|
||||||
|
<h3 style={subhead}>TeamTabs</h3>
|
||||||
|
<p style={subblurb}>Two-team toggle pinned above the metric strip. The active tab fills with teal at 18% alpha.</p>
|
||||||
|
<CSpecimen>
|
||||||
|
<DTabs teams={['STEAM', 'ACCESS-ENG']} active="STEAM" onChange={() => {}} />
|
||||||
|
</CSpecimen>
|
||||||
|
|
||||||
|
<h3 style={subhead}>CompButton</h3>
|
||||||
|
<p style={subblurb}>Four variants. Primary is the lone teal CTA (Upload Report). Danger fronts the rollback flow.</p>
|
||||||
|
<CSpecimen>
|
||||||
|
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
|
||||||
|
<DBtn variant="primary" icon="upload">Upload Report</DBtn>
|
||||||
|
<DBtn variant="neutral" icon="refresh">Refresh</DBtn>
|
||||||
|
<DBtn variant="danger" icon="rotate">Rollback</DBtn>
|
||||||
|
<DBtn variant="ghost">Cancel</DBtn>
|
||||||
|
</div>
|
||||||
|
</CSpecimen>
|
||||||
|
|
||||||
|
<h3 style={subhead}>MetricHealthCard</h3>
|
||||||
|
<p style={subblurb}>The big clickable card in the metric strip. Border + ID color follow the family's <em>worst</em> status, so a single bad variant turns the whole family red. Click filters the device table; the info "i" opens a definition panel.</p>
|
||||||
|
<CSpecimen>
|
||||||
|
<div style={{ display: 'flex', gap: 12 }}>
|
||||||
|
<div style={{ flex: 1 }}><DMHC family={SAMPLE_FAMILY_BAD} active={false} onClick={() => {}} onInfoClick={() => {}} /></div>
|
||||||
|
<div style={{ flex: 1 }}><DMHC family={SAMPLE_FAMILY_BAD} active={true} onClick={() => {}} onInfoClick={() => {}} /></div>
|
||||||
|
<div style={{ flex: 1 }}><DMHC family={SAMPLE_FAMILY_OK} active={false} onClick={() => {}} onInfoClick={() => {}} /></div>
|
||||||
|
</div>
|
||||||
|
</CSpecimen>
|
||||||
|
|
||||||
|
<h3 style={subhead}>VariantPill · StatusRibbon</h3>
|
||||||
|
<p style={subblurb}>Atoms inside MetricHealthCard. VariantPill = one priority's % readout. StatusRibbon = the bottom lozenge.</p>
|
||||||
|
<CSpecimen>
|
||||||
|
<div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
|
||||||
|
<DVPill status="Meets/Exceeds Target" pct={0.97} />
|
||||||
|
<DVPill status="Within 15% of Target" pct={0.91} label="P2" />
|
||||||
|
<DVPill status="Below 15% of Target" pct={0.74} label="P1" />
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||||||
|
<DRibbon status="Meets/Exceeds Target" />
|
||||||
|
<DRibbon status="Within 15% of Target" />
|
||||||
|
<DRibbon status="Below 15% of Target" />
|
||||||
|
</div>
|
||||||
|
</CSpecimen>
|
||||||
|
|
||||||
|
<h3 style={subhead}>MetricBadge · SeenBadge</h3>
|
||||||
|
<p style={subblurb}>Row-level chips in the device table. MetricBadge tints by category; SeenBadge escalates slate→amber→red as repeat-failure count grows.</p>
|
||||||
|
<CSpecimen>
|
||||||
|
<div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
|
||||||
|
<DMB metricId="VM-CRITICAL" category="Vulnerability Management" />
|
||||||
|
<DMB metricId="AUTH-MFA" category="Access & MFA" />
|
||||||
|
<DMB metricId="LOG-COVERAGE" category="Logging & Monitoring" />
|
||||||
|
<DMB metricId="EOL-OS" category="End-of-Life OS" />
|
||||||
|
<DMB metricId="EDR-DEPLOY" category="Endpoint Protection" />
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 8 }}>
|
||||||
|
<DSB count={1} /><DSB count={3} /><DSB count={5} /><DSB count={7} />
|
||||||
|
</div>
|
||||||
|
</CSpecimen>
|
||||||
|
|
||||||
|
<h3 style={subhead}>DeviceRow</h3>
|
||||||
|
<p style={subblurb}>One non-compliant host per row. Selected state shifts the left border + hostname color to teal.</p>
|
||||||
|
<CSpecimen padding={0}>
|
||||||
|
<DDT>
|
||||||
|
<DDTH />
|
||||||
|
<DDR hostname="app-prod-04.steam.internal" ip="10.42.18.4" type="Linux server" failingMetrics={[{ metric_id: 'VM-CRITICAL', category: 'Vulnerability Management' }, { metric_id: 'EOL-OS', category: 'End-of-Life OS' }]} seenCount={5} hasNotes={true} selected={true} onClick={() => {}} />
|
||||||
|
<DDR hostname="db-staging-01.steam.internal" ip="10.42.20.11" type="Linux server" failingMetrics={[{ metric_id: 'VM-CRITICAL', category: 'Vulnerability Management' }]} seenCount={2} hasNotes={false} onClick={() => {}} />
|
||||||
|
</DDT>
|
||||||
|
</CSpecimen>
|
||||||
|
|
||||||
|
<h3 style={subhead}>ChartCard</h3>
|
||||||
|
<p style={subblurb}>Wrapper for any of the six trend charts. Title in mono uppercase, optional subtitle in disabled grey, 240px chart well by default.</p>
|
||||||
|
<CSpecimen>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
|
||||||
|
<DChart title="Network Compliance" subtitle="Trailing 7 days" height={120}>
|
||||||
|
<div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-disabled)', fontFamily: 'var(--font-mono)', fontSize: 11 }}>chart well</div>
|
||||||
|
</DChart>
|
||||||
|
<DChart title="Status Distribution" subtitle="Last 4 cycles" height={120}>
|
||||||
|
<DLegend items={[{ label: 'Meets', color: DCC.green }, { label: 'Within 15%', color: DCC.amber }, { label: 'Below 15%', color: DCC.red }]} />
|
||||||
|
</DChart>
|
||||||
|
</div>
|
||||||
|
</CSpecimen>
|
||||||
|
|
||||||
|
<h3 style={subhead}>DefinitionTooltip</h3>
|
||||||
|
<p style={subblurb}>Hover popover used to surface a metric's title, business justification, and data sources.</p>
|
||||||
|
<CSpecimen>
|
||||||
|
<DTip title="VM-CRITICAL — Critical Vulnerabilities Patched" justification="Track the percentage of critical CVEs patched within the SLA window. Below-target performance creates exploitable risk on production assets." sources="Tenable, Atlas, JIRA" />
|
||||||
|
</CSpecimen>
|
||||||
|
</CSection>
|
||||||
|
|
||||||
|
<CSection id="assemblies" eyebrow="04 — Assemblies" title="How the parts compose">
|
||||||
|
<h3 style={subhead}>Metric health row</h3>
|
||||||
|
<p style={subblurb}>One MetricHealthCard per family, flexed evenly. Click a card to filter the device table to only its IDs; an "× clear filter" button appears in the section label when active.</p>
|
||||||
|
<CSpecimen>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600, color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 10 }}>
|
||||||
|
Metric Health — click to filter
|
||||||
|
<span style={{ marginLeft: 12, color: DCC.teal }}>× clear filter</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 10 }}>
|
||||||
|
<div style={{ flex: 1 }}><DMHC family={SAMPLE_FAMILY_BAD} active={true} onClick={() => {}} onInfoClick={() => {}} /></div>
|
||||||
|
<div style={{ flex: 1 }}><DMHC family={SAMPLE_FAMILY_OK} active={false} onClick={() => {}} onInfoClick={() => {}} /></div>
|
||||||
|
</div>
|
||||||
|
</CSpecimen>
|
||||||
|
|
||||||
|
<h3 style={subhead}>Device table</h3>
|
||||||
|
<p style={subblurb}>Toolbar (active/resolved tabs + hostname search) → header row → DeviceRows. Empty/loading/error states are centered messages inside the same chrome.</p>
|
||||||
|
<CSpecimen padding={0}>
|
||||||
|
<DDT>
|
||||||
|
<DDTT tab="active" onTabChange={() => {}} count={3} search="" onSearchChange={() => {}} />
|
||||||
|
<DDTH />
|
||||||
|
<DDR hostname="app-prod-04.steam.internal" ip="10.42.18.4" type="Linux server" failingMetrics={[{ metric_id: 'VM-CRITICAL', category: 'Vulnerability Management' }, { metric_id: 'EOL-OS', category: 'End-of-Life OS' }]} seenCount={5} hasNotes={true} onClick={() => {}} />
|
||||||
|
<DDR hostname="jumpbox-east.steam.internal" ip="10.42.4.7" type="Linux server" failingMetrics={[{ metric_id: 'AUTH-MFA', category: 'Access & MFA' }]} seenCount={4} hasNotes={true} onClick={() => {}} />
|
||||||
|
<DDR hostname="legacy-billing.steam.internal" ip="10.42.8.18" type="Windows server" failingMetrics={[{ metric_id: 'EOL-OS', category: 'End-of-Life OS' }]} seenCount={7} hasNotes={false} onClick={() => {}} />
|
||||||
|
</DDT>
|
||||||
|
</CSpecimen>
|
||||||
|
</CSection>
|
||||||
|
|
||||||
|
<CSection id="reference" eyebrow="05 — Reference" title="Full Compliance page" blurb="Every primitive composed exactly as CompliancePage.js renders. The frame below is scrollable.">
|
||||||
|
<div className="sample-frame" style={{
|
||||||
|
border: `1px solid ${dA(DCC.teal, 0.20)}`, borderRadius: 12,
|
||||||
|
overflow: 'hidden', maxHeight: 900, overflowY: 'auto',
|
||||||
|
background: 'var(--bg-page)',
|
||||||
|
}}>
|
||||||
|
<DPage />
|
||||||
|
</div>
|
||||||
|
</CSection>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.COMP_DOCS = { CKitDocs };
|
||||||
36
docs/design-system-redesign/ui_kits/compliance/README.md
Normal file
36
docs/design-system-redesign/ui_kits/compliance/README.md
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
# Compliance UI Kit
|
||||||
|
|
||||||
|
Visual vocabulary for the AEO Compliance view (`CompliancePage.js`).
|
||||||
|
|
||||||
|
## Files
|
||||||
|
- `index.html` — entry point.
|
||||||
|
- `CompPrimitives.jsx` — `CompPageHeader`, `CompButton`, `TeamTabs`, `MetricHealthCard`, `VariantPill`, `StatusRibbon`, `MetricBadge`, `SeenBadge`, `DeviceTable`/`DeviceRow`, `ChartCard`, `DefinitionTooltip`, `RollbackDialog`, `RollbackToast`, `CompIcon`.
|
||||||
|
- `CompliancePage.jsx` — full-page assembly.
|
||||||
|
- `KitDocs.jsx` — Overview · Tokens · Components · Assemblies · Reference.
|
||||||
|
|
||||||
|
## Identity
|
||||||
|
| Surface | Color | Hex |
|
||||||
|
|----------------------|--------|-----------|
|
||||||
|
| Page title + glow | teal | `#14B8A6` |
|
||||||
|
| Active team tab | teal | `#14B8A6` |
|
||||||
|
| Upload Report CTA | teal | `#14B8A6` |
|
||||||
|
| Selected device row | teal | `#14B8A6` |
|
||||||
|
|
||||||
|
## Status colors (target adherence)
|
||||||
|
| Status | Color | Hex |
|
||||||
|
|-------------------------|--------|-----------|
|
||||||
|
| Meets/Exceeds Target | green | `#10B981` |
|
||||||
|
| Within 15% of Target | amber | `#F59E0B` |
|
||||||
|
| Below 15% of Target | red | `#EF4444` |
|
||||||
|
|
||||||
|
## Category colors (badge tinting)
|
||||||
|
red · Vulnerability Management — amber · Access & MFA — purple · Logging & Monitoring — orange · End-of-Life OS / Endpoint Protection — sky · Application Security — slate · Asset Data Quality / Decommissioned
|
||||||
|
|
||||||
|
## Layout
|
||||||
|
Page header → team tabs → metric health row → 3×2 chart grid → device table.
|
||||||
|
|
||||||
|
## Page-level rules
|
||||||
|
1. Status colors are reserved for target adherence; never decorative.
|
||||||
|
2. A family's `worstStatus` (lowest-severity variant) drives card border + ribbon — one bad variant turns the whole family red.
|
||||||
|
3. Clicking a metric card filters the device table to its IDs; an "× clear filter" button is the only escape hatch shown inline in the section label.
|
||||||
|
4. SeenBadge escalates slate (1×) → amber (2–3×) → red (4×+).
|
||||||
30
docs/design-system-redesign/ui_kits/compliance/index.html
Normal file
30
docs/design-system-redesign/ui_kits/compliance/index.html
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>STEAM Security · Compliance UI Kit</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="stylesheet" href="../../colors_and_type.css" />
|
||||||
|
<style>
|
||||||
|
body { margin: 0; min-height: 100vh; }
|
||||||
|
.page-bg { min-height: 100vh; background: var(--bg-page); }
|
||||||
|
:target { scroll-margin-top: 120px; }
|
||||||
|
.sample-frame::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||||
|
.sample-frame::-webkit-scrollbar-thumb { background: rgba(20,184,166,0.25); border-radius: 4px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root" class="page-bg"></div>
|
||||||
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
||||||
|
<script type="text/babel" src="CompPrimitives.jsx"></script>
|
||||||
|
<script type="text/babel" src="CompliancePage.jsx"></script>
|
||||||
|
<script type="text/babel" src="KitDocs.jsx"></script>
|
||||||
|
<script type="text/babel">
|
||||||
|
const { CKitDocs } = window.COMP_DOCS;
|
||||||
|
function App() { return <main data-screen-label="Compliance Kit"><CKitDocs /></main>; }
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
151
docs/design-system-redesign/ui_kits/cve-dashboard/AppShell.jsx
Normal file
151
docs/design-system-redesign/ui_kits/cve-dashboard/AppShell.jsx
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
// AppShell.jsx — top bar, nav drawer, user menu for the STEAM Security Dashboard.
|
||||||
|
const { useState: useState_AS } = React;
|
||||||
|
const { Icon: I_AS, GroupBadge: GB_AS } = window.SDS;
|
||||||
|
|
||||||
|
function TopBar({ user, currentPage, onNav, onMenuClick }) {
|
||||||
|
return (
|
||||||
|
<header style={{
|
||||||
|
height: 56, position: 'sticky', top: 0, zIndex: 50,
|
||||||
|
background: 'var(--bg-surface)', borderBottom: '1px solid var(--border-1)',
|
||||||
|
display: 'flex', alignItems: 'center', padding: '0 20px', gap: 16,
|
||||||
|
}}>
|
||||||
|
<button onClick={onMenuClick} style={{
|
||||||
|
background: 'transparent', border: 'none', color: 'var(--fg-2)',
|
||||||
|
cursor: 'pointer', padding: 6, display: 'flex', alignItems: 'center',
|
||||||
|
}}><I_AS.Menu size={20} /></button>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||||
|
<I_AS.Shield size={22} style={{ color: 'var(--accent)' }} />
|
||||||
|
<div>
|
||||||
|
<div style={{ font: '700 15px var(--font-ui)', color: 'var(--fg-1)', letterSpacing: '0.02em', lineHeight: 1 }}>STEAM</div>
|
||||||
|
<div style={{ font: '500 9px var(--font-ui)', color: 'var(--fg-muted)', letterSpacing: '0.18em', marginTop: 2 }}>SECURITY</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav style={{ display: 'flex', gap: 2, marginLeft: 24 }}>
|
||||||
|
{['Home', 'Reporting', 'Compliance', 'Knowledge Base', 'Exports'].map(p => (
|
||||||
|
<NavTab key={p} label={p} active={currentPage === p} onClick={() => onNav(p)} />
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div style={{ flex: 1 }} />
|
||||||
|
|
||||||
|
<UserMenu user={user} />
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavTab({ label, active, onClick }) {
|
||||||
|
const [hover, setHover] = useState_AS(false);
|
||||||
|
return (
|
||||||
|
<button onClick={onClick}
|
||||||
|
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||||||
|
style={{
|
||||||
|
background: active ? 'var(--accent-soft)' : (hover ? 'var(--bg-elevated)' : 'transparent'),
|
||||||
|
color: active ? 'var(--accent)' : 'var(--fg-2)',
|
||||||
|
border: 'none', borderRadius: 6,
|
||||||
|
padding: '8px 12px', fontFamily: 'var(--font-ui)', fontWeight: active ? 600 : 500, fontSize: 13,
|
||||||
|
cursor: 'pointer', transition: 'background 150ms, color 150ms',
|
||||||
|
}}>{label}</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function UserMenu({ user }) {
|
||||||
|
const [open, setOpen] = useState_AS(false);
|
||||||
|
return (
|
||||||
|
<div style={{ position: 'relative' }}>
|
||||||
|
<button onClick={() => setOpen(!open)} style={{
|
||||||
|
background: 'transparent', border: '1px solid var(--border-1)', borderRadius: 6,
|
||||||
|
padding: '6px 10px', display: 'flex', alignItems: 'center', gap: 10,
|
||||||
|
color: 'var(--fg-1)', cursor: 'pointer', fontFamily: 'var(--font-ui)', fontSize: 13,
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
width: 26, height: 26, borderRadius: '50%', background: 'var(--accent-soft)',
|
||||||
|
color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 11,
|
||||||
|
}}>{user.name.split(' ').map(p => p[0]).join('').slice(0, 2)}</div>
|
||||||
|
<span>{user.name}</span>
|
||||||
|
<I_AS.ChevronD size={14} />
|
||||||
|
</button>
|
||||||
|
{open && (
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', right: 0, top: '110%', minWidth: 240,
|
||||||
|
background: 'var(--bg-surface)', border: '1px solid var(--border-1)',
|
||||||
|
borderRadius: 8, boxShadow: 'var(--shadow-popover)', padding: 8, zIndex: 60,
|
||||||
|
}}>
|
||||||
|
<div style={{ padding: '8px 10px', borderBottom: '1px solid var(--border-1)', marginBottom: 6 }}>
|
||||||
|
<div style={{ font: '600 13px var(--font-ui)', color: 'var(--fg-1)' }}>{user.name}</div>
|
||||||
|
<div style={{ font: '400 11px var(--font-mono)', color: 'var(--fg-muted)', marginTop: 2 }}>{user.email}</div>
|
||||||
|
<div style={{ marginTop: 8 }}><GB_AS group={user.group} /></div>
|
||||||
|
</div>
|
||||||
|
{['Manage Users', 'Audit Log', 'Settings', 'Sign Out'].map((it, i) => (
|
||||||
|
<MenuItem key={it} label={it} danger={i === 3} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenuItem({ label, danger }) {
|
||||||
|
const [hover, setHover] = useState_AS(false);
|
||||||
|
return <button
|
||||||
|
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||||||
|
style={{
|
||||||
|
width: '100%', textAlign: 'left',
|
||||||
|
background: hover ? 'var(--bg-elevated)' : 'transparent',
|
||||||
|
color: danger ? 'var(--sev-critical)' : 'var(--fg-2)',
|
||||||
|
border: 'none', borderRadius: 4, padding: '7px 10px',
|
||||||
|
fontFamily: 'var(--font-ui)', fontSize: 13, cursor: 'pointer',
|
||||||
|
}}>{label}</button>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavDrawer({ open, onClose, currentPage, onNav, isAdmin }) {
|
||||||
|
if (!open) return null;
|
||||||
|
const items = [
|
||||||
|
{ label: 'Home', icon: I_AS.Activity },
|
||||||
|
{ label: 'Reporting', icon: I_AS.FileText },
|
||||||
|
{ label: 'Compliance', icon: I_AS.Shield },
|
||||||
|
{ label: 'Knowledge Base', icon: I_AS.Folder },
|
||||||
|
{ label: 'Exports', icon: I_AS.Download },
|
||||||
|
...(isAdmin ? [{ label: 'Admin Panel', icon: I_AS.Users }] : []),
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div onClick={onClose} style={{
|
||||||
|
position: 'fixed', inset: 0, background: 'var(--bg-overlay)',
|
||||||
|
backdropFilter: 'blur(4px)', zIndex: 60,
|
||||||
|
}} />
|
||||||
|
<aside style={{
|
||||||
|
position: 'fixed', left: 0, top: 0, bottom: 0, width: 240, zIndex: 61,
|
||||||
|
background: 'var(--bg-surface)', borderRight: '1px solid var(--border-1)',
|
||||||
|
padding: 16, display: 'flex', flexDirection: 'column', gap: 4,
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8, padding: '4px 6px' }}>
|
||||||
|
<span style={{ font: '600 11px var(--font-ui)', color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Navigation</span>
|
||||||
|
<button onClick={onClose} style={{ background: 'transparent', border: 'none', color: 'var(--fg-muted)', cursor: 'pointer', display: 'flex' }}><I_AS.X size={16} /></button>
|
||||||
|
</div>
|
||||||
|
{items.map(it => (
|
||||||
|
<DrawerItem key={it.label} {...it} active={currentPage === it.label}
|
||||||
|
onClick={() => { onNav(it.label); onClose(); }} />
|
||||||
|
))}
|
||||||
|
</aside>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerItem({ label, icon: IcCmp, active, onClick }) {
|
||||||
|
const [hover, setHover] = useState_AS(false);
|
||||||
|
return <button onClick={onClick}
|
||||||
|
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||||||
|
style={{
|
||||||
|
display: 'flex', alignItems: 'center', gap: 10,
|
||||||
|
background: active ? 'var(--accent-soft)' : (hover ? 'var(--bg-elevated)' : 'transparent'),
|
||||||
|
color: active ? 'var(--accent)' : 'var(--fg-2)',
|
||||||
|
border: 'none', borderRadius: 6, padding: '9px 10px',
|
||||||
|
fontFamily: 'var(--font-ui)', fontWeight: active ? 600 : 500, fontSize: 13,
|
||||||
|
cursor: 'pointer', textAlign: 'left',
|
||||||
|
}}><IcCmp size={16} />{label}</button>;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.SDS_Shell = { TopBar, NavDrawer };
|
||||||
@@ -0,0 +1,351 @@
|
|||||||
|
// KnowledgeBase.jsx — recreation of the Knowledge Base page.
|
||||||
|
const { useState: useState_KB, useMemo: useMemo_KB } = React;
|
||||||
|
const { Button: Btn_KB, Card: Card_KB, Field: F_KB, Input: In_KB, Select: Sel_KB,
|
||||||
|
EmptyState: ES_KB, Icon: I_KB } = window.SDS;
|
||||||
|
|
||||||
|
const KB_ARTICLES = [
|
||||||
|
{ id: 1, title: 'NVD CVE Triage Runbook', category: 'Runbooks',
|
||||||
|
description: 'Standard procedure for triaging incoming NVD-sourced CVEs across vendor pairs.',
|
||||||
|
type: 'pdf', size: '412 KB', date: '2026-04-22', author: 'jramos', exts: ['pdf'] },
|
||||||
|
{ id: 2, title: 'FP Workflow Submission Guide', category: 'Runbooks',
|
||||||
|
description: 'How to compile evidence and submit False Positive workflows through the Ivanti Queue.',
|
||||||
|
type: 'md', size: '24 KB', date: '2026-04-18', author: 'mhall' },
|
||||||
|
{ id: 3, title: 'Cisco IOS-XE Advisory · cisco-sa-2024-0341', category: 'Vendor Advisories',
|
||||||
|
description: 'Vendor advisory for Cisco IOS-XE Web UI privilege escalation. Linked to 12 host findings.',
|
||||||
|
type: 'pdf', size: '1.3 MB', date: '2026-04-15', author: 'jramos' },
|
||||||
|
{ id: 4, title: 'AEO Compliance Schema Reference', category: 'Policies',
|
||||||
|
description: 'Authoritative metric ID list for the NTS_AEO weekly report. Used by the drift checker.',
|
||||||
|
type: 'md', size: '38 KB', date: '2026-04-09', author: 'kpatel' },
|
||||||
|
{ id: 5, title: 'Archer Risk Acceptance Process', category: 'Policies',
|
||||||
|
description: 'EXC ticket lifecycle, required documentation, and standard SLAs for risk acceptance.',
|
||||||
|
type: 'docx', size: '186 KB', date: '2026-04-02', author: 'mhall' },
|
||||||
|
{ id: 6, title: 'Q2 Vulnerability Posture Briefing', category: 'Reports',
|
||||||
|
description: 'Leadership briefing on Critical/High remediation throughput for FY26-Q2.',
|
||||||
|
type: 'pptx', size: '4.7 MB', date: '2026-03-30', author: 'jramos' },
|
||||||
|
{ id: 7, title: 'Ivanti / RiskSense API Integration Notes', category: 'Internal Docs',
|
||||||
|
description: 'Authentication, BU filters, severity range tuning, and rate-limit notes.',
|
||||||
|
type: 'md', size: '11 KB', date: '2026-03-21', author: 'kpatel' },
|
||||||
|
{ id: 8, title: 'CVSS Severity Cascade Rules', category: 'Internal Docs',
|
||||||
|
description: 'How v3.1 → v3.0 → v2.0 fallback is applied when scoring CVEs from NVD.',
|
||||||
|
type: 'md', size: '6 KB', date: '2026-03-14', author: 'mhall' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const CATEGORIES = ['All', 'Runbooks', 'Vendor Advisories', 'Policies', 'Reports', 'Internal Docs'];
|
||||||
|
|
||||||
|
const TYPE_COLORS = {
|
||||||
|
pdf: { c: '#EF4444', label: 'PDF' },
|
||||||
|
md: { c: '#38BDF8', label: 'MD' },
|
||||||
|
docx: { c: '#7DD3FC', label: 'DOCX' },
|
||||||
|
pptx: { c: '#F59E0B', label: 'PPTX' },
|
||||||
|
xlsx: { c: '#10B981', label: 'XLSX' },
|
||||||
|
};
|
||||||
|
|
||||||
|
function FileTypeChip({ type }) {
|
||||||
|
const v = TYPE_COLORS[type] || { c: 'var(--fg-muted)', label: type.toUpperCase() };
|
||||||
|
return <span style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
width: 36, height: 36, borderRadius: 6,
|
||||||
|
background: 'var(--bg-elevated)', border: `1px solid ${v.c}`,
|
||||||
|
color: v.c, fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 10,
|
||||||
|
flexShrink: 0,
|
||||||
|
}}>{v.label}</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ArticleRow({ article, onOpen, onDownload }) {
|
||||||
|
const [hover, setHover] = useState_KB(false);
|
||||||
|
return (
|
||||||
|
<div onClick={onOpen}
|
||||||
|
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||||||
|
style={{
|
||||||
|
display: 'flex', alignItems: 'center', gap: 14,
|
||||||
|
padding: '14px 18px',
|
||||||
|
background: hover
|
||||||
|
? 'linear-gradient(90deg, rgba(14,165,233,0.10) 0%, rgba(14,165,233,0.04) 100%)'
|
||||||
|
: 'transparent',
|
||||||
|
borderBottom: '1px solid var(--border-subtle)',
|
||||||
|
boxShadow: hover ? 'inset 3px 0 0 var(--intel-accent)' : 'none',
|
||||||
|
cursor: 'pointer', transition: 'all 200ms cubic-bezier(0.4,0,0.2,1)',
|
||||||
|
}}>
|
||||||
|
<FileTypeChip type={article.type} />
|
||||||
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
|
<div style={{ font: '600 14px var(--font-ui)', color: 'var(--fg-1)', marginBottom: 3,
|
||||||
|
whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{article.title}</div>
|
||||||
|
<div style={{ font: '400 12px var(--font-ui)', color: 'var(--fg-muted)',
|
||||||
|
whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{article.description}</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4, minWidth: 110 }}>
|
||||||
|
<span style={{
|
||||||
|
padding: '2px 8px', borderRadius: 4, background: 'var(--bg-elevated)',
|
||||||
|
color: 'var(--fg-2)', font: '500 11px var(--font-ui)',
|
||||||
|
}}>{article.category}</span>
|
||||||
|
<span style={{ font: '400 11px var(--font-mono)', color: 'var(--fg-muted)' }}>{article.date}</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4, minWidth: 90 }}>
|
||||||
|
<span style={{ font: '400 11px var(--font-mono)', color: 'var(--fg-muted)' }}>{article.size}</span>
|
||||||
|
<span style={{ font: '400 11px var(--font-mono)', color: 'var(--fg-disabled)' }}>{article.author}</span>
|
||||||
|
</div>
|
||||||
|
<button onClick={(e) => { e.stopPropagation(); onDownload(article); }} style={{
|
||||||
|
background: 'transparent', border: '1px solid var(--border-1)', borderRadius: 6,
|
||||||
|
padding: 7, cursor: 'pointer', color: 'var(--fg-2)', display: 'flex',
|
||||||
|
}} title="Download"><I_KB.Download size={14} /></button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CategoryPill({ label, active, count, onClick }) {
|
||||||
|
const [hover, setHover] = useState_KB(false);
|
||||||
|
return <button onClick={onClick}
|
||||||
|
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||||||
|
style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 8,
|
||||||
|
padding: '6px 14px', borderRadius: 6,
|
||||||
|
background: active
|
||||||
|
? 'linear-gradient(135deg, rgba(14,165,233,0.20) 0%, rgba(14,165,233,0.12) 100%)'
|
||||||
|
: (hover ? 'rgba(14,165,233,0.08)' : 'transparent'),
|
||||||
|
color: active ? 'var(--intel-accent-bright)' : 'var(--fg-2)',
|
||||||
|
border: `1px solid ${active ? 'var(--intel-accent)' : 'var(--border-default)'}`,
|
||||||
|
font: `700 11px var(--font-mono)`, textTransform: 'uppercase', letterSpacing: '0.5px',
|
||||||
|
textShadow: active ? '0 0 8px rgba(14,165,233,0.4)' : 'none',
|
||||||
|
boxShadow: active ? '0 0 16px rgba(14,165,233,0.20)' : 'none',
|
||||||
|
cursor: 'pointer', transition: 'all 200ms cubic-bezier(0.4,0,0.2,1)',
|
||||||
|
}}>{label}<span style={{
|
||||||
|
font: '700 10px var(--font-mono)', color: active ? 'var(--intel-accent-bright)' : 'var(--fg-muted)',
|
||||||
|
padding: '1px 6px', borderRadius: 999,
|
||||||
|
background: active ? 'rgba(14,165,233,0.15)' : 'rgba(148,163,184,0.10)',
|
||||||
|
}}>{count}</span></button>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function KnowledgeBaseViewer({ article, onClose }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div onClick={onClose} style={{
|
||||||
|
position: 'fixed', inset: 0, background: 'var(--bg-overlay)',
|
||||||
|
backdropFilter: 'blur(4px)', zIndex: 100,
|
||||||
|
}} />
|
||||||
|
<div style={{
|
||||||
|
position: 'fixed', right: 0, top: 0, bottom: 0, width: 'min(640px, 100vw)',
|
||||||
|
background: 'var(--bg-surface)', borderLeft: '1px solid var(--border-1)',
|
||||||
|
boxShadow: 'var(--shadow-modal)', zIndex: 101,
|
||||||
|
display: 'flex', flexDirection: 'column', animation: 'slideIn 240ms cubic-bezier(0.16,1,0.3,1)',
|
||||||
|
}}>
|
||||||
|
<header style={{
|
||||||
|
padding: '20px 24px', borderBottom: '1px solid var(--border-1)',
|
||||||
|
display: 'flex', alignItems: 'flex-start', gap: 14,
|
||||||
|
}}>
|
||||||
|
<FileTypeChip type={article.type} />
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
<div style={{ font: '600 16px var(--font-ui)', color: 'var(--fg-1)' }}>{article.title}</div>
|
||||||
|
<div style={{ font: '400 12px var(--font-mono)', color: 'var(--fg-muted)', marginTop: 4 }}>
|
||||||
|
{article.category} · {article.size} · {article.date} · {article.author}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button onClick={onClose} style={{
|
||||||
|
background: 'transparent', border: 'none', color: 'var(--fg-muted)',
|
||||||
|
cursor: 'pointer', padding: 6, display: 'flex',
|
||||||
|
}}><I_KB.X size={18} /></button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div style={{ flex: 1, overflowY: 'auto', padding: '24px' }}>
|
||||||
|
<div style={{ font: '500 11px var(--font-ui)', color: 'var(--fg-muted)',
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Description</div>
|
||||||
|
<div style={{ font: '400 14px/1.6 var(--font-ui)', color: 'var(--fg-2)', marginBottom: 24 }}>
|
||||||
|
{article.description}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ font: '500 11px var(--font-ui)', color: 'var(--fg-muted)',
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Preview</div>
|
||||||
|
<div style={{
|
||||||
|
background: 'var(--bg-page)', border: '1px solid var(--border-1)',
|
||||||
|
borderRadius: 8, padding: 24, minHeight: 320,
|
||||||
|
font: '400 13px/1.7 var(--font-ui)', color: 'var(--fg-2)',
|
||||||
|
}}>
|
||||||
|
<h3 style={{ font: '600 18px var(--font-ui)', color: 'var(--fg-1)', margin: '0 0 12px' }}>
|
||||||
|
{article.title}
|
||||||
|
</h3>
|
||||||
|
<p style={{ margin: '0 0 12px' }}>
|
||||||
|
This document is rendered inline in a sandboxed iframe (PDF) or as sanitised HTML
|
||||||
|
from the <code style={{ font: '500 12px var(--font-mono)', color: 'var(--accent)',
|
||||||
|
background: 'var(--bg-elevated)', padding: '1px 6px', borderRadius: 3 }}>
|
||||||
|
react-markdown</code> + <code style={{ font: '500 12px var(--font-mono)', color: 'var(--accent)',
|
||||||
|
background: 'var(--bg-elevated)', padding: '1px 6px', borderRadius: 3 }}>rehype-sanitize</code> pipeline.
|
||||||
|
</p>
|
||||||
|
<p style={{ margin: '0 0 12px' }}>
|
||||||
|
Authenticated users in any group may view; only Admin and Standard_User may upload or delete.
|
||||||
|
</p>
|
||||||
|
<ul style={{ margin: '0 0 12px 18px', padding: 0 }}>
|
||||||
|
<li>Allowed types: PDF, MD, TXT, Office, HTML, JSON, YAML, images</li>
|
||||||
|
<li>10 MB per-file limit · file extension allowlist</li>
|
||||||
|
<li>Standard_User can delete only articles they created</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer style={{
|
||||||
|
padding: '16px 24px', borderTop: '1px solid var(--border-1)',
|
||||||
|
display: 'flex', gap: 8, justifyContent: 'flex-end',
|
||||||
|
}}>
|
||||||
|
<Btn_KB variant="ghost" icon={<I_KB.External size={14} />}>Open in tab</Btn_KB>
|
||||||
|
<Btn_KB variant="primary" icon={<I_KB.Download size={14} />}>Download</Btn_KB>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<style>{`@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}`}</style>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function UploadModal({ onClose }) {
|
||||||
|
const [drag, setDrag] = useState_KB(false);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div onClick={onClose} style={{
|
||||||
|
position: 'fixed', inset: 0, background: 'var(--bg-overlay)',
|
||||||
|
backdropFilter: 'blur(4px)', zIndex: 100,
|
||||||
|
}} />
|
||||||
|
<div style={{
|
||||||
|
position: 'fixed', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
|
||||||
|
width: 'min(560px, 92vw)', background: 'var(--bg-surface)',
|
||||||
|
border: '1px solid var(--border-1)', borderRadius: 12,
|
||||||
|
boxShadow: 'var(--shadow-modal)', zIndex: 101,
|
||||||
|
}}>
|
||||||
|
<header style={{
|
||||||
|
padding: '20px 24px', borderBottom: '1px solid var(--border-1)',
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||||
|
}}>
|
||||||
|
<div style={{ font: '600 16px var(--font-ui)', color: 'var(--fg-1)' }}>Upload Article</div>
|
||||||
|
<button onClick={onClose} style={{
|
||||||
|
background: 'transparent', border: 'none', color: 'var(--fg-muted)',
|
||||||
|
cursor: 'pointer', padding: 6, display: 'flex',
|
||||||
|
}}><I_KB.X size={18} /></button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||||
|
<F_KB label="Title"><In_KB placeholder="e.g. Cisco IOS-XE Advisory · cisco-sa-2024-0341" /></F_KB>
|
||||||
|
<F_KB label="Category">
|
||||||
|
<Sel_KB defaultValue="Runbooks">
|
||||||
|
{CATEGORIES.filter(c => c !== 'All').map(c => <option key={c}>{c}</option>)}
|
||||||
|
</Sel_KB>
|
||||||
|
</F_KB>
|
||||||
|
<F_KB label="Description">
|
||||||
|
<textarea placeholder="Short description for the library list…" rows={3} style={{
|
||||||
|
background: 'var(--bg-input)', color: 'var(--fg-1)',
|
||||||
|
border: '1px solid var(--border-1)', borderRadius: 6, padding: '8px 10px',
|
||||||
|
fontFamily: 'var(--font-ui)', fontSize: 13, outline: 'none', resize: 'vertical',
|
||||||
|
}} />
|
||||||
|
</F_KB>
|
||||||
|
|
||||||
|
<div
|
||||||
|
onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
|
||||||
|
onDragLeave={() => setDrag(false)}
|
||||||
|
onDrop={(e) => { e.preventDefault(); setDrag(false); }}
|
||||||
|
style={{
|
||||||
|
border: `2px dashed ${drag ? 'var(--accent)' : 'var(--border-2)'}`,
|
||||||
|
borderRadius: 8, padding: 24, textAlign: 'center',
|
||||||
|
background: drag ? 'var(--accent-soft)' : 'var(--bg-page)',
|
||||||
|
transition: 'all 150ms',
|
||||||
|
}}>
|
||||||
|
<div style={{ color: drag ? 'var(--accent)' : 'var(--fg-muted)', display: 'flex', justifyContent: 'center', marginBottom: 8 }}>
|
||||||
|
<I_KB.Upload size={28} />
|
||||||
|
</div>
|
||||||
|
<div style={{ font: '600 13px var(--font-ui)', color: 'var(--fg-1)' }}>Drop file or click to browse</div>
|
||||||
|
<div style={{ font: '400 11px var(--font-mono)', color: 'var(--fg-muted)', marginTop: 4 }}>
|
||||||
|
PDF · MD · DOCX · XLSX · PPTX · TXT — max 10 MB
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer style={{
|
||||||
|
padding: '16px 24px', borderTop: '1px solid var(--border-1)',
|
||||||
|
display: 'flex', gap: 8, justifyContent: 'flex-end',
|
||||||
|
}}>
|
||||||
|
<Btn_KB variant="ghost" onClick={onClose}>Cancel</Btn_KB>
|
||||||
|
<Btn_KB variant="primary" icon={<I_KB.Upload size={14} />}>Upload</Btn_KB>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function KnowledgeBasePage() {
|
||||||
|
const [search, setSearch] = useState_KB('');
|
||||||
|
const [category, setCategory] = useState_KB('All');
|
||||||
|
const [active, setActive] = useState_KB(null);
|
||||||
|
const [uploading, setUploading] = useState_KB(false);
|
||||||
|
|
||||||
|
const counts = useMemo_KB(() => {
|
||||||
|
const c = { All: KB_ARTICLES.length };
|
||||||
|
KB_ARTICLES.forEach(a => { c[a.category] = (c[a.category] || 0) + 1; });
|
||||||
|
return c;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const filtered = useMemo_KB(() => KB_ARTICLES.filter(a => {
|
||||||
|
if (category !== 'All' && a.category !== category) return false;
|
||||||
|
if (search) {
|
||||||
|
const q = search.toLowerCase();
|
||||||
|
return a.title.toLowerCase().includes(q) || a.description.toLowerCase().includes(q);
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}), [search, category]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '24px 24px 48px', maxWidth: 1280, margin: '0 auto' }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
|
||||||
|
<div>
|
||||||
|
<h1 style={{
|
||||||
|
font: '700 24px var(--font-mono)', color: 'var(--intel-accent-bright)',
|
||||||
|
margin: 0, textTransform: 'uppercase', letterSpacing: '0.10em',
|
||||||
|
textShadow: 'var(--glow-heading)',
|
||||||
|
}}>Knowledge Base</h1>
|
||||||
|
<div style={{ font: '400 13px var(--font-ui)', color: 'var(--fg-muted)', marginTop: 6 }}>
|
||||||
|
Internal reference material — runbooks, advisories, policies
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 8 }}>
|
||||||
|
<Btn_KB variant="ghost" icon={<I_KB.Download size={14} />}>Export List</Btn_KB>
|
||||||
|
<Btn_KB variant="primary" icon={<I_KB.FilePlus size={14} />} onClick={() => setUploading(true)}>Upload Article</Btn_KB>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', gap: 12, marginBottom: 16 }}>
|
||||||
|
<div style={{ flex: 1, maxWidth: 420 }}>
|
||||||
|
<In_KB icon={<I_KB.Search size={14} />}
|
||||||
|
placeholder="Search title or description…"
|
||||||
|
value={search} onChange={(e) => setSearch(e.target.value)} />
|
||||||
|
</div>
|
||||||
|
<Sel_KB defaultValue="newest" style={{ minWidth: 160 }}>
|
||||||
|
<option value="newest">Newest first</option>
|
||||||
|
<option value="oldest">Oldest first</option>
|
||||||
|
<option value="title">Title A–Z</option>
|
||||||
|
</Sel_KB>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 16 }}>
|
||||||
|
{CATEGORIES.map(c => (
|
||||||
|
<CategoryPill key={c} label={c} count={counts[c] || 0}
|
||||||
|
active={category === c} onClick={() => setCategory(c)} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card_KB padding={0}>
|
||||||
|
{filtered.length === 0 ? (
|
||||||
|
<ES_KB icon={<I_KB.FileText size={32} />}
|
||||||
|
title="No articles match"
|
||||||
|
message="Try clearing the search box or selecting a different category." />
|
||||||
|
) : filtered.map((a, i) => (
|
||||||
|
<ArticleRow key={a.id} article={a}
|
||||||
|
onOpen={() => setActive(a)}
|
||||||
|
onDownload={(art) => console.log('download', art.title)} />
|
||||||
|
))}
|
||||||
|
</Card_KB>
|
||||||
|
|
||||||
|
<div style={{ marginTop: 12, font: '400 12px var(--font-mono)', color: 'var(--fg-muted)' }}>
|
||||||
|
{filtered.length} article{filtered.length === 1 ? '' : 's'}
|
||||||
|
{category !== 'All' && <> · filtered to <span style={{ color: 'var(--accent)' }}>{category}</span></>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{active && <KnowledgeBaseViewer article={active} onClose={() => setActive(null)} />}
|
||||||
|
{uploading && <UploadModal onClose={() => setUploading(false)} />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.SDS_KB = { KnowledgeBasePage };
|
||||||
250
docs/design-system-redesign/ui_kits/cve-dashboard/Primitives.jsx
Normal file
250
docs/design-system-redesign/ui_kits/cve-dashboard/Primitives.jsx
Normal file
@@ -0,0 +1,250 @@
|
|||||||
|
// Primitives.jsx — shared low-level UI for the STEAM Security Dashboard kit.
|
||||||
|
// Plain inline styles + token CSS variables. No external libs.
|
||||||
|
|
||||||
|
const { useState } = React;
|
||||||
|
|
||||||
|
/* ── Buttons ─────────────────────────────────────────────────── */
|
||||||
|
function Button({ variant = 'secondary', size = 'md', icon, children, onClick, disabled, style, ...rest }) {
|
||||||
|
const [hover, setHover] = useState(false);
|
||||||
|
const sizing = size === 'sm'
|
||||||
|
? { padding: '6px 12px', fontSize: 11 }
|
||||||
|
: { padding: '10px 18px', fontSize: 13 };
|
||||||
|
const variants = {
|
||||||
|
primary: {
|
||||||
|
bgRest: 'linear-gradient(135deg, rgba(14,165,233,0.15) 0%, rgba(14,165,233,0.10) 100%)',
|
||||||
|
bgHover: 'linear-gradient(135deg, rgba(14,165,233,0.25) 0%, rgba(14,165,233,0.20) 100%)',
|
||||||
|
bd: '#0EA5E9', fg: '#38BDF8',
|
||||||
|
glow: '0 0 20px rgba(14,165,233,0.25)', tshadow: '0 0 6px rgba(14,165,233,0.2)',
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
bgRest: 'linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(16,185,129,0.10) 100%)',
|
||||||
|
bgHover: 'linear-gradient(135deg, rgba(16,185,129,0.25) 0%, rgba(16,185,129,0.20) 100%)',
|
||||||
|
bd: '#10B981', fg: '#34D399',
|
||||||
|
glow: '0 0 20px rgba(16,185,129,0.25)', tshadow: '0 0 6px rgba(16,185,129,0.2)',
|
||||||
|
},
|
||||||
|
danger: {
|
||||||
|
bgRest: 'linear-gradient(135deg, rgba(239,68,68,0.15) 0%, rgba(239,68,68,0.10) 100%)',
|
||||||
|
bgHover: 'linear-gradient(135deg, rgba(239,68,68,0.25) 0%, rgba(239,68,68,0.20) 100%)',
|
||||||
|
bd: '#EF4444', fg: '#F87171',
|
||||||
|
glow: '0 0 20px rgba(239,68,68,0.25)', tshadow: '0 0 6px rgba(239,68,68,0.2)',
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
bgRest: 'transparent', bgHover: 'rgba(14,165,233,0.08)',
|
||||||
|
bd: 'rgba(14,165,233,0.30)', fg: 'var(--fg-2)',
|
||||||
|
glow: 'none', tshadow: 'none',
|
||||||
|
},
|
||||||
|
ghost: {
|
||||||
|
bgRest: 'transparent', bgHover: 'rgba(14,165,233,0.06)',
|
||||||
|
bd: 'transparent', fg: 'var(--fg-3)',
|
||||||
|
glow: 'none', tshadow: 'none',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const v = variants[variant] || variants.secondary;
|
||||||
|
return (
|
||||||
|
<button onClick={onClick} disabled={disabled}
|
||||||
|
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||||||
|
style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||||
|
background: disabled ? 'var(--bg-elevated)' : (hover ? v.bgHover : v.bgRest),
|
||||||
|
color: disabled ? 'var(--fg-disabled)' : v.fg,
|
||||||
|
border: `1px solid ${disabled ? 'var(--border-1)' : v.bd}`,
|
||||||
|
borderRadius: 6,
|
||||||
|
fontFamily: 'var(--font-mono)', fontWeight: 600,
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.5px',
|
||||||
|
textShadow: v.tshadow,
|
||||||
|
boxShadow: hover && !disabled
|
||||||
|
? `${v.glow}, 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.10)`
|
||||||
|
: '0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.10)',
|
||||||
|
transform: hover && !disabled ? 'translateY(-1px)' : 'translateY(0)',
|
||||||
|
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||||
|
transition: 'all 300ms cubic-bezier(0.4,0,0.2,1)',
|
||||||
|
...sizing, ...style,
|
||||||
|
}} {...rest}>
|
||||||
|
{icon}{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Severity badge — gradient + pulse-glow dot ──────────────── */
|
||||||
|
if (typeof document !== 'undefined' && !document.getElementById('sds-pulse-glow')) {
|
||||||
|
const s = document.createElement('style');
|
||||||
|
s.id = 'sds-pulse-glow';
|
||||||
|
s.textContent = '@keyframes sds-pulse-glow{0%,100%{opacity:1}50%{opacity:0.7}}';
|
||||||
|
document.head.appendChild(s);
|
||||||
|
}
|
||||||
|
function SeverityBadge({ level, score }) {
|
||||||
|
const map = {
|
||||||
|
Critical: { c: '#EF4444', text: '#FCA5A5', glow: '0 0 12px rgba(239,68,68,0.6), 0 0 6px rgba(239,68,68,0.4)' },
|
||||||
|
High: { c: '#F59E0B', text: '#FCD34D', glow: '0 0 12px rgba(245,158,11,0.6), 0 0 6px rgba(245,158,11,0.4)' },
|
||||||
|
Medium: { c: '#0EA5E9', text: '#7DD3FC', glow: '0 0 12px rgba(14,165,233,0.6), 0 0 6px rgba(14,165,233,0.4)' },
|
||||||
|
Low: { c: '#10B981', text: '#6EE7B7', glow: '0 0 12px rgba(16,185,129,0.6), 0 0 6px rgba(16,185,129,0.4)' },
|
||||||
|
};
|
||||||
|
const v = map[level] || map.Medium;
|
||||||
|
return (
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 8,
|
||||||
|
padding: '6px 14px', borderRadius: 6,
|
||||||
|
background: `linear-gradient(135deg, ${v.c}33 0%, ${v.c}26 100%)`,
|
||||||
|
color: v.text, border: `2px solid ${v.c}99`,
|
||||||
|
fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 11,
|
||||||
|
letterSpacing: '0.5px', textTransform: 'uppercase',
|
||||||
|
textShadow: `0 0 8px ${v.c}66`,
|
||||||
|
boxShadow: '0 4px 8px rgba(0,0,0,0.4)',
|
||||||
|
}}>
|
||||||
|
<span style={{
|
||||||
|
width: 8, height: 8, borderRadius: '50%', background: v.c,
|
||||||
|
boxShadow: v.glow, animation: 'sds-pulse-glow 2s ease-in-out infinite',
|
||||||
|
}} />
|
||||||
|
{level.toUpperCase()}{score && <span style={{ marginLeft: 4 }}>{score}</span>}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── SLA pill ────────────────────────────────────────────────── */
|
||||||
|
function SlaPill({ status }) {
|
||||||
|
const map = {
|
||||||
|
OVERDUE: { c: 'var(--sev-critical)', bg: 'var(--sev-critical-bg)' },
|
||||||
|
AT_RISK: { c: 'var(--sev-high)', bg: 'var(--sev-high-bg)' },
|
||||||
|
WITHIN_SLA: { c: 'var(--sev-low)', bg: 'var(--sev-low-bg)' },
|
||||||
|
};
|
||||||
|
const v = map[status] || map.WITHIN_SLA;
|
||||||
|
return <span style={{
|
||||||
|
padding: '2px 9px', borderRadius: 999, background: v.bg, color: v.c,
|
||||||
|
fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 10, letterSpacing: '.05em',
|
||||||
|
}}>{status}</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Group badge ─────────────────────────────────────────────── */
|
||||||
|
function GroupBadge({ group }) {
|
||||||
|
const map = {
|
||||||
|
Admin: { c: 'var(--group-admin)', bg: 'rgba(239,68,68,0.10)' },
|
||||||
|
Standard_User: { c: 'var(--group-standard)', bg: 'rgba(56,189,248,0.10)' },
|
||||||
|
Leadership: { c: 'var(--group-leadership)', bg: 'rgba(245,158,11,0.10)' },
|
||||||
|
Read_Only: { c: 'var(--group-readonly)', bg: 'rgba(148,163,184,0.10)' },
|
||||||
|
};
|
||||||
|
const v = map[group] || map.Read_Only;
|
||||||
|
const label = group.replace('_', ' ');
|
||||||
|
return <span style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||||
|
padding: '3px 9px', borderRadius: 999,
|
||||||
|
color: v.c, background: v.bg, border: `1px solid ${v.c}`,
|
||||||
|
fontFamily: 'var(--font-ui)', fontWeight: 600, fontSize: 11,
|
||||||
|
}}>
|
||||||
|
<span style={{ width: 6, height: 6, borderRadius: '50%', background: v.c }} />
|
||||||
|
{label}
|
||||||
|
</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Field / Input ───────────────────────────────────────────── */
|
||||||
|
function Field({ label, children, style }) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 4, ...style }}>
|
||||||
|
{label && <label style={{
|
||||||
|
fontFamily: 'var(--font-ui)', fontWeight: 500, fontSize: 11,
|
||||||
|
color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em',
|
||||||
|
}}>{label}</label>}
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Input({ icon, ...rest }) {
|
||||||
|
const [focus, setFocus] = useState(false);
|
||||||
|
return (
|
||||||
|
<div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
|
||||||
|
{icon && <span style={{ position: 'absolute', left: 10, color: 'var(--fg-muted)', display: 'flex' }}>{icon}</span>}
|
||||||
|
<input
|
||||||
|
onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
|
||||||
|
style={{
|
||||||
|
width: '100%', boxSizing: 'border-box',
|
||||||
|
background: 'var(--bg-input)', color: 'var(--fg-1)',
|
||||||
|
border: `1px solid ${focus ? 'var(--border-focus)' : 'var(--border-1)'}`,
|
||||||
|
boxShadow: focus ? 'var(--shadow-focus)' : 'none',
|
||||||
|
borderRadius: 6, padding: icon ? '8px 10px 8px 32px' : '8px 10px',
|
||||||
|
fontFamily: 'var(--font-ui)', fontSize: 13, outline: 'none',
|
||||||
|
transition: 'border 150ms',
|
||||||
|
}}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Select({ children, ...rest }) {
|
||||||
|
const [focus, setFocus] = useState(false);
|
||||||
|
return (
|
||||||
|
<select
|
||||||
|
onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
|
||||||
|
style={{
|
||||||
|
background: 'var(--bg-input)', color: 'var(--fg-1)',
|
||||||
|
border: `1px solid ${focus ? 'var(--border-focus)' : 'var(--border-1)'}`,
|
||||||
|
boxShadow: focus ? 'var(--shadow-focus)' : 'none',
|
||||||
|
borderRadius: 6, padding: '8px 10px',
|
||||||
|
fontFamily: 'var(--font-ui)', fontSize: 13, outline: 'none',
|
||||||
|
appearance: 'none',
|
||||||
|
}}
|
||||||
|
{...rest}>
|
||||||
|
{children}
|
||||||
|
</select>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Card ────────────────────────────────────────────────────── */
|
||||||
|
function Card({ children, style, padding = 20 }) {
|
||||||
|
return <div style={{
|
||||||
|
background: 'linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(51,65,85,0.9) 50%, rgba(30,41,59,0.95) 100%)',
|
||||||
|
border: '1.5px solid rgba(14,165,233,0.30)',
|
||||||
|
borderRadius: 8, padding,
|
||||||
|
boxShadow: '0 4px 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(14,165,233,0.10)',
|
||||||
|
...style,
|
||||||
|
}}>{children}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Empty state ─────────────────────────────────────────────── */
|
||||||
|
function EmptyState({ icon, title, message, action }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex', flexDirection: 'column', alignItems: 'center',
|
||||||
|
gap: 12, padding: '48px 24px', color: 'var(--fg-muted)', textAlign: 'center',
|
||||||
|
}}>
|
||||||
|
{icon && <div style={{ color: 'var(--fg-disabled)' }}>{icon}</div>}
|
||||||
|
<div style={{ fontFamily: 'var(--font-ui)', fontWeight: 600, fontSize: 16, color: 'var(--fg-2)' }}>{title}</div>
|
||||||
|
{message && <div style={{ fontFamily: 'var(--font-ui)', fontSize: 13, maxWidth: 360 }}>{message}</div>}
|
||||||
|
{action}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Lucide icons (inline SVG, currentColor) ─────────────────── */
|
||||||
|
const ic = (path) => ({ size = 16, strokeWidth = 1.75, ...rest }) => (
|
||||||
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none"
|
||||||
|
stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
|
||||||
|
style={{ flexShrink: 0 }} {...rest}>{path}</svg>
|
||||||
|
);
|
||||||
|
const Icon = {
|
||||||
|
Shield: ic(<><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></>),
|
||||||
|
Search: ic(<><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></>),
|
||||||
|
Filter: ic(<><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></>),
|
||||||
|
Sync: ic(<><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></>),
|
||||||
|
Download: ic(<><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></>),
|
||||||
|
Upload: ic(<><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></>),
|
||||||
|
File: ic(<><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></>),
|
||||||
|
FileText: ic(<><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="13" y2="17"/></>),
|
||||||
|
FilePlus: ic(<><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="12" x2="12" y2="18"/><line x1="9" y1="15" x2="15" y2="15"/></>),
|
||||||
|
Folder: ic(<><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></>),
|
||||||
|
Eye: ic(<><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></>),
|
||||||
|
X: ic(<><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>),
|
||||||
|
ChevronD: ic(<><polyline points="6 9 12 15 18 9"/></>),
|
||||||
|
ChevronR: ic(<><polyline points="9 18 15 12 9 6"/></>),
|
||||||
|
Plus: ic(<><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>),
|
||||||
|
Menu: ic(<><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></>),
|
||||||
|
Trash: ic(<><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></>),
|
||||||
|
External: ic(<><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></>),
|
||||||
|
Calendar: ic(<><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>),
|
||||||
|
Activity: ic(<><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></>),
|
||||||
|
Users: ic(<><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>),
|
||||||
|
Scroll: ic(<><path d="M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/></>),
|
||||||
|
Bell: ic(<><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></>),
|
||||||
|
};
|
||||||
|
|
||||||
|
window.SDS = { Button, SeverityBadge, SlaPill, GroupBadge, Field, Input, Select, Card, EmptyState, Icon };
|
||||||
30
docs/design-system-redesign/ui_kits/cve-dashboard/README.md
Normal file
30
docs/design-system-redesign/ui_kits/cve-dashboard/README.md
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
# CVE Dashboard UI Kit
|
||||||
|
|
||||||
|
High-fidelity recreation of the **STEAM Security Dashboard** chrome plus a focused build of the **Knowledge Base** page.
|
||||||
|
|
||||||
|
## Files
|
||||||
|
|
||||||
|
| File | What |
|
||||||
|
|---|---|
|
||||||
|
| `index.html` | Mounts the kit. Opens to the Knowledge Base page; top-bar nav switches between pages. |
|
||||||
|
| `Primitives.jsx` | `Button`, `Field`, `Input`, `Select`, `Card`, `SeverityBadge`, `SlaPill`, `GroupBadge`, `EmptyState`, `Icon` (lucide line icons inlined as SVG). |
|
||||||
|
| `AppShell.jsx` | Top bar (brand mark + nav + UserMenu), NavDrawer overlay. |
|
||||||
|
| `KnowledgeBase.jsx` | Knowledge Base page · article rows · category filter · upload modal · slide-out viewer. |
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
1. Open `index.html` in a browser.
|
||||||
|
2. The header nav lets you switch pages — `Knowledge Base` is fully built; the other tabs render a placeholder.
|
||||||
|
3. Click any article row to open the **viewer panel** (slide-out from the right).
|
||||||
|
4. Click **Upload Article** to open the upload modal.
|
||||||
|
|
||||||
|
## What is NOT built
|
||||||
|
|
||||||
|
This kit intentionally cuts the scope to one page (the Knowledge Base) plus the chrome. Reporting, Compliance, Home, Admin, and Exports are placeholders — the primitives in `Primitives.jsx` and the shell in `AppShell.jsx` are sufficient to compose those surfaces in a few hours.
|
||||||
|
|
||||||
|
## Conventions used
|
||||||
|
|
||||||
|
- All colour, type, spacing, radius, elevation pulls from `../../colors_and_type.css`.
|
||||||
|
- No external icon library — lucide icons are inlined as SVG inside `Icon.*`.
|
||||||
|
- Hover states are JS-driven here (mirrors the legacy dashboard pattern); production code should migrate these to CSS `:hover`.
|
||||||
|
- All data is fake. Network calls are stubbed.
|
||||||
66
docs/design-system-redesign/ui_kits/cve-dashboard/index.html
Normal file
66
docs/design-system-redesign/ui_kits/cve-dashboard/index.html
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>STEAM Security · CVE Dashboard UI Kit</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="stylesheet" href="../../colors_and_type.css" />
|
||||||
|
<style>
|
||||||
|
body { margin: 0; min-height: 100vh; }
|
||||||
|
.page-bg { min-height: 100vh; background: var(--bg-page); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root" class="page-bg"></div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<script type="text/babel" src="Primitives.jsx"></script>
|
||||||
|
<script type="text/babel" src="AppShell.jsx"></script>
|
||||||
|
<script type="text/babel" src="KnowledgeBase.jsx"></script>
|
||||||
|
|
||||||
|
<script type="text/babel">
|
||||||
|
const { useState } = React;
|
||||||
|
const { TopBar, NavDrawer } = window.SDS_Shell;
|
||||||
|
const { KnowledgeBasePage } = window.SDS_KB;
|
||||||
|
const { Card, EmptyState, Icon } = window.SDS;
|
||||||
|
|
||||||
|
const USER = { name: 'J. Ramos', email: 'jramos@steam.local', group: 'Admin' };
|
||||||
|
|
||||||
|
function Placeholder({ name }) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '48px 24px', maxWidth: 1280, margin: '0 auto' }}>
|
||||||
|
<h1 style={{ font: '600 24px var(--font-ui)', color: 'var(--fg-1)', margin: '0 0 4px' }}>{name}</h1>
|
||||||
|
<div style={{ font: '400 13px var(--font-ui)', color: 'var(--fg-muted)', marginBottom: 24 }}>
|
||||||
|
This surface is intentionally not built out in the UI kit — primitives + shell are sufficient to compose it.
|
||||||
|
</div>
|
||||||
|
<Card padding={0}>
|
||||||
|
<EmptyState icon={<Icon.FileText size={32} />}
|
||||||
|
title={`${name} placeholder`}
|
||||||
|
message="Open the Knowledge Base tab to see the focused page recreation." />
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [page, setPage] = useState('Knowledge Base');
|
||||||
|
const [drawer, setDrawer] = useState(false);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<TopBar user={USER} currentPage={page} onNav={setPage} onMenuClick={() => setDrawer(true)} />
|
||||||
|
<NavDrawer open={drawer} onClose={() => setDrawer(false)}
|
||||||
|
currentPage={page} onNav={setPage} isAdmin={USER.group === 'Admin'} />
|
||||||
|
<main data-screen-label={page}>
|
||||||
|
{page === 'Knowledge Base' ? <KnowledgeBasePage /> : <Placeholder name={page} />}
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
371
docs/design-system-redesign/ui_kits/home/HomePage.jsx
Normal file
371
docs/design-system-redesign/ui_kits/home/HomePage.jsx
Normal file
@@ -0,0 +1,371 @@
|
|||||||
|
// HomePage.jsx — full-page assembly of the CVE Dashboard Home view.
|
||||||
|
// Rebuilt 1:1 from frontend/src/App.js (currentPage === 'home').
|
||||||
|
//
|
||||||
|
// Layout: top stat row (4 metric cards) → 12-col grid below
|
||||||
|
// • col-span-9 (left): Quick CVE Lookup → Search/Filter → CVE list
|
||||||
|
// • col-span-3 (right): Calendar → Open Tickets → Archer → Ivanti
|
||||||
|
|
||||||
|
const {
|
||||||
|
COLORS: HC, StatCard, HomeCard, CardTitle, HomeButton, SeverityBadge, StatusBadge,
|
||||||
|
HomeInput, HomeSelect, FieldLabel, ResultBanner,
|
||||||
|
BigStat, MiniTicket, CVERow, VendorEntry,
|
||||||
|
HomeIcon: HI, CalendarMini, ArchiveSummary, ScrollList, EmptyState,
|
||||||
|
withAlpha: hAlpha,
|
||||||
|
} = window.HOME;
|
||||||
|
|
||||||
|
const { useState: useHomePageState } = React;
|
||||||
|
|
||||||
|
/* ── Sample data — close to what App.js renders against ──────── */
|
||||||
|
const SAMPLE_CVES = [
|
||||||
|
{
|
||||||
|
id: 'CVE-2025-1014',
|
||||||
|
severity: 'Critical',
|
||||||
|
description: 'Heap-based buffer overflow in the libnetfilter_queue user-space packet handler permits a remote attacker to execute arbitrary code via crafted ICMP traffic.',
|
||||||
|
statuses: ['Open', 'In Progress'],
|
||||||
|
vendors: [
|
||||||
|
{ vendor: 'Red Hat', severity: 'Critical', status: 'Open', docCount: 4 },
|
||||||
|
{ vendor: 'Ubuntu', severity: 'Critical', status: 'In Progress', docCount: 2 },
|
||||||
|
{ vendor: 'SUSE', severity: 'High', status: 'Resolved', docCount: 3 },
|
||||||
|
],
|
||||||
|
tickets: [
|
||||||
|
{ key: 'SEC-4821', summary: 'Patch netfilter on prod ingress fleet', status: 'In Progress' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'CVE-2025-0944',
|
||||||
|
severity: 'High',
|
||||||
|
description: 'Authentication bypass in admin console allows unauthenticated access to telemetry exports.',
|
||||||
|
statuses: ['Addressed'],
|
||||||
|
vendors: [
|
||||||
|
{ vendor: 'Cisco', severity: 'High', status: 'Addressed', docCount: 2 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'CVE-2024-9912',
|
||||||
|
severity: 'Medium',
|
||||||
|
description: 'Improper cert validation in the JIRA Server REST client could lead to MITM under attacker-controlled DNS.',
|
||||||
|
statuses: ['Resolved'],
|
||||||
|
vendors: [
|
||||||
|
{ vendor: 'Atlassian', severity: 'Medium', status: 'Resolved', docCount: 1 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const SAMPLE_OPEN_TICKETS = [
|
||||||
|
{ key: 'SEC-4821', cveId: 'CVE-2025-1014', vendor: 'Red Hat', status: 'In Progress', summary: 'Patch netfilter ingress' },
|
||||||
|
{ key: 'SEC-4794', cveId: 'CVE-2025-0944', vendor: 'Cisco', status: 'Open', summary: 'Roll admin-console hotfix' },
|
||||||
|
{ key: 'SEC-4760', cveId: 'CVE-2024-9912', vendor: 'Atlassian', status: 'Open', summary: 'Validate cert chain' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const SAMPLE_ARCHER = [
|
||||||
|
{ key: 'EXC-08291', cveId: 'CVE-2025-1014', vendor: 'SUSE', status: 'Pending Review' },
|
||||||
|
{ key: 'EXC-08214', cveId: 'CVE-2024-9912', vendor: 'Adobe', status: 'Draft' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const SAMPLE_IVANTI = [
|
||||||
|
{ id: 'WF-1042', name: 'Quarterly compliance scan', state: 'In Review', type: 'compliance audit', when: 'Apr 24' },
|
||||||
|
{ id: 'WF-1038', name: 'Endpoint patch rollout — Linux fleet', state: 'In Progress', type: 'patch deploy', when: 'Apr 22' },
|
||||||
|
{ id: 'WF-1034', name: 'Identity provider rotation', state: 'Approved', type: 'access change', when: 'Apr 21' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const ARCHIVE_SUMMARY = [
|
||||||
|
{ label: 'In Review', count: 12, tone: 'amber' },
|
||||||
|
{ label: 'In Progress', count: 8, tone: 'sky' },
|
||||||
|
{ label: 'Approved', count: 17, tone: 'green' },
|
||||||
|
{ label: 'Closed', count: 41, tone: 'neutral' },
|
||||||
|
];
|
||||||
|
|
||||||
|
/* ── Page ────────────────────────────────────────────────────── */
|
||||||
|
function HomePage() {
|
||||||
|
const [expanded, setExpanded] = useHomePageState(SAMPLE_CVES[0].id);
|
||||||
|
const [scanResult, setScanResult] = useHomePageState({ tone: 'success', text: 'CVE-2025-1014 addressed (3 vendors)' });
|
||||||
|
const [search, setSearch] = useHomePageState('');
|
||||||
|
const [vendor, setVendor] = useHomePageState('All Vendors');
|
||||||
|
const [severity, setSeverity] = useHomePageState('All Severities');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div data-screen-label="01 Home" style={{
|
||||||
|
padding: 32, minHeight: '100vh', background: 'var(--bg-page)',
|
||||||
|
fontFamily: 'var(--font-display)',
|
||||||
|
}}>
|
||||||
|
{/* ── Top: 4-up stats ── */}
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
|
||||||
|
<StatCard label="Total CVEs" value="247" tone="sky" />
|
||||||
|
<StatCard label="Vendor Entries" value="412" tone="neutral" />
|
||||||
|
<StatCard label="Open Tickets" value="18" tone="amber" />
|
||||||
|
<StatCard label="Critical" value="6" tone="red" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── 12-col body ── */}
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>
|
||||||
|
|
||||||
|
{/* LEFT (col-span-9) */}
|
||||||
|
<div style={{ gridColumn: 'span 9', display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||||
|
|
||||||
|
{/* Quick CVE Lookup */}
|
||||||
|
<HomeCard>
|
||||||
|
<CardTitle color={HC.sky} icon="search">Quick CVE Lookup</CardTitle>
|
||||||
|
<div style={{ display: 'flex', gap: 12 }}>
|
||||||
|
<HomeInput placeholder="Enter CVE ID (e.g., CVE-2025-1014)" />
|
||||||
|
<HomeButton variant="primary" icon="search" onClick={() => setScanResult({ tone: 'success', text: 'CVE-2025-1014 addressed (3 vendors)' })}>
|
||||||
|
Scan
|
||||||
|
</HomeButton>
|
||||||
|
</div>
|
||||||
|
{scanResult && (
|
||||||
|
<div style={{ marginTop: 16 }}>
|
||||||
|
<ResultBanner tone={scanResult.tone} title={scanResult.text}>
|
||||||
|
<div style={{ display: 'grid', gap: 10, marginTop: 8 }}>
|
||||||
|
{SAMPLE_CVES[0].vendors.map(v => (
|
||||||
|
<div key={v.vendor} style={{
|
||||||
|
padding: 12, background: 'rgba(15,23,42,0.7)',
|
||||||
|
border: '1px solid rgba(14,165,233,0.30)', borderRadius: 6,
|
||||||
|
boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
|
||||||
|
}}>
|
||||||
|
<div style={{ fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 6 }}>{v.vendor}</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-2)' }}>
|
||||||
|
<span><strong style={{ color: 'var(--fg-1)' }}>Sev:</strong> {v.severity}</span>
|
||||||
|
<span><strong style={{ color: 'var(--fg-1)' }}>Status:</strong> {v.status}</span>
|
||||||
|
<span><strong style={{ color: 'var(--fg-1)' }}>Docs:</strong> {v.docCount}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ResultBanner>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</HomeCard>
|
||||||
|
|
||||||
|
{/* Search + Filter */}
|
||||||
|
<HomeCard>
|
||||||
|
<div style={{ display: 'grid', gap: 16 }}>
|
||||||
|
<div>
|
||||||
|
<FieldLabel icon="search">Search CVEs</FieldLabel>
|
||||||
|
<HomeInput value={search} onChange={e => setSearch(e.target.value)} placeholder="CVE ID or description…" />
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
|
||||||
|
<div>
|
||||||
|
<FieldLabel icon="filter">Vendor</FieldLabel>
|
||||||
|
<HomeSelect value={vendor} onChange={e => setVendor(e.target.value)} options={['All Vendors', 'Red Hat', 'Cisco', 'Ubuntu', 'SUSE', 'Atlassian', 'Adobe']} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<FieldLabel icon="alert">Severity</FieldLabel>
|
||||||
|
<HomeSelect value={severity} onChange={e => setSeverity(e.target.value)} options={['All Severities', 'Critical', 'High', 'Medium', 'Low']} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</HomeCard>
|
||||||
|
|
||||||
|
{/* Results summary */}
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<p style={{ margin: 0, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-2)' }}>
|
||||||
|
<strong style={{ color: HC.sky, fontWeight: 700 }}>{SAMPLE_CVES.length}</strong> CVEs
|
||||||
|
<span style={{ color: 'var(--fg-disabled)', margin: '0 8px' }}>•</span>
|
||||||
|
<span style={{ color: 'var(--fg-1)' }}>{SAMPLE_CVES.reduce((n, c) => n + c.vendors.length, 0)}</span> vendor entries
|
||||||
|
</p>
|
||||||
|
<HomeButton variant="primary" icon="download">Export 2 Docs</HomeButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CVE list */}
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||||
|
{SAMPLE_CVES.map(cve => (
|
||||||
|
<CVERow
|
||||||
|
key={cve.id}
|
||||||
|
cveId={cve.id}
|
||||||
|
severity={cve.severity}
|
||||||
|
description={cve.description}
|
||||||
|
vendorCount={cve.vendors.length}
|
||||||
|
docCount={cve.vendors.reduce((s, v) => s + v.docCount, 0)}
|
||||||
|
statuses={cve.statuses}
|
||||||
|
expanded={expanded === cve.id}
|
||||||
|
onToggle={() => setExpanded(expanded === cve.id ? null : cve.id)}
|
||||||
|
>
|
||||||
|
{/* meta row */}
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-2)' }}>
|
||||||
|
<span>Published: 2025-03-12</span>
|
||||||
|
<span style={{ color: HC.sky }}>•</span>
|
||||||
|
<span>{cve.vendors.length} affected vendor{cve.vendors.length !== 1 ? 's' : ''}</span>
|
||||||
|
{cve.vendors.length >= 2 && (
|
||||||
|
<HomeButton variant="danger" icon="trash" size="sm" style={{ marginLeft: 8 }}>Delete All</HomeButton>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{/* vendor sub-cards */}
|
||||||
|
{cve.vendors.map((v, i) => (
|
||||||
|
<VendorEntry
|
||||||
|
key={`${cve.id}-${v.vendor}`}
|
||||||
|
vendor={v.vendor}
|
||||||
|
severity={v.severity}
|
||||||
|
status={v.status}
|
||||||
|
docCount={v.docCount}
|
||||||
|
onView={() => {}}
|
||||||
|
onEdit={() => {}}
|
||||||
|
onDelete={() => {}}
|
||||||
|
>
|
||||||
|
{/* For the first vendor of the first CVE, demonstrate the doc + ticket inset */}
|
||||||
|
{i === 0 && cve.id === SAMPLE_CVES[0].id && (
|
||||||
|
<>
|
||||||
|
<DocInset />
|
||||||
|
{cve.tickets && <TicketInset tickets={cve.tickets} />}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</VendorEntry>
|
||||||
|
))}
|
||||||
|
</CVERow>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* RIGHT (col-span-3) */}
|
||||||
|
<div style={{ gridColumn: 'span 3', display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||||
|
{/* Calendar */}
|
||||||
|
<HomeCard padding={20} leftRail={HC.sky}>
|
||||||
|
<CardTitle color={HC.sky} icon="calendar">Calendar</CardTitle>
|
||||||
|
<CalendarMini today={26} markedDays={{ 14: 'red', 18: 'amber', 22: 'sky', 24: 'amber' }} />
|
||||||
|
</HomeCard>
|
||||||
|
|
||||||
|
{/* Open Tickets */}
|
||||||
|
<HomeCard padding={20} leftRail={HC.amber}>
|
||||||
|
<CardTitle
|
||||||
|
color={HC.amber}
|
||||||
|
icon="alert"
|
||||||
|
action={<HomeButton variant="warning" icon="plus" size="sm" />}
|
||||||
|
>Open Tickets</CardTitle>
|
||||||
|
<BigStat value={SAMPLE_OPEN_TICKETS.length} label="Active" color={HC.amber} />
|
||||||
|
<ScrollList maxHeight={280}>
|
||||||
|
{SAMPLE_OPEN_TICKETS.map(t => (
|
||||||
|
<MiniTicket key={t.key} keyText={t.key} cveId={t.cveId} vendor={t.vendor} summary={t.summary} status={t.status} tone="amber" onEdit={() => {}} onDelete={() => {}} />
|
||||||
|
))}
|
||||||
|
</ScrollList>
|
||||||
|
</HomeCard>
|
||||||
|
|
||||||
|
{/* Archer Risk */}
|
||||||
|
<HomeCard padding={20} leftRail={HC.purple}>
|
||||||
|
<CardTitle
|
||||||
|
color={HC.purple}
|
||||||
|
icon="shield"
|
||||||
|
action={<button style={{ background: hAlpha(HC.purple, 0.18), border: `1px solid ${HC.purple}`, color: HC.purple, padding: '4px 8px', borderRadius: 4, fontFamily: 'var(--font-mono)', fontSize: 11, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4 }}><HI name="plus" size={12} color={HC.purple} /></button>}
|
||||||
|
>Archer Risk Tickets</CardTitle>
|
||||||
|
<BigStat value={SAMPLE_ARCHER.length} label="Active" color={HC.purple} />
|
||||||
|
<ScrollList maxHeight={220}>
|
||||||
|
{SAMPLE_ARCHER.map(t => (
|
||||||
|
<MiniTicket key={t.key} keyText={t.key} cveId={t.cveId} vendor={t.vendor} status={t.status} tone="purple" onEdit={() => {}} onDelete={() => {}} />
|
||||||
|
))}
|
||||||
|
</ScrollList>
|
||||||
|
</HomeCard>
|
||||||
|
|
||||||
|
{/* Ivanti Workflows */}
|
||||||
|
<HomeCard padding={20} leftRail={HC.teal}>
|
||||||
|
<CardTitle
|
||||||
|
color={HC.teal}
|
||||||
|
icon="activity"
|
||||||
|
action={<button style={{ background: hAlpha(HC.teal, 0.18), border: `1px solid ${HC.teal}`, color: HC.teal, padding: '4px 8px', borderRadius: 4, fontFamily: 'var(--font-mono)', fontSize: 11, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4 }}><HI name="refresh" size={12} color={HC.teal} /> Sync</button>}
|
||||||
|
>Ivanti Workflows</CardTitle>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-disabled)', marginBottom: 12 }}>
|
||||||
|
Synced Apr 26 · 9:42 AM
|
||||||
|
</div>
|
||||||
|
<ArchiveSummary items={ARCHIVE_SUMMARY} />
|
||||||
|
<BigStat value="78" label="Total Workflows" color={HC.teal} />
|
||||||
|
<ScrollList maxHeight={240}>
|
||||||
|
{SAMPLE_IVANTI.map(wf => (
|
||||||
|
<div key={wf.id} style={{
|
||||||
|
background: 'linear-gradient(135deg, rgba(30,41,59,0.85), rgba(51,65,85,0.75))',
|
||||||
|
border: `1px solid ${hAlpha(HC.teal, 0.25)}`, borderRadius: 6,
|
||||||
|
padding: 10,
|
||||||
|
boxShadow: '0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03)',
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 6, marginBottom: 4 }}>
|
||||||
|
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, color: '#5EEAD4' }}>{wf.id}</span>
|
||||||
|
<StatusBadge tone="teal" size="sm">{wf.state}</StatusBadge>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-display)', fontSize: 12, color: 'var(--fg-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginBottom: 4 }}>{wf.name}</div>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-2)' }}>
|
||||||
|
<span>{wf.type}</span>
|
||||||
|
<span style={{ color: 'var(--fg-disabled)' }}>{wf.when}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</ScrollList>
|
||||||
|
</HomeCard>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Insets used inside the first VendorEntry ────────────────── */
|
||||||
|
function DocInset() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h5 style={{
|
||||||
|
margin: '0 0 12px 0', display: 'flex', alignItems: 'center', gap: 6,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
|
||||||
|
color: 'var(--fg-1)', textTransform: 'uppercase', letterSpacing: '0.08em',
|
||||||
|
}}>
|
||||||
|
<HI name="doc" size={13} color={HC.sky} />
|
||||||
|
Documents (4)
|
||||||
|
</h5>
|
||||||
|
<div style={{ display: 'grid', gap: 8 }}>
|
||||||
|
{[
|
||||||
|
{ name: 'rh-advisory-2025-1014.pdf', meta: 'advisory · 220 KB' },
|
||||||
|
{ name: 'patch-notes-rhel9.pdf', meta: 'patch · 85 KB · approved by sec-eng' },
|
||||||
|
].map(d => (
|
||||||
|
<div key={d.name} style={{
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||||
|
padding: '10px 12px', borderRadius: 4,
|
||||||
|
background: 'rgba(15,23,42,0.6)', border: '1px solid rgba(14,165,233,0.15)',
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 1, minWidth: 0 }}>
|
||||||
|
<input type="checkbox" style={{ accentColor: HC.sky }} />
|
||||||
|
<HI name="doc" size={16} color={HC.sky} />
|
||||||
|
<div style={{ minWidth: 0 }}>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-1)', fontWeight: 500 }}>{d.name}</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-2)' }}>{d.meta}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 6 }}>
|
||||||
|
<HomeButton variant="neutral" size="sm">View</HomeButton>
|
||||||
|
<HomeButton variant="danger" size="sm">Del</HomeButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<HomeButton variant="neutral" icon="upload" size="sm" style={{ marginTop: 12 }}>Upload Doc</HomeButton>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TicketInset({ tickets }) {
|
||||||
|
return (
|
||||||
|
<div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid rgba(245,158,11,0.30)' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
||||||
|
<h5 style={{
|
||||||
|
margin: 0, display: 'flex', alignItems: 'center', gap: 6,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
|
||||||
|
color: 'var(--fg-1)', textTransform: 'uppercase', letterSpacing: '0.08em',
|
||||||
|
}}>
|
||||||
|
<HI name="alert" size={13} color={HC.amber} />
|
||||||
|
JIRA Tickets ({tickets.length})
|
||||||
|
</h5>
|
||||||
|
<HomeButton variant="primary" icon="plus" size="sm">Add Ticket</HomeButton>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gap: 8 }}>
|
||||||
|
{tickets.map(t => (
|
||||||
|
<div key={t.key} style={{
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||||
|
padding: '10px 12px', borderRadius: 6,
|
||||||
|
background: 'linear-gradient(135deg, rgba(19,25,55,0.85), rgba(30,39,73,0.75))',
|
||||||
|
border: '1px solid rgba(255,184,0,0.30)',
|
||||||
|
boxShadow: '0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04)',
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, minWidth: 0 }}>
|
||||||
|
<a href="#" onClick={e => e.preventDefault()} style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, color: HC.sky, textDecoration: 'none' }}>{t.key}</a>
|
||||||
|
<span style={{ fontFamily: 'var(--font-display)', fontSize: 12, color: 'var(--fg-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.summary}</span>
|
||||||
|
<StatusBadge tone="amber" size="sm">{t.status}</StatusBadge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.HOME_PAGE = { HomePage };
|
||||||
662
docs/design-system-redesign/ui_kits/home/HomePrimitives.jsx
Normal file
662
docs/design-system-redesign/ui_kits/home/HomePrimitives.jsx
Normal file
@@ -0,0 +1,662 @@
|
|||||||
|
// HomePrimitives.jsx — primitives for the CVE Dashboard Home page kit.
|
||||||
|
// Lifted directly from frontend/src/App.js (the home view), normalized to
|
||||||
|
// match the same vocabulary the Reporting + Knowledge Base kits use.
|
||||||
|
//
|
||||||
|
// Exported on window.HOME for the assembly + docs files to consume.
|
||||||
|
|
||||||
|
const { useState: useHomeState } = React;
|
||||||
|
|
||||||
|
/* ── Tokens ──────────────────────────────────────────────────────
|
||||||
|
Identical palette to Reporting + KB. Home adds purple (Archer)
|
||||||
|
and teal (Ivanti) — both used as left-rail / title-glow colors
|
||||||
|
on the right-side panel stack. */
|
||||||
|
const H_COLORS = {
|
||||||
|
sky: '#0EA5E9',
|
||||||
|
skySoft: '#7DD3FC',
|
||||||
|
green: '#10B981',
|
||||||
|
amber: '#F59E0B',
|
||||||
|
amberSoft: '#FCD34D',
|
||||||
|
red: '#EF4444',
|
||||||
|
redSoft: '#FCA5A5',
|
||||||
|
purple: '#8B5CF6',
|
||||||
|
teal: '#0D9488',
|
||||||
|
};
|
||||||
|
|
||||||
|
/* Card chrome shared with the rest of the system. One chrome, every panel. */
|
||||||
|
const CARD_BG = 'linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%)';
|
||||||
|
const CARD_BORDER = '1.5px solid rgba(14,165,233,0.12)';
|
||||||
|
const CARD_BORDER_HOVER = '1.5px solid rgba(14,165,233,0.35)';
|
||||||
|
|
||||||
|
/* ── StatCard ────────────────────────────────────────────────────
|
||||||
|
Top-of-page metric tile. Color-coded by tone — sky for neutral
|
||||||
|
counts, amber for "needs attention", red for critical. Top edge
|
||||||
|
has a soft horizontal glow line in the same color. */
|
||||||
|
function StatCard({ label, value, tone = 'sky', mono = true }) {
|
||||||
|
const c = H_COLORS[tone] || H_COLORS.sky;
|
||||||
|
const isAccent = tone !== 'neutral';
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
position: 'relative', overflow: 'hidden',
|
||||||
|
background: CARD_BG,
|
||||||
|
border: isAccent ? `2px solid ${c}` : CARD_BORDER,
|
||||||
|
borderRadius: 8, padding: 16,
|
||||||
|
boxShadow: isAccent
|
||||||
|
? `0 4px 16px rgba(0,0,0,0.5), 0 0 20px ${withAlpha(c, 0.15)}, inset 0 1px 0 ${withAlpha(c, 0.15)}`
|
||||||
|
: '0 4px 16px rgba(0,0,0,0.5)',
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', top: 0, left: 0, right: 0, height: 2,
|
||||||
|
background: `linear-gradient(90deg, transparent, ${c}, transparent)`,
|
||||||
|
boxShadow: `0 0 8px ${withAlpha(c, 0.5)}`,
|
||||||
|
}} />
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
|
||||||
|
color: 'var(--fg-2)', textTransform: 'uppercase', letterSpacing: '0.1em',
|
||||||
|
marginBottom: 4,
|
||||||
|
}}>
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: mono ? 'var(--font-mono)' : 'var(--font-display)',
|
||||||
|
fontSize: 24, fontWeight: 700, color: c,
|
||||||
|
textShadow: isAccent ? `0 0 16px ${withAlpha(c, 0.4)}` : 'none',
|
||||||
|
lineHeight: 1,
|
||||||
|
}}>
|
||||||
|
{value}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── HomeCard ────────────────────────────────────────────────────
|
||||||
|
Same chrome as Reporting's KbCard but without a label slot —
|
||||||
|
the home cards put their title inline above the body. Used as
|
||||||
|
the wrapper for Quick Lookup, the filter row, and CVE rows. */
|
||||||
|
function HomeCard({ children, padding = 24, hover = true, leftRail, style }) {
|
||||||
|
const [h, setH] = useHomeState(false);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onMouseEnter={() => hover && setH(true)}
|
||||||
|
onMouseLeave={() => setH(false)}
|
||||||
|
style={{
|
||||||
|
background: CARD_BG,
|
||||||
|
border: h ? CARD_BORDER_HOVER : CARD_BORDER,
|
||||||
|
borderLeft: leftRail ? `3px solid ${leftRail}` : (h ? CARD_BORDER_HOVER : CARD_BORDER).split(' ').slice(0).join(' '),
|
||||||
|
borderRadius: 8,
|
||||||
|
padding,
|
||||||
|
transition: 'border-color 200ms ease, box-shadow 200ms ease',
|
||||||
|
position: 'relative',
|
||||||
|
...style,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── CardTitle ───────────────────────────────────────────────────
|
||||||
|
Mono uppercase, glow color matches the card's identity (sky for
|
||||||
|
neutral, amber for tickets, purple for Archer, teal for Ivanti). */
|
||||||
|
function CardTitle({ color = H_COLORS.sky, icon, children, action }) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12, gap: 12 }}>
|
||||||
|
<h3 style={{
|
||||||
|
margin: 0,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600,
|
||||||
|
color, textTransform: 'uppercase', letterSpacing: '0.1em',
|
||||||
|
textShadow: `0 0 12px ${withAlpha(color, 0.4)}`,
|
||||||
|
display: 'flex', alignItems: 'center', gap: 8,
|
||||||
|
}}>
|
||||||
|
{icon && <HomeIcon name={icon} size={16} color={color} />}
|
||||||
|
{children}
|
||||||
|
</h3>
|
||||||
|
{action}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── HomeButton ──────────────────────────────────────────────────
|
||||||
|
Wraps the four button variants the Home page uses, keeping the
|
||||||
|
exact same tinted-fill / outlined treatment as the Reporting kit
|
||||||
|
so all pages feel consistent. */
|
||||||
|
function HomeButton({ variant = 'neutral', icon, children, size = 'md', ...rest }) {
|
||||||
|
const [hover, setHover] = useHomeState(false);
|
||||||
|
const v = {
|
||||||
|
primary: { bg: hover ? 'rgba(16,185,129,0.18)' : 'rgba(16,185,129,0.10)', bd: H_COLORS.green, fg: H_COLORS.green },
|
||||||
|
neutral: { bg: hover ? 'rgba(14,165,233,0.10)' : 'transparent', bd: 'rgba(14,165,233,0.5)', fg: H_COLORS.sky },
|
||||||
|
subtle: { bg: hover ? 'rgba(14,165,233,0.16)' : 'rgba(14,165,233,0.08)', bd: 'rgba(14,165,233,0.30)', fg: H_COLORS.sky },
|
||||||
|
danger: { bg: hover ? 'rgba(239,68,68,0.18)' : 'rgba(239,68,68,0.10)', bd: 'rgba(239,68,68,0.5)', fg: H_COLORS.red },
|
||||||
|
warning: { bg: hover ? 'rgba(245,158,11,0.18)' : 'rgba(245,158,11,0.10)', bd: 'rgba(245,158,11,0.5)', fg: H_COLORS.amber },
|
||||||
|
}[variant];
|
||||||
|
const padX = size === 'sm' ? 10 : 14;
|
||||||
|
const padY = size === 'sm' ? 4 : 8;
|
||||||
|
const fs = size === 'sm' ? 11 : 12;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||||||
|
style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||||
|
padding: `${padY}px ${padX}px`, borderRadius: 6,
|
||||||
|
background: v.bg, border: `1px solid ${v.bd}`, color: v.fg,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: fs, fontWeight: 600,
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.06em',
|
||||||
|
cursor: 'pointer', transition: 'all 160ms ease', whiteSpace: 'nowrap',
|
||||||
|
}}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
{icon && <HomeIcon name={icon} size={fs + 2} color={v.fg} />}
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── SeverityBadge ───────────────────────────────────────────────
|
||||||
|
Strong tinted-fill badge used in CVE rows. Critical/High/Medium/Low. */
|
||||||
|
function SeverityBadge({ level }) {
|
||||||
|
const map = {
|
||||||
|
Critical: { c: H_COLORS.red, text: H_COLORS.redSoft },
|
||||||
|
High: { c: H_COLORS.amber, text: H_COLORS.amberSoft },
|
||||||
|
Medium: { c: H_COLORS.sky, text: H_COLORS.skySoft },
|
||||||
|
Low: { c: H_COLORS.green, text: '#6EE7B7' },
|
||||||
|
}[level] || { c: H_COLORS.sky, text: H_COLORS.skySoft };
|
||||||
|
return (
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||||
|
background: `linear-gradient(135deg, ${withAlpha(map.c, 0.25)}, ${withAlpha(map.c, 0.20)})`,
|
||||||
|
border: `2px solid ${map.c}`, borderRadius: 6,
|
||||||
|
padding: '4px 10px',
|
||||||
|
color: map.text, fontWeight: 700, fontSize: 11,
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||||||
|
fontFamily: 'var(--font-mono)',
|
||||||
|
textShadow: `0 0 8px ${withAlpha(map.c, 0.5)}`,
|
||||||
|
boxShadow: `0 0 16px ${withAlpha(map.c, 0.25)}, 0 4px 8px rgba(0,0,0,0.4)`,
|
||||||
|
}}>
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
|
||||||
|
background: map.c, boxShadow: `0 0 8px ${map.c}`,
|
||||||
|
}} />
|
||||||
|
{level}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── StatusBadge ─────────────────────────────────────────────────
|
||||||
|
Tone-coded text badge used for ticket statuses (Open / In Progress /
|
||||||
|
Closed / Draft / Accepted). Smaller and lighter than SeverityBadge. */
|
||||||
|
function StatusBadge({ tone = 'sky', children, size = 'md' }) {
|
||||||
|
const c = H_COLORS[tone] || H_COLORS.sky;
|
||||||
|
const fs = size === 'sm' ? 10 : 11;
|
||||||
|
const pad = size === 'sm' ? '3px 7px' : '4px 9px';
|
||||||
|
return (
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||||
|
background: withAlpha(c, 0.18),
|
||||||
|
border: `1px solid ${c}`, borderRadius: 4,
|
||||||
|
padding: pad, color: c,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: fs, fontWeight: 600,
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
}}>
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
|
||||||
|
background: c, boxShadow: `0 0 6px ${c}`,
|
||||||
|
}} />
|
||||||
|
{children}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── HomeInput / HomeSelect ──────────────────────────────────────
|
||||||
|
The intel-input look: dark fill + sky border on focus. */
|
||||||
|
function HomeInput({ icon, ...rest }) {
|
||||||
|
const [focus, setFocus] = useHomeState(false);
|
||||||
|
return (
|
||||||
|
<div style={{ position: 'relative', flex: 1 }}>
|
||||||
|
{icon && (
|
||||||
|
<div style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: H_COLORS.sky }}>
|
||||||
|
<HomeIcon name={icon} size={14} color={H_COLORS.sky} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<input
|
||||||
|
onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
|
||||||
|
style={{
|
||||||
|
width: '100%', boxSizing: 'border-box',
|
||||||
|
background: 'rgba(15,23,42,0.85)',
|
||||||
|
border: `1px solid ${focus ? H_COLORS.sky : 'rgba(14,165,233,0.25)'}`,
|
||||||
|
borderRadius: 6,
|
||||||
|
padding: icon ? '9px 12px 9px 34px' : '9px 12px',
|
||||||
|
color: 'var(--fg-1)',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 13,
|
||||||
|
outline: 'none', transition: 'border-color 160ms ease',
|
||||||
|
boxShadow: focus ? `0 0 0 3px ${withAlpha(H_COLORS.sky, 0.15)}` : 'none',
|
||||||
|
}}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function HomeSelect({ value, onChange, options }) {
|
||||||
|
return (
|
||||||
|
<select value={value} onChange={onChange} style={{
|
||||||
|
width: '100%', boxSizing: 'border-box',
|
||||||
|
background: 'rgba(15,23,42,0.85)',
|
||||||
|
border: '1px solid rgba(14,165,233,0.25)', borderRadius: 6,
|
||||||
|
padding: '9px 12px', color: 'var(--fg-1)',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 13,
|
||||||
|
outline: 'none', appearance: 'none',
|
||||||
|
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230EA5E9' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")`,
|
||||||
|
backgroundRepeat: 'no-repeat', backgroundPosition: 'right 12px center', paddingRight: 32,
|
||||||
|
}}>
|
||||||
|
{options.map(o => <option key={o} value={o}>{o}</option>)}
|
||||||
|
</select>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FieldLabel({ icon, children }) {
|
||||||
|
return (
|
||||||
|
<label style={{
|
||||||
|
display: 'flex', alignItems: 'center', gap: 6,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
|
||||||
|
color: 'var(--fg-2)', textTransform: 'uppercase', letterSpacing: '0.08em',
|
||||||
|
marginBottom: 8,
|
||||||
|
}}>
|
||||||
|
{icon && <HomeIcon name={icon} size={13} color="currentColor" />}
|
||||||
|
{children}
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── ResultBanner ────────────────────────────────────────────────
|
||||||
|
Sub-card used in Quick Lookup to surface scan results.
|
||||||
|
Tones: success (CVE addressed), warning (not found), error. */
|
||||||
|
function ResultBanner({ tone = 'success', icon, title, children }) {
|
||||||
|
const map = {
|
||||||
|
success: { c: H_COLORS.green, bg: 'rgba(16,185,129,0.10)', bd: 'rgba(16,185,129,0.30)' },
|
||||||
|
warning: { c: H_COLORS.amber, bg: 'rgba(245,158,11,0.10)', bd: 'rgba(245,158,11,0.30)' },
|
||||||
|
error: { c: H_COLORS.red, bg: 'rgba(239,68,68,0.10)', bd: 'rgba(239,68,68,0.30)' },
|
||||||
|
}[tone];
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex', alignItems: 'flex-start', gap: 12,
|
||||||
|
padding: 16, borderRadius: 6,
|
||||||
|
background: map.bg, border: `1px solid ${map.bd}`,
|
||||||
|
}}>
|
||||||
|
<div style={{ color: map.c, marginTop: 1 }}>
|
||||||
|
<HomeIcon name={icon || tone} size={18} color={map.c} />
|
||||||
|
</div>
|
||||||
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600,
|
||||||
|
color: map.c, marginBottom: children ? 8 : 0,
|
||||||
|
}}>
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── BigStat ─────────────────────────────────────────────────────
|
||||||
|
The centered "active count + label" shown at the top of each
|
||||||
|
right-rail panel (Open Tickets · Archer · Ivanti). */
|
||||||
|
function BigStat({ value, label, color = H_COLORS.sky }) {
|
||||||
|
return (
|
||||||
|
<div style={{ textAlign: 'center', marginBottom: 12 }}>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 32, fontWeight: 700,
|
||||||
|
color, textShadow: `0 0 16px ${withAlpha(color, 0.4)}`, lineHeight: 1,
|
||||||
|
}}>
|
||||||
|
{value}
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
|
||||||
|
color: 'var(--fg-2)', textTransform: 'uppercase', letterSpacing: '0.12em',
|
||||||
|
marginTop: 6,
|
||||||
|
}}>
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── MiniTicket ──────────────────────────────────────────────────
|
||||||
|
Compact card shown inside the right-rail scrollable lists.
|
||||||
|
Color-coded by category via the `tone` prop (amber/purple/teal). */
|
||||||
|
function MiniTicket({ keyText, cveId, vendor, status, tone = 'amber', summary, onEdit, onDelete }) {
|
||||||
|
const c = H_COLORS[tone] || H_COLORS.amber;
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
background: 'linear-gradient(135deg, rgba(30,41,59,0.85), rgba(51,65,85,0.75))',
|
||||||
|
border: `1px solid ${withAlpha(c, 0.25)}`, borderRadius: 6,
|
||||||
|
padding: 10,
|
||||||
|
boxShadow: '0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03)',
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 6, marginBottom: 4 }}>
|
||||||
|
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, color: H_COLORS.sky }}>
|
||||||
|
{keyText}
|
||||||
|
</span>
|
||||||
|
{(onEdit || onDelete) && (
|
||||||
|
<div style={{ display: 'flex', gap: 4 }}>
|
||||||
|
{onEdit && <button onClick={onEdit} style={iconBtn(H_COLORS.amber)}><HomeIcon name="edit" size={11} color="currentColor" /></button>}
|
||||||
|
{onDelete && <button onClick={onDelete} style={iconBtn(H_COLORS.red)}><HomeIcon name="trash" size={11} color="currentColor" /></button>}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-1)', marginBottom: 2 }}>{cveId}</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-2)' }}>{vendor}</div>
|
||||||
|
{summary && (
|
||||||
|
<div style={{
|
||||||
|
fontSize: 11, color: 'var(--fg-2)', marginTop: 4,
|
||||||
|
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||||||
|
fontFamily: 'var(--font-display)',
|
||||||
|
}}>{summary}</div>
|
||||||
|
)}
|
||||||
|
{status && (
|
||||||
|
<div style={{ marginTop: 8 }}>
|
||||||
|
<StatusBadge tone={tone} size="sm">{status}</StatusBadge>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const iconBtn = (color) => ({
|
||||||
|
background: 'transparent', border: 'none', color: 'var(--fg-2)',
|
||||||
|
cursor: 'pointer', padding: 2, display: 'inline-flex', alignItems: 'center',
|
||||||
|
transition: 'color 120ms ease',
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ── CVERow ──────────────────────────────────────────────────────
|
||||||
|
The main "row" in the home feed. Collapsed = chevron · CVE-ID ·
|
||||||
|
description · meta row (severity badge, vendor count, doc count,
|
||||||
|
statuses). Expanded = full description + admin actions slot. */
|
||||||
|
function CVERow({ cveId, severity, description, vendorCount, docCount, statuses, expanded, onToggle, children }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
background: CARD_BG, border: CARD_BORDER, borderRadius: 8,
|
||||||
|
transition: 'border-color 200ms ease',
|
||||||
|
}}>
|
||||||
|
<button
|
||||||
|
onClick={onToggle}
|
||||||
|
style={{
|
||||||
|
width: '100%', textAlign: 'left',
|
||||||
|
background: 'transparent', border: 'none',
|
||||||
|
padding: 24, cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6 }}>
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-block', transform: expanded ? 'rotate(0)' : 'rotate(-90deg)',
|
||||||
|
transition: 'transform 200ms ease', color: H_COLORS.sky,
|
||||||
|
}}>
|
||||||
|
<HomeIcon name="chevron" size={18} color={H_COLORS.sky} />
|
||||||
|
</span>
|
||||||
|
<h3 style={{
|
||||||
|
margin: 0, fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 700,
|
||||||
|
color: H_COLORS.sky, letterSpacing: '-0.01em',
|
||||||
|
}}>{cveId}</h3>
|
||||||
|
</div>
|
||||||
|
<div style={{ marginLeft: 30 }}>
|
||||||
|
<p style={{
|
||||||
|
margin: '0 0 8px 0',
|
||||||
|
color: 'var(--fg-1)', fontSize: 13, lineHeight: 1.5,
|
||||||
|
fontFamily: 'var(--font-display)',
|
||||||
|
display: '-webkit-box', WebkitLineClamp: expanded ? 'unset' : 1,
|
||||||
|
WebkitBoxOrient: 'vertical', overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
}}>
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
|
||||||
|
<SeverityBadge level={severity} />
|
||||||
|
<span style={metaText}>{vendorCount} vendor{vendorCount !== 1 ? 's' : ''}</span>
|
||||||
|
<span style={{ ...metaText, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
|
||||||
|
<HomeIcon name="doc" size={11} color="currentColor" />
|
||||||
|
{docCount} doc{docCount !== 1 ? 's' : ''}
|
||||||
|
</span>
|
||||||
|
<span style={metaText}>{statuses.join(', ')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
{expanded && children && (
|
||||||
|
<div style={{ padding: '0 24px 24px', marginLeft: 30 }}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const metaText = {
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-2)',
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ── VendorEntry ─────────────────────────────────────────────────
|
||||||
|
Sub-card inside an expanded CVE row, one per vendor that filed
|
||||||
|
the CVE. Holds vendor name, severity, status, doc count, and
|
||||||
|
inline action buttons. */
|
||||||
|
function VendorEntry({ vendor, severity, status, docCount, children, onView, onEdit, onDelete }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
background: 'linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(30,41,59,0.9) 100%)',
|
||||||
|
border: '1.5px solid rgba(14,165,233,0.30)', borderRadius: 6,
|
||||||
|
padding: 16, marginBottom: 12,
|
||||||
|
boxShadow: '0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(14,165,233,0.08)',
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
|
||||||
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
|
||||||
|
<h4 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, color: 'var(--fg-1)' }}>{vendor}</h4>
|
||||||
|
<SeverityBadge level={severity} />
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 16, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-2)' }}>
|
||||||
|
<span>Status: <strong style={{ color: 'var(--fg-1)', fontWeight: 500 }}>{status}</strong></span>
|
||||||
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
|
||||||
|
<HomeIcon name="doc" size={13} color="currentColor" />
|
||||||
|
{docCount} doc{docCount !== 1 ? 's' : ''}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
|
||||||
|
{onView && <HomeButton variant="neutral" icon="eye" size="sm" onClick={onView}>View</HomeButton>}
|
||||||
|
{onEdit && <HomeButton variant="warning" icon="edit" size="sm" onClick={onEdit} />}
|
||||||
|
{onDelete && <HomeButton variant="danger" icon="trash" size="sm" onClick={onDelete} />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{children && (
|
||||||
|
<div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid rgba(14,165,233,0.20)' }}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── HomeIcon ────────────────────────────────────────────────────
|
||||||
|
Inline SVGs covering every icon used on the home page so the kit
|
||||||
|
has no external icon-font dependency. Keys mirror lucide-react names. */
|
||||||
|
function HomeIcon({ name, size = 16, color = 'currentColor' }) {
|
||||||
|
const p = {
|
||||||
|
width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
|
||||||
|
stroke: color, strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round',
|
||||||
|
style: { display: 'inline-block', verticalAlign: 'middle' },
|
||||||
|
};
|
||||||
|
switch (name) {
|
||||||
|
case 'search': return <svg {...p}><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>;
|
||||||
|
case 'filter': return <svg {...p}><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>;
|
||||||
|
case 'alert': return <svg {...p}><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>;
|
||||||
|
case 'check':
|
||||||
|
case 'success': return <svg {...p}><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>;
|
||||||
|
case 'warning': return <svg {...p}><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>;
|
||||||
|
case 'error':
|
||||||
|
case 'x': return <svg {...p}><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>;
|
||||||
|
case 'shield': return <svg {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;
|
||||||
|
case 'activity': return <svg {...p}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>;
|
||||||
|
case 'doc': return <svg {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>;
|
||||||
|
case 'eye': return <svg {...p}><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>;
|
||||||
|
case 'edit': return <svg {...p}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>;
|
||||||
|
case 'trash': return <svg {...p}><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>;
|
||||||
|
case 'plus': return <svg {...p}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>;
|
||||||
|
case 'refresh': return <svg {...p}><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/></svg>;
|
||||||
|
case 'chevron': return <svg {...p}><polyline points="6 9 12 15 18 9"/></svg>;
|
||||||
|
case 'upload': return <svg {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>;
|
||||||
|
case 'download': return <svg {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>;
|
||||||
|
case 'calendar': return <svg {...p}><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>;
|
||||||
|
default: return <svg {...p}><circle cx="12" cy="12" r="10"/></svg>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── CalendarMini ────────────────────────────────────────────────
|
||||||
|
Minimal calendar surface for the right rail. Static — accepts a
|
||||||
|
`today` index and an optional `markedDays` map for severity dots. */
|
||||||
|
function CalendarMini({ month = 'April 2026', today = 26, markedDays = {} }) {
|
||||||
|
const dows = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
|
||||||
|
// April 2026 starts on Wednesday — empty cells for S/M/T
|
||||||
|
const startOffset = 3;
|
||||||
|
const daysInMonth = 30;
|
||||||
|
const cells = [...Array(startOffset).fill(null), ...Array.from({ length: daysInMonth }, (_, i) => i + 1)];
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div style={{
|
||||||
|
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||||
|
marginBottom: 12,
|
||||||
|
}}>
|
||||||
|
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-1)', fontWeight: 600 }}>{month}</span>
|
||||||
|
<div style={{ display: 'flex', gap: 4 }}>
|
||||||
|
<button style={navBtn}>‹</button>
|
||||||
|
<button style={navBtn}>›</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2 }}>
|
||||||
|
{dows.map((d, i) => (
|
||||||
|
<div key={`dow-${i}`} style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-disabled)',
|
||||||
|
textAlign: 'center', padding: '4px 0', fontWeight: 600,
|
||||||
|
}}>{d}</div>
|
||||||
|
))}
|
||||||
|
{cells.map((day, i) => {
|
||||||
|
if (day === null) return <div key={`empty-${i}`} />;
|
||||||
|
const mark = markedDays[day];
|
||||||
|
const isToday = day === today;
|
||||||
|
return (
|
||||||
|
<button key={`day-${day}`} style={{
|
||||||
|
position: 'relative',
|
||||||
|
padding: '6px 0', borderRadius: 4,
|
||||||
|
background: isToday ? withAlpha(H_COLORS.sky, 0.20) : 'transparent',
|
||||||
|
border: isToday ? `1px solid ${H_COLORS.sky}` : '1px solid transparent',
|
||||||
|
color: isToday ? H_COLORS.sky : 'var(--fg-1)',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: isToday ? 700 : 500,
|
||||||
|
cursor: 'pointer', transition: 'background 120ms ease',
|
||||||
|
}}>
|
||||||
|
{day}
|
||||||
|
{mark && (
|
||||||
|
<span style={{
|
||||||
|
position: 'absolute', bottom: 2, left: '50%', transform: 'translateX(-50%)',
|
||||||
|
width: 4, height: 4, borderRadius: '50%',
|
||||||
|
background: H_COLORS[mark] || H_COLORS.amber,
|
||||||
|
}} />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const navBtn = {
|
||||||
|
background: 'transparent', border: '1px solid rgba(14,165,233,0.25)',
|
||||||
|
color: H_COLORS.sky, borderRadius: 4, width: 22, height: 22,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 12, cursor: 'pointer',
|
||||||
|
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ── ArchiveSummary ──────────────────────────────────────────────
|
||||||
|
The bar of state pills that lives at the top of the Ivanti card.
|
||||||
|
Each pill shows an Ivanti workflow state + count, color-coded. */
|
||||||
|
function ArchiveSummary({ items, activeFilter, onSelect }) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>
|
||||||
|
{items.map(it => {
|
||||||
|
const c = H_COLORS[it.tone] || H_COLORS.teal;
|
||||||
|
const active = activeFilter === it.label;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={it.label}
|
||||||
|
onClick={() => onSelect && onSelect(active ? null : it.label)}
|
||||||
|
style={{
|
||||||
|
flex: '1 1 60px',
|
||||||
|
padding: '8px 10px',
|
||||||
|
background: active ? withAlpha(c, 0.20) : withAlpha(c, 0.08),
|
||||||
|
border: `1px solid ${active ? c : withAlpha(c, 0.30)}`,
|
||||||
|
borderRadius: 4,
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontFamily: 'var(--font-mono)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{
|
||||||
|
fontSize: 16, fontWeight: 700, color: c,
|
||||||
|
textShadow: active ? `0 0 8px ${withAlpha(c, 0.5)}` : 'none', lineHeight: 1,
|
||||||
|
}}>{it.count}</div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: 9, color: 'var(--fg-2)', textTransform: 'uppercase',
|
||||||
|
letterSpacing: '0.06em', marginTop: 4, fontWeight: 600,
|
||||||
|
}}>{it.label}</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── ScrollList ──────────────────────────────────────────────────
|
||||||
|
Generic max-height scroll wrapper for the right-rail panels. */
|
||||||
|
function ScrollList({ maxHeight = 300, children }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
maxHeight, overflowY: 'auto',
|
||||||
|
display: 'flex', flexDirection: 'column', gap: 8,
|
||||||
|
paddingRight: 4,
|
||||||
|
}}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── EmptyState ──────────────────────────────────────────────────
|
||||||
|
Center-aligned check-circle + caption, used inside ScrollList
|
||||||
|
when a panel has no items. */
|
||||||
|
function EmptyState({ icon = 'check', tone = 'green', children }) {
|
||||||
|
const c = H_COLORS[tone] || H_COLORS.green;
|
||||||
|
return (
|
||||||
|
<div style={{ textAlign: 'center', padding: '24px 0' }}>
|
||||||
|
<div style={{ display: 'inline-flex', marginBottom: 8 }}>
|
||||||
|
<HomeIcon name={icon} size={32} color={c} />
|
||||||
|
</div>
|
||||||
|
<p style={{
|
||||||
|
margin: 0, fontFamily: 'var(--font-mono)', fontSize: 12,
|
||||||
|
color: 'var(--fg-2)', fontStyle: 'italic',
|
||||||
|
}}>{children}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── helpers ─────────────────────────────────────────────────── */
|
||||||
|
function withAlpha(hex, a) {
|
||||||
|
const h = hex.replace('#', '');
|
||||||
|
const r = parseInt(h.slice(0, 2), 16);
|
||||||
|
const g = parseInt(h.slice(2, 4), 16);
|
||||||
|
const b = parseInt(h.slice(4, 6), 16);
|
||||||
|
return `rgba(${r}, ${g}, ${b}, ${a})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.HOME = {
|
||||||
|
COLORS: H_COLORS,
|
||||||
|
StatCard, HomeCard, CardTitle, HomeButton, SeverityBadge, StatusBadge,
|
||||||
|
HomeInput, HomeSelect, FieldLabel, ResultBanner,
|
||||||
|
BigStat, MiniTicket, CVERow, VendorEntry,
|
||||||
|
HomeIcon, CalendarMini, ArchiveSummary, ScrollList, EmptyState,
|
||||||
|
withAlpha,
|
||||||
|
};
|
||||||
443
docs/design-system-redesign/ui_kits/home/KitDocs.jsx
Normal file
443
docs/design-system-redesign/ui_kits/home/KitDocs.jsx
Normal file
@@ -0,0 +1,443 @@
|
|||||||
|
// KitDocs.jsx — browseable docs page for the Home kit.
|
||||||
|
// Sections: Overview · Tokens · Components · Assemblies · Reference page.
|
||||||
|
|
||||||
|
const { useState: useDocsHomeState } = React;
|
||||||
|
const {
|
||||||
|
COLORS: DHC, StatCard: DStatCard, HomeCard: DHomeCard, CardTitle: DCardTitle,
|
||||||
|
HomeButton: DBtn, SeverityBadge: DSev, StatusBadge: DStatus,
|
||||||
|
HomeInput: DInput, HomeSelect: DSelect, FieldLabel: DLabel, ResultBanner: DBanner,
|
||||||
|
BigStat: DBigStat, MiniTicket: DMini, CVERow: DCVERow, VendorEntry: DVendor,
|
||||||
|
HomeIcon: DIcon, CalendarMini: DCal, ArchiveSummary: DArchive, ScrollList: DScroll,
|
||||||
|
EmptyState: DEmpty, withAlpha: dAlpha,
|
||||||
|
} = window.HOME;
|
||||||
|
const { HomePage: DHomePage } = window.HOME_PAGE;
|
||||||
|
|
||||||
|
/* ── Layout primitives (same vocabulary as the Reporting kit docs) ── */
|
||||||
|
function HSection({ id, eyebrow, title, blurb, children }) {
|
||||||
|
return (
|
||||||
|
<section id={id} style={{ paddingTop: 32, scrollMarginTop: 120 }}>
|
||||||
|
<div style={{ marginBottom: 16 }}>
|
||||||
|
{eyebrow && (
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
|
||||||
|
color: DHC.sky, textTransform: 'uppercase', letterSpacing: '0.18em',
|
||||||
|
marginBottom: 6,
|
||||||
|
}}>{eyebrow}</div>
|
||||||
|
)}
|
||||||
|
<h2 style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 700,
|
||||||
|
color: 'var(--fg-1)', margin: 0, letterSpacing: '0.02em',
|
||||||
|
}}>{title}</h2>
|
||||||
|
{blurb && (
|
||||||
|
<p style={{
|
||||||
|
fontFamily: 'var(--font-display)', fontSize: 14, lineHeight: 1.6,
|
||||||
|
color: 'var(--fg-muted)', maxWidth: 660, margin: '8px 0 0 0',
|
||||||
|
}}>{blurb}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function HSpec({ label, children }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'grid', gridTemplateColumns: '160px 1fr', gap: 16,
|
||||||
|
padding: '10px 0', borderBottom: '1px solid rgba(255,255,255,0.04)',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 12,
|
||||||
|
}}>
|
||||||
|
<div style={{ color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.06em', fontSize: 10, fontWeight: 600 }}>{label}</div>
|
||||||
|
<div style={{ color: 'var(--fg-2)' }}>{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function HCode({ children }) {
|
||||||
|
return (
|
||||||
|
<code style={{
|
||||||
|
display: 'inline-block', padding: '2px 6px', borderRadius: 3,
|
||||||
|
background: 'rgba(14,165,233,0.10)', border: '1px solid rgba(14,165,233,0.18)',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, color: DHC.skySoft,
|
||||||
|
}}>{children}</code>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function HSwatch({ name, value, role }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'grid', gridTemplateColumns: '52px 1fr auto', alignItems: 'center', gap: 14,
|
||||||
|
padding: '8px 0', borderBottom: '1px solid rgba(255,255,255,0.04)',
|
||||||
|
}}>
|
||||||
|
<div style={{ height: 36, borderRadius: 6, background: value, border: '1px solid rgba(255,255,255,0.08)' }} />
|
||||||
|
<div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-1)', fontWeight: 600 }}>{name}</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-disabled)' }}>{role}</div>
|
||||||
|
</div>
|
||||||
|
<HCode>{value}</HCode>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function HSpecimen({ children, padding = 24, dark = true, style }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
padding,
|
||||||
|
background: dark ? 'rgba(15,23,42,0.5)' : 'transparent',
|
||||||
|
border: '1px solid rgba(255,255,255,0.05)', borderRadius: 8,
|
||||||
|
...style,
|
||||||
|
}}>{children}</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Sticky tab strip ─────────────────────────────────────────── */
|
||||||
|
const TABS = [
|
||||||
|
{ id: 'overview', label: 'Overview' },
|
||||||
|
{ id: 'tokens', label: 'Tokens' },
|
||||||
|
{ id: 'components', label: 'Components' },
|
||||||
|
{ id: 'assemblies', label: 'Assemblies' },
|
||||||
|
{ id: 'reference', label: 'Reference Page' },
|
||||||
|
];
|
||||||
|
|
||||||
|
function HKitDocs() {
|
||||||
|
const [active, setActive] = useDocsHomeState('overview');
|
||||||
|
const handle = (id) => {
|
||||||
|
setActive(id);
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (el) {
|
||||||
|
const top = el.getBoundingClientRect().top + window.scrollY - 80;
|
||||||
|
window.scrollTo({ top, behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ minHeight: '100vh', background: 'var(--bg-page)' }}>
|
||||||
|
{/* Header */}
|
||||||
|
<header style={{
|
||||||
|
padding: '40px 48px 0 48px', maxWidth: 1280, margin: '0 auto',
|
||||||
|
}}>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, color: DHC.sky, textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 8 }}>
|
||||||
|
STEAM Security · UI Kit
|
||||||
|
</div>
|
||||||
|
<h1 style={{
|
||||||
|
margin: 0, fontFamily: 'var(--font-mono)', fontSize: 36, fontWeight: 700,
|
||||||
|
color: DHC.green, textTransform: 'uppercase', letterSpacing: '0.08em',
|
||||||
|
textShadow: '0 0 24px rgba(16,185,129,0.30)',
|
||||||
|
}}>
|
||||||
|
Home
|
||||||
|
</h1>
|
||||||
|
<p style={{
|
||||||
|
margin: '12px 0 0 0', maxWidth: 720, fontSize: 15, lineHeight: 1.6,
|
||||||
|
color: 'var(--fg-muted)', fontFamily: 'var(--font-display)',
|
||||||
|
}}>
|
||||||
|
The "command center" landing view of the CVE Dashboard. Pulls four signals into one screen:
|
||||||
|
a top metric strip, a CVE feed with vendor sub-rows, and a right-rail stack of
|
||||||
|
Calendar · JIRA · Archer · Ivanti. Built from the same chrome and tokens as the Reporting kit.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Tab strip */}
|
||||||
|
<nav style={{
|
||||||
|
position: 'sticky', top: 0, zIndex: 10,
|
||||||
|
marginTop: 28,
|
||||||
|
background: 'rgba(2,6,23,0.85)', backdropFilter: 'blur(8px)',
|
||||||
|
borderBottom: '1px solid rgba(14,165,233,0.15)',
|
||||||
|
}}>
|
||||||
|
<div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 48px', display: 'flex', gap: 4 }}>
|
||||||
|
{TABS.map(t => {
|
||||||
|
const on = active === t.id;
|
||||||
|
return (
|
||||||
|
<button key={t.id} onClick={() => handle(t.id)} style={{
|
||||||
|
padding: '14px 16px',
|
||||||
|
background: 'transparent', border: 'none',
|
||||||
|
borderBottom: `2px solid ${on ? DHC.sky : 'transparent'}`,
|
||||||
|
color: on ? DHC.sky : 'var(--fg-2)',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.08em',
|
||||||
|
cursor: 'pointer', transition: 'all 160ms ease',
|
||||||
|
}}>{t.label}</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Body */}
|
||||||
|
<main style={{ maxWidth: 1280, margin: '0 auto', padding: '0 48px 96px 48px' }}>
|
||||||
|
|
||||||
|
{/* OVERVIEW */}
|
||||||
|
<HSection id="overview" eyebrow="01 — Overview" title="Why this kit exists" blurb="Documents the visual + behavioral vocabulary of the home view so other dashboards in the suite can re-use the right-rail stack, the CVE row pattern, and the four-up stat strip without re-deriving them.">
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
|
||||||
|
<HSpecimen>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: DHC.sky, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12, fontWeight: 600 }}>Identity</div>
|
||||||
|
<p style={{ margin: 0, fontSize: 13, color: 'var(--fg-1)', lineHeight: 1.6, fontFamily: 'var(--font-display)' }}>
|
||||||
|
Green appears in exactly one place: the page title in the chrome. Sky is the workhorse — borders,
|
||||||
|
section titles, neutral buttons. Amber, red, purple, teal are reserved for specific data domains
|
||||||
|
(tickets, critical, Archer, Ivanti) and never used decoratively.
|
||||||
|
</p>
|
||||||
|
</HSpecimen>
|
||||||
|
<HSpecimen>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: DHC.sky, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12, fontWeight: 600 }}>Layout</div>
|
||||||
|
<p style={{ margin: 0, fontSize: 13, color: 'var(--fg-1)', lineHeight: 1.6, fontFamily: 'var(--font-display)' }}>
|
||||||
|
Top: 4-up stat strip. Body: 12-column grid, left 9 / right 3. Left holds the lookup → filter → CVE
|
||||||
|
feed flow. Right is a vertical stack of color-rail panels, each with a left-border identity color
|
||||||
|
and a centered big-number metric.
|
||||||
|
</p>
|
||||||
|
</HSpecimen>
|
||||||
|
</div>
|
||||||
|
</HSection>
|
||||||
|
|
||||||
|
{/* TOKENS */}
|
||||||
|
<HSection id="tokens" eyebrow="02 — Tokens" title="Color, type, and the right-rail palette" blurb="The four data domains on the home view each have an owned color used as: card left-rail border, card title color + glow, big-number value color, and badge tint.">
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8, fontWeight: 600 }}>Right-rail identity</div>
|
||||||
|
<HSwatch name="sky" value={DHC.sky} role="Calendar · neutral surfaces · default" />
|
||||||
|
<HSwatch name="amber" value={DHC.amber} role="Open Tickets · 'needs attention'" />
|
||||||
|
<HSwatch name="purple" value={DHC.purple} role="Archer Risk Tickets" />
|
||||||
|
<HSwatch name="teal" value={DHC.teal} role="Ivanti Workflows" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8, fontWeight: 600 }}>Severity / status</div>
|
||||||
|
<HSwatch name="green" value={DHC.green} role="Page identity glow · Low · success" />
|
||||||
|
<HSwatch name="red" value={DHC.red} role="Critical · destructive" />
|
||||||
|
<HSwatch name="amber" value={DHC.amber} role="High · in-progress" />
|
||||||
|
<HSwatch name="sky" value={DHC.sky} role="Medium · neutral status" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ marginTop: 32 }}>
|
||||||
|
<HSpec label="Card chrome">background <HCode>linear-gradient(135deg, rgba(30,41,59,.95) 0%, rgba(15,23,42,.98) 100%)</HCode></HSpec>
|
||||||
|
<HSpec label="Card border">resting <HCode>1.5px solid rgba(14,165,233,0.12)</HCode> · hover <HCode>0.35</HCode></HSpec>
|
||||||
|
<HSpec label="Card radius"><HCode>8px</HCode></HSpec>
|
||||||
|
<HSpec label="Title type"><HCode>var(--font-mono)</HCode> · 14 / 600 · uppercase · 0.1em tracking · 12px text-shadow glow in title color</HSpec>
|
||||||
|
<HSpec label="Big stat type"><HCode>var(--font-mono)</HCode> · 32 / 700 · 16px text-shadow glow at 0.4 alpha</HSpec>
|
||||||
|
<HSpec label="Stat label type"><HCode>var(--font-mono)</HCode> · 10 / 600 · uppercase · 0.12em tracking · fg-2</HSpec>
|
||||||
|
</div>
|
||||||
|
</HSection>
|
||||||
|
|
||||||
|
{/* COMPONENTS */}
|
||||||
|
<HSection id="components" eyebrow="03 — Components" title="The pieces" blurb="Every primitive used by the page assembly. All are exported on window.HOME so other pages in the dashboard can pull from the same vocabulary.">
|
||||||
|
|
||||||
|
{/* StatCard */}
|
||||||
|
<h3 style={subhead}>StatCard</h3>
|
||||||
|
<p style={subblurb}>Top-of-page metric tile. Color tone drives the 2px border, top-edge glow line, value color, and the inset highlight. Use <HCode>tone="neutral"</HCode> to suppress the colored treatment.</p>
|
||||||
|
<HSpecimen>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12 }}>
|
||||||
|
<DStatCard label="Total CVEs" value="247" tone="sky" />
|
||||||
|
<DStatCard label="Vendor Entries" value="412" tone="neutral" />
|
||||||
|
<DStatCard label="Open Tickets" value="18" tone="amber" />
|
||||||
|
<DStatCard label="Critical" value="6" tone="red" />
|
||||||
|
</div>
|
||||||
|
</HSpecimen>
|
||||||
|
|
||||||
|
{/* Buttons */}
|
||||||
|
<h3 style={subhead}>HomeButton</h3>
|
||||||
|
<p style={subblurb}>Five variants. <strong style={{ color: DHC.green }}>Primary</strong> is reserved for the lone green CTA on each card. <strong style={{ color: DHC.sky }}>Neutral</strong> is the default for table-row + view actions. <strong style={{ color: DHC.amber }}>Warning</strong> = edit, <strong style={{ color: DHC.red }}>Danger</strong> = delete.</p>
|
||||||
|
<HSpecimen>
|
||||||
|
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
|
||||||
|
<DBtn variant="primary" icon="search">Scan</DBtn>
|
||||||
|
<DBtn variant="neutral" icon="eye">View</DBtn>
|
||||||
|
<DBtn variant="subtle" icon="download">Export</DBtn>
|
||||||
|
<DBtn variant="warning" icon="edit">Edit</DBtn>
|
||||||
|
<DBtn variant="danger" icon="trash">Delete</DBtn>
|
||||||
|
</div>
|
||||||
|
</HSpecimen>
|
||||||
|
|
||||||
|
{/* Badges */}
|
||||||
|
<h3 style={subhead}>SeverityBadge · StatusBadge</h3>
|
||||||
|
<p style={subblurb}>Severity is heavy: 2px solid border + glow + dot. Status is light: 1px border, smaller, used inside dense list cards.</p>
|
||||||
|
<HSpecimen>
|
||||||
|
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 16 }}>
|
||||||
|
<DSev level="Critical" /><DSev level="High" /><DSev level="Medium" /><DSev level="Low" />
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||||||
|
<DStatus tone="amber">In Progress</DStatus>
|
||||||
|
<DStatus tone="red">Open</DStatus>
|
||||||
|
<DStatus tone="green">Closed</DStatus>
|
||||||
|
<DStatus tone="purple">Pending Review</DStatus>
|
||||||
|
<DStatus tone="teal">Approved</DStatus>
|
||||||
|
</div>
|
||||||
|
</HSpecimen>
|
||||||
|
|
||||||
|
{/* Inputs */}
|
||||||
|
<h3 style={subhead}>HomeInput · HomeSelect · FieldLabel</h3>
|
||||||
|
<HSpecimen>
|
||||||
|
<div style={{ display: 'grid', gap: 16 }}>
|
||||||
|
<div>
|
||||||
|
<DLabel icon="search">Search CVEs</DLabel>
|
||||||
|
<DInput placeholder="CVE ID or description…" />
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
|
||||||
|
<div>
|
||||||
|
<DLabel icon="filter">Vendor</DLabel>
|
||||||
|
<DSelect value="All Vendors" onChange={() => {}} options={['All Vendors', 'Red Hat', 'Cisco', 'Ubuntu']} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<DLabel icon="alert">Severity</DLabel>
|
||||||
|
<DSelect value="All Severities" onChange={() => {}} options={['All Severities', 'Critical', 'High', 'Medium', 'Low']} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</HSpecimen>
|
||||||
|
|
||||||
|
{/* ResultBanner */}
|
||||||
|
<h3 style={subhead}>ResultBanner</h3>
|
||||||
|
<p style={subblurb}>Sub-card surfaced inside the Quick CVE Lookup card after a scan. Three tones map to the three terminal states.</p>
|
||||||
|
<HSpecimen>
|
||||||
|
<div style={{ display: 'grid', gap: 12 }}>
|
||||||
|
<DBanner tone="success" title="✓ CVE Addressed (3 vendors)">
|
||||||
|
<div style={{ fontFamily: 'var(--font-display)', fontSize: 12, color: 'var(--fg-2)' }}>
|
||||||
|
Red Hat (Open · 4 docs) · Ubuntu (In Progress · 2 docs) · SUSE (Resolved · 3 docs)
|
||||||
|
</div>
|
||||||
|
</DBanner>
|
||||||
|
<DBanner tone="warning" title="Not Found">
|
||||||
|
<div style={{ fontFamily: 'var(--font-display)', fontSize: 12, color: 'var(--fg-2)' }}>This CVE has not been addressed yet. No entry exists in the database.</div>
|
||||||
|
</DBanner>
|
||||||
|
<DBanner tone="error" title="Error">
|
||||||
|
<div style={{ fontFamily: 'var(--font-display)', fontSize: 12, color: 'var(--fg-2)' }}>NVD lookup failed: rate-limited (429). Retry in 30s.</div>
|
||||||
|
</DBanner>
|
||||||
|
</div>
|
||||||
|
</HSpecimen>
|
||||||
|
|
||||||
|
{/* BigStat */}
|
||||||
|
<h3 style={subhead}>BigStat</h3>
|
||||||
|
<p style={subblurb}>The centered "active count + label" shown at the top of every right-rail panel. Color follows panel identity.</p>
|
||||||
|
<HSpecimen>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }}>
|
||||||
|
<DBigStat value="3" label="Active" color={DHC.amber} />
|
||||||
|
<DBigStat value="2" label="Active" color={DHC.purple} />
|
||||||
|
<DBigStat value="78" label="Total Workflows" color={DHC.teal} />
|
||||||
|
<DBigStat value="—" label="Never Synced" color={DHC.sky} />
|
||||||
|
</div>
|
||||||
|
</HSpecimen>
|
||||||
|
|
||||||
|
{/* MiniTicket */}
|
||||||
|
<h3 style={subhead}>MiniTicket</h3>
|
||||||
|
<p style={subblurb}>Compact card used inside right-rail scroll lists. Tone tints the border + status pill to match its parent panel's identity color.</p>
|
||||||
|
<HSpecimen>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
|
||||||
|
<DMini keyText="SEC-4821" cveId="CVE-2025-1014" vendor="Red Hat" status="In Progress" tone="amber" onEdit={() => {}} />
|
||||||
|
<DMini keyText="EXC-08291" cveId="CVE-2025-1014" vendor="SUSE" status="Pending Review" tone="purple" onEdit={() => {}} />
|
||||||
|
<DMini keyText="WF-1042" cveId="—" vendor="Compliance scan" status="In Review" tone="teal" />
|
||||||
|
</div>
|
||||||
|
</HSpecimen>
|
||||||
|
|
||||||
|
{/* Calendar */}
|
||||||
|
<h3 style={subhead}>CalendarMini</h3>
|
||||||
|
<p style={subblurb}>Right-rail calendar surface. Day cells accept a marker color so SLA / due-date dots can be projected onto the month.</p>
|
||||||
|
<HSpecimen>
|
||||||
|
<div style={{ maxWidth: 280 }}>
|
||||||
|
<DCal today={26} markedDays={{ 14: 'red', 18: 'amber', 22: 'sky', 24: 'amber' }} />
|
||||||
|
</div>
|
||||||
|
</HSpecimen>
|
||||||
|
|
||||||
|
{/* ArchiveSummary */}
|
||||||
|
<h3 style={subhead}>ArchiveSummary</h3>
|
||||||
|
<p style={subblurb}>State-pill bar that lives at the top of the Ivanti card. Each pill is a click target that filters the workflows below.</p>
|
||||||
|
<HSpecimen>
|
||||||
|
<div style={{ maxWidth: 320 }}>
|
||||||
|
<DArchive items={[
|
||||||
|
{ label: 'In Review', count: 12, tone: 'amber' },
|
||||||
|
{ label: 'In Progress', count: 8, tone: 'sky' },
|
||||||
|
{ label: 'Approved', count: 17, tone: 'green' },
|
||||||
|
{ label: 'Closed', count: 41, tone: 'neutral' },
|
||||||
|
]} activeFilter="In Review" />
|
||||||
|
</div>
|
||||||
|
</HSpecimen>
|
||||||
|
|
||||||
|
{/* CVERow + VendorEntry */}
|
||||||
|
<h3 style={subhead}>CVERow · VendorEntry</h3>
|
||||||
|
<p style={subblurb}>The collapsible CVE feed cards. Collapsed = chevron + ID + truncated description + meta row. Expanded = vendor sub-cards, optionally with a doc inset and a JIRA inset under each vendor.</p>
|
||||||
|
<HSpecimen padding={16}>
|
||||||
|
<DCVERow
|
||||||
|
cveId="CVE-2025-1014" severity="Critical"
|
||||||
|
description="Heap-based buffer overflow in libnetfilter_queue permits remote code execution via crafted ICMP traffic."
|
||||||
|
vendorCount={3} docCount={9} statuses={['Open', 'In Progress']}
|
||||||
|
expanded={true} onToggle={() => {}}
|
||||||
|
>
|
||||||
|
<DVendor vendor="Red Hat" severity="Critical" status="Open" docCount={4} onView={() => {}} />
|
||||||
|
<DVendor vendor="Ubuntu" severity="Critical" status="In Progress" docCount={2} onEdit={() => {}} />
|
||||||
|
</DCVERow>
|
||||||
|
</HSpecimen>
|
||||||
|
|
||||||
|
{/* EmptyState */}
|
||||||
|
<h3 style={subhead}>EmptyState</h3>
|
||||||
|
<HSpecimen>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 16 }}>
|
||||||
|
<DEmpty>No open tickets</DEmpty>
|
||||||
|
<DEmpty icon="alert" tone="amber">Click Sync to load workflow data</DEmpty>
|
||||||
|
</div>
|
||||||
|
</HSpecimen>
|
||||||
|
</HSection>
|
||||||
|
|
||||||
|
{/* ASSEMBLIES */}
|
||||||
|
<HSection id="assemblies" eyebrow="04 — Assemblies" title="How the parts compose" blurb="Three patterns that other dashboards in the suite should reuse verbatim.">
|
||||||
|
|
||||||
|
<h3 style={subhead}>Right-rail panel</h3>
|
||||||
|
<p style={subblurb}>HomeCard with a colored left-rail + matching CardTitle + BigStat + ScrollList of MiniTickets. The identity color owns all four.</p>
|
||||||
|
<HSpecimen>
|
||||||
|
<div style={{ maxWidth: 320 }}>
|
||||||
|
<DHomeCard padding={20} leftRail={DHC.amber}>
|
||||||
|
<DCardTitle color={DHC.amber} icon="alert" action={<DBtn variant="warning" icon="plus" size="sm" />}>Open Tickets</DCardTitle>
|
||||||
|
<DBigStat value="3" label="Active" color={DHC.amber} />
|
||||||
|
<DScroll maxHeight={220}>
|
||||||
|
<DMini keyText="SEC-4821" cveId="CVE-2025-1014" vendor="Red Hat" status="In Progress" tone="amber" onEdit={() => {}} onDelete={() => {}} summary="Patch netfilter ingress" />
|
||||||
|
<DMini keyText="SEC-4794" cveId="CVE-2025-0944" vendor="Cisco" status="Open" tone="amber" onEdit={() => {}} summary="Roll admin-console hotfix" />
|
||||||
|
</DScroll>
|
||||||
|
</DHomeCard>
|
||||||
|
</div>
|
||||||
|
</HSpecimen>
|
||||||
|
|
||||||
|
<h3 style={subhead}>Quick lookup → result banner</h3>
|
||||||
|
<HSpecimen>
|
||||||
|
<DHomeCard>
|
||||||
|
<DCardTitle color={DHC.sky} icon="search">Quick CVE Lookup</DCardTitle>
|
||||||
|
<div style={{ display: 'flex', gap: 12 }}>
|
||||||
|
<DInput placeholder="Enter CVE ID (e.g., CVE-2025-1014)" />
|
||||||
|
<DBtn variant="primary" icon="search">Scan</DBtn>
|
||||||
|
</div>
|
||||||
|
<div style={{ marginTop: 16 }}>
|
||||||
|
<DBanner tone="success" title="✓ CVE Addressed (3 vendors)">
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-2)' }}>Red Hat · Ubuntu · SUSE</div>
|
||||||
|
</DBanner>
|
||||||
|
</div>
|
||||||
|
</DHomeCard>
|
||||||
|
</HSpecimen>
|
||||||
|
|
||||||
|
<h3 style={subhead}>4-up stat strip</h3>
|
||||||
|
<HSpecimen>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }}>
|
||||||
|
<DStatCard label="Total CVEs" value="247" tone="sky" />
|
||||||
|
<DStatCard label="Vendor Entries" value="412" tone="neutral" />
|
||||||
|
<DStatCard label="Open Tickets" value="18" tone="amber" />
|
||||||
|
<DStatCard label="Critical" value="6" tone="red" />
|
||||||
|
</div>
|
||||||
|
</HSpecimen>
|
||||||
|
</HSection>
|
||||||
|
|
||||||
|
{/* REFERENCE */}
|
||||||
|
<HSection id="reference" eyebrow="05 — Reference" title="Full Home page" blurb="Every primitive on this kit, composed exactly as App.js renders the home view. The frame below is a faithful reproduction — you can scroll inside it.">
|
||||||
|
<div className="sample-frame" style={{
|
||||||
|
border: '1px solid rgba(14,165,233,0.20)', borderRadius: 12,
|
||||||
|
overflow: 'hidden', maxHeight: 900, overflowY: 'auto',
|
||||||
|
background: 'var(--bg-page)',
|
||||||
|
}}>
|
||||||
|
<DHomePage />
|
||||||
|
</div>
|
||||||
|
</HSection>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const subhead = {
|
||||||
|
margin: '32px 0 6px 0',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 700,
|
||||||
|
color: 'var(--fg-1)', textTransform: 'uppercase', letterSpacing: '0.08em',
|
||||||
|
};
|
||||||
|
const subblurb = {
|
||||||
|
margin: '0 0 12px 0',
|
||||||
|
fontFamily: 'var(--font-display)', fontSize: 13, lineHeight: 1.55,
|
||||||
|
color: 'var(--fg-muted)', maxWidth: 720,
|
||||||
|
};
|
||||||
|
|
||||||
|
window.HOME_DOCS = { HKitDocs };
|
||||||
37
docs/design-system-redesign/ui_kits/home/README.md
Normal file
37
docs/design-system-redesign/ui_kits/home/README.md
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
# Home UI Kit
|
||||||
|
|
||||||
|
Visual vocabulary for the CVE Dashboard home view (`currentPage === 'home'` in `frontend/src/App.js`).
|
||||||
|
|
||||||
|
## Files
|
||||||
|
- `index.html` — entry point.
|
||||||
|
- `HomePrimitives.jsx` — `StatCard`, `HomeCard`, `CardTitle`, `HomeButton`, `SeverityBadge`, `StatusBadge`, `HomeInput`, `HomeSelect`, `FieldLabel`, `ResultBanner`, `BigStat`, `MiniTicket`, `CVERow`, `VendorEntry`, `CalendarMini`, `ArchiveSummary`, `ScrollList`, `EmptyState`, `HomeIcon`.
|
||||||
|
- `HomePage.jsx` — full-page assembly (`HomePage`).
|
||||||
|
- `KitDocs.jsx` — browseable docs (Overview · Tokens · Components · Assemblies · Reference).
|
||||||
|
|
||||||
|
## Right-rail identity colors
|
||||||
|
Each right-side panel owns one color, applied consistently to four surfaces:
|
||||||
|
|
||||||
|
| Panel | Color | Hex | Used for |
|
||||||
|
|-------------------|----------|-----------|----------------------------------------------|
|
||||||
|
| Calendar | sky | `#0EA5E9` | left-rail, title glow, today cell, day dots |
|
||||||
|
| Open Tickets | amber | `#F59E0B` | left-rail, title glow, big stat, mini badges |
|
||||||
|
| Archer Risk | purple | `#8B5CF6` | left-rail, title glow, big stat, mini badges |
|
||||||
|
| Ivanti Workflows | teal | `#0D9488` | left-rail, title glow, big stat, mini badges |
|
||||||
|
|
||||||
|
## Layout
|
||||||
|
- **Top:** 4-up stat strip (sky · neutral · amber · red).
|
||||||
|
- **Body:** 12-col grid. Left 9 = Quick Lookup → Search/Filter → Results summary → CVE feed. Right 3 = vertical stack of right-rail panels.
|
||||||
|
|
||||||
|
## Card chrome (matches Reporting + KB)
|
||||||
|
```
|
||||||
|
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%)
|
||||||
|
border: 1.5px solid rgba(14,165,233,0.12) /* 0.35 on hover */
|
||||||
|
left-rail: 3px solid <identity-color> /* right-rail panels only */
|
||||||
|
radius: 8px
|
||||||
|
```
|
||||||
|
|
||||||
|
## Page-level rules
|
||||||
|
1. Green appears in **one** place: the page title in the chrome (and as the lone primary CTA when present, e.g. "Scan").
|
||||||
|
2. The four StatCard tones (sky/neutral/amber/red) map to (volume / inventory / attention / urgent). Don't reassign.
|
||||||
|
3. Severity uses the heavy 2px-border SeverityBadge; ticket statuses use the 1px-border StatusBadge.
|
||||||
|
4. Right-rail panels always lead with a BigStat. The number IS the headline.
|
||||||
39
docs/design-system-redesign/ui_kits/home/index.html
Normal file
39
docs/design-system-redesign/ui_kits/home/index.html
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>STEAM Security · Home UI Kit</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="stylesheet" href="../../colors_and_type.css" />
|
||||||
|
<style>
|
||||||
|
body { margin: 0; min-height: 100vh; }
|
||||||
|
.page-bg { min-height: 100vh; background: var(--bg-page); }
|
||||||
|
:target { scroll-margin-top: 120px; }
|
||||||
|
.sample-frame::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||||
|
.sample-frame::-webkit-scrollbar-thumb { background: rgba(14,165,233,0.2); border-radius: 4px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root" class="page-bg"></div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<script type="text/babel" src="HomePrimitives.jsx"></script>
|
||||||
|
<script type="text/babel" src="HomePage.jsx"></script>
|
||||||
|
<script type="text/babel" src="KitDocs.jsx"></script>
|
||||||
|
|
||||||
|
<script type="text/babel">
|
||||||
|
const { HKitDocs } = window.HOME_DOCS;
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<main data-screen-label="Home Kit">
|
||||||
|
<HKitDocs />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
481
docs/design-system-redesign/ui_kits/reporting/KitDocs.jsx
Normal file
481
docs/design-system-redesign/ui_kits/reporting/KitDocs.jsx
Normal file
@@ -0,0 +1,481 @@
|
|||||||
|
// KitDocs.jsx — browseable docs page for the Reporting kit.
|
||||||
|
// Sections: Overview · Tokens · Components · Assemblies · Reference page.
|
||||||
|
|
||||||
|
const { useState: useDocsState } = React;
|
||||||
|
const {
|
||||||
|
COLORS: DC, PageHeader, RptButton, KbCard, PillTab, FilterChip, StatusBanner,
|
||||||
|
ToolbarLabel, SeverityDot, SlaPill, WorkflowBadge, DonutSample, RptIcon: DI,
|
||||||
|
} = window.RPT;
|
||||||
|
const { ReportingPage } = window.RPT_PAGE;
|
||||||
|
|
||||||
|
/* ── Layout primitives ─────────────────────────────────────────── */
|
||||||
|
function Section({ id, eyebrow, title, blurb, children }) {
|
||||||
|
return (
|
||||||
|
<section id={id} style={{ paddingTop: 32, scrollMarginTop: 120 }}>
|
||||||
|
<div style={{ marginBottom: 16 }}>
|
||||||
|
{eyebrow && (
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
|
||||||
|
color: DC.sky, textTransform: 'uppercase', letterSpacing: '0.18em',
|
||||||
|
marginBottom: 6,
|
||||||
|
}}>{eyebrow}</div>
|
||||||
|
)}
|
||||||
|
<h2 style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 700,
|
||||||
|
color: 'var(--fg-1)', margin: 0, letterSpacing: '0.02em',
|
||||||
|
}}>{title}</h2>
|
||||||
|
{blurb && (
|
||||||
|
<p style={{
|
||||||
|
fontFamily: 'var(--font-display)', fontSize: 14, lineHeight: 1.6,
|
||||||
|
color: 'var(--fg-muted)', maxWidth: 640, margin: '8px 0 0 0',
|
||||||
|
}}>{blurb}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Spec({ label, children }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'grid', gridTemplateColumns: '160px 1fr', gap: 16,
|
||||||
|
padding: '10px 0', borderBottom: '1px solid rgba(255,255,255,0.04)',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 12,
|
||||||
|
}}>
|
||||||
|
<div style={{ color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.06em', fontSize: 10, fontWeight: 600 }}>
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
<div style={{ color: 'var(--fg-2)' }}>{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CodeChip({ children }) {
|
||||||
|
return (
|
||||||
|
<code style={{
|
||||||
|
display: 'inline-block', padding: '2px 6px', borderRadius: 3,
|
||||||
|
background: 'rgba(14,165,233,0.10)', border: '1px solid rgba(14,165,233,0.18)',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, color: DC.skySoft,
|
||||||
|
}}>{children}</code>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SwatchRow({ name, value, role }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'grid', gridTemplateColumns: '52px 1fr auto', alignItems: 'center', gap: 14,
|
||||||
|
padding: '8px 0', borderBottom: '1px solid rgba(255,255,255,0.04)',
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
height: 36, borderRadius: 6, background: value,
|
||||||
|
border: '1px solid rgba(255,255,255,0.08)',
|
||||||
|
}} />
|
||||||
|
<div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-1)', fontWeight: 600 }}>{name}</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-disabled)' }}>{role}</div>
|
||||||
|
</div>
|
||||||
|
<CodeChip>{value}</CodeChip>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Sticky tab nav ─────────────────────────────────────────────── */
|
||||||
|
function TabNav({ active, onChange }) {
|
||||||
|
const items = [
|
||||||
|
{ id: 'overview', label: 'Overview' },
|
||||||
|
{ id: 'tokens', label: 'Tokens' },
|
||||||
|
{ id: 'components', label: 'Components' },
|
||||||
|
{ id: 'assemblies', label: 'Assemblies' },
|
||||||
|
{ id: 'reference', label: 'Reference page' },
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
position: 'sticky', top: 0, zIndex: 20,
|
||||||
|
background: 'rgba(15,23,42,0.92)',
|
||||||
|
backdropFilter: 'blur(8px)',
|
||||||
|
borderBottom: '1px solid rgba(14,165,233,0.12)',
|
||||||
|
padding: '14px 24px',
|
||||||
|
}}>
|
||||||
|
<div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 700,
|
||||||
|
color: DC.green, textTransform: 'uppercase', letterSpacing: '0.12em',
|
||||||
|
textShadow: '0 0 12px rgba(16,185,129,0.25)',
|
||||||
|
flexShrink: 0,
|
||||||
|
}}>
|
||||||
|
Reporting Kit
|
||||||
|
</div>
|
||||||
|
<div style={{ width: 1, height: 18, background: 'rgba(255,255,255,0.08)' }} />
|
||||||
|
<div style={{ display: 'flex', gap: 4 }}>
|
||||||
|
{items.map((it) => (
|
||||||
|
<PillTab key={it.id} active={active === it.id} onClick={() => onChange(it.id)}>
|
||||||
|
{it.label}
|
||||||
|
</PillTab>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Overview ───────────────────────────────────────────────────── */
|
||||||
|
function OverviewSection() {
|
||||||
|
return (
|
||||||
|
<Section
|
||||||
|
id="overview"
|
||||||
|
eyebrow="01 · Overview"
|
||||||
|
title="Reporting page UI kit"
|
||||||
|
blurb="The visual vocabulary used by /reporting. Aligned to the Knowledge Base pattern: green-glow page identity, sky-blue surface accents, mono uppercase labels, Knowledge-Base card chrome on every panel."
|
||||||
|
>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 14 }}>
|
||||||
|
<KbCard label="Page identity" hover={false}>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 700,
|
||||||
|
color: DC.green, textTransform: 'uppercase', letterSpacing: '0.1em',
|
||||||
|
textShadow: '0 0 12px rgba(16,185,129,0.25)',
|
||||||
|
}}>Reporting</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-muted)' }}>
|
||||||
|
Green is reserved for the page title + the lone primary action (Sync). Everything else is sky.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</KbCard>
|
||||||
|
<KbCard label="Surface accent" hover={false}>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||||
|
<div style={{
|
||||||
|
padding: 10, borderRadius: 6,
|
||||||
|
background: 'linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%)',
|
||||||
|
border: '1.5px solid rgba(14,165,233,0.35)',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, color: DC.skySoft,
|
||||||
|
}}>
|
||||||
|
KB card · sky border · 0.12 → 0.35 on hover
|
||||||
|
</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-muted)' }}>
|
||||||
|
Same chrome for donuts, trend, and findings panel. No more colored left-rails.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</KbCard>
|
||||||
|
<KbCard label="Type" hover={false}>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
|
||||||
|
Card label · 11 / 600 / 0.1em
|
||||||
|
</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--fg-1)' }}>JetBrains Mono · everywhere</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-display)', fontSize: 13, color: 'var(--fg-muted)' }}>Outfit · prose only (blurbs)</div>
|
||||||
|
</div>
|
||||||
|
</KbCard>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Tokens ─────────────────────────────────────────────────────── */
|
||||||
|
function TokensSection() {
|
||||||
|
return (
|
||||||
|
<Section
|
||||||
|
id="tokens"
|
||||||
|
eyebrow="02 · Tokens"
|
||||||
|
title="Color roles, type, spacing"
|
||||||
|
blurb="Reporting uses the dashboard token set. These are the specific roles the page leans on."
|
||||||
|
>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 14 }}>
|
||||||
|
<KbCard label="Color roles" hover={false}>
|
||||||
|
<SwatchRow name="--accent (sky-500)" value="#0EA5E9" role="Surfaces · pills · table headers · neutral btn" />
|
||||||
|
<SwatchRow name="--intel-success" value="#10B981" role="Page title glow · primary Sync button" />
|
||||||
|
<SwatchRow name="--intel-warning" value="#F59E0B" role="Filter active · anomaly · At-Risk SLA" />
|
||||||
|
<SwatchRow name="--intel-danger" value="#EF4444" role="Errors · Critical sev · Overdue SLA" />
|
||||||
|
<SwatchRow name="--text-disabled" value="#64748B" role="Card labels · meta text" />
|
||||||
|
<SwatchRow name="--text-faint" value="#475569" role="Subtitle · separator counts" />
|
||||||
|
</KbCard>
|
||||||
|
<KbCard label="Card chrome" hover={false}>
|
||||||
|
<Spec label="Background"><CodeChip>linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%)</CodeChip></Spec>
|
||||||
|
<Spec label="Border (rest)"><CodeChip>1.5px solid rgba(14,165,233,0.12)</CodeChip></Spec>
|
||||||
|
<Spec label="Border (hover)"><CodeChip>1.5px solid rgba(14,165,233,0.35)</CodeChip></Spec>
|
||||||
|
<Spec label="Radius"><CodeChip>8px</CodeChip></Spec>
|
||||||
|
<Spec label="Padding"><CodeChip>16px (donuts) / 20px (panels)</CodeChip></Spec>
|
||||||
|
<Spec label="Label divider"><CodeChip>1px solid rgba(255,255,255,0.04)</CodeChip></Spec>
|
||||||
|
</KbCard>
|
||||||
|
<KbCard label="Type scale" hover={false}>
|
||||||
|
<Spec label="Page title">JetBrains Mono · 24 / 700 · 0.1em · uppercase · green glow</Spec>
|
||||||
|
<Spec label="Subtitle / meta">Mono · 12 / 400 · slate-muted</Spec>
|
||||||
|
<Spec label="Card label">Mono · 11 / 600 · 0.1em · uppercase · slate-disabled</Spec>
|
||||||
|
<Spec label="Toolbar label">Mono · 11 / 700 · 0.1em · uppercase · sky</Spec>
|
||||||
|
<Spec label="Button">Mono · 12 / 600 · 0.05em · uppercase</Spec>
|
||||||
|
<Spec label="Pill tab">Mono · 11 / 600 · 0.05em · uppercase</Spec>
|
||||||
|
<Spec label="Table cell">Mono · 11 / 400</Spec>
|
||||||
|
</KbCard>
|
||||||
|
<KbCard label="Spacing & motion" hover={false}>
|
||||||
|
<Spec label="Page gap"><CodeChip>20px</CodeChip> between major sections</Spec>
|
||||||
|
<Spec label="Donut grid"><CodeChip>repeat(auto-fill, minmax(220px, 1fr))</CodeChip> · gap 14</Spec>
|
||||||
|
<Spec label="Toolbar gap">8px between buttons · 6px subtle group</Spec>
|
||||||
|
<Spec label="Hover transition"><CodeChip>border-color 150ms cubic-bezier(0.4,0,0.2,1)</CodeChip></Spec>
|
||||||
|
<Spec label="Spinner"><CodeChip>1s linear infinite</CodeChip></Spec>
|
||||||
|
</KbCard>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Components ─────────────────────────────────────────────────── */
|
||||||
|
function ComponentsSection() {
|
||||||
|
const [tab, setTab] = useDocsState('ivanti');
|
||||||
|
return (
|
||||||
|
<Section
|
||||||
|
id="components"
|
||||||
|
eyebrow="03 · Components"
|
||||||
|
title="Primitives"
|
||||||
|
blurb="Each component is a thin wrapper around the inline-style pattern used in ReportingPage.js. Drop into other pages that need to inherit the same vocabulary."
|
||||||
|
>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 14 }}>
|
||||||
|
{/* Buttons */}
|
||||||
|
<KbCard label="Buttons" hover={false}>
|
||||||
|
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', padding: '4px 0 12px' }}>
|
||||||
|
<RptButton variant="primary" icon={<DI.Refresh size={13} />}>Sync</RptButton>
|
||||||
|
<RptButton variant="neutral" icon={<DI.Atlas size={13} />}>Atlas</RptButton>
|
||||||
|
<RptButton variant="subtle" icon={<DI.Download size={12} />}>Export</RptButton>
|
||||||
|
<RptButton variant="danger" icon={<DI.AlertCircle size={12} />}>Reset</RptButton>
|
||||||
|
<RptButton variant="neutral" disabled icon={<DI.Loader size={13} />}>Disabled</RptButton>
|
||||||
|
</div>
|
||||||
|
<Spec label="primary">Green tinted-fill · the only primary on the page (Sync)</Spec>
|
||||||
|
<Spec label="neutral">Sky outlined · transparent · for Atlas, Prev/Next, etc.</Spec>
|
||||||
|
<Spec label="subtle">Sky tinted-fill · for in-toolbar actions (Export, Queue, Columns)</Spec>
|
||||||
|
<Spec label="danger">Red tinted-fill · destructive only</Spec>
|
||||||
|
</KbCard>
|
||||||
|
|
||||||
|
{/* Pill tabs */}
|
||||||
|
<KbCard label="Pill tabs (metric switcher)" hover={false}>
|
||||||
|
<div style={{ display: 'flex', gap: 5, alignItems: 'center', padding: '4px 0 12px' }}>
|
||||||
|
<DI.PieChart size={14} style={{ color: '#334155', marginRight: 4 }} />
|
||||||
|
<PillTab active={tab === 'ivanti'} onClick={() => setTab('ivanti')}>Ivanti Findings</PillTab>
|
||||||
|
<PillTab active={tab === 'atlas'} onClick={() => setTab('atlas')}>Atlas Coverage</PillTab>
|
||||||
|
<PillTab active={tab === 'sla'} onClick={() => setTab('sla')}>SLA</PillTab>
|
||||||
|
</div>
|
||||||
|
<Spec label="Active">sky border + sky-15% fill + sky text</Spec>
|
||||||
|
<Spec label="Hover (inactive)">subtle white-10% border, slate-300 text</Spec>
|
||||||
|
</KbCard>
|
||||||
|
|
||||||
|
{/* Filter chips */}
|
||||||
|
<KbCard label="Filter chips" hover={false}>
|
||||||
|
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', padding: '4px 0 12px' }}>
|
||||||
|
<FilterChip color={DC.amber}>Severity: Critical</FilterChip>
|
||||||
|
<FilterChip color={DC.sky}>Action: Patch</FilterChip>
|
||||||
|
<FilterChip color={DC.red}>SLA: Overdue</FilterChip>
|
||||||
|
</div>
|
||||||
|
<Spec label="Color">Tinted to the dimension being filtered</Spec>
|
||||||
|
<Spec label="Click">Clears the filter</Spec>
|
||||||
|
</KbCard>
|
||||||
|
|
||||||
|
{/* Status banners */}
|
||||||
|
<KbCard label="Status banners" hover={false}>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 6, padding: '4px 0 12px' }}>
|
||||||
|
<StatusBanner tone="error">Atlas: connection refused — retry in 30s</StatusBanner>
|
||||||
|
<StatusBanner tone="warn">Sync stale (last success 4 hours ago)</StatusBanner>
|
||||||
|
<StatusBanner tone="info">12 findings reassigned to platform-team</StatusBanner>
|
||||||
|
</div>
|
||||||
|
<Spec label="Placement">Header-level for system errors; inline above target for action results</Spec>
|
||||||
|
</KbCard>
|
||||||
|
|
||||||
|
{/* Severity / SLA / Workflow badges */}
|
||||||
|
<KbCard label="Cell badges" hover={false}>
|
||||||
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, padding: '4px 0 12px' }}>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<SeverityDot level="Critical" />
|
||||||
|
<SeverityDot level="High" />
|
||||||
|
<SeverityDot level="Medium" />
|
||||||
|
<SeverityDot level="Low" />
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<SlaPill status="OVERDUE" />
|
||||||
|
<SlaPill status="AT_RISK" />
|
||||||
|
<SlaPill status="WITHIN_SLA" />
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||||
|
<WorkflowBadge state="OPEN" />
|
||||||
|
<WorkflowBadge state="FP" />
|
||||||
|
<WorkflowBadge state="EXC" />
|
||||||
|
<WorkflowBadge state="REMEDIATED" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Spec label="Severity">Dot + glow + soft-text label · fixed semantic colors</Spec>
|
||||||
|
<Spec label="SLA">Pill · OVERDUE/AT_RISK/WITHIN_SLA</Spec>
|
||||||
|
<Spec label="Workflow">Tagged badge · OPEN/FP/EXC/REMEDIATED/ARCHIVED</Spec>
|
||||||
|
</KbCard>
|
||||||
|
|
||||||
|
{/* KB card itself */}
|
||||||
|
<KbCard label="KB Card" hover={false}>
|
||||||
|
<KbCard label="Open vs Closed" style={{ marginBottom: 10 }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', padding: '10px 0' }}>
|
||||||
|
<DonutSample
|
||||||
|
segments={[
|
||||||
|
{ label: 'Open', value: 184, color: DC.sky },
|
||||||
|
{ label: 'Closed', value: 712, color: DC.green },
|
||||||
|
]}
|
||||||
|
size={110}
|
||||||
|
centerLabel="TOTAL" centerValue="896" />
|
||||||
|
</div>
|
||||||
|
</KbCard>
|
||||||
|
<Spec label="Container">KB card chrome + label divider</Spec>
|
||||||
|
<Spec label="Body">Centered donut · 170 min-height · responsive auto-fill grid</Spec>
|
||||||
|
</KbCard>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Assemblies ─────────────────────────────────────────────────── */
|
||||||
|
function AssembliesSection() {
|
||||||
|
return (
|
||||||
|
<Section
|
||||||
|
id="assemblies"
|
||||||
|
eyebrow="04 · Assemblies"
|
||||||
|
title="Page-level patterns"
|
||||||
|
blurb="Three combinations the Reporting page is built from. Reuse them as-is on related pages (e.g. dashboards, audit logs)."
|
||||||
|
>
|
||||||
|
{/* Header assembly */}
|
||||||
|
<KbCard label="① Page header + meta + actions" hover={false} style={{ marginBottom: 14 }}>
|
||||||
|
<div style={{ padding: '8px 0' }}>
|
||||||
|
<PageHeader
|
||||||
|
title="Reporting"
|
||||||
|
meta={
|
||||||
|
<>
|
||||||
|
Last sync: 2 minutes ago
|
||||||
|
<span style={{ marginLeft: 10, color: '#334155' }}>· 184 of 896 findings</span>
|
||||||
|
<span style={{ marginLeft: 8, color: DC.amber }}>(3 filters active)</span>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<RptButton variant="neutral" icon={<DI.Atlas size={13} />}>Atlas</RptButton>
|
||||||
|
<RptButton variant="primary" icon={<DI.Refresh size={13} />}>Sync</RptButton>
|
||||||
|
</PageHeader>
|
||||||
|
</div>
|
||||||
|
<Spec label="Title">Mono uppercase · green glow · 24px</Spec>
|
||||||
|
<Spec label="Meta line">Sync timestamp → record count → active filter count (amber)</Spec>
|
||||||
|
<Spec label="Actions">Right-aligned · neutral secondaries → primary on far right</Spec>
|
||||||
|
</KbCard>
|
||||||
|
|
||||||
|
{/* Donut grid assembly */}
|
||||||
|
<KbCard label="② Metric tabs + donut grid" hover={false} style={{ marginBottom: 14 }}>
|
||||||
|
<div style={{ padding: '8px 0' }}>
|
||||||
|
<div style={{ display: 'flex', gap: 5, alignItems: 'center', marginBottom: 12 }}>
|
||||||
|
<DI.PieChart size={14} style={{ color: '#334155', marginRight: 4 }} />
|
||||||
|
<PillTab active onClick={() => {}}>Ivanti Findings</PillTab>
|
||||||
|
<PillTab active={false} onClick={() => {}}>Atlas Coverage</PillTab>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 12 }}>
|
||||||
|
{[
|
||||||
|
{ label: 'Open vs Closed', segs: [{ label: 'Open', value: 184, color: DC.sky }, { label: 'Closed', value: 712, color: DC.green }], cl: 'TOTAL', cv: '896' },
|
||||||
|
{ label: 'Action Coverage', segs: [{ label: 'Patch', value: 96, color: DC.sky }, { label: 'Mitigate', value: 42, color: DC.green }, { label: 'Accept', value: 28, color: '#A78BFA' }], cl: 'ASSIGNED', cv: '184' },
|
||||||
|
{ label: 'FP Status', segs: [{ label: 'Pending', value: 14, color: DC.amber }, { label: 'Approved', value: 31, color: DC.green }, { label: 'Rejected', value: 6, color: DC.red }], cl: 'FINDINGS', cv: '51' },
|
||||||
|
].map((d) => (
|
||||||
|
<KbCard key={d.label} label={d.label}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', minHeight: 150 }}>
|
||||||
|
<DonutSample size={100} segments={d.segs} centerLabel={d.cl} centerValue={d.cv} />
|
||||||
|
</div>
|
||||||
|
</KbCard>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Spec label="Tabs">Pill row sits above grid · scopes which donuts render</Spec>
|
||||||
|
<Spec label="Grid">Auto-fill, 220px min · each donut is its own KB card</Spec>
|
||||||
|
</KbCard>
|
||||||
|
|
||||||
|
{/* Findings panel chrome */}
|
||||||
|
<KbCard label="③ Findings panel chrome (toolbar + filters + table)" hover={false}>
|
||||||
|
<div style={{
|
||||||
|
background: 'linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%)',
|
||||||
|
border: '1.5px solid rgba(14,165,233,0.12)', borderRadius: 8, padding: 16,
|
||||||
|
marginTop: 8,
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||||
|
paddingBottom: 10, marginBottom: 10,
|
||||||
|
borderBottom: '1px solid rgba(255,255,255,0.04)',
|
||||||
|
}}>
|
||||||
|
<ToolbarLabel count="184 of 896">Host Findings</ToolbarLabel>
|
||||||
|
<div style={{ display: 'flex', gap: 6 }}>
|
||||||
|
<RptButton variant="subtle" icon={<DI.Download size={12} />}>Export</RptButton>
|
||||||
|
<RptButton variant="subtle" icon={<DI.ListTodo size={12} />}>Queue</RptButton>
|
||||||
|
<RptButton variant="subtle" icon={<DI.Settings size={12} />}>Columns</RptButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||||||
|
<FilterChip color={DC.amber}>Severity: Critical, High</FilterChip>
|
||||||
|
<FilterChip color={DC.sky}>Action: Patch</FilterChip>
|
||||||
|
<FilterChip color={DC.red}>SLA: Overdue</FilterChip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Spec label="Toolbar">Mono uppercase label + count · subtle action buttons right</Spec>
|
||||||
|
<Spec label="Filter row">Tinted chips, click-to-clear</Spec>
|
||||||
|
<Spec label="Header migration">Sync/Atlas no longer live here — they're in the page header</Spec>
|
||||||
|
</KbCard>
|
||||||
|
</Section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Reference page ─────────────────────────────────────────────── */
|
||||||
|
function ReferenceSection() {
|
||||||
|
return (
|
||||||
|
<Section
|
||||||
|
id="reference"
|
||||||
|
eyebrow="05 · Reference page"
|
||||||
|
title="Full Reporting page"
|
||||||
|
blurb="Static mock of /reporting using only kit primitives. Use this to verify any change you make to a primitive flows through the page intact."
|
||||||
|
>
|
||||||
|
<div style={{
|
||||||
|
background: 'var(--bg-page)',
|
||||||
|
border: '1px solid rgba(14,165,233,0.12)',
|
||||||
|
borderRadius: 12,
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}>
|
||||||
|
<ReportingPage />
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Top-level docs page ─────────────────────────────────────────── */
|
||||||
|
function KitDocs() {
|
||||||
|
const [active, setActive] = useDocsState('overview');
|
||||||
|
const handle = (id) => {
|
||||||
|
setActive(id);
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (el) {
|
||||||
|
const top = el.getBoundingClientRect().top + window.scrollY - 80;
|
||||||
|
window.scrollTo({ top, behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// observe scroll position to update active tab
|
||||||
|
React.useEffect(() => {
|
||||||
|
const sections = ['overview', 'tokens', 'components', 'assemblies', 'reference']
|
||||||
|
.map((id) => document.getElementById(id))
|
||||||
|
.filter(Boolean);
|
||||||
|
const onScroll = () => {
|
||||||
|
const y = window.scrollY + 160;
|
||||||
|
let cur = sections[0]?.id;
|
||||||
|
for (const s of sections) {
|
||||||
|
if (s.offsetTop <= y) cur = s.id;
|
||||||
|
}
|
||||||
|
setActive(cur);
|
||||||
|
};
|
||||||
|
window.addEventListener('scroll', onScroll, { passive: true });
|
||||||
|
onScroll();
|
||||||
|
return () => window.removeEventListener('scroll', onScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<TabNav active={active} onChange={handle} />
|
||||||
|
<div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 24px 80px' }}>
|
||||||
|
<OverviewSection />
|
||||||
|
<TokensSection />
|
||||||
|
<ComponentsSection />
|
||||||
|
<AssembliesSection />
|
||||||
|
<ReferenceSection />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.RPT_DOCS = { KitDocs };
|
||||||
36
docs/design-system-redesign/ui_kits/reporting/README.md
Normal file
36
docs/design-system-redesign/ui_kits/reporting/README.md
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
# Reporting UI Kit
|
||||||
|
|
||||||
|
The visual vocabulary used by `/reporting` after the Knowledge Base alignment pass.
|
||||||
|
|
||||||
|
## Files
|
||||||
|
- `index.html` — entry point. Loads the kit docs page.
|
||||||
|
- `ReportPrimitives.jsx` — `PageHeader`, `RptButton`, `KbCard`, `PillTab`, `FilterChip`, `StatusBanner`, `ToolbarLabel`, `SeverityDot`, `SlaPill`, `WorkflowBadge`, `DonutSample`, `RptIcon`.
|
||||||
|
- `ReportingPage.jsx` — full-page reference assembly (`ReportingPage`).
|
||||||
|
- `KitDocs.jsx` — browseable docs (Overview · Tokens · Components · Assemblies · Reference).
|
||||||
|
|
||||||
|
## Color roles
|
||||||
|
- **Sky `#0EA5E9`** — surface accent (panel borders, tab pill active, donut highlight, table header text, neutral secondary buttons).
|
||||||
|
- **Green `#10B981`** — page identity only: title glow + the lone primary action (Sync).
|
||||||
|
- **Amber `#F59E0B`** — filter active, anomaly callout, At-Risk SLA.
|
||||||
|
- **Red `#EF4444`** — error / Critical / Overdue.
|
||||||
|
|
||||||
|
## Card chrome (one chrome, every panel)
|
||||||
|
```
|
||||||
|
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%)
|
||||||
|
border: 1.5px solid rgba(14,165,233,0.12) /* 0.35 on hover */
|
||||||
|
radius: 8px
|
||||||
|
label: mono · 11 / 600 · 0.1em · uppercase · slate-disabled
|
||||||
|
divider: 1px solid rgba(255,255,255,0.04) under the label
|
||||||
|
```
|
||||||
|
|
||||||
|
## Button hierarchy
|
||||||
|
- `primary` (green tinted-fill) — **only** Sync uses this.
|
||||||
|
- `neutral` (sky outlined transparent) — Atlas, Prev/Next, refresh.
|
||||||
|
- `subtle` (sky tinted-fill) — Export, Queue, Columns, Rows.
|
||||||
|
- `danger` (red tinted-fill) — destructive only.
|
||||||
|
|
||||||
|
## Page-level rules
|
||||||
|
1. `Sync` and `Atlas` live in the **page header**, not the findings panel toolbar.
|
||||||
|
2. The page title is the only place green appears as identity. Anywhere else, green = success state.
|
||||||
|
3. Every metric panel is a KB card. No more colored left-rails.
|
||||||
|
4. Filter chips tint to the dimension being filtered (severity → amber, SLA → red, action → sky).
|
||||||
@@ -0,0 +1,393 @@
|
|||||||
|
// ReportPrimitives.jsx — Reporting-specific UI vocabulary.
|
||||||
|
// All inline styles + tokens from ../../colors_and_type.css.
|
||||||
|
// Mirrors the live Reporting page (frontend/src/components/pages/ReportingPage.js)
|
||||||
|
// after the Knowledge-Base alignment pass.
|
||||||
|
|
||||||
|
const { useState: useRPTState } = React;
|
||||||
|
|
||||||
|
/* ─────────────────────────────────────────────────────────────────
|
||||||
|
COLOR ROLE MAP (Reporting)
|
||||||
|
──────────────────────────────────────────────────────────────────
|
||||||
|
Sky-blue (#0EA5E9) → primary surface accent (panel borders,
|
||||||
|
tab pill active, donut highlight, table
|
||||||
|
header text, neutral secondary buttons)
|
||||||
|
Green (#10B981) → page identity (header glow + primary
|
||||||
|
Sync button)
|
||||||
|
Amber (#F59E0B) → filter-active indicator, anomaly callout
|
||||||
|
Red (#EF4444) → error / overdue
|
||||||
|
Slate stack → muted text + dividers (#475569 → #334155)
|
||||||
|
──────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
const COLORS = {
|
||||||
|
sky: '#0EA5E9',
|
||||||
|
skySoft: '#7DD3FC',
|
||||||
|
green: '#10B981',
|
||||||
|
amber: '#F59E0B',
|
||||||
|
red: '#EF4444',
|
||||||
|
redSoft: '#FCA5A5',
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ── Page header ─────────────────────────────────────────────────
|
||||||
|
Big mono uppercase title in green w/ glow + count subtitle.
|
||||||
|
Right side: neutral icon-tinted secondaries + tinted-fill primary.
|
||||||
|
Lifted from the existing Knowledge Base page header pattern. */
|
||||||
|
function PageHeader({ title = 'Reporting', meta, children }) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 }}>
|
||||||
|
<div>
|
||||||
|
<h2 style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 24, fontWeight: 700,
|
||||||
|
color: COLORS.green, textTransform: 'uppercase', letterSpacing: '0.1em',
|
||||||
|
textShadow: '0 0 16px rgba(16,185,129,0.25)',
|
||||||
|
margin: '0 0 4px 0',
|
||||||
|
}}>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
{meta && (
|
||||||
|
<div style={{ fontSize: 12, color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)' }}>
|
||||||
|
{meta}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 8, flexShrink: 0, alignItems: 'center' }}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Buttons ─────────────────────────────────────────────────────
|
||||||
|
THREE variants documented for Reporting:
|
||||||
|
• primary — green tinted-fill (lone primary action: Sync)
|
||||||
|
• neutral — sky outlined transparent (Atlas, refresh, etc.)
|
||||||
|
• subtle — sky tinted-fill (Export, Queue, Column manager)
|
||||||
|
*/
|
||||||
|
function RptButton({ variant = 'neutral', icon, children, disabled, ...rest }) {
|
||||||
|
const [hover, setHover] = useRPTState(false);
|
||||||
|
const v = {
|
||||||
|
primary: {
|
||||||
|
bgRest: 'rgba(16,185,129,0.18)',
|
||||||
|
bgHover: 'rgba(16,185,129,0.26)',
|
||||||
|
bd: COLORS.green, fg: COLORS.green,
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
bgRest: 'transparent',
|
||||||
|
bgHover: 'rgba(14,165,233,0.06)',
|
||||||
|
bd: 'rgba(14,165,233,0.25)', fg: COLORS.sky,
|
||||||
|
},
|
||||||
|
subtle: {
|
||||||
|
bgRest: 'rgba(14,165,233,0.08)',
|
||||||
|
bgHover: 'rgba(14,165,233,0.16)',
|
||||||
|
bd: 'rgba(14,165,233,0.35)', fg: COLORS.sky,
|
||||||
|
},
|
||||||
|
danger: {
|
||||||
|
bgRest: 'rgba(239,68,68,0.08)',
|
||||||
|
bgHover: 'rgba(239,68,68,0.16)',
|
||||||
|
bd: 'rgba(239,68,68,0.30)', fg: COLORS.red,
|
||||||
|
},
|
||||||
|
}[variant];
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
disabled={disabled}
|
||||||
|
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||||||
|
style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||||
|
background: hover && !disabled ? v.bgHover : v.bgRest,
|
||||||
|
border: `1px solid ${hover && !disabled && variant === 'neutral' ? 'rgba(14,165,233,0.55)' : v.bd}`,
|
||||||
|
color: disabled ? 'var(--fg-disabled)' : v.fg,
|
||||||
|
padding: '8px 14px', borderRadius: 6,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||||||
|
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||||
|
opacity: disabled ? 0.5 : 1,
|
||||||
|
transition: 'all 150ms cubic-bezier(0.4,0,0.2,1)',
|
||||||
|
}}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
{icon}{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── KB-style card (sky) — used for donuts + findings panel ──── */
|
||||||
|
function KbCard({ children, padding = 16, label, labelExtra, hover = true, style }) {
|
||||||
|
const [h, setH] = useRPTState(false);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onMouseEnter={() => hover && setH(true)} onMouseLeave={() => setH(false)}
|
||||||
|
style={{
|
||||||
|
background: 'linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%)',
|
||||||
|
border: `1.5px solid ${h ? 'rgba(14,165,233,0.35)' : 'rgba(14,165,233,0.12)'}`,
|
||||||
|
borderRadius: 8, padding,
|
||||||
|
display: 'flex', flexDirection: 'column', gap: 10,
|
||||||
|
transition: 'border-color 150ms cubic-bezier(0.4,0,0.2,1)',
|
||||||
|
...style,
|
||||||
|
}}>
|
||||||
|
{label && (
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
|
||||||
|
color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.1em',
|
||||||
|
paddingBottom: 8,
|
||||||
|
borderBottom: '1px solid rgba(255,255,255,0.04)',
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||||
|
}}>
|
||||||
|
<span>{label}</span>
|
||||||
|
{labelExtra}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Pill tab (Ivanti / Atlas) ───────────────────────────────── */
|
||||||
|
function PillTab({ active, color = COLORS.sky, onClick, children }) {
|
||||||
|
const [hover, setHover] = useRPTState(false);
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={onClick}
|
||||||
|
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||||||
|
style={{
|
||||||
|
padding: '6px 12px',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
|
||||||
|
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||||||
|
cursor: 'pointer', borderRadius: 4,
|
||||||
|
border: `1px solid ${active ? color : (hover ? 'rgba(255,255,255,0.10)' : 'transparent')}`,
|
||||||
|
background: active ? `${color}26` : 'transparent',
|
||||||
|
color: active ? color : (hover ? '#94A3B8' : 'var(--fg-muted)'),
|
||||||
|
transition: 'all 120ms',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Filter chip (active filter pin in the toolbar) ──────────── */
|
||||||
|
function FilterChip({ color = COLORS.amber, onClear, children }) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={onClear}
|
||||||
|
style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||||
|
padding: '6px 12px',
|
||||||
|
background: `${color}14`,
|
||||||
|
border: `1px solid ${color}4D`,
|
||||||
|
borderRadius: 6,
|
||||||
|
color, cursor: 'pointer',
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
|
||||||
|
letterSpacing: '0.05em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<RptIcon.Filter size={11} />
|
||||||
|
{children}
|
||||||
|
<span style={{ marginLeft: 2, opacity: 0.7 }}>×</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Status banner (error / Atlas error / sync error) ────────── */
|
||||||
|
function StatusBanner({ tone = 'error', children }) {
|
||||||
|
const tones = {
|
||||||
|
error: { bg: 'rgba(239,68,68,0.08)', bd: 'rgba(239,68,68,0.25)', fg: COLORS.redSoft, icon: COLORS.red },
|
||||||
|
warn: { bg: 'rgba(245,158,11,0.10)', bd: 'rgba(245,158,11,0.28)', fg: '#FCD34D', icon: COLORS.amber },
|
||||||
|
info: { bg: 'rgba(14,165,233,0.08)', bd: 'rgba(14,165,233,0.25)', fg: COLORS.skySoft, icon: COLORS.sky },
|
||||||
|
};
|
||||||
|
const t = tones[tone];
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex', alignItems: 'flex-start', gap: 8,
|
||||||
|
padding: '10px 14px', background: t.bg, border: `1px solid ${t.bd}`,
|
||||||
|
borderRadius: 8,
|
||||||
|
}}>
|
||||||
|
<RptIcon.AlertCircle size={15} style={{ color: t.icon, flexShrink: 0, marginTop: 1 }} />
|
||||||
|
<span style={{ fontSize: 12, color: t.fg, fontFamily: 'var(--font-mono)' }}>{children}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Toolbar label (small mono uppercase, used inside findings panel) ── */
|
||||||
|
function ToolbarLabel({ children, accent = COLORS.sky, count }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
|
||||||
|
color: accent, textTransform: 'uppercase', letterSpacing: '0.1em',
|
||||||
|
}}>
|
||||||
|
{children}
|
||||||
|
{count != null && (
|
||||||
|
<span style={{ marginLeft: 10, color: '#334155', fontWeight: 400 }}>
|
||||||
|
{count}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Severity dot (used in table rows) ───────────────────────── */
|
||||||
|
function SeverityDot({ level }) {
|
||||||
|
const map = {
|
||||||
|
Critical: { c: COLORS.red, text: '#FCA5A5' },
|
||||||
|
High: { c: COLORS.amber, text: '#FCD34D' },
|
||||||
|
Medium: { c: COLORS.sky, text: '#7DD3FC' },
|
||||||
|
Low: { c: COLORS.green, text: '#6EE7B7' },
|
||||||
|
Info: { c: '#94A3B8', text: '#CBD5E1' },
|
||||||
|
};
|
||||||
|
const v = map[level] || map.Info;
|
||||||
|
return (
|
||||||
|
<span style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
|
||||||
|
color: v.text, letterSpacing: '0.04em',
|
||||||
|
}}>
|
||||||
|
<span style={{
|
||||||
|
width: 7, height: 7, borderRadius: '50%', background: v.c,
|
||||||
|
boxShadow: `0 0 6px ${v.c}99`,
|
||||||
|
}} />
|
||||||
|
{level}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── SLA pill (table cell) ───────────────────────────────────── */
|
||||||
|
function SlaPill({ status }) {
|
||||||
|
const map = {
|
||||||
|
OVERDUE: { c: COLORS.red, bg: 'rgba(239,68,68,0.16)' },
|
||||||
|
AT_RISK: { c: COLORS.amber, bg: 'rgba(245,158,11,0.16)' },
|
||||||
|
WITHIN_SLA: { c: COLORS.green, bg: 'rgba(16,185,129,0.16)' },
|
||||||
|
};
|
||||||
|
const v = map[status] || map.WITHIN_SLA;
|
||||||
|
return (
|
||||||
|
<span style={{
|
||||||
|
padding: '2px 8px', borderRadius: 999,
|
||||||
|
background: v.bg, color: v.c,
|
||||||
|
fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 10,
|
||||||
|
letterSpacing: '0.05em',
|
||||||
|
}}>
|
||||||
|
{status.replace('_', ' ')}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Workflow badge (table cell) ─────────────────────────────── */
|
||||||
|
function WorkflowBadge({ state }) {
|
||||||
|
const map = {
|
||||||
|
OPEN: { c: COLORS.sky, bg: 'rgba(14,165,233,0.14)' },
|
||||||
|
FP: { c: COLORS.amber, bg: 'rgba(245,158,11,0.14)' },
|
||||||
|
EXC: { c: '#A78BFA', bg: 'rgba(167,139,250,0.14)' },
|
||||||
|
REMEDIATED:{ c: COLORS.green, bg: 'rgba(16,185,129,0.14)' },
|
||||||
|
ARCHIVED: { c: '#94A3B8', bg: 'rgba(148,163,184,0.14)' },
|
||||||
|
};
|
||||||
|
const v = map[state] || { c: 'var(--fg-muted)', bg: 'rgba(148,163,184,0.10)' };
|
||||||
|
return (
|
||||||
|
<span style={{
|
||||||
|
padding: '2px 8px', borderRadius: 4,
|
||||||
|
background: v.bg, color: v.c, border: `1px solid ${v.c}55`,
|
||||||
|
fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 10,
|
||||||
|
letterSpacing: '0.05em',
|
||||||
|
}}>
|
||||||
|
{state}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Donut placeholder — semantic stand-in for the real recharts donut ── */
|
||||||
|
function DonutSample({ size = 130, segments, centerLabel, centerValue }) {
|
||||||
|
// segments: [{ label, value, color }]
|
||||||
|
const total = segments.reduce((s, x) => s + x.value, 0);
|
||||||
|
const cx = size / 2, cy = size / 2;
|
||||||
|
const outerR = size / 2 - 4, innerR = outerR - 16;
|
||||||
|
let angle = -90;
|
||||||
|
const arcs = segments.map((seg) => {
|
||||||
|
const sweep = (seg.value / total) * 360;
|
||||||
|
const a0 = (angle * Math.PI) / 180;
|
||||||
|
const a1 = ((angle + sweep) * Math.PI) / 180;
|
||||||
|
const large = sweep > 180 ? 1 : 0;
|
||||||
|
const x0 = cx + outerR * Math.cos(a0), y0 = cy + outerR * Math.sin(a0);
|
||||||
|
const x1 = cx + outerR * Math.cos(a1), y1 = cy + outerR * Math.sin(a1);
|
||||||
|
const xi1 = cx + innerR * Math.cos(a1), yi1 = cy + innerR * Math.sin(a1);
|
||||||
|
const xi0 = cx + innerR * Math.cos(a0), yi0 = cy + innerR * Math.sin(a0);
|
||||||
|
const d = `M ${x0} ${y0} A ${outerR} ${outerR} 0 ${large} 1 ${x1} ${y1}
|
||||||
|
L ${xi1} ${yi1} A ${innerR} ${innerR} 0 ${large} 0 ${xi0} ${yi0} Z`;
|
||||||
|
angle += sweep;
|
||||||
|
return { d, color: seg.color };
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
|
||||||
|
<div style={{ position: 'relative' }}>
|
||||||
|
<svg width={size} height={size}>
|
||||||
|
{arcs.map((a, i) => (
|
||||||
|
<path key={i} d={a.d} fill={a.color} stroke="rgba(15,23,42,0.95)" strokeWidth="1" />
|
||||||
|
))}
|
||||||
|
</svg>
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', inset: 0,
|
||||||
|
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
|
||||||
|
pointerEvents: 'none',
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 700,
|
||||||
|
color: 'var(--fg-1)', lineHeight: 1,
|
||||||
|
}}>{centerValue}</div>
|
||||||
|
{centerLabel && (
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600,
|
||||||
|
color: 'var(--fg-disabled)', textTransform: 'uppercase', letterSpacing: '0.12em',
|
||||||
|
marginTop: 4,
|
||||||
|
}}>
|
||||||
|
{centerLabel}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Legend */}
|
||||||
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px 10px', justifyContent: 'center', maxWidth: size + 32 }}>
|
||||||
|
{segments.map((s) => (
|
||||||
|
<div key={s.label} style={{
|
||||||
|
display: 'inline-flex', alignItems: 'center', gap: 4,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 9.5, color: 'var(--fg-muted)',
|
||||||
|
letterSpacing: '0.04em',
|
||||||
|
}}>
|
||||||
|
<span style={{ width: 8, height: 8, borderRadius: 2, background: s.color, flexShrink: 0 }} />
|
||||||
|
<span>{s.label} <span style={{ color: 'var(--fg-disabled)' }}>{s.value}</span></span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Inline lucide icons (Reporting subset) ──────────────────── */
|
||||||
|
const _ic = (path) => ({ size = 14, strokeWidth = 1.75, ...rest }) => (
|
||||||
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none"
|
||||||
|
stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
|
||||||
|
style={{ flexShrink: 0 }} {...rest}>{path}</svg>
|
||||||
|
);
|
||||||
|
const RptIcon = {
|
||||||
|
Refresh: _ic(<><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></>),
|
||||||
|
PieChart: _ic(<><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></>),
|
||||||
|
Filter: _ic(<><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></>),
|
||||||
|
Download: _ic(<><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></>),
|
||||||
|
ChevronD: _ic(<><polyline points="6 9 12 15 18 9"/></>),
|
||||||
|
ChevronUp: _ic(<><polyline points="18 15 12 9 6 15"/></>),
|
||||||
|
ChevronUpDn:_ic(<><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></>),
|
||||||
|
ListTodo: _ic(<><rect x="3" y="5" width="6" height="6" rx="1"/><path d="m3 17 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/></>),
|
||||||
|
Settings: _ic(<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>),
|
||||||
|
Eye: _ic(<><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></>),
|
||||||
|
EyeOff: _ic(<><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" y1="2" x2="22" y2="22"/></>),
|
||||||
|
AlertCircle:_ic(<><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></>),
|
||||||
|
AlertTri: _ic(<><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></>),
|
||||||
|
Atlas: _ic(<><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10"/><path d="M12 2a15.3 15.3 0 0 0-4 10 15.3 15.3 0 0 0 4 10"/></>),
|
||||||
|
Search: _ic(<><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></>),
|
||||||
|
Square: _ic(<><rect x="3" y="3" width="18" height="18" rx="2"/></>),
|
||||||
|
CheckSq: _ic(<><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></>),
|
||||||
|
Loader: _ic(<><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/></>),
|
||||||
|
TrendUp: _ic(<><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></>),
|
||||||
|
};
|
||||||
|
|
||||||
|
window.RPT = {
|
||||||
|
COLORS,
|
||||||
|
PageHeader, RptButton, KbCard, PillTab, FilterChip, StatusBanner,
|
||||||
|
ToolbarLabel, SeverityDot, SlaPill, WorkflowBadge, DonutSample,
|
||||||
|
RptIcon,
|
||||||
|
};
|
||||||
299
docs/design-system-redesign/ui_kits/reporting/ReportingPage.jsx
Normal file
299
docs/design-system-redesign/ui_kits/reporting/ReportingPage.jsx
Normal file
@@ -0,0 +1,299 @@
|
|||||||
|
// ReportingPage.jsx — full-page assembly using only RPT primitives.
|
||||||
|
// Mirrors frontend/src/components/pages/ReportingPage.js after the KB pass.
|
||||||
|
|
||||||
|
const { useState: useRPSt } = React;
|
||||||
|
const {
|
||||||
|
COLORS: RC,
|
||||||
|
PageHeader, RptButton, KbCard, PillTab, FilterChip, StatusBanner,
|
||||||
|
ToolbarLabel, SeverityDot, SlaPill, WorkflowBadge, DonutSample,
|
||||||
|
RptIcon: RI,
|
||||||
|
} = window.RPT;
|
||||||
|
|
||||||
|
/* Sample findings rows. Static — purely for layout. */
|
||||||
|
const SAMPLE_ROWS = [
|
||||||
|
{ id: 'F-10241', host: 'web-prod-04.steam.local', os: 'Ubuntu 22.04', sev: 'Critical', cve: 'CVE-2024-3094', age: 4, sla: 'OVERDUE', state: 'OPEN', action: 'Patch', owner: 'platform' },
|
||||||
|
{ id: 'F-10238', host: 'kafka-broker-2.steam.local',os: 'RHEL 9.3', sev: 'Critical', cve: 'CVE-2024-21626', age: 11, sla: 'OVERDUE', state: 'FP', action: 'Investigate',owner: 'data-eng' },
|
||||||
|
{ id: 'F-10202', host: 'auth-prod-01.steam.local', os: 'Ubuntu 22.04', sev: 'High', cve: 'CVE-2024-1086', age: 3, sla: 'AT_RISK', state: 'OPEN', action: 'Patch', owner: 'platform' },
|
||||||
|
{ id: 'F-10197', host: 'edge-cdn-09.steam.local', os: 'Alpine 3.19', sev: 'High', cve: 'CVE-2024-23222', age: 2, sla: 'AT_RISK', state: 'EXC', action: 'Accept', owner: 'edge' },
|
||||||
|
{ id: 'F-10185', host: 'analytics-w-3.steam.local',os: 'Ubuntu 20.04', sev: 'Medium', cve: 'CVE-2023-50387', age: 14, sla: 'WITHIN_SLA', state: 'OPEN', action: 'Mitigate', owner: 'analytics' },
|
||||||
|
{ id: 'F-10180', host: 'mail-relay-1.steam.local', os: 'Debian 12', sev: 'Medium', cve: 'CVE-2024-22195', age: 9, sla: 'WITHIN_SLA', state: 'REMEDIATED', action: 'Patch', owner: 'platform' },
|
||||||
|
{ id: 'F-10164', host: 'jumphost-2.steam.local', os: 'Ubuntu 22.04', sev: 'Low', cve: 'CVE-2023-45288', age: 22, sla: 'WITHIN_SLA', state: 'OPEN', action: 'Defer', owner: 'sre' },
|
||||||
|
];
|
||||||
|
|
||||||
|
/* Tiny anomaly bar chart placeholder for the trend section. */
|
||||||
|
function TrendChartPlaceholder() {
|
||||||
|
const data = [22, 28, 21, 24, 30, 27, 26, 25, 31, 38, 42, 45, 41, 36, 33];
|
||||||
|
const closed = [10, 14, 12, 13, 18, 20, 22, 21, 24, 26, 28, 30, 31, 30, 29];
|
||||||
|
const max = Math.max(...data);
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 120, padding: '4px 0' }}>
|
||||||
|
{data.map((d, i) => (
|
||||||
|
<div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: 2 }}>
|
||||||
|
<div style={{
|
||||||
|
height: `${(d / max) * 100}%`,
|
||||||
|
background: 'linear-gradient(180deg, rgba(14,165,233,0.85), rgba(14,165,233,0.45))',
|
||||||
|
borderRadius: '2px 2px 0 0',
|
||||||
|
}} />
|
||||||
|
<div style={{
|
||||||
|
height: `${(closed[i] / max) * 60}%`,
|
||||||
|
background: 'rgba(16,185,129,0.55)',
|
||||||
|
borderRadius: '0 0 2px 2px',
|
||||||
|
}} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ReportingPage() {
|
||||||
|
const [tab, setTab] = useRPSt('ivanti');
|
||||||
|
const [actionFilter, setActionFilter] = useRPSt(null);
|
||||||
|
|
||||||
|
/* Donut data (illustrative) */
|
||||||
|
const ivantiDonuts = [
|
||||||
|
{
|
||||||
|
label: 'Open vs Closed',
|
||||||
|
donut: <DonutSample
|
||||||
|
segments={[
|
||||||
|
{ label: 'Open', value: 184, color: RC.sky },
|
||||||
|
{ label: 'Closed', value: 712, color: RC.green },
|
||||||
|
]}
|
||||||
|
centerLabel="TOTAL" centerValue="896" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Action Coverage',
|
||||||
|
labelExtra: actionFilter && (
|
||||||
|
<span style={{ color: RC.amber, fontSize: 9 }}>● filtered</span>
|
||||||
|
),
|
||||||
|
donut: <DonutSample
|
||||||
|
segments={[
|
||||||
|
{ label: 'Patch', value: 96, color: RC.sky },
|
||||||
|
{ label: 'Mitigate', value: 42, color: RC.green },
|
||||||
|
{ label: 'Accept', value: 28, color: '#A78BFA' },
|
||||||
|
{ label: 'Investigate', value: 18, color: RC.amber },
|
||||||
|
]}
|
||||||
|
centerLabel="ASSIGNED" centerValue="184" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'FP Finding Status',
|
||||||
|
donut: <DonutSample
|
||||||
|
segments={[
|
||||||
|
{ label: 'Pending', value: 14, color: RC.amber },
|
||||||
|
{ label: 'Approved', value: 31, color: RC.green },
|
||||||
|
{ label: 'Rejected', value: 6, color: RC.red },
|
||||||
|
]}
|
||||||
|
centerLabel="FINDINGS" centerValue="51" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'FP Workflow Status',
|
||||||
|
donut: <DonutSample
|
||||||
|
segments={[
|
||||||
|
{ label: 'In Review', value: 8, color: RC.sky },
|
||||||
|
{ label: 'Closed', value: 22, color: RC.green },
|
||||||
|
{ label: 'Escalated', value: 4, color: RC.red },
|
||||||
|
]}
|
||||||
|
centerLabel="FP TICKETS" centerValue="34" />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const atlasDonuts = [
|
||||||
|
{
|
||||||
|
label: 'Host Coverage',
|
||||||
|
donut: <DonutSample
|
||||||
|
segments={[
|
||||||
|
{ label: 'With Plans', value: 312, color: RC.green },
|
||||||
|
{ label: 'Without Plans', value: 88, color: RC.amber },
|
||||||
|
]}
|
||||||
|
centerLabel="HOSTS" centerValue="400" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Plan Types',
|
||||||
|
donut: <DonutSample
|
||||||
|
segments={[
|
||||||
|
{ label: 'Patch', value: 142, color: RC.sky },
|
||||||
|
{ label: 'Mitigate', value: 68, color: RC.green },
|
||||||
|
{ label: 'Accept', value: 31, color: '#A78BFA' },
|
||||||
|
]}
|
||||||
|
centerLabel="PLANS" centerValue="241" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Plan Status',
|
||||||
|
donut: <DonutSample
|
||||||
|
segments={[
|
||||||
|
{ label: 'Active', value: 184, color: RC.green },
|
||||||
|
{ label: 'Pending', value: 42, color: RC.amber },
|
||||||
|
{ label: 'Stalled', value: 15, color: RC.red },
|
||||||
|
]}
|
||||||
|
centerLabel="STATUS" centerValue="241" />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const donuts = tab === 'ivanti' ? ivantiDonuts : atlasDonuts;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex', flexDirection: 'column', gap: 20,
|
||||||
|
padding: 24, maxWidth: 1280, margin: '0 auto',
|
||||||
|
}}>
|
||||||
|
{/* Page header */}
|
||||||
|
<PageHeader
|
||||||
|
title="Reporting"
|
||||||
|
meta={
|
||||||
|
<>
|
||||||
|
Last sync: 2 minutes ago
|
||||||
|
<span style={{ marginLeft: 10, color: '#334155' }}>· 184 of 896 findings</span>
|
||||||
|
<span style={{ marginLeft: 8, color: RC.amber }}>(3 filters active)</span>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<RptButton variant="neutral" icon={<RI.Atlas size={13} />}>Atlas</RptButton>
|
||||||
|
<RptButton variant="primary" icon={<RI.Refresh size={13} />}>Sync</RptButton>
|
||||||
|
</PageHeader>
|
||||||
|
|
||||||
|
{/* Header-level error */}
|
||||||
|
<StatusBanner tone="error">Atlas: connection refused — retry in 30s</StatusBanner>
|
||||||
|
|
||||||
|
{/* Metrics tabs */}
|
||||||
|
<div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
|
||||||
|
<RI.PieChart size={14} style={{ color: '#334155', marginRight: 4 }} />
|
||||||
|
<PillTab active={tab === 'ivanti'} onClick={() => setTab('ivanti')}>Ivanti Findings</PillTab>
|
||||||
|
<PillTab active={tab === 'atlas'} onClick={() => setTab('atlas')}>Atlas Coverage</PillTab>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Donut grid */}
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
|
||||||
|
gap: 14,
|
||||||
|
}}>
|
||||||
|
{donuts.map((d) => (
|
||||||
|
<KbCard key={d.label} label={d.label} labelExtra={d.labelExtra}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 170 }}>
|
||||||
|
{d.donut}
|
||||||
|
</div>
|
||||||
|
</KbCard>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Trend section */}
|
||||||
|
<KbCard label="Open vs Closed · last 30 days" labelExtra={
|
||||||
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, color: RC.amber, fontSize: 10 }}>
|
||||||
|
<RI.AlertTri size={11} /> spike detected day 12
|
||||||
|
</span>
|
||||||
|
}>
|
||||||
|
<TrendChartPlaceholder />
|
||||||
|
<div style={{ display: 'flex', gap: 14, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-muted)', justifyContent: 'center' }}>
|
||||||
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
|
||||||
|
<span style={{ width: 9, height: 9, background: RC.sky, borderRadius: 2 }} /> Open
|
||||||
|
</span>
|
||||||
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
|
||||||
|
<span style={{ width: 9, height: 9, background: 'rgba(16,185,129,0.55)', borderRadius: 2 }} /> Closed
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</KbCard>
|
||||||
|
|
||||||
|
{/* Findings table panel */}
|
||||||
|
<div style={{
|
||||||
|
background: 'linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%)',
|
||||||
|
border: '1.5px solid rgba(14,165,233,0.12)',
|
||||||
|
borderRadius: 8, padding: 20,
|
||||||
|
}}>
|
||||||
|
{/* Toolbar */}
|
||||||
|
<div style={{
|
||||||
|
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||||
|
marginBottom: 12, paddingBottom: 10,
|
||||||
|
borderBottom: '1px solid rgba(255,255,255,0.04)',
|
||||||
|
}}>
|
||||||
|
<ToolbarLabel count="184 of 896">Host Findings</ToolbarLabel>
|
||||||
|
<div style={{ display: 'flex', gap: 6 }}>
|
||||||
|
<RptButton variant="subtle" icon={<RI.Download size={12} />}>Export</RptButton>
|
||||||
|
<RptButton variant="subtle" icon={<RI.ListTodo size={12} />}>Queue</RptButton>
|
||||||
|
<RptButton variant="subtle" icon={<RI.Settings size={12} />}>Columns</RptButton>
|
||||||
|
<RptButton variant="subtle" icon={<RI.EyeOff size={12} />}>Rows</RptButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search + filter chip row */}
|
||||||
|
<div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 12, flexWrap: 'wrap' }}>
|
||||||
|
<div style={{
|
||||||
|
position: 'relative', flex: '1 1 280px', maxWidth: 360,
|
||||||
|
}}>
|
||||||
|
<RI.Search size={13} style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: 'var(--fg-disabled)' }} />
|
||||||
|
<input
|
||||||
|
defaultValue="kafka"
|
||||||
|
placeholder="Search host, CVE, owner…"
|
||||||
|
style={{
|
||||||
|
width: '100%', padding: '8px 10px 8px 30px',
|
||||||
|
background: 'rgba(15,23,42,0.6)',
|
||||||
|
border: '1px solid rgba(14,165,233,0.18)',
|
||||||
|
borderRadius: 6,
|
||||||
|
color: 'var(--fg-1)', fontFamily: 'var(--font-mono)', fontSize: 12,
|
||||||
|
outline: 'none',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<FilterChip color={RC.amber}>Severity: Critical, High</FilterChip>
|
||||||
|
<FilterChip color={RC.sky}>Action: Patch</FilterChip>
|
||||||
|
<FilterChip color={RC.red}>SLA: Overdue</FilterChip>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Table */}
|
||||||
|
<div style={{ overflow: 'auto', borderRadius: 6, border: '1px solid rgba(255,255,255,0.04)' }}>
|
||||||
|
<table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-mono)', fontSize: 11 }}>
|
||||||
|
<thead>
|
||||||
|
<tr style={{ background: 'rgba(14,165,233,0.06)' }}>
|
||||||
|
{['ID', 'Host', 'OS', 'Severity', 'CVE', 'Age', 'SLA', 'State', 'Action', 'Owner'].map((h) => (
|
||||||
|
<th key={h} style={{
|
||||||
|
textAlign: 'left', padding: '8px 12px',
|
||||||
|
color: RC.sky, textTransform: 'uppercase', letterSpacing: '0.08em',
|
||||||
|
fontWeight: 700, fontSize: 10,
|
||||||
|
borderBottom: '1px solid rgba(14,165,233,0.18)',
|
||||||
|
}}>
|
||||||
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
|
||||||
|
{h}
|
||||||
|
<RI.ChevronUpDn size={10} style={{ opacity: 0.5 }} />
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{SAMPLE_ROWS.map((r, i) => (
|
||||||
|
<tr key={r.id} style={{
|
||||||
|
background: i % 2 === 0 ? 'transparent' : 'rgba(255,255,255,0.015)',
|
||||||
|
borderBottom: '1px solid rgba(255,255,255,0.03)',
|
||||||
|
}}>
|
||||||
|
<td style={{ padding: '10px 12px', color: RC.sky, fontWeight: 600 }}>{r.id}</td>
|
||||||
|
<td style={{ padding: '10px 12px', color: 'var(--fg-1)' }}>{r.host}</td>
|
||||||
|
<td style={{ padding: '10px 12px', color: 'var(--fg-muted)' }}>{r.os}</td>
|
||||||
|
<td style={{ padding: '10px 12px' }}><SeverityDot level={r.sev} /></td>
|
||||||
|
<td style={{ padding: '10px 12px', color: 'var(--fg-2)' }}>{r.cve}</td>
|
||||||
|
<td style={{ padding: '10px 12px', color: 'var(--fg-muted)' }}>{r.age}d</td>
|
||||||
|
<td style={{ padding: '10px 12px' }}><SlaPill status={r.sla} /></td>
|
||||||
|
<td style={{ padding: '10px 12px' }}><WorkflowBadge state={r.state} /></td>
|
||||||
|
<td style={{ padding: '10px 12px', color: 'var(--fg-2)' }}>{r.action}</td>
|
||||||
|
<td style={{ padding: '10px 12px', color: 'var(--fg-muted)' }}>{r.owner}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pagination footer */}
|
||||||
|
<div style={{
|
||||||
|
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||||
|
paddingTop: 12, marginTop: 4,
|
||||||
|
fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-muted)',
|
||||||
|
}}>
|
||||||
|
<span>Showing 1–{SAMPLE_ROWS.length} of 184</span>
|
||||||
|
<div style={{ display: 'flex', gap: 6 }}>
|
||||||
|
<RptButton variant="neutral">‹ Prev</RptButton>
|
||||||
|
<RptButton variant="neutral">Next ›</RptButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.RPT_PAGE = { ReportingPage };
|
||||||
46
docs/design-system-redesign/ui_kits/reporting/index.html
Normal file
46
docs/design-system-redesign/ui_kits/reporting/index.html
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>STEAM Security · Reporting UI Kit</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="stylesheet" href="../../colors_and_type.css" />
|
||||||
|
<style>
|
||||||
|
body { margin: 0; min-height: 100vh; }
|
||||||
|
.page-bg { min-height: 100vh; background: var(--bg-page); }
|
||||||
|
|
||||||
|
/* Anchor scroll offset under the sticky tab strip */
|
||||||
|
:target { scroll-margin-top: 120px; }
|
||||||
|
|
||||||
|
/* Hide scrollbars on the in-page sample regions */
|
||||||
|
.sample-frame::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||||
|
.sample-frame::-webkit-scrollbar-thumb { background: rgba(14,165,233,0.2); border-radius: 4px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root" class="page-bg"></div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<script type="text/babel" src="ReportPrimitives.jsx"></script>
|
||||||
|
<script type="text/babel" src="ReportingPage.jsx"></script>
|
||||||
|
<script type="text/babel" src="KitDocs.jsx"></script>
|
||||||
|
|
||||||
|
<script type="text/babel">
|
||||||
|
const { useState } = React;
|
||||||
|
const { KitDocs } = window.RPT_DOCS;
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<main data-screen-label="Reporting Kit">
|
||||||
|
<KitDocs />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
docs/graniteexport.xlsx
Normal file
BIN
docs/graniteexport.xlsx
Normal file
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@@ -19,9 +19,8 @@ All API calls are made from a single Node.js backend process. The integration us
|
|||||||
| Inter-request delay — writes | 2 seconds minimum between PUT/POST/DELETE requests |
|
| Inter-request delay — writes | 2 seconds minimum between PUT/POST/DELETE requests |
|
||||||
| Explicit field lists | Every GET includes `?fields=` parameter; `/rest/api/2/field` is blocked |
|
| Explicit field lists | Every GET includes `?fields=` parameter; `/rest/api/2/field` is blocked |
|
||||||
| No bulk updates | Issues are updated one at a time; `/rest/api/2/issue/bulk` is blocked |
|
| No bulk updates | Issues are updated one at a time; `/rest/api/2/issue/bulk` is blocked |
|
||||||
| Bulk reads via JQL | Multi-ticket sync uses a single `GET /rest/api/2/search` with JQL query parameters, not per-issue GETs |
|
| Bulk reads via JQL | Multi-ticket sync uses a single `POST /rest/api/2/search` with JQL, not per-issue GETs |
|
||||||
| Single-issue fetch via JQL | `GET /rest/api/2/search?jql=key="KEY" AND project=<KEY>&fields=...&maxResults=1` |
|
| JQL scoping | All recurring JQL queries include `updated >= -Xh` clause |
|
||||||
| JQL scoping | All recurring JQL queries include `updated >= -Xh` clause and `project = <KEY>` scoping |
|
|
||||||
| `maxResults` cap | Search queries capped at 1 000 results per page |
|
| `maxResults` cap | Search queries capped at 1 000 results per page |
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -53,11 +52,11 @@ All API calls are made from a single Node.js backend process. The integration us
|
|||||||
|
|
||||||
| | |
|
| | |
|
||||||
|---|---|
|
|---|---|
|
||||||
| **Endpoint** | `GET /rest/api/2/search?jql=key="ISSUE-KEY" AND project=<KEY>&fields=summary,status,assignee,created,updated,priority,issuetype,project,resolution&maxResults=1` |
|
| **Endpoint** | `GET /rest/api/2/issue/{issueKey}?fields=summary,status,assignee,created,updated,priority,issuetype,project,resolution` |
|
||||||
| **Trigger** | User clicks "Sync" on a single Jira ticket row |
|
| **Trigger** | User clicks "Sync" on a single Jira ticket row |
|
||||||
| **Frequency** | Manual, estimated 10–30 per day |
|
| **Frequency** | Manual, estimated 10–30 per day |
|
||||||
| **Purpose** | Refresh a single ticket's status and summary from Jira via JQL search |
|
| **Purpose** | Refresh a single ticket's status and summary from Jira |
|
||||||
| **Notes** | Uses JQL-based lookup instead of single-issue GET per Charter compliance. Fields are always specified explicitly. |
|
| **Notes** | Fields are always specified explicitly per Charter requirement |
|
||||||
|
|
||||||
### 4. Update Issue
|
### 4. Update Issue
|
||||||
|
|
||||||
@@ -100,23 +99,23 @@ All API calls are made from a single Node.js backend process. The integration us
|
|||||||
|
|
||||||
| | |
|
| | |
|
||||||
|---|---|
|
|---|---|
|
||||||
| **Endpoint** | `GET /rest/api/2/search?jql=...&fields=...&maxResults=...&startAt=...` |
|
| **Endpoint** | `POST /rest/api/2/search` |
|
||||||
| **Trigger** | Admin clicks "Sync All" on the Jira tickets panel |
|
| **Trigger** | Admin clicks "Sync All" on the Jira tickets panel |
|
||||||
| **Frequency** | Manual, estimated 1–3 times per day |
|
| **Frequency** | Manual, estimated 1–3 times per day |
|
||||||
| **Purpose** | Bulk-refresh all tracked tickets in a single request instead of per-issue GETs |
|
| **Purpose** | Bulk-refresh all tracked tickets in a single request instead of per-issue GETs |
|
||||||
| **JQL pattern** | `key in ("KEY-1", "KEY-2", ...) AND updated >= -24h AND project = <KEY>` |
|
| **JQL pattern** | `key in ("KEY-1", "KEY-2", ...) AND updated >= -24h` |
|
||||||
| **Fields requested** | `summary, status, assignee, created, updated, priority, issuetype, project, resolution` |
|
| **Fields requested** | `summary, status, assignee, created, updated, priority, issuetype, project, resolution` |
|
||||||
| **Batch size** | 100 keys per JQL query; multiple batches if needed |
|
| **Batch size** | 100 keys per JQL query; multiple batches if needed |
|
||||||
| **Notes** | Uses GET with URL-encoded query parameters per Charter compliance. Stops early if rate limit budget is running low (burst remaining <= 5 or daily remaining <= 10) |
|
| **Notes** | Stops early if rate limit budget is running low (burst remaining <= 5 or daily remaining <= 10) |
|
||||||
|
|
||||||
### 9. Issue Lookup
|
### 9. Issue Lookup
|
||||||
|
|
||||||
| | |
|
| | |
|
||||||
|---|---|
|
|---|---|
|
||||||
| **Endpoint** | `GET /rest/api/2/search?jql=key="ISSUE-KEY" AND project=<KEY>&fields=...&maxResults=1` |
|
| **Endpoint** | `GET /rest/api/2/issue/{issueKey}?fields=...` |
|
||||||
| **Trigger** | User looks up a Jira issue by key from the dashboard search |
|
| **Trigger** | User looks up a Jira issue by key from the dashboard search |
|
||||||
| **Frequency** | Manual, estimated 5–15 per day |
|
| **Frequency** | Manual, estimated 5–15 per day |
|
||||||
| **Purpose** | Quick lookup of any Jira issue to view its current state via JQL search |
|
| **Purpose** | Quick lookup of any Jira issue to view its current state |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -131,7 +130,7 @@ All API calls are made from a single Node.js backend process. The integration us
|
|||||||
| Add comment | 5–15 | POST | 2s |
|
| Add comment | 5–15 | POST | 2s |
|
||||||
| Get transitions | 5–10 | GET | 1s |
|
| Get transitions | 5–10 | GET | 1s |
|
||||||
| Transition issue | 5–10 | POST | 2s |
|
| Transition issue | 5–10 | POST | 2s |
|
||||||
| JQL search (sync) | 1–5 | GET | 1s |
|
| JQL search (sync) | 1–5 | POST | 2s |
|
||||||
| Issue lookup | 5–15 | GET | 1s |
|
| Issue lookup | 5–15 | GET | 1s |
|
||||||
| **Total estimated** | **43–120** | | |
|
| **Total estimated** | **43–120** | | |
|
||||||
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user