]>
git.proxmox.com Git - pve-eslint.git/blob - eslint/lib/cli-engine/formatters/html.js
6e40bbe16b7f03f42842ef9d77078d4b0bb6e32a
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;
64 width:calc(100% - 60px);
67 border:1px solid #ddd;
76 td.clr-1, td.clr-2, th span {
91 tr td:first-child, tr td:last-child {
94 #overview.bg-0, tr.bg-0 th {
97 border-bottom:1px solid #d6e9c6
99 #overview.bg-1, tr.bg-1 th {
102 border-bottom:1px solid #fbeed5
104 #overview.bg-2, tr.bg-2 th {
107 border-bottom:1px solid #eed3d7
110 border-bottom:1px solid #ddd
124 text-decoration:underline
129 <div id="overview" class="bg-${reportColor}">
130 <h1>ESLint Report</h1>
132 <span>${reportSummary}</span> - Generated on ${date}
140 <script type="text/javascript">
141 var groups = document.querySelectorAll("tr[data-group]");
142 for (i = 0; i < groups.length; i++) {
143 groups[i].addEventListener("click", function() {
144 var inGroup = document.getElementsByClassName(this.getAttribute("data-group"));
145 this.innerHTML = (this.innerHTML.indexOf("+") > -1) ? this.innerHTML.replace("+", "-") : this.innerHTML.replace("-", "+");
146 for (var j = 0; j < inGroup.length; j++) {
147 inGroup[j].style.display = (inGroup[j].style.display !== "none") ? "none" : "table-row";
158 * Given a word and a count, append an s if count is not one.
159 * @param {string} word A word in its singular form.
160 * @param {int} count A number controlling whether word should be pluralized.
161 * @returns {string} The original word with an s on the end if count is not one.
163 function pluralize(word
, count
) {
164 return (count
=== 1 ? word
: `${word}s`);
168 * Renders text along the template of x problems (x errors, x warnings)
169 * @param {string} totalErrors Total errors
170 * @param {string} totalWarnings Total warnings
171 * @returns {string} The formatted string, pluralized where necessary
173 function renderSummary(totalErrors
, totalWarnings
) {
174 const totalProblems
= totalErrors
+ totalWarnings
;
175 let renderedText
= `${totalProblems} ${pluralize("problem", totalProblems)}`;
177 if (totalProblems
!== 0) {
178 renderedText
+= ` (${totalErrors} ${pluralize("error", totalErrors)}, ${totalWarnings} ${pluralize("warning", totalWarnings)})`;
184 * Get the color based on whether there are errors/warnings...
185 * @param {string} totalErrors Total errors
186 * @param {string} totalWarnings Total warnings
187 * @returns {int} The color code (0 = green, 1 = yellow, 2 = red)
189 function renderColor(totalErrors
, totalWarnings
) {
190 if (totalErrors
!== 0) {
193 if (totalWarnings
!== 0) {
200 * Get HTML (table row) describing a single message.
201 * @param {Object} it data for the message.
202 * @returns {string} HTML (table row) describing the message.
204 function messageTemplate(it
) {
217 <tr style="display:none" class="f-${parentIndex}">
218 <td>${lineNumber}:${columnNumber}</td>
219 <td class="clr-${severityNumber}">${severityName}</td>
220 <td>${encodeHTML(message)}</td>
222 <a href="${ruleUrl ? ruleUrl : ""}" target="_blank" rel="noopener noreferrer">${ruleId ? ruleId : ""}</a>
229 * Get HTML (table rows) describing the messages.
230 * @param {Array} messages Messages.
231 * @param {int} parentIndex Index of the parent HTML row.
232 * @param {Object} rulesMeta Dictionary containing metadata for each rule executed by the analysis.
233 * @returns {string} HTML (table rows) describing the messages.
235 function renderMessages(messages
, parentIndex
, rulesMeta
) {
238 * Get HTML (table row) describing a message.
239 * @param {Object} message Message.
240 * @returns {string} HTML (table row) describing a message.
242 return messages
.map(message
=> {
243 const lineNumber
= message
.line
|| 0;
244 const columnNumber
= message
.column
|| 0;
248 const meta
= rulesMeta
[message
.ruleId
];
250 if (meta
&& meta
.docs
&& meta
.docs
.url
) {
251 ruleUrl
= meta
.docs
.url
;
255 return messageTemplate({
259 severityNumber
: message
.severity
,
260 severityName
: message
.severity
=== 1 ? "Warning" : "Error",
261 message
: message
.message
,
262 ruleId
: message
.ruleId
,
269 * Get HTML (table row) describing the result for a single file.
270 * @param {Object} it data for the file.
271 * @returns {string} HTML (table row) describing the result for the file.
273 function resultTemplate(it
) {
274 const { color
, index
, filePath
, summary
} = it
;
277 <tr class="bg-${color}" data-group="f-${index}">
279 [+] ${encodeHTML(filePath)}
280 <span>${encodeHTML(summary)}</span>
287 * Render the results.
288 * @param {Array} results Test results.
289 * @param {Object} rulesMeta Dictionary containing metadata for each rule executed by the analysis.
290 * @returns {string} HTML string describing the results.
292 function renderResults(results
, rulesMeta
) {
293 return results
.map((result
, index
) => resultTemplate({
295 color
: renderColor(result
.errorCount
, result
.warningCount
),
296 filePath
: result
.filePath
,
297 summary
: renderSummary(result
.errorCount
, result
.warningCount
)
298 }) + renderMessages(result
.messages
, index
, rulesMeta
)).join("\n");
301 //------------------------------------------------------------------------------
303 //------------------------------------------------------------------------------
305 module
.exports = function(results
, data
) {
309 const metaData
= data
? data
.rulesMeta
: {};
314 // Iterate over results to get totals
315 results
.forEach(result
=> {
316 totalErrors
+= result
.errorCount
;
317 totalWarnings
+= result
.warningCount
;
320 return pageTemplate({
322 reportColor
: renderColor(totalErrors
, totalWarnings
),
323 reportSummary
: renderSummary(totalErrors
, totalWarnings
),
324 results
: renderResults(results
, metaData
)