From f7ff04d5cfc75459f9fb8e8d0e15c66fb2ca4a13 Mon Sep 17 00:00:00 2001 From: "Portugal, Marcelo" Date: Sat, 19 Nov 2016 22:02:53 -0500 Subject: [PATCH] feat(Result Details): Adding tabs to result details. Added the ability to view result details as either source code or a list of rules. Including tables with the top most rules. --- example/example-report.html | 609 ++++++++++++++++--- example/success-report.html | 99 ++- lib/detailed.js | 54 +- lib/helpers/scripts.html | 25 +- lib/helpers/styles.html | 46 +- lib/templates/details/code/code-wrapper.html | 26 +- lib/templates/details/code/issue.html | 2 +- lib/templates/details/details.html | 31 + lib/templates/details/summary.html | 15 + 9 files changed, 767 insertions(+), 140 deletions(-) create mode 100644 lib/templates/details/details.html create mode 100644 lib/templates/details/summary.html diff --git a/example/example-report.html b/example/example-report.html index 1023b1d..cf72f81 100644 --- a/example/example-report.html +++ b/example/example-report.html @@ -35,7 +35,7 @@ .page-header { padding-bottom: 9px; - margin: 40px 0 20px; + margin: 20px 0 20px; border-bottom: 1px solid #eee; } @@ -212,6 +212,48 @@ content: '\02713'; } + /* Tabs */ + + .nav-tabs { + margin-bottom: 15px; + padding-left: 0; + list-style: none; + border-bottom: 1px solid #ddd; + } + + .nav-tabs > li { + position: relative; + display: inline-block; + margin-bottom: -1px; + } + + .nav-tabs > li > button { + position: relative; + display: block; + padding: 10px 15px; + margin-right: 2px; + line-height: 1.5; + cursor: pointer; + color: #3a33d1; + background-color: transparent; + border: 1px solid transparent; + } + + .nav-tabs > li > button:focus, + .nav-tabs > li > button:hover { + background-color: #e6e6e6; + border-color: #e6e6e6 #e6e6e6 #ddd; + } + + .nav-tabs > li.active > button { + color: #555; + background-color: #fff; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; + text-decoration: none; + } + /* Code Styles */ table.source-code { @@ -273,7 +315,7 @@ padding-bottom: 2px; } - table.source-code tr.issue a { + .issue a { float: right; } @@ -415,26 +457,47 @@

Details

5 problems (5 errors, 0 warnings) - - - - - - - - - - - + + +
LineSource
+ + + + - @@ -579,17 +691,38 @@

Details

11 problems (5 errors, 6 warnings) - - - - - - - - - - - + + +
LineSource
+ + + + - @@ -719,17 +987,38 @@

Details

5 problems (5 errors, 0 warnings) - - - - - - - - - - - + + +
LineSource
+ + + + - @@ -818,17 +1156,38 @@

Details

6 problems (0 errors, 6 warnings) - - - - - - - - - - - + + +
LineSource
+ + + + - diff --git a/example/success-report.html b/example/success-report.html index 0a1318b..c6e9a1a 100644 --- a/example/success-report.html +++ b/example/success-report.html @@ -35,7 +35,7 @@ .page-header { padding-bottom: 9px; - margin: 40px 0 20px; + margin: 20px 0 20px; border-bottom: 1px solid #eee; } @@ -85,10 +85,17 @@ font-weight: 400; font-size: normal; text-align: left; - cursor: pointer; border-bottom: 1px solid #ddd; } + tr.lint-result { + cursor: pointer; + } + + tr.lint-result.bg-success { + cursor: default; + } + th span { font-weight: 700; float: right; @@ -205,6 +212,48 @@ content: '\02713'; } + /* Tabs */ + + .nav-tabs { + margin-bottom: 15px; + padding-left: 0; + list-style: none; + border-bottom: 1px solid #ddd; + } + + .nav-tabs > li { + position: relative; + display: inline-block; + margin-bottom: -1px; + } + + .nav-tabs > li > button { + position: relative; + display: block; + padding: 10px 15px; + margin-right: 2px; + line-height: 1.5; + cursor: pointer; + color: #3a33d1; + background-color: transparent; + border: 1px solid transparent; + } + + .nav-tabs > li > button:focus, + .nav-tabs > li > button:hover { + background-color: #e6e6e6; + border-color: #e6e6e6 #e6e6e6 #ddd; + } + + .nav-tabs > li.active > button { + color: #555; + background-color: #fff; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; + text-decoration: none; + } + /* Code Styles */ table.source-code { @@ -266,7 +315,7 @@ padding-bottom: 2px; } - table.source-code tr.issue a { + .issue a { float: right; } @@ -315,25 +364,6 @@

Details

0 problems - - - - - - - - - - - - - - - - -
LineSource
1No Issues
- - @@ -341,7 +371,17 @@

Details

diff --git a/lib/detailed.js b/lib/detailed.js index 8c5d1a5..3e79792 100644 --- a/lib/detailed.js +++ b/lib/detailed.js @@ -17,6 +17,8 @@ const styles = _.template(fs.readFileSync(path.join(__dirname, 'helpers/styles.h scripts = _.template(fs.readFileSync(path.join(__dirname, 'helpers/scripts.html'), 'utf-8')), pageTemplate = _.template(fs.readFileSync(path.join(__dirname, 'templates/main-page.html'), 'utf-8')), resultTemplate = _.template(fs.readFileSync(path.join(__dirname, 'templates/details/result.html'), 'utf-8')), + resultDetailsTemplate = _.template(fs.readFileSync(path.join(__dirname, 'templates/details/details.html'), 'utf-8')), + resultSummaryTemplate = _.template(fs.readFileSync(path.join(__dirname, 'templates/details/summary.html'), 'utf-8')), codeWrapperTemplate = _.template(fs.readFileSync(path.join(__dirname, 'templates/details/code/code-wrapper.html'), 'utf-8')), codeTemplate = _.template(fs.readFileSync(path.join(__dirname, 'templates/details/code/code.html'), 'utf-8')), issueTemplate = _.template(fs.readFileSync(path.join(__dirname, 'templates/details/code/issue.html'), 'utf-8')), @@ -72,7 +74,7 @@ function getRuleLink(ruleId) { /** * Generates the summary details section by only including the necessary tables. * @param {object} rules An object with all of the rules sorted by type - * @param {array} problemFiles An object with the top 5 worst files being linted + * @param {array} [problemFiles] An optional object with the top 5 worst files being linted * @return {string} HTML string of all the summary detail tables that are needed */ function renderSummaryDetails(rules, problemFiles) { @@ -132,6 +134,23 @@ function severityString(severity) { return colors[severity]; } +/** + * Renders an issue + * @param {object} message a message object with an issue + * @returns {string} HTML string of an issue + */ +function renderIssue(message) { + return issueTemplate({ + severity: severityString(message.severity), + severityName: message.severity === 1 ? 'Warning' : 'Error', + lineNumber: message.line, + column: message.column, + message: message.message, + ruleId: message.ruleId, + ruleLink: getRuleLink(message.ruleId) + }); +} + /** * Renders the source code for the files that have issues and marks the lines that have problems * @param {string} sourceCode source code string @@ -150,16 +169,7 @@ function renderSourceCode(sourceCode, messages, parentIndex) { // checks if there is a problem on the current line and renders it if (!_.isEmpty(lineMessages)) { - _.map(lineMessages, function(message) { - template += issueTemplate({ - severity: severityString(message.severity), - severityName: message.severity === 1 ? 'Warning' : 'Error', - column: message.column, - message: message.message, - ruleId: message.ruleId, - ruleLink: getRuleLink(message.ruleId) - }); - }); + template += _.map(lineMessages, renderIssue).join(''); } // adds a line of code to the template (with line number and severity color if appropriate @@ -174,6 +184,26 @@ function renderSourceCode(sourceCode, messages, parentIndex) { }); } +/** + * Renders the result details with tabs for source code and a summary + * @param {string} sourceCode source code string + * @param {array} messages array of messages with the problems in a file + * @param {int} parentIndex file index + * @returns {string} HTML string of result details + */ +function renderResultDetails(sourceCode, messages, parentIndex) { + const topIssues = messages.length < 10 ? '' : _.groupBy(messages, 'severity'); + + return resultDetailsTemplate({ + parentIndex, + sourceCode: renderSourceCode(sourceCode, messages, parentIndex), + detailSummary: resultSummaryTemplate({ + topIssues: renderSummaryDetails(topIssues), + issues: _.map(messages, renderIssue).join('') + }) + }); +} + /** * @param {Array} results Test results. * @returns {string} HTML string describing the results. @@ -194,7 +224,7 @@ function renderResults(results) { // reads the file to get the source code if the source is not provided const sourceCode = result.source || fs.readFileSync(result.filePath, 'utf8'); - template += renderSourceCode(sourceCode, result.messages, index); + template += renderResultDetails(sourceCode, result.messages, index); } return template; diff --git a/lib/helpers/scripts.html b/lib/helpers/scripts.html index 3f7af93..65e66c9 100644 --- a/lib/helpers/scripts.html +++ b/lib/helpers/scripts.html @@ -1,6 +1,16 @@ \ No newline at end of file diff --git a/lib/helpers/styles.html b/lib/helpers/styles.html index f2b1e1a..2a4fba6 100644 --- a/lib/helpers/styles.html +++ b/lib/helpers/styles.html @@ -32,7 +32,7 @@ .page-header { padding-bottom: 9px; - margin: 40px 0 20px; + margin: 20px 0 20px; border-bottom: 1px solid #eee; } @@ -209,6 +209,48 @@ content: '\02713'; } + /* Tabs */ + + .nav-tabs { + margin-bottom: 15px; + padding-left: 0; + list-style: none; + border-bottom: 1px solid #ddd; + } + + .nav-tabs > li { + position: relative; + display: inline-block; + margin-bottom: -1px; + } + + .nav-tabs > li > button { + position: relative; + display: block; + padding: 10px 15px; + margin-right: 2px; + line-height: 1.5; + cursor: pointer; + color: #3a33d1; + background-color: transparent; + border: 1px solid transparent; + } + + .nav-tabs > li > button:focus, + .nav-tabs > li > button:hover { + background-color: #e6e6e6; + border-color: #e6e6e6 #e6e6e6 #ddd; + } + + .nav-tabs > li.active > button { + color: #555; + background-color: #fff; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; + text-decoration: none; + } + /* Code Styles */ table.source-code { @@ -270,7 +312,7 @@ padding-bottom: 2px; } - table.source-code tr.issue a { + .issue a { float: right; } diff --git a/lib/templates/details/code/code-wrapper.html b/lib/templates/details/code/code-wrapper.html index 4f39590..01d61fd 100644 --- a/lib/templates/details/code/code-wrapper.html +++ b/lib/templates/details/code/code-wrapper.html @@ -1,15 +1,11 @@ - - - - - - - - - - - <%= sourceCode %> - -
LineSource
- - + + + + + + + + + <%= sourceCode %> + +
LineSource
diff --git a/lib/templates/details/code/issue.html b/lib/templates/details/code/issue.html index d97d3c2..c3c2b49 100644 --- a/lib/templates/details/code/issue.html +++ b/lib/templates/details/code/issue.html @@ -1,7 +1,7 @@ <%= severityName %> - Column <%= column %>: "<%= message %>" + Row <%= lineNumber %>, Column <%= column %>: "<%= message %>" <%= ruleId %> \ No newline at end of file diff --git a/lib/templates/details/details.html b/lib/templates/details/details.html new file mode 100644 index 0000000..640e675 --- /dev/null +++ b/lib/templates/details/details.html @@ -0,0 +1,31 @@ + + +
    + +
  • + +
    • +
+ +
+
+ <%= sourceCode %> +
+ +
+ + \ No newline at end of file diff --git a/lib/templates/details/summary.html b/lib/templates/details/summary.html new file mode 100644 index 0000000..0bef5cb --- /dev/null +++ b/lib/templates/details/summary.html @@ -0,0 +1,15 @@ +<%= topIssues %> +
+

All Rules

+ + + + + + + + + <%= issues %> + +
SeverityRule
+
\ No newline at end of file