Mobile Dashboard

Package

pnpm add @edge-stream/observability-react-native

// Source: packages/observability-react-native/
// Uses: @react-navigation, React Native StyleSheet, FlatList
// NOT a web app — runs in Expo or bare React Native

Navigation Structure

The mobile app uses React Navigation with a bottom tab navigator and stack navigators for detail screens:

// RootNavigator
//   └── BottomTabNavigator (4 tabs)
//         ├── Dashboard      → DashboardScreen
//         ├── Activity       → ActivityStackNavigator
//         │     ├── ActivityFeedScreen       (list)
//         │     └── MessageInspectorScreen   (detail)
//         ├── Pipelines      → PipelineStackNavigator
//         │     ├── PipelineListScreen       (list)
//         │     └── PipelineDetailScreen     (detail)
//         └── Settings       → SettingsScreen

Dashboard Screen

// packages/observability-react-native/src/screens/DashboardScreen.tsx
// Shows health metrics and pipeline summary in a scrollable view.

// Data sources:
const { aggregated, isLoading } = useMetrics({ refreshInterval: 2000 });
const { pipelines, loading, selectPipeline } = usePipelines();

// Metric cards displayed in a 2-column grid:
// - Total Messages  (from aggregated.totalMessages)
// - Status          ('Active' if messages > 0, else 'Idle')
// - Active Pipelines (count of pipelines where status === 'running')
// - Connected       ('✓' or '✕')

// MetricCardGrid: displays MetricCardProps[] in a configurable column grid
// PipelineRow: pressable row → selectPipeline(id) → navigates to PipelineDetailScreen

// Metrics refresh every 2000ms automatically.

Activity Feed Screen

// packages/observability-react-native/src/screens/ActivityFeedScreen.tsx
// Shows a real-time list of message activity logs.
// Tapping a row opens MessageInspectorScreen with full envelope detail.

// Components used:
// ActivityLogView     — scrollable list of ActivityLogRow items
// ActivityLogRow      — single message entry: topic + timestamp + status badge
// PipelineStatusBadge — visual status indicator (Running/Completed/Failed)
// ConnectionStatusBar — banner showing current EdgeStream connection status

// On pull-to-refresh: re-queries loggingService.getRecentLogs(maxLogs)

Message Inspector Screen

// packages/observability-react-native/src/screens/MessageInspectorScreen.tsx
// Full envelope detail view for a selected activity log entry.

// Sections:
// EnvelopeHeaderSection — meta fields (id, topic, serverId, receivedAt, correlationId)
// HookRow (list)        — each hook that processed this message: name, priority, result, durationMs
// ActivityLogRow        — subscriber delivery entries for this message
// DiffView / DiffRow    — shows envelope body diff if message was transformed by a hook
// JsonTreeView          — expandable tree for raw body JSON
// JsonTreeNode          — individual tree node (expandable object/array)

Pipeline List and Detail

// PipelineListScreen: lists all configured pipelines
// PipelineRow: tap → PipelineDetailScreen
interface Pipeline {
  id:      string;
  name:    string;
  status:  'running' | 'stopped' | 'error';
  // ... additional server-side fields
}

// PipelineDetailScreen: full pipeline configuration
// PipelineControls: start/stop pipeline controls
// PipelineStatusBadge: visual badge ('running', 'stopped', 'error')

Settings Screen

// SettingsScreen: configure the mobile app connection
// Fields:
// - EdgeStream server URL
// - Access token (JWT)
// - Poll interval for metrics (default 2000ms)
// - Max log entries to keep

// Same settings also control behavior of useMetrics() and usePipelines() hooks.

Shared Components

Integration Pattern

// In your React Native app's root:
import { EdgeStreamProvider } from 'edge-stream-js/react';
import { createEdgeStream } from 'edge-stream-js';
import { RootNavigator } from '@edge-stream/observability-react-native';

const stream = createEdgeStream({ logLevel: 'info' });

stream.registerServer({
  id: 'bas',
  type: 'bas',
  url: 'https://your-server.com/hubs/edge-stream',
  transportConfig: {
    type: 'signalr',
    url: 'https://your-server.com/hubs/edge-stream',
    accessToken: yourJwt,
  },
});

export default function App() {
  return (
    <EdgeStreamProvider stream={stream}>
      <RootNavigator />
    </EdgeStreamProvider>
  );
}