145 lines
5.3 KiB
Markdown
145 lines
5.3 KiB
Markdown
# Audit Analytics Dashboard Improvements
|
|
|
|
## Issues Identified
|
|
1. "Decisions over time" chart broken - groups by hour-of-day (0:00-23:00) across all 30 days
|
|
2. Too granular - hourly data not useful for 30-day period
|
|
3. Missing service health dashboard
|
|
4. Missing long-term violations view
|
|
5. Too much focus on recent decisions list
|
|
|
|
## Proposed Changes
|
|
|
|
### 1. Add Service Health (24h) Section
|
|
**Location:** Between service chart and timeline chart
|
|
**Purpose:** Show which services are healthy (allowed, no violations) in last 24 hours
|
|
|
|
**HTML to add:**
|
|
```html
|
|
<!-- Service Health (24h) -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Service Health (Last 24 Hours)</h3>
|
|
<div id="service-health-24h" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<!-- Will be populated by JS -->
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
**JavaScript function needed:**
|
|
- `renderServiceHealth24h()` - filter last 24h, group by service, show allowed counts + violations
|
|
- Green background if no blocks/violations, red if issues
|
|
- Show: Service name, ✓ or ⚠ icon, Allowed count, Blocked count (if > 0), Violations count (if > 0)
|
|
|
|
### 2. Add Violations & Blocks (7 days) Section
|
|
**Location:** After service health, before timeline
|
|
**Purpose:** Long-term view of violations and blocks
|
|
|
|
**HTML to add:**
|
|
```html
|
|
<!-- Violations & Blocks (7 days) -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Violations & Blocks (Last 7 Days)</h3>
|
|
<div id="violations-7days" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
<!-- Will be populated by JS -->
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
**JavaScript function needed:**
|
|
- `renderViolations7days()` - filter last 7 days, group by day, show blocks + violations per day
|
|
- Red background for days with violations
|
|
- Green message if zero violations: "✓ No violations or blocks in the last 7 days"
|
|
- Show: Day label, event count, blocks count, violations count, services involved
|
|
|
|
### 3. Fix Timeline Chart with Tabs
|
|
**Location:** Existing timeline chart
|
|
**Purpose:** Replace broken hourly view with useful time bucketing
|
|
|
|
**HTML to modify:**
|
|
```html
|
|
<!-- Timeline Chart -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Decisions Over Time</h3>
|
|
<div class="flex gap-2">
|
|
<button data-timeline-mode="6hourly" onclick="switchTimelineMode('6hourly')"
|
|
class="px-3 py-1 text-sm rounded bg-gray-200 text-gray-700">
|
|
6-Hourly (24h)
|
|
</button>
|
|
<button data-timeline-mode="daily" onclick="switchTimelineMode('daily')"
|
|
class="px-3 py-1 text-sm rounded bg-purple-600 text-white">
|
|
Daily (7d)
|
|
</button>
|
|
<button data-timeline-mode="weekly" onclick="switchTimelineMode('weekly')"
|
|
class="px-3 py-1 text-sm rounded bg-gray-200 text-gray-700">
|
|
Weekly (4w)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="timeline-chart" class="chart-container">
|
|
<!-- Chart will be rendered here -->
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
**JavaScript changes:**
|
|
- Add `let timelineMode = 'daily';` at top
|
|
- Replace `renderTimelineChart()` to support 3 modes:
|
|
- **6-hourly (24h):** 4 buckets (0-6h, 6-12h, 12-18h, 18-24h ago)
|
|
- **Daily (7d):** 7 buckets (last 7 days, labeled "Jan 1", "Jan 2", etc.)
|
|
- **Weekly (4w):** 4 buckets (Week 1, Week 2, Week 3, Week 4)
|
|
- Add `switchTimelineMode(mode)` function to toggle between modes
|
|
- Fix bar chart to show actual dates/time ranges, not hours-of-day
|
|
|
|
### 4. Remove or Simplify Recent Decisions Table
|
|
**Current:** Shows 50 recent decisions with full details
|
|
**Proposed:** Either remove entirely or reduce to 10 rows (less focus on individual decisions, more on patterns)
|
|
|
|
## Implementation Priority
|
|
1. Fix timeline chart (critical - currently broken)
|
|
2. Add service health 24h (high value)
|
|
3. Add violations 7 days (high value)
|
|
4. Simplify/remove recent decisions table (cleanup)
|
|
|
|
## Key Design Goals
|
|
- **Service Health:** Quick status check - which services are working correctly?
|
|
- **Violations:** Long-term tracking - any patterns in violations/blocks?
|
|
- **Timeline:** Useful time bucketing - how is usage changing over time?
|
|
- **Less detail noise:** Remove granular recent decisions list, focus on aggregate patterns
|
|
|
|
## Example Data Flow
|
|
|
|
**Service Health (24h):**
|
|
```
|
|
ContextPressureMonitor: ✓ Allowed: 45
|
|
BoundaryEnforcer: ✓ Allowed: 32
|
|
CrossReferenceValidator: ⚠ Allowed: 12, Violations: 3
|
|
```
|
|
|
|
**Violations (7 days):**
|
|
```
|
|
Fri, Oct 25: 2 blocks, 5 violations (BoundaryEnforcer, CrossReferenceValidator)
|
|
Thu, Oct 24: 0 blocks, 1 violation (MetacognitiveVerifier)
|
|
[other days with no violations not shown]
|
|
```
|
|
|
|
**Timeline (Daily 7d):**
|
|
```
|
|
Bar chart showing:
|
|
Oct 19: 45 decisions
|
|
Oct 20: 52 decisions
|
|
Oct 21: 38 decisions
|
|
...
|
|
Oct 25: 67 decisions
|
|
```
|
|
|
|
## CSP Compliance
|
|
- All styles via Tailwind classes (no inline styles)
|
|
- onclick handlers for timeline mode buttons only (simple, CSP-safe)
|
|
- All rendering via innerHTML (no eval/Function)
|
|
|
|
## Next Steps
|
|
1. Update audit-analytics.html with new HTML sections
|
|
2. Add new JavaScript functions
|
|
3. Update renderDashboard() to call new functions
|
|
4. Test with real audit data
|
|
5. Deploy to production
|