feat: Implement docker monitoring dashboard

2025-06-30 23:05:45 +07:00
parent 691cd4f298
commit 0b029dc914
13 changed files with 1583 additions and 0 deletions
@@ -0,0 +1,172 @@
+
+import { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { useTheme } from "@/contexts/ThemeContext";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { useSidebar } from "@/contexts/SidebarContext";
+import { Sidebar } from "@/components/dashboard/Sidebar";
+import { Header } from "@/components/dashboard/Header";
+import { DockerStatsCards } from "@/components/docker/DockerStatsCards";
+import { DockerContainersTable } from "@/components/docker/DockerContainersTable";
+import { dockerService } from "@/services/dockerService";
+import { DockerContainer, DockerStats } from "@/types/docker.types";
+import { authService } from "@/services/authService";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+
+const ContainerMonitoring = () => {
+  const { serverId } = useParams();
+  const navigate = useNavigate();
+  const { theme } = useTheme();
+  const { t } = useLanguage();
+  const { sidebarCollapsed, toggleSidebar } = useSidebar();
+  const [stats, setStats] = useState<DockerStats>({
+    total: 0,
+    running: 0,
+    stopped: 0,
+    warning: 0
+  });
+  const [currentUser, setCurrentUser] = useState(authService.getCurrentUser());
+
+  console.log('ContainerMonitoring component loaded with serverId:', serverId);
+
+  const {
+    data: containers = [],
+    isLoading,
+    error,
+    refetch
+  } = useQuery({
+    queryKey: ['docker-containers', serverId],
+    queryFn: () => {
+      console.log('Query function called with serverId:', serverId);
+      return serverId ? dockerService.getContainersByServerId(serverId) : dockerService.getContainers();
+    },
+    refetchInterval: 30000 // Refetch every 30 seconds
+  });
+
+  console.log('Query state:', { containers, isLoading, error });
+
+  useEffect(() => {
+    console.log('Containers changed:', containers);
+    if (containers.length > 0) {
+      dockerService.getContainerStats(containers).then(newStats => {
+        console.log('Stats calculated:', newStats);
+        setStats(newStats);
+      });
+    }
+  }, [containers]);
+
+  const handleRefresh = () => {
+    console.log('Manual refresh triggered');
+    refetch();
+  };
+
+  const handleLogout = () => {
+    authService.logout();
+    navigate('/login');
+  };
+
+  const handleBackToServers = () => {
+    navigate('/instance-monitoring');
+  };
+
+  if (error) {
+    console.error('Container monitoring error:', error);
+    return (
+      <div className={`min-h-screen flex ${theme === 'dark' ? 'bg-[#0a0a0a] text-white' : 'bg-gray-50 text-gray-900'}`}>
+        <Sidebar collapsed={sidebarCollapsed} />
+        <div className="flex-1 flex flex-col min-w-0">
+          <Header 
+            currentUser={currentUser} 
+            onLogout={handleLogout} 
+            sidebarCollapsed={sidebarCollapsed} 
+            toggleSidebar={toggleSidebar} 
+          />
+          <main className="flex-1 flex flex-col items-center justify-center p-4 sm:p-6">
+            <div className="text-center max-w-md w-full">
+              <h2 className="text-xl sm:text-2xl font-bold mb-4">Error loading containers</h2>
+              <p className="text-muted-foreground mb-4 text-sm sm:text-base">
+                Unable to fetch container data. Please check your connection and try again.
+              </p>
+              <div className="text-xs text-muted-foreground mb-4 font-mono">
+                Error: {error?.message || 'Unknown error'}
+              </div>
+              <div className="flex gap-2 justify-center">
+                <Button onClick={handleRefresh} className="text-sm sm:text-base">
+                  Retry
+                </Button>
+                <Button onClick={handleBackToServers} variant="outline" className="text-sm sm:text-base">
+                  Back to Servers
+                </Button>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`min-h-screen flex ${theme === 'dark' ? 'bg-[#0a0a0a] text-white' : 'bg-gray-50 text-gray-900'}`}>
+      <Sidebar collapsed={sidebarCollapsed} />
+      <div className="flex-1 flex flex-col min-w-0">
+        <Header 
+          currentUser={currentUser} 
+          onLogout={handleLogout} 
+          sidebarCollapsed={sidebarCollapsed} 
+          toggleSidebar={toggleSidebar} 
+        />
+        <main className="flex-1 overflow-auto">
+          <div className="mx-[20px] my-[20px]">
+            {/* Header Section */}
+            <div className="mb-6 lg:mb-8">
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-3 mb-2">
+                    <Button
+                      onClick={handleBackToServers}
+                      variant="outline"
+                      size="sm"
+                      className="flex items-center gap-2"
+                    >
+                      <ArrowLeft className="h-4 w-4" />
+                      Back to Servers
+                    </Button>
+                  </div>
+                  <h1 className="text-2xl font-bold text-foreground">
+                    Container Monitoring
+                  </h1>
+                  <p className={`text-muted-foreground mt-1 sm:mt-2 transition-all duration-300 ${sidebarCollapsed ? 'text-base sm:text-lg' : 'text-sm sm:text-base'}`}>
+                    Monitor and manage your Docker containers in real-time
+                    {serverId && (
+                      <span className="block text-xs text-muted-foreground/70 mt-1">
+                        Server ID: {serverId}
+                      </span>
+                    )}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Stats Cards Section */}
+            <div className="mb-6 lg:mb-8">
+              <DockerStatsCards stats={stats} />
+            </div>
+            
+            {/* Containers Table Section */}
+            <div className="min-w-0">
+              <DockerContainersTable 
+                containers={containers} 
+                isLoading={isLoading} 
+                onRefresh={handleRefresh} 
+              />
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default ContainerMonitoring;