Skip to content

08_DASHBOARDS.md

Latest commit

 

History

History
104 lines (83 loc) · 3.55 KB

08_DASHBOARDS.md

File metadata and controls

104 lines (83 loc) · 3.55 KB

08 - Web GUIs and Dashboards (Browser-First Delivery)

Home: README

Who this is for

  • Learners ready to deliver operational insights to non-technical users.
  • Teams that need browser-only access to reporting and health data.

What you will build

  • A browser-consumable dashboard backed by database cache tables.
  • Filters, exports, and freshness indicators usable by operations teams.

Prerequisites

Step-by-step lab pack

Step 1 - Define dashboard user stories

Examples:

  • "Show top critical alerts by site in last 24 hours."
  • "Show database instance health for all monitored environments."
  • "Export filtered results to CSV."

Step 2 - Build Streamlit baseline (beginner-first)

  • Use Streamlit get started.
  • Create one page with:
    • date range filter,
    • severity filter,
    • site/customer filter,
    • table and chart outputs,
    • export button.

Step 3 - Add cache and data freshness

  • Query database cache first, not live APIs per request.
  • Display last_refresh_utc on every page.
  • Warn user when data is stale.

Step 4 - Add advanced option (Dash)

  • Implement same features in Dash for more app-like structure.
  • Use Dash tutorial.

Step 5 - Add optional service layer (FastAPI)

Use when you need:

  • auth integration,
  • controlled API surface,
  • multiple frontends.

Reference: FastAPI tutorial.

Step 6 - Deployment path options

  1. Local-only developer run.
  2. Internal server deployment for team use.
  3. Future option: host on cloud infrastructure if architecture and security review approves.

Expected output

  • A dashboard accessible in browser with reliable and understandable data.
  • A simple deployment and support model documented for your environment.

Break/fix drills

  1. Disable one cache source and validate graceful degradation.
  2. Simulate stale data and verify warning banners.
  3. Test extremely large result sets and confirm pagination/limits.

Troubleshooting

  • slow page loads:
    • pre-aggregate summary tables,
    • use query limits,
    • add caching.
  • confusing UX:
    • remove non-essential charts,
    • prioritize filters and key metrics.
  • source outages:
    • serve last known snapshot with explicit timestamp.

Mastery check

You are done when a non-technical user can:

  • open dashboard in browser,
  • filter by date/site/severity,
  • export needed views,
  • trust freshness indicators.

Learning-style options (Play/Build/Dissect/Teach-back)

  • Play: redesign one dashboard view and test usability.
  • Build: implement full baseline with Streamlit first.
  • Dissect: review SQL query flow from UI event to data return.
  • Teach-back: demo dashboard operation to ops stakeholders.

Primary Sources

Optional Resources

Navigation support

Next

Next: projects/level-8/README.md →