6.3 ネットワークマップ ​

// 動的マップナビゲーションクラス
class ZabbixMapNavigator {
    constructor(mapContainerId, apiEndpoint) {
        this.container = document.getElementById(mapContainerId);
        this.apiEndpoint = apiEndpoint;
        this.currentMap = null;
        this.mapHistory = [];
        this.mapCache = new Map();
        
        this.initNavigationUI();
        this.setupEventHandlers();
    }
    
    initNavigationUI() {
        // ナビゲーションツールバー作成
        const toolbar = document.createElement('div');
        toolbar.className = 'map-navigation-toolbar';
        toolbar.innerHTML = `
            <button id="nav-back" disabled>← 戻る</button>
            <div id="breadcrumb"></div>
            <button id="nav-home">🏠 ホーム</button>
            <select id="map-selector">
                <option value="">マップ選択...</option>
            </select>
            <button id="auto-layout">🔄 自動配置</button>
            <button id="refresh">↻ 更新</button>
        `;
        
        this.container.parentNode.insertBefore(toolbar, this.container);
        
        // ミニマップ作成
        const minimap = document.createElement('div');
        minimap.className = 'minimap';
        minimap.style.cssText = `
            position: absolute;
            top: 10px;
            right: 10px;
            width: 200px;
            height: 150px;
            border: 1px solid #ccc;
            background: rgba(255,255,255,0.9);
            z-index: 1000;
        `;
        this.container.appendChild(minimap);
        this.minimap = minimap;
    }
    
    setupEventHandlers() {
        // 戻るボタン
        document.getElementById('nav-back').addEventListener('click', () => {
            this.navigateBack();
        });
        
        // ホームボタン  
        document.getElementById('nav-home').addEventListener('click', () => {
            this.navigateToHome();
        });
        
        // マップ選択
        document.getElementById('map-selector').addEventListener('change', (e) => {
            if (e.target.value) {
                this.navigateToMap(e.target.value);
            }
        });
        
        // 自動レイアウト
        document.getElementById('auto-layout').addEventListener('click', () => {
            this.applyAutoLayout();
        });
        
        // 更新
        document.getElementById('refresh').addEventListener('click', () => {
            this.refreshCurrentMap();
        });
        
        // マップ要素クリック
        this.container.addEventListener('click', (e) => {
            this.handleMapElementClick(e);
        });
        
        // マップ要素ダブルクリック
        this.container.addEventListener('dblclick', (e) => {
            this.handleMapElementDoubleClick(e);
        });
        
        // 右クリックコンテキストメニュー
        this.container.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            this.showContextMenu(e);
        });
    }
    
    async navigateToMap(mapId, addToHistory = true) {
        try {
            // キャッシュチェック
            let mapData = this.mapCache.get(mapId);
            
            if (!mapData) {
                // API からマップデータ取得
                const response = await fetch(`${this.apiEndpoint}/maps/${mapId}`);
                mapData = await response.json();
                this.mapCache.set(mapId, mapData);
            }
            
            // 履歴管理
            if (addToHistory && this.currentMap) {
                this.mapHistory.push(this.currentMap);
                document.getElementById('nav-back').disabled = false;
            }
            
            this.currentMap = mapId;
            this.renderMap(mapData);
            this.updateBreadcrumb();
            this.updateMinimap();
            
        } catch (error) {
            console.error('マップナビゲーションエラー:', error);
            this.showError('マップの読み込みに失敗しました');
        }
    }
    
    navigateBack() {
        if (this.mapHistory.length > 0) {
            const previousMap = this.mapHistory.pop();
            this.navigateToMap(previousMap, false);
            
            if (this.mapHistory.length === 0) {
                document.getElementById('nav-back').disabled = true;
            }
        }
    }
    
    navigateToHome() {
        this.mapHistory = [];
        this.navigateToMap('home-map', false);
        document.getElementById('nav-back').disabled = true;
    }
    
    handleMapElementClick(event) {
        const element = event.target.closest('.map-element');
        if (!element) return;
        
        const elementId = element.dataset.elementId;
        const elementType = element.dataset.elementType;
        
        // 要素選択ハイライト
        this.highlightElement(element);
        
        // 詳細情報パネル表示
        this.showElementDetails(elementId, elementType);
    }
    
    handleMapElementDoubleClick(event) {
        const element = event.target.closest('.map-element');
        if (!element) return;
        
        const elementId = element.dataset.elementId;
        const elementType = element.dataset.elementType;
        const subMapId = element.dataset.subMapId;
        
        if (subMapId) {
            // サブマップに遷移
            this.navigateToMap(subMapId);
        } else if (elementType === 'host') {
            // ホスト詳細ページへ
            this.openHostDetails(elementId);
        } else if (elementType === 'hostgroup') {
            // ホストグループ専用マップ生成
            this.generateHostGroupMap(elementId);
        }
    }
    
    showContextMenu(event) {
        const element = event.target.closest('.map-element');
        if (!element) return;
        
        const elementId = element.dataset.elementId;
        const elementType = element.dataset.elementType;
        
        const contextMenu = document.createElement('div');
        contextMenu.className = 'context-menu';
        contextMenu.style.cssText = `
            position: absolute;
            left: ${event.pageX}px;
            top: ${event.pageY}px;
            background: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
            z-index: 2000;
        `;
        
        const menuItems = this.getContextMenuItems(elementType, elementId);
        contextMenu.innerHTML = menuItems.map(item => 
            `<div class="menu-item" data-action="${item.action}">${item.label}</div>`
        ).join('');
        
        document.body.appendChild(contextMenu);
        
        // メニュー項目クリック処理
        contextMenu.addEventListener('click', (e) => {
            const action = e.target.dataset.action;
            this.handleContextMenuAction(action, elementId, elementType);
            document.body.removeChild(contextMenu);
        });
        
        // 外部クリックでメニュー閉じる
        setTimeout(() => {
            document.addEventListener('click', () => {
                if (document.body.contains(contextMenu)) {
                    document.body.removeChild(contextMenu);
                }
            }, { once: true });
        }, 0);
    }
    
    getContextMenuItems(elementType, elementId) {
        const commonItems = [
            { action: 'details', label: '📊 詳細情報' },
            { action: 'history', label: '📈 履歴グラフ' },
            { action: 'events', label: '📋 イベント履歴' }
        ];
        
        const typeSpecificItems = {
            'host': [
                { action: 'dashboard', label: '🎛️ ダッシュボード' },
                { action: 'inventory', label: '📝 インベントリ' },
                { action: 'maintenance', label: '🔧 メンテナンス設定' }
            ],
            'hostgroup': [
                { action: 'group_map', label: '🗺️ グループマップ生成' },
                { action: 'group_dashboard', label: '📊 グループダッシュボード' }
            ],
            'trigger': [
                { action: 'acknowledge', label: '✅ 確認' },
                { action: 'suppress', label: '🔇 抑制' }
            ]
        };
        
        return [...commonItems, ...(typeSpecificItems[elementType] || [])];
    }
    
    handleContextMenuAction(action, elementId, elementType) {
        switch (action) {
            case 'details':
                this.showElementDetails(elementId, elementType);
                break;
            case 'history':
                this.openHistoryGraphs(elementId, elementType);
                break;
            case 'dashboard':
                this.openHostDashboard(elementId);
                break;
            case 'group_map':
                this.generateHostGroupMap(elementId);
                break;
            case 'maintenance':
                this.openMaintenanceDialog(elementId);
                break;
            // 他のアクション...
        }
    }
    
    async generateHostGroupMap(hostGroupId) {
        try {
            // ホストグループの動的マップ生成
            const response = await fetch(`${this.apiEndpoint}/maps/generate-hostgroup`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ hostGroupId })
            });
            
            const mapData = await response.json();
            
            // 一時マップとして表示
            this.renderMap(mapData, true);
            
        } catch (error) {
            console.error('ホストグループマップ生成エラー:', error);
        }
    }
    
    renderMap(mapData, isTemporary = false) {
        // マップレンダリング実装
        this.container.innerHTML = `
            <div class="map-canvas" style="position: relative; width: 100%; height: 600px; border: 1px solid #ccc;">
                ${mapData.elements.map(element => this.renderMapElement(element)).join('')}
                ${mapData.links.map(link => this.renderMapLink(link)).join('')}
            </div>
        `;
        
        if (!isTemporary) {
            // 定期更新開始
            this.startAutoRefresh();
        }
    }
    
    renderMapElement(element) {
        const statusClass = this.getStatusClass(element.status);
        const iconUrl = this.getElementIcon(element.type, element.subtype);
        
        return `
            <div class="map-element ${statusClass}" 
                 data-element-id="${element.id}"
                 data-element-type="${element.type}"
                 data-sub-map-id="${element.subMapId || ''}"
                 style="position: absolute; left: ${element.x}px; top: ${element.y}px;">
                <img src="${iconUrl}" alt="${element.name}" width="32" height="32">
                <div class="element-label">${element.name}</div>
            </div>
        `;
    }
    
    updateMinimap() {
        // ミニマップ更新
        const minimapCanvas = document.createElement('canvas');
        minimapCanvas.width = 200;
        minimapCanvas.height = 150;
        
        const ctx = minimapCanvas.getContext('2d');
        
        // 簡易版マップ描画
        ctx.fillStyle = '#f0f0f0';
        ctx.fillRect(0, 0, 200, 150);
        
        // 要素の概略位置表示
        const elements = this.container.querySelectorAll('.map-element');
        elements.forEach(element => {
            const rect = element.getBoundingClientRect();
            const containerRect = this.container.getBoundingClientRect();
            
            const x = (rect.left - containerRect.left) / containerRect.width * 200;
            const y = (rect.top - containerRect.top) / containerRect.height * 150;
            
            ctx.fillStyle = this.getElementColor(element);
            ctx.fillRect(x - 1, y - 1, 3, 3);
        });
        
        this.minimap.innerHTML = '';
        this.minimap.appendChild(minimapCanvas);
    }
    
    startAutoRefresh() {
        // 30秒ごとに状態更新
        this.refreshInterval = setInterval(() => {
            this.refreshElementStates();
        }, 30000);
    }
    
    async refreshElementStates() {
        try {
            const response = await fetch(`${this.apiEndpoint}/maps/${this.currentMap}/status`);
            const statusData = await response.json();
            
            // 要素状態更新
            statusData.elements.forEach(elementStatus => {
                const element = this.container.querySelector(`[data-element-id="${elementStatus.id}"]`);
                if (element) {
                    element.className = element.className.replace(/status-\w+/, `status-${elementStatus.status}`);
                }
            });
            
            this.updateMinimap();
            
        } catch (error) {
            console.error('状態更新エラー:', error);
        }
    }
}

// 使用例
const mapNavigator = new ZabbixMapNavigator('map-container', '/api/zabbix');
mapNavigator.navigateToMap('home-map');

// 地理的マップ統合クラス
class ZabbixGeoMap {
    constructor(containerId, mapConfig) {
        this.container = document.getElementById(containerId);
        this.config = mapConfig;
        this.markers = new Map();
        this.clusters = new Map();
        
        this.initMap();
        this.loadZabbixData();
    }
    
    initMap() {
        // Leaflet.js を使用した地図初期化
        this.map = L.map(this.container.id).setView(
            [this.config.defaultLat || 35.6762, this.config.defaultLng || 139.6503], // 東京
            this.config.defaultZoom || 6
        );
        
        // 地図タイル設定
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(this.map);
        
        // カスタムアイコン定義
        this.icons = {
            datacenter: L.divIcon({
                className: 'datacenter-icon',
                html: '<div class="icon-datacenter">🏢</div>',
                iconSize: [40, 40]
            }),
            server: L.divIcon({
                className: 'server-icon',
                html: '<div class="icon-server">🖥️</div>',
                iconSize: [30, 30]
            }),
            network: L.divIcon({
                className: 'network-icon', 
                html: '<div class="icon-network">🌐</div>',
                iconSize: [25, 25]
            }),
            cloud: L.divIcon({
                className: 'cloud-icon',
                html: '<div class="icon-cloud">☁️</div>',
                iconSize: [35, 35]
            })
        };
        
        // クラスター設定
        this.markerClusterGroup = L.markerClusterGroup({
            maxClusterRadius: 50,
            spiderfyOnMaxZoom: true,
            showCoverageOnHover: false,
            iconCreateFunction: (cluster) => {
                const count = cluster.getChildCount();
                const statusCounts = this.getClusterStatusCounts(cluster);
                
                return L.divIcon({
                    html: `<div class="cluster-icon cluster-${statusCounts.worst}">
                             <span>${count}</span>
                           </div>`,
                    className: 'marker-cluster',
                    iconSize: [40, 40]
                });
            }
        });
        
        this.map.addLayer(this.markerClusterGroup);
    }
    
    async loadZabbixData() {
        try {
            // Zabbix からホスト情報取得
            const response = await fetch('/api/zabbix/hosts-with-geo');
            const hosts = await response.json();
            
            // マーカー作成
            hosts.forEach(host => {
                if (host.inventory.location_lat && host.inventory.location_lon) {
                    this.createHostMarker(host);
                }
            });
            
            // ネットワーク接続線描画
            this.drawNetworkConnections(hosts);
            
            // 定期更新開始
            this.startStatusUpdates();
            
        } catch (error) {
            console.error('Zabbixデータ読み込みエラー:', error);
        }
    }
    
    createHostMarker(host) {
        const lat = parseFloat(host.inventory.location_lat);
        const lng = parseFloat(host.inventory.location_lon);
        
        if (isNaN(lat) || isNaN(lng)) return;
        
        // ホストタイプに基づくアイコン選択
        const iconType = this.getHostIconType(host);
        const icon = this.icons[iconType];
        
        // マーカー作成
        const marker = L.marker([lat, lng], { icon })
            .bindPopup(this.createHostPopup(host))
            .on('click', () => this.onHostMarkerClick(host));
        
        // 状態に基づく色設定
        this.updateMarkerStatus(marker, host.status);
        
        // クラスターグループに追加
        this.markerClusterGroup.addLayer(marker);
        
        // マーカー管理
        this.markers.set(host.hostid, marker);
    }
    
    getHostIconType(host) {
        const tags = host.tags || [];
        const hostGroups = host.groups || [];
        
        // タグ・グループ情報からアイコンタイプ判定
        if (tags.some(tag => tag.tag === 'datacenter' || tag.tag === 'dc')) {
            return 'datacenter';
        } else if (hostGroups.some(group => group.name.includes('Cloud'))) {
            return 'cloud';
        } else if (hostGroups.some(group => group.name.includes('Network'))) {
            return 'network';
        } else {
            return 'server';
        }
    }
    
    createHostPopup(host) {
        const latestData = host.latestData || {};
        
        return `
            <div class="host-popup">
                <h3>${host.name}</h3>
                <div class="host-info">
                    <div><strong>IP:</strong> ${host.interfaces[0]?.ip || 'N/A'}</div>
                    <div><strong>OS:</strong> ${host.inventory.os || 'N/A'}</div>
                    <div><strong>場所:</strong> ${host.inventory.location || 'N/A'}</div>
                </div>
                <div class="host-metrics">
                    <div>CPU: ${latestData.cpu || 'N/A'}%</div>
                    <div>Memory: ${latestData.memory || 'N/A'}%</div>
                    <div>Disk: ${latestData.disk || 'N/A'}%</div>
                </div>
                <div class="host-actions">
                    <button onclick="openHostDashboard('${host.hostid}')">ダッシュボード</button>
                    <button onclick="openHostGraphs('${host.hostid}')">グラフ</button>
                </div>
            </div>
        `;
    }
    
    drawNetworkConnections(hosts) {
        // ネットワーク接続の可視化
        const connections = this.analyzeNetworkConnections(hosts);
        
        connections.forEach(connection => {
            const source = hosts.find(h => h.hostid === connection.source);
            const target = hosts.find(h => h.hostid === connection.target);
            
            if (source?.inventory.location_lat && target?.inventory.location_lat) {
                const sourceLat = parseFloat(source.inventory.location_lat);
                const sourceLng = parseFloat(source.inventory.location_lon);
                const targetLat = parseFloat(target.inventory.location_lat);
                const targetLng = parseFloat(target.inventory.location_lon);
                
                const polyline = L.polyline([
                    [sourceLat, sourceLng],
                    [targetLat, targetLng]
                ], {
                    color: this.getConnectionColor(connection.type),
                    weight: this.getConnectionWeight(connection.bandwidth),
                    opacity: 0.7
                }).addTo(this.map);
                
                polyline.bindTooltip(`${connection.type}: ${connection.bandwidth || 'Unknown'}`);
            }
        });
    }
    
    analyzeNetworkConnections(hosts) {
        // ネットワーク接続分析（簡略化版）
        const connections = [];
        
        // 同一サブネット内の接続を推定
        const subnets = {};
        hosts.forEach(host => {
            const ip = host.interfaces[0]?.ip;
            if (ip) {
                const subnet = ip.split('.').slice(0, 3).join('.');
                if (!subnets[subnet]) subnets[subnet] = [];
                subnets[subnet].push(host.hostid);
            }
        });
        
        // サブネット内接続生成
        Object.values(subnets).forEach(hostIds => {
            if (hostIds.length > 1) {
                for (let i = 0; i < hostIds.length - 1; i++) {
                    connections.push({
                        source: hostIds[i],
                        target: hostIds[i + 1],
                        type: 'LAN',
                        bandwidth: '1Gbps'
                    });
                }
            }
        });
        
        return connections;
    }
    
    updateMarkerStatus(marker, status) {
        const element = marker.getElement();
        if (element) {
            element.className = element.className.replace(/status-\w+/, `status-${status}`);
        }
    }
    
    startStatusUpdates() {
        // 60秒ごとに状態更新
        setInterval(async () => {
            try {
                const response = await fetch('/api/zabbix/hosts-status');
                const statusUpdates = await response.json();
                
                statusUpdates.forEach(update => {
                    const marker = this.markers.get(update.hostid);
                    if (marker) {
                        this.updateMarkerStatus(marker, update.status);
                    }
                });
                
            } catch (error) {
                console.error('状態更新エラー:', error);
            }
        }, 60000);
    }
    
    // フィルタリング機能
    filterByStatus(status) {
        this.markers.forEach((marker, hostId) => {
            const host = this.hosts.find(h => h.hostid === hostId);
            if (status === 'all' || host.status === status) {
                this.markerClusterGroup.addLayer(marker);
            } else {
                this.markerClusterGroup.removeLayer(marker);
            }
        });
    }
    
    filterByHostGroup(groupName) {
        this.markers.forEach((marker, hostId) => {
            const host = this.hosts.find(h => h.hostid === hostId);
            const hasGroup = host.groups.some(g => g.name === groupName);
            
            if (groupName === 'all' || hasGroup) {
                this.markerClusterGroup.addLayer(marker);
            } else {
                this.markerClusterGroup.removeLayer(marker);
            }
        });
    }
    
    // ヒートマップ表示
    showMetricHeatmap(metric) {
        const heatData = [];
        
        this.markers.forEach((marker, hostId) => {
            const host = this.hosts.find(h => h.hostid === hostId);
            const lat = parseFloat(host.inventory.location_lat);
            const lng = parseFloat(host.inventory.location_lon);
            const value = host.latestData[metric] || 0;
            
            if (!isNaN(lat) && !isNaN(lng)) {
                heatData.push([lat, lng, value / 100]);
            }
        });
        
        // ヒートマップ描画（HeatLayer.js使用）
        if (this.heatLayer) {
            this.map.removeLayer(this.heatLayer);
        }
        
        this.heatLayer = L.heatLayer(heatData, {
            radius: 25,
            blur: 15,
            maxZoom: 17,
            gradient: {
                0.0: 'blue',
                0.5: 'yellow', 
                1.0: 'red'
            }
        }).addTo(this.map);
    }
}

// 使用例
const geoMapConfig = {
    defaultLat: 35.6762,
    defaultLng: 139.6503,
    defaultZoom: 6
};

const zabbixGeoMap = new ZabbixGeoMap('geo-map-container', geoMapConfig);