Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Making the JADA Maintenance Dashboard Task Card Clickable: UI/UX Enhancement with S3 and CloudFront Cache Invalidation

Overview

During this session, we enhanced the JADA Maintenance Hub dashboard by making the "Total Tasks" summary card clickable, allowing users to jump directly to the Tasks view with a single interaction. This involved modifying HTML/CSS in an S3-hosted static site, invalidating CloudFront distribution caches, and establishing a pattern for future dashboard interactivity improvements.

What Was Done

The core task was straightforward: convert a read-only information card displaying task count into an interactive navigation element. The implementation required:

  • Downloading the maintenance hub index.html from the S3 bucket
  • Identifying the existing tab-switching JavaScript logic
  • Locating the "Total Tasks" card in the DOM and its relationship to the Systems tab
  • Adding CSS styling for hover states and cursor feedback
  • Wiring the card's click handler to trigger tab navigation
  • Re-uploading the modified file to S3
  • Invalidating the CloudFront distribution cache to ensure users received the updated version

Technical Details

File Locations and Structure

The JADA Maintenance Hub lives in an S3 bucket (exact path withheld for security). The primary entry point is index.html, which contains embedded HTML, CSS, and JavaScript—a single-page application (SPA) pattern common in static site hosting scenarios where dynamic backends aren't needed for the UI layer.

The dashboard is served through a CloudFront distribution, providing edge-cached content to reduce latency and offload origin traffic. This architecture decision means any updates to index.html require cache invalidation to propagate changes to end users.

Tab Navigation Architecture

The maintenance hub uses a tab-based interface with a JavaScript switch statement to control visibility. The relevant function is switchTab(tabName), which handles DOM manipulation to show/hide content sections. The tabs are identified by data-tab attributes in the HTML:

<div class="tab-content" data-tab="systems">
  <!-- Task table and system details render here -->
</div>

The Tasks table is rendered within the "Systems" tab, so making the Total Tasks card clickable meant calling switchTab('systems') when the card is clicked.

DOM Identification Process

The search process involved multiple grep operations across the codebase to locate the specific card:

  • Searched for "Total Tasks" text across maintenance directories
  • Narrowed focus to JADA dashboard HTML files
  • Used case-insensitive searches for dashboard stat cards
  • Downloaded the S3-hosted index.html and searched for the card's HTML structure

Once located, the card was wrapped in a styled container with click handlers.

CSS Enhancement for Interactivity

A new CSS class, info-card-link, was added to provide visual feedback:

.info-card-link {
  cursor: pointer;
  transition: all 0.3s ease;
}

.info-card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

This design choice signals to users that the card is interactive (cursor changes to pointer), provides smooth animation feedback on hover (transform + shadow enhancement), and maintains the card's visual hierarchy without introducing jarring changes.

JavaScript Binding

The click handler was bound directly to the card element using an inline onclick attribute:

<div class="info-card info-card-link" onclick="switchTab('systems')">
  <!-- Card content -->
</div>

While modern best practice might suggest event listener attachment in JavaScript, the inline approach was pragmatic given the SPA's existing structure and the single-responsibility nature of this interaction.

Infrastructure and Deployment

S3 Bucket Management

The maintenance hub is hosted as a static website in S3. The deployment workflow involved:

  • Downloading the current index.html from the S3 bucket
  • Modifying the file locally
  • Re-uploading to the same S3 key path, preserving existing metadata and permissions

S3 bucket versioning is assumed to be enabled, providing rollback capability if needed.

CloudFront Cache Invalidation

After uploading, a CloudFront cache invalidation was required. The process involved:

  • Identifying the CloudFront distribution associated with the maintenance subdomain via the AWS Console or CLI
  • Creating an invalidation for the /index.html path (or /* for full distribution invalidation if needed)
  • Waiting for the invalidation to complete (typically 1–2 minutes for edge location propagation)

The cache invalidation ensures that CloudFront edge nodes discard their cached copy and fetch the updated file from S3 on the next user request.

Why this matters: Without invalidation, users would continue receiving the old cached version for up to the TTL (time-to-live) setting, potentially hours. Invalidation forces immediate propagation.

Key Decisions and Rationale

Single-Page Application vs. Server-Rendered

The maintenance hub is implemented as a static SPA hosted on S3/CloudFront rather than a server-rendered application. This decision trades off some dynamic capabilities for significant operational simplicity: no servers to manage, no database connections, and edge-cached performance. The trade-off is acceptable for a dashboard that updates asynchronously via JavaScript and doesn't require server-side session management.

Inline Click Handler

Using onclick="switchTab('systems')" rather than event delegation or module-based attachment was chosen for simplicity and minimal code duplication. The existing codebase already uses this pattern, so maintaining consistency was prioritized over architectural purity.

CSS Transitions and Transforms

The hover effect uses transform: translateY(-2px) rather than margin or padding changes to maintain layout stability and leverage GPU acceleration. This ensures the animation is performant even on lower-end devices.

Testing and Validation

The implementation was validated by:

  • Verifying the modified index.html could be downloaded from S3 post-upload
  • Confirming CloudFront invalidation completed successfully
  • Testing the click handler in a browser to ensure it called switchTab('systems') and rendered the Tasks tab correctly
  • Checking hover states rendered as expected

What's Next

This enhancement establishes a pattern for making other dashboard cards interactive. Future improvements could include:

  • Making other summary cards (Systems, Alerts, etc.) navigate to their respective tabs
  • Implementing breadcrumb navigation or a back button for users to return from detailed views
  • Adding analytics tracking to measure which cards users click most