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

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions