Show last crawl state in UI (#192)

* update crawl list status

* show on detail page

frontend/src/pages/archive/crawl-templates-detail.ts

@@ -792,23 +792,39 @@ export class CrawlTemplatesDetail extends LiteElement {
             class="flex items-center justify-between border border-zinc-100 rounded p-1 mt-1"
           >
             ${this.crawlTemplate?.lastCrawlId
-              ? html`<a
+              ? html`
+                  <span>
+                    <sl-icon
+                      class="inline-block align-middle mr-1"
+                      name=${this.crawlTemplate.lastCrawlState === "complete"
+                        ? "check-circle-fill"
+                        : this.crawlTemplate.lastCrawlState === "failed"
+                        ? "x-circle-fill"
+                        : "exclamation-circle-fill"}
+                    ></sl-icon>
+                    <span class="inline-block align-middle capitalize">
+                      ${this.crawlTemplate.lastCrawlState.replace(/_/g, " ")}
+                    </span>
+                    <sl-format-date
+                      class="inline-block align-middle text-sm text-neutral-500"
+                      date=${
+                        `${this.crawlTemplate.lastCrawlTime}Z` /** Z for UTC */
+                      }
+                      month="2-digit"
+                      day="2-digit"
+                      year="2-digit"
+                      hour="numeric"
+                      minute="numeric"
+                      time-zone-name="short"
+                    ></sl-format-date>
+                  </span>
+                  <a
                     class="text-primary font-medium hover:underline text-sm p-1"
                     href=${`/archives/${this.archiveId}/crawls/crawl/${this.crawlTemplate.lastCrawlId}#watch`}
                     @click=${this.navLink}
                     >${msg("View crawl")}</a
                   >
-                  <sl-format-date
+                `
-                    date=${
-                      `${this.crawlTemplate.lastCrawlTime}Z` /** Z for UTC */
-                    }
-                    month="2-digit"
-                    day="2-digit"
-                    year="2-digit"
-                    hour="numeric"
-                    minute="numeric"
-                    time-zone-name="short"
-                  ></sl-format-date>`
               : html`<span class="text-0-400 text-sm p-1"
                   >${msg("None")}</span
                 >`}

frontend/src/pages/archive/crawl-templates-list.ts

@@ -147,7 +147,15 @@ export class CrawlTemplatesList extends LiteElement {
                   </div>
                   <div>
                     ${t.crawlCount
-                      ? html`<sl-tooltip content=${msg("Last complete crawl")}>
+                      ? html`<sl-tooltip>
+                          <span slot="content" class="capitalize">
+                            ${msg(
+                              str`Last Crawl: ${t.lastCrawlState.replace(
+                                /_/g,
+                                " "
+                              )}`
+                            )}
+                          </span>
                           <a
                             class="font-medium hover:underline"
                             href=${`/archives/${this.archiveId}/crawls/crawl/${t.lastCrawlId}`}
@@ -157,11 +165,18 @@ export class CrawlTemplatesList extends LiteElement {
                             }}
                           >
                             <sl-icon
-                              class="inline-block align-middle mr-1 text-purple-400"
+                              class="inline-block align-middle mr-1 ${t.lastCrawlState ===
-                              name="check-circle-fill"
+                              "failed"
+                                ? "text-neutral-400"
+                                : "text-purple-400"}"
+                              name=${t.lastCrawlState === "complete"
+                                ? "check-circle-fill"
+                                : t.lastCrawlState === "failed"
+                                ? "x-circle-fill"
+                                : "exclamation-circle-fill"}
                             ></sl-icon
                             ><sl-format-date
-                              class="inline-block align-middle text-0-600"
+                              class="inline-block align-middle text-neutral-600"
                               date=${`${t.lastCrawlTime}Z` /** Z for UTC */}
                               month="2-digit"
                               day="2-digit"

frontend/src/pages/archive/types.ts

@@ -1,3 +1,10 @@
+type CrawlState =
+  | "running"
+  | "complete"
+  | "failed"
+  | "partial_complete"
+  | "timed_out";
+
 export type Crawl = {
   id: string;
   userid: string;
@@ -8,7 +15,7 @@ export type Crawl = {
   manual: boolean;
   started: string; // UTC ISO date
   finished?: string; // UTC ISO date
-  state: string; // "running" | "complete" | "failed" | "partial_complete"
+  state: CrawlState;
   scale: number;
   stats: { done: string; found: string } | null;
   resources?: { name: string; path: string; hash: string; size: number }[];
@@ -38,6 +45,7 @@ export type CrawlTemplate = {
   crawlCount: number;
   lastCrawlId: string;
   lastCrawlTime: string;
+  lastCrawlState: CrawlState;
   currCrawlId: string;
   newId: string | null;
   oldId: string | null;