source: imaps-frontend/node_modules/eslint/lib/cli-engine/formatters/html.js@ d565449

main
Last change on this file since d565449 was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation
  • Property mode set to 100644
File size: 12.6 KB
Line 
1/**
2 * @fileoverview HTML reporter
3 * @author Julian Laval
4 */
5"use strict";
6
7//------------------------------------------------------------------------------
8// Helpers
9//------------------------------------------------------------------------------
10
11const encodeHTML = (function() {
12 const encodeHTMLRules = {
13 "&": "&#38;",
14 "<": "&#60;",
15 ">": "&#62;",
16 '"': "&#34;",
17 "'": "&#39;"
18 };
19 const matchHTML = /[&<>"']/ug;
20
21 return function(code) {
22 return code
23 ? code.toString().replace(matchHTML, m => encodeHTMLRules[m] || m)
24 : "";
25 };
26}());
27
28/**
29 * Get the final HTML document.
30 * @param {Object} it data for the document.
31 * @returns {string} HTML document.
32 */
33function pageTemplate(it) {
34 const { reportColor, reportSummary, date, results } = it;
35
36 return `
37<!DOCTYPE html>
38<html>
39 <head>
40 <meta charset="UTF-8">
41 <title>ESLint Report</title>
42 <link rel="icon" type="image/png" sizes="any" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAHaAAAB2gGFomX7AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABD1JREFUWMPFl11sk2UUx3/nbYtjxS1MF7MLMTECMgSTtSSyrQkLhAj7UBPnDSEGoxegGzMwojhXVpmTAA5iYpSoMQa8GBhFOrMFk03buei6yRAlcmOM0SEmU9d90b19jxcM1o5+sGnsc/e+z/l6ztf/HFFVMnns6QieeOCHBePGsHM+wrOtvLG2C4WRVDSSygNV7sCjlspxwDnPB44aols/DXk+mbMBmx/6OseITF1CuOtfevkPh2Uu+/jbdX8lujSScRlT5r7/QDlAfsRmfzmpnkQ/H3H13gf6bBrBn1uqK8WylgEnU8eZmk1repbfchJG1TyKyIKEwuBHFd3lD3naY3O1siiwXsVoBV2VgM1ht/QQUJk2ByqKghsQziYQ8ifKgexIXmuyzC4r67Y7R+xPAfuB/Nn3Cpva+0s7khpQVtZtd4bt51BWxtBYAiciprG7c7D4SixzU9PYalDL6110Ifb/w8W9eY7JqFeFHbO8fPGyLHwwFHJNJTSgwtVTB9oaw9BlQ+tO93vOxypoaQnfEYlI43SeCHDC4TDq9+51/h5fxr33q0ZfV9g04wat9Q943rjJgCp3952W2i8Bi6eDvdsfKj0cK/DYMRyXL4/sUJUmIHd2zYMezsvLaamp4WpcWN3BXSiHpuMwbGbZlnZ8tXY4rgosy+G7oRwQ0cAsd28YGgqfU5UjCZQDLALxDg+Hv/P5Rqvj4hwrS8izXzWb4spwc1GgENFnkpWRzxeuB+ssUHgLdb9UVdt8vpGdKQpze7n7y1U3DBChNRUuqOo9c+0+qpKKxyZqtAIYla7gY4JszAAQri93BSsMRZoyBcUC+w3Q3AyOA4sNhAOZ0q7Iq0b2vUNvK5zPgP+/H8+Zetdoa6uOikhdGurxebwvJY8Iz3V1rTMNAH+opEuQj5KTT/qA1yC+wyUjBm12OidaUtCcPNNX2h0Hx2JG69VulANZAJZJwfU7rzd/FHixuXniTdM0m4GtSQT7bTartqEh9yfImUEzkwKZmTwmo5a5JwkYBfcDL01/RkR5y8iWhtPBknB8ZxwtU9UjwOrrKCeizzc25nTGg1F/turEHoU9wMLpDvWKf8DTmNCAKnd/tqUTF4ElMXJ+A5rWDJS+41WsGWzALhJ+ErBWrLj9g+pqojHxlXJX8HGUg0BsR/x1yhxf3jm4cSzpQFLp6tmi6PEE7g1ZhtZ91ufpSZUAFa6gC+UoQslNaSmypT1U8mHKiUgEKS8KfgF4EpYunFI16tsHin+OG0LcgQK7yj7g6cSzpva2D3hKVNG0Y3mVO1BkqfSlmJrHBQ4uvM12gJHc6ETW8HZVfMRmXvyxxNC1Z/o839zyXlDuCr4nsC11J+MXueaVJWn6yPv+/pJtc9oLTNN4AeTvNGByd3rlhE2x9s5pLwDoHCy+grDzWmOZ95lUtLYj5Bma126Y8eX0/zj/ADxGyViSg4BXAAAAAElFTkSuQmCC">
43 <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMjk0LjgyNSAyNTguOTgyJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPg0KPHBhdGggZmlsbD0nIzgwODBGMicgZD0nTTk3LjAyMSw5OS4wMTZsNDguNDMyLTI3Ljk2MmMxLjIxMi0wLjcsMi43MDYtMC43LDMuOTE4LDBsNDguNDMzLDI3Ljk2MiBjMS4yMTEsMC43LDEuOTU5LDEuOTkzLDEuOTU5LDMuMzkzdjU1LjkyNGMwLDEuMzk5LTAuNzQ4LDIuNjkzLTEuOTU5LDMuMzk0bC00OC40MzMsMjcuOTYyYy0xLjIxMiwwLjctMi43MDYsMC43LTMuOTE4LDAgbC00OC40MzItMjcuOTYyYy0xLjIxMi0wLjctMS45NTktMS45OTQtMS45NTktMy4zOTR2LTU1LjkyNEM5NS4wNjMsMTAxLjAwOSw5NS44MSw5OS43MTYsOTcuMDIxLDk5LjAxNicvPg0KPHBhdGggZmlsbD0nIzRCMzJDMycgZD0nTTI3My4zMzYsMTI0LjQ4OEwyMTUuNDY5LDIzLjgxNmMtMi4xMDItMy42NC01Ljk4NS02LjMyNS0xMC4xODgtNi4zMjVIODkuNTQ1IGMtNC4yMDQsMC04LjA4OCwyLjY4NS0xMC4xOSw2LjMyNWwtNTcuODY3LDEwMC40NWMtMi4xMDIsMy42NDEtMi4xMDIsOC4yMzYsMCwxMS44NzdsNTcuODY3LDk5Ljg0NyBjMi4xMDIsMy42NCw1Ljk4Niw1LjUwMSwxMC4xOSw1LjUwMWgxMTUuNzM1YzQuMjAzLDAsOC4wODctMS44MDUsMTAuMTg4LTUuNDQ2bDU3Ljg2Ny0xMDAuMDEgQzI3NS40MzksMTMyLjM5NiwyNzUuNDM5LDEyOC4xMjgsMjczLjMzNiwxMjQuNDg4IE0yMjUuNDE5LDE3Mi44OThjMCwxLjQ4LTAuODkxLDIuODQ5LTIuMTc0LDMuNTlsLTczLjcxLDQyLjUyNyBjLTEuMjgyLDAuNzQtMi44ODgsMC43NC00LjE3LDBsLTczLjc2Ny00Mi41MjdjLTEuMjgyLTAuNzQxLTIuMTc5LTIuMTA5LTIuMTc5LTMuNTlWODcuODQzYzAtMS40ODEsMC44ODQtMi44NDksMi4xNjctMy41OSBsNzMuNzA3LTQyLjUyN2MxLjI4Mi0wLjc0MSwyLjg4Ni0wLjc0MSw0LjE2OCwwbDczLjc3Miw0Mi41MjdjMS4yODMsMC43NDEsMi4xODYsMi4xMDksMi4xODYsMy41OVYxNzIuODk4eicvPg0KPC9zdmc+">
44 <style>
45 body {
46 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
47 font-size: 16px;
48 font-weight: normal;
49 margin: 0;
50 padding: 0;
51 color: #333;
52 }
53
54 #overview {
55 padding: 20px 30px;
56 }
57
58 td,
59 th {
60 padding: 5px 10px;
61 }
62
63 h1 {
64 margin: 0;
65 }
66
67 table {
68 margin: 30px;
69 width: calc(100% - 60px);
70 max-width: 1000px;
71 border-radius: 5px;
72 border: 1px solid #ddd;
73 border-spacing: 0;
74 }
75
76 th {
77 font-weight: 400;
78 font-size: medium;
79 text-align: left;
80 cursor: pointer;
81 }
82
83 td.clr-1,
84 td.clr-2,
85 th span {
86 font-weight: 700;
87 }
88
89 th span {
90 float: right;
91 margin-left: 20px;
92 }
93
94 th span::after {
95 content: "";
96 clear: both;
97 display: block;
98 }
99
100 tr:last-child td {
101 border-bottom: none;
102 }
103
104 tr td:first-child,
105 tr td:last-child {
106 color: #9da0a4;
107 }
108
109 #overview.bg-0,
110 tr.bg-0 th {
111 color: #468847;
112 background: #dff0d8;
113 border-bottom: 1px solid #d6e9c6;
114 }
115
116 #overview.bg-1,
117 tr.bg-1 th {
118 color: #f0ad4e;
119 background: #fcf8e3;
120 border-bottom: 1px solid #fbeed5;
121 }
122
123 #overview.bg-2,
124 tr.bg-2 th {
125 color: #b94a48;
126 background: #f2dede;
127 border-bottom: 1px solid #eed3d7;
128 }
129
130 td {
131 border-bottom: 1px solid #ddd;
132 }
133
134 td.clr-1 {
135 color: #f0ad4e;
136 }
137
138 td.clr-2 {
139 color: #b94a48;
140 }
141
142 td a {
143 color: #3a33d1;
144 text-decoration: none;
145 }
146
147 td a:hover {
148 color: #272296;
149 text-decoration: underline;
150 }
151 </style>
152 </head>
153 <body>
154 <div id="overview" class="bg-${reportColor}">
155 <h1>ESLint Report</h1>
156 <div>
157 <span>${reportSummary}</span> - Generated on ${date}
158 </div>
159 </div>
160 <table>
161 <tbody>
162 ${results}
163 </tbody>
164 </table>
165 <script type="text/javascript">
166 var groups = document.querySelectorAll("tr[data-group]");
167 for (i = 0; i < groups.length; i++) {
168 groups[i].addEventListener("click", function() {
169 var inGroup = document.getElementsByClassName(this.getAttribute("data-group"));
170 this.innerHTML = (this.innerHTML.indexOf("+") > -1) ? this.innerHTML.replace("+", "-") : this.innerHTML.replace("-", "+");
171 for (var j = 0; j < inGroup.length; j++) {
172 inGroup[j].style.display = (inGroup[j].style.display !== "none") ? "none" : "table-row";
173 }
174 });
175 }
176 </script>
177 </body>
178</html>
179`.trimStart();
180}
181
182/**
183 * Given a word and a count, append an s if count is not one.
184 * @param {string} word A word in its singular form.
185 * @param {int} count A number controlling whether word should be pluralized.
186 * @returns {string} The original word with an s on the end if count is not one.
187 */
188function pluralize(word, count) {
189 return (count === 1 ? word : `${word}s`);
190}
191
192/**
193 * Renders text along the template of x problems (x errors, x warnings)
194 * @param {string} totalErrors Total errors
195 * @param {string} totalWarnings Total warnings
196 * @returns {string} The formatted string, pluralized where necessary
197 */
198function renderSummary(totalErrors, totalWarnings) {
199 const totalProblems = totalErrors + totalWarnings;
200 let renderedText = `${totalProblems} ${pluralize("problem", totalProblems)}`;
201
202 if (totalProblems !== 0) {
203 renderedText += ` (${totalErrors} ${pluralize("error", totalErrors)}, ${totalWarnings} ${pluralize("warning", totalWarnings)})`;
204 }
205 return renderedText;
206}
207
208/**
209 * Get the color based on whether there are errors/warnings...
210 * @param {string} totalErrors Total errors
211 * @param {string} totalWarnings Total warnings
212 * @returns {int} The color code (0 = green, 1 = yellow, 2 = red)
213 */
214function renderColor(totalErrors, totalWarnings) {
215 if (totalErrors !== 0) {
216 return 2;
217 }
218 if (totalWarnings !== 0) {
219 return 1;
220 }
221 return 0;
222}
223
224/**
225 * Get HTML (table row) describing a single message.
226 * @param {Object} it data for the message.
227 * @returns {string} HTML (table row) describing the message.
228 */
229function messageTemplate(it) {
230 const {
231 parentIndex,
232 lineNumber,
233 columnNumber,
234 severityNumber,
235 severityName,
236 message,
237 ruleUrl,
238 ruleId
239 } = it;
240
241 return `
242<tr style="display: none;" class="f-${parentIndex}">
243 <td>${lineNumber}:${columnNumber}</td>
244 <td class="clr-${severityNumber}">${severityName}</td>
245 <td>${encodeHTML(message)}</td>
246 <td>
247 <a href="${ruleUrl ? ruleUrl : ""}" target="_blank" rel="noopener noreferrer">${ruleId ? ruleId : ""}</a>
248 </td>
249</tr>
250`.trimStart();
251}
252
253/**
254 * Get HTML (table rows) describing the messages.
255 * @param {Array} messages Messages.
256 * @param {int} parentIndex Index of the parent HTML row.
257 * @param {Object} rulesMeta Dictionary containing metadata for each rule executed by the analysis.
258 * @returns {string} HTML (table rows) describing the messages.
259 */
260function renderMessages(messages, parentIndex, rulesMeta) {
261
262 /**
263 * Get HTML (table row) describing a message.
264 * @param {Object} message Message.
265 * @returns {string} HTML (table row) describing a message.
266 */
267 return messages.map(message => {
268 const lineNumber = message.line || 0;
269 const columnNumber = message.column || 0;
270 let ruleUrl;
271
272 if (rulesMeta) {
273 const meta = rulesMeta[message.ruleId];
274
275 if (meta && meta.docs && meta.docs.url) {
276 ruleUrl = meta.docs.url;
277 }
278 }
279
280 return messageTemplate({
281 parentIndex,
282 lineNumber,
283 columnNumber,
284 severityNumber: message.severity,
285 severityName: message.severity === 1 ? "Warning" : "Error",
286 message: message.message,
287 ruleId: message.ruleId,
288 ruleUrl
289 });
290 }).join("\n");
291}
292
293/**
294 * Get HTML (table row) describing the result for a single file.
295 * @param {Object} it data for the file.
296 * @returns {string} HTML (table row) describing the result for the file.
297 */
298function resultTemplate(it) {
299 const { color, index, filePath, summary } = it;
300
301 return `
302<tr class="bg-${color}" data-group="f-${index}">
303 <th colspan="4">
304 [+] ${encodeHTML(filePath)}
305 <span>${encodeHTML(summary)}</span>
306 </th>
307</tr>
308`.trimStart();
309}
310
311/**
312 * Render the results.
313 * @param {Array} results Test results.
314 * @param {Object} rulesMeta Dictionary containing metadata for each rule executed by the analysis.
315 * @returns {string} HTML string describing the results.
316 */
317function renderResults(results, rulesMeta) {
318 return results.map((result, index) => resultTemplate({
319 index,
320 color: renderColor(result.errorCount, result.warningCount),
321 filePath: result.filePath,
322 summary: renderSummary(result.errorCount, result.warningCount)
323 }) + renderMessages(result.messages, index, rulesMeta)).join("\n");
324}
325
326//------------------------------------------------------------------------------
327// Public Interface
328//------------------------------------------------------------------------------
329
330module.exports = function(results, data) {
331 let totalErrors,
332 totalWarnings;
333
334 const metaData = data ? data.rulesMeta : {};
335
336 totalErrors = 0;
337 totalWarnings = 0;
338
339 // Iterate over results to get totals
340 results.forEach(result => {
341 totalErrors += result.errorCount;
342 totalWarnings += result.warningCount;
343 });
344
345 return pageTemplate({
346 date: new Date(),
347 reportColor: renderColor(totalErrors, totalWarnings),
348 reportSummary: renderSummary(totalErrors, totalWarnings),
349 results: renderResults(results, metaData)
350 });
351};
Note: See TracBrowser for help on using the repository browser.