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.
mportuga · Nov 20, 2016 · f7ff04d · f7ff04d
1 parent 40cba43
commit f7ff04d
Show file tree

Hide file tree

Showing 9 changed files with 767 additions and 140 deletions.
diff --git a/example/example-report.html b/example/example-report.html
diff --git 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,33 +364,24 @@ <h2 class="page-header">Details</h2>
         <span>0 problems</span>
     </th>
 </tr>
-<tr style="display:none" class="f-0">
-	<td colspan="4">
-		<table class="source-code">
-			<thead>
-				<tr>
-					<th>Line</th>
-					<th>Source</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="hit bg-success">
-	<td class="line">1</td>
-	<td class="source"><code>No Issues</code></td>
-</tr>
-
-			</tbody>
-		</table>
-	</td>
-</tr>
 
 				</tbody>
 			</table>
 		</div>
 	</div>
 	<script type="text/javascript">
 	var lintResults = document.querySelectorAll('tr.lint-result'),
-		filters = document.querySelectorAll('input[name="filters"]');
+		filters = document.querySelectorAll('input[name="filters"]'),
+		tabs = document.querySelectorAll('.nav-tabs > li > button');
+
+	// helper functions
+	function hideElement(element) {
+		element.style.display = 'none';
+	}
+
+	function toggleDisplay(element) {
+		element.style.display = (element.style.display !== 'none') ? 'none' : 'block';
+	}
 
 	// accordion
 	lintResults.forEach(function setUpAccordion(result) {
@@ -369,6 +409,19 @@ <h2 class="page-header">Details</h2>
 			result.style.display = result.className.includes(filterValue) ? 'table-row' : 'none';
 		});
 	}
+
+	// tabs
+	tabs.forEach(function addClickListener(tab) {
+		tab.addEventListener('click', activateTab);
+	});
+
+	function activateTab() {
+		var tabPanes = document.querySelectorAll(this.getAttribute('data-parent') + ' .tab-pane'),
+			tabContent = document.getElementById(this.getAttribute('data-content'));
+
+		tabPanes.forEach(hideElement);
+		tabContent.style.display = (tabContent.style.display !== 'none') ? 'none' : 'block';
+	}
 </script>
 </body>
 </html>
diff --git 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
@@ -1,6 +1,16 @@
 <script type="text/javascript">
 	var lintResults = document.querySelectorAll('tr.lint-result'),
-		filters = document.querySelectorAll('input[name="filters"]');
+		filters = document.querySelectorAll('input[name="filters"]'),
+		tabs = document.querySelectorAll('.nav-tabs > li > button');
+
+	// helper functions
+	function hideElement(element) {
+		element.style.display = 'none';
+	}
+
+	function toggleDisplay(element) {
+		element.style.display = (element.style.display !== 'none') ? 'none' : 'block';
+	}
 
 	// accordion
 	lintResults.forEach(function setUpAccordion(result) {
@@ -28,4 +38,17 @@
 			result.style.display = result.className.includes(filterValue) ? 'table-row' : 'none';
 		});
 	}
+
+	// tabs
+	tabs.forEach(function addClickListener(tab) {
+		tab.addEventListener('click', activateTab);
+	});
+
+	function activateTab() {
+		var tabPanes = document.querySelectorAll(this.getAttribute('data-parent') + ' .tab-pane'),
+			tabContent = document.getElementById(this.getAttribute('data-content'));
+
+		tabPanes.forEach(hideElement);
+		tabContent.style.display = (tabContent.style.display !== 'none') ? 'none' : 'block';
+	}
 </script>
diff --git 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
@@ -1,15 +1,11 @@
-<tr style="display:none" class="f-<%= parentIndex %>">
-	<td colspan="4">
-		<table class="source-code">
-			<thead>
-				<tr>
-					<th>Line</th>
-					<th>Source</th>
-				</tr>
-			</thead>
-			<tbody>
-				<%= sourceCode %>
-			</tbody>
-		</table>
-	</td>
-</tr>
+<table class="source-code">
+	<thead>
+		<tr>
+			<th>Line</th>
+			<th>Source</th>
+		</tr>
+	</thead>
+	<tbody>
+		<%= sourceCode %>
+	</tbody>
+</table>
diff --git a/lib/templates/details/code/issue.html b/lib/templates/details/code/issue.html
@@ -1,7 +1,7 @@
 <tr class="issue">
 	<td><strong class="text-<%= severity %>"><%= severityName %><strong></td>
 	<td>
-		Column <%= column %>: "<%= message %>"
+		Row <%= lineNumber %>, Column <%= column %>: "<%= message %>"
 		<a href="<%= ruleLink %>" target="_blank"><%= ruleId %></a>
 	</td>
 </tr>