Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Making the JADA Maintenance Dashboard Task Card Interactive: A CloudFront + S3 UI Update

The JADA maintenance hub had a visual hierarchy problem: the "Total Tasks" card displayed aggregate task counts but wasn't clickable, forcing users to manually navigate to the Tasks tab. This session focused on making that card a functional entry point to the task management view, with a straightforward implementation pattern that leverages our existing S3 + CloudFront infrastructure.

What Was Done

We transformed a static information card into an interactive dashboard element by:

  • Adding click event handlers to the Total Tasks card in the maintenance hub UI
  • Wiring the card to trigger the existing switchTab('systems') function
  • Implementing visual feedback (cursor changes, hover states) via new CSS class
  • Deploying changes through S3 and invalidating CloudFront cache for immediate propagation

Technical Details: The Maintenance Hub Architecture

The JADA maintenance dashboard lives in an S3 bucket (specific bucket name omitted for security) with CloudFront distribution serving the maintenance.jada.queenofsandiego.com subdomain. The index.html file contains embedded JavaScript that manages tab navigation via a switchTab() function.

Tab Structure: The dashboard organizes content into named tabs using data-tab attributes. The task table resides in the "systems" tab—this is the target view when users click the Total Tasks card.

// Existing tab switch logic (simplified)
function switchTab(tabName) {
  // Hide all tabs
  document.querySelectorAll('[data-tab]').forEach(tab => {
    tab.style.display = 'none';
  });
  // Show selected tab
  document.querySelector(`[data-tab="${tabName}"]`).style.display = 'block';
}

Card Modification: The Total Tasks card originally rendered as a static info-card div. We wrapped it with clickable behavior by:

  • Adding onclick="switchTab('systems')" to the card element
  • Adding a new CSS class info-card-link to signal interactivity
  • Styling with pointer cursor and hover background changes
// HTML structure (before)
<div class="info-card">
  <h3>Total Tasks</h3>
  <p class="card-value">82</p>
</div>

// HTML structure (after)
<div class="info-card info-card-link" onclick="switchTab('systems')">
  <h3>Total Tasks</h3>
  <p class="card-value">82</p>
</div>

CSS Addition:

.info-card-link {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.info-card-link:hover {
  background-color: rgba(0, 123, 255, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

The hover state provides immediate visual feedback that the card is interactive—critical UX signaling without requiring tooltip overlays or additional DOM elements.

Infrastructure: S3 and CloudFront Deployment

Source File Location: s3://[maintenance-bucket]/index.html (downloaded locally for editing)

Deployment Process:

  1. Downloaded the current index.html from S3 to verify the exact DOM structure
  2. Located the Total Tasks card rendering logic and identified its CSS class hooks
  3. Edited the local copy to add onclick handler and CSS class
  4. Re-uploaded the modified file to the same S3 location
  5. Invalidated the CloudFront distribution cache for the maintenance subdomain

CloudFront Invalidation: A critical step often overlooked. S3 serves as origin, but CloudFront caches the index.html aggressively. Without cache invalidation, users would see stale markup. We triggered an invalidation for the path pattern /index.html (or /* for full distribution refresh) on the maintenance subdomain's distribution ID.

// Conceptual invalidation command structure (credentials omitted)
aws cloudfront create-invalidation \
  --distribution-id [DISTRIBUTION_ID] \
  --paths "/index.html"

Invalidation is near-instantaneous but doesn't guarantee immediate edge server propagation across all CloudFront POPs. Typically 10–30 seconds for global consistency.

Why This Approach

Minimal DOM Footprint: Adding a single onclick handler and CSS class avoids the overhead of event delegation or jQuery-style click handlers. The existing switchTab() function already handles all tab logic, so we leverage it directly.

Accessibility & Progressive Enhancement: While not fully ARIA-compliant (a div with onclick isn't semantically a button), the pattern works for this internal dashboard. A more robust version would wrap the card in a <button> element, but that requires more DOM restructuring and potential CSS adjustments to preserve the card layout.

No JavaScript Bundle Changes: This edit modifies only HTML and CSS within the single index.html file. No build step, no module reloading, no risk of breaking other dashboard functionality. Simple, traceable, easy to rollback.

S3 + CloudFront Rationale: The maintenance hub sits behind CloudFront for geographic distribution and DDoS protection. S3 is the authoritative source, but caching is essential for performance. The trade-off is that every content change requires invalidation—a small tax for the benefits of edge caching.

Testing & Validation

Post-deployment verification steps:

  • Hard-refresh the maintenance dashboard in browser (Cmd+Shift+R or Ctrl+Shift+R) to bypass local browser cache
  • Verify the Total Tasks card has pointer cursor on hover
  • Click the card and confirm the view switches to the Systems tab (which contains the task table)
  • Check browser DevTools Network tab to ensure CloudFront returns fresh HTML (Cache-Control headers, X-Cache: Hit from cloudfront)

What's Next

Semantic HTML Upgrade: Convert the info-card to a proper <button> or <a role="button"> element for accessibility compliance. This is non-breaking but requires CSS adjustments to maintain card appearance.

Task Count Real-Time Updates: The "82" is currently static. Integrating with the Lambda function that updates active tasks (referenced in the progress dashboard) would allow the card count to refresh without page reload—a natural extension of this pattern using fetch + DOM update.

Analytics Instrumentation: Add a simple analytics event when the card is clicked, to track which users navigate to tasks via this shortcut vs. manual tab selection.

The change is live on maintenance.jada