Embed remote resources in html report (#574)

* Embed remote resources in html report Fix #450 * Replace D3+C3 with Charts.Js * Restore static 200px width to charts. * Add Datalabels to charts * Fix tabs on summary page Fix for new bootstrap mechanisms * Fix Source Code Modal for BootStrap 5 * Swap Ace for Prism highlighting * Make modal a bit wider * Unescape HTML sequences to render in pre tag
microsoft · Feb 23, 2024 · 044dc12 · 044dc12
1 parent 6d539ef
commit 044dc12
Show file tree

Hide file tree

Showing 11 changed files with 538 additions and 136 deletions.
diff --git a/AppInspector.CLI/AppInspector.CLI.csproj b/AppInspector.CLI/AppInspector.CLI.csproj
@@ -47,16 +47,28 @@
 
     <ItemGroup>
         <None Update="html\index.html">
-            <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+            <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
         </None>
         <None Update="html\resources\css\appinspector.css">
-            <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+            <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+        </None>
+        <None Update="html\resources\css\bootstrap.min.css">
+          <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+        </None>
+        <None Update="html\resources\css\fa-all.css">
+          <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+        </None>
+        <None Update="html\resources\css\prism.css">
+          <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
         </None>
         <None Update="html\resources\js\appinspector.js">
-            <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+            <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+        </None>
+        <None Update="html\resources\js\deps\deps.js">
+          <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
         </None>
         <None Update="preferences\tagreportgroups.json">
-            <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+            <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
         </None>
     </ItemGroup>
 

diff --git a/AppInspector.CLI/Writers/AnalyzeHtmlWriter.cs b/AppInspector.CLI/Writers/AnalyzeHtmlWriter.cs
@@ -66,21 +66,15 @@ private void WriteHtmlResult()
         var allCSS = "<style>\n" +
                      MergeResourceFiles(Path.Combine(Utils.GetPath(Utils.AppPath.basePath), "html", "resources",
                          "css"));
-        var allJS = "<script type=\"text/javascript\">\n" +
-                    MergeResourceFiles(Path.Combine(Utils.GetPath(Utils.AppPath.basePath), "html", "resources", "js"));
+        var depsJs = "<script type=\"text/javascript\">\n" +
+                    MergeResourceFiles(Path.Combine(Utils.GetPath(Utils.AppPath.basePath), "html", "resources", "js", "deps")) + "</script>";
+        var baseJs = "<script type =\"text/javascript\">\n" + File.ReadAllText(Path.Combine(Utils.GetPath(Utils.AppPath.basePath), "html", "resources", "js", "appinspector.js"));
 
         //Prepare html template merge
         var htmlTemplateText = File.ReadAllText(Path.Combine(Utils.GetPath(Utils.AppPath.basePath), "html/index.html"));
         Template.FileSystem = new EmbeddedFileSystem(Assembly.GetEntryAssembly(),
             "Microsoft.ApplicationInspector.CLI.html.partials");
 
-        //Update template with local aggregated code for easy relocation of output file
-        htmlTemplateText = htmlTemplateText.Replace("<script type=\"text/javascript\">", allJS);
-        htmlTemplateText =
-            htmlTemplateText.Replace(
-                "<link rel=\"stylesheet\" type=\"text/css\" href=\"html/resources/css/appinspector.css\" />",
-                allCSS + "</style>");
-
         RegisterSafeType(typeof(MetaData));
 
         //Prepare data for use in appinspector.js and html partials resources
@@ -121,8 +115,17 @@ private void WriteHtmlResult()
         hashData["filetypes"] = _appMetaData?.FileExtensions ?? new List<string>();
         hashData["tagcounters"] = ConvertTagCounters(_appMetaData?.TagCounters ?? new List<MetricTagCounter>());
 
-        //final render and close
+        // Liquid  render and close
         var htmlResult = htmlTemplate.Render(hashData);
+
+        // Update template with local aggregated code
+        // Liquid will break the embedded JS if this replacement is performed before render
+        htmlResult = htmlResult.Replace("<DEPSJS/>", depsJs);
+        htmlResult = htmlResult.Replace("<REPLACEJS/>", baseJs);
+        htmlResult =
+            htmlResult.Replace(
+                "<REPLACECSS/>",
+                allCSS + "</style>");
         TextWriter?.Write(htmlResult);
         FlushAndClose();
     }

diff --git a/AppInspector.CLI/html/index.html b/AppInspector.CLI/html/index.html
@@ -1,12 +1,9 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <meta charset="utf-8"/>
-    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.css" rel="stylesheet"/>
-    <link href="html/resources/css/appinspector.css" rel="stylesheet" type="text/css"/>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport" />
+    <REPLACECSS/>
 
     <title>{{ application_version }}</title>
 </head>
@@ -53,27 +50,8 @@
 
 {% include "file_listing" %}
 
-<script crossorigin="anonymous"
-        integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
-        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-<script crossorigin="anonymous"
-        integrity="sha512-GZ1RIgZaSc8rnco/8CXfRdCpDxRCphenIiZ2ztLy3XQfCbQUSCuk8IudvNHxkRA3oUg6q0qejgN/qqyG1duv5Q=="
-        src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
-<script crossorigin="anonymous"
-        integrity="sha512-M5KW3ztuIICmVIhjSqXe01oV2bpe248gOxqmlcYrEzAvws7Pw3z6BK0iGbrwvdrUQUhi3eXgtxp5I8PDo9YfjQ=="
-        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
-<script crossorigin="anonymous"
-        integrity="sha512-+IpCthlNahOuERYUSnKFjzjdKXIbJ/7Dd6xvUp+7bEw0Jp2dg6tluyxLs+zq9BMzZgrLv8886T4cBSqnKiVgUw=="
-        src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
-<script crossorigin="anonymous"
-        integrity="sha512-FHsFVKQ/T1KWJDGSbrUhTJyS1ph3eRrxI228ND0EGaEp6v4a/vGwPWd3Dtd/+9cI7ccofZvl/wulICEurHN1pg=="
-        src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.3/umd/popper.min.js" integrity="sha512-53CQcu9ciJDlqhK7UD8dZZ+TF2PFGZrOngEYM/8qucuQba+a+BXOIRsp9PoMNJI3ZeLMVNIxIfZLbG/CdHI5PA==" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ext-beautify.js" integrity="sha512-cbnV6WqDWdPXhI/SfbylU8ZOgxe6X7u1cAChSzCEgcixCoBlg0M7pZQgUmFFaStd1Y+pimB65mL9gUE0R2Xpug==" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ext-modelist.js" integrity="sha512-Cp7JolVvryVA9mLSbTnQbpmfpCZg4VQ8BgKDgRcyNu3yWMitVcxzFj8/fcjxDrNvMjAPCU9Noygzc6eK9rP4Mg==" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ext-settings_menu.js" integrity="sha512-soczE7f5nUAF4LBvJ+N+h7mDqFWJT0zyhH+F1CiQns+r1EVS5Ze0qPgRm+2rJpuXggx07DMDCGdoaASwEAScrw==" crossorigin="anonymous"></script>
-
-<script type="text/javascript">
+<DEPSJS/>
+<REPLACEJS/>
     let data = {{ json }};
 </script>
 </body>

diff --git a/AppInspector.CLI/html/partials/_file_listing.liquid b/AppInspector.CLI/html/partials/_file_listing.liquid
@@ -1,6 +1,6 @@
 
 <div id="file_listing_modal" class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document" style="width: 700px;overflow-x:auto;">
+    <div class="modal-dialog" role="document" style="width: 800px;overflow-x:auto;">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Source File Listing</h5>
@@ -16,6 +16,8 @@
                 <div style="height: 360px; overflow-y:auto;">
                     <div id="editor-container" style="margin-top: 5px;">
                         <div id="editor" style="height: 350px; max-height: 350px;">
+                            <pre id="snippet-container">
+                            </pre>
                         </div>
                     </div>
                 </div>

diff --git a/AppInspector.CLI/html/partials/_report_summary.liquid b/AppInspector.CLI/html/partials/_report_summary.liquid
@@ -6,35 +6,35 @@
   <div class="container">
       <div class="row">
           <div class="col-2">
-              <ul class="nav flex-column">
-				        <li class="nav-item">
-					        <a class="nav-link active" href="#project_info" role="tab" data-toggle="tab">Project Info</a>
+              <ul class="nav nav-tabs flex-column">
+				        <li class="nav-item" role="presentation">
+					        <a class="nav-link active" id="project_tab" data-bs-toggle="tab" data-bs-target="#project_info" href="#project_info" role="tab" aria-controls="project_info" aria-selected="true">Project Info</a>
 				        </li>
-				        <li class="nav-item">
-					        <a class="nav-link" href="#scan_metadata" role="tab" data-toggle="tab">Metadata</a>
+				        <li class="nav-item" role="presentation">
+					        <a class="nav-link" id="scan_metadata_tab" data-bs-toggle="tab" data-bs-target="#scan_metadata" href="#scan_metadata" role="tab" aria-controls="metadata_tab">Metadata</a>
 				        </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="#sorted_uniquetags" role="tab" data-toggle="tab">All Tags</a>
+                <li class="nav-item" role="presentation">
+                  <a class="nav-link" id="sorted_uniquetags_tab" data-bs-toggle="tab" data-bs-target="#sorted_uniquetags" href="#sorted_uniquetags" role="tab" aria-controls="sorted_uniquetags">All Tags</a>
                 </li>
-                  <li class="nav-item">
-                    <a class="nav-link" href="#select_tagcounters" role="tab" data-toggle="tab">Tag Counters</a>
+                  <li class="nav-item" role="presentation">
+                    <a class="nav-link" id="sorted_uniquetags_tab" data-bs-toggle="tab" data-bs-target="#select_tagcounters" href="#select_tagcounters" role="tab" aria-controls="select_tagcounters">Tag Counters</a>
                </li>
 			        </ul>
           </div>
           <div class="col">
             <div class="tab-content">
-              <div role="tabpanel" class="tab-pane active show" id="project_info">
+              <div role="tabpanel" class="tab-pane active show" id="project_info" aria-labelledby="project_tab">
                 <h4>Project Info</h4>
                 <div class="container">
                   <div class="row">
                     <div class="col">
-                      <div id="s_pi_analysis_chart"></div>
+                      <canvas style="width:200px" id="s_pi_analysis_chart"/>
                     </div>
                     <div class="col">
-                      <div id="s_pi_patterns_chart"></div>
+                      <canvas style="width:200px" id="s_pi_patterns_chart"/>
                     </div>
                     <div class="col">
-                      <div id="s_pi_languages_chart"></div>
+                      <canvas style="width:200px" id="s_pi_languages_chart"/>
                     </div>
                   </div>
                 </div>
@@ -66,7 +66,7 @@
                   </tr>
                 </table>
               </div>
-              <div role="tabpanel" class="tab-pane" id="scan_metadata">
+              <div role="tabpanel" class="tab-pane" id="scan_metadata" aria-labelledby="scan_metadata_tab">
                 <h4>Metadata</h4>
                 <div>
                   Application targets or packaging detected.
@@ -104,7 +104,7 @@
                   </tr>
                 </table>
               </div>
-              <div role="tabpanel" class="tab-pane" id="sorted_uniquetags">
+              <div role="tabpanel" class="tab-pane" id="sorted_uniquetags" aria-labelledby="sorted_uniquetags_tab">
                 <h4>Tags List View</h4>
                 <div>
                   A list view of the unique tags found and matching rule. Select a tag on the left then select
@@ -243,7 +243,7 @@
                   </div>
                 </div>
               </div>
-              <div role="tabpanel" class="tab-pane" id="select_tagcounters">
+              <div role="tabpanel" class="tab-pane" id="select_tagcounters" aria-labelledby="select_tagcounters_tab">
                 <h4>Tag Counters</h4>
                 <div>
                   Tags found that are identified as Metric related matches and therefore counted but not included in detailed results.

diff --git a/AppInspector.CLI/html/resources/css/bootstrap.min.css b/AppInspector.CLI/html/resources/css/bootstrap.min.css
diff --git a/AppInspector.CLI/html/resources/css/fa-all.css b/AppInspector.CLI/html/resources/css/fa-all.css
diff --git a/AppInspector.CLI/html/resources/css/prism.css b/AppInspector.CLI/html/resources/css/prism.css