]>
git.proxmox.com Git - pve-eslint.git/blob - eslint/lib/cli-engine/formatters/html.js
1aa66fcefacc3bb6cf70d514583da4e4a1ec50f7
2 * @fileoverview HTML reporter
7 //------------------------------------------------------------------------------
9 //------------------------------------------------------------------------------
11 const encodeHTML
= (function() {
12 const encodeHTMLRules
= {
19 const matchHTML
= /[&<>"']/ug;
21 return function(code
) {
23 ? code
.toString().replace(matchHTML
, m
=> encodeHTMLRules
[m
] || m
)
29 * Get the final HTML document.
30 * @param {Object} it data for the document.
31 * @returns {string} HTML document.
33 function pageTemplate(it
) {
34 const { reportColor
, reportSummary
, date
, results
} = it
;
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+">
46 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
69 width: calc(100% - 60px);
72 border: 1px solid #ddd;
113 border-bottom: 1px solid #d6e9c6;
120 border-bottom: 1px solid #fbeed5;
127 border-bottom: 1px solid #eed3d7;
131 border-bottom: 1px solid #ddd;
144 text-decoration: none;
149 text-decoration: underline;
154 <div id="overview" class="bg-${reportColor}">
155 <h1>ESLint Report</h1>
157 <span>${reportSummary}</span> - Generated on ${date}
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";
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.
188 function pluralize(word
, count
) {
189 return (count
=== 1 ? word
: `${word}s`);
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
198 function renderSummary(totalErrors
, totalWarnings
) {
199 const totalProblems
= totalErrors
+ totalWarnings
;
200 let renderedText
= `${totalProblems} ${pluralize("problem", totalProblems)}`;
202 if (totalProblems
!== 0) {
203 renderedText
+= ` (${totalErrors} ${pluralize("error", totalErrors)}, ${totalWarnings} ${pluralize("warning", totalWarnings)})`;
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)
214 function renderColor(totalErrors
, totalWarnings
) {
215 if (totalErrors
!== 0) {
218 if (totalWarnings
!== 0) {
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.
229 function messageTemplate(it
) {
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>
247 <a href="${ruleUrl ? ruleUrl : ""}" target="_blank" rel="noopener noreferrer">${ruleId ? ruleId : ""}</a>
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.
260 function renderMessages(messages
, parentIndex
, rulesMeta
) {
263 * Get HTML (table row) describing a message.
264 * @param {Object} message Message.
265 * @returns {string} HTML (table row) describing a message.
267 return messages
.map(message
=> {
268 const lineNumber
= message
.line
|| 0;
269 const columnNumber
= message
.column
|| 0;
273 const meta
= rulesMeta
[message
.ruleId
];
275 if (meta
&& meta
.docs
&& meta
.docs
.url
) {
276 ruleUrl
= meta
.docs
.url
;
280 return messageTemplate({
284 severityNumber
: message
.severity
,
285 severityName
: message
.severity
=== 1 ? "Warning" : "Error",
286 message
: message
.message
,
287 ruleId
: message
.ruleId
,
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.
298 function resultTemplate(it
) {
299 const { color
, index
, filePath
, summary
} = it
;
302 <tr class="bg-${color}" data-group="f-${index}">
304 [+] ${encodeHTML(filePath)}
305 <span>${encodeHTML(summary)}</span>
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.
317 function renderResults(results
, rulesMeta
) {
318 return results
.map((result
, index
) => resultTemplate({
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");
326 //------------------------------------------------------------------------------
328 //------------------------------------------------------------------------------
330 module
.exports = function(results
, data
) {
334 const metaData
= data
? data
.rulesMeta
: {};
339 // Iterate over results to get totals
340 results
.forEach(result
=> {
341 totalErrors
+= result
.errorCount
;
342 totalWarnings
+= result
.warningCount
;
345 return pageTemplate({
347 reportColor
: renderColor(totalErrors
, totalWarnings
),
348 reportSummary
: renderSummary(totalErrors
, totalWarnings
),
349 results
: renderResults(results
, metaData
)