feat: renterd alerts updates

.changeset/fuzzy-dolphins-do.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Added a rowSize auto variant to Table.

.changeset/quiet-pens-bow.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Added a custom contextMenu prop to ValueCopyable.

.changeset/real-crabs-speak.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Added a subtle variant to Panel.

.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

.changeset/tasty-rocks-compete.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Contract set change alerts now render full details.

.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.

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>
+  )
+}

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>
+  )
+}

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>
+    </>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}