feat: Handle paused state + workflow performance improvements

backend/btrixcloud/operator/crawls.py

@@ -1494,6 +1494,18 @@ async def update_crawl_state(
         # all expected pods are either done or failed
         all_completed = (num_done + num_failed) >= status.scale
 
+        # check paused
+        if not all_completed and crawl.paused_at and status.stopReason == "paused":
+            num_paused = status_count.get("interrupted", 0)
+            if (num_paused + num_failed) >= status.scale:
+                # now fully paused!
+                # remove pausing key and set state to paused
+                await redis.delete(f"{crawl.id}:paused")
+                await self.set_state(
+                    "paused", status, crawl, allowed_from=RUNNING_AND_WAITING_STATES
+                )
+                return status
+
         # if at least one is done according to redis, consider crawl successful
         # ensure pod successfully exited as well
         # pylint: disable=chained-comparison
@@ -1526,17 +1538,6 @@ async def update_crawl_state(
             else:
                 await self.fail_crawl(crawl, status, pods, stats)
 
-        # check paused
-        elif crawl.paused_at and status.stopReason == "paused":
-            num_paused = status_count.get("interrupted", 0)
-            if (num_paused + num_failed) >= status.scale:
-                # now fully paused!
-                # remove pausing key and set state to paused
-                await redis.delete(f"{crawl.id}:paused")
-                await self.set_state(
-                    "paused", status, crawl, allowed_from=RUNNING_AND_WAITING_STATES
-                )
-
         # check for other statuses, default to "running"
         else:
             new_status: TYPE_RUNNING_STATES = "running"

frontend/docs/docs/user-guide/running-crawl.md

@@ -1,6 +1,6 @@
 # Modifying Running Crawls
 
-Running crawls can be modified from the crawl workflow **Latest Crawl** tab. You may want to modify a runnning crawl if you find that the workflow is crawling pages that you didn't intend to archive, or if you want a boost of speed.
+Running crawls can be modified from the crawl workflow **Latest Crawl** tab. You may want to modify a running crawl if you find that the workflow is crawling pages that you didn't intend to archive, or if you want a boost of speed.
 
 ## Crawl Workflow Status
 
@@ -12,7 +12,8 @@ A crawl workflow that is in progress can be in one of the following states:
 | <span class="status-waiting">:btrix-status-dot: Starting</span>       | New resources are starting up. Crawling should begin shortly.|
 | <span class="status-success">:btrix-status-dot: Running</span>        | The crawler is finding and capturing pages! |
 | <span class="status-waiting">:btrix-status-dot: Stopping</span> | A user has instructed this workflow to stop. Finishing capture of the current pages.|
-| <span class="status-waiting">:btrix-status-dot: Finishing Crawl</span> | The workflow has finished crawling and data is being packaged into WACZ files.|
+| <span class="status-waiting">:btrix-status-dot: Finishing Downloads</span> | The workflow has finished crawling and is finalizing downloads.|
+| <span class="status-waiting">:btrix-status-dot: Generating WACZ</span> | Data is being packaged into WACZ files.|
 | <span class="status-waiting">:btrix-status-dot: Uploading WACZ</span> | WACZ files have been created and are being transferred to storage.|
 
 ## Watch Crawl

frontend/src/components/detail-page-title.ts

@@ -70,7 +70,7 @@ export class DetailPageTitle extends TailwindElement {
   private renderIcon() {
     if (!this.item?.state) return;
 
-    const crawlStatus = CrawlStatus.getContent(this.item.state, this.item.type);
+    const crawlStatus = CrawlStatus.getContent(this.item);
 
     let icon = html`<sl-tooltip
       content=${msg(str`Crawl: ${crawlStatus.label}`)}

frontend/src/components/not-found.ts

@@ -3,28 +3,26 @@ import { html, nothing } from "lit";
 import { customElement } from "lit/decorators.js";
 
 import { BtrixElement } from "@/classes/BtrixElement";
+import { pageError } from "@/layouts/pageError";
 
 @localized()
 @customElement("btrix-not-found")
 export class NotFound extends BtrixElement {
   render() {
     return html`
-      <div class="text-center">
-        <p class="my-4 border-b py-4 text-xl leading-none text-neutral-500">
-          ${msg("Sorry, we couldn’t find that page")}
-        </p>
-        <p class="text-neutral-600">
-          ${msg("Check the URL to make sure you’ve entered it correctly.")}
-        </p>
-        <div class="my-4">
-          <sl-button href="/" @click=${this.navigate.link} size="small"
-            >${msg("Go to Home")}</sl-button
-          >
-        </div>
-        <p class="text-neutral-500">
+      ${pageError({
+        heading: msg("Sorry, we couldn’t find that page"),
+        detail: msg("Check the URL to make sure you’ve entered it correctly."),
+        primaryAction: html`<sl-button
+          href="/"
+          @click=${this.navigate.link}
+          size="small"
+          >${msg("Go to Home")}</sl-button
+        >`,
+        secondaryAction: html`
           ${msg("Did you click a link to get here?")}
           <button
-            class="text-cyan-500 transition-colors hover:text-cyan-600"
+            class="text-blue-500 transition-colors hover:text-blue-600"
             @click=${() => {
               window.history.back();
             }}
@@ -42,8 +40,8 @@ export class NotFound extends BtrixElement {
                   ${msg("Report a Broken Link")}
                 </btrix-link>
               `}
-        </p>
-      </div>
+        `,
+      })}
     `;
   }
 }

frontend/src/components/ui/alert.ts

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 
 import { TailwindElement } from "@/classes/TailwindElement";
 
@@ -18,28 +18,42 @@ export class Alert extends TailwindElement {
   @property({ type: String })
   variant: "success" | "warning" | "danger" | "info" = "info";
 
+  @state()
+  open = true;
+
   static styles = css`
     :host {
       display: block;
     }
   `;
 
+  public hide() {
+    // TODO Animate for nicer transition
+    this.open = false;
+  }
+
+  public show() {
+    // TODO Animate for nicer transition
+    this.open = true;
+  }
+
   render() {
-    return html`
-      <div
-        class="${clsx(
-          "px-3 py-2 rounded border",
-          {
-            success: "bg-success-50 text-success-800 border-success-200",
-            warning: "bg-warning-50 text-warning-800 border-warning-200",
-            danger: "bg-danger-50 text-danger-800 border-danger-200",
-            info: "bg-primary-50 text-primary-800 border-primary-200",
-          }[this.variant],
-        )}"
-        role="alert"
-      >
-        <slot></slot>
-      </div>
-    `;
+    if (!this.open) return;
+
+    return html`<div
+      class="${clsx(
+        "px-3 py-2 rounded-lg border",
+        {
+          success: "bg-success-50 text-success-800 border-success-200",
+          warning: "bg-warning-50 text-warning-800 border-warning-200",
+          danger: "bg-danger-50 text-danger-800 border-danger-200",
+          info: "bg-primary-50 text-primary-600 border-primary-100",
+        }[this.variant],
+      )}"
+      role="alert"
+      part="base"
+    >
+      <slot></slot>
+    </div>`;
   }
 }

frontend/src/components/ui/badge.ts

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -38,17 +39,19 @@ export class Badge extends TailwindElement {
   render() {
     return html`
       <span
-        class="h-4.5 ${{
-          success: tw`bg-success-500 text-neutral-0`,
-          warning: tw`bg-warning-600 text-neutral-0`,
-          danger: tw`bg-danger-500 text-neutral-0`,
-          neutral: tw`bg-neutral-100 text-neutral-600`,
-          "high-contrast": tw`bg-neutral-600 text-neutral-0`,
-          primary: tw`bg-primary text-neutral-0`,
-          blue: tw`bg-cyan-50 text-neutral-600`,
-        }[
-          this.variant
-        ]} inline-flex items-center justify-center rounded-sm px-2 align-[1px] text-xs"
+        class=${clsx(
+          tw`h-4.5 inline-flex items-center justify-center rounded-sm px-2 align-[1px] text-xs`,
+          {
+            success: tw`bg-success-500 text-neutral-0`,
+            warning: tw`bg-warning-600 text-neutral-0`,
+            danger: tw`bg-danger-500 text-neutral-0`,
+            neutral: tw`bg-neutral-100 text-neutral-600`,
+            "high-contrast": tw`bg-neutral-600 text-neutral-0`,
+            primary: tw`bg-primary text-neutral-0`,
+            blue: tw`bg-cyan-50 text-cyan-600`,
+          }[this.variant],
+        )}
+        part="base"
       >
         <slot></slot>
       </span>

frontend/src/components/ui/button.ts

@@ -38,6 +38,9 @@ export class Button extends TailwindElement {
   @property({ type: String })
   href?: string;
 
+  @property({ type: String })
+  download?: string;
+
   @property({ type: Boolean })
   raised = false;
 
@@ -63,32 +66,49 @@ export class Button extends TailwindElement {
     return html`<${tag}
       type=${this.type === "submit" ? "submit" : "button"}
       class=${clsx(
-        tw`flex cursor-pointer items-center justify-center gap-2 text-center font-medium outline-3 outline-offset-1 outline-primary transition focus-visible:outline disabled:cursor-not-allowed disabled:text-neutral-300`,
+        this.disabled ? tw`cursor-not-allowed opacity-50` : tw`cursor-pointer`,
+        tw`flex items-center justify-center gap-2 text-center font-medium outline-3 outline-offset-1 outline-primary transition focus-visible:outline`,
         {
           "x-small": tw`min-h-4 min-w-4 text-sm`,
           small: tw`min-h-6 min-w-6 rounded-md text-base`,
           medium: tw`min-h-8 min-w-8 rounded-sm text-lg`,
         }[this.size],
-        this.raised &&
-          tw`shadow ring-1 ring-stone-500/20 hover:shadow-stone-800/20 hover:ring-stone-800/20`,
+        this.raised && [
+          tw`shadow ring-1 ring-stone-500/20`,
+          !this.disabled &&
+            tw`hover:shadow-stone-800/20 hover:ring-stone-800/20`,
+        ],
         this.filled
           ? [
               tw`text-white`,
               {
-                neutral: tw`border-primary-800 bg-primary-500 shadow-primary-800/20 hover:bg-primary-600`,
-                danger: tw`shadow-danger-800/20 border-danger-800 bg-danger-500 hover:bg-danger-600`,
+                neutral: [
+                  tw`border-primary-800 bg-primary-500 shadow-primary-800/20`,
+                  !this.disabled && tw`hover:bg-primary-600`,
+                ],
+                danger: [
+                  tw`shadow-danger-800/20 border-danger-800 bg-danger-500`,
+                  !this.disabled && tw`hover:bg-danger-600`,
+                ],
               }[this.variant],
             ]
           : [
               this.raised && tw`bg-white`,
               {
-                neutral: tw`border-gray-300 text-gray-600 hover:text-primary-600`,
-                danger: tw`shadow-danger-800/20 border-danger-300 bg-danger-50 text-danger-600 hover:bg-danger-100`,
+                neutral: [
+                  tw`border-gray-300 text-gray-600`,
+                  !this.disabled && tw`hover:text-primary-500`,
+                ],
+                danger: [
+                  tw`shadow-danger-800/20 border-danger-300 bg-danger-50 text-danger-600`,
+                  !this.disabled && tw`hover:bg-danger-100`,
+                ],
               }[this.variant],
             ],
       )}
       ?disabled=${this.disabled}
       href=${ifDefined(this.href)}
+      download=${ifDefined(this.download)}
       aria-label=${ifDefined(this.label)}
       @click=${this.handleClick}
     >

frontend/src/components/ui/copy-button.ts

@@ -4,6 +4,7 @@ import { customElement, property } from "lit/decorators.js";
 
 import { TailwindElement } from "@/classes/TailwindElement";
 import { ClipboardController } from "@/controllers/clipboard";
+import { tw } from "@/utils/tailwind";
 
 /**
  * Copy text to clipboard on click
@@ -69,7 +70,7 @@ export class CopyButton extends TailwindElement {
                 ? this.name
                 : "copy"}
             label=${msg("Copy to clipboard")}
-            class="size-3.5"
+            class=${this.size === "medium" ? tw`size-4` : tw`size-3.5`}
           ></sl-icon>
         </btrix-button>
       </sl-tooltip>

frontend/src/components/ui/desc-list.ts

@@ -30,7 +30,7 @@ export class DescListItem extends LitElement {
       color: var(--sl-color-neutral-500);
       font-size: var(--sl-font-size-x-small);
       line-height: 1rem;
-      margin: 0 0 var(--sl-spacing-2x-small) 0;
+      margin: 0 0 var(--sl-spacing-3x-small) 0;
     }
 
     dd {
@@ -40,8 +40,8 @@ export class DescListItem extends LitElement {
       font-size: var(--sl-font-size-medium);
       font-family: var(--font-monostyle-family);
       font-variation-settings: var(--font-monostyle-variation);
-      line-height: 1rem;
-      min-height: calc(1rem + var(--sl-spacing-2x-small));
+      line-height: 1.5rem;
+      min-height: 1.5rem;
     }
 
     .item {
@@ -94,7 +94,7 @@ export class DescList extends LitElement {
       display: inline-block;
       flex: 1 0 0;
       min-width: min-content;
-      padding-top: var(--sl-spacing-2x-small);
+      padding-top: var(--sl-spacing-x-small);
     }
 
     .horizontal ::slotted(btrix-desc-list-item)::before {