Crawl & crawl config UX improvements (#136)

2022-02-01 14:28:07 -08:00 · 2022-02-01 14:28:07 -08:00 · 02f46f108b
commit 02f46f108b
parent b3f21932fc
8 changed files with 120 additions and 45 deletions
--- a/frontend/src/pages/archive/crawl-detail.ts
+++ b/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">
-          ${this.crawl?.id ||
-          html`<sl-skeleton style="width: 37em"></sl-skeleton>`}
+        <h2 class="text-xl font-medium mb-1 h-7">
+          ${this.crawl
+            ? 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.lastIndexOf("/") + 1
-                   )}
+                  >${file.name.slice(file.name.lastIndexOf("/") + 1)}
                </a>
              </div>
              <div><sl-format-bytes value=${file.size}></sl-format-bytes></div>
--- a/frontend/src/pages/archive/crawl-templates-detail.ts
+++ b/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({
--- a/frontend/src/pages/archive/crawl-templates-list.ts
+++ b/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")}>
-                          <span>
+                      ? html`<sl-tooltip content=${msg("Last complete crawl")}>
+                          <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({
--- a/frontend/src/pages/archive/crawl-templates-new.ts
+++ b/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
-          ? msg(
-              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
-                >`
-            )
+        message: crawlId
+          ? msg("Crawl started with new template.")
          : 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;
--- a/frontend/src/pages/archive/crawl-templates.ts
+++ b/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({
--- a/frontend/src/pages/archive/crawls-list.ts
+++ b/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"),
--- a/frontend/src/pages/archive/index.ts
+++ b/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>
--- a/frontend/src/utils/LiteElement.ts
+++ b/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,
      })
    );