Skip to content

Commit 044dc12

Browse files
gfsgfs
authored
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
1 parent 6d539ef commit 044dc12

File tree

11 files changed

+538
-136
lines changed

11 files changed

+538
-136
lines changed

‎AppInspector.CLI/AppInspector.CLI.csproj

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,28 @@
4747

4848
<ItemGroup>
4949
<None Update="html\index.html">
50-
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
50+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
5151
</None>
5252
<None Update="html\resources\css\appinspector.css">
53-
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
53+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
54+
</None>
55+
<None Update="html\resources\css\bootstrap.min.css">
56+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
57+
</None>
58+
<None Update="html\resources\css\fa-all.css">
59+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
60+
</None>
61+
<None Update="html\resources\css\prism.css">
62+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
5463
</None>
5564
<None Update="html\resources\js\appinspector.js">
56-
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
65+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
66+
</None>
67+
<None Update="html\resources\js\deps\deps.js">
68+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
5769
</None>
5870
<None Update="preferences\tagreportgroups.json">
59-
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
71+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
6072
</None>
6173
</ItemGroup>
6274

‎AppInspector.CLI/Writers/AnalyzeHtmlWriter.cs

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -66,21 +66,15 @@ private void WriteHtmlResult()
6666
var allCSS = "<style>\n" +
6767
MergeResourceFiles(Path.Combine(Utils.GetPath(Utils.AppPath.basePath), "html", "resources",
6868
"css"));
69-
var allJS = "<script type=\"text/javascript\">\n" +
70-
MergeResourceFiles(Path.Combine(Utils.GetPath(Utils.AppPath.basePath), "html", "resources", "js"));
69+
var depsJs = "<script type=\"text/javascript\">\n" +
70+
MergeResourceFiles(Path.Combine(Utils.GetPath(Utils.AppPath.basePath), "html", "resources", "js", "deps")) + "</script>";
71+
var baseJs = "<script type =\"text/javascript\">\n" + File.ReadAllText(Path.Combine(Utils.GetPath(Utils.AppPath.basePath), "html", "resources", "js", "appinspector.js"));
7172

7273
//Prepare html template merge
7374
var htmlTemplateText = File.ReadAllText(Path.Combine(Utils.GetPath(Utils.AppPath.basePath), "html/index.html"));
7475
Template.FileSystem = new EmbeddedFileSystem(Assembly.GetEntryAssembly(),
7576
"Microsoft.ApplicationInspector.CLI.html.partials");
7677

77-
//Update template with local aggregated code for easy relocation of output file
78-
htmlTemplateText = htmlTemplateText.Replace("<script type=\"text/javascript\">", allJS);
79-
htmlTemplateText =
80-
htmlTemplateText.Replace(
81-
"<link rel=\"stylesheet\" type=\"text/css\" href=\"html/resources/css/appinspector.css\" />",
82-
allCSS + "</style>");
83-
8478
RegisterSafeType(typeof(MetaData));
8579

8680
//Prepare data for use in appinspector.js and html partials resources
@@ -121,8 +115,17 @@ private void WriteHtmlResult()
121115
hashData["filetypes"] = _appMetaData?.FileExtensions ?? new List<string>();
122116
hashData["tagcounters"] = ConvertTagCounters(_appMetaData?.TagCounters ?? new List<MetricTagCounter>());
123117

124-
//final render and close
118+
// Liquid render and close
125119
var htmlResult = htmlTemplate.Render(hashData);
120+
121+
// Update template with local aggregated code
122+
// Liquid will break the embedded JS if this replacement is performed before render
123+
htmlResult = htmlResult.Replace("<DEPSJS/>", depsJs);
124+
htmlResult = htmlResult.Replace("<REPLACEJS/>", baseJs);
125+
htmlResult =
126+
htmlResult.Replace(
127+
"<REPLACECSS/>",
128+
allCSS + "</style>");
126129
TextWriter?.Write(htmlResult);
127130
FlushAndClose();
128131
}

‎AppInspector.CLI/html/index.html

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8"/>
5-
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
6-
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
7-
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
8-
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.css" rel="stylesheet"/>
9-
<link href="html/resources/css/appinspector.css" rel="stylesheet" type="text/css"/>
4+
<meta charset="utf-8" />
5+
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport" />
6+
<REPLACECSS/>
107

118
<title>{{ application_version }}</title>
129
</head>
@@ -53,27 +50,8 @@
5350

5451
{% include "file_listing" %}
5552

56-
<script crossorigin="anonymous"
57-
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
58-
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
59-
<script crossorigin="anonymous"
60-
integrity="sha512-GZ1RIgZaSc8rnco/8CXfRdCpDxRCphenIiZ2ztLy3XQfCbQUSCuk8IudvNHxkRA3oUg6q0qejgN/qqyG1duv5Q=="
61-
src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
62-
<script crossorigin="anonymous"
63-
integrity="sha512-M5KW3ztuIICmVIhjSqXe01oV2bpe248gOxqmlcYrEzAvws7Pw3z6BK0iGbrwvdrUQUhi3eXgtxp5I8PDo9YfjQ=="
64-
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
65-
<script crossorigin="anonymous"
66-
integrity="sha512-+IpCthlNahOuERYUSnKFjzjdKXIbJ/7Dd6xvUp+7bEw0Jp2dg6tluyxLs+zq9BMzZgrLv8886T4cBSqnKiVgUw=="
67-
src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
68-
<script crossorigin="anonymous"
69-
integrity="sha512-FHsFVKQ/T1KWJDGSbrUhTJyS1ph3eRrxI228ND0EGaEp6v4a/vGwPWd3Dtd/+9cI7ccofZvl/wulICEurHN1pg=="
70-
src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
71-
<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>
72-
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ext-beautify.js" integrity="sha512-cbnV6WqDWdPXhI/SfbylU8ZOgxe6X7u1cAChSzCEgcixCoBlg0M7pZQgUmFFaStd1Y+pimB65mL9gUE0R2Xpug==" crossorigin="anonymous"></script>
73-
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ext-modelist.js" integrity="sha512-Cp7JolVvryVA9mLSbTnQbpmfpCZg4VQ8BgKDgRcyNu3yWMitVcxzFj8/fcjxDrNvMjAPCU9Noygzc6eK9rP4Mg==" crossorigin="anonymous"></script>
74-
<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>
75-
76-
<script type="text/javascript">
53+
<DEPSJS/>
54+
<REPLACEJS/>
7755
let data = {{ json }};
7856
</script>
7957
</body>

‎AppInspector.CLI/html/partials/_file_listing.liquid

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
<div id="file_listing_modal" class="modal" tabindex="-1" role="dialog">
3-
<div class="modal-dialog" role="document" style="width: 700px;overflow-x:auto;">
3+
<div class="modal-dialog" role="document" style="width: 800px;overflow-x:auto;">
44
<div class="modal-content">
55
<div class="modal-header">
66
<h5 class="modal-title">Source File Listing</h5>
@@ -16,6 +16,8 @@
1616
<div style="height: 360px; overflow-y:auto;">
1717
<div id="editor-container" style="margin-top: 5px;">
1818
<div id="editor" style="height: 350px; max-height: 350px;">
19+
<pre id="snippet-container">
20+
</pre>
1921
</div>
2022
</div>
2123
</div>

‎AppInspector.CLI/html/partials/_report_summary.liquid

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,35 @@
66
<div class="container">
77
<div class="row">
88
<div class="col-2">
9-
<ul class="nav flex-column">
10-
<li class="nav-item">
11-
<a class="nav-link active" href="#project_info" role="tab" data-toggle="tab">Project Info</a>
9+
<ul class="nav nav-tabs flex-column">
10+
<li class="nav-item" role="presentation">
11+
<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>
1212
</li>
13-
<li class="nav-item">
14-
<a class="nav-link" href="#scan_metadata" role="tab" data-toggle="tab">Metadata</a>
13+
<li class="nav-item" role="presentation">
14+
<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>
1515
</li>
16-
<li class="nav-item">
17-
<a class="nav-link" href="#sorted_uniquetags" role="tab" data-toggle="tab">All Tags</a>
16+
<li class="nav-item" role="presentation">
17+
<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>
1818
</li>
19-
<li class="nav-item">
20-
<a class="nav-link" href="#select_tagcounters" role="tab" data-toggle="tab">Tag Counters</a>
19+
<li class="nav-item" role="presentation">
20+
<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>
2121
</li>
2222
</ul>
2323
</div>
2424
<div class="col">
2525
<div class="tab-content">
26-
<div role="tabpanel" class="tab-pane active show" id="project_info">
26+
<div role="tabpanel" class="tab-pane active show" id="project_info" aria-labelledby="project_tab">
2727
<h4>Project Info</h4>
2828
<div class="container">
2929
<div class="row">
3030
<div class="col">
31-
<div id="s_pi_analysis_chart"></div>
31+
<canvas style="width:200px" id="s_pi_analysis_chart"/>
3232
</div>
3333
<div class="col">
34-
<div id="s_pi_patterns_chart"></div>
34+
<canvas style="width:200px" id="s_pi_patterns_chart"/>
3535
</div>
3636
<div class="col">
37-
<div id="s_pi_languages_chart"></div>
37+
<canvas style="width:200px" id="s_pi_languages_chart"/>
3838
</div>
3939
</div>
4040
</div>
@@ -66,7 +66,7 @@
6666
</tr>
6767
</table>
6868
</div>
69-
<div role="tabpanel" class="tab-pane" id="scan_metadata">
69+
<div role="tabpanel" class="tab-pane" id="scan_metadata" aria-labelledby="scan_metadata_tab">
7070
<h4>Metadata</h4>
7171
<div>
7272
Application targets or packaging detected.
@@ -104,7 +104,7 @@
104104
</tr>
105105
</table>
106106
</div>
107-
<div role="tabpanel" class="tab-pane" id="sorted_uniquetags">
107+
<div role="tabpanel" class="tab-pane" id="sorted_uniquetags" aria-labelledby="sorted_uniquetags_tab">
108108
<h4>Tags List View</h4>
109109
<div>
110110
A list view of the unique tags found and matching rule. Select a tag on the left then select
@@ -243,7 +243,7 @@
243243
</div>
244244
</div>
245245
</div>
246-
<div role="tabpanel" class="tab-pane" id="select_tagcounters">
246+
<div role="tabpanel" class="tab-pane" id="select_tagcounters" aria-labelledby="select_tagcounters_tab">
247247
<h4>Tag Counters</h4>
248248
<div>
249249
Tags found that are identified as Metric related matches and therefore counted but not included in detailed results.

‎AppInspector.CLI/html/resources/css/bootstrap.min.css

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎AppInspector.CLI/html/resources/css/fa-all.css

Lines changed: 38 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎AppInspector.CLI/html/resources/css/prism.css

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)