File size: 5,319 Bytes
c3fa188
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
// Main JavaScript for Quantum Code Weaver Engine Dashboard

document.addEventListener('DOMContentLoaded', function() {
    // Initialize feather icons
    feather.replace();
    
    // Initialize system metrics with random data
    initializeMetrics();
    
    // Setup event listeners
    setupEventListeners();
    
    // Simulate real-time updates
    simulateLiveUpdates();
});

function initializeMetrics() {
    // Initialize metrics with initial values
    const metrics = {
        'queue-tasks': Math.floor(Math.random() * 100),
        'queue-results': Math.floor(Math.random() * 50),
        'verified-states': Math.floor(Math.random() * 1000),
        'workers-active': Math.floor(Math.random() * 8) + 2,
        'avg-score': (Math.random() * 20 + 80).toFixed(1),
        'processing-rate': Math.floor(Math.random() * 500) + 100
    };
    
    // Update all metric elements
    Object.keys(metrics).forEach(key => {
        const element = document.getElementById(key);
        if (element) {
            element.textContent = metrics[key];
        }
    });
}

function setupEventListeners() {
    // Add click handlers for status cards
    document.querySelectorAll('.status-card').forEach(card => {
        card.addEventListener('click', function() {
            const status = this.getAttribute('data-status');
            const system = this.getAttribute('data-system');
            showStatusDetails(system, status);
        });
    });
    
    // Add refresh handler
    const refreshBtn = document.getElementById('refresh-metrics');
    if (refreshBtn) {
        refreshBtn.addEventListener('click', function() {
            refreshMetrics();
            this.classList.add('animate-spin');
            setTimeout(() => {
                this.classList.remove('animate-spin');
            }, 1000);
        });
    }
}

function showStatusDetails(system, status) {
    const statusColors = {
        'operational': 'text-green-400',
        'degraded': 'text-yellow-400',
        'offline': 'text-red-400'
    };
    
    const statusMessages = {
        'operational': 'All systems nominal',
        'degraded': 'Performance degradation detected',
        'offline': 'System offline or unreachable'
    };
    
    alert(`System: ${system.toUpperCase()}\nStatus: ${status.toUpperCase()}\n${statusMessages[status]}`);
}

function refreshMetrics() {
    // Simulate refreshing metrics with new random values
    const metrics = document.querySelectorAll('.metric-value');
    metrics.forEach(metric => {
        const current = parseInt(metric.textContent);
        const change = Math.floor(Math.random() * 10) - 5;
        const newValue = Math.max(0, current + change);
        
        // Animate the change
        metric.style.opacity = '0.5';
        setTimeout(() => {
            metric.textContent = newValue;
            metric.style.opacity = '1';
        }, 300);
    });
}

function simulateLiveUpdates() {
    // Update queue counts randomly
    setInterval(() => {
        const tasksEl = document.getElementById('queue-tasks');
        const resultsEl = document.getElementById('queue-results');
        
        if (tasksEl && resultsEl) {
            // Simulate queue movement
            const tasks = parseInt(tasksEl.textContent);
            const results = parseInt(resultsEl.textContent);
            
            const newTasks = Math.max(0, tasks + Math.floor(Math.random() * 3) - 1);
            const newResults = Math.max(0, results + Math.floor(Math.random() * 2));
            
            tasksEl.textContent = newTasks;
            resultsEl.textContent = newResults;
            
            // Add visual feedback
            if (newTasks > tasks) tasksEl.classList.add('text-green-400');
            else if (newTasks < tasks) tasksEl.classList.add('text-red-400');
            
            if (newResults > results) resultsEl.classList.add('text-green-400');
            else if (newResults < results) resultsEl.classList.add('text-red-400');
            
            setTimeout(() => {
                tasksEl.classList.remove('text-green-400', 'text-red-400');
                resultsEl.classList.remove('text-green-400', 'text-red-400');
            }, 1000);
        }
    }, 3000);
    
    // Update active workers
    setInterval(() => {
        const workersEl = document.getElementById('workers-active');
        if (workersEl) {
            const current = parseInt(workersEl.textContent);
            const change = Math.random() > 0.7 ? (Math.random() > 0.5 ? 1 : -1) : 0;
            const newCount = Math.min(10, Math.max(2, current + change));
            
            if (newCount !== current) {
                workersEl.textContent = newCount;
                workersEl.classList.add('float-animation');
                setTimeout(() => {
                    workersEl.classList.remove('float-animation');
                }, 1000);
            }
        }
    }, 5000);
}

// Utility function for formatting numbers
function formatNumber(num) {
    if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M';
    }
    if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K';
    }
    return num.toString();
}

// Export functions for use in web components
window.QCWEUtils = {
    formatNumber,
    refreshMetrics
};