6.1 ダッシュボード作成 ​

// Slack統合ダッシュボードウィジェット
class SlackIntegrationWidget {
    constructor(slackWebhookUrl, channel) {
        this.webhookUrl = slackWebhookUrl;
        this.channel = channel;
        this.updateInterval = 60000; // 1分
    }
    
    async fetchSlackMessages() {
        try {
            // Slack API呼び出し（実際の実装では適切な認証が必要）
            const response = await fetch('/api/slack/messages', {
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + this.slackToken,
                    'Content-Type': 'application/json'
                }
            });
            
            const messages = await response.json();
            return messages.messages.filter(msg => 
                msg.channel === this.channel &&
                msg.text.includes('zabbix') || msg.text.includes('alert')
            );
        } catch (error) {
            console.error('Slack API error:', error);
            return [];
        }
    }
    
    renderWidget(containerId) {
        const container = document.getElementById(containerId);
        
        this.fetchSlackMessages().then(messages => {
            const html = `
                <div class="slack-widget">
                    <h3>Recent Alerts in #${this.channel}</h3>
                    <div class="messages">
                        ${messages.map(msg => `
                            <div class="message">
                                <span class="timestamp">${new Date(msg.ts * 1000).toLocaleString()}</span>
                                <span class="user">${msg.user}</span>
                                <div class="text">${msg.text}</div>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;
            
            container.innerHTML = html;
        });
        
        // 定期更新
        setInterval(() => this.renderWidget(containerId), this.updateInterval);
    }
}

// GitLab CI/CD統合
class GitLabCIWidget {
    constructor(gitlabUrl, projectId, accessToken) {
        this.gitlabUrl = gitlabUrl;
        this.projectId = projectId;
        this.accessToken = accessToken;
    }
    
    async fetchPipelineStatus() {
        const response = await fetch(
            `${this.gitlabUrl}/api/v4/projects/${this.projectId}/pipelines`,
            {
                headers: {
                    'Authorization': `Bearer ${this.accessToken}`
                }
            }
        );
        
        const pipelines = await response.json();
        return pipelines.slice(0, 10); // 最新10件
    }
    
    renderWidget(containerId) {
        const container = document.getElementById(containerId);
        
        this.fetchPipelineStatus().then(pipelines => {
            const html = `
                <div class="gitlab-widget">
                    <h3>Recent CI/CD Pipelines</h3>
                    <div class="pipelines">
                        ${pipelines.map(pipeline => `
                            <div class="pipeline status-${pipeline.status}">
                                <span class="id">#${pipeline.id}</span>
                                <span class="branch">${pipeline.ref}</span>
                                <span class="status">${pipeline.status}</span>
                                <span class="duration">${pipeline.duration || 'N/A'}s</span>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;
            
            container.innerHTML = html;
        });
    }
}

// ダッシュボードメモリ管理クラス
class DashboardMemoryManager {
    constructor() {
        this.widgetCache = new Map();
        this.maxCacheSize = 100;
        this.cleanupInterval = 300000; // 5分
        
        // 定期クリーンアップ
        setInterval(() => this.cleanup(), this.cleanupInterval);
    }
    
    cacheWidgetData(widgetId, data, ttl = 60000) {
        const cacheEntry = {
            data: data,
            timestamp: Date.now(),
            ttl: ttl
        };
        
        this.widgetCache.set(widgetId, cacheEntry);
        
        // キャッシュサイズ制限
        if (this.widgetCache.size > this.maxCacheSize) {
            this.evictOldestCache();
        }
    }
    
    getCachedData(widgetId) {
        const cacheEntry = this.widgetCache.get(widgetId);
        
        if (!cacheEntry) return null;
        
        const isExpired = (Date.now() - cacheEntry.timestamp) > cacheEntry.ttl;
        if (isExpired) {
            this.widgetCache.delete(widgetId);
            return null;
        }
        
        return cacheEntry.data;
    }
    
    cleanup() {
        const now = Date.now();
        
        for (const [widgetId, cacheEntry] of this.widgetCache.entries()) {
            const isExpired = (now - cacheEntry.timestamp) > cacheEntry.ttl;
            if (isExpired) {
                this.widgetCache.delete(widgetId);
            }
        }
        
        // ブラウザメモリ統計表示（開発環境）
        if (performance.memory) {
            console.log('Memory usage:', {
                used: Math.round(performance.memory.usedJSHeapSize / 1024 / 1024) + 'MB',
                total: Math.round(performance.memory.totalJSHeapSize / 1024 / 1024) + 'MB',
                limit: Math.round(performance.memory.jsHeapSizeLimit / 1024 / 1024) + 'MB'
            });
        }
    }
    
    evictOldestCache() {
        let oldestKey = null;
        let oldestTime = Date.now();
        
        for (const [widgetId, cacheEntry] of this.widgetCache.entries()) {
            if (cacheEntry.timestamp < oldestTime) {
                oldestTime = cacheEntry.timestamp;
                oldestKey = widgetId;
            }
        }
        
        if (oldestKey) {
            this.widgetCache.delete(oldestKey);
        }
    }
}

// 使用例
const memoryManager = new DashboardMemoryManager();

// ウィジェットデータキャッシュ
memoryManager.cacheWidgetData('cpu_widget_1', cpuData, 30000); // 30秒TTL

// キャッシュからデータ取得
const cachedData = memoryManager.getCachedData('cpu_widget_1');
if (cachedData) {
    updateWidget(cachedData);
} else {
    fetchFreshData('cpu_widget_1');
}