Frontend
Component hierarchy, state management, Pusher real-time sync, and retry modal flows for the Integration Dashboard frontend.
Integration Dashboard — Frontend
The Integration Dashboard frontend is an operational console for monitoring and managing third-party integrations in real time. It provides visibility into inbound API requests and outbound webhook dispatches, with the ability to manage configurations and initiate retries directly.
State Management
The dashboard uses a centralized integrationDashBoardGenericState slice to prevent UI inconsistencies between tabs, modals, and row selections.
| State Key | Purpose |
|---|---|
viewTab | Active tab — 1: API, 2: Webhook, 3: Errors |
selectedRowData | Log record currently being inspected or retried |
manageModalData | Active integration configuration being edited (URL, headers, etc.) |
currentTabLogsDataList | Filtered log rows rendered in the current tab view |
Component Hierarchy
IntegrationDashBoardHeader
Displays summary metrics — total success vs. failure counts, a DateRangePicker for filtering, and access to the Manage Integrations modal for configuration changes.
HitMapGridView
A visual heatmap aggregating SUCCESS / FAIL counts by endpoint and time window. Useful for spotting sudden failure spikes for a specific vendor or action type.
GridView (Primary Table)
Lists individual IntegrationDirectory log records with response code, timestamp, and action buttons. Each row exposes:
- View Payload — opens the full request/response payload.
- Retry — triggers the retry flow appropriate for that row type.
Retry Flows
Different row types open different retry modals:
| Log Type | Modal | Behavior |
|---|---|---|
| Successful webhook re-send | IntegrationResendModal.tsx | Re-queues the same payload for manual re-delivery |
| Failed webhook | ActionCategoryModal.tsx | Supports batch retry across affected records |
| Failed inbound API | ApiRetryModal | Renders JSON editor (via @uiw/react-json-view) so the payload can be corrected before replaying |
Real-Time Updates (Pusher)
The dashboard stays live using linkIntegrationDashboardLogsToPusher(...). When a backend Fusion worker updates an IntegrationDirectory document (e.g., from QUEUED to SUCCESS), a Pusher event is broadcast and the dashboard updates the affected row and heatmap without a page refresh.
Source File Map
| Component | Path |
|---|---|
| Mount point | Container/index.tsx |
| Grid rendering | Components/GridView.tsx |
| Retry modals | Components/Modals/ |
| Pusher integration | utils/pusher_integration.ts |
Workflow Guide
End-to-end walkthrough of the Integration Dashboard — from setting up an integration trigger in the Support CRM to reading log outcomes and retrying failures.
Backend
Backend engineering documentation for the Integration Dashboard — trigger functions, logging decorators, Fusion queueing, DocumentDB observability, Mirth handoff, and retry mechanics.