Add checkmark next to replicated/backed up files (#1343)

Co-authored-by: Emma Segal-Grossman <hi@emma.cafe>

frontend/src/pages/org/browser-profiles-list.ts

@@ -1,5 +1,6 @@
 import { state, property } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
+import { when } from "lit/directives/when.js";
 
 import type { AuthState } from "../../utils/AuthService";
 import LiteElement, { html } from "../../utils/LiteElement";
@@ -101,7 +102,18 @@ export class BrowserProfilesList extends LiteElement {
       >
         <div class="grid grid-cols-8 gap-3 md:gap-5" role="row">
           <div class="col-span-8 md:col-span-3 p-2" role="cell">
-            <div class="font-medium mb-1">${data.name}</div>
+            <div class="font-medium text-sm">
+              <span>${data.name}</span>
+              ${when(
+                data.resource && data.resource.replicas.length > 0,
+                () => html` <sl-tooltip content=${msg("Backed up")}>
+                  <sl-icon
+                    name="clouds"
+                    class="w-4 h-4 ml-2 align-text-bottom text-success"
+                  ></sl-icon>
+                </sl-tooltip>`
+              )}
+            </div>
             <div class="text-sm truncate" title=${data.description}>
               ${data.description}
             </div>

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

@@ -157,10 +157,7 @@ export class CrawlDetail extends LiteElement {
         });
         break;
       case "files":
-        sectionContent = this.renderPanel(
-          msg("Download Files"),
-          this.renderFiles()
-        );
+        sectionContent = this.renderPanel(msg("Files"), this.renderFiles());
         break;
       case "logs":
         sectionContent = this.renderPanel(
@@ -799,6 +796,15 @@ ${this.crawl?.description}
                     <div
                       class="whitespace-nowrap text-sm font-mono text-neutral-400"
                     >
+                      ${when(
+                        file.numReplicas > 0,
+                        () => html` <sl-tooltip content=${msg("Backed up")}>
+                          <sl-icon
+                            name="clouds"
+                            class="w-4 h-4 mr-2 align-text-bottom shrink-0 text-success"
+                          ></sl-icon>
+                        </sl-tooltip>`
+                      )}
                       <sl-format-bytes value=${file.size}></sl-format-bytes>
                     </div>
                   </li>

frontend/src/types/crawler.ts

@@ -83,6 +83,11 @@ export type Workflow = CrawlConfig & {
 
 export type ListWorkflow = Omit<Workflow, "config">;
 
+export type ProfileReplica = {
+  name: string;
+  custom?: boolean;
+};
+
 export type Profile = {
   id: string;
   name: string;
@@ -93,6 +98,13 @@ export type Profile = {
   baseProfileName: string;
   oid: string;
   crawlconfigs: { id: string; name: string }[];
+  resource?: {
+    name: string;
+    path: string;
+    hash: string;
+    size: number;
+    replicas: ProfileReplica[];
+  };
 };
 
 export type CrawlState =
@@ -124,7 +136,13 @@ export type Crawl = CrawlConfig & {
   state: CrawlState;
   scale: number;
   stats: { done: string; found: string; size: string } | null;
-  resources?: { name: string; path: string; hash: string; size: number }[];
+  resources?: {
+    name: string;
+    path: string;
+    hash: string;
+    size: number;
+    numReplicas: number;
+  }[];
   fileCount?: number;
   fileSize?: number;
   completions?: number;