Add code snippets

Author: adangel

Manifest.txt

@@ -47,6 +47,7 @@ resources/css/bootstrap.min.css
 resources/css/datatables.min.css
 resources/css/pmd-tester.css
 resources/js/bootstrap.min.js
+resources/js/code-snippets.js
 resources/js/datatables.min.js
 resources/js/jquery-3.2.1.slim.min.js
 resources/js/jquery.min.js

lib/pmdtester/builders/liquid_renderer.rb

@@ -60,6 +60,7 @@ def write_project_index(project, root)
 
     def dump_violations_json(project)
       h = {
+        'source_link_base' => project.webview_url,
         'source_link_template' => link_template(project),
         **violations_to_hash(project)
       }

resources/css/pmd-tester.css

@@ -5,10 +5,13 @@ body, td, select, input, li{
   font-family: Verdana, Helvetica, Arial, sans-serif;
   font-size: 13pt;
 }
-code{
+code {
   font-family: Courier, monospace;
   font-size: 13pt;
 }
+code.highlight {
+  background-color: yellow;
+}
 a {
   text-decoration: none;
 }

resources/js/code-snippets.js

@@ -0,0 +1,66 @@
+/**
+ * Simple module to fetch code snippets via ajax.
+ * Only supports github hosted code repos.
+ * 
+ * Usage:
+ * var el = document.createElement('p');
+ * var url = 'https://github.com/checkstyle/checkstyle/tree/checkstyle-8.0/src/it/resources/com/google/checkstyle/test/chapter4formatting/rule4822variabledistance/InputVariableDeclarationUsageDistanceCheck.java'
+ * var line = 3;
+ * var weburl = 'https://github.com/checkstyle/checkstyle/tree/checkstyle-8.0/src/it/resources/com/google/checkstyle/test/chapter4formatting/rule4822variabledistance/InputVariableDeclarationUsageDistanceCheck.java#L3'
+ * window.pmd_code_snippets.fetch(el, url, line, weburl);
+ */
+(function() {
+    const contextLines = 3;
+
+    function formatLineNumber(number) {
+        var prefix = "";
+        if (number < 10) {
+            prefix = "&nbsp;&nbsp;&nbsp;";
+        } else if (number < 100) {
+            prefix = "&nbsp;&nbsp;";
+        } else if (number < 1000) {
+            prefix = "&nbsp;";
+        }
+        return prefix + number;
+    }
+
+    function fetchSnippet(el, url, line, weburl) {
+        var weburl, requestUrl, oReq;
+
+        requestUrl = url.replace(/github.com/, "raw.githubusercontent.com");
+        requestUrl = requestUrl.replace(/(tree|blob)\//, "");
+
+        oReq = new XMLHttpRequest();
+        oReq.addEventListener("load", function() {
+            var html, lines, start, deleteCount;
+
+            html = '<p><a href="' + weburl + '" target="_blank" rel="noopener noreferrer">' + weburl + '</a></p>';
+            lines = this.responseText.split(/\r\n|\n/);
+            start = line - contextLines;
+            if (start > 0) {
+                lines.splice(0, start);
+            }
+            deleteCount = lines.length - (2 * contextLines) + 1;
+            lines.splice(2 * contextLines - 1, deleteCount);
+            
+            lines.forEach(element => {
+                start++;
+                if (start == line) {
+                    html += "<code class=\"highlight\">";
+                } else {
+                    html += "<code>";
+                }
+                html += formatLineNumber(start) + "&nbsp;" + element + "</code><br>";
+            });
+            el.innerHTML = html;
+        });
+        oReq.open("GET", requestUrl);
+        oReq.send();
+
+        el.innerHTML = "<tt>fetching...</tt>";
+    }
+
+    window.pmd_code_snippets = {
+        fetch: fetchSnippet
+    }
+})();

resources/js/project-report.js

@@ -20,6 +20,13 @@ $(document).ready(function () {
         return pathArray[pathArray.length - 1];
     }
 
+    function renderCodeSnippet(violation) {
+        var node = document.createElement('p');
+        var url = project.source_link_base + '/' + project.file_index[violation.f];
+        window.pmd_code_snippets.fetch(node, url, violation.l, makeCodeLink(violation));
+        return node;
+    }
+
     const cssClass = {
         "+": "added",
         "-": "removed",
@@ -32,10 +39,10 @@ $(document).ready(function () {
         "~": "Changed",
     }
 
-    $('#violationsTable').DataTable({
+    var table = $('#violationsTable').DataTable({
         data: project.violations,
         columns: [
-            // other attributes:
+            // other attributes in data:
             // l: line
             // ol: old line
             {"data": "f"}, // file
@@ -45,12 +52,12 @@ $(document).ready(function () {
         ],
         deferRender: true,
         // scrollY: "6000px",
-        dom: 'Pfrtip',
+        dom: 'Pfrtip', // Search Panes, filtering input, processing display element, table, table information summary, pagination control
         searchPanes: {
             viewTotal: true,
             cascadePanes: true,
             columns: [0, 1, 3],
-            order: ['Rule', 'Location', 'Type']
+            order: ['Rule', 'Location (click row to expand)', 'Type']
         },
         // scrollCollapse: true,
         // paging: false,
@@ -110,4 +117,20 @@ $(document).ready(function () {
         },
     });
 
+    $('#violationsTable tbody').on('click', 'tr', function() {
+        var tr = $(this).closest('tr');
+        var row = table.row( tr );
+
+        if ( row.child.isShown() ) {
+            // This row is already open - close it
+            row.child.hide();
+            tr.removeClass('shown');
+        }
+        else {
+            // Open this row
+            row.child( renderCodeSnippet(row.data()) ).show();
+            tr.addClass('shown');
+        }
+    });
+
 });

resources/project_diff_report.html

@@ -1,5 +1,7 @@
+<!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="utf-8">
     <title>Diff report for {{project_name}}</title>
 
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
@@ -10,6 +12,7 @@
     <script src="../js/popper.min.js"></script>
     <script src="../js/bootstrap.min.js"></script>
     <script src="../js/datatables.min.js"></script>
+    <script src="../js/code-snippets.js"></script>
     <!-- This is generated -->
     <script src="./project_data.js"></script>
 
@@ -111,7 +114,7 @@ <h2>Violations</h2>
         <table id="violationsTable" width="100%" class="table">
             <thead>
             <tr>
-                <th>Location</th>
+                <th>Location (click row to expand)</th>
                 <th>Rule</th>
                 <th>Message</th>
                 <th>Type</th>

resources/project_index.html

@@ -1,5 +1,7 @@
+<!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="utf-8">
     <title>Project report index</title>
 
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

test/integration_test_runner.rb

@@ -8,8 +8,8 @@ def setup
   end
 
   def test_local_mode
-    argv = '-r target/repositories/pmd -b master -bc config/design.xml' \
-              ' -p pmd_releases/6.7.0 -pc config/design.xml -l test/resources/project-test.xml'
+    argv = '-r target/repositories/pmd -b pmd_releases/6.7.0 -bc config/design.xml' \
+              ' -p master -pc config/design.xml -l test/resources/project-test.xml'
 
     system("bundle exec bin/pmdtester #{argv}")
 
@@ -21,7 +21,9 @@ def test_local_mode
     assert_path_exist('target/reports/pmd_releases_6.7.0/pmd/pmd_report.xml')
     assert_path_exist('target/reports/pmd_releases_6.7.0/pmd/config.xml')
     assert_path_exist('target/reports/diff/checkstyle/index.html')
+    assert_path_exist('target/reports/diff/checkstyle/project_data.js')
     assert_path_exist('target/reports/diff/pmd/index.html')
+    assert_path_exist('target/reports/diff/pmd/project_data.js')
     assert_path_exist('target/reports/diff/index.html')
   end
 

test/resources/html_report_builder/expected_diff_report_index.html

@@ -1,5 +1,7 @@
+<!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="utf-8">
     <title>Diff report for spring-framework</title>
 
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
@@ -10,6 +12,7 @@
     <script src="../js/popper.min.js"></script>
     <script src="../js/bootstrap.min.js"></script>
     <script src="../js/datatables.min.js"></script>
+    <script src="../js/code-snippets.js"></script>
     <!-- This is generated -->
     <script src="./project_data.js"></script>
 
@@ -171,7 +174,7 @@ <h2>Violations</h2>
         <table id="violationsTable" width="100%" class="table">
             <thead>
             <tr>
-                <th>Location</th>
+                <th>Location (click row to expand)</th>
                 <th>Rule</th>
                 <th>Message</th>
                 <th>Type</th>

test/resources/html_report_builder/expected_empty_diff_report.html

@@ -1,5 +1,7 @@
+<!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="utf-8">
     <title>Diff report for openjdk10</title>
 
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
@@ -10,6 +12,7 @@
     <script src="../js/popper.min.js"></script>
     <script src="../js/bootstrap.min.js"></script>
     <script src="../js/datatables.min.js"></script>
+    <script src="../js/code-snippets.js"></script>
     <!-- This is generated -->
     <script src="./project_data.js"></script>
 
@@ -111,7 +114,7 @@ <h2>Violations</h2>
         <table id="violationsTable" width="100%" class="table">
             <thead>
             <tr>
-                <th>Location</th>
+                <th>Location (click row to expand)</th>
                 <th>Rule</th>
                 <th>Message</th>
                 <th>Type</th>