From bdbc4d58823258b513262bdb15b96d5b737c2f3c Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Fri, 21 Jun 2024 15:52:15 -0400
Subject: [PATCH] fix: renterd slab alert health and objects

---
 .changeset/brave-rivers-cry.md                |   5 +
 .../Files/FileContextMenu/index.tsx           |  14 ++-
 apps/renterd/contexts/alerts/data.tsx         | 114 +++++++++++++-----
 3 files changed, 95 insertions(+), 38 deletions(-)
 create mode 100644 .changeset/brave-rivers-cry.md

diff --git a/.changeset/brave-rivers-cry.md b/.changeset/brave-rivers-cry.md
new file mode 100644
index 000000000..ce9cb4faa
--- /dev/null
+++ b/.changeset/brave-rivers-cry.md
@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The slab migration failed alert now shows health and an object IDs list that includes the file context menu for each object. Closes https://github.com/SiaFoundation/renterd/issues/1322
diff --git a/apps/renterd/components/Files/FileContextMenu/index.tsx b/apps/renterd/components/Files/FileContextMenu/index.tsx
index c4e91244c..9d979f5cf 100644
--- a/apps/renterd/components/Files/FileContextMenu/index.tsx
+++ b/apps/renterd/components/Files/FileContextMenu/index.tsx
@@ -25,9 +25,11 @@ import { useFilesManager } from '../../../contexts/filesManager'
 
 type Props = {
   path: string
+  trigger?: React.ReactNode
+  contentProps?: React.ComponentProps<typeof DropdownMenu>['contentProps']
 }
 
-export function FileContextMenu({ path }: Props) {
+export function FileContextMenu({ trigger, path, contentProps }: Props) {
   const { downloadFiles, getFileUrl, navigateToModeSpecificFiltering } =
     useFilesManager()
   const deleteFile = useFileDelete()
@@ -36,11 +38,13 @@ export function FileContextMenu({ path }: Props) {
   return (
     <DropdownMenu
       trigger={
-        <Button aria-label="File context menu" variant="ghost" icon="hover">
-          <Document16 />
-        </Button>
+        trigger || (
+          <Button aria-label="File context menu" variant="ghost" icon="hover">
+            <Document16 />
+          </Button>
+        )
       }
-      contentProps={{ align: 'start' }}
+      contentProps={{ align: 'start', ...contentProps }}
     >
       <DropdownMenuLabel>Actions</DropdownMenuLabel>
       <DropdownMenuItem
diff --git a/apps/renterd/contexts/alerts/data.tsx b/apps/renterd/contexts/alerts/data.tsx
index 70ec4ecc9..446e70cec 100644
--- a/apps/renterd/contexts/alerts/data.tsx
+++ b/apps/renterd/contexts/alerts/data.tsx
@@ -1,4 +1,5 @@
 import {
+  Button,
   Link,
   ScrollArea,
   Text,
@@ -7,7 +8,7 @@ import {
   ValueNum,
   ValueSc,
 } from '@siafoundation/design-system'
-import { useHost, useSlabObjects } from '@siafoundation/renterd-react'
+import { useHost } from '@siafoundation/renterd-react'
 import { HostContextMenu } from '../../components/Hosts/HostContextMenu'
 import { useFilesManager } from '../filesManager'
 import { useDialog } from '../dialog'
@@ -15,6 +16,8 @@ import { getDirectorySegmentsFromPath } from '../../lib/paths'
 import BigNumber from 'bignumber.js'
 import { ContractContextMenuFromId } from '../../components/Contracts/ContractContextMenuFromId'
 import { AccountContextMenu } from '../../components/AccountContextMenu'
+import { FileContextMenu } from '../../components/Files/FileContextMenu'
+import { CaretDown16 } from '@siafoundation/react-icons'
 
 export const dataFields: Record<
   string,
@@ -120,49 +123,94 @@ export const dataFields: Record<
   },
   slabKey: {
     render: function SlabField({ value }: { value: string }) {
+      return (
+        <div className="flex justify-between w-full gap-2">
+          <Text size="12" color="subtle" ellipsis>
+            slab key
+          </Text>
+          <ValueCopyable size="12" value={value} label="slab key" />
+        </div>
+      )
+    },
+  },
+  health: {
+    render: function OriginField({ value }: { value: string }) {
+      return (
+        <div className="flex justify-between w-full gap-2">
+          <Text size="12" color="subtle" ellipsis>
+            health
+          </Text>
+          <Text size="12" color="contrast" ellipsis>
+            {value}
+          </Text>
+        </div>
+      )
+    },
+  },
+  objectIDs: {
+    render: function ObjectIdsField({
+      value,
+    }: {
+      value: Record<string, string[]>
+    }) {
       const { setActiveDirectory } = useFilesManager()
       const { closeDialog } = useDialog()
-      const objects = useSlabObjects({
-        params: {
-          key: value,
-        },
-        config: {
-          swr: {
-            revalidateOnFocus: false,
-          },
-        },
-      })
       return (
         <div className="flex flex-col gap-2 max-h-[100px]">
           <div className="flex justify-between w-full gap-2">
             <Text size="12" color="subtle" ellipsis>
-              slab key
+              object IDs
             </Text>
-            <ValueCopyable size="12" value={value} label="slab key" />
           </div>
-          {!!objects.data?.length && (
+          <div className="-mx-2">
             <ScrollArea>
-              <div className="flex flex-col gap-2 mt-2 mb-2">
-                {objects.data.map((o) => (
-                  <Link
-                    key={o.name}
-                    color="accent"
-                    underline="hover"
-                    size="12"
-                    noWrap
-                    onClick={() => {
-                      setActiveDirectory(() =>
-                        getDirectorySegmentsFromPath(o.name)
-                      )
-                      closeDialog()
-                    }}
-                  >
-                    {o.name}
-                  </Link>
-                ))}
+              <div className="flex flex-col gap-2 mt-2 mb-2 px-2">
+                {Object.entries(value).map(([bucket, paths]) =>
+                  paths.map((path) => {
+                    const fullPath = `${bucket}${path}`
+                    return (
+                      <div
+                        key={fullPath}
+                        className="flex justify-between w-full gap-2"
+                      >
+                        <Link
+                          color="accent"
+                          underline="hover"
+                          size="12"
+                          noWrap
+                          ellipsis
+                          onClick={() => {
+                            setActiveDirectory(() =>
+                              getDirectorySegmentsFromPath(fullPath)
+                            )
+                            closeDialog()
+                          }}
+                        >
+                          {fullPath}
+                        </Link>
+                        <FileContextMenu
+                          path={fullPath}
+                          contentProps={{
+                            align: 'end',
+                          }}
+                          trigger={
+                            <Button
+                              aria-label="File context menu"
+                              variant="ghost"
+                              icon="hover"
+                              size="none"
+                            >
+                              <CaretDown16 />
+                            </Button>
+                          }
+                        />
+                      </div>
+                    )
+                  })
+                )}
               </div>
             </ScrollArea>
-          )}
+          </div>
         </div>
       )
     },