Skip to content

feat: Embed Interactive Assessment Roadmap UI into index.html Report Output #25

@oZakari

Description

@oZakari

Problem

Current assessment output generates a static index.html report. While useful for documentation, it doesn't facilitate the collaborative business value discussions needed during modernization planning at scale.

Proposal

Embed an interactive assessment visualization directly into the generated index.html file, enabling stakeholders to:

  • View applications grouped by effort and cloud readiness
  • Track and modify modernization drivers and properties
  • Collaborate on prioritization without external tools
  • Export updated assessments for governance

Solution

Generate a self-contained index.html that includes:

  1. Embedded Vue.js UI - Interactive application dashboard (no server required)
  2. In-memory SQLite (via sql.js) - Parse aggregate-report.json into queryable data
  3. Local persistence - Save user decisions (drivers, inclusion flags, target platforms) to localStorage
  4. Zero dependencies - Opens in any browser, works offline

Reference

The nielsams/modernization-assessment project demonstrates this pattern effectively. It parses AppCAT HTML reports and provides the missing UX layer that teams need for real modernization planning conversations. Today, integrating it requires running a separate Docker container and copying generated HTML reports into its data/assessments folder — adding operational overhead that could be eliminated by baking the functionality directly into the existing index.html output.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions