Generate HTML Output for Prebuilt Reports

[ellahathaway]

This was the project that I worked on during Hackathon week 2024. I was unable to finish this project by the end of the week, so I've written up this issue in case someone would like to pick it up in the future. I've also included a tarball of the source-code thus far and a tarball of example html output that I rendered with the prebuilt report from this issue (html report contains internal Microsoft links)

Motivation

Currently, the prebuilt usage reports are .xml files generated by the prebuilt detection in the Arcade infrastructure. These .xml files include a list of sources (src/arcade, src/sdk, src, etc), and a list of prebuilt packages. The list of prebuilt packages typically include the following info for each package: the name of the package, the version of the package, a file path to the project.assets.json file, and information on if the package is a direct dependency or a transitive dependency.

While this .xml file contains a lot of information, it requires that the reader has knowledge on how navigate the source repo, read a project.assets.json file, and understand transitive vs direct dependencies. Furthermore, when a prebuilt is detected in a build, a user must understand how to obtain the prebuilt-usage report and the associated project.assets.json file from the build. The user may also have to track down the project file in the source code, which can be a time consuming process if the user is not familiar with the repo.

Goal

Given the difficulties involved with our current prebuilt usage report, I wanted to create a user-friendly rendering of the report so that all of the information needed to diagnose a prebuilt exists in a single place; users would not have to download multiple files or search the codebase in repos to diagnose prebuilts.

Accomplishments so far

• HTML templates
  • The functionality is done
  • See work to do
• css
  • Done with the exception of a few minor tweaks (see work to do)
• Dynamic rendering of html file
• Data model for parsing xml file
  • Functionality is done
  • See work to do
• Integration into arcade infra
  • Builds within the source build tasks project

Work to do

• HTML templates
  • Cleanup of template and variable names
  • Consider moving away from the nesting of the components
• css
  • When some of the tabs are opened, they expand beyond the size of the table
  • Buttons should change style when clicked
• Data model for parsing xml file
  • Model class
    • Consider removing class + moving const strings to FileInfo class
    • Remove commitsha variable from Model class and make optional input param to FileInfo constructor
  • Create an enum for DependencyType or move away from using the strings "Direct" and "Transitive"
    • Flow this change into the HTML templates as well
  • FileInfo
    • Constructor logic should be cleaned up
    • Parsing the url for azdo should also be cleaned up.
• Integration into arcade
  • While the project builds, it is not currently compatible with doing ./build.sh -sb in another repo. That is, building arcade, and configuring arcade-validation to use the artifacts, then doing ./build.sh -sb in arcade validation does not work and results in errors.
  • Write msbuild task for project.
  • Add msbuild task into AfterSourceBuild. This will cause the task to run when prebuilts are detected.

arcade-hackathon.zip output-html.zip

[ellahathaway]

Another option for this is instead of HTML to render markdown. Markdown could be good for opening issues.