Skip to main content
Uptime graphs are automatically generated and updated based on incident history and component status changes.

​
Overview

Status pages in Warrn provide a professional way to communicate service health, ongoing incidents, and planned maintenance to your users and stakeholders. Create both public-facing and internal status pages with real-time updates.

Public Status Pages

Share service status with external users through beautiful, branded public pages.

Private Status Pages

Internal status pages for team and stakeholder communication.

​
Status Page Types

​
Public vs Private Pages

Public Status Pages
  • Accessible without authentication
  • Customizable branding and domain
  • SEO-optimized for discoverability
  • Subscriber notifications
  • Social media integration
Private Status Pages
  • Team/organization access only
  • Internal incident communication
  • Detailed technical information
  • Integration with internal tools
  • Advanced analytics

​
Status Page Structure

interface StatusPage {
  id: string;
  name: string;
  slug: string;
  description?: string;
  is_public: boolean;
  organization_id: string;
  
  // Customization
  logo_url?: string;
  favicon_url?: string;
  custom_domain?: string;
  theme_color?: string;
  
  // Components
  components: StatusPageComponent[];
  
  // Incidents
  incidents: StatusPageIncident[];
  
  // Settings
  show_uptime_graph: boolean;
  show_incident_history: boolean;
  timezone: string;
}

​
Components Management

​
Component Types

Status page components represent the services and systems you want to monitor publicly:

Service

Individual microservices or applications.

Infrastructure

Core infrastructure like databases, caches, CDNs.

Third-party

External dependencies and integrations.

​
Component Status Levels

    ​
    Component Configuration

    interface StatusPageComponent {
  id: string;
  name: string;
  description?: string;
  status: 'operational' | 'degraded_performance' | 'partial_outage' | 'major_outage';
  position: number;
  
  // Monitoring Integration
  linked_service_id?: string;
  auto_update_from_alerts: boolean;
  
  // Display Settings
  show_uptime_graph: boolean;
  uptime_calculation_period: number; // days
}

    ​
    Incident Management

    ​
    Incident Lifecycle

    1

    Incident Detection

    Automatically detect incidents from alerts or create manually for planned maintenance.
    2

    Initial Communication

    Publish initial incident report with impact assessment and investigation status.
    3

    Regular Updates

    Provide regular updates on progress, workarounds, and estimated resolution time.
    4

    Resolution

    Mark incident as resolved with root cause summary and prevention measures.
    5

    Post-mortem

    Optional detailed post-mortem for major incidents with lessons learned.

    ​
    Incident Status Types

    ​
    Incident Updates

    interface IncidentUpdate {
  id: string;
  incident_id: string;
  status: 'investigating' | 'identified' | 'monitoring' | 'resolved';
  message: string;
  created_at: string;
  created_by: string;
  
  // Affected components
  affected_components: {
    component_id: string;
    status: ComponentStatus;
  }[];
}

    ​
    Status Page Customization

    ​
    Branding Options

    Visual Identity

    Upload custom logos, favicons, and configure theme colors to match your brand.

    Custom Domain

    Use your own domain (status.yourcompany.com) for a professional appearance.

    ​
    Theme Configuration

    interface StatusPageTheme {
  primary_color: string;      // Main brand color
  secondary_color: string;    // Accent color
  background_color: string;   // Page background
  text_color: string;         // Primary text
  
  // Component styling
  operational_color: string;   // Green for operational
  degraded_color: string;     // Yellow for degraded
  outage_color: string;       // Red for outages
  
  // Layout options
  header_style: 'minimal' | 'standard' | 'branded';
  show_powered_by: boolean;
  custom_css?: string;
}

    ​
    Uptime Monitoring

    ​
    Uptime Calculation

    Warrn automatically calculates and displays uptime statistics for each component:
    Calculation Method
    • Based on incident duration
    • Weighted by incident severity
    • Configurable time periods
    • Real-time updates
    Display Formats
    • 90-day uptime graph
    • Monthly uptime percentage
    • Annual availability metrics
    • SLA compliance tracking

    ​
    Uptime Graph Features

    interface UptimeData {
  date: string;
  uptime_percentage: number;
  incidents: {
    id: string;
    duration_minutes: number;
    severity: 'minor' | 'major' | 'critical';
  }[];
}

    ​
    Status Page Analytics

    ​
    Analytics Dashboard

    The status page analytics provide insights into:

      ​
      Subscription Management

      ​
      Notification Channels

      Users can subscribe to status updates through multiple channels:

      Email

      Email notifications for incident updates and maintenance windows.

      SMS

      Text message alerts for critical incidents and resolutions.

      Webhook

      API webhooks for integration with external systems and tools.

      RSS

      RSS feeds for automated status monitoring and aggregation.

      ​
      Subscription Preferences

      interface SubscriptionPreferences {
  user_id: string;
  status_page_id: string;
  
  // Notification channels
  email_enabled: boolean;
  sms_enabled: boolean;
  webhook_url?: string;
  
  // Notification types
  notify_on_incidents: boolean;
  notify_on_maintenance: boolean;
  notify_on_component_changes: boolean;
  
  // Component filtering
  subscribed_components: string[]; // Component IDs
  
  // Frequency settings
  immediate_notifications: boolean;
  digest_frequency: 'none' | 'daily' | 'weekly';
}

      ​
      API Integration

      ​
      Status Page Management

      # Create status page
POST /api/status-pages
{
  "name": "Service Status",
  "slug": "status",
  "is_public": true,
  "description": "Current status of all services"
}

# Update status page
PATCH /api/status-pages/{id}
{
  "theme_color": "#007bff",
  "show_uptime_graph": true
}

# Add component
POST /api/status-pages/{id}/components
{
  "name": "API Gateway",
  "status": "operational",
  "linked_service_id": "service-uuid"
}

      ​
      Incident API

      # Create incident
POST /api/status-pages/{id}/incidents
{
  "name": "Database Connection Issues",
  "status": "investigating",
  "impact": "major",
  "affected_components": ["component-1", "component-2"]
}

# Add incident update
POST /api/incidents/{id}/updates
{
  "status": "identified",
  "message": "Issue identified with database connection pool. Implementing fix.",
  "notify_subscribers": true
}

      ​
      Public Status Page Features

      ​
      SEO Optimization

      Public status pages are optimized for search engines:
      • Meta Tags: Proper title, description, and Open Graph tags
      • Schema Markup: Structured data for better search results
      • Responsive Design: Mobile-friendly layout and fast loading
      • Canonical URLs: Proper URL structure and redirects

      ​
      Social Media Integration

      ​
      Best Practices

      ​
      Communication Strategy

      1

      Transparency

      Be honest and transparent about issues, their impact, and resolution progress.
      2

      Timeliness

      Provide updates promptly, even if it’s just to confirm you’re still investigating.
      3

      Clarity

      Use clear, non-technical language that your users can understand.
      4

      Consistency

      Maintain consistent communication tone and update frequency.

      ​
      Status Page Design

      Keep your status page simple, fast-loading, and accessible even during major outages.
      • Minimalist Design: Focus on essential information and clear status indicators
      • Fast Loading: Optimize for speed, especially during high-traffic incidents
      • Mobile First: Ensure excellent mobile experience for on-the-go users
      • Accessibility: Follow WCAG guidelines for screen readers and assistive technologies

      ​
      Incident Response

      ​
      Integration Examples

      ​
      Automated Status Updates

      // Automatically update component status based on alerts
const updateComponentFromAlert = async (alert: Alert) => {
  if (alert.service_id && alert.severity === 'critical') {
    await updateStatusPageComponent({
      service_id: alert.service_id,
      status: 'major_outage',
      auto_update: true
    });
  }
};

      ​
      Webhook Notifications

      # Example webhook payload for incident updates
POST https://your-webhook-url.com/status-updates
{
  "event": "incident.updated",
  "status_page": {
    "id": "status-page-id",
    "name": "Service Status",
    "url": "https://status.example.com"
  },
  "incident": {
    "id": "incident-id",
    "name": "Database Connection Issues",
    "status": "resolved",
    "resolved_at": "2024-01-15T10:30:00Z"
  }
}
      See the Status Pages API documentation for complete endpoint details and webhook specifications.
      ⌘I