farmq-admin/app.py

@@ -533,10 +533,6 @@ def create_app(config_name=None):
             if not client.login():
                 return jsonify({'error': 'Proxmox 서버 로그인 실패'}), 500
             
-            # VM 상태 확인
-            vm_status = client.get_vm_status(node, vmid)
-            print(f"🔍 VM {vmid} 상태: {vm_status}")
-            
             # VNC 티켓 생성
             vnc_data = client.get_vnc_ticket(node, vmid)
             if not vnc_data:
@@ -552,7 +548,6 @@ def create_app(config_name=None):
                 'vm_name': vm_name,
                 'websocket_url': vnc_data['websocket_url'],
                 'password': vnc_data.get('password', ''),  # VNC 패스워드 추가
-                'vm_status': vm_status.get('status', 'unknown'),  # VM 상태 추가
                 'created_at': datetime.now()
             }
             
@@ -566,55 +561,6 @@ def create_app(config_name=None):
             print(f"❌ VNC API 오류: {e}")
             return jsonify({'error': str(e)}), 500
     
-    @app.route('/api/vnc/refresh/<session_id>', methods=['POST'])
-    def api_vnc_refresh_ticket(session_id):
-        """VNC 티켓 새로고침 API"""
-        try:
-            # 세션 확인
-            if session_id not in vnc_sessions:
-                return jsonify({'error': '유효하지 않은 VNC 세션입니다.'}), 404
-            
-            session_data = vnc_sessions[session_id]
-            node = session_data['node']
-            vmid = session_data['vmid']
-            
-            print(f"🔄 VNC 티켓 새로고침 요청: {node}/{vmid}")
-            
-            # Proxmox 클라이언트 생성
-            client = ProxmoxClient(
-                host=config['proxmox']['host'],
-                username=config['proxmox']['username'],
-                password=config['proxmox']['password']
-            )
-            
-            if not client.login():
-                return jsonify({'error': 'Proxmox 로그인 실패'}), 500
-            
-            # 새 VNC 티켓 생성
-            vnc_data = client.get_vnc_ticket(node, vmid)
-            if not vnc_data:
-                return jsonify({'error': '새 VNC 티켓 생성 실패'}), 500
-            
-            # 세션 업데이트
-            vnc_sessions[session_id].update({
-                'websocket_url': vnc_data['websocket_url'],
-                'password': vnc_data.get('password', ''),
-                'updated_at': datetime.now()
-            })
-            
-            print(f"✅ VNC 티켓 새로고침 완료: {session_id}")
-            
-            return jsonify({
-                'success': True,
-                'websocket_url': vnc_data['websocket_url'],
-                'password': vnc_data.get('password', ''),
-                'message': '새 VNC 티켓이 생성되었습니다.'
-            })
-            
-        except Exception as e:
-            print(f"❌ VNC 티켓 새로고침 실패: {e}")
-            return jsonify({'error': str(e)}), 500
-    
     @app.route('/vnc/<session_id>')
     def vnc_console(session_id):
         """VNC 콘솔 페이지"""
@@ -626,14 +572,13 @@ def create_app(config_name=None):
             
             session_data = vnc_sessions[session_id]
             
-            # 직접 WebSocket VNC 연결 (noVNC) - 간단한 버전으로 테스트
+            # 직접 WebSocket VNC 연결 (noVNC)
-            return render_template('vnc_simple.html',
+            return render_template('vnc_console.html',
                                  vm_name=session_data['vm_name'],
                                  vmid=session_data['vmid'],
                                  node=session_data['node'],
                                  websocket_url=session_data['websocket_url'],
-                                 password=session_data.get('password', ''),
+                                 password=session_data.get('password', ''))
-                                 vm_status=session_data.get('vm_status', 'unknown'))
                                  
         except Exception as e:
             print(f"❌ VNC 콘솔 오류: {e}")

farmq-admin/templates/vnc_console.html

@@ -37,7 +37,6 @@
             flex: 1;
             position: relative;
             background: #000;
-            overflow: hidden;
         }
         
         .vnc-status {
@@ -59,10 +58,6 @@
         #vnc-canvas {
             margin: 0;
             padding: 0;
-            background: #000;
-            display: none;
-            width: 100%;
-            height: 100%;
         }
         
         .connection-info {
@@ -90,9 +85,6 @@
                 <button id="ctrl-alt-del-btn" class="btn btn-sm btn-warning btn-vnc">
                     <i class="fas fa-keyboard"></i> Ctrl+Alt+Del
                 </button>
-                <button id="wake-screen-btn" class="btn btn-sm btn-info btn-vnc">
-                    <i class="fas fa-eye"></i> 화면 활성화
-                </button>
                 <button id="disconnect-btn" class="btn btn-sm btn-danger btn-vnc">
                     <i class="fas fa-times"></i> 연결종료
                 </button>
@@ -120,23 +112,14 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 
     <script type="module">
-        // Proxmox와 동일한 noVNC 정적 파일 사용
+        // noVNC 라이브러리 import
-        import RFB from '/static/novnc/core/rfb.js';
+        import RFB from 'https://cdn.jsdelivr.net/npm/@novnc/novnc/core/rfb.js';
-        
-        // HTML 엔티티 디코딩 함수
-        function decodeHtmlEntities(text) {
-            const textarea = document.createElement('textarea');
-            textarea.innerHTML = text;
-            return textarea.value;
-        }
         
         // VNC 연결 설정 (HTML 엔티티 디코딩)
         const rawWebsocketUrl = '{{ websocket_url|safe }}';
-        const websocketUrl = decodeHtmlEntities(rawWebsocketUrl);
+        const websocketUrl = rawWebsocketUrl.replace(/&amp;/g, '&');
         const vmName = '{{ vm_name }}';
-        const rawPassword = '{{ password|safe }}';
+        const vncPassword = '{{ password }}';
-        const vncPassword = decodeHtmlEntities(rawPassword);
-        const vmStatus = '{{ vm_status }}';
         
         let rfb;
         let isConnected = false;
@@ -150,9 +133,7 @@
             try {
                 console.log('Raw WebSocket URL:', rawWebsocketUrl);
                 console.log('Decoded WebSocket URL:', websocketUrl);
-                console.log('Raw Password:', rawPassword);
+                console.log('VNC Password:', vncPassword);
-                console.log('Decoded VNC Password:', vncPassword);
-                console.log('VM Status:', vmStatus);
                 console.log('RFB 클래스 사용 가능:', !!RFB);
                 
                 // URL 유효성 검사
@@ -163,9 +144,7 @@
                 // RFB 객체 생성
                 rfb = new RFB(canvas, websocketUrl, {
                     credentials: { password: vncPassword },
-                    shared: true,
+                    shared: true
-                    repeaterID: '',
-                    wsProtocols: ['binary']
                 });
                 
                 // 이벤트 리스너 등록
@@ -173,23 +152,10 @@
                 rfb.addEventListener('disconnect', onDisconnected);
                 rfb.addEventListener('credentialsrequired', onCredentialsRequired);
                 rfb.addEventListener('securityfailure', onSecurityFailure);
-                rfb.addEventListener('desktopname', onDesktopName);
-                rfb.addEventListener('clipboard', onClipboard);
                 
-                // 화면 설정 - noVNC가 자동으로 관리하도록 설정
+                // 화면 크기 자동 조정
                 rfb.scaleViewport = true;
-                rfb.clipViewport = false;
                 rfb.resizeSession = false;
-                rfb.viewOnly = false;
-                rfb.focusOnClick = true;
-                
-                console.log('RFB 객체 생성 완료, 설정:', {
-                    scaleViewport: rfb.scaleViewport,
-                    clipViewport: rfb.clipViewport,
-                    resizeSession: rfb.resizeSession,
-                    viewOnly: rfb.viewOnly,
-                    focusOnClick: rfb.focusOnClick
-                });
                 
             } catch (error) {
                 console.error('VNC 연결 오류:', error);
@@ -203,33 +169,6 @@
             isConnected = true;
             statusDiv.style.display = 'none';
             canvas.style.display = 'block';
-            
-            // 즉시 Canvas 크기 강제 조정
-            setTimeout(() => {
-                forceCanvasResize();
-            }, 100);
-            
-            // Canvas 크기 조정
-            setTimeout(() => {
-                resizeCanvas();
-            }, 200);
-            
-            // Windows 화면 절전모드 해제 시도
-            setTimeout(() => {
-                if (rfb) {
-                    console.log('화면 절전모드 해제 시도...');
-                    
-                    // 키보드 입력으로 화면 활성화 (마우스 이벤트는 제거)
-                    setTimeout(() => {
-                        try {
-                            rfb.sendKey(0x0020, '', true); // Space 키 누름
-                            setTimeout(() => rfb.sendKey(0x0020, '', false), 50); // Space 키 뗌
-                        } catch(e) {
-                            console.log('키보드 이벤트 전송 실패:', e.message);
-                        }
-                    }, 200);
-                }
-            }, 1000);
         }
         
         // 연결 해제
@@ -256,66 +195,6 @@
             showStatus('🔒 보안 실패', 'VNC 보안 인증에 실패했습니다: ' + (e.detail.reason || 'Unknown'), 'danger');
         }
         
-        // 데스크탑 이름 수신
-        function onDesktopName(e) {
-            console.log('VNC 데스크탑 이름:', e.detail.name);
-            
-            // 강제로 Canvas 크기 조정
-            setTimeout(() => {
-                forceCanvasResize();
-            }, 100);
-            
-            // 화면 크기 정보 수집
-            setTimeout(() => {
-                const canvas = document.getElementById('vnc-canvas');
-                console.log('Canvas dimensions:', canvas.width, 'x', canvas.height);
-                console.log('Canvas client size:', canvas.clientWidth, 'x', canvas.clientHeight);
-            }, 500);
-        }
-        
-        // 강제 Canvas 크기 조정
-        function forceCanvasResize() {
-            if (!rfb || !isConnected) return;
-            
-            const container = document.querySelector('.vnc-screen');
-            const containerRect = container.getBoundingClientRect();
-            
-            console.log('컨테이너 크기:', containerRect.width, 'x', containerRect.height);
-            
-            // Canvas를 컨테이너 크기에 맞게 설정
-            canvas.width = containerRect.width;
-            canvas.height = containerRect.height;
-            canvas.style.width = containerRect.width + 'px';
-            canvas.style.height = containerRect.height + 'px';
-            
-            console.log('Canvas 크기 강제 설정:', canvas.width, 'x', canvas.height);
-            
-            // noVNC 스케일링 재설정
-            rfb.scaleViewport = true;
-            rfb.resizeSession = false;
-            
-            // 화면 새로고침 시도
-            setTimeout(() => {
-                if (rfb) {
-                    try {
-                        // 마우스 클릭으로 화면 새로고침 유도
-                        canvas.dispatchEvent(new MouseEvent('click', {
-                            clientX: canvas.width / 2,
-                            clientY: canvas.height / 2,
-                            bubbles: true
-                        }));
-                    } catch(e) {
-                        console.log('화면 새로고침 실패:', e.message);
-                    }
-                }
-            }, 200);
-        }
-        
-        // 클립보드 이벤트
-        function onClipboard(e) {
-            console.log('VNC 클립보드:', e.detail.text);
-        }
-        
         // 상태 표시
         function showStatus(title, message, type = 'info') {
             statusDiv.innerHTML = `
@@ -328,35 +207,6 @@
             statusDiv.style.display = 'block';
         }
         
-        // Canvas 크기 조정
-        function resizeCanvas() {
-            if (rfb && isConnected) {
-                console.log('Canvas 크기 조정 시작');
-                
-                // Canvas 표시
-                canvas.style.display = 'block';
-                
-                // noVNC가 자동으로 Canvas 크기를 관리하도록 설정
-                rfb.scaleViewport = true;
-                rfb.clipViewport = false;
-                rfb.resizeSession = false;
-                
-                console.log('Canvas 설정 완료:', {
-                    scaleViewport: rfb.scaleViewport,
-                    clipViewport: rfb.clipViewport,
-                    resizeSession: rfb.resizeSession
-                });
-                
-                // 포커스 활성화
-                setTimeout(() => {
-                    if (rfb) {
-                        rfb.focus();
-                        console.log('VNC 화면 포커스 완료');
-                    }
-                }, 100);
-            }
-        }
-        
         // 전체화면
         document.getElementById('fullscreen-btn').onclick = function() {
             if (document.fullscreenElement) {
@@ -379,70 +229,7 @@
         // Ctrl+Alt+Del 전송
         document.getElementById('ctrl-alt-del-btn').onclick = function() {
             if (rfb && isConnected) {
-                console.log('Ctrl+Alt+Del 전송 시도...');
                 rfb.sendCtrlAltDel();
-                
-                // 화면 활성화 시도
-                setTimeout(() => {
-                    if (rfb) {
-                        rfb.focus();
-                        
-                        // 키보드 입력으로 화면 활성화
-                        try {
-                            rfb.sendKey(0xFF0D, '', true); // Enter 키 누름
-                            setTimeout(() => rfb.sendKey(0xFF0D, '', false), 50); // Enter 키 뗌
-                            setTimeout(() => {
-                                rfb.sendKey(0x0020, '', true); // Space 키 누름
-                                setTimeout(() => rfb.sendKey(0x0020, '', false), 50); // Space 키 뗌
-                            }, 100);
-                        } catch(e) {
-                            console.log('Ctrl+Alt+Del 후 키보드 이벤트 실패:', e.message);
-                        }
-                        
-                        console.log('화면 활성화 시도 완료');
-                    }
-                }, 500);
-            } else {
-                console.log('VNC 연결되지 않음 - Ctrl+Alt+Del 실패');
-            }
-        };
-        
-        // 화면 활성화
-        document.getElementById('wake-screen-btn').onclick = function() {
-            if (rfb && isConnected) {
-                console.log('화면 활성화 버튼 클릭 - 절전모드 해제 시도');
-                
-                // 먼저 Canvas 크기 강제 조정
-                forceCanvasResize();
-                
-                // 키보드 입력으로 화면 활성화
-                setTimeout(() => {
-                    try {
-                        rfb.sendKey(0x0020, '', true); // Space 누름
-                        setTimeout(() => rfb.sendKey(0x0020, '', false), 50); // Space 뗌
-                        setTimeout(() => {
-                            rfb.sendKey(0xFF0D, '', true); // Enter 누름
-                            setTimeout(() => rfb.sendKey(0xFF0D, '', false), 50); // Enter 뗌
-                        }, 100);
-                        setTimeout(() => {
-                            rfb.sendKey(0x0020, '', true); // Space 누름 (다시)
-                            setTimeout(() => rfb.sendKey(0x0020, '', false), 50); // Space 뗌
-                        }, 200);
-                    } catch(e) {
-                        console.log('화면 활성화 키보드 이벤트 실패:', e.message);
-                    }
-                }, 300);
-                
-                // 3. Canvas 포커스
-                setTimeout(() => {
-                    rfb.focus();
-                    const canvas = document.getElementById('vnc-canvas');
-                    canvas.click();
-                }, 500);
-                
-                console.log('화면 활성화 시퀀스 완료');
-            } else {
-                console.log('VNC 연결되지 않음 - 화면 활성화 실패');
             }
         };
         
@@ -457,12 +244,6 @@
         // 페이지 로드 후 연결 시작 (ES6 모듈은 즉시 사용 가능)
         document.addEventListener('DOMContentLoaded', function() {
             console.log('DOM 로드 완료, VNC 연결 시작...');
-            
-            // VM 상태에 따른 안내
-            if (vmStatus !== 'running') {
-                showStatus('⚠️ VM 상태 확인', `VM이 현재 ${vmStatus} 상태입니다. 화면이 나타나지 않을 수 있습니다.`, 'warning');
-            }
-            
             setTimeout(connectVNC, 1000);
         });
         
@@ -472,16 +253,6 @@
                 rfb.disconnect();
             }
         });
-        
-        // 창 크기 변경 시 Canvas 크기 조정
-        window.addEventListener('resize', function() {
-            if (isConnected) {
-                setTimeout(() => {
-                    forceCanvasResize();
-                    resizeCanvas();
-                }, 100);
-            }
-        });
     </script>
 </body>
 </html>

farmq-admin/templates/vnc_simple.html

@@ -1,222 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ vm_name }} - VNC 콘솔</title>
-    
-    <style>
-        body {
-            margin: 0;
-            background-color: dimgrey;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-        html {
-            height: 100%;
-        }
-
-        #top_bar {
-            background-color: #6e84a3;
-            color: white;
-            font: bold 12px Helvetica;
-            padding: 6px 5px 4px 5px;
-            border-bottom: 1px outset;
-        }
-        #status {
-            text-align: center;
-        }
-        #sendCtrlAltDelButton {
-            position: fixed;
-            top: 0px;
-            right: 120px;
-            border: 1px outset;
-            padding: 5px 5px 4px 5px;
-            cursor: pointer;
-        }
-        
-        #refreshTicketButton {
-            position: fixed;
-            top: 0px;
-            right: 0px;
-            border: 1px outset;
-            padding: 5px 5px 4px 5px;
-            cursor: pointer;
-            background-color: #5bc0de;
-        }
-
-        #screen {
-            flex: 1;
-            overflow: hidden;
-        }
-    </style>
-
-    <script type="module" crossorigin="anonymous">
-        // RFB holds the API to connect and communicate with a VNC server
-        import RFB from '/static/novnc/core/rfb.js';
-
-        let rfb;
-        let desktopName;
-
-        // HTML 엔티티 디코딩 함수
-        function decodeHtmlEntities(text) {
-            const textarea = document.createElement('textarea');
-            textarea.innerHTML = text;
-            return textarea.value;
-        }
-
-        // When this function is called we have
-        // successfully connected to a server
-        function connectedToServer(e) {
-            status("Connected to " + desktopName);
-        }
-
-        // This function is called when we are disconnected
-        function disconnectedFromServer(e) {
-            if (e.detail.clean) {
-                status("Disconnected");
-            } else {
-                status("Something went wrong, connection is closed");
-            }
-        }
-
-        // When this function is called, the server requires
-        // credentials to authenticate
-        function credentialsAreRequired(e) {
-            console.log('VNC 인증 정보가 필요합니다. 티켓을 새로고침합니다...');
-            refreshVNCTicket();
-        }
-
-        // VNC 보안 실패 시 티켓 새로고침
-        function onSecurityFailure(e) {
-            console.log('VNC 보안 인증 실패:', e.detail);
-            status("Authentication failed - refreshing ticket...");
-            refreshVNCTicket();
-        }
-
-        // VNC 티켓 새로고침
-        function refreshVNCTicket() {
-            const sessionId = window.location.pathname.split('/').pop();
-            
-            fetch(`/api/vnc/refresh/${sessionId}`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                }
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    console.log('✅ 새 VNC 티켓 받음, 재연결 시도...');
-                    status("Got new ticket - reconnecting...");
-                    
-                    // 기존 연결 종료
-                    if (rfb) {
-                        rfb.disconnect();
-                    }
-                    
-                    // 잠시 후 새 티켓으로 재연결
-                    setTimeout(() => {
-                        connectWithNewTicket(data.websocket_url, data.password);
-                    }, 1000);
-                } else {
-                    status("Failed to refresh ticket: " + (data.error || 'Unknown error'));
-                }
-            })
-            .catch(error => {
-                console.error('티켓 새로고침 실패:', error);
-                status("Failed to refresh ticket");
-            });
-        }
-
-        // 새 티켓으로 재연결
-        function connectWithNewTicket(newWebsocketUrl, newPassword) {
-            console.log('새 티켓으로 VNC 재연결 시도...');
-            status("Reconnecting with new ticket...");
-            
-            const decodedUrl = decodeHtmlEntities(newWebsocketUrl);
-            const decodedPassword = decodeHtmlEntities(newPassword);
-            
-            console.log('새 WebSocket URL:', decodedUrl);
-            console.log('새 VNC Password:', decodedPassword);
-            
-            // 새 RFB 연결 생성
-            rfb = new RFB(document.getElementById('screen'), decodedUrl,
-                          { credentials: { password: decodedPassword } });
-
-            // 이벤트 리스너 재등록
-            rfb.addEventListener("connect", connectedToServer);
-            rfb.addEventListener("disconnect", disconnectedFromServer);
-            rfb.addEventListener("credentialsrequired", credentialsAreRequired);
-            rfb.addEventListener("desktopname", updateDesktopName);
-            rfb.addEventListener("securityfailure", onSecurityFailure);
-
-            // 설정 적용
-            rfb.viewOnly = false;
-            rfb.scaleViewport = true;
-        }
-
-        // When this function is called we have received
-        // a desktop name from the server
-        function updateDesktopName(e) {
-            desktopName = e.detail.name;
-        }
-
-        // Since most operating systems will catch Ctrl+Alt+Del
-        // before they get a chance to be intercepted by the browser,
-        // we provide a way to emulate this key sequence.
-        function sendCtrlAltDel() {
-            rfb.sendCtrlAltDel();
-            return false;
-        }
-
-        // Show a status text in the top bar
-        function status(text) {
-            document.getElementById('status').textContent = text;
-        }
-
-        document.getElementById('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
-        document.getElementById('refreshTicketButton').onclick = function() {
-            refreshVNCTicket();
-        };
-
-        // VNC 연결 정보 (서버에서 전달)
-        const rawWebsocketUrl = '{{ websocket_url|safe }}';
-        const websocketUrl = decodeHtmlEntities(rawWebsocketUrl);
-        const rawPassword = '{{ password|safe }}';
-        const vncPassword = decodeHtmlEntities(rawPassword);
-
-        console.log('WebSocket URL:', websocketUrl);
-        console.log('VNC Password:', vncPassword);
-
-        status("Connecting");
-
-        // Creating a new RFB object will start a new connection
-        rfb = new RFB(document.getElementById('screen'), websocketUrl,
-                      { credentials: { password: vncPassword } });
-
-        // Add listeners to important events from the RFB module
-        rfb.addEventListener("connect", connectedToServer);
-        rfb.addEventListener("disconnect", disconnectedFromServer);
-        rfb.addEventListener("credentialsrequired", credentialsAreRequired);
-        rfb.addEventListener("desktopname", updateDesktopName);
-        rfb.addEventListener("securityfailure", onSecurityFailure);
-
-        // Set parameters that can be changed on an active connection
-        rfb.viewOnly = false;
-        rfb.scaleViewport = true;
-    </script>
-</head>
-
-<body>
-    <div id="top_bar">
-        <div id="status">Loading</div>
-        <div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
-        <div id="refreshTicketButton">🔄 Refresh</div>
-    </div>
-    <div id="screen">
-        <!-- This is where the remote screen will appear -->
-    </div>
-</body>
-</html>