Audit Analytics Dashboard Improvements

Issues Identified

"Decisions over time" chart broken - groups by hour-of-day (0:00-23:00) across all 30 days
Too granular - hourly data not useful for 30-day period
Missing service health dashboard
Missing long-term violations view
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:

<!-- 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:

<!-- 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:

<!-- 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

Fix timeline chart (critical - currently broken)
Add service health 24h (high value)
Add violations 7 days (high value)
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

Update audit-analytics.html with new HTML sections
Add new JavaScript functions
Update renderDashboard() to call new functions
Test with real audit data
Deploy to production

5.3 KiB Raw Blame History