catalog/ts_web/pages/statuspage-allgreen.ts

import { html, cssManager } from "@design.estate/dees-element";
import type { IServiceStatus, IOverallStatus, IIncidentDetails, IStatusHistoryPoint, IMonthlyUptime } from '../interfaces/index.js';

export const statuspageAllgreen = () => html`
  <style>
    .demo-page-wrapper {
      min-height: 100vh;
      background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
    }
  </style>
  
  <div class="demo-page-wrapper">

    <dees-demowrapper
    .runAfterRender=${async (wrapperElement: any) => {
      const header = wrapperElement.querySelector('upl-statuspage-header') as any;
      const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') as any;
      const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
      const assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
      const statusDetails = wrapperElement.querySelector('upl-statuspage-statusdetails') as any;
      const statusMonth = wrapperElement.querySelector('upl-statuspage-statusmonth') as any;
      const incidents = wrapperElement.querySelector('upl-statuspage-incidents') as any;
      const footer = wrapperElement.querySelector('upl-statuspage-footer') as any;
      
      // Configure Header
      header.pageTitle = 'TechVault';
      header.showReportButton = true;
      header.showSubscribeButton = true;
      header.logoUrl = 'https://via.placeholder.com/150x50/4CAF50/ffffff?text=TV';
      
      // Configure Overall Status - All Green
      statusBar.overallStatus = {
        status: 'operational',
        message: 'All Systems Operational',
        lastUpdated: Date.now(),
        affectedServices: 0,
        totalServices: 12
      };
      
      // Configure Services - All Operational
      const services: IServiceStatus[] = [
        {
          id: 'web-app',
          name: 'web-app',
          displayName: 'Web Application',
          description: 'Main customer-facing application',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.99,
          uptime90d: 99.98,
          responseTime: 32,
          category: 'Frontend',
          selected: true
        },
        {
          id: 'mobile-app',
          name: 'mobile-app',
          displayName: 'Mobile Applications',
          description: 'iOS and Android apps',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 100,
          uptime90d: 99.99,
          responseTime: 45,
          category: 'Frontend',
          selected: true
        },
        {
          id: 'api',
          name: 'api',
          displayName: 'API Services',
          description: 'RESTful and GraphQL APIs',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.97,
          uptime90d: 99.96,
          responseTime: 28,
          category: 'Backend',
          selected: true
        },
        {
          id: 'auth',
          name: 'auth',
          displayName: 'Authentication',
          description: 'OAuth and SSO services',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 100,
          uptime90d: 99.99,
          responseTime: 22,
          category: 'Backend',
          selected: true
        },
        {
          id: 'database',
          name: 'database',
          displayName: 'Database Cluster',
          description: 'Primary data storage',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 100,
          uptime90d: 99.99,
          responseTime: 15,
          category: 'Infrastructure',
          selected: true
        },
        {
          id: 'cache',
          name: 'cache',
          displayName: 'Cache Layer',
          description: 'Redis cache clusters',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 100,
          uptime90d: 100,
          responseTime: 3,
          category: 'Infrastructure',
          selected: false
        },
        {
          id: 'search',
          name: 'search',
          displayName: 'Search Service',
          description: 'Elasticsearch clusters',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.98,
          uptime90d: 99.97,
          responseTime: 42,
          category: 'Infrastructure',
          selected: true
        },
        {
          id: 'cdn',
          name: 'cdn',
          displayName: 'CDN',
          description: 'Global content delivery',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 100,
          uptime90d: 100,
          responseTime: 8,
          category: 'Network',
          selected: true
        },
        {
          id: 'email',
          name: 'email',
          displayName: 'Email Service',
          description: 'Transactional emails',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.95,
          uptime90d: 99.94,
          responseTime: 125,
          category: 'Communication',
          selected: false
        },
        {
          id: 'sms',
          name: 'sms',
          displayName: 'SMS Service',
          description: 'SMS notifications',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.92,
          uptime90d: 99.90,
          responseTime: 180,
          category: 'Communication',
          selected: false
        },
        {
          id: 'payments',
          name: 'payments',
          displayName: 'Payment Processing',
          description: 'Payment gateway integration',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 100,
          uptime90d: 99.99,
          responseTime: 95,
          category: 'Services',
          selected: true
        },
        {
          id: 'analytics',
          name: 'analytics',
          displayName: 'Analytics Engine',
          description: 'Real-time analytics',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.96,
          uptime90d: 99.95,
          responseTime: 55,
          category: 'Services',
          selected: true
        }
      ];
      
      assetsSelector.services = services;
      
      // Configure Stats Grid - All green metrics
      statsGrid.currentStatus = 'operational';
      statsGrid.uptime = 99.98;
      statsGrid.avgResponseTime = Math.round(services.reduce((sum, s) => sum + (s.responseTime || 0), 0) / services.length);
      statsGrid.totalIncidents = 0;
      statsGrid.affectedServices = 0;
      statsGrid.totalServices = services.length;
      statsGrid.timePeriod = '30 days';
      
      // Configure Status Details - All operational for 48 hours
      const generateStatusDetails = (): IStatusHistoryPoint[] => {
        const details: IStatusHistoryPoint[] = [];
        const now = new Date();
        
        for (let i = 47; i >= 0; i--) {
          const date = new Date(now);
          date.setMinutes(0, 0, 0);
          date.setHours(date.getHours() - i);
          
          details.push({
            timestamp: date.getTime(),
            status: 'operational',
            responseTime: 20 + Math.random() * 10 // Very consistent response times
          });
        }
        
        return details;
      };
      
      statusDetails.dataPoints = generateStatusDetails();
      statusDetails.serviceId = 'api';
      statusDetails.serviceName = 'API Services';
      
      // Configure Monthly Status - Near perfect uptime
      const generateMonthlyData = (): IMonthlyUptime[] => {
        const months: IMonthlyUptime[] = [];
        const now = new Date();
        
        for (let m = 4; m >= 0; m--) {
          const monthDate = new Date(now.getFullYear(), now.getMonth() - m, 1);
          const daysInMonth = new Date(monthDate.getFullYear(), monthDate.getMonth() + 1, 0).getDate();
          const monthKey = monthDate.toISOString().slice(0, 7);
          
          const days = [];
          let totalUptime = 0;
          let incidents = 0;
          
          for (let d = 1; d <= daysInMonth; d++) {
            const dayDate = new Date(monthDate.getFullYear(), monthDate.getMonth(), d);
            const isFuture = dayDate > now;
            
            if (isFuture) continue;
            
            // Almost all days are perfect
            let status: 'operational' | 'degraded' | 'partial_outage' | 'major_outage' = 'operational';
            let uptime = 100;
            let dayIncidents = 0;
            
            // Very rare minor issues
            if (Math.random() > 0.98) {
              status = 'degraded';
              uptime = 99.5 + Math.random() * 0.5;
              dayIncidents = 1;
            }
            
            days.push({
              date: dayDate.toISOString().slice(0, 10),
              status,
              uptime,
              incidents: dayIncidents,
              totalDowntime: Math.round((100 - uptime) * 14.4)
            });
            
            totalUptime += uptime;
            incidents += dayIncidents;
          }
          
          months.push({
            month: monthKey,
            days,
            overallUptime: totalUptime / days.length,
            totalIncidents: incidents
          });
        }
        
        return months;
      };
      
      statusMonth.monthlyData = generateMonthlyData();
      statusMonth.serviceId = 'all-services';
      statusMonth.serviceName = 'All Services';
      
      // Configure Incidents - None current, few past
      const currentIncidents: IIncidentDetails[] = [];
      
      const pastIncidents: IIncidentDetails[] = [
        {
          id: 'inc-2024-001',
          title: 'Brief API Response Time Increase',
          impact: 'API responses were slightly slower than usual',
          severity: 'minor',
          status: 'resolved',
          startTime: Date.now() - 45 * 24 * 60 * 60 * 1000,
          endTime: Date.now() - 45 * 24 * 60 * 60 * 1000 + 15 * 60 * 1000,
          affectedServices: ['API Services'],
          rootCause: 'Temporary increase in traffic due to a viral marketing campaign.',
          resolution: 'Auto-scaling handled the load increase. No manual intervention required.',
          updates: [
            {
              id: 'update-1',
              timestamp: Date.now() - 45 * 24 * 60 * 60 * 1000,
              status: 'investigating',
              message: 'Monitoring increased API response times.',
              author: 'Automated Monitoring'
            },
            {
              id: 'update-2',
              timestamp: Date.now() - 45 * 24 * 60 * 60 * 1000 + 5 * 60 * 1000,
              status: 'identified',
              message: 'Traffic spike identified. Auto-scaling in progress.',
              author: 'DevOps Team'
            },
            {
              id: 'update-3',
              timestamp: Date.now() - 45 * 24 * 60 * 60 * 1000 + 15 * 60 * 1000,
              status: 'resolved',
              message: 'Response times back to normal. Incident resolved.',
              author: 'Automated Monitoring'
            }
          ]
        },
        {
          id: 'inc-2023-089',
          title: 'Scheduled Database Maintenance',
          impact: 'Database was in read-only mode for 30 minutes',
          severity: 'minor',
          status: 'resolved',
          startTime: Date.now() - 90 * 24 * 60 * 60 * 1000,
          endTime: Date.now() - 90 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000,
          affectedServices: ['Database Cluster'],
          rootCause: 'Scheduled maintenance for security patches.',
          resolution: 'Maintenance completed successfully as planned.',
          updates: [
            {
              id: 'update-4',
              timestamp: Date.now() - 97 * 24 * 60 * 60 * 1000,
              status: 'investigating',
              message: 'Scheduled maintenance announced.',
              author: 'Database Team'
            },
            {
              id: 'update-5',
              timestamp: Date.now() - 90 * 24 * 60 * 60 * 1000,
              status: 'monitoring',
              message: 'Maintenance started. Database in read-only mode.',
              author: 'Database Team'
            },
            {
              id: 'update-6',
              timestamp: Date.now() - 90 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000,
              status: 'resolved',
              message: 'Maintenance completed. All systems operational.',
              author: 'Database Team'
            }
          ]
        }
      ];
      
      incidents.currentIncidents = currentIncidents;
      incidents.pastIncidents = pastIncidents;
      
      // Configure Footer
      footer.companyName = 'TechVault Services';
      footer.legalUrl = 'https://techvault.example.com/legal';
      footer.supportEmail = 'support@techvault.example.com';
      footer.statusPageUrl = 'https://status.techvault.example.com';
      footer.lastUpdated = Date.now();
      footer.currentYear = new Date().getFullYear();
      footer.socialLinks = [
        { platform: 'twitter', url: 'https://twitter.com/techvault' },
        { platform: 'github', url: 'https://github.com/techvault' },
        { platform: 'linkedin', url: 'https://linkedin.com/company/techvault' },
        { platform: 'youtube', url: 'https://youtube.com/techvault' }
      ];
      footer.rssFeedUrl = 'https://status.techvault.example.com/rss';
      footer.apiStatusUrl = 'https://api.techvault.example.com/v1/status';
      footer.enableSubscribe = true;
      footer.subscriberCount = 5421;
      footer.additionalLinks = [
        { label: 'API Documentation', url: 'https://docs.techvault.example.com' },
        { label: 'System Architecture', url: 'https://techvault.example.com/architecture' },
        { label: 'Security', url: 'https://techvault.example.com/security' }
      ];
    }}
  >
    <upl-statuspage-header></upl-statuspage-header>
    <upl-statuspage-statusbar></upl-statuspage-statusbar>
    <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
    <upl-statuspage-assetsselector></upl-statuspage-assetsselector>
    <upl-statuspage-statusdetails></upl-statuspage-statusdetails>
    <upl-statuspage-statusmonth></upl-statuspage-statusmonth>
    <upl-statuspage-incidents></upl-statuspage-incidents>
    <upl-statuspage-footer></upl-statuspage-footer>
  </dees-demowrapper>
  </div>
`;