Merge pull request #905 from SSWConsulting/scan-rules-count

✨ UI - Show number of enabled/disabled rules on scan list
SSWConsulting · Jun 11, 2024 · 42f2b9f · 42f2b9f
2 parents fdd3a7a + 7857831
commit 42f2b9f
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 21 deletions.
diff --git a/api/functions/index.js b/api/functions/index.js
@@ -213,6 +213,7 @@ app.post('/scanresult/:api/:buildId', async (req, res) => {
 		whiteListed,
 		cloc,
 		code,
+		selectedHtmlHintRules,
 		htmlIssuesSummary,
 		htmlIssues,
 		isPrivate,
@@ -283,6 +284,7 @@ app.post('/scanresult/:api/:buildId', async (req, res) => {
 		htmlErrors: htmlErrors ? htmlErrors : 0,
 		codeIssues: getCodeErrorSummary(code),
 		htmlIssuesList,
+		selectedHtmlHintRules,
 		isPrivate,
 		finalEval,
 		buildVersion

diff --git a/docker/index.js b/docker/index.js
@@ -194,6 +194,7 @@ const processAndUpload = async (
   let whiteListed = [];
   let allBadUrls = [];
   let badUrls = [];
+  let selectedHtmlHintRules;
 
   const results = await readCsv(file);
 
@@ -218,7 +219,7 @@ const processAndUpload = async (
     } else {
       await addCustomHtmlRule();
     };
-    [htmlIssuesSummary, htmlIssues] = await runHtmlHint(
+    [htmlIssuesSummary, htmlIssues, selectedHtmlHintRules] = await runHtmlHint(
       args.url,
       results,
       writeLog,
@@ -282,11 +283,12 @@ const processAndUpload = async (
         k6Report,
         cloc: cloc,
         code: codeAuditor,
+        selectedHtmlHintRules,
         htmlIssuesSummary,
         htmlIssues,
         isPrivate: args.private,
         finalEval,
-        buildVersion: PACKAGE_CONFIG.version
+        buildVersion: PACKAGE_CONFIG.version,
       });
     } catch (error) {
       console.error(
@@ -295,6 +297,17 @@ const processAndUpload = async (
     }
   }
 
+  // Upload selected HTMLHint Rules to the scan
+  if (args.htmlhint && selectedHtmlHintRules?.length > 0 && args.token && runId) {
+    const res = await addHTMLHintRulesForScan(args.token, args.url, runId, selectedHtmlHintRules)
+
+    if (res) {
+      console.log('Uploaded selected HTMLHint Rules successfully');
+    } else {
+      throw new Error("Failed to add custom html rules for each scan");
+    }
+  }
+
   printResultsToConsole(
     results,
     lhrSummary,
@@ -306,22 +319,6 @@ const processAndUpload = async (
     took
   );
 
-  // Upload selected HTMLHint Rules to the scan
-  if (args.htmlhint && args.token && runId) {
-    const result = await getHTMLHintRules(args.token, args.url);
-    const selectedRules = result?.selectedRules ?? Object.keys(htmlHintConfig).join(",");
-
-    if (selectedRules?.length > 0) {
-      const res = await addHTMLHintRulesForScan(args.token, args.url, runId, selectedRules)
-
-      if (res) {
-        console.log('Uploaded selected HTMLHint Rules successfully');
-      } else {
-        throw new Error("Failed to add custom html rules for each scan");
-      }
-    }
-  }
-
   // Send alert email to shared participants
   if (args.token) {
     const emailConfig = await getAlertEmailConfig(args.token)

diff --git a/docker/utils.js b/docker/utils.js
@@ -466,12 +466,13 @@ exports.runHtmlHint = async (startUrl, scannedUrls, writeLog, tokenApi) => {
   );
 
   if (result) {
-    result = this.handleNoFavIcon(result[0])
+    result = this.handleNoFavIcon(result[0]);
+    const selectedRules = rules?.selectedRules ?? Object.keys(htmlHintConfig).join(",");
 
     const [summary, details] = getHtmlHintDetails(result);
     writeLog("summary of html issues found", summary);
     writeLog("details of html issues", JSON.stringify(details, null, 2));
-    return [summary, details];
+    return [summary, details, selectedRules];
   }
 };
 

diff --git a/ui/src/components/summaryitemcomponents/CodeSummary.svelte b/ui/src/components/summaryitemcomponents/CodeSummary.svelte
@@ -32,6 +32,17 @@
     </div>
   {/if}
 
+  {#if codeSummary.selectedHtmlHintRulesCount}
+    <div class="col-span-1">
+      <span class="block whitespace-nowrap font-sans">Rules</span>
+      <span
+        class="font-sans font-bold block lg:inline-block"
+        title="Number of rules enabled">
+        {codeSummary.selectedHtmlHintRulesCount} / {codeSummary.totalHtmlHintRulesCount}
+      </span>
+    </div>
+  {/if}
+
   {#if codeSummary.htmlWarnings !== null || codeSummary.htmlErrors !== null}
   <div class="col-span-1">
     <span class="block whitespace-nowrap font-sans">

diff --git a/ui/src/components/summaryitemcomponents/DetailsCard.svelte b/ui/src/components/summaryitemcomponents/DetailsCard.svelte
@@ -123,7 +123,7 @@
       {#if htmlRules?.selectedRules}
         <div class="mb-2">
           <span class="cursor-pointer" on:click={handleClick} on:keydown={handleClick}>
-            <p class="inline">HTML Rules Scanned: {htmlRules.selectedRules.split(/[,]+/).length} / {totalRulesCount}</p>
+            <p class="inline">HTML Rules Scanned: {enabledRules.length} / {totalRulesCount}</p>
             <span type="button" class="inline" >
             {#if isCollapsedRules}
               <i class="fas fa-angle-up"></i>

diff --git a/ui/src/utils/utils.js b/ui/src/utils/utils.js
@@ -232,6 +232,19 @@ export const getCodeSummary = (value) => {
         "HTML Issues:\n" + getHtmlIssuesDescriptions(value.htmlIssuesList),
     };
   }
+
+  if (value.selectedHtmlHintRules) {
+    const selectedRules = value.selectedHtmlHintRules.split(",");
+    const selectedCount = selectedRules.filter((rule) => htmlHintRules.find(x => x.rule === rule) || customHtmlHintRules.find(x => x.rule === rule)).length;
+    const totalRulesCount = htmlHintRules.length + customHtmlHintRules.length;
+
+    summary = {
+      ...summary,
+      selectedHtmlHintRulesCount: selectedCount,
+      totalHtmlHintRulesCount: totalRulesCount,
+    };
+  }
+
   return summary;
 };
 export const HTMLERRORS = [