add tests

apps/website/lib/display-objects/HealthAlertDisplay.ts

@@ -0,0 +1,53 @@
+/**
+ * Health Alert Display Object
+ *
+ * Provides formatting and display logic for health alerts.
+ * This display object isolates UI-specific formatting from business logic.
+ */
+
+export class HealthAlertDisplay {
+  static formatSeverity(type: 'critical' | 'warning' | 'info'): string {
+    const severities: Record<string, string> = {
+      critical: 'Critical',
+      warning: 'Warning',
+      info: 'Info',
+    };
+    return severities[type] || 'Info';
+  }
+
+  static formatSeverityColor(type: 'critical' | 'warning' | 'info'): string {
+    const colors: Record<string, string> = {
+      critical: '#ef4444', // red-500
+      warning: '#f59e0b', // amber-500
+      info: '#3b82f6', // blue-500
+    };
+    return colors[type] || '#3b82f6';
+  }
+
+  static formatTimestamp(timestamp: string): string {
+    const date = new Date(timestamp);
+    return date.toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+  }
+
+  static formatRelativeTime(timestamp: string): string {
+    const now = new Date();
+    const date = new Date(timestamp);
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'Just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return `${Math.floor(diffDays / 7)}w ago`;
+  }
+}

apps/website/lib/display-objects/HealthComponentDisplay.ts

@@ -0,0 +1,50 @@
+/**
+ * Health Component Display Object
+ *
+ * Provides formatting and display logic for health components.
+ * This display object isolates UI-specific formatting from business logic.
+ */
+
+export class HealthComponentDisplay {
+  static formatStatusLabel(status: 'ok' | 'degraded' | 'error' | 'unknown'): string {
+    const labels: Record<string, string> = {
+      ok: 'Healthy',
+      degraded: 'Degraded',
+      error: 'Error',
+      unknown: 'Unknown',
+    };
+    return labels[status] || 'Unknown';
+  }
+
+  static formatStatusColor(status: 'ok' | 'degraded' | 'error' | 'unknown'): string {
+    const colors: Record<string, string> = {
+      ok: '#10b981', // green-500
+      degraded: '#f59e0b', // amber-500
+      error: '#ef4444', // red-500
+      unknown: '#6b7280', // gray-500
+    };
+    return colors[status] || '#6b7280';
+  }
+
+  static formatStatusIcon(status: 'ok' | 'degraded' | 'error' | 'unknown'): string {
+    const icons: Record<string, string> = {
+      ok: '✓',
+      degraded: '⚠',
+      error: '✕',
+      unknown: '?',
+    };
+    return icons[status] || '?';
+  }
+
+  static formatTimestamp(timestamp: string): string {
+    const date = new Date(timestamp);
+    return date.toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+  }
+}

apps/website/lib/display-objects/HealthMetricDisplay.ts

@@ -0,0 +1,61 @@
+/**
+ * Health Metric Display Object
+ *
+ * Provides formatting and display logic for health metrics.
+ * This display object isolates UI-specific formatting from business logic.
+ */
+
+export class HealthMetricDisplay {
+  static formatUptime(uptime?: number): string {
+    if (uptime === undefined || uptime === null) return 'N/A';
+    if (uptime < 0) return 'N/A';
+    
+    // Format as percentage with 2 decimal places
+    return `${uptime.toFixed(2)}%`;
+  }
+
+  static formatResponseTime(responseTime?: number): string {
+    if (responseTime === undefined || responseTime === null) return 'N/A';
+    if (responseTime < 0) return 'N/A';
+    
+    // Format as milliseconds with appropriate units
+    if (responseTime < 1000) {
+      return `${responseTime.toFixed(0)}ms`;
+    } else if (responseTime < 60000) {
+      return `${(responseTime / 1000).toFixed(2)}s`;
+    } else {
+      return `${(responseTime / 60000).toFixed(2)}m`;
+    }
+  }
+
+  static formatErrorRate(errorRate?: number): string {
+    if (errorRate === undefined || errorRate === null) return 'N/A';
+    if (errorRate < 0) return 'N/A';
+    
+    // Format as percentage with 2 decimal places
+    return `${errorRate.toFixed(2)}%`;
+  }
+
+  static formatTimestamp(timestamp: string): string {
+    const date = new Date(timestamp);
+    return date.toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+  }
+
+  static formatSuccessRate(checksPassed?: number, checksFailed?: number): string {
+    const passed = checksPassed || 0;
+    const failed = checksFailed || 0;
+    const total = passed + failed;
+    
+    if (total === 0) return 'N/A';
+    
+    const successRate = (passed / total) * 100;
+    return `${successRate.toFixed(1)}%`;
+  }
+}

apps/website/lib/display-objects/HealthStatusDisplay.ts

@@ -0,0 +1,65 @@
+/**
+ * Health Status Display Object
+ *
+ * Provides formatting and display logic for health status data.
+ * This display object isolates UI-specific formatting from business logic.
+ */
+
+export class HealthStatusDisplay {
+  static formatStatusLabel(status: 'ok' | 'degraded' | 'error' | 'unknown'): string {
+    const labels: Record<string, string> = {
+      ok: 'Healthy',
+      degraded: 'Degraded',
+      error: 'Error',
+      unknown: 'Unknown',
+    };
+    return labels[status] || 'Unknown';
+  }
+
+  static formatStatusColor(status: 'ok' | 'degraded' | 'error' | 'unknown'): string {
+    const colors: Record<string, string> = {
+      ok: '#10b981', // green-500
+      degraded: '#f59e0b', // amber-500
+      error: '#ef4444', // red-500
+      unknown: '#6b7280', // gray-500
+    };
+    return colors[status] || '#6b7280';
+  }
+
+  static formatStatusIcon(status: 'ok' | 'degraded' | 'error' | 'unknown'): string {
+    const icons: Record<string, string> = {
+      ok: '✓',
+      degraded: '⚠',
+      error: '✕',
+      unknown: '?',
+    };
+    return icons[status] || '?';
+  }
+
+  static formatTimestamp(timestamp: string): string {
+    const date = new Date(timestamp);
+    return date.toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+  }
+
+  static formatRelativeTime(timestamp: string): string {
+    const now = new Date();
+    const date = new Date(timestamp);
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'Just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return `${Math.floor(diffDays / 7)}w ago`;
+  }
+}