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
This commit is contained in:
Tessa Walsh
GitHub
parent
aa961493fd
commit
f1274a6ffc
@ -168,6 +168,13 @@ export class ArchivedItemDetailQA extends TailwindElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
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`
|
return html`
|
||||||
<div class="mb-5 rounded-lg border p-2">
|
<div class="mb-5 rounded-lg border p-2">
|
||||||
<btrix-desc-list horizontal>
|
<btrix-desc-list horizontal>
|
||||||
@ -261,9 +268,40 @@ export class ArchivedItemDetailQA extends TailwindElement {
|
|||||||
<sl-divider></sl-divider>
|
<sl-divider></sl-divider>
|
||||||
|
|
||||||
<btrix-tab-group-panel name="pages" class="block">
|
<btrix-tab-group-panel name="pages" class="block">
|
||||||
${when(this.mostRecentNonFailedQARun && this.qaRuns, (qaRuns) =>
|
<btrix-card class="gap-y-1">
|
||||||
this.renderAnalysis(qaRuns),
|
<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>
|
<div>
|
||||||
<h4 class="mb-2 mt-4 text-lg leading-8">
|
<h4 class="mb-2 mt-4 text-lg leading-8">
|
||||||
@ -482,132 +520,128 @@ export class ArchivedItemDetailQA extends TailwindElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<btrix-card>
|
<div
|
||||||
<div slot="title" class="flex flex-wrap justify-between">
|
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 gap-y-1">
|
>
|
||||||
${msg("Page Match Analysis")}
|
<div class="flex flex-wrap items-center gap-x-3">
|
||||||
${when(this.qaRuns, (qaRuns) => {
|
${msg("HTML Page Match Analysis")}
|
||||||
const finishedQARuns = qaRuns.filter(({ state }) =>
|
${when(this.qaRuns, (qaRuns) => {
|
||||||
finishedCrawlStates.includes(state),
|
const finishedQARuns = qaRuns.filter(({ state }) =>
|
||||||
);
|
finishedCrawlStates.includes(state),
|
||||||
const latestFinishedSelected =
|
);
|
||||||
this.qaRunId === finishedQARuns[0]?.id;
|
const latestFinishedSelected =
|
||||||
|
this.qaRunId === finishedQARuns[0]?.id;
|
||||||
|
|
||||||
const finishedAndRunningQARuns = qaRuns.filter(
|
const finishedAndRunningQARuns = qaRuns.filter(
|
||||||
({ state }) =>
|
({ state }) =>
|
||||||
finishedCrawlStates.includes(state) ||
|
finishedCrawlStates.includes(state) ||
|
||||||
QA_RUNNING_STATES.includes(state),
|
QA_RUNNING_STATES.includes(state),
|
||||||
);
|
);
|
||||||
const mostRecentSelected =
|
const mostRecentSelected =
|
||||||
this.qaRunId === finishedAndRunningQARuns[0]?.id;
|
this.qaRunId === finishedAndRunningQARuns[0]?.id;
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div>
|
<div>
|
||||||
<sl-tooltip
|
<sl-tooltip
|
||||||
content=${mostRecentSelected
|
content=${mostRecentSelected
|
||||||
? msg("You’re viewing the latest analysis run results.")
|
? msg("You’re viewing the latest analysis run results.")
|
||||||
: msg(
|
: msg("You’re viewing results from an older analysis run.")}
|
||||||
"You’re viewing results from an older analysis run.",
|
>
|
||||||
)}
|
<sl-tag
|
||||||
|
size="small"
|
||||||
|
variant=${mostRecentSelected ? "success" : "warning"}
|
||||||
>
|
>
|
||||||
<sl-tag
|
${mostRecentSelected
|
||||||
size="small"
|
? msg("Current")
|
||||||
variant=${mostRecentSelected ? "success" : "warning"}
|
: latestFinishedSelected
|
||||||
>
|
? msg("Last Finished")
|
||||||
${mostRecentSelected
|
: msg("Outdated")}
|
||||||
? msg("Current")
|
</sl-tag>
|
||||||
: latestFinishedSelected
|
</sl-tooltip>
|
||||||
? msg("Last Finished")
|
<btrix-qa-run-dropdown
|
||||||
: msg("Outdated")}
|
.items=${finishedAndRunningQARuns}
|
||||||
</sl-tag>
|
selectedId=${this.qaRunId || ""}
|
||||||
</sl-tooltip>
|
@btrix-select=${(e: CustomEvent<SelectDetail>) =>
|
||||||
<btrix-qa-run-dropdown
|
(this.qaRunId = e.detail.item.id)}
|
||||||
.items=${finishedAndRunningQARuns}
|
></btrix-qa-run-dropdown>
|
||||||
selectedId=${this.qaRunId || ""}
|
</div>
|
||||||
@btrix-select=${(e: CustomEvent<SelectDetail>) =>
|
`;
|
||||||
(this.qaRunId = e.detail.item.id)}
|
})}
|
||||||
></btrix-qa-run-dropdown>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 text-neutral-500">
|
|
||||||
<div class="text-sm font-normal">
|
|
||||||
${qaRun.state === "starting"
|
|
||||||
? msg("Analysis starting")
|
|
||||||
: `${formatNumber(qaRun.stats.done)}/${formatNumber(qaRun.stats.found)}
|
|
||||||
${pluralOf("pages", qaRun.stats.found)} ${msg("analyzed")}`}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<sl-tooltip
|
|
||||||
content=${msg(
|
|
||||||
"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.",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<sl-icon class="text-base" name="info-circle"></sl-icon>
|
|
||||||
</sl-tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<figure>
|
<div class="flex items-center gap-2 text-neutral-500">
|
||||||
<btrix-table class="grid-cols-[min-content_1fr]">
|
<div class="text-sm font-normal">
|
||||||
<btrix-table-head class="sr-only">
|
${qaRun.state === "starting"
|
||||||
<btrix-table-header-cell>
|
? msg("Analysis starting")
|
||||||
${msg("Statistic")}
|
: `${formatNumber(qaRun.stats.done)}/${formatNumber(qaRun.stats.found)}
|
||||||
</btrix-table-header-cell>
|
${pluralOf("pages", qaRun.stats.found)} ${msg("analyzed")}`}
|
||||||
<btrix-table-header-cell>
|
</div>
|
||||||
${msg("Chart")}
|
|
||||||
</btrix-table-header-cell>
|
<sl-tooltip
|
||||||
</btrix-table-head>
|
content=${msg(
|
||||||
<btrix-table-body>
|
"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.",
|
||||||
<btrix-table-row>
|
|
||||||
<btrix-table-cell class="font-medium">
|
|
||||||
${msg("Screenshots")}
|
|
||||||
</btrix-table-cell>
|
|
||||||
<btrix-table-cell class="p-0">
|
|
||||||
${this.qaStats.value
|
|
||||||
? this.renderMeter(
|
|
||||||
qaRun.stats.found,
|
|
||||||
this.qaStats.value.screenshotMatch,
|
|
||||||
isRunning,
|
|
||||||
)
|
|
||||||
: this.renderMeter()}
|
|
||||||
</btrix-table-cell>
|
|
||||||
</btrix-table-row>
|
|
||||||
<btrix-table-row>
|
|
||||||
<btrix-table-cell class="font-medium">
|
|
||||||
${msg("Text")}
|
|
||||||
</btrix-table-cell>
|
|
||||||
<btrix-table-cell class="p-0">
|
|
||||||
${this.qaStats.value
|
|
||||||
? this.renderMeter(
|
|
||||||
qaRun.stats.found,
|
|
||||||
this.qaStats.value.textMatch,
|
|
||||||
isRunning,
|
|
||||||
)
|
|
||||||
: this.renderMeter()}
|
|
||||||
</btrix-table-cell>
|
|
||||||
</btrix-table-row>
|
|
||||||
</btrix-table-body>
|
|
||||||
</btrix-table>
|
|
||||||
</figure>
|
|
||||||
<figcaption slot="footer" class="mt-2">
|
|
||||||
<dl class="flex flex-wrap items-center justify-end gap-4">
|
|
||||||
${qaStatsThresholds.map(
|
|
||||||
(threshold) => html`
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<dt
|
|
||||||
class="size-4 flex-shrink-0 rounded"
|
|
||||||
style="background-color: ${threshold.cssColor}"
|
|
||||||
>
|
|
||||||
<span class="sr-only">${threshold.lowerBoundary}</span>
|
|
||||||
</dt>
|
|
||||||
<dd>${threshold.label}</dd>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
)}
|
)}
|
||||||
</dl>
|
>
|
||||||
</figcaption>
|
<sl-icon class="text-base" name="info-circle"></sl-icon>
|
||||||
</btrix-card>
|
</sl-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<figure>
|
||||||
|
<btrix-table class="grid-cols-[min-content_1fr]">
|
||||||
|
<btrix-table-head class="sr-only">
|
||||||
|
<btrix-table-header-cell>
|
||||||
|
${msg("Statistic")}
|
||||||
|
</btrix-table-header-cell>
|
||||||
|
<btrix-table-header-cell> ${msg("Chart")} </btrix-table-header-cell>
|
||||||
|
</btrix-table-head>
|
||||||
|
<btrix-table-body>
|
||||||
|
<btrix-table-row>
|
||||||
|
<btrix-table-cell class="font-medium">
|
||||||
|
${msg("Screenshots")}
|
||||||
|
</btrix-table-cell>
|
||||||
|
<btrix-table-cell class="p-0">
|
||||||
|
${this.qaStats.value
|
||||||
|
? this.renderMeter(
|
||||||
|
qaRun.stats.found,
|
||||||
|
this.qaStats.value.screenshotMatch,
|
||||||
|
isRunning,
|
||||||
|
)
|
||||||
|
: this.renderMeter()}
|
||||||
|
</btrix-table-cell>
|
||||||
|
</btrix-table-row>
|
||||||
|
<btrix-table-row>
|
||||||
|
<btrix-table-cell class="font-medium">
|
||||||
|
${msg("Text")}
|
||||||
|
</btrix-table-cell>
|
||||||
|
<btrix-table-cell class="p-0">
|
||||||
|
${this.qaStats.value
|
||||||
|
? this.renderMeter(
|
||||||
|
qaRun.stats.found,
|
||||||
|
this.qaStats.value.textMatch,
|
||||||
|
isRunning,
|
||||||
|
)
|
||||||
|
: this.renderMeter()}
|
||||||
|
</btrix-table-cell>
|
||||||
|
</btrix-table-row>
|
||||||
|
</btrix-table-body>
|
||||||
|
</btrix-table>
|
||||||
|
</figure>
|
||||||
|
<figcaption slot="footer" class="mt-2">
|
||||||
|
<dl class="flex flex-wrap items-center justify-end gap-4">
|
||||||
|
${qaStatsThresholds.map(
|
||||||
|
(threshold) => html`
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<dt
|
||||||
|
class="size-4 flex-shrink-0 rounded"
|
||||||
|
style="background-color: ${threshold.cssColor}"
|
||||||
|
>
|
||||||
|
<span class="sr-only">${threshold.lowerBoundary}</span>
|
||||||
|
</dt>
|
||||||
|
<dd>${threshold.label}</dd>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
)}
|
||||||
|
</dl>
|
||||||
|
</figcaption>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -175,6 +175,8 @@ type ArchivedItemBase = {
|
|||||||
activeQAStats: { done: number; found: number } | null;
|
activeQAStats: { done: number; found: number } | null;
|
||||||
lastQAState: CrawlState | null;
|
lastQAState: CrawlState | null;
|
||||||
lastQAStarted: string | null;
|
lastQAStarted: string | null;
|
||||||
|
filePageCount?: number;
|
||||||
|
errorPageCount?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Crawl = ArchivedItemBase &
|
export type Crawl = ArchivedItemBase &
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user