From b2d32d0947ea9578d3379e2e6742c24446465cbc Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Tue, 27 Feb 2024 07:49:59 -0500
Subject: [PATCH] feat: renterd alerts updates

---
 .changeset/fuzzy-dolphins-do.md               |   5 +
 .changeset/quiet-pens-bow.md                  |   5 +
 .changeset/real-crabs-speak.md                |   5 +
 .changeset/seven-terms-thank.md               |   5 +
 .changeset/tasty-rocks-compete.md             |   5 +
 .changeset/twenty-snakes-look.md              |   5 +
 .../components/Alerts/AlertContextMenu.tsx    |  54 +++
 .../components/Alerts/AlertsActionsMenu.tsx   |   9 +
 .../components/Alerts/AlertsCmd/index.tsx     |  55 +++
 .../components/Alerts/AlertsFilterMenu.tsx    |  74 ++++
 .../Alerts/AlertsViewDropdownMenu.tsx         |  78 ++++
 apps/renterd/components/Alerts/StateError.tsx |  16 +
 .../components/Alerts/StateNoneMatching.tsx   |  15 +
 .../components/Alerts/StateNoneYet.tsx        |  17 +
 apps/renterd/components/Alerts/index.tsx      |  61 +++
 apps/renterd/components/CmdRoot/index.tsx     |  15 +
 .../Contracts/ContractContextMenu.tsx         |  10 +-
 .../Contracts/ContractContextMenuFromId.tsx   |  17 +-
 .../components/Hosts/HostContextMenu.tsx      |  10 +-
 .../Hosts/HostContextMenuFromId.tsx           |  47 +++
 apps/renterd/components/RenterdSidenav.tsx    |  64 ++-
 apps/renterd/config/providers.tsx             |  13 +-
 apps/renterd/config/routes.ts                 |   3 +
 apps/renterd/contexts/alerts/columns.tsx      | 137 +++++++
 apps/renterd/contexts/alerts/data.tsx         | 386 ++++++++++++++++++
 apps/renterd/contexts/alerts/index.tsx        | 219 ++++++++++
 apps/renterd/contexts/alerts/types.ts         |  29 ++
 apps/renterd/contexts/dialog.tsx              |   6 -
 apps/renterd/contexts/uploads/index.tsx       |   2 -
 apps/renterd/dialogs/AlertsDialog.tsx         | 359 ----------------
 apps/renterd/pages/alerts/index.tsx           |   5 +
 .../src/components/Table/TableRow.tsx         |   8 +-
 .../src/components/Table/index.tsx            |   8 +-
 .../src/components/ValueCopyable.tsx          |  18 +-
 libs/design-system/src/core/Panel.tsx         |  36 +-
 libs/react-renterd/src/bus.ts                 |  15 +-
 36 files changed, 1378 insertions(+), 438 deletions(-)
 create mode 100644 .changeset/fuzzy-dolphins-do.md
 create mode 100644 .changeset/quiet-pens-bow.md
 create mode 100644 .changeset/real-crabs-speak.md
 create mode 100644 .changeset/seven-terms-thank.md
 create mode 100644 .changeset/tasty-rocks-compete.md
 create mode 100644 .changeset/twenty-snakes-look.md
 create mode 100644 apps/renterd/components/Alerts/AlertContextMenu.tsx
 create mode 100644 apps/renterd/components/Alerts/AlertsActionsMenu.tsx
 create mode 100644 apps/renterd/components/Alerts/AlertsCmd/index.tsx
 create mode 100644 apps/renterd/components/Alerts/AlertsFilterMenu.tsx
 create mode 100644 apps/renterd/components/Alerts/AlertsViewDropdownMenu.tsx
 create mode 100644 apps/renterd/components/Alerts/StateError.tsx
 create mode 100644 apps/renterd/components/Alerts/StateNoneMatching.tsx
 create mode 100644 apps/renterd/components/Alerts/StateNoneYet.tsx
 create mode 100644 apps/renterd/components/Alerts/index.tsx
 create mode 100644 apps/renterd/components/Hosts/HostContextMenuFromId.tsx
 create mode 100644 apps/renterd/contexts/alerts/columns.tsx
 create mode 100644 apps/renterd/contexts/alerts/data.tsx
 create mode 100644 apps/renterd/contexts/alerts/index.tsx
 create mode 100644 apps/renterd/contexts/alerts/types.ts
 delete mode 100644 apps/renterd/dialogs/AlertsDialog.tsx
 create mode 100644 apps/renterd/pages/alerts/index.tsx

diff --git a/.changeset/fuzzy-dolphins-do.md b/.changeset/fuzzy-dolphins-do.md
new file mode 100644
index 000000000..24a01e388
--- /dev/null
+++ b/.changeset/fuzzy-dolphins-do.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Added a rowSize auto variant to Table.
diff --git a/.changeset/quiet-pens-bow.md b/.changeset/quiet-pens-bow.md
new file mode 100644
index 000000000..b98f059ad
--- /dev/null
+++ b/.changeset/quiet-pens-bow.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Added a custom contextMenu prop to ValueCopyable.
diff --git a/.changeset/real-crabs-speak.md b/.changeset/real-crabs-speak.md
new file mode 100644
index 000000000..174fc3dcc
--- /dev/null
+++ b/.changeset/real-crabs-speak.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Added a subtle variant to Panel.
diff --git a/.changeset/seven-terms-thank.md b/.changeset/seven-terms-thank.md
new file mode 100644
index 000000000..7e545825a
--- /dev/null
+++ b/.changeset/seven-terms-thank.md
@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Alerts now support pagination. Closes https://github.com/SiaFoundation/renterd/issues/1001 Closes https://github.com/SiaFoundation/renterd/issues/862
diff --git a/.changeset/tasty-rocks-compete.md b/.changeset/tasty-rocks-compete.md
new file mode 100644
index 000000000..790202716
--- /dev/null
+++ b/.changeset/tasty-rocks-compete.md
@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Alerts now support the accumulated churn alert. Closes https://github.com/SiaFoundation/renterd/issues/1005
diff --git a/.changeset/twenty-snakes-look.md b/.changeset/twenty-snakes-look.md
new file mode 100644
index 000000000..c6863fc78
--- /dev/null
+++ b/.changeset/twenty-snakes-look.md
@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Alerts now have a dedicated tab with a larger area for display and navigation.
diff --git a/apps/renterd/components/Alerts/AlertContextMenu.tsx b/apps/renterd/components/Alerts/AlertContextMenu.tsx
new file mode 100644
index 000000000..e637fb44b
--- /dev/null
+++ b/apps/renterd/components/Alerts/AlertContextMenu.tsx
@@ -0,0 +1,54 @@
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  Button,
+  DropdownMenuLeftSlot,
+  DropdownMenuLabel,
+  Text,
+} from '@siafoundation/design-system'
+import { Draggable16, Checkmark16 } from '@siafoundation/react-icons'
+import { useAlerts } from '../../contexts/alerts'
+
+type Props = {
+  id: string
+  contentProps?: React.ComponentProps<typeof DropdownMenu>['contentProps']
+  buttonProps?: React.ComponentProps<typeof Button>
+}
+
+export function AlertContextMenu({ id, contentProps, buttonProps }: Props) {
+  const { dismissOne } = useAlerts()
+
+  return (
+    <DropdownMenu
+      trigger={
+        <Button variant="ghost" icon="hover" {...buttonProps}>
+          <Draggable16 />
+        </Button>
+      }
+      contentProps={{
+        align: 'start',
+        ...contentProps,
+        onClick: (e) => {
+          e.stopPropagation()
+        },
+      }}
+    >
+      <div className="px-1.5 py-1">
+        <Text size="14" weight="medium" color="subtle">
+          Alert {id.slice(0, 24)}...
+        </Text>
+      </div>
+      <DropdownMenuLabel>Actions</DropdownMenuLabel>
+      <DropdownMenuItem
+        onSelect={() => {
+          dismissOne(id)
+        }}
+      >
+        <DropdownMenuLeftSlot>
+          <Checkmark16 />
+        </DropdownMenuLeftSlot>
+        Clear alert
+      </DropdownMenuItem>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/renterd/components/Alerts/AlertsActionsMenu.tsx b/apps/renterd/components/Alerts/AlertsActionsMenu.tsx
new file mode 100644
index 000000000..84f2b5acc
--- /dev/null
+++ b/apps/renterd/components/Alerts/AlertsActionsMenu.tsx
@@ -0,0 +1,9 @@
+import { AlertsViewDropdownMenu } from './AlertsViewDropdownMenu'
+
+export function AlertsActionsMenu() {
+  return (
+    <div className="flex gap-2">
+      <AlertsViewDropdownMenu />
+    </div>
+  )
+}
diff --git a/apps/renterd/components/Alerts/AlertsCmd/index.tsx b/apps/renterd/components/Alerts/AlertsCmd/index.tsx
new file mode 100644
index 000000000..bfd198d76
--- /dev/null
+++ b/apps/renterd/components/Alerts/AlertsCmd/index.tsx
@@ -0,0 +1,55 @@
+import {
+  CommandGroup,
+  CommandItemNav,
+  CommandItemSearch,
+} from '../../CmdRoot/Item'
+import { Page } from '../../CmdRoot/types'
+import { useRouter } from 'next/router'
+import { useDialog } from '../../../contexts/dialog'
+import { routes } from '../../../config/routes'
+
+export const commandPage = {
+  namespace: 'alerts',
+  label: 'Alerts',
+}
+
+export function AlertsCmd({
+  currentPage,
+  parentPage,
+  pushPage,
+}: {
+  currentPage: Page
+  parentPage?: Page
+  beforeSelect?: () => void
+  afterSelect?: () => void
+  pushPage: (page: Page) => void
+}) {
+  const router = useRouter()
+  const { closeDialog } = useDialog()
+  return (
+    <>
+      <CommandItemNav
+        currentPage={currentPage}
+        parentPage={parentPage}
+        commandPage={parentPage}
+        onSelect={() => {
+          pushPage(commandPage)
+        }}
+      >
+        {commandPage.label}
+      </CommandItemNav>
+      <CommandGroup currentPage={currentPage} commandPage={commandPage}>
+        <CommandItemSearch
+          currentPage={currentPage}
+          commandPage={commandPage}
+          onSelect={() => {
+            router.push(routes.alerts.index)
+            closeDialog()
+          }}
+        >
+          View alerts
+        </CommandItemSearch>
+      </CommandGroup>
+    </>
+  )
+}
diff --git a/apps/renterd/components/Alerts/AlertsFilterMenu.tsx b/apps/renterd/components/Alerts/AlertsFilterMenu.tsx
new file mode 100644
index 000000000..c61c51b9e
--- /dev/null
+++ b/apps/renterd/components/Alerts/AlertsFilterMenu.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import { Button, PaginatorKnownTotal, Text } from '@siafoundation/design-system'
+import { useAlerts } from '../../contexts/alerts'
+import { Checkmark16 } from '@carbon/icons-react'
+
+export function AlertsFilterMenu() {
+  const {
+    severityFilter,
+    setSeverityFilter,
+    offset,
+    limit,
+    totals,
+    pageCount,
+    dataState,
+    datasetPage,
+    dismissMany,
+  } = useAlerts()
+
+  return (
+    <div className="flex gap-2 w-full items-center">
+      <Text weight="medium">Filter</Text>
+      <div className="flex gap-1 items-center">
+        <Button
+          variant={severityFilter === undefined ? 'active' : 'inactive'}
+          onClick={() => setSeverityFilter(undefined)}
+        >
+          all ({totals.all})
+        </Button>
+        <Button
+          variant={severityFilter === 'info' ? 'active' : 'inactive'}
+          onClick={() => setSeverityFilter('info')}
+        >
+          info ({totals.info})
+        </Button>
+        <Button
+          variant={severityFilter === 'warning' ? 'active' : 'inactive'}
+          onClick={() => setSeverityFilter('warning')}
+        >
+          warning ({totals.warning})
+        </Button>
+        <Button
+          variant={severityFilter === 'error' ? 'active' : 'inactive'}
+          onClick={() => setSeverityFilter('error')}
+        >
+          error ({totals.error})
+        </Button>
+        <Button
+          variant={severityFilter === 'critical' ? 'active' : 'inactive'}
+          onClick={() => setSeverityFilter('critical')}
+        >
+          critical ({totals.critical})
+        </Button>
+      </div>
+      <div className="flex-1" />
+      {!dataState && !!pageCount && (
+        <Button
+          tip={severityFilter ? `dismiss ${pageCount}` : 'dismiss all'}
+          onClick={() => dismissMany(datasetPage.map((a) => a.id))}
+        >
+          <Checkmark16 />
+          Dismiss ({pageCount})
+        </Button>
+      )}
+      <PaginatorKnownTotal
+        offset={offset}
+        limit={limit}
+        isLoading={dataState === 'loading'}
+        datasetTotal={totals.all}
+        pageTotal={pageCount}
+      />
+    </div>
+  )
+}
diff --git a/apps/renterd/components/Alerts/AlertsViewDropdownMenu.tsx b/apps/renterd/components/Alerts/AlertsViewDropdownMenu.tsx
new file mode 100644
index 000000000..09577829a
--- /dev/null
+++ b/apps/renterd/components/Alerts/AlertsViewDropdownMenu.tsx
@@ -0,0 +1,78 @@
+import {
+  Button,
+  PoolCombo,
+  Label,
+  Popover,
+  MenuItemRightSlot,
+  BaseMenuItem,
+  MenuSectionLabelToggleAll,
+} from '@siafoundation/design-system'
+import {
+  CaretDown16,
+  SettingsAdjust16,
+  Reset16,
+} from '@siafoundation/react-icons'
+import { useAlerts } from '../../contexts/alerts'
+
+export function AlertsViewDropdownMenu() {
+  const {
+    configurableColumns,
+    toggleColumnVisibility,
+    resetDefaultColumnVisibility,
+    setColumnsVisible,
+    setColumnsHidden,
+    enabledColumns,
+  } = useAlerts()
+
+  const generalColumns = configurableColumns
+    .filter((c) => c.category === 'general')
+    .map((column) => ({
+      label: column.label,
+      value: column.id,
+    }))
+  return (
+    <Popover
+      trigger={
+        <Button size="small" tip="Configure view" tipAlign="end">
+          <SettingsAdjust16 />
+          View
+          <CaretDown16 />
+        </Button>
+      }
+      contentProps={{
+        align: 'end',
+        className: 'max-w-[300px]',
+      }}
+    >
+      <BaseMenuItem>
+        <Label>Display properties</Label>
+        <MenuItemRightSlot>
+          <Button
+            tip="Reset all to defaults"
+            variant="ghost"
+            onClick={(e) => {
+              e.stopPropagation()
+              resetDefaultColumnVisibility()
+            }}
+          >
+            <Reset16 />
+          </Button>
+        </MenuItemRightSlot>
+      </BaseMenuItem>
+      <MenuSectionLabelToggleAll
+        label="General"
+        columns={generalColumns.map((c) => c.value)}
+        enabled={enabledColumns}
+        setColumnsVisible={setColumnsVisible}
+        setColumnsHidden={setColumnsHidden}
+      />
+      <BaseMenuItem>
+        <PoolCombo
+          options={generalColumns}
+          values={enabledColumns}
+          onChange={(value) => toggleColumnVisibility(value)}
+        />
+      </BaseMenuItem>
+    </Popover>
+  )
+}
diff --git a/apps/renterd/components/Alerts/StateError.tsx b/apps/renterd/components/Alerts/StateError.tsx
new file mode 100644
index 000000000..164324f3c
--- /dev/null
+++ b/apps/renterd/components/Alerts/StateError.tsx
@@ -0,0 +1,16 @@
+import { Text } from '@siafoundation/design-system'
+import { MisuseOutline32 } from '@siafoundation/react-icons'
+
+export function StateError() {
+  const message = 'Error fetching alerts.'
+  return (
+    <div className="flex flex-col gap-10 justify-center items-center h-[400px]">
+      <Text>
+        <MisuseOutline32 className="scale-[200%]" />
+      </Text>
+      <Text color="subtle" className="text-center max-w-[500px]">
+        {message}
+      </Text>
+    </div>
+  )
+}
diff --git a/apps/renterd/components/Alerts/StateNoneMatching.tsx b/apps/renterd/components/Alerts/StateNoneMatching.tsx
new file mode 100644
index 000000000..c97352875
--- /dev/null
+++ b/apps/renterd/components/Alerts/StateNoneMatching.tsx
@@ -0,0 +1,15 @@
+import { Text } from '@siafoundation/design-system'
+import { Filter32 } from '@siafoundation/react-icons'
+
+export function StateNoneMatching() {
+  return (
+    <div className="flex flex-col gap-10 justify-center items-center h-[400px]">
+      <Text>
+        <Filter32 className="scale-[200%]" />
+      </Text>
+      <Text color="subtle" className="text-center max-w-[500px]">
+        No alerts matching filters.
+      </Text>
+    </div>
+  )
+}
diff --git a/apps/renterd/components/Alerts/StateNoneYet.tsx b/apps/renterd/components/Alerts/StateNoneYet.tsx
new file mode 100644
index 000000000..98e2d36c1
--- /dev/null
+++ b/apps/renterd/components/Alerts/StateNoneYet.tsx
@@ -0,0 +1,17 @@
+import { Text } from '@siafoundation/design-system'
+import { Task32 } from '@siafoundation/react-icons'
+
+export function StateNoneYet() {
+  return (
+    <div className="flex flex-col gap-10 justify-center items-center h-[400px] cursor-pointer">
+      <Text>
+        <Task32 className="scale-[2]" />
+      </Text>
+      <div className="flex flex-col gap-3 items-center">
+        <Text color="subtle" className="text-center max-w-[500px]">
+          There are currenty no alerts.
+        </Text>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/renterd/components/Alerts/index.tsx b/apps/renterd/components/Alerts/index.tsx
new file mode 100644
index 000000000..b7853b845
--- /dev/null
+++ b/apps/renterd/components/Alerts/index.tsx
@@ -0,0 +1,61 @@
+import { RenterdSidenav } from '../RenterdSidenav'
+import { routes } from '../../config/routes'
+import { Table } from '@siafoundation/design-system'
+import { useDialog } from '../../contexts/dialog'
+import { RenterdAuthedLayout } from '../RenterdAuthedLayout'
+import { StateNoneMatching } from './StateNoneMatching'
+import { StateNoneYet } from './StateNoneYet'
+import { AlertsActionsMenu } from './AlertsActionsMenu'
+import { StateError } from './StateError'
+import { useAlerts } from '../../contexts/alerts'
+import { AlertsFilterMenu } from './AlertsFilterMenu'
+
+export function Alerts() {
+  const { openDialog } = useDialog()
+  const {
+    columns,
+    datasetPage,
+    sortField,
+    sortDirection,
+    sortableColumns,
+    toggleSort,
+    limit,
+    dataState,
+    cellContext,
+  } = useAlerts()
+
+  return (
+    <RenterdAuthedLayout
+      title="Alerts"
+      routes={routes}
+      sidenav={<RenterdSidenav />}
+      openSettings={() => openDialog('settings')}
+      actions={<AlertsActionsMenu />}
+      stats={<AlertsFilterMenu />}
+    >
+      <div className="p-6 min-w-fit">
+        <Table
+          context={cellContext}
+          isLoading={dataState === 'loading'}
+          emptyState={
+            dataState === 'noneMatchingFilters' ? (
+              <StateNoneMatching />
+            ) : dataState === 'noneYet' ? (
+              <StateNoneYet />
+            ) : dataState === 'error' ? (
+              <StateError />
+            ) : null
+          }
+          sortableColumns={sortableColumns}
+          pageSize={limit}
+          data={datasetPage}
+          columns={columns}
+          sortDirection={sortDirection}
+          sortField={sortField}
+          toggleSort={toggleSort}
+          rowSize="auto"
+        />
+      </div>
+    </RenterdAuthedLayout>
+  )
+}
diff --git a/apps/renterd/components/CmdRoot/index.tsx b/apps/renterd/components/CmdRoot/index.tsx
index cfdb2ada8..cfc7a012b 100644
--- a/apps/renterd/components/CmdRoot/index.tsx
+++ b/apps/renterd/components/CmdRoot/index.tsx
@@ -15,6 +15,7 @@ import { useDialog } from '../../contexts/dialog'
 import { useRouter } from 'next/router'
 import { routes } from '../../config/routes'
 import { ContractsCmd } from '../Contracts/ContractsCmd'
+import { AlertsCmd } from '../Alerts/AlertsCmd'
 import { Page } from './types'
 import { useContracts } from '../../contexts/contracts'
 import { HostsCmd } from '../Hosts/HostsCmd'
@@ -145,6 +146,20 @@ export function CmdRoot({ panel }: Props) {
             afterSelect()
           }}
         />
+        <AlertsCmd
+          currentPage={page}
+          pushPage={pushPage}
+          beforeSelect={() => {
+            beforeSelect()
+            resetContractsFilters()
+          }}
+          afterSelect={() => {
+            if (!router.pathname.startsWith(routes.alerts.index)) {
+              router.push(routes.alerts.index)
+            }
+            afterSelect()
+          }}
+        />
         <ConfigCmdGroup currentPage={page} pushPage={pushPage} />
         <NodeCmdGroup currentPage={page} pushPage={pushPage} />
       </Command.List>
diff --git a/apps/renterd/components/Contracts/ContractContextMenu.tsx b/apps/renterd/components/Contracts/ContractContextMenu.tsx
index 0a3671ec1..d3549190f 100644
--- a/apps/renterd/components/Contracts/ContractContextMenu.tsx
+++ b/apps/renterd/components/Contracts/ContractContextMenu.tsx
@@ -30,6 +30,7 @@ import { useContractConfirmDelete } from './useContractConfirmDelete'
 
 type Props = {
   id: string
+  trigger?: React.ReactNode
   address: string
   publicKey: string
   contentProps?: React.ComponentProps<typeof DropdownMenu>['contentProps']
@@ -38,6 +39,7 @@ type Props = {
 
 export function ContractContextMenu({
   id,
+  trigger,
   address,
   publicKey,
   contentProps,
@@ -56,9 +58,11 @@ export function ContractContextMenu({
   return (
     <DropdownMenu
       trigger={
-        <Button variant="ghost" icon="hover" {...buttonProps}>
-          <Draggable16 />
-        </Button>
+        trigger || (
+          <Button variant="ghost" icon="hover" {...buttonProps}>
+            <Draggable16 />
+          </Button>
+        )
       }
       contentProps={{
         align: 'start',
diff --git a/apps/renterd/components/Contracts/ContractContextMenuFromId.tsx b/apps/renterd/components/Contracts/ContractContextMenuFromId.tsx
index cbe88a9ff..f548e9946 100644
--- a/apps/renterd/components/Contracts/ContractContextMenuFromId.tsx
+++ b/apps/renterd/components/Contracts/ContractContextMenuFromId.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@siafoundation/design-system'
-import { Draggable16 } from '@siafoundation/react-icons'
+import { CaretDown16 } from '@siafoundation/react-icons'
 import { useContract } from '@siafoundation/react-renterd'
 import { ContractContextMenu } from './ContractContextMenu'
 
@@ -22,8 +22,14 @@ export function ContractContextMenuFromId({
 
   if (!contract.data) {
     return (
-      <Button variant="ghost" icon="hover" state="waiting" {...buttonProps}>
-        <Draggable16 />
+      <Button
+        size="none"
+        icon="hover"
+        variant="ghost"
+        state="waiting"
+        {...buttonProps}
+      >
+        <CaretDown16 />
       </Button>
     )
   }
@@ -34,6 +40,11 @@ export function ContractContextMenuFromId({
       publicKey={contract.data.hostKey}
       contentProps={contentProps}
       buttonProps={buttonProps}
+      trigger={
+        <Button size="none" icon="hover" variant="ghost" {...buttonProps}>
+          <CaretDown16 />
+        </Button>
+      }
     />
   )
 }
diff --git a/apps/renterd/components/Hosts/HostContextMenu.tsx b/apps/renterd/components/Hosts/HostContextMenu.tsx
index df5357ffe..e627c42be 100644
--- a/apps/renterd/components/Hosts/HostContextMenu.tsx
+++ b/apps/renterd/components/Hosts/HostContextMenu.tsx
@@ -38,6 +38,7 @@ type Props = {
   publicKey: string
   contentProps?: React.ComponentProps<typeof DropdownMenu>['contentProps']
   buttonProps?: React.ComponentProps<typeof Button>
+  trigger?: React.ReactNode
 }
 
 export function HostContextMenu({
@@ -45,6 +46,7 @@ export function HostContextMenu({
   publicKey,
   contentProps,
   buttonProps,
+  trigger,
 }: Props) {
   const router = useRouter()
   const { setFilter: setHostsFilter, resetFilters: resetHostsFilters } =
@@ -60,9 +62,11 @@ export function HostContextMenu({
   return (
     <DropdownMenu
       trigger={
-        <Button variant="ghost" icon="hover" {...buttonProps}>
-          <Draggable16 />
-        </Button>
+        trigger || (
+          <Button variant="ghost" icon="hover" {...buttonProps}>
+            <Draggable16 />
+          </Button>
+        )
       }
       contentProps={{
         align: 'start',
diff --git a/apps/renterd/components/Hosts/HostContextMenuFromId.tsx b/apps/renterd/components/Hosts/HostContextMenuFromId.tsx
new file mode 100644
index 000000000..72e3ff4da
--- /dev/null
+++ b/apps/renterd/components/Hosts/HostContextMenuFromId.tsx
@@ -0,0 +1,47 @@
+import { Button } from '@siafoundation/design-system'
+import { CaretDown16 } from '@siafoundation/react-icons'
+import { useHost } from '@siafoundation/react-renterd'
+import { HostContextMenu } from './HostContextMenu'
+
+type Props = {
+  hostKey: string
+  contentProps?: React.ComponentProps<typeof HostContextMenu>['contentProps']
+  buttonProps?: React.ComponentProps<typeof Button>
+}
+
+export function HostContextMenuFromKey({
+  hostKey,
+  contentProps,
+  buttonProps,
+}: Props) {
+  const host = useHost({
+    params: { hostKey },
+  })
+
+  if (!host.data) {
+    return (
+      <Button
+        size="none"
+        icon="hover"
+        variant="ghost"
+        state="waiting"
+        {...buttonProps}
+      >
+        <CaretDown16 />
+      </Button>
+    )
+  }
+  return (
+    <HostContextMenu
+      address={host.data.netAddress}
+      publicKey={host.data.publicKey}
+      contentProps={contentProps}
+      buttonProps={buttonProps}
+      trigger={
+        <Button size="none" icon="hover" variant="ghost" {...buttonProps}>
+          <CaretDown16 />
+        </Button>
+      }
+    />
+  )
+}
diff --git a/apps/renterd/components/RenterdSidenav.tsx b/apps/renterd/components/RenterdSidenav.tsx
index 5f0349be1..46a26aefd 100644
--- a/apps/renterd/components/RenterdSidenav.tsx
+++ b/apps/renterd/components/RenterdSidenav.tsx
@@ -7,22 +7,15 @@ import {
   BellIcon,
   KeyIcon,
 } from '@siafoundation/react-icons'
-import { useAlerts } from '@siafoundation/react-renterd'
 import { cx } from 'class-variance-authority'
 import { routes } from '../config/routes'
-import { useDialog } from '../contexts/dialog'
+import { useAlerts } from '../contexts/alerts'
 
 export function RenterdSidenav() {
-  const alerts = useAlerts()
-  const { openDialog } = useDialog()
-
-  const onlyInfoAlerts = !alerts.data?.find((a) => a.severity !== 'info')
-  const alertCount = alerts.data?.length || 0
+  const { totals } = useAlerts()
+  const onlyInfoAlerts = totals.all === totals.info
   return (
     <>
-      {/* <SidenavItem title="Dashboard" route={routes.home}>
-        <HouseIcon />
-      </SidenavItem> */}
       <SidenavItem title="Files" route={routes.buckets.index}>
         <FolderIcon />
       </SidenavItem>
@@ -39,31 +32,32 @@ export function RenterdSidenav() {
         <KeyIcon />
       </SidenavItem>
       <div className="relative">
-        {!!alertCount && onlyInfoAlerts && (
-          <div
-            className={cx(
-              'absolute -right-[2px] top-px w-1 h-1',
-              'rounded-full',
-              'bg-gray-1000 dark:bg-white',
-              'pointer-events-none'
-            )}
-          />
-        )}
-        {!!alertCount && !onlyInfoAlerts && (
-          <Text
-            size="10"
-            className={cx(
-              'absolute -right-[9px] -top-1 py-px px-[5px]',
-              'text-white',
-              'bg-red-500 dark:bg-red-500 rounded',
-              'pointer-events-none'
-            )}
-            color="none"
-          >
-            {alertCount.toLocaleString()}
-          </Text>
-        )}
-        <SidenavItem title="Alerts" onClick={() => openDialog('alerts')}>
+        {totals.all ? (
+          onlyInfoAlerts ? (
+            <div
+              className={cx(
+                'absolute -right-[2px] top-px w-1 h-1',
+                'rounded-full',
+                'bg-gray-1000 dark:bg-white',
+                'pointer-events-none'
+              )}
+            />
+          ) : (
+            <Text
+              size="10"
+              className={cx(
+                'absolute -right-[9px] -top-1 py-px px-[5px]',
+                'text-white',
+                'bg-red-500 dark:bg-red-500 rounded',
+                'pointer-events-none'
+              )}
+              color="none"
+            >
+              {totals.all.toLocaleString()}
+            </Text>
+          )
+        ) : null}
+        <SidenavItem title="Alerts" route={routes.alerts.index}>
           <BellIcon />
         </SidenavItem>
       </div>
diff --git a/apps/renterd/config/providers.tsx b/apps/renterd/config/providers.tsx
index 7f0e4b633..413a68929 100644
--- a/apps/renterd/config/providers.tsx
+++ b/apps/renterd/config/providers.tsx
@@ -12,6 +12,7 @@ import { FilesFlatProvider } from '../contexts/filesFlat'
 import { FilesManagerProvider } from '../contexts/filesManager'
 import { FilesDirectoryProvider } from '../contexts/filesDirectory'
 import { UploadsProvider } from '../contexts/uploads'
+import { AlertsProvider } from '../contexts/alerts'
 
 type Props = {
   children: React.ReactNode
@@ -30,12 +31,14 @@ export function Providers({ children }: Props) {
                     <FilesDirectoryProvider>
                       <FilesFlatProvider>
                         <KeysProvider>
-                          {/* this is here so that dialogs can use all the other providers,
+                          <AlertsProvider>
+                            {/* this is here so that dialogs can use all the other providers,
                   and the other providers can trigger dialogs */}
-                          <OnboardingBar />
-                          <TransfersBar />
-                          <Dialogs />
-                          {children}
+                            <OnboardingBar />
+                            <TransfersBar />
+                            <Dialogs />
+                            {children}
+                          </AlertsProvider>
                         </KeysProvider>
                       </FilesFlatProvider>
                     </FilesDirectoryProvider>
diff --git a/apps/renterd/config/routes.ts b/apps/renterd/config/routes.ts
index f2071d328..7cf27a19d 100644
--- a/apps/renterd/config/routes.ts
+++ b/apps/renterd/config/routes.ts
@@ -29,6 +29,9 @@ export const routes = {
   keys: {
     index: '/keys',
   },
+  alerts: {
+    index: '/alerts',
+  },
   node: {
     index: '/node',
   },
diff --git a/apps/renterd/contexts/alerts/columns.tsx b/apps/renterd/contexts/alerts/columns.tsx
new file mode 100644
index 000000000..56fcceb5d
--- /dev/null
+++ b/apps/renterd/contexts/alerts/columns.tsx
@@ -0,0 +1,137 @@
+import {
+  Badge,
+  Button,
+  ControlGroup,
+  Panel,
+  Separator,
+  TableColumn,
+  Text,
+} from '@siafoundation/design-system'
+import { AlertData, TableColumnId } from './types'
+import { dataFields } from './data'
+import { Checkmark16 } from '@carbon/icons-react'
+import { formatRelative } from 'date-fns'
+import { Fragment, useMemo } from 'react'
+
+type Context = never
+
+type KeysTableColumn = TableColumn<TableColumnId, AlertData, Context> & {
+  fixed?: boolean
+  category?: string
+}
+
+export const columns: KeysTableColumn[] = [
+  {
+    id: 'actions',
+    label: '',
+    fixed: true,
+    cellClassName: 'w-[50px] !pr-4 [&+*]:!pl-0',
+    render: ({ data: { dismiss } }) => (
+      <ControlGroup>
+        <Button tip="Dismiss alert" onClick={dismiss}>
+          <Checkmark16 />
+        </Button>
+        {/* <AlertContextMenu id={id} buttonProps={{ variant: 'gray' }} /> */}
+      </ControlGroup>
+    ),
+  },
+  {
+    id: 'overview',
+    label: 'overview',
+    category: 'general',
+    contentClassName: 'min-w-[200px] max-w-[500px]',
+    render: ({ data: { message, severity, data } }) => {
+      return (
+        <div className="flex flex-col gap-1 py-4">
+          <div className="flex gap-1 items-center">
+            <Badge
+              variant={
+                severity === 'error' || severity === 'critical'
+                  ? 'red'
+                  : severity === 'warning'
+                  ? 'amber'
+                  : 'gray'
+              }
+              size="small"
+            >
+              {severity}
+            </Badge>
+            <Text weight="medium" noWrap>
+              {message}
+            </Text>
+          </div>
+          {data['hint'] && (
+            <Text size="12" color="subtle">
+              {data['hint'] as string}
+            </Text>
+          )}
+          {data['error'] && (
+            <Text size="12" color="subtle">
+              {data['error'] as string}
+            </Text>
+          )}
+        </div>
+      )
+    },
+  },
+  {
+    id: 'data',
+    label: 'data',
+    contentClassName: 'w-[400px]',
+    category: 'general',
+    render: function DataColumn({ data: { data } }) {
+      const datums = useMemo(
+        () =>
+          Object.keys(dataFields)
+            .map((key) => {
+              const value = data[key]
+              if (
+                value === undefined ||
+                value === null ||
+                (typeof value === 'object' && !Object.keys(value).length)
+              ) {
+                return null
+              }
+              return { key, value }
+            })
+            .filter(Boolean),
+        [data]
+      )
+      return (
+        <div className="py-4 w-full">
+          <Panel color="subtle" className="flex flex-col gap-1 w-full py-1">
+            {datums.map(({ key, value }, i) => {
+              const Component = dataFields?.[key]?.render
+              if (!Component) {
+                return null
+              }
+              return (
+                <Fragment key={key}>
+                  <div className="py-1 px-2">
+                    <Component key={key} value={value} />
+                  </div>
+                  {datums.length > 1 && i < datums.length - 1 && (
+                    <Separator color="verySubtle" className="w-full" />
+                  )}
+                </Fragment>
+              )
+            })}
+          </Panel>
+        </div>
+      )
+    },
+  },
+  {
+    id: 'time',
+    label: 'time',
+    category: 'general',
+    contentClassName: 'w-[120px] justify-end',
+    render: ({ data: { timestamp } }) => {
+      return (
+        <Text color="subtle" size="12" ellipsis>
+          {formatRelative(new Date(), new Date(timestamp))}
+        </Text>
+      )
+    },
+  },
+]
diff --git a/apps/renterd/contexts/alerts/data.tsx b/apps/renterd/contexts/alerts/data.tsx
new file mode 100644
index 000000000..cf5e35847
--- /dev/null
+++ b/apps/renterd/contexts/alerts/data.tsx
@@ -0,0 +1,386 @@
+import {
+  Link,
+  ScrollArea,
+  Text,
+  Tooltip,
+  ValueCopyable,
+  ValueMenu,
+  ValueSc,
+} from '@siafoundation/design-system'
+import { useHost, useSlabObjects } from '@siafoundation/react-renterd'
+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 { HostContextMenuFromKey } from '../../components/Hosts/HostContextMenuFromId'
+import { ContractContextMenuFromId } from '../../components/Contracts/ContractContextMenuFromId'
+import { humanBytes } from '@siafoundation/units'
+import { formatRelative } from 'date-fns'
+
+export const dataFields: Record<
+  string,
+  { render: (props: { value: unknown }) => JSX.Element }
+> = {
+  origin: {
+    render: function OriginField({ value }: { value: string }) {
+      return (
+        <div className="flex justify-between w-full gap-2">
+          <Text size="12" color="subtle" ellipsis>
+            origin
+          </Text>
+          <Text size="12" color="contrast" ellipsis>
+            {value}
+          </Text>
+        </div>
+      )
+    },
+  },
+  contractID: {
+    render: function ContractField({ value }: { value: string }) {
+      return (
+        <div className="flex justify-between w-full gap-2">
+          <Text size="12" color="subtle" ellipsis>
+            contract ID
+          </Text>
+          <ValueMenu
+            value={value}
+            menu={
+              <ContractContextMenuFromId
+                id={value}
+                contentProps={{
+                  align: 'end',
+                }}
+                buttonProps={{
+                  size: 'none',
+                }}
+              />
+            }
+          />
+        </div>
+      )
+    },
+  },
+  accountID: {
+    render: function AccountField({ value }: { value: string }) {
+      return (
+        <div className="flex justify-between w-full gap-2">
+          <Text size="12" color="subtle" ellipsis>
+            account ID
+          </Text>
+          <ValueCopyable size="12" value={value} label="account ID" />
+        </div>
+      )
+    },
+  },
+  hostKey: {
+    render: function HostField({ value }: { value: string }) {
+      const host = useHost({ params: { hostKey: value } })
+      if (!host.data) {
+        return null
+      }
+      return (
+        <div className="flex justify-between w-full gap-2">
+          <Text size="12" color="subtle" ellipsis>
+            host key
+          </Text>
+          <ValueMenu
+            value={value}
+            menu={
+              <HostContextMenu
+                publicKey={host.data.publicKey}
+                address={host.data.netAddress}
+                contentProps={{
+                  align: 'end',
+                }}
+                buttonProps={{
+                  size: 'none',
+                }}
+              />
+            }
+          />
+        </div>
+      )
+    },
+  },
+  slabKey: {
+    render: function SlabField({ value }: { value: 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>
+              key
+            </Text>
+            <ValueCopyable size="12" value={value} />
+          </div>
+          {objects.data && (
+            <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>
+          )}
+        </div>
+      )
+    },
+  },
+  added: {
+    render: ({ value }: { value: number }) => (
+      <div className="flex justify-between w-full gap-2">
+        <Text size="12" color="subtle" ellipsis>
+          added
+        </Text>
+        <Text size="12" color="contrast" ellipsis>
+          {value}
+        </Text>
+      </div>
+    ),
+  },
+  removed: {
+    render: ({ value }: { value: number }) => (
+      <div className="flex justify-between w-full gap-2">
+        <Text size="12" color="subtle" ellipsis>
+          removed
+        </Text>
+        <Text size="12" color="contrast" ellipsis>
+          {value}
+        </Text>
+      </div>
+    ),
+  },
+  setAdditions: {
+    render: function AdditionsField({
+      value,
+    }: {
+      value: Record<
+        string,
+        {
+          hostKey: string
+          additions: { size: number; time: string }[]
+        }
+      >
+    }) {
+      return (
+        <div className="flex flex-col gap-2">
+          <Text size="12" color="subtle" ellipsis>
+            contract set additions
+          </Text>
+          {value && (
+            <div className="flex flex-col gap-3 mb-2">
+              {Object.entries(value).map(
+                ([contractId, { hostKey, additions }], i) => (
+                  <ContractSetChange
+                    key={contractId}
+                    contractId={contractId}
+                    hostKey={hostKey}
+                    changes={additions}
+                    i={i}
+                  />
+                )
+              )}
+            </div>
+          )}
+        </div>
+      )
+    },
+  },
+  setRemovals: {
+    render: function RemovalsField({
+      value,
+    }: {
+      value: Record<
+        string,
+        {
+          hostKey: string
+          removals: { reasons: string; size: number; time: string }[]
+        }
+      >
+    }) {
+      return (
+        <div className="flex flex-col gap-2">
+          <Text size="12" color="subtle" ellipsis>
+            contract set removals
+          </Text>
+          {value && (
+            <div className="flex flex-col gap-3 mb-2">
+              {Object.entries(value).map(
+                ([contractId, { hostKey, removals }], i) => (
+                  <ContractSetChange
+                    key={contractId}
+                    contractId={contractId}
+                    hostKey={hostKey}
+                    changes={removals}
+                    i={i}
+                  />
+                )
+              )}
+            </div>
+          )}
+        </div>
+      )
+    },
+  },
+  migrationsInterrupted: {
+    render: ({ value }: { value: string }) => (
+      <div className="flex justify-between w-full gap-2">
+        <Text size="12" color="subtle" ellipsis>
+          migrations interrupted
+        </Text>
+        <Text size="12" weight="medium" ellipsis>
+          {value ? 'yes' : 'no'}
+        </Text>
+      </div>
+    ),
+  },
+  allowance: {
+    render: ({ value }: { value: string }) => (
+      <div className="flex justify-between w-full gap-2">
+        <Text size="12" color="subtle" ellipsis>
+          allowance
+        </Text>
+        <ValueSc size="12" variant="value" value={new BigNumber(value)} />
+      </div>
+    ),
+  },
+  balance: {
+    render: ({ value }: { value: string }) => (
+      <div className="flex justify-between w-full gap-2">
+        <Text size="12" color="subtle" ellipsis>
+          balance
+        </Text>
+        <ValueSc size="12" variant="value" value={new BigNumber(value)} />
+      </div>
+    ),
+  },
+  address: {
+    render: ({ value }: { value: string }) => (
+      <div className="flex justify-between w-full gap-2">
+        <Text size="12" color="subtle" ellipsis>
+          address
+        </Text>
+        <ValueCopyable size="12" value={value} type="address" />
+      </div>
+    ),
+  },
+  account: {
+    render: ({ value }: { value: string }) => (
+      <div className="flex justify-between w-full gap-2">
+        <Text size="12" color="subtle" ellipsis>
+          account
+        </Text>
+        <ValueCopyable size="12" value={value} />
+      </div>
+    ),
+  },
+}
+
+function ContractSetChange({
+  contractId,
+  hostKey,
+  changes,
+  i,
+}: {
+  contractId: string
+  hostKey: string
+  changes: { reasons?: string; size: number; time: string }[]
+  i: number
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-2 justify-between">
+        <Text size="12" ellipsis>
+          {i + 1}.
+        </Text>
+        <div className="flex gap-2">
+          <Text size="12" color="subtle" ellipsis>
+            contract
+          </Text>
+          <ValueCopyable
+            size="12"
+            value={contractId}
+            contextMenu={
+              <ContractContextMenuFromId
+                id={contractId}
+                contentProps={{
+                  align: 'end',
+                }}
+              />
+            }
+          />
+        </div>
+        <div className="flex gap-2">
+          <Text size="12" color="subtle" ellipsis>
+            host
+          </Text>
+          <ValueCopyable
+            size="12"
+            value={hostKey}
+            label="host key"
+            contextMenu={
+              <HostContextMenuFromKey
+                hostKey={hostKey}
+                contentProps={{
+                  align: 'end',
+                }}
+              />
+            }
+          />
+        </div>
+      </div>
+      {changes.map(({ reasons, size, time }) => (
+        <div key={reasons + time} className="flex gap-2 justify-between">
+          <Tooltip content={reasons}>
+            <Text size="12" ellipsis>
+              {reasons}
+            </Text>
+          </Tooltip>
+          <div className="flex-1" />
+          <div className="flex gap-2">
+            <Text size="12" color="subtle" ellipsis>
+              time
+            </Text>
+            <Text size="12" ellipsis>
+              {formatRelative(new Date(), new Date(time))}
+            </Text>
+          </div>
+          <div className="flex gap-2">
+            <Text size="12" color="subtle" ellipsis>
+              size
+            </Text>
+            <Text size="12" ellipsis>
+              {humanBytes(size)}
+            </Text>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/renterd/contexts/alerts/index.tsx b/apps/renterd/contexts/alerts/index.tsx
new file mode 100644
index 000000000..fd21f9875
--- /dev/null
+++ b/apps/renterd/contexts/alerts/index.tsx
@@ -0,0 +1,219 @@
+import {
+  useTableState,
+  useDatasetEmptyState,
+  useServerFilters,
+} from '@siafoundation/design-system'
+import { useRouter } from 'next/router'
+import { createContext, useContext, useMemo } from 'react'
+import {
+  AlertData,
+  columnsDefaultVisible,
+  defaultSortField,
+  sortOptions,
+} from './types'
+import { columns } from './columns'
+import { defaultDatasetRefreshInterval } from '../../config/swr'
+import {
+  triggerErrorToast,
+  triggerSuccessToast,
+} from '@siafoundation/design-system'
+import {
+  AlertSeverity,
+  AlertsParams,
+  useAlerts as useAlertsData,
+  useAlertsDismiss,
+} from '@siafoundation/react-renterd'
+import { useCallback } from 'react'
+
+const defaultLimit = 50
+
+function useAlertsMain() {
+  const router = useRouter()
+  const limit = Number(router.query.limit || defaultLimit)
+  const offset = Number(router.query.offset || 0)
+  const { filters, setFilter, removeFilter, removeLastFilter, resetFilters } =
+    useServerFilters()
+
+  const setSeverityFilter = useCallback(
+    (severity?: AlertSeverity) => {
+      if (!severity) {
+        removeFilter('severity')
+      } else {
+        setFilter({
+          id: 'severity',
+          value: severity,
+          label: severity,
+        })
+      }
+    },
+    [setFilter, removeFilter]
+  )
+
+  const severityFilter = filters.find((f) => f.id === 'severity')
+    ?.value as AlertSeverity
+
+  const params = useMemo(() => {
+    const params: AlertsParams = {
+      limit,
+      offset,
+    }
+    if (severityFilter) {
+      params.severity = severityFilter
+    }
+    return params
+  }, [limit, offset, severityFilter])
+
+  const response = useAlertsData({
+    params,
+    config: {
+      swr: {
+        refreshInterval: defaultDatasetRefreshInterval,
+      },
+    },
+  })
+  const dismiss = useAlertsDismiss()
+
+  const dismissOne = useCallback(
+    async (id: string) => {
+      const response = await dismiss.post({
+        payload: [id],
+      })
+      if (response.error) {
+        triggerErrorToast('Error dismissing alert.')
+      } else {
+        triggerSuccessToast('Alert has been dismissed.')
+      }
+    },
+    [dismiss]
+  )
+
+  const dismissMany = useCallback(
+    async (ids: string[]) => {
+      const response = await dismiss.post({
+        payload: ids,
+      })
+      if (response.error) {
+        triggerErrorToast('Error dismissing alerts.')
+      } else {
+        triggerSuccessToast('Selected alerts have been dismissed.')
+      }
+    },
+    [dismiss]
+  )
+
+  const datasetPage = useMemo<AlertData[] | null>(() => {
+    if (!response.data) {
+      return null
+    }
+    const data: AlertData[] =
+      response.data?.alerts?.map((a) => ({
+        id: a.id,
+        severity: a.severity,
+        message: a.message,
+        timestamp: a.timestamp,
+        data: a.data,
+        dismiss: () => dismissOne(a.id),
+      })) || []
+    return data
+  }, [response.data, dismissOne])
+
+  const {
+    configurableColumns,
+    enabledColumns,
+    sortableColumns,
+    toggleColumnVisibility,
+    setColumnsVisible,
+    setColumnsHidden,
+    toggleSort,
+    setSortDirection,
+    setSortField,
+    sortField,
+    sortDirection,
+    resetDefaultColumnVisibility,
+  } = useTableState('renterd/v0/keys', {
+    columns,
+    columnsDefaultVisible,
+    sortOptions,
+    defaultSortField,
+  })
+
+  const filteredTableColumns = useMemo(
+    () =>
+      columns.filter(
+        (column) => column.fixed || enabledColumns.includes(column.id)
+      ),
+    [enabledColumns]
+  )
+
+  const dataState = useDatasetEmptyState(
+    datasetPage,
+    response.isValidating,
+    response.error,
+    filters
+  )
+
+  const cellContext = useMemo(() => ({}), [])
+
+  const totals = useMemo(
+    () => ({
+      ...response.data?.totals,
+      all: Object.entries(response.data?.totals || {}).reduce(
+        (acc, [severity, count]) => {
+          return acc + count
+        },
+        0
+      ),
+    }),
+    [response.data]
+  )
+
+  return {
+    dataState,
+    limit,
+    offset,
+    isLoading: response.isLoading,
+    error: response.error,
+    pageCount: datasetPage?.length || 0,
+    totals,
+    columns: filteredTableColumns,
+    datasetPage,
+    cellContext,
+    configurableColumns,
+    enabledColumns,
+    sortableColumns,
+    toggleColumnVisibility,
+    setColumnsVisible,
+    setColumnsHidden,
+    toggleSort,
+    setSortDirection,
+    setSortField,
+    sortField,
+    filters,
+    setFilter,
+    removeFilter,
+    removeLastFilter,
+    resetFilters,
+    sortDirection,
+    resetDefaultColumnVisibility,
+    dismissOne,
+    dismissMany,
+    severityFilter,
+    setSeverityFilter,
+  }
+}
+
+type State = ReturnType<typeof useAlertsMain>
+
+const AlertsContext = createContext({} as State)
+export const useAlerts = () => useContext(AlertsContext)
+
+type Props = {
+  children: React.ReactNode
+}
+
+export function AlertsProvider({ children }: Props) {
+  const state = useAlertsMain()
+  return (
+    <AlertsContext.Provider value={state}>{children}</AlertsContext.Provider>
+  )
+}
diff --git a/apps/renterd/contexts/alerts/types.ts b/apps/renterd/contexts/alerts/types.ts
new file mode 100644
index 000000000..e3ee3c8d2
--- /dev/null
+++ b/apps/renterd/contexts/alerts/types.ts
@@ -0,0 +1,29 @@
+export type AlertSeverity = 'info' | 'warning' | 'error' | 'critical'
+
+export type AlertData = {
+  id: string
+  severity: AlertSeverity
+  message: string
+  timestamp: string
+  data: Record<string, unknown>
+  dismiss: () => void
+}
+
+export type TableColumnId = 'actions' | 'overview' | 'data' | 'time'
+
+export const columnsDefaultVisible: TableColumnId[] = [
+  'actions',
+  'overview',
+  'data',
+  'time',
+]
+
+export type SortField = ''
+
+export const defaultSortField: SortField = ''
+
+export const sortOptions: {
+  id: SortField
+  label: string
+  category: string
+}[] = []
diff --git a/apps/renterd/contexts/dialog.tsx b/apps/renterd/contexts/dialog.tsx
index 7c73f35ac..e16811839 100644
--- a/apps/renterd/contexts/dialog.tsx
+++ b/apps/renterd/contexts/dialog.tsx
@@ -16,7 +16,6 @@ import { FilesSearchDialog } from '../dialogs/FilesSearchDialog'
 import { useSyncerConnect, useWallet } from '@siafoundation/react-renterd'
 import { RenterdSendSiacoinDialog } from '../dialogs/RenterdSendSiacoinDialog'
 import { RenterdTransactionDetailsDialog } from '../dialogs/RenterdTransactionDetailsDialog'
-import { AlertsDialog } from '../dialogs/AlertsDialog'
 import { HostsFilterPublicKeyDialog } from '../components/Hosts/HostsFilterPublicKeyDialog'
 import { FilesBucketDeleteDialog } from '../dialogs/FilesBucketDeleteDialog'
 import { FilesBucketPolicyDialog } from '../dialogs/FilesBucketPolicyDialog'
@@ -47,7 +46,6 @@ export type DialogType =
   | 'filesSearch'
   | 'fileRename'
   | 'keysCreate'
-  | 'alerts'
   | 'confirm'
 
 type ConfirmProps = {
@@ -212,10 +210,6 @@ export function Dialogs() {
         open={dialog === 'contractsFilterPublicKey'}
         onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
       />
-      <AlertsDialog
-        open={dialog === 'alerts'}
-        onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
-      />
       <KeysCreateDialog
         open={dialog === 'keysCreate'}
         onOpenChange={(val) => (val ? openDialog(dialog) : closeDialog())}
diff --git a/apps/renterd/contexts/uploads/index.tsx b/apps/renterd/contexts/uploads/index.tsx
index 0b0ec0df6..a24acf3db 100644
--- a/apps/renterd/contexts/uploads/index.tsx
+++ b/apps/renterd/contexts/uploads/index.tsx
@@ -76,8 +76,6 @@ function useUploadsMain() {
     )
   }, [uploadsMap, activeBucket, response.data, apiBusUploadAbort])
 
-  console.log(dataset)
-
   const {
     configurableColumns,
     enabledColumns,
diff --git a/apps/renterd/dialogs/AlertsDialog.tsx b/apps/renterd/dialogs/AlertsDialog.tsx
deleted file mode 100644
index 92169f120..000000000
--- a/apps/renterd/dialogs/AlertsDialog.tsx
+++ /dev/null
@@ -1,359 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  AlertsDialog as DSAlertsDialog,
-  Link,
-  ScrollArea,
-  Text,
-  Tooltip,
-  triggerErrorToast,
-  triggerSuccessToast,
-  ValueCopyable,
-  ValueMenu,
-  ValueSc,
-} from '@siafoundation/design-system'
-import {
-  AlertSeverity,
-  useAlerts,
-  useAlertsDismiss,
-  useHost,
-  useSlabObjects,
-} from '@siafoundation/react-renterd'
-import BigNumber from 'bignumber.js'
-import { useCallback } from 'react'
-import { ContractContextMenuFromId } from '../components/Contracts/ContractContextMenuFromId'
-import { HostContextMenu } from '../components/Hosts/HostContextMenu'
-import { useDialog } from '../contexts/dialog'
-import { useFilesManager } from '../contexts/filesManager'
-import { getDirectorySegmentsFromPath } from '../lib/paths'
-import { defaultDatasetRefreshInterval } from '../config/swr'
-
-type Props = {
-  open: boolean
-  onOpenChange: (val: boolean) => void
-}
-
-export function AlertsDialog({ open, onOpenChange }: Props) {
-  const alerts = useAlerts({
-    config: {
-      swr: {
-        refreshInterval: defaultDatasetRefreshInterval,
-      },
-    },
-  })
-  const dismiss = useAlertsDismiss()
-
-  const dismissOne = useCallback(
-    async (id: string) => {
-      const response = await dismiss.post({
-        payload: [id],
-      })
-      if (response.error) {
-        triggerErrorToast('Error dismissing alert.')
-      } else {
-        triggerSuccessToast('Alert has been dismissed.')
-      }
-    },
-    [dismiss]
-  )
-
-  const dismissMany = useCallback(
-    async (ids: string[], filter?: AlertSeverity) => {
-      if (!alerts.data) {
-        return
-      }
-      const response = await dismiss.post({
-        payload: ids,
-      })
-      if (response.error) {
-        triggerErrorToast(
-          filter
-            ? `Error dismissing all ${filter} alerts.`
-            : 'Error dismissing all alerts.'
-        )
-      } else {
-        triggerSuccessToast(
-          filter
-            ? `All ${filter} alerts have been dismissed.`
-            : 'All alerts have been dismissed.'
-        )
-      }
-    },
-    [dismiss, alerts.data]
-  )
-
-  return (
-    <DSAlertsDialog
-      open={open}
-      onOpenChange={(val) => {
-        onOpenChange(val)
-      }}
-      alerts={alerts}
-      dataFieldOrder={dataFieldOrder}
-      dataFields={dataFields}
-      dismissMany={dismissMany}
-      dismissOne={dismissOne}
-    />
-  )
-}
-
-const dataFieldOrder = [
-  'hint',
-  'error',
-  'origin',
-  'hostKey',
-  'contractID',
-  'accountID',
-  'slabKey',
-  'additions',
-  'removals',
-]
-
-const dataFields: Record<
-  string,
-  { render: (props: { value: unknown }) => JSX.Element }
-> = {
-  contractID: {
-    render: function ContractField({ value }: { value: string }) {
-      return (
-        <div className="flex justify-between w-full gap-2">
-          <Text color="subtle" ellipsis>
-            contract ID
-          </Text>
-          <ValueMenu
-            value={value}
-            menu={
-              <ContractContextMenuFromId
-                id={value}
-                contentProps={{
-                  align: 'end',
-                }}
-                buttonProps={{
-                  size: 'none',
-                }}
-              />
-            }
-          />
-        </div>
-      )
-    },
-  },
-  accountID: {
-    render: function AccountField({ value }: { value: string }) {
-      return (
-        <div className="flex justify-between w-full gap-2">
-          <Text color="subtle" ellipsis>
-            account ID
-          </Text>
-          <ValueCopyable value={value} label="account ID" />
-        </div>
-      )
-    },
-  },
-  hostKey: {
-    render: function HostField({ value }: { value: string }) {
-      const host = useHost({ params: { hostKey: value } })
-      if (!host.data) {
-        return null
-      }
-      return (
-        <div className="flex justify-between w-full gap-2">
-          <Text color="subtle" ellipsis>
-            host key
-          </Text>
-          <ValueMenu
-            value={value}
-            menu={
-              <HostContextMenu
-                publicKey={host.data.publicKey}
-                address={host.data.netAddress}
-                contentProps={{
-                  align: 'end',
-                }}
-                buttonProps={{
-                  size: 'none',
-                }}
-              />
-            }
-          />
-        </div>
-      )
-    },
-  },
-  slabKey: {
-    render: function SlabField({ value }: { value: string }) {
-      const { setActiveDirectory } = useFilesManager()
-      const { closeDialog } = useDialog()
-      const objects = useSlabObjects({
-        params: {
-          key: value,
-        },
-        config: {
-          swr: {
-            revalidateOnFocus: false,
-          },
-        },
-      })
-      return (
-        <>
-          <div className="flex justify-between w-full gap-2">
-            <Text color="subtle" ellipsis>
-              key
-            </Text>
-            <ValueCopyable value={value} />
-          </div>
-          {objects.data && (
-            <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>
-          )}
-        </>
-      )
-    },
-  },
-  additions: {
-    render: function AdditionsField({ value }: { value: string[] }) {
-      return (
-        <>
-          <div className="flex justify-between w-full gap-2">
-            <Text color="subtle" ellipsis>
-              additions
-            </Text>
-          </div>
-          {value && (
-            <ScrollArea>
-              <div className="flex flex-wrap gap-2 mb-2">
-                {value.map((contractId) => (
-                  <div key={contractId}>
-                    <ValueCopyable value={contractId} label="contract ID" />
-                  </div>
-                ))}
-              </div>
-            </ScrollArea>
-          )}
-        </>
-      )
-    },
-  },
-  removals: {
-    render: function RemovalsField({
-      value,
-    }: {
-      value: Record<string, string>
-    }) {
-      return (
-        <>
-          <div className="flex justify-between w-full gap-2">
-            <Text color="subtle" ellipsis>
-              removals
-            </Text>
-          </div>
-          {value && (
-            <ScrollArea>
-              <div className="flex flex-col gap-2 mb-2">
-                {Object.entries(value).map(([contractId, reason]) => (
-                  <div
-                    key={contractId}
-                    className="flex gap-2 justify-between w-full"
-                  >
-                    <ValueCopyable value={contractId} label="contract ID" />
-                    <Tooltip content={reason}>
-                      <Text color="subtle" ellipsis>
-                        {reason}
-                      </Text>
-                    </Tooltip>
-                  </div>
-                ))}
-              </div>
-            </ScrollArea>
-          )}
-        </>
-      )
-    },
-  },
-  error: {
-    render: ({ value }: { value: string }) => (
-      <div className="flex flex-col w-full gap-2">
-        <Accordion type="single">
-          <AccordionItem value="error" variant="ghost">
-            <AccordionTrigger>
-              <Text color="subtle" ellipsis>
-                error
-              </Text>
-            </AccordionTrigger>
-            <AccordionContent>
-              <Text color="contrast">{value}</Text>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      </div>
-    ),
-  },
-  hint: {
-    render: ({ value }: { value: string }) => (
-      <div className="flex flex-col w-full gap-2">
-        <Text color="contrast">{value}</Text>
-      </div>
-    ),
-  },
-  allowance: {
-    render: ({ value }: { value: string }) => (
-      <div className="flex justify-between w-full gap-2">
-        <Text color="subtle" ellipsis>
-          allowance
-        </Text>
-        <ValueSc variant="value" value={new BigNumber(value)} />
-      </div>
-    ),
-  },
-  balance: {
-    render: ({ value }: { value: string }) => (
-      <div className="flex justify-between w-full gap-2">
-        <Text color="subtle" ellipsis>
-          balance
-        </Text>
-        <ValueSc variant="value" value={new BigNumber(value)} />
-      </div>
-    ),
-  },
-  address: {
-    render: ({ value }: { value: string }) => (
-      <div className="flex justify-between w-full gap-2">
-        <Text color="subtle" ellipsis>
-          address
-        </Text>
-        <ValueCopyable value={value} type="address" />
-      </div>
-    ),
-  },
-  account: {
-    render: ({ value }: { value: string }) => (
-      <div className="flex justify-between w-full gap-2">
-        <Text color="subtle" ellipsis>
-          account
-        </Text>
-        <ValueCopyable value={value} />
-      </div>
-    ),
-  },
-}
diff --git a/apps/renterd/pages/alerts/index.tsx b/apps/renterd/pages/alerts/index.tsx
new file mode 100644
index 000000000..aa65cb8d1
--- /dev/null
+++ b/apps/renterd/pages/alerts/index.tsx
@@ -0,0 +1,5 @@
+import { Alerts } from '../../components/Alerts'
+
+export default function AlertsPage() {
+  return <Alerts />
+}
diff --git a/libs/design-system/src/components/Table/TableRow.tsx b/libs/design-system/src/components/Table/TableRow.tsx
index 2ff5775f5..ff2d8cb14 100644
--- a/libs/design-system/src/components/Table/TableRow.tsx
+++ b/libs/design-system/src/components/Table/TableRow.tsx
@@ -35,7 +35,7 @@ type Props<Columns extends string, Data, Context> = {
   data: Data
   context?: Context
   columns: TableColumn<Columns, Data, Context>[]
-  rowSize?: 'dense' | 'default'
+  rowSize?: 'dense' | 'default' | 'auto'
   focusId?: string
   focusColor?: 'green' | 'red' | 'amber' | 'blue' | 'default'
   getCellClassNames: (
@@ -135,7 +135,11 @@ export function createTableRow<
                 <div
                   className={cx(
                     getContentClassNames(i, className),
-                    rowSize === 'dense' ? 'h-[50px]' : 'h-[100px]'
+                    rowSize === 'dense'
+                      ? 'h-[50px]'
+                      : rowSize === 'default'
+                      ? 'h-[100px]'
+                      : ''
                   )}
                 >
                   <Render data={data} context={context} />
diff --git a/libs/design-system/src/components/Table/index.tsx b/libs/design-system/src/components/Table/index.tsx
index 7cf496dfa..3695ba247 100644
--- a/libs/design-system/src/components/Table/index.tsx
+++ b/libs/design-system/src/components/Table/index.tsx
@@ -62,7 +62,7 @@ type Props<
   sortDirection?: 'asc' | 'desc'
   toggleSort?: (field: SortField) => void
   sortableColumns?: SortField[]
-  rowSize?: 'dense' | 'default'
+  rowSize?: 'dense' | 'default' | 'auto'
   pageSize: number
   isLoading: boolean
   emptyState?: React.ReactNode
@@ -319,7 +319,11 @@ export function Table<
                       <div
                         className={cx(
                           getContentClassNames(i, contentClassName),
-                          rowSize === 'dense' ? 'h-[50px]' : 'h-[100px]'
+                          rowSize === 'dense'
+                            ? 'h-[50px]'
+                            : rowSize === 'default'
+                            ? 'h-[100px]'
+                            : 'h-[100px]'
                         )}
                       />
                     </td>
diff --git a/libs/design-system/src/components/ValueCopyable.tsx b/libs/design-system/src/components/ValueCopyable.tsx
index f58f7a8fa..fc13813f5 100644
--- a/libs/design-system/src/components/ValueCopyable.tsx
+++ b/libs/design-system/src/components/ValueCopyable.tsx
@@ -34,6 +34,7 @@ type Props = {
   color?: React.ComponentProps<typeof Text>['color']
   className?: string
   siascanUrl?: string
+  contextMenu?: React.ReactNode
 }
 
 export function ValueCopyable({
@@ -50,6 +51,7 @@ export function ValueCopyable({
   color = 'contrast',
   className,
   siascanUrl,
+  contextMenu,
 }: Props) {
   const label = customLabel || getEntityTypeCopyLabel(type)
   const maxLength = customMaxLength || getEntityDisplayLength(type)
@@ -88,13 +90,15 @@ export function ValueCopyable({
         </Text>
       )}
       <div className="ml-1 flex items-center">
-        <ValueContextMenu
-          cleanValue={cleanValue}
-          label={label}
-          size={size}
-          siascanUrl={siascanUrl}
-          type={type}
-        />
+        {contextMenu || (
+          <ValueContextMenu
+            cleanValue={cleanValue}
+            label={label}
+            size={size}
+            siascanUrl={siascanUrl}
+            type={type}
+          />
+        )}
       </div>
     </div>
   )
diff --git a/libs/design-system/src/core/Panel.tsx b/libs/design-system/src/core/Panel.tsx
index 6514c36f6..f18baa87b 100644
--- a/libs/design-system/src/core/Panel.tsx
+++ b/libs/design-system/src/core/Panel.tsx
@@ -1,18 +1,34 @@
 import { cva, VariantProps } from 'class-variance-authority'
 import React from 'react'
 
-export const panelStyles = cva([
-  'bg-white dark:bg-graydark-200',
-  'transition-shadow ease-in-out duration-300',
-  'shadow-sm hover:shadow',
-  'rounded',
-  'border',
-  'border-gray-400 dark:border-graydark-400',
-])
+export const panelStyles = cva(
+  [
+    'transition-shadow ease-in-out duration-300',
+    'shadow-sm hover:shadow',
+    'rounded',
+    'border',
+  ],
+  {
+    variants: {
+      color: {
+        default: [
+          'bg-white dark:bg-graydark-200',
+          'border-gray-400 dark:border-graydark-400',
+        ],
+        subtle: ['border-gray-200 dark:border-graydark-200'],
+      },
+    },
+    defaultVariants: {
+      color: 'default',
+    },
+  }
+)
 
 export const Panel = React.forwardRef<
   HTMLDivElement,
   VariantProps<typeof panelStyles> & React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  return <div ref={ref} className={panelStyles({ className })} {...props} />
+>(({ className, color, ...props }, ref) => {
+  return (
+    <div ref={ref} className={panelStyles({ className, color })} {...props} />
+  )
 })
diff --git a/libs/react-renterd/src/bus.ts b/libs/react-renterd/src/bus.ts
index 2e0046fbc..2cc83223e 100644
--- a/libs/react-renterd/src/bus.ts
+++ b/libs/react-renterd/src/bus.ts
@@ -719,8 +719,21 @@ export type Alert = {
   }
 }
 
+export type AlertsParams = {
+  limit: number
+  offset: number
+  severity?: AlertSeverity
+}
+
+export type AlertsResponse = {
+  alerts?: Alert[]
+  hasMore: boolean
+  totals: Record<AlertSeverity, number>
+}
+
 const alertsRoute = '/bus/alerts'
-export function useAlerts(args?: HookArgsSwr<void, Alert[]>) {
+// params are required because omitting them returns a deprecated response structure
+export function useAlerts(args: HookArgsSwr<AlertsParams, AlertsResponse>) {
   return useGetSwr({ ...args, route: alertsRoute })
 }