Status Board

<div data-component="status-board">
    <div class="status-board" data-list="services">
        <template>
            <div class="status-card">
                <div class="status-card-header">
                    <span data-bind="serviceName"></span>
                    <span class="status-dot"
                          data-bind-class="'status-' + status"></span>
                </div>
                <div data-bind="statusLabel"></div>
                <div data-bind="uptimeLabel"></div>
            </div>
        </template>
    </div>
</div>

<script>
wildflower.component('status-board', {
    state: {
        services: [
            { serviceName: 'API Gateway', status: 'healthy', uptime: 99.99 },
            { serviceName: 'Auth Service', status: 'healthy', uptime: 99.95 },
            { serviceName: 'Database', status: 'degraded', uptime: 98.50 },
            { serviceName: 'CDN', status: 'healthy', uptime: 100.00 },
            { serviceName: 'Queue', status: 'healthy', uptime: 99.80 },
            { serviceName: 'Search', status: 'healthy', uptime: 99.70 }
        ]
    },
    computed: {
        statusLabel(m) { return m.status.charAt(0).toUpperCase() + m.status.slice(1); },
        uptimeLabel(m) { return m.uptime + '% uptime'; },
        overallStatus() {
            const down = this.services.filter(s => s.status === 'down').length;
            const deg = this.services.filter(s => s.status === 'degraded').length;
            if (down) return down + ' service(s) down';
            if (deg) return deg + ' service(s) degraded';
            return 'All systems operational';
        }
    },
    simulateOutage() {
        const i = Math.floor(Math.random() * this.services.length);
        this.services[i].status = 'down';
        this.services[i].uptime = Math.round((this.services[i].uptime - 1) * 100) / 100;
    },
    restoreAll() {
        this.services.forEach(s => { s.status = 'healthy'; });
    }
});
</script>