OpenManager Vibe V4 MCP Server

/** * OpenManager AI - 데이터 처리기 * 서버 데이터 처리, 페이지네이션, 필터링 및 UI 업데이트 로직을 구현합니다. */ import { AIProcessor } from '../utils/AIProcessor.js'; import { CONFIG } from '../utils/config.js'; import { generateDummyData } from '../utils/DummyDataGenerator.js'; class DataProcessor { constructor() { try { // 기본 데이터 초기화 this.serverData = window.serverData || []; this.filteredData = []; this.currentFilter = 'all'; this.currentSort = 'status-critical'; // 기본 정렬을 상태 기준(심각 > 경고 > 정상)으로 변경 this.searchQuery = ''; this.currentPage = 1; this.itemsPerPage = 6; // 페이지당 서버 수 // AI 문제 페이지네이션 this.currentProblemPage = 1; this.problemsPerPage = 5; // 페이지당, 처음에 표시될 문제 수 // 초기화 로깅 console.log('DataProcessor 초기화 시작...'); // AIProcessor 인스턴스 초기화 개선 if (window.aiProcessor) { this.aiProcessor = window.aiProcessor; console.log('기존 AIProcessor 인스턴스를 사용합니다.'); } else if (typeof AIProcessor === 'function') { // AIProcessor 클래스가 존재하면 인스턴스 생성 try { window.aiProcessor = new AIProcessor(); this.aiProcessor = window.aiProcessor; console.log("AIProcessor 인스턴스를 새로 생성했습니다."); } catch (e) { console.error("AIProcessor 인스턴스 생성 중 오류 발생:", e); this.aiProcessor = null; } } else { console.warn("AIProcessor 클래스를 찾을 수 없습니다. 기본 상태 판단 로직을 사용합니다."); this.aiProcessor = null; } // 서버 상태 평가 임계값 - 통합 관리 this.thresholds = { critical: { cpu: 90, memory: 90, disk: 90 }, warning: { cpu: 70, memory: 70, disk: 70 } }; // UI 요소 참조 - 안전하게 참조를 시도합니다 this.findUIElements(); // 이벤트 리스너 등록 if (this.hasRequiredElements()) { this.registerEventListeners(); console.log('이벤트 리스너가 등록되었습니다.'); } else { console.warn('일부 UI 요소를 찾을 수 없어 이벤트 리스너 등록이 제한됩니다.'); } // 자동 데이터 업데이트 (1분 간격) setInterval(() => this.refreshData(), 60 * 1000); // 초기 데이터 로드 this.loadData(); // 서버 상태 판단 통합 로직을 전역 함수로 등록 window.getServerStatus = (server) => this.getServerStatus(server); console.log('DataProcessor 초기화 완료.'); } catch (error) { console.error('DataProcessor 초기화 중 심각한 오류 발생:', error); // 최소한의 기능 보장 this.serverData = window.serverData || []; this.filteredData = window.serverData || []; // 기본 필수 함수들은 최소한으로라도 구현 if (!this.showLoading) { this.showLoading = function() { const loadingIndicator = document.getElementById('loadingIndicator'); const serverGrid = document.getElementById('serverGrid'); if (loadingIndicator) loadingIndicator.style.display = 'block'; if (serverGrid) serverGrid.style.opacity = '0.3'; }; } if (!this.hideLoading) { this.hideLoading = function() { const loadingIndicator = document.getElementById('loadingIndicator'); const serverGrid = document.getElementById('serverGrid'); if (loadingIndicator) loadingIndicator.style.display = 'none'; if (serverGrid) serverGrid.style.opacity = '1'; }; } // 기본 데이터 처리 함수 if (!this.handleDataUpdate) { this.handleDataUpdate = function(data) { this.serverData = data || []; this.filteredData = data || []; this.renderServerGrid(); this.hideLoading(); }; } } } // UI 요소를 찾아 참조를 저장하는 메소드 findUIElements() { try { // UI 요소 참조 this.serverGrid = document.getElementById('serverGrid'); this.loadingIndicator = document.getElementById('loadingIndicator'); this.searchInput = document.getElementById('searchInput'); this.statusFilter = document.getElementById('statusFilter'); this.pageSize = document.getElementById('pageSize'); this.prevPageBtn = document.getElementById('prevPageBtn'); this.nextPageBtn = document.getElementById('nextPageBtn'); this.serverCount = document.getElementById('serverCount'); this.currentPageElement = document.getElementById('currentPage'); this.refreshButton = document.getElementById('refreshBtn'); this.modalElement = document.getElementById('serverDetailModal'); this.closeModalButton = document.querySelector('.btn-close[data-bs-dismiss="modal"]'); // 페이지네이션 컨테이너 요소 this.pagination = document.querySelector('.pagination-container'); // 모든 요소 참조가 필요하지 않는지 확인 로깅 const missingElements = []; if (!this.serverGrid) missingElements.push('serverGrid'); if (!this.loadingIndicator) missingElements.push('loadingIndicator'); if (!this.refreshButton) missingElements.push('refreshBtn'); if (missingElements.length > 0) { console.warn(`다음 UI 요소를 찾을 수 없습니다: ${missingElements.join(', ')}`); } } catch (error) { console.error('UI 요소 참조 중 오류:', error); } } // 필수 UI 요소가 있는지 확인 hasRequiredElements() { // 최소한 서버 그리드와 로딩 인디케이터는 필요 return this.serverGrid && this.loadingIndicator; } registerEventListeners() { // 필터링 이벤트 if (this.statusFilter) { this.statusFilter.addEventListener('change', () => { this.currentFilter = this.statusFilter.value; this.currentPage = 1; // 필터 변경 시 첫 페이지로 리셋 this.applyFiltersAndSort(); }); } // 검색 이벤트 if (this.searchInput) { this.searchInput.addEventListener('input', () => { this.searchQuery = this.searchInput.value.toLowerCase(); this.currentPage = 1; // 검색 시 첫 페이지로 리셋 this.applyFiltersAndSort(); }); } // 페이지 크기 이벤트 if (this.pageSize) { this.pageSize.addEventListener('change', () => { this.itemsPerPage = parseInt(this.pageSize.value); this.currentPage = 1; this.applyFiltersAndSort(); }); } // 이전 페이지 버튼 if (this.prevPageBtn) { this.prevPageBtn.addEventListener('click', () => { if (this.currentPage > 1) { this.currentPage--; this.applyFiltersAndSort(); } }); } // 다음 페이지 버튼 if (this.nextPageBtn) { this.nextPageBtn.addEventListener('click', () => { const totalPages = Math.ceil(this.filteredData.length / this.itemsPerPage); if (this.currentPage < totalPages) { this.currentPage++; this.applyFiltersAndSort(); } }); } // 새로고침 이벤트 if (this.refreshButton) { this.refreshButton.addEventListener('click', () => this.refreshData()); } // 모달 닫기 이벤트 if (this.closeModalButton) { this.closeModalButton.addEventListener('click', () => this.closeModal()); } // 서버 데이터 업데이트 이벤트 리스너 window.addEventListener('serverDataUpdated', (event) => { this.handleDataUpdate(event.detail); }); // 초기 AI 도우미 기능 설정 const aiQuerySubmitButton = document.getElementById('ai-query-submit'); if (aiQuerySubmitButton) { aiQuerySubmitButton.addEventListener('click', () => this.processAIQuery()); } // 장애 보고서 다운로드 이벤트 const downloadReportButton = document.getElementById('downloadAllReportsBtn'); if (downloadReportButton) { downloadReportButton.addEventListener('click', () => this.downloadErrorReport()); } // 전체 문제 보기 버튼 이벤트 처리 const viewAllProblemsBtn = document.getElementById('viewAllProblemsBtn'); if (viewAllProblemsBtn) { viewAllProblemsBtn.addEventListener('click', () => { // 현재 모든 문제를 모달로 표시하도록 수정 this.showAllProblems(); }); } // 프리셋 태그 버튼 이벤트 document.querySelectorAll('.preset-tag').forEach(tag => { tag.addEventListener('click', () => { // 이전에 선택된 태그의 active 클래스 제거 document.querySelectorAll('.preset-tag.active').forEach(el => { el.classList.remove('active'); }); // 클릭한 태그에 active 클래스 추가 tag.classList.add('active'); const presetText = tag.dataset.preset; const input = document.getElementById('queryInput'); if (input) { input.value = presetText; input.focus(); // 자동 실행 const submitButton = document.getElementById('ai-query-submit'); if (submitButton) { submitButton.click(); } } // 0.5초 후 active 클래스 제거하여 클릭 효과 리셋 setTimeout(() => { tag.classList.remove('active'); }, 500); }); }); // 전체 보고서 다운로드 버튼 이벤트 리스너 const downloadAllReportsBtn = document.getElementById('downloadAllReportsBtn'); if (downloadAllReportsBtn) { downloadAllReportsBtn.addEventListener('click', () => { this.downloadAllProblemsReport(); }); } // 쿼리 결과 닫기 버튼 이벤트 리스너 const closeQueryResultBtn = document.getElementById('closeQueryResult'); if (closeQueryResultBtn) { closeQueryResultBtn.addEventListener('click', () => { const queryResultElement = document.getElementById('queryResult'); const queryResultContent = document.getElementById('queryResultContent'); if (queryResultElement) { queryResultElement.style.display = 'none'; queryResultElement.classList.remove('active'); } if (queryResultContent) { queryResultContent.innerHTML = ''; } // 입력창도 비우기 const queryInput = document.getElementById('queryInput'); if (queryInput) { queryInput.value = ''; } console.log('AI 분석 결과가 닫혔습니다.'); }); } } loadData() { this.showLoading(); // 데이터가 이미 로드되어 있으면 사용 if (window.serverData && window.serverData.length > 0) { this.handleDataUpdate(window.serverData); return; } // 데이터 로드 시도 (최대 10초 대기) let attempts = 0; const maxAttempts = 20; // 10초 = 500ms * 20 const checkInterval = setInterval(() => { if (window.serverData && window.serverData.length > 0) { clearInterval(checkInterval); this.handleDataUpdate(window.serverData); return; } attempts++; if (attempts >= maxAttempts) { clearInterval(checkInterval); this.hideLoading(); console.error('서버 데이터를 로드하지 못했습니다. 백업 데이터 생성을 시도합니다.'); this.createBackupData(); } }, 500); } // 백업 데이터 생성 함수 createBackupData() { console.log('백업 데이터 생성 시도...'); try { // 더미 데이터 생성 함수 사용 window.serverData = generateDummyData(10); // 10개의 서버 데이터 생성 if (window.serverData && window.serverData.length > 0) { this.handleDataUpdate(window.serverData); return; } // 백업 생성 실패 시 기본 더미 데이터 생성 console.log('기본 더미 데이터 생성...'); const backupServers = []; // 기본 더미 서버 10대 생성 for (let i = 1; i <= 10; i++) { // 약 30%의 확률로 문제 있는 서버 생성 const hasProblem = Math.random() < 0.3; const problemLevel = hasProblem ? (Math.random() < 0.3 ? 'critical' : 'warning') : 'normal'; const cpuUsage = problemLevel === 'critical' ? Math.floor(Math.random() * 10) + 90 : // 90-99% problemLevel === 'warning' ? Math.floor(Math.random() * 20) + 70 : // 70-89% Math.floor(Math.random() * 50) + 10; // 10-59% const memoryUsage = problemLevel === 'critical' ? Math.floor(Math.random() * 10) + 90 : // 90-99% problemLevel === 'warning' ? Math.floor(Math.random() * 20) + 70 : // 70-89% Math.floor(Math.random() * 50) + 10; // 10-59% const diskUsage = problemLevel === 'critical' ? Math.floor(Math.random() * 10) + 90 : // 90-99% problemLevel === 'warning' ? Math.floor(Math.random() * 20) + 70 : // 70-89% Math.floor(Math.random() * 50) + 20; // 20-69% backupServers.push({ hostname: `server-${i}`, os: 'Linux', uptime: '3 days, 12:30:15', cpu_usage: cpuUsage, memory_usage_percent: memoryUsage, memory_total: '16GB', memory_used: '8GB', disk: [{ mount: '/', disk_total: '500GB', disk_used: '300GB', disk_usage_percent: diskUsage }], load_avg_1m: (Math.random() * 5).toFixed(2), load_avg_5m: (Math.random() * 4).toFixed(2), load_avg_15m: (Math.random() * 3).toFixed(2), process_count: Math.floor(Math.random() * 200) + 50, zombie_count: Math.floor(Math.random() * 3), timestamp: new Date().toISOString(), net: { interface: 'eth0', rx_bytes: Math.floor(Math.random() * 1000000), tx_bytes: Math.floor(Math.random() * 1000000), rx_errors: Math.floor(Math.random() * 10), tx_errors: Math.floor(Math.random() * 10) }, services: { 'nginx': problemLevel === 'critical' ? 'stopped' : 'running', 'mysql': Math.random() > 0.9 ? 'stopped' : 'running', 'redis': Math.random() > 0.9 ? 'stopped' : 'running' }, errors: problemLevel !== 'normal' ? [problemLevel === 'critical' ? 'Critical: 서버 응답 없음' : '경고: 높은 부하 감지'] : [] }); } // 전역 변수에 저장 및 이벤트 발생 window.serverData = backupServers; this.handleDataUpdate(backupServers); // 이벤트 발생시키기 const event = new CustomEvent('serverDataUpdated', { detail: backupServers }); window.dispatchEvent(event); } catch (error) { console.error('백업 데이터 생성 중 오류:', error); // 최종 실패 시 오류 메시지 표시 this.serverGrid.innerHTML = ` <div class="alert alert-danger"> <i class="bi bi-exclamation-triangle"></i> 서버 데이터를 로드하지 못했습니다. 새로고침 버튼을 클릭하여 다시 시도해 주세요. </div> `; } } handleDataUpdate(data) { this.serverData = [...data]; // 데이터 복사 this.hideLoading(); // 추가 데이터 처리 (AI 분석 등) if (this.aiProcessor) { this.aiProcessor.updateData(this.serverData); this.updateProblemsList(); // AI 자동 장애 보고서 업데이트 } // 필터 및 정렬 적용 this.applyFiltersAndSort(); this.updateGlobalStatusSummary(); // 서버 현황 요약 업데이트 추가 this.updatePresetTagClasses(); // 프리셋 태그 클래스 업데이트 } // 프리셋 태그 클래스 업데이트 (서버 상태에 따라 색상 동적 변경) updatePresetTagClasses() { // 1. CPU 과부하 프리셋 const cpuPresetTag = document.getElementById('cpu-preset'); if (cpuPresetTag) { const highCpuServers = this.serverData.filter(server => server.cpu_usage >= this.thresholds.warning.cpu); const criticalCpuServers = highCpuServers.filter(server => server.cpu_usage >= this.thresholds.critical.cpu); // 클래스 초기화 및 상태에 따라 설정 cpuPresetTag.classList.remove('tag-normal', 'tag-warning', 'tag-critical'); const badgeElement = cpuPresetTag.querySelector('.badge'); if (criticalCpuServers.length > 0) { cpuPresetTag.classList.add('tag-critical'); if (badgeElement) { badgeElement.className = 'badge bg-danger'; badgeElement.textContent = '심각'; } } else if (highCpuServers.length > 0) { cpuPresetTag.classList.add('tag-warning'); if (badgeElement) { badgeElement.className = 'badge bg-warning'; badgeElement.textContent = '경고'; } } else { cpuPresetTag.classList.add('tag-normal'); if (badgeElement) { badgeElement.className = 'badge bg-success'; badgeElement.textContent = '정상'; } } } // 2. 메모리 부족 프리셋 const memoryPresetTag = document.getElementById('memory-preset'); if (memoryPresetTag) { const highMemoryServers = this.serverData.filter(server => server.memory_usage_percent >= this.thresholds.warning.memory); const criticalMemoryServers = highMemoryServers.filter(server => server.memory_usage_percent >= this.thresholds.critical.memory); // 클래스 초기화 및 상태에 따라 설정 memoryPresetTag.classList.remove('tag-normal', 'tag-warning', 'tag-critical'); const badgeElement = memoryPresetTag.querySelector('.badge'); if (criticalMemoryServers.length > 0) { memoryPresetTag.classList.add('tag-critical'); if (badgeElement) { badgeElement.className = 'badge bg-danger'; badgeElement.textContent = '심각'; } } else if (highMemoryServers.length > 0) { memoryPresetTag.classList.add('tag-warning'); if (badgeElement) { badgeElement.className = 'badge bg-warning'; badgeElement.textContent = '경고'; } } else { memoryPresetTag.classList.add('tag-normal'); if (badgeElement) { badgeElement.className = 'badge bg-success'; badgeElement.textContent = '정상'; } } } // 3. 서비스 중단 프리셋 const servicePresetTag = document.getElementById('service-preset'); if (servicePresetTag) { const stoppedServiceServers = this.serverData.filter(server => server.services && Object.values(server.services).some(status => status === 'stopped') ); // 클래스 초기화 및 상태에 따라 설정 servicePresetTag.classList.remove('tag-normal', 'tag-warning', 'tag-critical'); const badgeElement = servicePresetTag.querySelector('.badge'); if (stoppedServiceServers.length > 0) { servicePresetTag.classList.add('tag-critical'); if (badgeElement) { badgeElement.className = 'badge bg-danger'; badgeElement.textContent = '심각'; } } else { servicePresetTag.classList.add('tag-normal'); if (badgeElement) { badgeElement.className = 'badge bg-success'; badgeElement.textContent = '정상'; } } } // 4. 디스크 부족 프리셋 const diskPresetTag = document.getElementById('disk-preset'); if (diskPresetTag) { const highDiskServers = this.serverData.filter(server => server.disk && server.disk.length > 0 && server.disk[0].disk_usage_percent >= this.thresholds.warning.disk ); const criticalDiskServers = highDiskServers.filter(server => server.disk[0].disk_usage_percent >= this.thresholds.critical.disk ); // 클래스 초기화 및 상태에 따라 설정 diskPresetTag.classList.remove('tag-normal', 'tag-warning', 'tag-critical'); const badgeElement = diskPresetTag.querySelector('.badge'); if (criticalDiskServers.length > 0) { diskPresetTag.classList.add('tag-critical'); if (badgeElement) { badgeElement.className = 'badge bg-danger'; badgeElement.textContent = '심각'; } } else if (highDiskServers.length > 0) { diskPresetTag.classList.add('tag-warning'); if (badgeElement) { badgeElement.className = 'badge bg-warning'; badgeElement.textContent = '경고'; } } else { diskPresetTag.classList.add('tag-normal'); if (badgeElement) { badgeElement.className = 'badge bg-success'; badgeElement.textContent = '정상'; } } } // 5. 정상 서버 프리셋 (항상 정상 클래스 유지, 정상 배지만 표시) const normalPresetTag = document.getElementById('normal-preset'); if (normalPresetTag) { const normalServers = this.serverData.filter(server => this.getServerStatus(server) === 'normal'); normalPresetTag.classList.remove('tag-warning', 'tag-critical'); normalPresetTag.classList.add('tag-normal'); // 배지 업데이트 const badgeElement = normalPresetTag.querySelector('.badge'); if (badgeElement) { badgeElement.className = 'badge bg-success'; badgeElement.textContent = `정상 (${normalServers.length})`; } } } refreshData() { this.showLoading(); // 새로고침 버튼 상태 업데이트 const refreshBtn = document.getElementById('refreshBtn'); if (refreshBtn) { refreshBtn.classList.add('loading'); refreshBtn.setAttribute('disabled', 'disabled'); const refreshContent = refreshBtn.querySelector('.refresh-content'); const loadingContent = refreshBtn.querySelector('.loading-content'); if (refreshContent) refreshContent.style.display = 'none'; if (loadingContent) loadingContent.style.display = 'inline-block'; } // 페이지 재로드가 아닌 데이터만 새로 생성 try { console.log('더미 데이터 다시 생성...'); window.serverData = generateDummyData(10); // 10개의 서버 데이터 생성 // 데이터 업데이트 이벤트 발생시키기 const event = new CustomEvent('serverDataUpdated', { detail: window.serverData }); window.dispatchEvent(event); // 3초 후 로딩 숨기기 (새로고침 효과) setTimeout(() => { this.hideLoading(); // 새로고침 버튼 상태 복원 this.resetRefreshButton(refreshBtn); }, 3000); return; } catch (e) { console.error('데이터 새로고침 중 오류:', e); // 오류 발생 시 원래 데이터로 UI 복원 this.hideLoading(); this.resetRefreshButton(refreshBtn); // 오류 메시지 표시 const errorAlert = document.createElement('div'); errorAlert.className = 'alert alert-danger alert-dismissible fade show'; errorAlert.innerHTML = ` <strong>오류 발생!</strong> 데이터를 새로고침하는 중 문제가 발생했습니다. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> `; // 서버 그리드 위에 오류 메시지 삽입 const parent = this.serverGrid.parentNode; parent.insertBefore(errorAlert, this.serverGrid); // 5초 후 자동으로 오류 메시지 제거 setTimeout(() => { if (errorAlert.parentNode) { errorAlert.parentNode.removeChild(errorAlert); } }, 5000); return; } // 데이터가 업데이트되면 serverDataUpdated 이벤트로 처리됨 // 하지만 10초 내에 업데이트가 없으면 현재 데이터로 UI 다시 로드 setTimeout(() => { if (this.loadingIndicator.style.display !== 'none') { this.hideLoading(); this.applyFiltersAndSort(); // 새로고침 버튼 상태 복원 this.resetRefreshButton(refreshBtn); } }, 10000); } // 새로고침 버튼 상태 초기화 유틸리티 메소드 resetRefreshButton(refreshBtn) { if (refreshBtn) { refreshBtn.classList.remove('loading'); refreshBtn.removeAttribute('disabled'); const refreshContent = refreshBtn.querySelector('.refresh-content'); const loadingContent = refreshBtn.querySelector('.loading-content'); if (refreshContent) refreshContent.style.display = 'inline-block'; if (loadingContent) loadingContent.style.display = 'none'; } } showLoading() { this.loadingIndicator.style.display = 'block'; this.serverGrid.style.opacity = '0.3'; } hideLoading() { this.loadingIndicator.style.display = 'none'; this.serverGrid.style.opacity = '1'; } applyFiltersAndSort() { try { // 필터 적용 this.filteredData = this.serverData.filter(server => { // 검색어 필터 if (this.searchQuery && !server.hostname.toLowerCase().includes(this.searchQuery)) { return false; } // 상태 필터 if (this.currentFilter !== 'all') { const status = this.getServerStatus(server); return status === this.currentFilter; } return true; }); // 정렬 적용 this.sortData(); // UI 업데이트를 별도 메소드로 분리하여 안전하게 실행 this.updateUI(); } catch (error) { console.error('필터 및 정렬 적용 중 오류:', error); // 오류 발생 시 기본 처리 this.filteredData = [...this.serverData]; // 최소한의 UI 업데이트 시도 this.hideLoading(); this.safeUpdateServerGrid(); } } // 안전하게 UI 요소들을 업데이트하는 메소드 updateUI() { try { // 서버 그리드 업데이트 this.updateServerGrid(); } catch (e) { console.error('서버 그리드 업데이트 중 오류:', e); this.safeUpdateServerGrid(); } try { // 페이지네이션 업데이트 this.updateNumericPagination(); } catch (e) { console.error('페이지네이션 업데이트 중 오류:', e); } try { // 서버 카운트 업데이트 this.updateServerCount(); } catch (e) { console.error('서버 카운트 업데이트 중 오류:', e); } } // 최소한의 안전한 서버 그리드 업데이트 safeUpdateServerGrid() { if (!this.serverGrid) return; try { this.serverGrid.innerHTML = ''; if (this.filteredData.length === 0) { this.serverGrid.innerHTML = ` <div class="alert alert-info"> <i class="bi bi-info-circle"></i> 검색 조건에 맞는 서버가 없습니다. </div> `; return; } // 가장 기본적인 서버 목록만 표시 const startIndex = (this.currentPage - 1) * this.itemsPerPage; const endIndex = Math.min(startIndex + this.itemsPerPage, this.filteredData.length); for (let i = startIndex; i < endIndex; i++) { const server = this.filteredData[i]; if (!server) continue; const div = document.createElement('div'); div.className = 'server-card'; div.textContent = server.hostname || 'Unknown Server'; this.serverGrid.appendChild(div); } } catch (e) { console.error('안전한 서버 그리드 업데이트 중 오류:', e); this.serverGrid.innerHTML = '<div class="alert alert-danger">서버 데이터 표시 중 오류가 발생했습니다.</div>'; } } sortData() { switch(this.currentSort) { case 'name': this.filteredData.sort((a, b) => a.hostname.localeCompare(b.hostname)); break; case 'cpu-high': this.filteredData.sort((a, b) => b.cpu_usage - a.cpu_usage); break; case 'cpu-low': this.filteredData.sort((a, b) => a.cpu_usage - b.cpu_usage); break; case 'memory-high': this.filteredData.sort((a, b) => b.memory_usage_percent - a.memory_usage_percent); break; case 'memory-low': this.filteredData.sort((a, b) => a.memory_usage_percent - b.memory_usage_percent); break; case 'disk-high': this.filteredData.sort((a, b) => b.disk[0].disk_usage_percent - a.disk[0].disk_usage_percent); break; case 'disk-low': this.filteredData.sort((a, b) => a.disk[0].disk_usage_percent - b.disk[0].disk_usage_percent); break; case 'status-critical': this.filteredData.sort((a, b) => { const statusA = this.getServerStatus(a); const statusB = this.getServerStatus(b); const statusWeight = { 'critical': 3, 'warning': 2, 'normal': 1 }; return statusWeight[statusB] - statusWeight[statusA]; }); break; default: // 기본 정렬: 심각 > 경고 > 정상 순 this.filteredData.sort((a, b) => { const statusA = this.getServerStatus(a); const statusB = this.getServerStatus(b); const statusWeight = { 'critical': 3, 'warning': 2, 'normal': 1 }; return statusWeight[statusB] - statusWeight[statusA]; }); } } updateServerGrid() { if (!this.serverGrid) { console.error("서버 그리드 요소를 찾을 수 없습니다."); return; } this.serverGrid.innerHTML = ''; // 현재 페이지 사이즈 설정 사용 (더 이상 고정 값 사용 안 함) const startIndex = (this.currentPage - 1) * this.itemsPerPage; const endIndex = Math.min(startIndex + this.itemsPerPage, this.filteredData.length); if (this.filteredData.length === 0) { this.serverGrid.innerHTML = ` <div class="alert alert-info"> <i class="bi bi-info-circle"></i> 검색 조건에 맞는 서버가 없습니다. </div> `; return; } for (let i = startIndex; i < endIndex; i++) { const server = this.filteredData[i]; const serverCard = this.createServerCard(server); this.serverGrid.appendChild(serverCard); } // 페이지네이션 업데이트 this.updateNumericPagination(); } updateNumericPagination() { const paginationContainer = document.querySelector('.pagination-container'); if (!paginationContainer) return; paginationContainer.innerHTML = ''; const totalPages = Math.ceil(this.filteredData.length / this.itemsPerPage); // 이전 페이지 버튼 const prevBtn = document.createElement('button'); prevBtn.className = 'btn btn-sm btn-outline-secondary'; prevBtn.innerHTML = '<i class="fas fa-chevron-left"></i>'; prevBtn.disabled = this.currentPage === 1; prevBtn.addEventListener('click', () => { if (this.currentPage > 1) { this.currentPage--; this.updateServerGrid(); } }); paginationContainer.appendChild(prevBtn); // 페이지 번호 버튼 const maxVisiblePages = 5; let startPage = Math.max(1, this.currentPage - Math.floor(maxVisiblePages / 2)); let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1); // 표시할 페이지 버튼이 최대 개수보다 적을 경우 startPage 조정 if (endPage - startPage + 1 < maxVisiblePages && startPage > 1) { startPage = Math.max(1, endPage - maxVisiblePages + 1); } // 첫 페이지로 이동 버튼 (필요 시) if (startPage > 1) { const firstPageBtn = document.createElement('button'); firstPageBtn.className = 'btn btn-sm btn-outline-secondary mx-1'; firstPageBtn.textContent = '1'; firstPageBtn.addEventListener('click', () => { this.currentPage = 1; this.updateServerGrid(); }); paginationContainer.appendChild(firstPageBtn); // 생략 표시 (첫 페이지 버튼과 현재 범위 사이) if (startPage > 2) { const ellipsis = document.createElement('span'); ellipsis.className = 'mx-1'; ellipsis.textContent = '...'; paginationContainer.appendChild(ellipsis); } } // 페이지 버튼 생성 for (let i = startPage; i <= endPage; i++) { const pageBtn = document.createElement('button'); pageBtn.className = `btn btn-sm mx-1 ${i === this.currentPage ? 'btn-primary' : 'btn-outline-secondary'}`; pageBtn.textContent = i.toString(); pageBtn.addEventListener('click', () => { this.currentPage = i; this.updateServerGrid(); }); paginationContainer.appendChild(pageBtn); } // 마지막 페이지로 이동 버튼 (필요 시) if (endPage < totalPages) { // 생략 표시 (현재 범위와 마지막 페이지 버튼 사이) if (endPage < totalPages - 1) { const ellipsis = document.createElement('span'); ellipsis.className = 'mx-1'; ellipsis.textContent = '...'; paginationContainer.appendChild(ellipsis); } const lastPageBtn = document.createElement('button'); lastPageBtn.className = 'btn btn-sm btn-outline-secondary mx-1'; lastPageBtn.textContent = totalPages.toString(); lastPageBtn.addEventListener('click', () => { this.currentPage = totalPages; this.updateServerGrid(); }); paginationContainer.appendChild(lastPageBtn); } // 다음 페이지 버튼 const nextBtn = document.createElement('button'); nextBtn.className = 'btn btn-sm btn-outline-secondary'; nextBtn.innerHTML = '<i class="fas fa-chevron-right"></i>'; nextBtn.disabled = this.currentPage === totalPages; nextBtn.addEventListener('click', () => { if (this.currentPage < totalPages) { this.currentPage++; this.updateServerGrid(); } }); paginationContainer.appendChild(nextBtn); // 현재 페이지 정보 업데이트 if (this.currentPageElement) { this.currentPageElement.style.display = 'none'; // 기존 페이지 표시 숨김 } } createServerCard(server) { if (!server) { console.error("서버 데이터가 없습니다."); return document.createElement('div'); // 빈 요소 반환 } const status = this.getServerStatus(server); // 안전하게 services 체크 const hasStoppedServices = server.services && Object.values(server.services).some(status => status === 'stopped'); // 안전하게 errors 체크 const hasErrors = server.errors && Array.isArray(server.errors) && server.errors.length > 0; // 서버 카드 생성 const serverCard = document.createElement('div'); serverCard.className = 'server-card status-' + status; serverCard.dataset.serverId = server.hostname || 'unknown'; // 툴팁 요소 추가 const tooltip = document.createElement('div'); tooltip.className = 'tooltip-wrapper'; tooltip.innerHTML = ` <div class="tooltip-content"> 클릭하여 ${server.hostname} 서버의 상세 정보를 확인하세요. </div> `; serverCard.appendChild(tooltip); // 카드 클릭 시 상세 정보 모달 표시 serverCard.addEventListener('click', () => this.showServerDetail(server)); // CPU, 메모리, 디스크 사용률을 안전하게 가져오기 const cpuUsage = server.cpu_usage || 0; const memoryUsage = server.memory_usage_percent || 0; const diskUsage = server.disk && server.disk[0] ? server.disk[0].disk_usage_percent || 0 : 0; const diskMount = server.disk && server.disk[0] ? server.disk[0].mount || '/' : '/'; // 리소스 상태 판별 const cpuStatus = this.getResourceStatus(cpuUsage, 'cpu'); const memoryStatus = this.getResourceStatus(memoryUsage, 'memory'); const diskStatus = this.getResourceStatus(diskUsage, 'disk'); // 상태별 색상 클래스 const getStatusColorClass = (status) => { switch(status) { case 'critical': return 'text-danger'; case 'warning': return 'text-warning'; default: return 'text-success'; } }; // 상태 아이콘 가져오기 const getStatusIcon = (status) => { switch(status) { case 'critical': return '<i class="fas fa-exclamation-circle me-1"></i>'; case 'warning': return '<i class="fas fa-exclamation-triangle me-1"></i>'; default: return '<i class="fas fa-check-circle me-1"></i>'; } }; // 카드 내용 구성 serverCard.innerHTML = ` <div class="card-interaction-hint"> <i class="fas fa-info-circle"></i> </div> <div class="server-header"> <div class="server-name">${server.hostname || 'Unknown Server'}</div> <div class="server-status status-${status}">${this.getStatusLabel(status)}</div> </div> <div class="server-details"> <div class="detail-item"> <div class="detail-label">CPU 사용량</div> <div class="detail-value ${getStatusColorClass(cpuStatus)}"> ${getStatusIcon(cpuStatus)}<strong>${cpuUsage}%</strong> </div> <div class="progress-bar-container"> <div class="progress-bar progress-${cpuStatus}" style="width: ${cpuUsage}%"></div> </div> </div> <div class="detail-item"> <div class="detail-label">메모리</div> <div class="detail-value ${getStatusColorClass(memoryStatus)}"> ${getStatusIcon(memoryStatus)}<strong>${typeof memoryUsage === 'number' ? memoryUsage.toFixed(1) : '0'}%</strong> </div> <div class="progress-bar-container"> <div class="progress-bar progress-${memoryStatus}" style="width: ${memoryUsage}%"></div> </div> </div> <div class="detail-item"> <div class="detail-label">디스크 (${diskMount})</div> <div class="detail-value ${getStatusColorClass(diskStatus)}"> ${getStatusIcon(diskStatus)}<strong>${typeof diskUsage === 'number' ? diskUsage.toFixed(1) : '0'}%</strong> </div> <div class="progress-bar-container"> <div class="progress-bar progress-${diskStatus}" style="width: ${diskUsage}%"></div> </div> </div> <div class="detail-item"> <div class="detail-label">로드 평균</div> <div class="detail-value">${server.load_avg_1m || '0'}</div> </div> </div> <div class="services-list"> ${server.services ? Object.entries(server.services).map(([name, status]) => ` <div class="service-badge service-${status}">${name} (${status})</div> `).join('') : '<div class="service-badge">서비스 정보 없음</div>'} </div> ${hasErrors ? ` <div class="error-messages"> <i class="bi bi-exclamation-triangle-fill"></i> ${server.errors.length}개의 오류 </div> ` : ''} `; return serverCard; } showServerDetail(server) { if (!server) { console.error("서버 데이터가 없습니다."); return; } try { // 부트스트랩 모달 요소 및 내용을 찾기 const modalElement = document.getElementById('serverDetailModal'); if (!modalElement) { console.error("모달 요소(serverDetailModal)를 찾을 수 없습니다."); return; } // 모달 헤더 내에서 제목 요소 찾기 const modalTitle = modalElement.querySelector('.modal-title'); if (!modalTitle) { console.error("모달 제목 요소를 찾을 수 없습니다."); return; } // 모달 내용을 표시할 요소 찾기 const modalBody = modalElement.querySelector('.modal-body'); if (!modalBody) { console.error("모달 내용 요소를 찾을 수 없습니다."); return; } // 서버 상태 정보 const status = this.getServerStatus(server); // 서버 이름과 상태 설정 modalTitle.innerHTML = ` ${server.hostname} <span class="server-status status-${status}">${this.getStatusLabel(status)}</span> `; // 모달 내용 업데이트 - 개별 필드 업데이트 방식으로 변경 // OS 정보 const modalOS = document.getElementById('modalOS'); if (modalOS) modalOS.textContent = server.os || '-'; // 가동 시간 const modalUptime = document.getElementById('modalUptime'); if (modalUptime) modalUptime.textContent = server.uptime || '-'; // 프로세스 수 const modalProcessCount = document.getElementById('modalProcessCount'); if (modalProcessCount) modalProcessCount.textContent = server.process_count || '-'; // 좀비 프로세스 const modalZombieCount = document.getElementById('modalZombieCount'); if (modalZombieCount) modalZombieCount.textContent = server.zombie_count || '-'; // 로드 평균 const modalLoadAvg = document.getElementById('modalLoadAvg'); if (modalLoadAvg) modalLoadAvg.textContent = server.load_avg_1m || '-'; // 마지막 업데이트 const modalLastUpdate = document.getElementById('modalLastUpdate'); if (modalLastUpdate) modalLastUpdate.textContent = new Date(server.timestamp).toLocaleString() || '-'; // 네트워크 정보 const modalNetInterface = document.getElementById('modalNetInterface'); if (modalNetInterface) modalNetInterface.textContent = server.net?.interface || '-'; const modalRxBytes = document.getElementById('modalRxBytes'); if (modalRxBytes) modalRxBytes.textContent = this.formatBytes(server.net?.rx_bytes) || '-'; const modalTxBytes = document.getElementById('modalTxBytes'); if (modalTxBytes) modalTxBytes.textContent = this.formatBytes(server.net?.tx_bytes) || '-'; const modalRxErrors = document.getElementById('modalRxErrors'); if (modalRxErrors) modalRxErrors.textContent = server.net?.rx_errors || '-'; const modalTxErrors = document.getElementById('modalTxErrors'); if (modalTxErrors) modalTxErrors.textContent = server.net?.tx_errors || '-'; // 서비스 상태 const modalServiceStatus = document.getElementById('modalServiceStatus'); if (modalServiceStatus) { modalServiceStatus.innerHTML = ''; if (server.services && Object.keys(server.services).length > 0) { Object.entries(server.services).forEach(([name, status]) => { const serviceTag = document.createElement('div'); serviceTag.className = `service-status-tag service-${status}`; serviceTag.innerHTML = ` ${name} <span class="status-indicator"> <i class="fas fa-${status === 'running' ? 'check-circle' : 'times-circle'}"></i> </span> `; modalServiceStatus.appendChild(serviceTag); }); } else { modalServiceStatus.innerHTML = '<div class="alert alert-info">서비스 정보가 없습니다.</div>'; } } // 오류 메시지 const modalErrorsContainer = document.getElementById('modalErrorsContainer'); if (modalErrorsContainer) { if (server.errors && server.errors.length > 0) { modalErrorsContainer.innerHTML = ` <div class="alert alert-danger"> <ul class="mb-0"> ${server.errors.map(error => `<li>${error}</li>`).join('')} </ul> </div> `; } else { modalErrorsContainer.innerHTML = '<div class="alert alert-info">현재 보고된 오류가 없습니다.</div>'; } } // jQuery로 모달 표시 시도 (부트스트랩 의존성 줄이기) if (window.jQuery && window.jQuery.fn.modal) { window.jQuery(modalElement).modal('show'); // 리소스 차트 생성 this.createResourceChart(server); // 서버 이름을 서버 이름 요소에 설정 const modalServerName = document.getElementById('modalServerName'); if (modalServerName) modalServerName.textContent = `${server.hostname} 상세 정보`; return; // jQuery로 성공적으로 표시했으면 여기서 종료 } // 부트스트랩 모달 인스턴스 생성 및 표시 if (typeof bootstrap !== 'undefined' && typeof bootstrap.Modal === 'function') { // 부트스트랩 5+ const bsModal = new bootstrap.Modal(modalElement); bsModal.show(); } else { // 순수 JavaScript로 모달 표시 (fallback) modalElement.style.display = 'block'; modalElement.classList.add('show'); document.body.classList.add('modal-open'); // 배경 요소 추가 const backdrop = document.createElement('div'); backdrop.className = 'modal-backdrop fade show'; document.body.appendChild(backdrop); // 닫기 버튼에 이벤트 리스너 추가 const closeButtons = modalElement.querySelectorAll('[data-bs-dismiss="modal"]'); closeButtons.forEach(btn => { btn.addEventListener('click', () => { modalElement.style.display = 'none'; modalElement.classList.remove('show'); document.body.classList.remove('modal-open'); document.querySelector('.modal-backdrop')?.remove(); }); }); } // 리소스 차트 생성 this.createResourceChart(server); // 서버 이름을 서버 이름 요소에 설정 const modalServerName = document.getElementById('modalServerName'); if (modalServerName) modalServerName.textContent = `${server.hostname} 상세 정보`; } catch (error) { console.error('서버 상세 정보 표시 중 오류 발생:', error); alert('서버 상세 정보를 표시할 수 없습니다.'); } } closeModal() { this.modalElement.style.display = 'none'; } createResourceChart(server) { const chartElement = document.getElementById('resourceBarChart'); if (!chartElement) { console.error("리소스 차트 요소(resourceBarChart)를 찾을 수 없습니다."); return; } const ctx = chartElement.getContext('2d'); if (!ctx) { console.error("리소스 차트 컨텍스트를 가져올 수 없습니다."); return; } // 기존 차트가 있다면 파괴 if (this.resourceChartInstance) { this.resourceChartInstance.destroy(); } this.resourceChartInstance = new Chart(ctx, { type: 'bar', data: { labels: ['CPU', '메모리', '디스크'], datasets: [{ label: '사용량 (%)', data: [ server.cpu_usage || 0, server.memory_usage_percent || 0, (server.disk && server.disk.length > 0) ? server.disk[0].disk_usage_percent || 0 : 0 ], backgroundColor: [ this.getChartColor(server.cpu_usage || 0), this.getChartColor(server.memory_usage_percent || 0), this.getChartColor((server.disk && server.disk.length > 0) ? server.disk[0].disk_usage_percent || 0 : 0) ], borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, max: 100 } } } }); } createHistoryChart(hostname) { const historicalData = window.serverHistoricalData[hostname]; if (!historicalData || historicalData.length === 0) return; // history-chart-modal ID를 사용하도록 수정 const canvasElement = document.getElementById('history-chart-modal'); if (!canvasElement) { console.error("History chart canvas element not found in modal"); return; } const ctx = canvasElement.getContext('2d'); if (!ctx) { console.error("히스토리 차트 컨텍스트를 가져올 수 없습니다."); return; } // 기존 차트가 있다면 파괴 if (this.historyChartInstance) { this.historyChartInstance.destroy(); } // 시간 레이블 생성 (최근 24시간) const labels = historicalData.map(data => { const date = new Date(data.timestamp); return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`; }); // CPU, 메모리, 디스크 데이터 추출 const cpuData = historicalData.map(data => data.cpu_usage); const memoryData = historicalData.map(data => data.memory_usage_percent); const diskData = historicalData.map(data => data.disk[0].disk_usage_percent); this.historyChartInstance = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [ { label: 'CPU', data: cpuData, borderColor: 'rgba(255, 99, 132, 1)', backgroundColor: 'rgba(255, 99, 132, 0.2)', borderWidth: 2, tension: 0.1 }, { label: '메모리', data: memoryData, borderColor: 'rgba(54, 162, 235, 1)', backgroundColor: 'rgba(54, 162, 235, 0.2)', borderWidth: 2, tension: 0.1 }, { label: '디스크', data: diskData, borderColor: 'rgba(75, 192, 192, 1)', backgroundColor: 'rgba(75, 192, 192, 0.2)', borderWidth: 2, tension: 0.1 } ] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, max: 100, title: { display: true, text: '사용량 (%)' } }, x: { title: { display: true, text: '시간' } } } } }); } updateProblemsList() { if (!this.aiProcessor) return; const problemListContainer = document.getElementById('aiProblemList'); const loadingIndicator = document.getElementById('aiProblemsLoading'); const emptyIndicator = document.getElementById('aiProblemsEmpty'); const paginationContainer = document.querySelector('.problem-pagination'); if (!problemListContainer || !loadingIndicator || !emptyIndicator) { console.error("AI Problem list UI elements not found."); return; } loadingIndicator.style.display = 'block'; emptyIndicator.style.display = 'none'; problemListContainer.innerHTML = ''; if (paginationContainer) paginationContainer.innerHTML = ''; try { // detectProblems 메소드가 존재하고 호출 가능한지 확인 let problems = []; if (typeof this.aiProcessor.detectProblems === 'function') { problems = this.aiProcessor.detectProblems(); } else { console.warn("AI 프로세서에 detectProblems 메소드가 없습니다. 기본 문제 감지 로직을 사용합니다."); // 기본 문제 감지 로직: 리소스 사용량이 높은 서버 감지 problems = this.serverData.filter(server => { const status = this.getServerStatus(server); if (status === 'critical') { return { severity: 'Critical', serverHostname: server.hostname, description: `리소스 과부하 감지`, solution: '서버 자원 확인 및 불필요한 프로세스를 종료하세요.' }; } else if (status === 'warning') { return { severity: 'Warning', serverHostname: server.hostname, description: `자원 사용량 높음`, solution: '서버 상태를 모니터링하고 추세를 확인하세요.' }; } return null; }).filter(p => p !== null); } // 결과가 배열이 아니거나 undefined인 경우 빈 배열로 처리 if (!Array.isArray(problems)) { console.warn("detectProblems() 함수가 배열을 반환하지 않았습니다."); problems = []; } // Normal 상태는 제외 (detectProblems에서 이미 처리되었거나, 여기서 한번 더 필터링) problems = problems.filter(p => p && (p.severity === 'Critical' || p.severity === 'Warning' || p.severity === 'Error')); // 정렬: Critical 우선, 그 다음 Warning(Error 포함) (내림차순) problems.sort((a, b) => { const severityScore = (severity) => { if (severity === 'Critical') return 2; if (severity === 'Warning' || severity === 'Error') return 1; return 0; // 그 외 (정상 등, 실제로는 필터링됨) }; return severityScore(b.severity) - severityScore(a.severity); }); loadingIndicator.style.display = 'none'; if (problems.length === 0) { emptyIndicator.style.display = 'block'; return; } // 전체 문제 데이터 저장 this.problemsData = problems; // 페이지네이션 계산 const totalProblems = problems.length; const totalPages = Math.ceil(totalProblems / this.problemsPerPage); // 현재 페이지가 범위를 벗어나면 조정 if (this.currentProblemPage > totalPages) { this.currentProblemPage = totalPages; } // 현재 페이지에 표시할 문제 계산 const startIdx = (this.currentProblemPage - 1) * this.problemsPerPage; const endIdx = Math.min(startIdx + this.problemsPerPage, totalProblems); const currentPageProblems = problems.slice(startIdx, endIdx); // 문제 항목 렌더링 currentPageProblems.forEach((problem, index) => { const listItem = document.createElement('li'); listItem.className = `list-group-item list-group-item-action problem-item severity-${problem.severity.toLowerCase()}`; // 인덱스 변수 추가 listItem.style.setProperty('--item-index', index); listItem.innerHTML = ` <div class="d-flex w-100 justify-content-between"> <h6 class="mb-1 problem-description">${problem.description}</h6> <small class="text-muted">${problem.serverHostname || '알 수 없는 서버'}</small> </div> <p class="mb-1 problem-solution">${problem.solution || '제안된 해결책 없음'}</p> <small class="text-muted">심각도: <span class="fw-bold problem-severity-text">${problem.severity}</span></small> <div class="problem-hint-icon"> <i class="fas fa-search-plus"></i> </div> `; // 문제 항목 클릭 시 액션 (서버 상세 모달) listItem.addEventListener('click', () => { // 상세 보고서 모달 표시 this.showProblemDetailModal(problem); }); problemListContainer.appendChild(listItem); }); // 페이지네이션 생성 if (paginationContainer && totalPages > 1) { // 이전 페이지 버튼 const prevBtn = document.createElement('button'); prevBtn.className = 'btn btn-sm btn-outline-secondary'; prevBtn.innerHTML = '<i class="fas fa-chevron-left"></i>'; prevBtn.disabled = this.currentProblemPage === 1; prevBtn.addEventListener('click', () => { if (this.currentProblemPage > 1) { this.currentProblemPage--; this.updateProblemsList(); } }); paginationContainer.appendChild(prevBtn); // 페이지 번호 버튼 const maxVisiblePages = 5; let startPage = Math.max(1, this.currentProblemPage - Math.floor(maxVisiblePages / 2)); let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1); // 표시할 페이지 버튼 조정 if (endPage - startPage + 1 < maxVisiblePages && startPage > 1) { startPage = Math.max(1, endPage - maxVisiblePages + 1); } // 페이지 버튼 생성 for (let i = startPage; i <= endPage; i++) { const pageBtn = document.createElement('button'); pageBtn.className = `btn btn-sm mx-1 ${i === this.currentProblemPage ? 'btn-primary' : 'btn-outline-secondary'}`; pageBtn.textContent = i.toString(); pageBtn.addEventListener('click', () => { this.currentProblemPage = i; this.updateProblemsList(); }); paginationContainer.appendChild(pageBtn); } // 다음 페이지 버튼 const nextBtn = document.createElement('button'); nextBtn.className = 'btn btn-sm btn-outline-secondary'; nextBtn.innerHTML = '<i class="fas fa-chevron-right"></i>'; nextBtn.disabled = this.currentProblemPage === totalPages; nextBtn.addEventListener('click', () => { if (this.currentProblemPage < totalPages) { this.currentProblemPage++; this.updateProblemsList(); } }); paginationContainer.appendChild(nextBtn); } } catch (error) { console.error("AI 문제 목록 업데이트 중 오류 발생:", error); loadingIndicator.style.display = 'none'; emptyIndicator.textContent = "문제 목록을 불러오는 중 오류가 발생했습니다."; emptyIndicator.style.display = 'block'; } } // 서버 수 표시 업데이트하는 메소드 updateServerCount() { if (!this.serverCount) return; try { const endIndex = Math.min(this.currentPage * this.itemsPerPage, this.filteredData.length); const startIndex = this.filteredData.length > 0 ? (this.currentPage - 1) * this.itemsPerPage + 1 : 0; if (this.filteredData.length > 0) { this.serverCount.textContent = `전체 ${this.serverData.length} 서버 중 ${startIndex}-${endIndex} 표시 중`; } else { this.serverCount.textContent = `전체 ${this.serverData.length} 서버 중 0 표시 중`; } } catch (e) { console.error("서버 카운트 업데이트 중 오류:", e); } } updateGlobalStatusSummary() { if (!this.serverData || this.serverData.length === 0) return; const summaryContainer = document.getElementById('statusSummaryContainer'); if (!summaryContainer) { console.error("Status summary container not found."); return; } let normalCount = 0; let warningCount = 0; let criticalCount = 0; this.serverData.forEach(server => { const status = this.getServerStatus(server); // 중앙 집중식 상태 판단 함수 사용 if (status === 'normal') normalCount++; else if (status === 'warning') warningCount++; else if (status === 'critical') criticalCount++; }); // 타임스탬프 업데이트 const timestampElement = document.getElementById('timestamp'); if (timestampElement) { const latestTimestamp = this.serverData.reduce((latest, server) => { const serverTime = new Date(server.timestamp).getTime(); return serverTime > latest ? serverTime : latest; }, 0); if (latestTimestamp > 0) { timestampElement.textContent = `데이터 기준 시각: ${new Date(latestTimestamp).toLocaleString()}`; } else { timestampElement.textContent = `데이터 기준 시각: ${new Date().toLocaleString()}`; } } summaryContainer.innerHTML = ` <div class="row mb-3"> <div class="col-4 text-center"> <h3 class="mb-0 display-6 text-success">${normalCount}</h3> <p class="text-success mb-0">정상</p> </div> <div class="col-4 text-center"> <h3 class="mb-0 display-6 text-warning">${warningCount}</h3> <p class="text-warning mb-0">경고</p> </div> <div class="col-4 text-center"> <h3 class="mb-0 display-6 text-danger">${criticalCount}</h3> <p class="text-danger mb-0">심각</p> </div> </div> <div> <canvas id="globalStatusChart" height="150"></canvas> </div> `; // 상태 알림 생성 및 표시 this.updateStatusAlert(normalCount, warningCount, criticalCount); // 차트 업데이트 const chartElement = document.getElementById('globalStatusChart'); if (!chartElement) { console.error("Global status chart element not found."); return; } const chartCtx = chartElement.getContext('2d'); if (!chartCtx) { console.error("Global status chart context could not be obtained."); return; } if (this.globalStatusChartInstance) { this.globalStatusChartInstance.destroy(); } if (normalCount === 0 && warningCount === 0 && criticalCount === 0) { // 데이터가 없는 경우 빈 차트가 아닌 메시지 표시 chartElement.parentElement.innerHTML = ` <div class="alert alert-info text-center"> <i class="fas fa-info-circle me-2"></i> 표시할 서버 상태 데이터가 없습니다. </div> `; return; } this.globalStatusChartInstance = new Chart(chartCtx, { type: 'doughnut', data: { labels: ['정상', '경고', '심각'], datasets: [{ data: [normalCount, warningCount, criticalCount], backgroundColor: [ 'rgba(40, 167, 69, 0.7)', // 정상 (초록 계열) 'rgba(253, 154, 20, 0.7)', // 경고 (주황 계열) 'rgba(220, 53, 69, 0.7)' // 심각 (빨강 계열) ], borderColor: [ 'rgba(40, 167, 69, 1)', 'rgba(253, 154, 20, 1)', 'rgba(220, 53, 69, 1)' ], borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', }, tooltip: { callbacks: { label: function(context) { let label = context.label || ''; if (label) { label += ': '; } if (context.parsed !== null) { label += context.parsed + ' 대'; } return label; } } } } } }); // 서버 수 표시 업데이트 this.updateServerCount(); } // 서버 상태 요약 알림 업데이트 updateStatusAlert(normalCount, warningCount, criticalCount) { const alertElement = document.getElementById('statusSummaryAlert'); if (!alertElement) return; const iconContainer = alertElement.querySelector('.status-icon'); const messageContainer = alertElement.querySelector('.status-message'); if (!iconContainer || !messageContainer) return; const totalServers = normalCount + warningCount + criticalCount; // 상태 결정 (최악의 상태를 기준으로) let status = 'normal'; if (criticalCount > 0) status = 'critical'; else if (warningCount > 0) status = 'warning'; // 알림 클래스와 아이콘 설정 let alertClass, iconHTML, message; switch(status) { case 'critical': alertClass = 'alert-danger'; iconHTML = '<i class="fas fa-exclamation-circle fa-2x"></i>'; if (criticalCount === 1) { message = `<strong>긴급 주의 필요:</strong> 1개 서버가 심각한 상태입니다. 즉시 확인이 필요합니다.`; } else { message = `<strong>긴급 주의 필요:</strong> ${criticalCount}개 서버가 심각한 상태입니다. 즉시 확인이 필요합니다.`; } break; case 'warning': alertClass = 'alert-warning'; iconHTML = '<i class="fas fa-exclamation-triangle fa-2x"></i>'; if (warningCount === 1) { message = `<strong>주의:</strong> 1개 서버에 경고 상태가 감지되었습니다. 상태를 확인해 주세요.`; } else { message = `<strong>주의:</strong> ${warningCount}개 서버에 경고 상태가 감지되었습니다. 상태를 확인해 주세요.`; } break; default: // normal alertClass = 'alert-success'; iconHTML = '<i class="fas fa-check-circle fa-2x"></i>'; message = `<strong>모두 정상:</strong> 현재 ${totalServers}개의 서버가 모두 정상 작동 중입니다.`; } // 알림 업데이트 alertElement.className = `alert d-flex align-items-center ${alertClass}`; iconContainer.innerHTML = iconHTML; messageContainer.innerHTML = message; // 애니메이션 효과로 표시 alertElement.style.display = 'flex'; alertElement.style.opacity = '0'; alertElement.style.transform = 'translateY(-10px)'; // 부드럽게 표시 setTimeout(() => { alertElement.style.transition = 'all 0.5s ease'; alertElement.style.opacity = '1'; alertElement.style.transform = 'translateY(0)'; }, 100); } // 프리셋 쿼리 처리 개선 processPresetQuery(query) { if (!this.aiProcessor) return "AI 프로세서를 초기화할 수 없습니다."; // 서버 상태 데이터 수집 const criticalServers = this.serverData.filter(server => this.getServerStatus(server) === 'critical'); const warningServers = this.serverData.filter(server => this.getServerStatus(server) === 'warning'); const normalServers = this.serverData.filter(server => this.getServerStatus(server) === 'normal'); // AI 장애 보고서 데이터 가져오기 (있을 경우) let aiProblemsData = []; if (this.problemsData && Array.isArray(this.problemsData)) { aiProblemsData = [...this.problemsData]; } else if (typeof this.aiProcessor.detectProblems === 'function') { try { aiProblemsData = this.aiProcessor.detectProblems(); } catch (err) { console.warn("AI 문제 데이터를 가져오는 중 오류 발생:", err); } } // CPU 과부하 관련 쿼리 if (query.includes("CPU 사용률이 높은 서버") || query.includes("CPU 과부하")) { const highCpuServers = this.serverData.filter(server => server.cpu_usage >= this.thresholds.warning.cpu); // 서버 상태에 따라 응답 형식 조정 if (highCpuServers.length === 0) { return `### CPU 사용률 분석 결과 현재 CPU 사용률이 높은 서버가 없습니다. 모든 서버가 정상적인 CPU 사용률을 보이고 있습니다. **총 서버 수**: ${this.serverData.length}대 **평균 CPU 사용률**: ${(this.serverData.reduce((acc, server) => acc + server.cpu_usage, 0) / this.serverData.length).toFixed(1)}% 모든 서버의 CPU 사용률이 정상 범위(${this.thresholds.warning.cpu}% 미만) 내에 있습니다.`; } // 해당 문제와 관련된 AI 장애 보고서 항목 찾기 const cpuRelatedProblems = aiProblemsData.filter(problem => problem.description && problem.description.toLowerCase().includes('cpu') ); let response = `### CPU 사용률 분석 결과 CPU 사용률이 높은 서버가 ${highCpuServers.length}대 발견되었습니다. `; // 심각한 수준(Critical)의 서버 먼저 표시 const criticalCpuServers = highCpuServers.filter(server => server.cpu_usage >= this.thresholds.critical.cpu); if (criticalCpuServers.length > 0) { response += `#### 심각한 CPU 과부하 (${this.thresholds.critical.cpu}% 이상) `; criticalCpuServers.forEach(server => { response += `- **${server.hostname}**: CPU ${server.cpu_usage}% (심각) - 프로세스 수: ${server.process_count || '정보 없음'} - 부하 평균: ${server.load_avg_1m || '정보 없음'} `; }); response += "\n"; } // 경고 수준(Warning)의 서버 표시 const warningCpuServers = highCpuServers.filter(server => server.cpu_usage >= this.thresholds.warning.cpu && server.cpu_usage < this.thresholds.critical.cpu ); if (warningCpuServers.length > 0) { response += `#### 경고 수준의 CPU 사용 (${this.thresholds.warning.cpu}% ~ ${this.thresholds.critical.cpu-0.1}%) `; warningCpuServers.forEach(server => { response += `- **${server.hostname}**: CPU ${server.cpu_usage}% (경고) - 프로세스 수: ${server.process_count || '정보 없음'} - 부하 평균: ${server.load_avg_1m || '정보 없음'} `; }); response += "\n"; } // 문제 원인 및 해결 방안 (AI 장애 보고서에서 가져옴) response += "### 원인 분석 및 조치 방안\n\n"; if (cpuRelatedProblems.length > 0) { cpuRelatedProblems.forEach((problem, index) => { if (index < 3) { // 상위 3개만 표시 response += `${index+1}. **${problem.serverHostname || '전체 서버'}**: ${problem.description}\n`; response += ` - 권장 조치: ${problem.solution || '서버 부하 원인 확인 필요'}\n\n`; } }); } else { response += `1. **높은 CPU 사용률 원인**: 서버에서 리소스를 많이 사용하는 프로세스가 실행 중이거나, 동시에 많은 요청이 처리되고 있을 수 있습니다.\n`; response += ` - 권장 조치: 'top' 명령어로 CPU를 많이 사용하는 프로세스를 확인하고, 불필요한 프로세스 종료나 부하 분산을 고려하세요.\n\n`; response += `2. **성능 병목 현상**: CPU 사용률이 지속적으로 높은 경우 성능 병목 현상이 발생할 수 있습니다.\n`; response += ` - 권장 조치: 서버 스케일 업 또는 로드 밸런싱을 통한 스케일 아웃을 검토하세요.\n\n`; } return response; } // 메모리 부족 관련 쿼리 else if (query.includes("메모리 사용량이 많은 서버") || query.includes("메모리 부족")) { const highMemoryServers = this.serverData.filter(server => server.memory_usage_percent >= this.thresholds.warning.memory); // 서버 상태에 따라 응답 형식 조정 if (highMemoryServers.length === 0) { return `### 메모리 사용량 분석 결과 현재 메모리 사용량이 높은 서버가 없습니다. 모든 서버가 정상적인 메모리 사용량을 보이고 있습니다. **총 서버 수**: ${this.serverData.length}대 **평균 메모리 사용률**: ${(this.serverData.reduce((acc, server) => acc + server.memory_usage_percent, 0) / this.serverData.length).toFixed(1)}% 모든 서버의 메모리 사용률이 정상 범위(${this.thresholds.warning.memory}% 미만) 내에 있습니다.`; } // 해당 문제와 관련된 AI 장애 보고서 항목 찾기 const memoryRelatedProblems = aiProblemsData.filter(problem => problem.description && ( problem.description.toLowerCase().includes('memory') || problem.description.toLowerCase().includes('메모리') ) ); let response = `### 메모리 사용량 분석 결과 메모리 사용량이 높은 서버가 ${highMemoryServers.length}대 발견되었습니다. `; // 심각한 수준(Critical)의 서버 먼저 표시 const criticalMemServers = highMemoryServers.filter(server => server.memory_usage_percent >= this.thresholds.critical.memory); if (criticalMemServers.length > 0) { response += `#### 심각한 메모리 부족 (${this.thresholds.critical.memory}% 이상) `; criticalMemServers.forEach(server => { response += `- **${server.hostname}**: 메모리 ${server.memory_usage_percent}% (심각) - 총 메모리: ${server.memory_total || '정보 없음'} - 사용 메모리: ${server.memory_used || '정보 없음'} `; }); response += "\n"; } // 경고 수준(Warning)의 서버 표시 const warningMemServers = highMemoryServers.filter(server => server.memory_usage_percent >= this.thresholds.warning.memory && server.memory_usage_percent < this.thresholds.critical.memory ); if (warningMemServers.length > 0) { response += `#### 경고 수준의 메모리 사용 (${this.thresholds.warning.memory}% ~ ${this.thresholds.critical.memory-0.1}%) `; warningMemServers.forEach(server => { response += `- **${server.hostname}**: 메모리 ${server.memory_usage_percent}% (경고) - 총 메모리: ${server.memory_total || '정보 없음'} - 사용 메모리: ${server.memory_used || '정보 없음'} `; }); response += "\n"; } // 문제 원인 및 해결 방안 (AI 장애 보고서에서 가져옴) response += "### 원인 분석 및 조치 방안\n\n"; if (memoryRelatedProblems.length > 0) { memoryRelatedProblems.forEach((problem, index) => { if (index < 3) { // 상위 3개만 표시 response += `${index+1}. **${problem.serverHostname || '전체 서버'}**: ${problem.description}\n`; response += ` - 권장 조치: ${problem.solution || '메모리 누수 또는 과다 사용 프로세스 확인 필요'}\n\n`; } }); } else { response += `1. **높은 메모리 사용률 원인**: 서버에서 메모리 누수가 있거나, 메모리를 많이 사용하는 애플리케이션이 실행 중일 수 있습니다.\n`; response += ` - 권장 조치: 'free -m', 'top' 명령어로 메모리를 많이 사용하는 프로세스를 확인하고, 필요시 재시작하세요.\n\n`; response += `2. **스왑 사용 확인**: 메모리 부족 시 스왑 사용량이 증가할 수 있습니다.\n`; response += ` - 권장 조치: 'vmstat' 명령어로 스왑 사용량을 확인하고, 메모리 증설을 고려하세요.\n\n`; } return response; } // 서비스 중단 관련 쿼리 else if (query.includes("서비스가 중단된 서버")) { // 서비스 중단 서버 찾기 const stoppedServiceServers = this.serverData.filter(server => server.services && Object.values(server.services).some(status => status === 'stopped') ); // 서버 상태에 따라 응답 형식 조정 if (stoppedServiceServers.length === 0) { return `### 서비스 상태 분석 결과 현재 중단된 서비스가 있는 서버가 없습니다. 모든 서버의 서비스가 정상 작동 중입니다. **총 서버 수**: ${this.serverData.length}대 모든 서버에서 서비스가 정상적으로 실행 중입니다.`; } // 해당 문제와 관련된 AI 장애 보고서 항목 찾기 const serviceRelatedProblems = aiProblemsData.filter(problem => problem.description && ( problem.description.toLowerCase().includes('service') || problem.description.toLowerCase().includes('서비스') ) ); let response = `### 서비스 상태 분석 결과 서비스가 중단된 서버가 ${stoppedServiceServers.length}대 발견되었습니다. #### 중단된 서비스가 있는 서버 `; stoppedServiceServers.forEach(server => { const stoppedServices = Object.entries(server.services) .filter(([_, status]) => status === 'stopped') .map(([name, _]) => name); response += `- **${server.hostname}**: - 중단된 서비스: ${stoppedServices.join(', ')} - 서버 상태: ${this.getStatusLabel(this.getServerStatus(server))} `; }); // 문제 원인 및 해결 방안 (AI 장애 보고서에서 가져옴) response += "\n### 원인 분석 및 서비스 재시작 방법\n\n"; if (serviceRelatedProblems.length > 0) { serviceRelatedProblems.forEach((problem, index) => { if (index < 3) { // 상위 3개만 표시 response += `${index+1}. **${problem.serverHostname || '전체 서버'}**: ${problem.description}\n`; response += ` - 권장 조치: ${problem.solution || '서비스 재시작 필요'}\n\n`; } }); } else { response += `1. **서비스 중단 원인**: 서비스 충돌, 리소스 부족, 또는 강제 종료로 인해 서비스가 중단되었을 수 있습니다.\n`; response += ` - 권장 조치: 'systemctl restart SERVICE_NAME' 명령어로 해당 서비스를 재시작하세요.\n\n`; response += `2. **로그 확인**: 중단된 원인을 파악하기 위해 로그 확인이 필요합니다.\n`; response += ` - 권장 조치: 'journalctl -u SERVICE_NAME' 명령어로 서비스 로그를 확인하세요.\n\n`; } return response; } // 디스크 공간 부족 관련 쿼리 else if (query.includes("디스크 공간이 부족한 서버")) { const highDiskServers = this.serverData.filter(server => server.disk && server.disk.length > 0 && server.disk[0].disk_usage_percent >= this.thresholds.warning.disk ); // 서버 상태에 따라 응답 형식 조정 if (highDiskServers.length === 0) { return `### 디스크 공간 분석 결과 현재 디스크 공간이 부족한 서버가 없습니다. 모든 서버가 충분한 디스크 공간을 보유하고 있습니다. **총 서버 수**: ${this.serverData.length}대 **평균 디스크 사용률**: ${(this.serverData.reduce((acc, server) => acc + (server.disk && server.disk.length > 0 ? server.disk[0].disk_usage_percent : 0), 0) / this.serverData.length).toFixed(1)}% 모든 서버의 디스크 사용률이 정상 범위(${this.thresholds.warning.disk}% 미만) 내에 있습니다.`; } // 해당 문제와 관련된 AI 장애 보고서 항목 찾기 const diskRelatedProblems = aiProblemsData.filter(problem => problem.description && ( problem.description.toLowerCase().includes('disk') || problem.description.toLowerCase().includes('디스크') || problem.description.toLowerCase().includes('공간') ) ); let response = `### 디스크 공간 분석 결과 디스크 공간이 부족한 서버가 ${highDiskServers.length}대 발견되었습니다. `; // 심각한 수준(Critical)의 서버 먼저 표시 const criticalDiskServers = highDiskServers.filter(server => server.disk[0].disk_usage_percent >= this.thresholds.critical.disk ); if (criticalDiskServers.length > 0) { response += `#### 심각한 디스크 공간 부족 (${this.thresholds.critical.disk}% 이상) `; criticalDiskServers.forEach(server => { response += `- **${server.hostname}**: 디스크 ${server.disk[0].disk_usage_percent}% (심각) - 마운트 지점: ${server.disk[0].mount || '/'} - 총 용량: ${server.disk[0].disk_total || '정보 없음'} - 사용 용량: ${server.disk[0].disk_used || '정보 없음'} `; }); response += "\n"; } // 경고 수준(Warning)의 서버 표시 const warningDiskServers = highDiskServers.filter(server => server.disk[0].disk_usage_percent >= this.thresholds.warning.disk && server.disk[0].disk_usage_percent < this.thresholds.critical.disk ); if (warningDiskServers.length > 0) { response += `#### 경고 수준의 디스크 사용 (${this.thresholds.warning.disk}% ~ ${this.thresholds.critical.disk-0.1}%) `; warningDiskServers.forEach(server => { response += `- **${server.hostname}**: 디스크 ${server.disk[0].disk_usage_percent}% (경고) - 마운트 지점: ${server.disk[0].mount || '/'} - 총 용량: ${server.disk[0].disk_total || '정보 없음'} - 사용 용량: ${server.disk[0].disk_used || '정보 없음'} `; }); response += "\n"; } // 문제 원인 및 해결 방안 (AI 장애 보고서에서 가져옴) response += "### 원인 분석 및 조치 방안\n\n"; if (diskRelatedProblems.length > 0) { diskRelatedProblems.forEach((problem, index) => { if (index < 3) { // 상위 3개만 표시 response += `${index+1}. **${problem.serverHostname || '전체 서버'}**: ${problem.description}\n`; response += ` - 권장 조치: ${problem.solution || '불필요한 파일 정리 필요'}\n\n`; } }); } else { response += `1. **디스크 공간 부족 원인**: 로그 파일 증가, 임시 파일 누적, 또는 데이터 증가로 인해 디스크 공간이 부족할 수 있습니다.\n`; response += ` - 권장 조치: 'du -h --max-depth=1 /path' 명령어로 용량이 큰 디렉토리를 찾고, 불필요한 파일을 정리하세요.\n\n`; response += `2. **로그 정리**: 오래된 로그 파일이 많은 공간을 차지할 수 있습니다.\n`; response += ` - 권장 조치: '/var/log' 디렉토리의 오래된 로그 파일을 정리하고, logrotate 설정을 확인하세요.\n\n`; } return response; } // 정상 서버 목록 표시 else if (query.includes("정상 작동 중인 서버 목록")) { if (normalServers.length === 0) { return "### 정상 서버 목록\n\n현재 모든 서버에 문제가 있어 정상 작동 중인 서버가 없습니다."; } let response = `### 정상 작동 중인 서버 목록 (총 ${normalServers.length}대)\n\n`; normalServers.forEach(server => { response += `#### ${server.hostname}\n`; response += `- CPU: ${server.cpu_usage}% (정상)\n`; response += `- 메모리: ${server.memory_usage_percent}% (정상)\n`; response += `- 디스크: ${server.disk && server.disk.length > 0 ? server.disk[0].disk_usage_percent : 0}% (정상)\n`; response += `- 업타임: ${server.uptime || '정보 없음'}\n\n`; }); response += "모든 리소스가 정상 임계값 이내에서 작동 중이며, 특별한 조치가 필요하지 않습니다."; return response; } // 전체 서버 상태 요약 보고서 else if (query.includes("전체 서버 상태 요약")) { let response = `### 전체 서버 상태 요약 보고서\n\n`; response += `**총 서버 수**: ${this.serverData.length}대\n`; response += `- 정상 서버: ${normalServers.length}대\n`; response += `- 경고 상태: ${warningServers.length}대\n`; response += `- 심각 상태: ${criticalServers.length}대\n\n`; // 임계값 초과 현황 const highCpuCount = this.serverData.filter(s => s.cpu_usage >= this.thresholds.warning.cpu).length; const highMemCount = this.serverData.filter(s => s.memory_usage_percent >= this.thresholds.warning.memory).length; const highDiskCount = this.serverData.filter(s => s.disk && s.disk.length > 0 && s.disk[0].disk_usage_percent >= this.thresholds.warning.disk ).length; const stoppedServiceCount = this.serverData.filter(s => s.services && Object.values(s.services).some(status => status === 'stopped') ).length; response += `### 리소스 사용 현황\n\n`; response += `- CPU 임계치 초과: ${highCpuCount}대\n`; response += `- 메모리 임계치 초과: ${highMemCount}대\n`; response += `- 디스크 임계치 초과: ${highDiskCount}대\n`; response += `- 서비스 중단 서버: ${stoppedServiceCount}대\n\n`; // 심각한 문제 서버 목록 (최대 3대) if (criticalServers.length > 0) { response += `### 심각한 상태의 서버 (상위 ${Math.min(3, criticalServers.length)}대)\n\n`; criticalServers.slice(0, 3).forEach(server => { response += `#### ${server.hostname}\n`; // 서버의 문제 원인 파악 const issues = []; if (server.cpu_usage >= this.thresholds.critical.cpu) { issues.push(`CPU 사용률 ${server.cpu_usage}% (임계치 ${this.thresholds.critical.cpu}%)`); } if (server.memory_usage_percent >= this.thresholds.critical.memory) { issues.push(`메모리 사용률 ${server.memory_usage_percent}% (임계치 ${this.thresholds.critical.memory}%)`); } if (server.disk && server.disk.length > 0 && server.disk[0].disk_usage_percent >= this.thresholds.critical.disk) { issues.push(`디스크 사용률 ${server.disk[0].disk_usage_percent}% (임계치 ${this.thresholds.critical.disk}%)`); } if (server.services && Object.values(server.services).some(status => status === 'stopped')) { const stoppedServices = Object.entries(server.services) .filter(([_, status]) => status === 'stopped') .map(([name, _]) => name); issues.push(`중단된 서비스: ${stoppedServices.join(', ')}`); } issues.forEach(issue => response += `- ${issue}\n`); response += '\n'; }); } // 관련 AI 문제 항목 추가 if (aiProblemsData.length > 0) { response += `### AI 분석 문제 항목 (상위 ${Math.min(3, aiProblemsData.length)}개)\n\n`; aiProblemsData.slice(0, 3).forEach((problem, index) => { response += `${index+1}. **${problem.serverHostname || '전체 서버'}**: ${problem.description}\n`; response += ` - 심각도: ${problem.severity}\n`; response += ` - 권장 조치: ${problem.solution || '문제 원인 분석 필요'}\n\n`; }); } return response; } // 기본 AI 프로세서 호출 return this.aiProcessor.processQuery(query); } processAIQuery() { if (!this.aiProcessor) return; const queryInput = document.getElementById('queryInput'); if (!queryInput) { console.error("쿼리 입력 요소(queryInput)를 찾을 수 없습니다."); return; } const query = queryInput.value.trim(); if (!query) return; const queryLoadingElement = document.getElementById('queryLoading'); const queryResultElement = document.getElementById('queryResult'); const queryResultContent = document.getElementById('queryResultContent'); // 응답 영역 보이기 if (queryLoadingElement) queryLoadingElement.classList.add('active'); if (queryResultElement) queryResultElement.style.display = 'none'; // 프리셋 기반 응답 처리 (자체 처리) const isPresetQuery = query.includes("CPU 사용률이 높은 서버") || query.includes("CPU 과부하") || query.includes("메모리 사용량이 많은 서버") || query.includes("메모리 부족") || query.includes("서비스가 중단된 서버") || query.includes("디스크 공간이 부족한 서버") || query.includes("정상 작동 중인 서버 목록") || query.includes("전체 서버 상태 요약"); if (isPresetQuery) { const result = this.processPresetQuery(query); if (result) { if (queryResultContent && queryResultElement) { queryResultContent.innerHTML = result; queryResultElement.classList.add('active'); queryResultElement.style.display = 'block'; } if (queryLoadingElement) queryLoadingElement.classList.remove('active'); return; } } // AI 질의 처리 (서버 상태 데이터와 AI 문제 데이터 연동) let enhancedQuery = query; // AI 자동 장애 보고서 데이터가 있다면 쿼리에 추가 컨텍스트 제공 if (this.problemsData && this.problemsData.length > 0) { const relevantProblems = this.findRelevantProblems(query); if (relevantProblems.length > 0) { enhancedQuery += "\n\n관련 문제 데이터:\n"; relevantProblems.forEach(problem => { enhancedQuery += `- ${problem.serverHostname || '전체 서버'}: ${problem.description} (심각도: ${problem.severity})\n`; if (problem.solution) { enhancedQuery += ` 해결책: ${problem.solution}\n`; } }); } } // 서버 상태 데이터 통계 추가 const criticalServers = this.serverData.filter(server => this.getServerStatus(server) === 'critical').length; const warningServers = this.serverData.filter(server => this.getServerStatus(server) === 'warning').length; const normalServers = this.serverData.filter(server => this.getServerStatus(server) === 'normal').length; enhancedQuery += `\n\n서버 현황: 총 ${this.serverData.length}대 (정상: ${normalServers}, 경고: ${warningServers}, 심각: ${criticalServers})`; this.aiProcessor.processQuery(enhancedQuery) .then(response => { if (queryResultContent && queryResultElement) { queryResultContent.innerHTML = response; queryResultElement.classList.add('active'); queryResultElement.style.display = 'block'; } }) .catch(error => { if (queryResultContent && queryResultElement) { queryResultContent.innerHTML = `오류가 발생했습니다: ${error.message}`; queryResultElement.classList.add('active'); queryResultElement.style.display = 'block'; } }) .finally(() => { if (queryLoadingElement) queryLoadingElement.classList.remove('active'); }); } // 쿼리와 관련된 문제 찾기 findRelevantProblems(query) { if (!this.problemsData || !Array.isArray(this.problemsData)) { return []; } const keywords = query.toLowerCase().split(/\s+/); return this.problemsData.filter(problem => { if (!problem.description) return false; const description = problem.description.toLowerCase(); return keywords.some(keyword => keyword.length > 3 && description.includes(keyword) ); }); } downloadErrorReport() { if (!this.aiProcessor) return; let report = ''; try { // generateErrorReport 메소드가 존재하고 호출 가능한지 확인 if (typeof this.aiProcessor.generateErrorReport === 'function') { report = this.aiProcessor.generateErrorReport(); } else { console.warn("AI 프로세서에 generateErrorReport 메소드가 없습니다. 기본 보고서를 생성합니다."); // 기본 장애 보고서 생성 로직 report = '# 서버 상태 보고서\n\n'; report += `생성 시간: ${new Date().toLocaleString()}\n\n`; // 서버 상태에 따라 요약 정보 생성 const criticalServers = this.serverData.filter(s => this.getServerStatus(s) === 'critical'); const warningServers = this.serverData.filter(s => this.getServerStatus(s) === 'warning'); const normalServers = this.serverData.filter(s => this.getServerStatus(s) === 'normal'); report += `## 서버 상태 요약\n\n`; report += `- 총 서버 수: ${this.serverData.length}\n`; report += `- 정상: ${normalServers.length}\n`; report += `- 경고: ${warningServers.length}\n`; report += `- 심각: ${criticalServers.length}\n\n`; // 문제 상태의 서버에 대한 세부 정보 if (criticalServers.length > 0) { report += '## 심각한 상태의 서버\n\n'; criticalServers.forEach(server => { report += `### ${server.hostname}\n`; report += `- CPU: ${server.cpu_usage}%\n`; report += `- 메모리: ${server.memory_usage_percent}%\n`; report += `- 디스크: ${server.disk[0].disk_usage_percent}%\n`; if (server.errors && server.errors.length > 0) { report += `- 오류: ${server.errors.join(', ')}\n`; } report += `\n`; }); } if (warningServers.length > 0) { report += '## 경고 상태의 서버\n\n'; warningServers.forEach(server => { report += `### ${server.hostname}\n`; report += `- CPU: ${server.cpu_usage}%\n`; report += `- 메모리: ${server.memory_usage_percent}%\n`; report += `- 디스크: ${server.disk[0].disk_usage_percent}%\n`; if (server.errors && server.errors.length > 0) { report += `- 오류: ${server.errors.join(', ')}\n`; } report += `\n`; }); } } } catch (e) { console.error("장애 보고서 생성 중 오류 발생:", e); report = '# 오류 발생\n\n장애 보고서를 생성하는 중 오류가 발생했습니다.\n\n' + e.message; } const blob = new Blob([report], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `server_error_report_${new Date().toISOString().slice(0, 10)}.txt`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } // 유틸리티 함수 getServerStatus(server) { // AI Processor의 getEffectiveServerStatus를 사용하여 상태 결정 if (this.aiProcessor && typeof this.aiProcessor.getEffectiveServerStatus === 'function') { try { return this.aiProcessor.getEffectiveServerStatus(server); } catch (e) { // 에러 발생 시 한 번만 경고 출력 (fallback 로직 수행) if (!this._hasLoggedAIProcessorError) { console.error("Error calling aiProcessor.getEffectiveServerStatus:", e); this._hasLoggedAIProcessorError = true; } } } else if (!this._hasLoggedNoAIProcessor) { // 경고 메시지를 한 번만 출력 console.warn("AIProcessor 또는 getEffectiveServerStatus가 없어 기본 상태 판단 로직을 사용합니다."); this._hasLoggedNoAIProcessor = true; } // 폴백 로직 (AI Processor 사용 불가 또는 에러 시) // 리소스 사용률 기반 명확한 기준으로 상태 판단 // 1. Critical 조건 판단 if (server.cpu_usage >= this.thresholds.critical.cpu || server.memory_usage_percent >= this.thresholds.critical.memory || (server.disk && server.disk.length > 0 && server.disk[0].disk_usage_percent >= this.thresholds.critical.disk)) { return 'critical'; } // 2. 오류 메시지 기반 Critical 판단 const hasCriticalError = server.errors && server.errors.some(err => typeof err === 'string' && err.toLowerCase().includes('critical')); if (hasCriticalError) { return 'critical'; } // 3. 서비스 중단 기반 Critical 판단 const hasStoppedService = server.services && Object.values(server.services).includes('stopped'); if (hasStoppedService) { return 'critical'; } // 4. Warning 조건 판단 if (server.cpu_usage >= this.thresholds.warning.cpu || server.memory_usage_percent >= this.thresholds.warning.memory || (server.disk && server.disk.length > 0 && server.disk[0].disk_usage_percent >= this.thresholds.warning.disk)) { return 'warning'; } // 5. 오류 메시지 기반 Warning 판단 const hasWarningError = server.errors && server.errors.some(err => typeof err === 'string' && (err.toLowerCase().includes('warning') || err.toLowerCase().includes('error'))); if (hasWarningError) { return 'warning'; } // 6. 위 조건에 해당하지 않으면 normal 상태 return 'normal'; } getResourceStatus(value, type = 'generic') { // 리소스 유형에 따른 임계값 적용 const criticalThreshold = type in this.thresholds.critical ? this.thresholds.critical[type] : this.thresholds.critical.cpu; const warningThreshold = type in this.thresholds.warning ? this.thresholds.warning[type] : this.thresholds.warning.cpu; if (value >= criticalThreshold) return 'critical'; if (value >= warningThreshold) return 'warning'; return 'normal'; } getStatusLabel(status) { switch(status) { case 'normal': return '정상'; case 'warning': return '경고'; case 'critical': return '심각'; default: return '알 수 없음'; } } // 서버 상태에 따른 부트스트랩 색상 클래스 반환 getStatusColorClass(status) { switch(status) { case 'normal': return 'success'; case 'warning': return 'warning'; case 'critical': return 'danger'; default: return 'secondary'; } } getChartColor(value, type = 'generic') { const status = this.getResourceStatus(value, type); switch(status) { case 'critical': return 'rgba(220, 53, 69, 0.7)'; // 심각 case 'warning': return 'rgba(253, 154, 20, 0.7)'; // 경고 default: return 'rgba(40, 167, 69, 0.7)'; // 정상 } } formatBytes(bytes, decimals = 2) { if (bytes === 0) return '0 Bytes'; const k = 1024; const dm = decimals < 0 ? 0 : decimals; const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; } // 모든 문제를 보여주는 모달 표시 showAllProblems() { if (!this.aiProcessor) { alert('AI 프로세서가 초기화되지 않아 문제 목록을 가져올 수 없습니다.'); return; } // 문제 데이터 가져오기 let problems = []; try { if (typeof this.aiProcessor.detectProblems === 'function') { problems = this.aiProcessor.detectProblems(); } else { console.warn("AI 프로세서에 detectProblems 메소드가 없습니다."); alert('문제 목록을 불러올 수 없습니다.'); return; } // 결과가 배열이 아니거나 undefined인 경우 빈 배열로 처리 if (!Array.isArray(problems)) { console.warn("detectProblems() 함수가 배열을 반환하지 않았습니다."); problems = []; } // Normal 상태는 제외 problems = problems.filter(p => p && (p.severity === 'Critical' || p.severity === 'Warning' || p.severity === 'Error')); // 정렬: Critical 우선, 그 다음 Warning/Error problems.sort((a, b) => { const severityScore = (severity) => { if (severity === 'Critical') return 2; if (severity === 'Warning' || severity === 'Error') return 1; return 0; }; return severityScore(b.severity) - severityScore(a.severity); }); } catch (error) { console.error("문제 목록 가져오기 오류:", error); alert('문제 목록을 불러오는 중 오류가 발생했습니다.'); return; } // 문제가 없는 경우 if (problems.length === 0) { alert('현재 감지된 문제가 없습니다.'); return; } try { // 기존 모달이 있으면 제거 const existingModal = document.getElementById('allProblemsModal'); if (existingModal) { existingModal.remove(); } // 모든 문제를 표시하는 모달 생성 const modalHTML = ` <div class="modal fade" id="allProblemsModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"> <i class="fas fa-exclamation-triangle me-2 text-danger"></i> 전체 서버 문제 목록 </h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="problems-count mb-3"> 총 <span class="fw-bold">${problems.length}</span>개의 문제가 감지되었습니다. </div> <div class="alert alert-info mb-3"> <i class="fas fa-info-circle me-2"></i> 각 문제를 클릭하면 해당 서버의 상세 정보를 확인할 수 있습니다. </div> <ul class="list-group all-problems-list"> ${problems.map((problem, idx) => ` <li class="list-group-item list-group-item-action problem-item severity-${problem.severity.toLowerCase()}" data-index="${idx}"> <div class="d-flex w-100 justify-content-between"> <h6 class="mb-1 problem-description">${problem.description}</h6> <small class="text-muted">${problem.serverHostname || '알 수 없는 서버'}</small> </div> <p class="mb-1 problem-solution">${problem.solution || '제안된 해결책 없음'}</p> <small class="text-muted">심각도: <span class="fw-bold problem-severity-text">${problem.severity}</span></small> <div class="problem-hint-icon"> <i class="fas fa-search-plus"></i> </div> </li> `).join('')} </ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" id="downloadModalReport"> <i class="bi bi-download"></i> 보고서 다운로드 </button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button> </div> </div> </div> </div> `; // 모달을 페이지에 추가 document.body.insertAdjacentHTML('beforeend', modalHTML); // 모달 요소 가져오기 const modalElement = document.getElementById('allProblemsModal'); if (!modalElement) { console.error("모달 요소 생성 실패"); return; } // jQuery로 모달 표시 시도 (부트스트랩 의존성 줄이기) if (window.jQuery && window.jQuery.fn.modal) { const $modal = window.jQuery(modalElement); $modal.modal('show'); // 문제 항목에 클릭 이벤트 추가 window.jQuery('.problem-item').on('click', function() { const index = parseInt(window.jQuery(this).data('index')); const serverHostname = problems[index].serverHostname; if (!serverHostname) return; const server = this.serverData.find(s => s.hostname === serverHostname); if (server) { $modal.modal('hide'); setTimeout(() => { this.showServerDetail(server); }, 500); } }.bind(this)); // 보고서 다운로드 버튼 이벤트 window.jQuery('#downloadModalReport').on('click', this.downloadErrorReport.bind(this)); return; // jQuery로 성공적으로 표시했으면 여기서 종료 } // 부트스트랩 모달 인스턴스 생성 및 표시 if (typeof bootstrap !== 'undefined' && typeof bootstrap.Modal === 'function') { // 부트스트랩 5+ const bsModal = new bootstrap.Modal(modalElement); bsModal.show(); // 문제 항목 클릭 이벤트 추가 const problemItems = modalElement.querySelectorAll('.problem-item'); problemItems.forEach(item => { // 애니메이션 딜레이 설정 const index = parseInt(item.dataset.index); item.style.setProperty('--item-index', index); item.addEventListener('click', () => { // 해당 서버 모달 표시 const serverHostname = problems[index].serverHostname; if (!serverHostname) return; const server = this.serverData.find(s => s.hostname === serverHostname); if (server) { bsModal.hide(); // 현재 모달 닫기 setTimeout(() => { this.showServerDetail(server); // 서버 상세 모달 표시 }, 500); } }); }); } else { // 순수 JavaScript로 모달 표시 (fallback) modalElement.style.display = 'block'; modalElement.classList.add('show'); document.body.classList.add('modal-open'); // 배경 요소 추가 const backdrop = document.createElement('div'); backdrop.className = 'modal-backdrop fade show'; document.body.appendChild(backdrop); // 닫기 버튼에 이벤트 리스너 추가 const closeButtons = modalElement.querySelectorAll('[data-bs-dismiss="modal"]'); closeButtons.forEach(btn => { btn.addEventListener('click', () => { modalElement.style.display = 'none'; modalElement.classList.remove('show'); document.body.classList.remove('modal-open'); document.querySelector('.modal-backdrop')?.remove(); }); }); // 문제 항목 클릭 이벤트 추가 const problemItems = modalElement.querySelectorAll('.problem-item'); problemItems.forEach(item => { const index = parseInt(item.dataset.index); item.style.setProperty('--item-index', index); item.addEventListener('click', () => { const serverHostname = problems[index].serverHostname; if (!serverHostname) return; const server = this.serverData.find(s => s.hostname === serverHostname); if (server) { // 모달 수동 닫기 modalElement.style.display = 'none'; modalElement.classList.remove('show'); document.body.classList.remove('modal-open'); document.querySelector('.modal-backdrop')?.remove(); setTimeout(() => { this.showServerDetail(server); }, 500); } }); }); } // 보고서 다운로드 버튼 이벤트 const downloadBtn = document.getElementById('downloadModalReport'); if (downloadBtn) { downloadBtn.addEventListener('click', () => { this.downloadErrorReport(); }); } } catch (error) { console.error('모달 표시 중 오류 발생:', error); alert('문제 목록을 표시할 수 없습니다.'); } } // 문제 상세 보고서 모달 표시 (새로 추가) showProblemDetailModal(problem) { if (!problem) { console.error("문제 데이터가 없습니다."); return; } // 서버 정보 가져오기 const server = this.serverData.find(s => s.hostname === problem.serverHostname); try { // 기존 모달 제거 (중복 생성 방지) const existingModal = document.getElementById('problemDetailModal'); if (existingModal) { existingModal.remove(); } // 모달 HTML 생성 및 추가 const modalHTML = ` <div class="modal fade" id="problemDetailModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"><i class="fas fa-exclamation-triangle me-2 text-danger"></i> <span id="problemTitle">문제 상세 보고서</span></h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="row mb-3"> <div class="col-12"> <div class="alert alert-danger"> <h6 class="alert-heading">문제 설명</h6> <p id="problemDescription" class="mb-0"></p> </div> </div> </div> <div class="row mb-3"> <div class="col-md-6"> <div class="card"> <div class="card-header bg-light"> <h6 class="mb-0">서버 정보</h6> </div> <div class="card-body"> <table class="table table-sm"> <tbody id="problemServerInfoTable"> </tbody> </table> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-header bg-light"> <h6 class="mb-0">문제 원인</h6> </div> <div class="card-body"> <ul id="problemCausesList" class="mb-0"></ul> </div> </div> </div> </div> <div class="row mb-3"> <div class="col-12"> <div class="card"> <div class="card-header bg-light"> <h6 class="mb-0">해결 방법</h6> </div> <div class="card-body"> <ul id="problemSolutionsList" class="mb-0"></ul> </div> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-header bg-light"> <h6 class="mb-0">상세 메트릭 정보</h6> </div> <div class="card-body"> <div id="problemMetricsInfo"></div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" id="downloadReportBtn"> <i class="bi bi-download me-1"></i> 보고서 다운로드 (.txt) </button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button> </div> </div> </div> </div>`; // 모달을 페이지에 추가 document.body.insertAdjacentHTML('beforeend', modalHTML); // 모달 요소를 다시 가져옴 const problemModal = document.getElementById('problemDetailModal'); if (!problemModal) { console.error("모달 요소 생성 실패"); return; } // 문제 상세 정보 표시 const problemTitle = document.getElementById('problemTitle'); const problemDescription = document.getElementById('problemDescription'); const serverInfoTable = document.getElementById('problemServerInfoTable'); const causesList = document.getElementById('problemCausesList'); const solutionsList = document.getElementById('problemSolutionsList'); const metricsInfo = document.getElementById('problemMetricsInfo'); // 안전하게 내용 업데이트 if (problemTitle) problemTitle.textContent = `${problem.severity} 문제 보고서: ${server ? server.hostname : '알 수 없는 서버'}`; if (problemDescription) problemDescription.textContent = problem.description; // 서버 정보 테이블 업데이트 if (serverInfoTable && server) { serverInfoTable.innerHTML = ` <tr> <th>호스트명</th> <td>${server.hostname}</td> </tr> <tr> <th>IP 주소</th> <td>${server.ip}</td> </tr> <tr> <th>OS</th> <td>${server.os}</td> </tr> <tr> <th>상태</th> <td><span class="badge bg-${this.getStatusColorClass(this.getServerStatus(server))}">${this.getStatusLabel(this.getServerStatus(server))}</span></td> </tr> <tr> <th>CPU 사용률</th> <td>${server.cpu_usage}%</td> </tr> <tr> <th>메모리 사용률</th> <td>${server.memory_usage_percent}%</td> </tr> <tr> <th>디스크 사용률</th> <td>${server.disk && server.disk.length > 0 ? server.disk[0].disk_usage_percent + '%' : 'N/A'}</td> </tr> `; } // 원인 및 해결 방법 목록 채우기 if (causesList) { causesList.innerHTML = ''; const causes = problem.causes || ["원인 데이터 없음"]; causes.forEach(cause => { const li = document.createElement('li'); li.textContent = cause; causesList.appendChild(li); }); } if (solutionsList) { solutionsList.innerHTML = ''; const solutions = problem.solutions || [problem.solution || "해결 방법 데이터 없음"]; solutions.forEach(solution => { const li = document.createElement('li'); li.textContent = solution; solutionsList.appendChild(li); }); } // 상세 메트릭 정보 if (metricsInfo && server) { metricsInfo.innerHTML = ` <div class="row"> <div class="col-md-6"> <h6 class="mt-2 mb-3">리소스 사용량</h6> <div class="progress mb-2" style="height: 25px;"> <div class="progress-bar ${this.getResourceStatus(server.cpu_usage, 'cpu') !== 'normal' ? 'bg-danger' : 'bg-success'}" role="progressbar" style="width: ${server.cpu_usage}%"> CPU ${server.cpu_usage}% </div> </div> <div class="progress mb-2" style="height: 25px;"> <div class="progress-bar ${this.getResourceStatus(server.memory_usage_percent, 'memory') !== 'normal' ? 'bg-danger' : 'bg-success'}" role="progressbar" style="width: ${server.memory_usage_percent}%"> 메모리 ${server.memory_usage_percent}% </div> </div> <div class="progress mb-2" style="height: 25px;"> <div class="progress-bar ${server.disk && server.disk.length > 0 && this.getResourceStatus(server.disk[0].disk_usage_percent, 'disk') !== 'normal' ? 'bg-danger' : 'bg-success'}" role="progressbar" style="width: ${server.disk && server.disk.length > 0 ? server.disk[0].disk_usage_percent : 0}%"> 디스크 ${server.disk && server.disk.length > 0 ? server.disk[0].disk_usage_percent : 0}% </div> </div> </div> <div class="col-md-6"> <h6 class="mt-2 mb-3">네트워크 정보</h6> <p><strong>수신:</strong> ${this.formatBytes(server.net.rx_bytes)}</p> <p><strong>송신:</strong> ${this.formatBytes(server.net.tx_bytes)}</p> <p><strong>오류:</strong> RX: ${server.net.rx_errors}, TX: ${server.net.tx_errors}</p> </div> </div> `; } // 보고서 다운로드 버튼 이벤트 리스너 const downloadBtn = document.getElementById('downloadReportBtn'); if (downloadBtn) { // 이전 이벤트 리스너 제거 downloadBtn.replaceWith(downloadBtn.cloneNode(true)); // 새 이벤트 리스너 추가 document.getElementById('downloadReportBtn').addEventListener('click', () => { this.downloadProblemReport(problem, server); }); } // jQuery로 모달 표시 시도 (부트스트랩 의존성 줄이기) if (window.jQuery && window.jQuery.fn.modal) { window.jQuery(problemModal).modal('show'); return; // jQuery로 성공적으로 표시했으면 여기서 종료 } // 부트스트랩 모달 인스턴스 생성 및 표시 if (typeof bootstrap !== 'undefined' && typeof bootstrap.Modal === 'function') { // 부트스트랩 5+ const bsModal = new bootstrap.Modal(problemModal); bsModal.show(); } else { // 순수 JavaScript로 모달 표시 (fallback) problemModal.style.display = 'block'; problemModal.classList.add('show'); document.body.classList.add('modal-open'); // 배경 요소 추가 const backdrop = document.createElement('div'); backdrop.className = 'modal-backdrop fade show'; document.body.appendChild(backdrop); // 닫기 버튼에 이벤트 리스너 추가 const closeButtons = problemModal.querySelectorAll('[data-bs-dismiss="modal"]'); closeButtons.forEach(btn => { btn.addEventListener('click', () => { problemModal.style.display = 'none'; problemModal.classList.remove('show'); document.body.classList.remove('modal-open'); document.querySelector('.modal-backdrop')?.remove(); }); }); } } catch (error) { console.error('모달 표시 중 오류 발생:', error); alert('문제 상세 정보를 표시할 수 없습니다.'); } } // 문제 보고서 다운로드 (새로 추가) downloadProblemReport(problem, server) { if (!problem || !server) return; const timestamp = new Date().toISOString().replace(/:/g, '-').replace(/\..+/, ''); const filename = `${server.hostname}_${problem.severity}_report_${timestamp}.txt`; let reportContent = `=========================================\n`; reportContent += ` OpenManager AI 자동 장애 보고서\n`; reportContent += `=========================================\n\n`; reportContent += `[생성 일시]: ${new Date().toLocaleString()}\n\n`; reportContent += `[문제 요약]\n`; reportContent += `심각도: ${problem.severity}\n`; reportContent += `설명: ${problem.description}\n\n`; reportContent += `[서버 정보]\n`; reportContent += `호스트명: ${server.hostname}\n`; reportContent += `IP: ${server.ip}\n`; reportContent += `OS: ${server.os}\n`; reportContent += `상태: ${this.getStatusLabel(this.getServerStatus(server))}\n\n`; reportContent += `[리소스 현황]\n`; reportContent += `CPU 사용률: ${server.cpu_usage}%\n`; reportContent += `메모리 사용률: ${server.memory_usage_percent}%\n`; reportContent += `디스크 사용률: ${server.disk && server.disk.length > 0 ? server.disk[0].disk_usage_percent + '%' : 'N/A'}\n`; reportContent += `네트워크 수신: ${this.formatBytes(server.net.rx_bytes)}\n`; reportContent += `네트워크 송신: ${this.formatBytes(server.net.tx_bytes)}\n`; reportContent += `네트워크 오류 (RX/TX): ${server.net.rx_errors}/${server.net.tx_errors}\n\n`; if (problem.causes && problem.causes.length) { reportContent += `[추정 원인]\n`; problem.causes.forEach((cause, index) => { reportContent += `${index + 1}. ${cause}\n`; }); reportContent += `\n`; } reportContent += `[해결 방법]\n`; const solutions = problem.solutions || [problem.solution || "해결 방법 데이터 없음"]; solutions.forEach((solution, index) => { reportContent += `${index + 1}. ${solution}\n`; }); reportContent += `\n`; if (server.errors && server.errors.length) { reportContent += `[오류 로그]\n`; server.errors.forEach((error, index) => { reportContent += `${index + 1}. ${error}\n`; }); } reportContent += `\n=========================================\n`; reportContent += `이 보고서는 OpenManager AI에 의해 자동 생성되었습니다.\n`; reportContent += `문의: support@openmanager.ai\n`; // 텍스트 파일로 다운로드 const blob = new Blob([reportContent], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } // 전체 문제 보고서 다운로드 (새로 추가) downloadAllProblemsReport() { if (!this.problemsData || this.problemsData.length === 0) { alert('다운로드할 문제 보고서가 없습니다.'); return; } const timestamp = new Date().toISOString().replace(/:/g, '-').replace(/\..+/, ''); const filename = `OpenManager_all_problems_report_${timestamp}.txt`; let reportContent = `=========================================\n`; reportContent += ` OpenManager AI 자동 장애 보고서 (전체)\n`; reportContent += `=========================================\n\n`; reportContent += `[생성 일시]: ${new Date().toLocaleString()}\n`; reportContent += `[총 문제 수]: ${this.problemsData.length}개\n\n`; this.problemsData.forEach((problem, index) => { const server = this.serverData.find(s => s.hostname === problem.serverHostname); if (!server) return; reportContent += `\n=========================================\n`; reportContent += `문제 #${index + 1}: ${problem.severity} - ${server.hostname}\n`; reportContent += `=========================================\n\n`; reportContent += `[문제 요약]\n`; reportContent += `심각도: ${problem.severity}\n`; reportContent += `설명: ${problem.description}\n\n`; reportContent += `[서버 정보]\n`; reportContent += `호스트명: ${server.hostname}\n`; reportContent += `IP: ${server.ip}\n`; reportContent += `OS: ${server.os}\n`; reportContent += `상태: ${this.getStatusLabel(this.getServerStatus(server))}\n\n`; reportContent += `[리소스 현황]\n`; reportContent += `CPU 사용률: ${server.cpu_usage}%\n`; reportContent += `메모리 사용률: ${server.memory_usage_percent}%\n`; reportContent += `디스크 사용률: ${server.disk && server.disk.length > 0 ? server.disk[0].disk_usage_percent + '%' : 'N/A'}\n`; reportContent += `네트워크 수신: ${this.formatBytes(server.net.rx_bytes)}\n`; reportContent += `네트워크 송신: ${this.formatBytes(server.net.tx_bytes)}\n`; reportContent += `네트워크 오류 (RX/TX): ${server.net.rx_errors}/${server.net.tx_errors}\n\n`; if (problem.causes && problem.causes.length) { reportContent += `[추정 원인]\n`; problem.causes.forEach((cause, causeIndex) => { reportContent += `${causeIndex + 1}. ${cause}\n`; }); reportContent += `\n`; } reportContent += `[해결 방법]\n`; const solutions = problem.solutions || [problem.solution || "해결 방법 데이터 없음"]; solutions.forEach((solution, solutionIndex) => { reportContent += `${solutionIndex + 1}. ${solution}\n`; }); reportContent += `\n`; if (server.errors && server.errors.length) { reportContent += `[오류 로그]\n`; server.errors.forEach((error, errorIndex) => { reportContent += `${errorIndex + 1}. ${error}\n`; }); reportContent += `\n`; } }); reportContent += `\n=========================================\n`; reportContent += `이 보고서는 OpenManager AI에 의해 자동 생성되었습니다.\n`; reportContent += `생성 일시: ${new Date().toLocaleString()}\n`; reportContent += `문의: support@openmanager.ai\n`; // 텍스트 파일로 다운로드 const blob = new Blob([reportContent], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } } // 데이터 프로세서 인스턴스 생성 window.addEventListener('DOMContentLoaded', () => { if (!window.aiProcessor) window.aiProcessor = new AIProcessor(); new MCPQueryManager(); }); // MCP 질문/응답 확장 기능 추가 class MCPQueryManager { constructor() { this.historyKey = 'mcpQueryHistory'; this.history = this.loadHistory(); this.context = null; this.mcpUrl = 'https://openmanager-vibe-v4.onrender.com/query'; // 실제 MCP 서버 주소로 교체 this.init(); } async init() { await this.loadContext(); this.initUI(); this.renderHistory(); } async loadContext() { try { const res = await fetch('/public/context/server-status.txt'); this.context = await res.text(); } catch (e) { this.context = ''; } } initUI() { const input = document.getElementById('queryInput'); const button = document.getElementById('ai-query-submit'); const result = document.getElementById('queryResultContent'); const resultBox = document.getElementById('queryResult'); const loading = document.getElementById('queryLoading'); const closeBtn = document.getElementById('closeQueryResult'); const exampleBtns = document.querySelectorAll('.example-query-btn'); if (input && button) { input.addEventListener('keypress', (e) => { if (e.key === 'Enter') this.handleQuery(input, result, resultBox, loading); }); button.addEventListener('click', () => this.handleQuery(input, result, resultBox, loading)); } if (closeBtn && resultBox) { closeBtn.addEventListener('click', () => { resultBox.classList.remove('active'); resultBox.style.display = 'none'; }); } if (exampleBtns) { exampleBtns.forEach(btn => { btn.addEventListener('click', () => { input.value = btn.textContent; this.handleQuery(input, result, resultBox, loading); }); }); } } async handleQuery(input, result, resultBox, loading) { const query = input.value?.trim(); if (!query || query === 'undefined') return; // 빈 입력 방지 loading.style.display = 'block'; resultBox.classList.remove('active'); resultBox.style.display = 'none'; try { // processQuery 대신 aiProcessor 인스턴스를 통해 호출 const answer = window.aiProcessor ? await window.aiProcessor.processQuery(query) : "AI 처리 컴포넌트를 찾을 수 없습니다."; if (!answer || answer === 'undefined' || answer.trim() === '') { result.innerHTML = '적절한 답변을 찾지 못했습니다.'; } else { result.innerHTML = window.marked ? window.marked.parse(answer) : answer; } resultBox.classList.add('active'); resultBox.style.display = 'block'; this.addHistory(query, answer); this.renderHistory(); } catch (e) { result.innerHTML = '질문 처리 중 오류가 발생했습니다.'; resultBox.classList.add('active'); resultBox.style.display = 'block'; } finally { loading.style.display = 'none'; input.value = ''; } } addHistory(query, answer) { this.history.unshift({ query, answer, ts: new Date().toISOString() }); if (this.history.length > 30) this.history.pop(); localStorage.setItem(this.historyKey, JSON.stringify(this.history)); } loadHistory() { try { return JSON.parse(localStorage.getItem(this.historyKey)) || []; } catch { return []; } } renderHistory() { const histBox = document.getElementById('queryHistory'); if (!histBox) return; histBox.innerHTML = this.history.map(item => ` <div class="query-item"> <div class="query-question"><i class="fas fa-user"></i> <span>${item.query}</span></div> <div class="query-answer markdown-content">${window.marked ? window.marked.parse(item.answer) : item.answer}</div> <div class="query-timestamp">${new Date(item.ts).toLocaleString()}</div> </div> `).join(''); } } window.addEventListener('DOMContentLoaded', () => { new MCPQueryManager(); });