Skip to content

Commit e6d647f

Browse files
SuaYooSuaYoo
committed
show resources
1 parent 9f5d11c commit e6d647f

File tree

2 files changed

+78
-52
lines changed

2 files changed

+78
-52
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import queryString from "query-string";
1515

1616
import stylesheet from "./archived-item-qa.stylesheet.css";
1717
import type * as QATypes from "./types";
18-
import { renderResources } from "./ui/resources";
18+
import { renderResourceDiff, renderResources } from "./ui/resources";
1919
import { renderImage, renderScreenshots } from "./ui/screenshots";
2020
import { renderSeverityBadge } from "./ui/severityBadge";
2121
import { renderText, renderTextDiff } from "./ui/text";
@@ -1013,7 +1013,9 @@ export class ArchivedItemQA extends BtrixElement {
10131013
? renderTextDiff(this.crawlData, this.qaData)
10141014
: renderText(this.crawlData);
10151015
case "resources":
1016-
return renderResources(this.crawlData, this.qaData);
1016+
return this.analyzed
1017+
? renderResourceDiff(this.crawlData, this.qaData)
1018+
: renderResources(this.crawlData);
10171019
case "replay":
10181020
return this.renderReplay();
10191021
default:

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

Lines changed: 74 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,21 @@ import { tw } from "@/utils/tailwind";
1111

1212
const TOTAL = "Total";
1313

14-
function renderDiff(
14+
function resourceTable(
1515
crawlResources: ResourcesPayload["resources"],
16-
qaResources: ResourcesPayload["resources"],
16+
qaResources?: ResourcesPayload["resources"],
1717
) {
1818
const columns = [
1919
msg("Resource Type"),
2020
msg("Good During Crawl"),
2121
msg("Bad During Crawl"),
22-
msg("Good During Analysis"),
23-
msg("Bad During Analysis"),
2422
];
25-
const rows = [
23+
24+
if (qaResources) {
25+
columns.push(msg("Good During Analysis"), msg("Bad During Analysis"));
26+
}
27+
28+
let rows = [
2629
[
2730
html`<span class="font-semibold capitalize"
2831
>${msg("All Resources")}</span
@@ -33,6 +36,11 @@ function renderDiff(
3336
html`<span class="font-semibold"
3437
>${localize.number(crawlResources[TOTAL].bad)}</span
3538
>`,
39+
],
40+
];
41+
42+
if (qaResources) {
43+
rows[0].push(
3644
html`<span
3745
class="${clsx(
3846
"font-semibold",
@@ -53,35 +61,38 @@ function renderDiff(
5361
>
5462
${localize.number(qaResources[TOTAL].bad)}
5563
</span>`,
56-
],
57-
...Object.keys(qaResources)
58-
.filter((key) => key !== TOTAL)
59-
.map((key) => [
60-
html`<span class="capitalize">${key}</span>`,
61-
html`${Object.prototype.hasOwnProperty.call(crawlResources, key)
62-
? localize.number(crawlResources[key].good)
63-
: 0}`,
64-
html`${Object.prototype.hasOwnProperty.call(crawlResources, key)
65-
? localize.number(crawlResources[key].bad)
66-
: 0}`,
67-
html`<span
68-
class=${Object.prototype.hasOwnProperty.call(crawlResources, key) &&
69-
crawlResources[key].good === qaResources[key].good
70-
? tw`text-neutral-400`
71-
: tw`text-danger`}
72-
>
73-
${localize.number(qaResources[key].good)}
74-
</span>`,
75-
html`<span
76-
class=${Object.prototype.hasOwnProperty.call(crawlResources, key) &&
77-
crawlResources[key].bad === qaResources[key].bad
78-
? tw`text-neutral-400`
79-
: tw`font-semibold text-danger`}
80-
>
81-
${localize.number(qaResources[key].bad)}
82-
</span>`,
83-
]),
84-
];
64+
);
65+
rows = [
66+
...rows,
67+
...Object.keys(qaResources)
68+
.filter((key) => key !== TOTAL)
69+
.map((key) => [
70+
html`<span class="capitalize">${key}</span>`,
71+
html`${Object.prototype.hasOwnProperty.call(crawlResources, key)
72+
? localize.number(crawlResources[key].good)
73+
: 0}`,
74+
html`${Object.prototype.hasOwnProperty.call(crawlResources, key)
75+
? localize.number(crawlResources[key].bad)
76+
: 0}`,
77+
html`<span
78+
class=${Object.prototype.hasOwnProperty.call(crawlResources, key) &&
79+
crawlResources[key].good === qaResources[key].good
80+
? tw`text-neutral-400`
81+
: tw`text-danger`}
82+
>
83+
${localize.number(qaResources[key].good)}
84+
</span>`,
85+
html`<span
86+
class=${Object.prototype.hasOwnProperty.call(crawlResources, key) &&
87+
crawlResources[key].bad === qaResources[key].bad
88+
? tw`text-neutral-400`
89+
: tw`font-semibold text-danger`}
90+
>
91+
${localize.number(qaResources[key].bad)}
92+
</span>`,
93+
]),
94+
];
95+
}
8596

8697
return html`
8798
<btrix-data-table
@@ -92,7 +103,33 @@ function renderDiff(
92103
`;
93104
}
94105

95-
export function renderResources(crawlData: ReplayData, qaData: ReplayData) {
106+
function resourceLegend() {
107+
return html`
108+
<dl>
109+
<div class="flex gap-1">
110+
<dt class="font-semibold">${msg("Good:")}</dt>
111+
<dd>${msg("Success (2xx) and Redirection (3xx) status codes")}</dd>
112+
</div>
113+
<div class="flex gap-1">
114+
<dt class="font-semibold">${msg("Bad:")}</dt>
115+
<dd>
116+
${msg("Client error (4xx) and Server error (5xx) status codes")}
117+
</dd>
118+
</div>
119+
</dl>
120+
`;
121+
}
122+
123+
export function renderResources(data: ReplayData) {
124+
return html`<div class="flex h-full flex-col">
125+
<div class="flex-1 overflow-auto overscroll-contain">
126+
${data?.resources ? resourceTable(data.resources) : renderSpinner()}
127+
</div>
128+
<footer class="pt-2 text-xs text-neutral-600">${resourceLegend()}</footer>
129+
</div>`;
130+
}
131+
132+
export function renderResourceDiff(crawlData: ReplayData, qaData: ReplayData) {
96133
// const noData = html`<div
97134
// class="m-4 flex flex-col items-center justify-center gap-2 text-xs text-neutral-500"
98135
// >
@@ -104,23 +141,10 @@ export function renderResources(crawlData: ReplayData, qaData: ReplayData) {
104141
<div class="flex h-full flex-col">
105142
<div class="flex-1 overflow-auto overscroll-contain">
106143
${crawlData?.resources && qaData?.resources
107-
? renderDiff(crawlData.resources, qaData.resources)
144+
? resourceTable(crawlData.resources, qaData.resources)
108145
: renderSpinner()}
109146
</div>
110-
<footer class="pt-2 text-xs text-neutral-600">
111-
<dl>
112-
<div class="flex gap-1">
113-
<dt class="font-semibold">${msg("Good:")}</dt>
114-
<dd>${msg("Success (2xx) and Redirection (3xx) status codes")}</dd>
115-
</div>
116-
<div class="flex gap-1">
117-
<dt class="font-semibold">${msg("Bad:")}</dt>
118-
<dd>
119-
${msg("Client error (4xx) and Server error (5xx) status codes")}
120-
</dd>
121-
</div>
122-
</dl>
123-
</footer>
147+
<footer class="pt-2 text-xs text-neutral-600">${resourceLegend()}</footer>
124148
</div>
125149
`;
126150
}

0 commit comments

Comments
 (0)