Update terminal modal

This commit is contained in:
MacRimi
2026-01-31 18:10:55 +01:00
parent 82cac690fa
commit d2c7362736
2 changed files with 60 additions and 133 deletions

View File

@@ -12,7 +12,6 @@ import {
ArrowRight, ArrowRight,
CornerDownLeft, CornerDownLeft,
GripHorizontal, GripHorizontal,
X,
} from "lucide-react" } from "lucide-react"
import "xterm/css/xterm.css" import "xterm/css/xterm.css"
import { API_PORT } from "@/lib/api-config" import { API_PORT } from "@/lib/api-config"
@@ -24,9 +23,9 @@ interface LxcTerminalModalProps {
vmName: string vmName: string
} }
function getWebSocketUrl(vmid: number): string { function getWebSocketUrl(): string {
if (typeof window === "undefined") { if (typeof window === "undefined") {
return `ws://localhost:8008/ws/terminal/lxc/${vmid}` return "ws://localhost:8008/ws/terminal"
} }
const { protocol, hostname, port } = window.location const { protocol, hostname, port } = window.location
@@ -34,9 +33,9 @@ function getWebSocketUrl(vmid: number): string {
const wsProtocol = protocol === "https:" ? "wss:" : "ws:" const wsProtocol = protocol === "https:" ? "wss:" : "ws:"
if (isStandardPort) { if (isStandardPort) {
return `${wsProtocol}//${hostname}/ws/terminal/lxc/${vmid}` return `${wsProtocol}//${hostname}/ws/terminal`
} else { } else {
return `${wsProtocol}//${hostname}:${API_PORT}/ws/terminal/lxc/${vmid}` return `${wsProtocol}//${hostname}:${API_PORT}/ws/terminal`
} }
} }
@@ -55,12 +54,21 @@ export function LxcTerminalModal({
const [connectionStatus, setConnectionStatus] = useState<"connecting" | "online" | "offline">("connecting") const [connectionStatus, setConnectionStatus] = useState<"connecting" | "online" | "offline">("connecting")
const [isMobile, setIsMobile] = useState(false) const [isMobile, setIsMobile] = useState(false)
const [isTablet, setIsTablet] = useState(false) const [isTablet, setIsTablet] = useState(false)
const isInsideLxcRef = useRef(false)
const outputBufferRef = useRef<string>("")
const [modalHeight, setModalHeight] = useState(500) const [modalHeight, setModalHeight] = useState(500)
const [isResizing, setIsResizing] = useState(false) const [isResizing, setIsResizing] = useState(false)
const resizeBarRef = useRef<HTMLDivElement>(null) const resizeBarRef = useRef<HTMLDivElement>(null)
const modalHeightRef = useRef(500) const modalHeightRef = useRef(500)
const [showLoginModal, setShowLoginModal] = useState(false)
const [loginUsername, setLoginUsername] = useState("")
const [loginPassword, setLoginPassword] = useState("")
const [loginError, setLoginError] = useState("")
const [isLoggingIn, setIsLoggingIn] = useState(false)
const waitingForPasswordRef = useRef(false)
// Detect mobile/tablet // Detect mobile/tablet
useEffect(() => { useEffect(() => {
const checkDevice = () => { const checkDevice = () => {
@@ -89,6 +97,8 @@ export function LxcTerminalModal({
termRef.current = null termRef.current = null
} }
setConnectionStatus("connecting") setConnectionStatus("connecting")
isInsideLxcRef.current = false
outputBufferRef.current = ""
} }
}, [isOpen]) }, [isOpen])
@@ -156,11 +166,15 @@ export function LxcTerminalModal({
termRef.current = term termRef.current = term
fitAddonRef.current = fitAddon fitAddonRef.current = fitAddon
// Connect WebSocket - direct connection to LXC container // Connect WebSocket to host terminal
const wsUrl = getWebSocketUrl(vmid) const wsUrl = getWebSocketUrl()
const ws = new WebSocket(wsUrl) const ws = new WebSocket(wsUrl)
wsRef.current = ws wsRef.current = ws
// Reset state for new connection
isInsideLxcRef.current = false
outputBufferRef.current = ""
ws.onopen = () => { ws.onopen = () => {
setConnectionStatus("online") setConnectionStatus("online")
@@ -182,14 +196,13 @@ export function LxcTerminalModal({
cols: term.cols, cols: term.cols,
rows: term.rows, rows: term.rows,
})) }))
}
ws.onmessage = (event) => { // Auto-execute pct enter after connection is ready
// Filter out pong responses setTimeout(() => {
if (event.data === '{"type": "pong"}' || event.data === '{"type":"pong"}') { if (ws.readyState === WebSocket.OPEN) {
return ws.send(`pct enter ${vmid}\r`)
} }
term.write(event.data) }, 300)
} }
ws.onerror = () => { ws.onerror = () => {
@@ -210,6 +223,38 @@ export function LxcTerminalModal({
ws.send(data) ws.send(data)
} }
}) })
ws.onmessage = (event) => {
// Filter out pong responses
if (event.data === '{"type": "pong"}' || event.data === '{"type":"pong"}') {
return
}
// Buffer output until we detect we're inside the LXC
// pct enter always enters directly without login prompt when run as root
if (!isInsideLxcRef.current) {
outputBufferRef.current += event.data
// Detect when we're inside the LXC container
// Look for shell prompt pattern after pct enter command
const afterPctEnter = outputBufferRef.current.split(`pct enter ${vmid}`).pop() || ""
if (afterPctEnter.includes("@") && (afterPctEnter.includes("$") || afterPctEnter.includes("#") || afterPctEnter.includes(":~") || afterPctEnter.includes(":/#"))) {
// Successfully inside LXC
isInsideLxcRef.current = true
// Extract content after pct enter (skip command echo line)
const newlineIndex = afterPctEnter.indexOf('\n')
if (newlineIndex !== -1) {
const lxcContent = afterPctEnter.substring(newlineIndex + 1)
term.write(lxcContent)
}
return
}
} else {
// Already inside LXC, write directly
term.write(event.data)
}
}
} }
return () => { return () => {

View File

@@ -250,124 +250,6 @@ def terminal_websocket(ws):
if session_id in active_sessions: if session_id in active_sessions:
del active_sessions[session_id] del active_sessions[session_id]
@sock.route('/ws/terminal/lxc/<int:vmid>')
def lxc_terminal_websocket(ws, vmid):
"""WebSocket endpoint for direct LXC container terminal sessions"""
# Create pseudo-terminal
master_fd, slave_fd = pty.openpty()
# Start pct enter directly to connect to the LXC container
# pct is located in /usr/sbin on Proxmox VE
shell_process = subprocess.Popen(
['/usr/sbin/pct', 'enter', str(vmid)],
stdin=slave_fd,
stdout=slave_fd,
stderr=slave_fd,
preexec_fn=os.setsid,
cwd='/',
env=dict(os.environ, TERM='xterm-256color')
)
session_id = id(ws)
active_sessions[session_id] = {
'process': shell_process,
'master_fd': master_fd,
'vmid': vmid
}
# Set non-blocking mode for master_fd
flags = fcntl.fcntl(master_fd, fcntl.F_GETFL)
fcntl.fcntl(master_fd, fcntl.F_SETFL, flags | os.O_NONBLOCK)
# Set initial terminal size
set_winsize(master_fd, 30, 120)
# Start thread to read PTY output and forward to WebSocket
output_thread = threading.Thread(
target=read_and_forward_output,
args=(master_fd, ws),
daemon=True
)
output_thread.start()
try:
while True:
data = ws.receive(timeout=None)
if data is None:
break
handled = False
if isinstance(data, str):
try:
msg = json.loads(data)
except Exception:
msg = None
if isinstance(msg, dict):
msg_type = msg.get('type')
if msg_type == 'ping':
try:
ws.send(json.dumps({'type': 'pong'}))
except:
pass
handled = True
elif msg_type == 'resize':
cols = int(msg.get('cols', 120))
rows = int(msg.get('rows', 30))
set_winsize(master_fd, rows, cols)
handled = True
if handled:
continue
if isinstance(data, str) and data.startswith('\x1b[8;'):
try:
parts = data[4:-1].split(';')
rows, cols = int(parts[0]), int(parts[1])
set_winsize(master_fd, rows, cols)
continue
except Exception:
pass
try:
os.write(master_fd, data.encode('utf-8'))
except OSError as e:
print(f"Error writing to LXC PTY: {e}")
break
if shell_process.poll() is not None:
break
except Exception as e:
print(f"LXC terminal session error: {e}")
finally:
try:
shell_process.terminate()
shell_process.wait(timeout=1)
except:
try:
shell_process.kill()
except:
pass
try:
os.close(master_fd)
except:
pass
try:
os.close(slave_fd)
except:
pass
if session_id in active_sessions:
del active_sessions[session_id]
@sock.route('/ws/script/<session_id>') @sock.route('/ws/script/<session_id>')
def script_websocket(ws, session_id): def script_websocket(ws, session_id):
"""WebSocket endpoint for executing scripts with hybrid web mode""" """WebSocket endpoint for executing scripts with hybrid web mode"""