feat(#92): implement Aggregated Dashboard View

Implement unified dashboard to display tasks and events from multiple
federated Mosaic Stack instances with clear provenance indicators.

Backend Integration:
- Extended federation API client with query support (sendFederatedQuery)
- Added query message fetching functions
- Integrated with existing QUERY message type from Phase 3

Components Created:
- ProvenanceIndicator: Shows which instance data came from
- FederatedTaskCard: Task display with provenance
- FederatedEventCard: Event display with provenance
- AggregatedDataGrid: Unified grid for multiple data types
- Dashboard page at /federation/dashboard

Key Features:
- Query all ACTIVE federated connections on load
- Display aggregated tasks and events in unified view
- Clear provenance indicators (instance name badges)
- PDA-friendly language throughout (no demanding terms)
- Loading states and error handling
- Empty state when no connections available

Technical Implementation:
- Uses POST /api/v1/federation/query to send queries
- Queries each connection for tasks.list and events.list
- Aggregates responses with provenance metadata
- Handles connection failures gracefully
- 86 tests passing with >85% coverage
- TypeScript strict mode compliant
- ESLint compliant

PDA-Friendly Design:
- "Unable to reach" instead of "Connection failed"
- "No data available" instead of "No results"
- "Loading data from instances..." instead of "Fetching..."
- Calm color palette (soft blues, greens, grays)
- Status indicators: 🟢 Active, 📋 No data, ⚠️ Error

Files Added:
- apps/web/src/lib/api/federation-queries.ts
- apps/web/src/lib/api/federation-queries.test.ts
- apps/web/src/components/federation/types.ts
- apps/web/src/components/federation/ProvenanceIndicator.tsx
- apps/web/src/components/federation/ProvenanceIndicator.test.tsx
- apps/web/src/components/federation/FederatedTaskCard.tsx
- apps/web/src/components/federation/FederatedTaskCard.test.tsx
- apps/web/src/components/federation/FederatedEventCard.tsx
- apps/web/src/components/federation/FederatedEventCard.test.tsx
- apps/web/src/components/federation/AggregatedDataGrid.tsx
- apps/web/src/components/federation/AggregatedDataGrid.test.tsx
- apps/web/src/app/(authenticated)/federation/dashboard/page.tsx
- docs/scratchpads/92-aggregated-dashboard.md

Testing:
- 86 total tests passing
- Unit tests for all components
- Integration tests for API client
- PDA-friendly language verified
- TypeScript type checking passing
- ESLint passing

Ready for code review and QA testing.

Related Issues:
- Depends on #85 (FED-005: QUERY Message Type) - COMPLETED
- Depends on #91 (FED-008: Connection Manager UI) - COMPLETED
- Uses #90 (FED-007: EVENT Subscriptions) infrastructure

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jason Woltje
2026-02-03 14:18:18 -06:00
parent 5cf02e824b
commit 8178617e53
13 changed files with 1535 additions and 0 deletions

View File

@@ -0,0 +1,90 @@
/**
* Federation Queries API Client
* Handles federated query requests to remote instances
*/
import { apiGet, apiPost } from "./client";
/**
* Federation message status (matches backend enum)
*/
export enum FederationMessageStatus {
PENDING = "PENDING",
DELIVERED = "DELIVERED",
FAILED = "FAILED",
}
/**
* Query message details
*/
export interface QueryMessageDetails {
id: string;
workspaceId: string;
connectionId: string;
messageType: string;
messageId: string;
correlationId?: string;
query?: string;
response?: unknown;
status: FederationMessageStatus;
error?: string;
createdAt: string;
updatedAt: string;
deliveredAt?: string;
}
/**
* Send query request
*/
export interface SendQueryRequest {
connectionId: string;
query: string;
context?: Record<string, unknown>;
}
/**
* Send a federated query to a remote instance
*/
export async function sendFederatedQuery(
connectionId: string,
query: string,
context?: Record<string, unknown>
): Promise<QueryMessageDetails> {
const request: SendQueryRequest = {
connectionId,
query,
};
if (context) {
request.context = context;
}
return apiPost<QueryMessageDetails>("/api/v1/federation/query", request);
}
/**
* Fetch all query messages for the workspace
*/
export async function fetchQueryMessages(
status?: FederationMessageStatus
): Promise<QueryMessageDetails[]> {
const params = new URLSearchParams();
if (status) {
params.append("status", status);
}
const queryString = params.toString();
const endpoint = queryString
? `/api/v1/federation/queries?${queryString}`
: "/api/v1/federation/queries";
return apiGet<QueryMessageDetails[]>(endpoint);
}
/**
* Fetch a single query message
*/
export async function fetchQueryMessage(messageId: string): Promise<QueryMessageDetails> {
return apiGet<QueryMessageDetails>(`/api/v1/federation/queries/${messageId}`);
}