Service as App

Services render as full applications with views, panels, and specialized workflows for managing technical infrastructure.

ServiceApp

A complete application for managing a specific service category (APIs, Integrations, Webhooks, etc.).

Props

interface ServiceAppProps extends BaseApp {
  /** Service type to manage */
  serviceType: ServiceType  // 'API' | 'Integration' | 'Webhook' | 'Endpoint' | etc.

  /** Services to display */
  services?: ServiceProps[]

  /** Data source */
  from?: string  // API endpoint: '/api/services'

  /** Default views */
  defaultViews?: ('list' | 'detail' | 'logs' | 'metrics' | 'settings')[]

  /** Enable features */
  features?: {
    monitoring?: boolean      // Service health monitoring
    testing?: boolean        // API playground/testing
    documentation?: boolean  // Auto-generated docs
    analytics?: boolean      // Usage analytics
  }
}

Usage

// API Management App
<ServiceApp
  serviceType="API"
  name="API Management"
  defaultViews={['list', 'detail', 'logs', 'metrics']}
  features={{
    monitoring: true,
    testing: true,
    documentation: true,
    analytics: true
  }}
  from="/api/services?type=API"
/>

// Integration Management App
<ServiceApp
  serviceType="Integration"
  name="Integrations"
  defaultViews={['list', 'detail', 'settings']}
  features={{
    monitoring: true,
    testing: false
  }}
  from="/api/integrations"
/>

Default Layout

ServiceApp
├── ServiceListView (main)
│   ├── ServicePanel (sidebar)
│   │   ├── Service categories
│   │   ├── Status filters
│   │   └── Quick actions
│   │
│   └── ServicesPanel (main)
│       ├── ServiceRows (table)
│       └── Pagination
│
├── ServiceDetailView
│   ├── ServiceInfoPanel
│   ├── ServiceConfigPanel
│   └── ServiceMetricsPanel
│
├── ServiceLogsView
│   └── LogsPanel
│
├── ServiceMetricsView
│   └── MetricsPanel
│
└── ServiceSettingsView
    └── SettingsFormPanel

ServiceView

A full-page view within a ServiceApp, showing detailed service information.

ServiceListView

Lists all services with filtering, sorting, and bulk actions.

interface ServiceListViewProps extends BaseViewProps {
  /** Services to display */
  services?: ServiceProps[]

  /** Filter by status */
  statusFilter?: 'active' | 'inactive' | 'all'

  /** Filter by type */
  typeFilter?: ServiceType | 'all'

  /** Display mode */
  display?: 'rows' | 'cards' | 'kanban'

  /** Enable selection */
  selectable?: boolean

  /** Bulk actions */
  bulkActions?: Action[]
}

Usage:

<ServiceListView
  title="API Services"
  services={apiServices}
  display="rows"
  selectable
  bulkActions={[
    { id: 'activate', label: 'Activate' },
    { id: 'deactivate', label: 'Deactivate' },
    { id: 'delete', label: 'Delete' }
  ]}
/>

ServiceDetailView

Shows comprehensive service details with tabs for different aspects.

interface ServiceDetailViewProps extends BaseViewProps {
  /** Service to display */
  service: ServiceProps

  /** Tabs to show */
  tabs?: ('overview' | 'endpoints' | 'config' | 'logs' | 'metrics' | 'settings')[]

  /** Active tab */
  activeTab?: string

  /** Show test playground */
  showPlayground?: boolean
}

Usage:

<ServiceDetailView
  service={apiService}
  tabs={['overview', 'endpoints', 'config', 'logs', 'metrics']}
  showPlayground
/>

ServiceMetricsView

Displays service metrics, analytics, and performance data.

interface ServiceMetricsViewProps extends BaseViewProps {
  /** Service to show metrics for */
  service: ServiceProps

  /** Time period */
  period?: 'hour' | 'day' | 'week' | 'month'

  /** Metrics to display */
  metrics?: ('requests' | 'latency' | 'errors' | 'availability')[]

  /** Enable real-time updates */
  realtime?: boolean
}

Usage:

<ServiceMetricsView
  service={apiService}
  period="day"
  metrics={['requests', 'latency', 'errors', 'availability']}
  realtime
/>

ServiceLogsView

Shows service request/response logs with filtering.

interface ServiceLogsViewProps extends BaseViewProps {
  /** Service to show logs for */
  service: ServiceProps

  /** Log level filter */
  level?: 'debug' | 'info' | 'warn' | 'error' | 'all'

  /** Time range */
  timeRange?: { start: Date; end: Date }

  /** Search query */
  search?: string

  /** Auto-refresh */
  autoRefresh?: boolean
}

Usage:

<ServiceLogsView
  service={apiService}
  level="error"
  autoRefresh
  timeRange={{
    start: new Date(Date.now() - 3600000),
    end: new Date()
  }}
/>

ServicePanel

Reusable panels for displaying service information within views.

ServiceInfoPanel

Shows service overview information.

interface ServiceInfoPanelProps extends BasePanelProps {
  /** Service to display */
  service: ServiceProps

  /** Show status badge */
  showStatus?: boolean

  /** Show metrics summary */
  showMetrics?: boolean

  /** Editable mode */
  editable?: boolean
}

Usage:

<ServiceInfoPanel
  service={apiService}
  showStatus
  showMetrics
  editable={false}
/>

ServiceEndpointsPanel

Lists API endpoints (for API service type).

interface ServiceEndpointsPanelProps extends BasePanelProps {
  /** API service */
  service: APIProps

  /** Display mode */
  display?: 'list' | 'grouped'

  /** Enable testing */
  enableTesting?: boolean

  /** Show deprecated */
  showDeprecated?: boolean
}

Usage:

<ServiceEndpointsPanel
  service={apiService}
  display="grouped"
  enableTesting
  showDeprecated={false}
/>

ServiceConfigPanel

Shows and edits service configuration.

interface ServiceConfigPanelProps extends BasePanelProps {
  /** Service to configure */
  service: ServiceProps

  /** Editable mode */
  editable?: boolean

  /** Show sensitive values */
  showSecrets?: boolean

  /** On save callback */
  onSave?: (config: Partial<ServiceProps>) => void
}

Usage:

<ServiceConfigPanel
  service={webhookService}
  editable
  showSecrets={false}
  onSave={(config) => updateService(config)}
/>

ServiceMetricsPanel

Displays service metrics and charts.

interface ServiceMetricsPanelProps extends BasePanelProps {
  /** Service to show metrics for */
  service: ServiceProps

  /** Metrics to display */
  metrics: {
    id: string
    label: string
    value: number
    unit?: string
    change?: number
    chart?: 'line' | 'bar' | 'area'
  }[]

  /** Time period */
  period?: 'hour' | 'day' | 'week' | 'month'

  /** Grid layout */
  columns?: number
}

Usage:

<ServiceMetricsPanel
  service={apiService}
  metrics={[
    { id: 'requests', label: 'Requests', value: 12543, change: 12, chart: 'line' },
    { id: 'latency', label: 'Avg Latency', value: 145, unit: 'ms', change: -8, chart: 'area' },
    { id: 'errors', label: 'Error Rate', value: 0.02, unit: '%', change: -15, chart: 'bar' }
  ]}
  period="day"
  columns={3}
/>

ServiceHealthPanel

Shows service health status and checks.

interface ServiceHealthPanelProps extends BasePanelProps {
  /** Service to check */
  service: ServiceProps

  /** Health check results */
  health?: {
    status: 'healthy' | 'degraded' | 'down'
    lastCheck: Date
    latency?: number
    uptime?: number
    checks?: HealthCheckResult[]
  }

  /** Auto-refresh interval */
  refreshInterval?: number
}

Usage:

<ServiceHealthPanel
  service={apiService}
  health={{
    status: 'healthy',
    lastCheck: new Date(),
    latency: 120,
    uptime: 99.98,
    checks: [
      { name: 'API Endpoint', status: 'healthy', latency: 120 },
      { name: 'Database', status: 'healthy', latency: 45 },
      { name: 'Cache', status: 'healthy', latency: 8 }
    ]
  }}
  refreshInterval={30000}
/>

ServicePlaygroundPanel

Interactive API testing playground (for API/Endpoint services).

interface ServicePlaygroundPanelProps extends BasePanelProps {
  /** Service to test */
  service: APIProps | EndpointProps

  /** Selected endpoint */
  endpoint?: string

  /** Show request builder */
  showRequestBuilder?: boolean

  /** Show response viewer */
  showResponseViewer?: boolean

  /** Show code examples */
  showCodeExamples?: boolean
}

Usage:

<ServicePlaygroundPanel
  service={apiService}
  endpoint="/api/users"
  showRequestBuilder
  showResponseViewer
  showCodeExamples
/>

Service-Specific Apps

API Management App

<ServiceApp
  serviceType="API"
  name="API Management"
  navigation={[
    { href: '/apis', label: 'APIs', icon: 'Server' },
    { href: '/endpoints', label: 'Endpoints', icon: 'Route' },
    { href: '/usage', label: 'Usage', icon: 'BarChart' },
    { href: '/documentation', label: 'Docs', icon: 'Book' }
  ]}
  defaultViews={['list', 'detail', 'logs', 'metrics']}
/>

Integration Management App

<ServiceApp
  serviceType="Integration"
  name="Integrations"
  navigation={[
    { href: '/integrations', label: 'Integrations', icon: 'Puzzle' },
    { href: '/sync', label: 'Sync Status', icon: 'RefreshCw' },
    { href: '/settings', label: 'Settings', icon: 'Settings' }
  ]}
  features={{
    monitoring: true,
    testing: true
  }}
/>

Webhook Management App

<ServiceApp
  serviceType="Webhook"
  name="Webhooks"
  navigation={[
    { href: '/webhooks', label: 'Webhooks', icon: 'Zap' },
    { href: '/events', label: 'Events', icon: 'Activity' },
    { href: '/deliveries', label: 'Deliveries', icon: 'Send' }
  ]}
  features={{
    monitoring: true,
    analytics: true
  }}
/>

Summary

Services render at App level as:

ServiceApp - Complete application for service management
ServiceView - Full-page views (list, detail, metrics, logs)
ServicePanel - Reusable panels (info, config, metrics, health, playground)

Each service type (API, Integration, Webhook, etc.) has specialized panels and views appropriate for its functionality.

Service as App

On this page