From 2c8c3d14cdb0cfc6a6bd33400be9c88957b4b4ba Mon Sep 17 00:00:00 2001
From: pbao9 <pbao.business@gmail.com>
Date: Mon, 2 Mar 2026 00:27:18 +0700
Subject: [PATCH] feat: Implement VM console with dedicated layout, WMKS
 integration, and jQuery 3 compatibility.

---
 app/Http/Services/vCenter.php                 |  4 +-
 .../vCenter/PowerManagementService.php        |  4 +-
 config/assets.php                             |  1 -
 package.json                                  |  2 +-
 .../administrator/layout/console.blade.php    | 99 +++++++++++++++++++
 .../administrator/pages/vm_console.blade.php  | 17 ++--
 test-console-ticket.php                       | 25 +++++
 7 files changed, 137 insertions(+), 15 deletions(-)
 create mode 100644 resources/views/administrator/layout/console.blade.php
 create mode 100644 test-console-ticket.php

diff --git a/app/Http/Services/vCenter.php b/app/Http/Services/vCenter.php
index 5e5c90f..d258e2c 100644
--- a/app/Http/Services/vCenter.php
+++ b/app/Http/Services/vCenter.php
@@ -1461,11 +1461,9 @@ PS;
                     "type" => "WEBMKS"
                 ])->json();
             if (!isset($response['error_type'])) {
-                $start = strpos($response['ticket'], '/ticket/');
-                $ticket = str_replace('/ticket/', '', substr($response['ticket'], $start));
                 return [
                     'error' => false,
-                    'data' => $ticket
+                    'data' => $response['ticket']
                 ];
             }
             return [
diff --git a/app/Http/Services/vCenter/PowerManagementService.php b/app/Http/Services/vCenter/PowerManagementService.php
index ba6c1f8..ed28d21 100644
--- a/app/Http/Services/vCenter/PowerManagementService.php
+++ b/app/Http/Services/vCenter/PowerManagementService.php
@@ -158,11 +158,9 @@ class PowerManagementService
                     "type" => "WEBMKS"
                 ])->json();
             if (!isset($response['error_type'])) {
-                $start = strpos($response['ticket'], '/ticket/');
-                $ticket = str_replace('/ticket/', '', substr($response['ticket'], $start));
                 return [
                     'error' => false,
-                    'data' => $ticket
+                    'data' => $response['ticket']
                 ];
             }
             return [
diff --git a/config/assets.php b/config/assets.php
index d4fe0c0..d4c4118 100644
--- a/config/assets.php
+++ b/config/assets.php
@@ -7,7 +7,6 @@ return [
         ],
         'js' => [
             'resources/js/app-vite.js',
-            // 'build/plugins/jquery/jquery.min.js',
             'resources/js/pages/template.js',
         ],
     ],
diff --git a/package.json b/package.json
index f37906b..9c8b581 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
         "fullcalendar": "^6.1.20",
         "inputmask": "^5.0.9",
         "javascript-obfuscator": "^4.1.1",
-        "jquery": "^4.0.0",
+        "jquery": "3.6.0",
         "jquery-mousewheel": "^3.2.2",
         "jquery-sparkline": "^2.4.0",
         "jquery-steps": "^1.1.0",
diff --git a/resources/views/administrator/layout/console.blade.php b/resources/views/administrator/layout/console.blade.php
new file mode 100644
index 0000000..d51ab70
--- /dev/null
+++ b/resources/views/administrator/layout/console.blade.php
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="description"
+        content="Thế Giới Số cung cấp dịch vụ thiết kế website, phát triển ứng dụng, phân tích dữ liệu, triển khai & quản lý server, VPS, dedicated, email hosting và hệ thống portal quản lý dịch vụ cho doanh nghiệp.">
+
+    <meta name="author" content="Thế Giới Số">
+
+    <meta name="keywords"
+        content="thế giới số, thiết kế website, phát triển ứng dụng, phân tích dữ liệu, vps, hosting, dedicated server, email hosting, quản trị server, portal dịch vụ, laravel, nextjs, cloud, hạ tầng CNTT">
+
+    <title>Thế Giới Số Admin | VM Console</title>
+
+    <script>
+        (function() {
+            const theme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ?
+                'dark' : 'light');
+            document.documentElement.setAttribute('data-bs-theme', theme);
+        })();
+    </script>
+
+    <!-- CSRF Token -->
+    <meta name="_token" content="{{ csrf_token() }}">
+
+    <link rel="shortcut icon" href="{{ asset('/images/favi.svg') }}">
+
+    <!-- Static CSS — no jQuery dependency -->
+    @foreach (config('assets.static.css') as $css)
+        <link href="{{ asset($css) }}" rel="stylesheet" />
+    @endforeach
+
+    @stack('plugin-styles')
+
+    <!-- Vite CSS only — intentionally excludes Vite JS bundle (which carries jQuery 4) -->
+    @vite(config('assets.vite.css'))
+
+    @stack('style')
+
+    <!--
+        jQuery 3 — loaded here in <head> for WMKS compatibility.
+        WMKS (wmks.min.js) requires jQuery 3.x; jQuery 4 removed $.now()
+        which WMKS depends on via jQuery UI.
+        The main admin layout uses jQuery 4 via Vite — never load both on the same page.
+    -->
+    <script src="{{ asset('lib/jquery/jquery.min.js') }}"></script>
+    <script src="{{ asset('lib/jquery-ui/jquery-ui.min.js') }}"></script>
+</head>
+
+<body data-base-url="{{ url('/') }}">
+    <div class="main-wrapper" id="app">
+        @include('administrator.layout.partials.sidebar')
+        <div class="page-wrapper">
+            @include('administrator.layout.partials.header')
+            <div class="page-content">
+                <div class="card mb-4 bg-white rounded-4 shadow-none">
+                    <div class="card-body p-3">
+                        @yield('breadcrumb')
+                        @yield('tab')
+                    </div>
+                </div>
+                @yield('content')
+            </div>
+            @include('administrator.layout.partials.footer')
+        </div>
+    </div>
+
+    <!--
+        UI scripts — Bootstrap, Lucide, PerfectScrollbar are vanilla JS,
+        no jQuery 4 dependency. Select2 and DataTables are intentionally
+        excluded (they require jQuery and are not needed on the console page).
+    -->
+    <script src="{{ asset('build/plugins/bootstrap/bootstrap.bundle.min.js') }}"></script>
+    <script src="{{ asset('build/plugins/lucide/lucide.min.js') }}"></script>
+    <script src="{{ asset('build/plugins/perfect-scrollbar/perfect-scrollbar.min.js') }}"></script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            if (typeof lucide !== 'undefined') {
+                lucide.createIcons();
+            }
+            var sidebarBody = document.querySelector('.sidebar-body');
+            if (sidebarBody && typeof PerfectScrollbar !== 'undefined') {
+                new PerfectScrollbar(sidebarBody);
+            }
+        });
+    </script>
+
+    @stack('plugin-scripts')
+
+    @include('administrator.layout.partials.toast')
+
+    @stack('custom-scripts')
+</body>
+
+</html>
diff --git a/resources/views/administrator/pages/vm_console.blade.php b/resources/views/administrator/pages/vm_console.blade.php
index 4549927..71e03ce 100644
--- a/resources/views/administrator/pages/vm_console.blade.php
+++ b/resources/views/administrator/pages/vm_console.blade.php
@@ -1,4 +1,4 @@
-@extends('administrator.layout.master')
+@extends('administrator.layout.console')
 
 @push('style')
     <link rel="stylesheet" href="{{ asset('lib/wmks/css/wmks-all.css') }}">
@@ -161,10 +161,8 @@ $breadcrumbItems = [
         </div>
     </div>
 
-    <script src="{{ asset('lib/jquery/jquery.min.js') }}"></script>
-    <script src="{{ asset('lib/jquery-ui/jquery-ui.min.js') }}"></script>
+    {{-- jQuery 3 and jQuery UI are loaded in administrator.layout.console <head> --}}
     <script src="{{ asset('lib/wmks/wmks.min.js') }}"></script>
-    <script src="{{ asset('lib/wmks/wmks-sdk-example.js') }}"></script>
 
     <script type="text/javascript">
         let loadingSteps = [
@@ -238,10 +236,16 @@ $breadcrumbItems = [
         let WMKSContainer = $('#wmksContainer');
         var wmks = WMKS.createWMKS("wmksContainer", {})
             .register(WMKS.CONST.Events.CONNECTION_STATE_CHANGE, function(event, data) {
+                console.log("WMKS state:", data.state, data);
                 if (data.state === WMKS.CONST.ConnectionState.CONNECTED) {
-                    console.log("connection state change : connected");
                     hideLoadingAndShowConsole();
+                } else if (data.state === WMKS.CONST.ConnectionState.DISCONNECTED) {
+                    showErrorState('{{ __('Mất kết nối WebSocket') }} (code: ' + data.code + ', reason: ' + data.reason + ')');
                 }
+            })
+            .register(WMKS.CONST.Events.ERROR, function(event, data) {
+                console.error("WMKS error:", data);
+                showErrorState('{{ __('Lỗi WMKS') }}: ' + (data.errorType || JSON.stringify(data)));
             });
 
         const getTicket = new Promise((resolve, reject) => {
@@ -275,8 +279,7 @@ $breadcrumbItems = [
             .then(result => {
                 if (result !== false) {
                     updateConnectionStatus('{{ __('Đang kết nối đến Console...') }}');
-                    const wmksHost = '{{ config('vmware.wmks_host', '10.10.10.120') }}';
-                    wmks.connect(`wss://${wmksHost}/ticket/${result.data}`);
+                    wmks.connect(result.data);
                 }
             })
             .catch(error => {
diff --git a/test-console-ticket.php b/test-console-ticket.php
new file mode 100644
index 0000000..77a2ec8
--- /dev/null
+++ b/test-console-ticket.php
@@ -0,0 +1,25 @@
+<?php
+require __DIR__.'/vendor/autoload.php';
+$app = require_once __DIR__.'/bootstrap/app.php';
+$app->make(\Illuminate\Contracts\Console\Kernel::class)->bootstrap();
+
+$vCenter = app(\App\Http\Services\vCenter::class);
+$vm = \App\Models\VirtualMachines::with('datacenter.vCenter')->first();
+
+if (!$vm) {
+    echo "No VM found\n";
+    exit;
+}
+
+$vcenter_model = $vm->datacenter->vCenter;
+echo "Logging in to vCenter: " . $vcenter_model->host . "\n";
+$loggedIn = $vCenter->loginServer($vcenter_model);
+
+if (!$loggedIn) {
+    echo "Failed to login to vCenter\n";
+    exit;
+}
+echo "Logged in successfully\n";
+
+$ticket = $vCenter->GetConsoleTickets($vm->vm_id);
+print_r($ticket);