refactor: Replace iframe with dynamic console opening for VNC and Xterm views

This commit is contained in:
2026-02-27 16:14:24 -05:00
parent eb8ee00f69
commit e6b29a4871
2 changed files with 28 additions and 2 deletions

View File

@@ -1,7 +1,20 @@
<x-proxmox::layout :server="$server" view="vnc" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
@if($vnc)
<iframe src="{{ $vnc }}" class="w-full min-h-[800px] border-0" height="800px"></iframe>
<div x-data x-init="window.open('{{ $vnc }}', '_blank')" class="flex flex-col items-center justify-center p-12 gap-4">
<svg class="w-12 h-12 text-primary/60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
</svg>
<p class="text-lg font-semibold">NoVNC Console</p>
<p class="text-sm text-base/50">The console has been opened in a new tab.</p>
<a href="{{ $vnc }}" target="_blank" rel="noopener"
class="mt-2 inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border border-neutral hover:bg-background-secondary/50 transition-colors">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
</svg>
Open Console Again
</a>
</div>
@else
<div class="flex items-center justify-center p-8 text-base/50">
<span>Unable to connect to VNC console. Please try again later.</span>

View File

@@ -1,7 +1,20 @@
<x-proxmox::layout :server="$server" view="xterm" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
@if($xterm)
<iframe src="{{ $xterm }}" class="w-full min-h-[800px] border-0" height="800px"></iframe>
<div x-data x-init="window.open('{{ $xterm }}', '_blank')" class="flex flex-col items-center justify-center p-12 gap-4">
<svg class="w-12 h-12 text-primary/60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
</svg>
<p class="text-lg font-semibold">Xterm.js Console</p>
<p class="text-sm text-base/50">The console has been opened in a new tab.</p>
<a href="{{ $xterm }}" target="_blank" rel="noopener"
class="mt-2 inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border border-neutral hover:bg-background-secondary/50 transition-colors">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
</svg>
Open Console Again
</a>
</div>
@else
<div class="flex items-center justify-center p-8 text-base/50">
<span>Unable to connect to console. Please try again later.</span>