Skip to content

Commit f1274a6

Browse files
tw4ltw4l
authored
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
1 parent aa96149 commit f1274a6

File tree

2 files changed

+161
-125
lines changed

2 files changed

+161
-125
lines changed

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

Lines changed: 159 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,13 @@ export class ArchivedItemDetailQA extends TailwindElement {
168168
}
169169

170170
render() {
171+
const fileCount = this.crawl?.filePageCount || 0;
172+
const errorCount = this.crawl?.errorPageCount || 0;
173+
const doneCount = this.crawl?.stats?.done
174+
? parseInt(this.crawl.stats.done)
175+
: 0;
176+
const htmlCount = doneCount - fileCount - errorCount;
177+
171178
return html`
172179
<div class="mb-5 rounded-lg border p-2">
173180
<btrix-desc-list horizontal>
@@ -261,9 +268,40 @@ export class ArchivedItemDetailQA extends TailwindElement {
261268
<sl-divider></sl-divider>
262269
263270
<btrix-tab-group-panel name="pages" class="block">
264-
${when(this.mostRecentNonFailedQARun && this.qaRuns, (qaRuns) =>
265-
this.renderAnalysis(qaRuns),
266-
)}
271+
<btrix-card class="gap-y-1">
272+
<div slot="title" class="flex flex-wrap justify-between">
273+
${msg("Crawl Results")}
274+
<div class="text-neutral-500">
275+
<sl-tooltip
276+
content=${msg(
277+
"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.",
278+
)}
279+
>
280+
<sl-icon class="text-base" name="info-circle"></sl-icon>
281+
</sl-tooltip>
282+
</div>
283+
</div>
284+
<div>
285+
<p>
286+
<span class="text-primary">${htmlCount}</span> ${msg(
287+
"HTML Pages",
288+
)}
289+
</p>
290+
<p>
291+
<span class="text-neutral-600">${fileCount}</span> ${msg(
292+
"Non-HTML Files Captured As Pages",
293+
)}
294+
</p>
295+
<p>
296+
<span class="text-danger">${errorCount}</span> ${msg(
297+
"Failed Pages",
298+
)}
299+
</p>
300+
</div>
301+
${when(this.mostRecentNonFailedQARun && this.qaRuns, (qaRuns) =>
302+
this.renderAnalysis(qaRuns),
303+
)}
304+
</btrix-card>
267305
268306
<div>
269307
<h4 class="mb-2 mt-4 text-lg leading-8">
@@ -482,132 +520,128 @@ export class ArchivedItemDetailQA extends TailwindElement {
482520
}
483521

484522
return html`
485-
<btrix-card>
486-
<div slot="title" class="flex flex-wrap justify-between">
487-
<div class="flex flex-wrap items-center gap-x-3 gap-y-1">
488-
${msg("Page Match Analysis")}
489-
${when(this.qaRuns, (qaRuns) => {
490-
const finishedQARuns = qaRuns.filter(({ state }) =>
491-
finishedCrawlStates.includes(state),
492-
);
493-
const latestFinishedSelected =
494-
this.qaRunId === finishedQARuns[0]?.id;
495-
496-
const finishedAndRunningQARuns = qaRuns.filter(
497-
({ state }) =>
498-
finishedCrawlStates.includes(state) ||
499-
QA_RUNNING_STATES.includes(state),
500-
);
501-
const mostRecentSelected =
502-
this.qaRunId === finishedAndRunningQARuns[0]?.id;
503-
504-
return html`
505-
<div>
506-
<sl-tooltip
507-
content=${mostRecentSelected
508-
? msg("You’re viewing the latest analysis run results.")
509-
: msg(
510-
"You’re viewing results from an older analysis run.",
511-
)}
523+
<div
524+
class="mb-3 mt-6 flex flex-wrap justify-between border-b pb-3 text-base font-semibold leading-none"
525+
>
526+
<div class="flex flex-wrap items-center gap-x-3">
527+
${msg("HTML Page Match Analysis")}
528+
${when(this.qaRuns, (qaRuns) => {
529+
const finishedQARuns = qaRuns.filter(({ state }) =>
530+
finishedCrawlStates.includes(state),
531+
);
532+
const latestFinishedSelected =
533+
this.qaRunId === finishedQARuns[0]?.id;
534+
535+
const finishedAndRunningQARuns = qaRuns.filter(
536+
({ state }) =>
537+
finishedCrawlStates.includes(state) ||
538+
QA_RUNNING_STATES.includes(state),
539+
);
540+
const mostRecentSelected =
541+
this.qaRunId === finishedAndRunningQARuns[0]?.id;
542+
543+
return html`
544+
<div>
545+
<sl-tooltip
546+
content=${mostRecentSelected
547+
? msg("You’re viewing the latest analysis run results.")
548+
: msg("You’re viewing results from an older analysis run.")}
549+
>
550+
<sl-tag
551+
size="small"
552+
variant=${mostRecentSelected ? "success" : "warning"}
512553
>
513-
<sl-tag
514-
size="small"
515-
variant=${mostRecentSelected ? "success" : "warning"}
516-
>
517-
${mostRecentSelected
518-
? msg("Current")
519-
: latestFinishedSelected
520-
? msg("Last Finished")
521-
: msg("Outdated")}
522-
</sl-tag>
523-
</sl-tooltip>
524-
<btrix-qa-run-dropdown
525-
.items=${finishedAndRunningQARuns}
526-
selectedId=${this.qaRunId || ""}
527-
@btrix-select=${(e: CustomEvent<SelectDetail>) =>
528-
(this.qaRunId = e.detail.item.id)}
529-
></btrix-qa-run-dropdown>
530-
</div>
531-
`;
532-
})}
554+
${mostRecentSelected
555+
? msg("Current")
556+
: latestFinishedSelected
557+
? msg("Last Finished")
558+
: msg("Outdated")}
559+
</sl-tag>
560+
</sl-tooltip>
561+
<btrix-qa-run-dropdown
562+
.items=${finishedAndRunningQARuns}
563+
selectedId=${this.qaRunId || ""}
564+
@btrix-select=${(e: CustomEvent<SelectDetail>) =>
565+
(this.qaRunId = e.detail.item.id)}
566+
></btrix-qa-run-dropdown>
567+
</div>
568+
`;
569+
})}
570+
</div>
571+
<div class="flex items-center gap-2 text-neutral-500">
572+
<div class="text-sm font-normal">
573+
${qaRun.state === "starting"
574+
? msg("Analysis starting")
575+
: `${formatNumber(qaRun.stats.done)}/${formatNumber(qaRun.stats.found)}
576+
${pluralOf("pages", qaRun.stats.found)} ${msg("analyzed")}`}
533577
</div>
534-
<div class="flex items-center gap-2 text-neutral-500">
535-
<div class="text-sm font-normal">
536-
${qaRun.state === "starting"
537-
? msg("Analysis starting")
538-
: `${formatNumber(qaRun.stats.done)}/${formatNumber(qaRun.stats.found)}
539-
${pluralOf("pages", qaRun.stats.found)} ${msg("analyzed")}`}
540-
</div>
541578
542-
<sl-tooltip
543-
content=${msg(
544-
"Match analysis compares pages during a crawl against their replay during an analysis run. A good match indicates that the crawl is probably good, whereas severe inconsistencies may indicate a bad crawl.",
545-
)}
546-
>
547-
<sl-icon class="text-base" name="info-circle"></sl-icon>
548-
</sl-tooltip>
549-
</div>
550-
</div>
551-
<figure>
552-
<btrix-table class="grid-cols-[min-content_1fr]">
553-
<btrix-table-head class="sr-only">
554-
<btrix-table-header-cell>
555-
${msg("Statistic")}
556-
</btrix-table-header-cell>
557-
<btrix-table-header-cell>
558-
${msg("Chart")}
559-
</btrix-table-header-cell>
560-
</btrix-table-head>
561-
<btrix-table-body>
562-
<btrix-table-row>
563-
<btrix-table-cell class="font-medium">
564-
${msg("Screenshots")}
565-
</btrix-table-cell>
566-
<btrix-table-cell class="p-0">
567-
${this.qaStats.value
568-
? this.renderMeter(
569-
qaRun.stats.found,
570-
this.qaStats.value.screenshotMatch,
571-
isRunning,
572-
)
573-
: this.renderMeter()}
574-
</btrix-table-cell>
575-
</btrix-table-row>
576-
<btrix-table-row>
577-
<btrix-table-cell class="font-medium">
578-
${msg("Text")}
579-
</btrix-table-cell>
580-
<btrix-table-cell class="p-0">
581-
${this.qaStats.value
582-
? this.renderMeter(
583-
qaRun.stats.found,
584-
this.qaStats.value.textMatch,
585-
isRunning,
586-
)
587-
: this.renderMeter()}
588-
</btrix-table-cell>
589-
</btrix-table-row>
590-
</btrix-table-body>
591-
</btrix-table>
592-
</figure>
593-
<figcaption slot="footer" class="mt-2">
594-
<dl class="flex flex-wrap items-center justify-end gap-4">
595-
${qaStatsThresholds.map(
596-
(threshold) => html`
597-
<div class="flex items-center gap-2">
598-
<dt
599-
class="size-4 flex-shrink-0 rounded"
600-
style="background-color: ${threshold.cssColor}"
601-
>
602-
<span class="sr-only">${threshold.lowerBoundary}</span>
603-
</dt>
604-
<dd>${threshold.label}</dd>
605-
</div>
606-
`,
579+
<sl-tooltip
580+
content=${msg(
581+
"Match analysis compares pages during a crawl against their replay during an analysis run. A good match indicates that the crawl is probably good, whereas severe inconsistencies may indicate a bad crawl.",
607582
)}
608-
</dl>
609-
</figcaption>
610-
</btrix-card>
583+
>
584+
<sl-icon class="text-base" name="info-circle"></sl-icon>
585+
</sl-tooltip>
586+
</div>
587+
</div>
588+
<figure>
589+
<btrix-table class="grid-cols-[min-content_1fr]">
590+
<btrix-table-head class="sr-only">
591+
<btrix-table-header-cell>
592+
${msg("Statistic")}
593+
</btrix-table-header-cell>
594+
<btrix-table-header-cell> ${msg("Chart")} </btrix-table-header-cell>
595+
</btrix-table-head>
596+
<btrix-table-body>
597+
<btrix-table-row>
598+
<btrix-table-cell class="font-medium">
599+
${msg("Screenshots")}
600+
</btrix-table-cell>
601+
<btrix-table-cell class="p-0">
602+
${this.qaStats.value
603+
? this.renderMeter(
604+
qaRun.stats.found,
605+
this.qaStats.value.screenshotMatch,
606+
isRunning,
607+
)
608+
: this.renderMeter()}
609+
</btrix-table-cell>
610+
</btrix-table-row>
611+
<btrix-table-row>
612+
<btrix-table-cell class="font-medium">
613+
${msg("Text")}
614+
</btrix-table-cell>
615+
<btrix-table-cell class="p-0">
616+
${this.qaStats.value
617+
? this.renderMeter(
618+
qaRun.stats.found,
619+
this.qaStats.value.textMatch,
620+
isRunning,
621+
)
622+
: this.renderMeter()}
623+
</btrix-table-cell>
624+
</btrix-table-row>
625+
</btrix-table-body>
626+
</btrix-table>
627+
</figure>
628+
<figcaption slot="footer" class="mt-2">
629+
<dl class="flex flex-wrap items-center justify-end gap-4">
630+
${qaStatsThresholds.map(
631+
(threshold) => html`
632+
<div class="flex items-center gap-2">
633+
<dt
634+
class="size-4 flex-shrink-0 rounded"
635+
style="background-color: ${threshold.cssColor}"
636+
>
637+
<span class="sr-only">${threshold.lowerBoundary}</span>
638+
</dt>
639+
<dd>${threshold.label}</dd>
640+
</div>
641+
`,
642+
)}
643+
</dl>
644+
</figcaption>
611645
`;
612646
}
613647

‎frontend/src/types/crawler.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,8 @@ type ArchivedItemBase = {
175175
activeQAStats: { done: number; found: number } | null;
176176
lastQAState: CrawlState | null;
177177
lastQAStarted: string | null;
178+
filePageCount?: number;
179+
errorPageCount?: number;
178180
};
179181

180182
export type Crawl = ArchivedItemBase &

0 commit comments

Comments
 (0)