tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix watch crawl running state (#249)

Browse Source
This commit is contained in:
sua yoo 2022-06-07 12:04:35 -07:00 committed by GitHub
parent ae51114a45
commit fa4b71288c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/pages/archive/crawl-detail.ts
View File

@ -59,7 +59,7 @@ export class CrawlDetail extends LiteElement {
// TODO localize // TODO localize
private numberFormatter = new Intl.NumberFormat(); private numberFormatter = new Intl.NumberFormat();
private get isRunning(): boolean | null { private get isActive(): boolean | null {
if (!this.crawl) return null; if (!this.crawl) return null;
return this.crawl.state === "running" || this.crawl.state === "starting"; return this.crawl.state === "running" || this.crawl.state === "starting";
@ -198,7 +198,7 @@ export class CrawlDetail extends LiteElement {
<nav class="border-b md:border-b-0"> <nav class="border-b md:border-b-0">
<ul class="flex flex-row md:flex-col" role="menu"> <ul class="flex flex-row md:flex-col" role="menu">
${renderNavItem({ section: "overview", label: msg("Overview") })} ${renderNavItem({ section: "overview", label: msg("Overview") })}
${this.isRunning ${this.isActive
? renderNavItem({ ? renderNavItem({
section: "watch", section: "watch",
label: msg("Watch Crawl"), label: msg("Watch Crawl"),
@ -226,11 +226,11 @@ export class CrawlDetail extends LiteElement {
)} )}
</h2> </h2>
<div <div
class="grid gap-2 grid-flow-col ${this.isRunning class="grid gap-2 grid-flow-col ${this.isActive
? "justify-between" ? "justify-between"
: "justify-end"}" : "justify-end"}"
> >
${this.isRunning ${this.isActive
? html` ? html`
<sl-button-group> <sl-button-group>
<sl-button <sl-button
@ -281,7 +281,7 @@ export class CrawlDetail extends LiteElement {
return html` return html`
<sl-dropdown placement="bottom-end" distance="4"> <sl-dropdown placement="bottom-end" distance="4">
<sl-button slot="trigger" size="small" caret <sl-button slot="trigger" size="small" caret
>${this.isRunning >${this.isActive
? html`<sl-icon name="three-dots"></sl-icon>` ? html`<sl-icon name="three-dots"></sl-icon>`
: msg("Actions")}</sl-button : msg("Actions")}</sl-button
> >
@ -334,7 +334,7 @@ export class CrawlDetail extends LiteElement {
? html` ? html`
<div class="flex items-baseline justify-between"> <div class="flex items-baseline justify-between">
<div <div
class="whitespace-nowrap capitalize${this.isRunning class="whitespace-nowrap capitalize${this.isActive
? " motion-safe:animate-pulse" ? " motion-safe:animate-pulse"
: ""}" : ""}"
> >
@ -343,7 +343,7 @@ export class CrawlDetail extends LiteElement {
? "text-red-500" ? "text-red-500"
: this.crawl.state === "complete" : this.crawl.state === "complete"
? "text-emerald-500" ? "text-emerald-500"
: this.isRunning : this.isActive
? "text-purple-500" ? "text-purple-500"
: "text-zinc-300"}" : "text-zinc-300"}"
style="font-size: 10px; vertical-align: 2px" style="font-size: 10px; vertical-align: 2px"
@ -363,7 +363,7 @@ export class CrawlDetail extends LiteElement {
${this.crawl?.stats ${this.crawl?.stats
? html` ? html`
<span <span
class="font-mono tracking-tighter${this.isRunning class="font-mono tracking-tighter${this.isActive
? " text-purple-600" ? " text-purple-600"
: ""}" : ""}"
> >
@ -413,12 +413,14 @@ export class CrawlDetail extends LiteElement {
private renderWatch() { private renderWatch() {
if (!this.authState || !this.crawl) return ""; if (!this.authState || !this.crawl) return "";
const isStarting = this.crawl.state === "starting";
const isRunning = this.crawl.state === "running";
const authToken = this.authState.headers.Authorization.split(" ")[1]; const authToken = this.authState.headers.Authorization.split(" ")[1];
return html` return html`
<header class="flex justify-between"> <header class="flex justify-between">
<h3 class="text-lg font-medium mb-2">${msg("Watch Crawl")}</h3> <h3 class="text-lg font-medium mb-2">${msg("Watch Crawl")}</h3>
${this.isRunning && document.fullscreenEnabled ${isRunning && document.fullscreenEnabled
? html` ? html`
<sl-icon-button <sl-icon-button
name="arrows-fullscreen" name="arrows-fullscreen"
@ -429,7 +431,13 @@ export class CrawlDetail extends LiteElement {
: ""} : ""}
</header> </header>
${this.isRunning ${isStarting
? html`<div class="rounded border p-3">
<p class="text-sm text-neutral-600">
${msg("Crawl is starting...")}
</p>
</div>`
: isRunning
? html` ? html`
<div id="screencast-crawl"> <div id="screencast-crawl">
<btrix-screencast <btrix-screencast
@ -443,15 +451,15 @@ export class CrawlDetail extends LiteElement {
: html` : html`
<div class="rounded border bg-neutral-50 p-3"> <div class="rounded border bg-neutral-50 p-3">
<p class="text-sm text-neutral-600"> <p class="text-sm text-neutral-600">
${msg( ${msg("Crawl is not running.")}
html`Crawl is not running. ${this.hasFiles
<a ? html`<a
href=${`${this.crawlsBaseUrl}/crawl/${this.crawlId}#replay`} href=${`${this.crawlsBaseUrl}/crawl/${this.crawlId}#replay`}
class="text-primary hover:underline" class="text-primary hover:underline"
@click=${() => (this.sectionName = "replay")} @click=${() => (this.sectionName = "replay")}
>View replay</a >View replay</a
>` >`
)} : ""}
</p> </p>
</div> </div>
`} `}
@ -710,7 +718,7 @@ export class CrawlDetail extends LiteElement {
try { try {
this.crawl = await this.getCrawl(); this.crawl = await this.getCrawl();
if (this.isRunning) { if (this.isActive) {
// Start timer for next poll // Start timer for next poll
this.timerId = window.setTimeout(() => { this.timerId = window.setTimeout(() => {
this.fetchCrawl(); this.fetchCrawl();