fix: Watch tab crawl state consistency (#2060)

- Fixes empty watch tab during some active states - Disables exclusion and browser window editing while a crawl is stopping - Refactors frontend crawl states to match backend
webrecorder · Sep 10, 2024 · 55f3b8a · 55f3b8a
1 parent b58d367
commit 55f3b8a
Show file tree

Hide file tree

Showing 15 changed files with 297 additions and 247 deletions.
diff --git a/frontend/src/features/archived-items/crawl-status.ts b/frontend/src/features/archived-items/crawl-status.ts
@@ -5,7 +5,7 @@ import { customElement, property } from "lit/decorators.js";
 import startCase from "lodash/fp/startCase";
 
 import { TailwindElement } from "@/classes/TailwindElement";
-import type { CrawlState } from "@/types/crawler";
+import type { CrawlState } from "@/types/crawlState";
 import { animatePulse } from "@/utils/css";
 
 type CrawlType = "crawl" | "upload" | "qa";

diff --git a/frontend/src/features/archived-items/item-list-controls.ts b/frontend/src/features/archived-items/item-list-controls.ts
@@ -7,8 +7,6 @@ import { ifDefined } from "lit/directives/if-defined.js";
 
 import { TailwindElement } from "@/classes/TailwindElement";
 import { type SelectEvent } from "@/components/ui/search-combobox";
-import { CrawlStatus } from "@/features/archived-items/crawl-status";
-import { finishedCrawlStates } from "@/utils/crawler";
 
 export type FilterBy = Partial<Record<string, string>>;
 export type SearchValues = {
@@ -122,29 +120,6 @@ export class ItemListControls extends TailwindElement {
     `;
   }
 
-  private renderStatusFilter() {
-    const viewOptions = finishedCrawlStates.map((state) => {
-      const { icon, label } = CrawlStatus.getContent(state);
-      return html`<sl-option value=${state}>${icon}${label}</sl-option>`;
-    });
-
-    return html`
-      <div class="flex items-center gap-2">
-        <div class="text-neutral-500">${msg("Status:")}</div>
-        <sl-select
-          class="flex-1 md:min-w-[15rem]"
-          size="small"
-          pill
-          multiple
-          placeholder=${msg("Any")}
-          @sl-change=${async (_e: CustomEvent) => {}}
-        >
-          ${viewOptions}
-        </sl-select>
-      </div>
-    `;
-  }
-
   private renderSort() {
     if (!this.sortBy) {
       return;

diff --git a/frontend/src/pages/crawls.ts b/frontend/src/pages/crawls.ts
@@ -9,7 +9,8 @@ import type { PageChangeEvent } from "@/components/ui/pagination";
 import needLogin from "@/decorators/needLogin";
 import { CrawlStatus } from "@/features/archived-items/crawl-status";
 import type { APIPaginatedList, APIPaginationQuery } from "@/types/api";
-import type { Crawl, CrawlState } from "@/types/crawler";
+import type { Crawl } from "@/types/crawler";
+import type { CrawlState } from "@/types/crawlState";
 import { activeCrawlStates } from "@/utils/crawler";
 import LiteElement, { html } from "@/utils/LiteElement";
 

diff --git a/frontend/src/pages/org/archived-item-detail/archived-item-detail.ts b/frontend/src/pages/org/archived-item-detail/archived-item-detail.ts
@@ -18,16 +18,15 @@ import type {
   ArchivedItem,
   Crawl,
   CrawlConfig,
-  CrawlState,
   Seed,
   Workflow,
 } from "@/types/crawler";
 import type { QARun } from "@/types/qa";
 import { isApiError } from "@/utils/api";
 import {
-  activeCrawlStates,
-  finishedCrawlStates,
   isActive,
+  isNotFailed,
+  isSuccessfullyFinished,
   renderName,
 } from "@/utils/crawler";
 import { humanizeExecutionSeconds } from "@/utils/executionTimeFormatter";
@@ -49,10 +48,6 @@ const SECTIONS = [
 type SectionName = (typeof SECTIONS)[number];
 
 const POLL_INTERVAL_SECONDS = 5;
-export const QA_RUNNING_STATES = [
-  "starting",
-  ...activeCrawlStates,
-] as CrawlState[];
 
 /**
  * Usage:
@@ -146,8 +141,8 @@ export class ArchivedItemDetail extends BtrixElement {
   private timerId?: number;
 
   private get isActive(): boolean | null {
-    if (!this.item) return null;
-    return activeCrawlStates.includes(this.item.state);
+    if (!this.item || this.item.type !== "crawl") return null;
+    return isActive(this.item);
   }
 
   private get hasFiles(): boolean | null {
@@ -194,7 +189,7 @@ export class ArchivedItemDetail extends BtrixElement {
     if (changedProperties.has("qaRuns")) {
       // Latest QA run that's either running or finished:
       this.mostRecentNonFailedQARun = this.qaRuns?.find((run) =>
-        [...QA_RUNNING_STATES, ...finishedCrawlStates].includes(run.state),
+        isNotFailed(run),
       );
     }
     if (
@@ -662,7 +657,7 @@ export class ArchivedItemDetail extends BtrixElement {
             ${msg("Copy Tags")}
           </sl-menu-item>
           ${when(
-            finishedCrawlStates.includes(this.item.state),
+            isSuccessfullyFinished(this.item),
             () => html`
               <sl-divider></sl-divider>
               <btrix-menu-item-link
@@ -675,7 +670,8 @@ export class ArchivedItemDetail extends BtrixElement {
             `,
           )}
           ${when(
-            this.isCrawler && !isActive(this.item.state),
+            this.isCrawler &&
+              (this.item.type !== "crawl" || !isActive(this.item)),
             () => html`
               <sl-divider></sl-divider>
               <sl-menu-item
@@ -1483,9 +1479,7 @@ ${this.item?.description}
       });
     }
 
-    this.isQAActive = Boolean(
-      this.qaRuns?.[0] && QA_RUNNING_STATES.includes(this.qaRuns[0].state),
-    );
+    this.isQAActive = Boolean(this.qaRuns?.[0] && isActive(this.qaRuns[0]));
 
     if (this.isQAActive) {
       // Clear current timer, if it exists

diff --git a/frontend/src/pages/org/archived-item-detail/ui/qa.ts b/frontend/src/pages/org/archived-item-detail/ui/qa.ts
@@ -13,8 +13,6 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import queryString from "query-string";
 
-import { QA_RUNNING_STATES } from "../archived-item-detail";
-
 import { BtrixElement } from "@/classes/BtrixElement";
 import { type Dialog } from "@/components/ui/dialog";
 import type { PageChangeEvent } from "@/components/ui/pagination";
@@ -28,7 +26,7 @@ import type {
 } from "@/types/api";
 import { type ArchivedItem, type ArchivedItemPage } from "@/types/crawler";
 import type { QARun } from "@/types/qa";
-import { finishedCrawlStates } from "@/utils/crawler";
+import { isActive, isSuccessfullyFinished } from "@/utils/crawler";
 import { humanizeExecutionSeconds } from "@/utils/executionTimeFormatter";
 import { formatNumber, getLocale } from "@/utils/localization";
 import { pluralOf } from "@/utils/pluralize";
@@ -464,12 +462,11 @@ export class ArchivedItemDetailQA extends BtrixElement {
     html`<div class="min-w-32"><sl-spinner class="size-4"></sl-spinner></div>`;
 
   private renderAnalysis(qaRuns: QARun[]) {
-    const isRunning =
-      this.mostRecentNonFailedQARun &&
-      QA_RUNNING_STATES.includes(this.mostRecentNonFailedQARun.state);
+    const isRunningOrStarting =
+      this.mostRecentNonFailedQARun && isActive(this.mostRecentNonFailedQARun);
     const qaRun = qaRuns.find(({ id }) => id === this.qaRunId);
 
-    if (!qaRun && isRunning) {
+    if (!qaRun && isRunningOrStarting) {
       return html`<btrix-alert class="mb-3" variant="success">
         ${msg("Running QA analysis on pages...")}
       </btrix-alert>`;
@@ -488,16 +485,14 @@ export class ArchivedItemDetailQA extends BtrixElement {
         <div class="flex flex-wrap items-center gap-x-3">
           ${msg("HTML Page Match Analysis")}
           ${when(this.qaRuns, (qaRuns) => {
-            const finishedQARuns = qaRuns.filter(({ state }) =>
-              finishedCrawlStates.includes(state),
+            const finishedQARuns = qaRuns.filter((qaRun) =>
+              isSuccessfullyFinished(qaRun),
             );
             const latestFinishedSelected =
               this.qaRunId === finishedQARuns[0]?.id;
 
             const finishedAndRunningQARuns = qaRuns.filter(
-              ({ state }) =>
-                finishedCrawlStates.includes(state) ||
-                QA_RUNNING_STATES.includes(state),
+              (qaRun) => isSuccessfullyFinished(qaRun) || isActive(qaRun),
             );
             const mostRecentSelected =
               this.qaRunId === finishedAndRunningQARuns[0]?.id;
@@ -565,7 +560,7 @@ export class ArchivedItemDetailQA extends BtrixElement {
                   ? this.renderMeter(
                       qaRun.stats.found,
                       this.qaStats.value.screenshotMatch,
-                      isRunning,
+                      isRunningOrStarting,
                     )
                   : this.renderMeter()}
               </btrix-table-cell>
@@ -579,7 +574,7 @@ export class ArchivedItemDetailQA extends BtrixElement {
                   ? this.renderMeter(
                       qaRun.stats.found,
                       this.qaStats.value.textMatch,
-                      isRunning,
+                      isRunningOrStarting,
                     )
                   : this.renderMeter()}
               </btrix-table-cell>

diff --git a/frontend/src/pages/org/archived-item-qa/archived-item-qa.ts b/frontend/src/pages/org/archived-item-qa/archived-item-qa.ts
@@ -38,7 +38,12 @@ import type {
 } from "@/types/api";
 import type { ArchivedItem, ArchivedItemPageComment } from "@/types/crawler";
 import type { ArchivedItemQAPage, QARun } from "@/types/qa";
-import { finishedCrawlStates, isActive, renderName } from "@/utils/crawler";
+import {
+  isActive,
+  isSuccessfullyFinished,
+  renderName,
+  type finishedCrawlStates,
+} from "@/utils/crawler";
 import { maxLengthValidator } from "@/utils/form";
 import { formatISODateString, getLocale } from "@/utils/localization";
 import { tw } from "@/utils/tailwind";
@@ -363,7 +368,7 @@ export class ArchivedItemQA extends BtrixElement {
     const currentQARun = this.finishedQARuns?.find(
       ({ id }) => id === this.qaRunId,
     );
-    const disableReview = !currentQARun || isActive(currentQARun.state);
+    const disableReview = !currentQARun || isActive(currentQARun);
 
     return html`
       ${this.renderHidden()}
@@ -1178,9 +1183,9 @@ export class ArchivedItemQA extends BtrixElement {
 
   private async fetchQARuns(): Promise<void> {
     try {
-      this.finishedQARuns = (await this.getQARuns()).filter(({ state }) =>
-        finishedCrawlStates.includes(state),
-      );
+      this.finishedQARuns = (await this.getQARuns()).filter((qaRun) =>
+        isSuccessfullyFinished(qaRun),
+      ) as ArchivedItemQA["finishedQARuns"];
     } catch {
       this.notify.toast({
         message: msg("Sorry, couldn't retrieve analysis runs at this time."),

diff --git a/frontend/src/pages/org/archived-items.ts b/frontend/src/pages/org/archived-items.ts
@@ -8,16 +8,21 @@ import { repeat } from "lit/directives/repeat.js";
 import { when } from "lit/directives/when.js";
 import queryString from "query-string";
 
-import type { ArchivedItem, Crawl, CrawlState, Workflow } from "./types";
+import type { ArchivedItem, Crawl, Workflow } from "./types";
 
 import { BtrixElement } from "@/classes/BtrixElement";
 import { CopyButton } from "@/components/ui/copy-button";
 import type { PageChangeEvent } from "@/components/ui/pagination";
 import { CrawlStatus } from "@/features/archived-items/crawl-status";
 import { pageHeader } from "@/layouts/pageHeader";
 import type { APIPaginatedList, APIPaginationQuery } from "@/types/api";
+import type { CrawlState } from "@/types/crawlState";
 import { isApiError } from "@/utils/api";
-import { finishedCrawlStates, isActive } from "@/utils/crawler";
+import {
+  finishedCrawlStates,
+  isActive,
+  isSuccessfullyFinished,
+} from "@/utils/crawler";
 import { isArchivingDisabled } from "@/utils/orgs";
 import { tw } from "@/utils/tailwind";
 
@@ -622,7 +627,7 @@ export class CrawlsList extends BtrixElement {
         ${msg("Copy Tags")}
       </sl-menu-item>
       ${when(
-        finishedCrawlStates.includes(item.state),
+        isSuccessfullyFinished(item),
         () => html`
           <sl-divider></sl-divider>
           <btrix-menu-item-link
@@ -635,7 +640,7 @@ export class CrawlsList extends BtrixElement {
         `,
       )}
       ${when(
-        this.isCrawler && !isActive(item.state),
+        this.isCrawler && (item.type !== "crawl" || !isActive(item)),
         () => html`
           <sl-divider></sl-divider>
           <sl-menu-item

diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts
@@ -17,7 +17,8 @@ import type {
   APISortQuery,
 } from "@/types/api";
 import type { Collection } from "@/types/collection";
-import type { ArchivedItem, Crawl, CrawlState, Upload } from "@/types/crawler";
+import type { ArchivedItem, Crawl, Upload } from "@/types/crawler";
+import type { CrawlState } from "@/types/crawlState";
 import { formatNumber, getLocale } from "@/utils/localization";
 import { pluralOf } from "@/utils/pluralize";