shadcn.io is not affiliated with official shadcn/ui
Integration Status Table Block for Solid
A table of integrations whose Errors cell opens a popover with the last three errors, each with Copy and Dismiss, where dismissing lowers the count and the state follows it from Healthy to Degraded to Failing, with a pause switch per row.
Installation
Overview
Triage an integration's errors from the table that lists it, with this integration status table for Solid with Ark UI. Each row is a connected service on an integrations hub, named in text beside a neutral two-letter plate. The Errors cell is a button with the count that opens a Popover of the last three errors, each with its code, time and message, a Copy button that uses the real clipboard and a Dismiss button. Dismissing lowers the count and the row's state follows it: 0 is Healthy, 1 to 4 Degraded, 5 or more Failing, a word with a dot or an icon. Older errors that the popover does not list still count, so a failing integration needs more dismissals to recover. A Switch pauses an integration, which stops it asking for attention, and a band says how many need attention. Three cells count the integrations by state and Restore sample data puts everything back. It's built from Popover, Switch, Button, Badge and Guides. For integration hubs, sync dashboards and any list where a count opens its detail.
FAQ
How is the state worked out?
From one number: the errors listed plus the older ones that are only counted. stateOf returns healthy at 0, degraded up to 4 and failing from 5, and the badge, the strip and the band all read it, so they cannot disagree. Pausing does not change the state, only whether the row counts as needing attention.
What can I do in the popover?
Read the last three errors, copy one as "code: message" to the clipboard, or dismiss it. Dismissing moves focus to the next error's Dismiss button, or back to the count button when none are left, and the polite line says how many errors remain. If the browser blocks the clipboard the line says so instead of claiming it copied.
What does the switch do?
It pauses or resumes the integration in this page's state: the row's last sync line reads Paused, the integration stops counting toward "need attention" and its errors stay visible. A paused integration with errors still shows Degraded or Failing, because the errors are real.
Is it accessible?
The count button is named by its row ("3 errors for Stripe payouts"), the popover buttons by their error, and each switch by its integration. Plates are decorative; the service is named in text. One polite status line, present from load, reports each copy, dismissal and pause.
How does it look on a phone?
The State and Last sync columns go and the state badge appears under the name, leaving the name, the count button and the switch. The popover is limited to the screen's width.
What stays local, and how do I wire it for real?
The six integrations and their errors are typed samples; nothing syncs, dismissals and pauses only change this page's state, and Restore sample data resets them. To make it real, load the last errors from your sync log, send dismiss and pause to the server and keep the state rule where the counts are stored.