fix: renterd slab alert health and objects

SiaFoundation · Jun 21, 2024 · 2b47862 · 2b47862
1 parent c0fcf04
commit 2b47862
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 41 deletions.
diff --git a/.changeset/brave-rivers-cry.md 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
@@ -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
@@ -1,4 +1,5 @@
 import {
+  Button,
   Link,
   ScrollArea,
   Text,
@@ -7,14 +8,16 @@ 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'
 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,92 @@ 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 && (
-            <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>
-            </ScrollArea>
-          )}
+          <ScrollArea>
+            <div className="flex flex-col gap-2 mt-2 mb-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>
       )
     },