Crawl & crawl config UX improvements (#136)

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

@@ -58,13 +58,59 @@ export class CrawlDetail extends LiteElement {
 
   render() {
     return html`
+      <nav class="mb-5">
+        <a
+          class="text-gray-600 hover:text-gray-800 text-sm font-medium"
+          href=${`/archives/${this.archiveId}/crawls`}
+          @click=${this.navLink}
+        >
+          <sl-icon
+            name="arrow-left"
+            class="inline-block align-middle"
+          ></sl-icon>
+          <span class="inline-block align-middle"
+            >${msg("Back to Crawls")}</span
+          >
+        </a>
+      </nav>
+
       <header class="my-3">
-        <h2 class="font-mono text-xs text-0-400 h-4">
+        <h2 class="text-xl font-medium mb-1 h-7">
-          ${this.crawl?.id ||
+          ${this.crawl
-          html`<sl-skeleton style="width: 37em"></sl-skeleton>`}
+            ? msg(str`Crawl of ${this.crawl.configName}`)
+            : html`<sl-skeleton style="width: 37em"></sl-skeleton>`}
         </h2>
       </header>
 
+      <section class="px-4 py-3 border-t border-b mb-4 text-sm">
+        <dl class="grid grid-cols-2">
+          <div>
+            <dt class="text-xs text-0-600">${msg("Crawl ID")}</dt>
+            <dd class="h-5 whitespace-nowrap truncate font-mono text-xs">
+              ${this.crawl?.id ||
+              html`<sl-skeleton style="width: 37em"></sl-skeleton>`}
+            </dd>
+          </div>
+          <div>
+            <dt class="text-xs text-0-600">${msg("Crawl Template")}</dt>
+            <dd class="h-5 whitespace-nowrap truncate">
+              ${this.crawl
+                ? html`
+                    <a
+                      class="text-primary font-medium hover:underline"
+                      href=${`/archives/${this.archiveId}/crawl-templates/config/${this.crawl.cid}`}
+                      @click=${this.navLink}
+                      >${this.crawl.configName}</a
+                    >
+                  `
+                : html`<sl-skeleton style="width: 15em"></sl-skeleton>`}
+            </dd>
+          </div>
+        </dl>
+
+        <!-- TODO created at? -->
+      </section>
+
       <main class="grid gap-5">
         <section
           class="grid grid-cols-2 md:grid-cols-8 gap-3 rounded-lg md:p-4 md:bg-zinc-100"
@@ -108,8 +154,14 @@ export class CrawlDetail extends LiteElement {
       >
         <!-- https://github.com/webrecorder/browsertrix-crawler/blob/9f541ab011e8e4bccf8de5bd7dc59b632c694bab/screencast/index.html -->
         [watch/replay]
-        ${this.crawl?.resources?.length ? html`<replay-web-page source="${fileJson}" coll="${this.crawl?.id}" replayBase="/replay/" noSandbox="true"></replay-web-page>` : ``}
+        ${this.crawl?.resources?.length
-
+          ? html`<replay-web-page
+              source="${fileJson}"
+              coll="${this.crawl?.id}"
+              replayBase="/replay/"
+              noSandbox="true"
+            ></replay-web-page>`
+          : ``}
       </div>
       <div
         class="absolute top-2 right-2 flex bg-white/90 hover:bg-white rounded-full"
@@ -151,22 +203,6 @@ export class CrawlDetail extends LiteElement {
 
     return html`
       <dl class="grid grid-cols-2 gap-5">
-        <div class="col-span-2">
-          <dt class="text-sm text-0-600">${msg("Crawl Template")}</dt>
-          <dd>
-            ${this.crawl
-              ? html`
-                  <a
-                    class="font-medium  hover:underline"
-                    href=${`/archives/${this.archiveId}/crawl-templates/config/${this.crawl.cid}`}
-                    @click=${this.navLink}
-                    >${this.crawl.configName}</a
-                  >
-                `
-              : html`<sl-skeleton class="h-6"></sl-skeleton>`}
-          </dd>
-        </div>
-
         <div class="col-span-2">
           <dt class="text-sm text-0-600">${msg("Status")}</dt>
           <dd>
@@ -332,9 +368,7 @@ export class CrawlDetail extends LiteElement {
                   href=${file.path}
                   download
                   title=${file.name}
-                  >${file.name.slice(
+                  >${file.name.slice(file.name.lastIndexOf("/") + 1)}
-                      file.name.lastIndexOf("/") + 1
-                   )}
                 </a>
               </div>
               <div><sl-format-bytes value=${file.size}></sl-format-bytes></div>

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

@@ -48,7 +48,6 @@ export class CrawlTemplatesDetail extends LiteElement {
         message: msg("Sorry, couldn't retrieve crawl template at this time."),
         type: "danger",
         icon: "exclamation-octagon",
-        duration: 10000,
       });
     }
   }
@@ -57,6 +56,22 @@ export class CrawlTemplatesDetail extends LiteElement {
     const seeds = this.crawlTemplate?.config.seeds || [];
 
     return html`
+      <nav class="mb-5">
+        <a
+          class="text-gray-600 hover:text-gray-800 text-sm font-medium"
+          href=${`/archives/${this.archiveId}/crawl-templates`}
+          @click=${this.navLink}
+        >
+          <sl-icon
+            name="arrow-left"
+            class="inline-block align-middle"
+          ></sl-icon>
+          <span class="inline-block align-middle"
+            >${msg("Back to Crawl Templates")}</span
+          >
+        </a>
+      </nav>
+
       <h2 class="text-xl font-bold mb-4 h-7">
         ${this.crawlTemplate?.name ||
         html`<sl-skeleton class="h-7" style="width: 20em"></sl-skeleton>`}
@@ -426,7 +441,7 @@ export class CrawlTemplatesDetail extends LiteElement {
         ),
         type: "success",
         icon: "check2-circle",
-        duration: 10000,
+        duration: 8000,
       });
     } catch {
       this.notify({

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

@@ -205,8 +205,15 @@ export class CrawlTemplatesList extends LiteElement {
                   </div>
                   <div>
                     ${t.crawlCount
-                      ? html`<sl-tooltip content=${msg("Last crawl time")}>
+                      ? html`<sl-tooltip content=${msg("Last complete crawl")}>
-                          <span>
+                          <a
+                            class="font-medium hover:underline"
+                            href=${`/archives/${this.archiveId}/crawls/crawl/${t.lastCrawlId}`}
+                            @click=${(e: any) => {
+                              e.stopPropagation();
+                              this.navLink(e);
+                            }}
+                          >
                             <sl-icon
                               class="inline-block align-middle mr-1 text-purple-400"
                               name="check-circle-fill"
@@ -221,7 +228,7 @@ export class CrawlTemplatesList extends LiteElement {
                               minute="numeric"
                               time-zone-name="short"
                             ></sl-format-date>
-                          </span>
+                          </a>
                         </sl-tooltip>`
                       : html`
                           <sl-icon
@@ -424,7 +431,7 @@ export class CrawlTemplatesList extends LiteElement {
         ),
         type: "success",
         icon: "check2-circle",
-        duration: 10000,
+        duration: 8000,
       });
     } catch {
       this.notify({

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

@@ -139,6 +139,22 @@ export class CrawlTemplatesNew extends LiteElement {
 
   render() {
     return html`
+      <nav class="mb-5">
+        <a
+          class="text-gray-600 hover:text-gray-800 text-sm font-medium"
+          href=${`/archives/${this.archiveId}/crawl-templates`}
+          @click=${this.navLink}
+        >
+          <sl-icon
+            name="arrow-left"
+            class="inline-block align-middle"
+          ></sl-icon>
+          <span class="inline-block align-middle"
+            >${msg("Back to Crawl Templates")}</span
+          >
+        </a>
+      </nav>
+
       <h2 class="text-xl font-bold mb-3">${msg("New Crawl Template")}</h2>
       <p>
         ${msg(
@@ -540,25 +556,24 @@ export class CrawlTemplatesNew extends LiteElement {
         }
       );
 
+      const crawlId = data.run_now_job;
+
       this.notify({
-        message: data.run_now_job
+        message: crawlId
-          ? msg(
+          ? msg("Crawl started with new template.")
-              html`Crawl running with new template. <br />
-                <a
-                  class="underline hover:no-underline"
-                  href="/archives/${this
-                    .archiveId}/crawls/crawl/${data.started}"
-                  @click=${this.navLink.bind(this)}
-                  >View crawl</a
-                >`
-            )
           : msg("Crawl template created."),
         type: "success",
         icon: "check2-circle",
-        duration: 10000,
+        duration: 8000,
       });
 
-      this.navTo(`/archives/${this.archiveId}/crawl-templates`);
+      if (crawlId) {
+        this.navTo(`/archives/${this.archiveId}/crawls/crawl/${crawlId}`);
+      } else {
+        this.navTo(
+          `/archives/${this.archiveId}/crawl-templates/config/${data.added}`
+        );
+      }
     } catch (e: any) {
       if (e?.isApiError) {
         this.serverError = e?.message;

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

@@ -164,7 +164,7 @@ export class CrawlTemplatesList extends LiteElement {
         ),
         type: "success",
         icon: "check2-circle",
-        duration: 10000,
+        duration: 8000,
       });
     } catch {
       this.notify({

frontend/src/pages/archive/crawls-list.ts

@@ -21,6 +21,8 @@ const MIN_SEARCH_LENGTH = 2;
 const sortableFieldLabels = {
   started_desc: msg("Newest"),
   started_asc: msg("Oldest"),
+  finished_desc: msg("Recently Updated"),
+  finished_asc: msg("Oldest Finished"),
   state: msg("Status"),
   configName: msg("Crawl Template Name"),
   cid: msg("Crawl Template ID"),

frontend/src/pages/archive/index.ts

@@ -137,7 +137,7 @@ export class Archive extends LiteElement {
           <hr class="flex-1 border-t-2" />
         </nav>
 
-        <div class="my-5" aria-labelledby="${this.archiveTab}-tab">
+        <div class="my-4" aria-labelledby="${this.archiveTab}-tab">
           ${tabPanelContent}
         </div>
       </main>

frontend/src/utils/LiteElement.ts

@@ -52,6 +52,7 @@ export default class LiteElement extends LitElement {
     const evt: NavigateEvent = new CustomEvent("navigate", {
       detail: { url, state },
       bubbles: true,
+      composed: true,
     });
     this.dispatchEvent(evt);
   }
@@ -92,6 +93,7 @@ export default class LiteElement extends LitElement {
     this.dispatchEvent(
       new CustomEvent("notify", {
         bubbles: true,
+        composed: true,
         detail,
       })
     );