Add counts for HTML pages, files, and errors to QA tab (#1913)

Fixes #1859 

Adds a section on the QA page showing the breakdown of HTML Pages, non-html files captured as pages, and failed pages in the crawl

frontend/src/pages/org/archived-item-detail/ui/qa.ts

@@ -168,6 +168,13 @@ export class ArchivedItemDetailQA extends TailwindElement {
   }
 
   render() {
+    const fileCount = this.crawl?.filePageCount || 0;
+    const errorCount = this.crawl?.errorPageCount || 0;
+    const doneCount = this.crawl?.stats?.done
+      ? parseInt(this.crawl.stats.done)
+      : 0;
+    const htmlCount = doneCount - fileCount - errorCount;
+
     return html`
       <div class="mb-5 rounded-lg border p-2">
         <btrix-desc-list horizontal>
@@ -261,9 +268,40 @@ export class ArchivedItemDetailQA extends TailwindElement {
         <sl-divider></sl-divider>
 
         <btrix-tab-group-panel name="pages" class="block">
+          <btrix-card class="gap-y-1">
+            <div slot="title" class="flex flex-wrap justify-between">
+              ${msg("Crawl Results")}
+              <div class="text-neutral-500">
+                <sl-tooltip
+                  content=${msg(
+                    "Non-HTML files captured as pages are known good files that the crawler found as clickable links on a page and don't need to be analyzed. Failed pages did not respond when the crawler tried to visit them.",
+                  )}
+                >
+                  <sl-icon class="text-base" name="info-circle"></sl-icon>
+                </sl-tooltip>
+              </div>
+            </div>
+            <div>
+              <p>
+                <span class="text-primary">${htmlCount}</span> ${msg(
+                  "HTML Pages",
+                )}
+              </p>
+              <p>
+                <span class="text-neutral-600">${fileCount}</span> ${msg(
+                  "Non-HTML Files Captured As Pages",
+                )}
+              </p>
+              <p>
+                <span class="text-danger">${errorCount}</span> ${msg(
+                  "Failed Pages",
+                )}
+              </p>
+            </div>
             ${when(this.mostRecentNonFailedQARun && this.qaRuns, (qaRuns) =>
               this.renderAnalysis(qaRuns),
             )}
+          </btrix-card>
 
           <div>
             <h4 class="mb-2 mt-4 text-lg leading-8">
@@ -482,10 +520,11 @@ export class ArchivedItemDetailQA extends TailwindElement {
     }
 
     return html`
-      <btrix-card>
-        <div slot="title" class="flex flex-wrap justify-between">
-          <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
-            ${msg("Page Match Analysis")}
+      <div
+        class="mb-3 mt-6 flex flex-wrap justify-between border-b pb-3 text-base font-semibold leading-none"
+      >
+        <div class="flex flex-wrap items-center gap-x-3">
+          ${msg("HTML Page Match Analysis")}
           ${when(this.qaRuns, (qaRuns) => {
             const finishedQARuns = qaRuns.filter(({ state }) =>
               finishedCrawlStates.includes(state),
@@ -506,9 +545,7 @@ export class ArchivedItemDetailQA extends TailwindElement {
                 <sl-tooltip
                   content=${mostRecentSelected
                     ? msg("You’re viewing the latest analysis run results.")
-                      : msg(
-                          "You’re viewing results from an older analysis run.",
-                        )}
+                    : msg("You’re viewing results from an older analysis run.")}
                 >
                   <sl-tag
                     size="small"
@@ -554,9 +591,7 @@ export class ArchivedItemDetailQA extends TailwindElement {
             <btrix-table-header-cell>
               ${msg("Statistic")}
             </btrix-table-header-cell>
-              <btrix-table-header-cell>
-                ${msg("Chart")}
-              </btrix-table-header-cell>
+            <btrix-table-header-cell> ${msg("Chart")} </btrix-table-header-cell>
           </btrix-table-head>
           <btrix-table-body>
             <btrix-table-row>
@@ -607,7 +642,6 @@ export class ArchivedItemDetailQA extends TailwindElement {
           )}
         </dl>
       </figcaption>
-      </btrix-card>
     `;
   }
 

frontend/src/types/crawler.ts

@@ -175,6 +175,8 @@ type ArchivedItemBase = {
   activeQAStats: { done: number; found: number } | null;
   lastQAState: CrawlState | null;
   lastQAStarted: string | null;
+  filePageCount?: number;
+  errorPageCount?: number;
 };
 
 export type Crawl = ArchivedItemBase &