update ui landing page

Author: secus

.env.development

@@ -23,4 +23,4 @@ DOMAIN_SUFFIX=vinhomes.co.uk
 
 # Logging
 RUST_LOG=container_engine=debug,tower_http=debug
-KUBECONFIG_PATH=./k8sConfigTest.yaml
+KUBECONFIG_PATH=./k8sConfig.yaml

.gitignore

@@ -1,5 +1,6 @@
 # Kubernetes config files
 k8sConfig.yaml
+k8sConfigLocal.yaml
 *.kubeconfig
 # Rust
 /target/

…1e5a599793080f2a4b1d07972c0846bbc39.json …4c49339f77fa53bd8e7cc069334b04076c2.json.sqlx/query-ed7ab61477ba129991cfbd2df35a01e5a599793080f2a4b1d07972c0846bbc39.json renamed to .sqlx/query-be6b40cc827174e6838a27a3440734c49339f77fa53bd8e7cc069334b04076c2.json .sqlx/query-ed7ab61477ba129991cfbd2df35a01e5a599793080f2a4b1d07972c0846bbc39.json renamed to .sqlx/query-be6b40cc827174e6838a27a3440734c49339f77fa53bd8e7cc069334b04076c2.json

@@ -34,27 +34,10 @@ api.interceptors.response.use(
   (error) => {
     // Handle network errors
     if (!error.response) {
-      console.error('Network error:', error.message);
-      return Promise.reject(new Error('Network error - please check your connection'));
-    }
-
-    // Handle 401 Unauthorized
-    if (error.response?.status === 401) {
-      localStorage.removeItem('access_token');
-      localStorage.removeItem('user');
-      window.location.href = '/auth';
-    }
-    
-    // Handle 403 Forbidden
-    if (error.response?.status === 403) {
-      console.error('Access forbidden');
-    }
-    
-    // Handle 500 Internal Server Error
-    if (error.response?.status === 500) {
-      console.error('Server error occurred');
-    }
-    
+      const errorMessage = 'Network error - please check your connection';
+      alert(errorMessage);
+      return Promise.reject(new Error(errorMessage));
+    }  
     return Promise.reject(error);
   }
 );

apps/container-engine-frontend/src/api/api.ts

@@ -37,7 +37,7 @@ export default function LogsPage() {
   };
 
   // Load historical logs from API
-  const loadHistoricalLogs = async () => {
+  const loadHistoricalLogs = async (retryCount = 0) => {
     if (!deploymentId) return;
 
     setIsLoadingHistory(true);
@@ -74,6 +74,22 @@ export default function LogsPage() {
         setError('Authentication failed. Please login again.');
       } else if (err?.response?.status === 404) {
         setError('Deployment not found or no logs available.');
+      } else if (err?.response?.status === 400 && err?.response?.data?.message?.includes('ContainerCreating')) {
+        if (retryCount < 10) {
+          setError(`Container is starting up... (Retry ${retryCount + 1}/10)`);
+          setTimeout(() => loadHistoricalLogs(retryCount + 1), 3000);
+          return;
+        } else {
+          setError('Container is taking longer than expected to start. Please refresh manually.');
+        }
+      } else if (err?.response?.status === 400 && err?.response?.data?.message?.includes('waiting to start')) {
+        if (retryCount < 10) {
+          setError(`Container is being created... (Retry ${retryCount + 1}/10)`);
+          setTimeout(() => loadHistoricalLogs(retryCount + 1), 3000);
+          return;
+        } else {
+          setError('Container is taking longer than expected to start. Please refresh manually.');
+        }
       } else {
         setError('Failed to load log history');
       }

apps/container-engine-frontend/src/components/DeploymentDetail/LogsPage.tsx

@@ -176,19 +176,19 @@ const Header: React.FC<{ onMenuClick: () => void }> = ({ onMenuClick }) => {
       <div className="px-4 sm:px-6 py-4">
         <div className="flex justify-between items-center">
           {/* Left side */}
-          <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-2 sm:space-x-4">
             <button
               onClick={onMenuClick}
               className="lg:hidden p-2 rounded-lg hover:bg-slate-100 transition-colors"
             >
               <MenuIcon />
             </button>
 
-            <div>
-              <h1 className="text-xl font-bold text-slate-800">
+            <div className="min-w-0">
+              <h1 className="text-base sm:text-lg lg:text-xl font-bold text-slate-800 truncate">
                 Welcome back, {user?.username || 'User'}! 👋
               </h1>
-              <p className="text-sm text-slate-500">
+              <p className="text-xs sm:text-sm text-slate-500 hidden sm:block">
                 {new Date().toLocaleDateString('vi-VN', { 
                   weekday: 'long', 
                   year: 'numeric', 
@@ -200,13 +200,13 @@ const Header: React.FC<{ onMenuClick: () => void }> = ({ onMenuClick }) => {
           </div>
 
           {/* Right side */}
-          <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-2 sm:space-x-4">
             {/* Search */}
             <div className="hidden md:block relative">
               <input
                 type="text"
                 placeholder="Search..."
-                className="pl-10 pr-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                className="pl-10 pr-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all text-sm"
               />
               <svg className="w-4 h-4 absolute left-3 top-3 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
@@ -220,13 +220,13 @@ const Header: React.FC<{ onMenuClick: () => void }> = ({ onMenuClick }) => {
                 className="relative p-2 rounded-lg hover:bg-slate-100 transition-colors"
               >
                 <BellIcon />
-                <span className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
+                <span className="absolute -top-1 -right-1 w-4 h-4 sm:w-5 sm:h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
                   3
                 </span>
               </button>
 
               {showNotifications && (
-                <div className="absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-lg border border-slate-200 py-2 z-50">
+                <div className="absolute right-0 mt-2 w-72 sm:w-80 bg-white rounded-xl shadow-lg border border-slate-200 py-2 z-50">
                   <div className="px-4 py-2 border-b border-slate-100">
                     <h3 className="font-semibold text-slate-800">Notifications</h3>
                   </div>
@@ -246,7 +246,7 @@ const Header: React.FC<{ onMenuClick: () => void }> = ({ onMenuClick }) => {
             <div className="relative">
               <button
                 onClick={() => setShowProfile(!showProfile)}
-                className="flex items-center space-x-2 p-2 rounded-lg hover:bg-slate-100 transition-colors"
+                className="flex items-center space-x-1 sm:space-x-2 p-2 rounded-lg hover:bg-slate-100 transition-colors"
               >
                 <div className="w-8 h-8 bg-linear-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
                   <span className="text-white font-medium text-sm">
@@ -291,7 +291,7 @@ const DashboardLayout: React.FC<{ children: React.ReactNode }> = ({ children })
         <Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
 
         <main className="flex-1 overflow-auto">
-          <div className="p-6">
+          <div className="p-4 sm:p-6">
             {children}
           </div>
         </main>

apps/container-engine-frontend/src/components/Layout/DashboardLayout.tsx

@@ -1 +1,29 @@
-@import "tailwindcss";
+@import "tailwindcss";
+
+/* Custom animations for magical effects */
+@keyframes blob {
+  0% {
+    transform: translate(0px, 0px) scale(1);
+  }
+  33% {
+    transform: translate(30px, -50px) scale(1.1);
+  }
+  66% {
+    transform: translate(-20px, 20px) scale(0.9);
+  }
+  100% {
+    transform: translate(0px, 0px) scale(1);
+  }
+}
+
+.animate-blob {
+  animation: blob 7s infinite;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}