Allow user to delete individual crawls (#609)

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

@@ -333,11 +333,11 @@ export class CrawlDetail extends LiteElement {
         <h2 class="text-xl font-semibold mb-3 md:mr-2">
           ${msg(
             html`${this.crawl
-                ? this.crawl.configName
-                : html`<sl-skeleton
-                    class="inline-block"
-                    style="width: 15em"
-                  ></sl-skeleton>`}`
+              ? this.crawl.configName
+              : html`<sl-skeleton
+                  class="inline-block"
+                  style="width: 15em"
+                ></sl-skeleton>`}`
           )}
         </h2>
         <div
@@ -480,6 +480,21 @@ export class CrawlDetail extends LiteElement {
           >
             ${msg("Copy Crawl Config ID")}
           </li>
+          ${when(
+            this.crawl && !this.isActive,
+            () => html`
+              <li
+                class="p-2 text-danger hover:bg-danger hover:text-white cursor-pointer"
+                role="menuitem"
+                @click=${(e: any) => {
+                  e.target.closest("sl-dropdown").hide();
+                  this.deleteCrawl();
+                }}
+              >
+                ${msg("Delete Crawl")}
+              </li>
+            `
+          )}
         </ul>
       </sl-dropdown>
     `;
@@ -853,7 +868,12 @@ export class CrawlDetail extends LiteElement {
 
     return html`
       <div>
-        <sl-radio-group value=${this.crawl.scale} help-text=${msg("Increasing parallel crawler instances can speed up crawls, but may increase the chances of getting rate limited.")}>
+        <sl-radio-group
+          value=${this.crawl.scale}
+          help-text=${msg(
+            "Increasing parallel crawler instances can speed up crawls, but may increase the chances of getting rate limited."
+          )}
+        >
           ${scaleOptions.map(
             ({ value, label }) => html`
               <sl-radio-button
@@ -1206,6 +1226,48 @@ export class CrawlDetail extends LiteElement {
     }
   }
 
+  private async deleteCrawl() {
+    if (
+      !window.confirm(
+        msg(
+          str`Are you sure you want to delete crawl of ${
+            this.crawl!.configName
+          }?`
+        )
+      )
+    ) {
+      return;
+    }
+
+    try {
+      const data = await this.apiFetch(
+        `/orgs/${this.crawl!.oid}/crawls/delete`,
+        this.authState!,
+        {
+          method: "POST",
+          body: JSON.stringify({
+            crawl_ids: [this.crawl!.id],
+          }),
+        }
+      );
+
+      this.navTo(this.crawlsBaseUrl);
+      this.notify({
+        message: msg(`Successfully deleted crawl`),
+        variant: "success",
+        icon: "check2-circle",
+      });
+    } catch (e: any) {
+      this.notify({
+        message:
+          (e.isApiError && e.message) ||
+          msg("Sorry, couldn't run crawl at this time."),
+        variant: "danger",
+        icon: "exclamation-octagon",
+      });
+    }
+  }
+
   private handleExclusionChange(e: CustomEvent) {
     const { cid } = e.detail;
     this.crawlTemplateId = cid;

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

@@ -1,6 +1,7 @@
 import { state, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { msg, localized, str } from "@lit/localize";
+import { when } from "lit/directives/when.js";
 import debounce from "lodash/fp/debounce";
 import flow from "lodash/fp/flow";
 import map from "lodash/fp/map";
@@ -396,6 +397,21 @@ export class CrawlsList extends LiteElement {
               >
                 ${msg("View Crawl Config")}
               </li>
+              ${when(
+                !isActive(crawl),
+                () => html`
+                  <li
+                    class="p-2 text-danger hover:bg-danger hover:text-white cursor-pointer"
+                    role="menuitem"
+                    @click=${(e: any) => {
+                      e.target.closest("sl-dropdown").hide();
+                      this.deleteCrawl(crawl);
+                    }}
+                  >
+                    ${msg("Delete Crawl")}
+                  </li>
+                `
+              )}
             </ul>
           </sl-dropdown>
         </div>
@@ -553,18 +569,13 @@ export class CrawlsList extends LiteElement {
   private async fetchCrawls(): Promise<void> {
     if (!this.shouldFetch) return;
 
+    this.stopPollTimer();
     try {
       const { crawls } = await this.getCrawls();
 
       this.crawls = crawls;
       // Update search/filter collection
       this.fuse.setCollection(this.crawls as any);
-
-      // Restart timer for next poll
-      this.stopPollTimer();
-      this.timerId = window.setTimeout(() => {
-        this.fetchCrawls();
-      }, 1000 * POLL_INTERVAL_SECONDS);
     } catch (e) {
       this.notify({
         message: msg("Sorry, couldn't retrieve crawls at this time."),
@@ -572,6 +583,11 @@ export class CrawlsList extends LiteElement {
         icon: "exclamation-octagon",
       });
     }
+
+    // Restart timer for next poll
+    this.timerId = window.setTimeout(() => {
+      this.fetchCrawls();
+    }, 1000 * POLL_INTERVAL_SECONDS);
   }
 
   private stopPollTimer() {
@@ -714,6 +730,45 @@ export class CrawlsList extends LiteElement {
     }
   }
 
+  private async deleteCrawl(crawl: Crawl) {
+    if (
+      !window.confirm(
+        msg(str`Are you sure you want to delete crawl of ${crawl.configName}?`)
+      )
+    ) {
+      return;
+    }
+
+    try {
+      const data = await this.apiFetch(
+        `/orgs/${crawl.oid}/crawls/delete`,
+        this.authState!,
+        {
+          method: "POST",
+          body: JSON.stringify({
+            crawl_ids: [crawl.id],
+          }),
+        }
+      );
+
+      this.crawls = this.crawls!.filter((c) => c.id !== crawl.id);
+      this.notify({
+        message: msg(`Successfully deleted crawl`),
+        variant: "success",
+        icon: "check2-circle",
+      });
+      this.fetchCrawls();
+    } catch (e: any) {
+      this.notify({
+        message:
+          (e.isApiError && e.message) ||
+          msg("Sorry, couldn't run crawl at this time."),
+        variant: "danger",
+        icon: "exclamation-octagon",
+      });
+    }
+  }
+
   async getCrawlTemplate(crawl: Crawl): Promise<CrawlConfig> {
     const data: CrawlConfig = await this.apiFetch(
       `/orgs/${crawl.oid}/crawlconfigs/${crawl.cid}`,