Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1016 from 190km/style/swarm

Browse Source 
feat: swarm overview style
This commit is contained in:
Mauricio Siu
2024-12-28 19:30:13 -06:00
committed by GitHub
parent 4533b193a4 0c2a382541
commit e9dad8f9f8
4 changed files with 235 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/dokploy/components/dashboard/settings/servers/show-swarm-overview-modal.tsx
View File

@@ -39,11 +39,8 @@ export const ShowSwarmOverviewModal = ({ serverId }: Props) => {
</p> </p>
</div> </div>
</DialogHeader> </DialogHeader>
<div className="grid w-full gap-1"> <div className="grid w-full gap-1">
<div className="flex flex-wrap gap-4 py-4"> <SwarmMonitorCard serverId={serverId} />
<SwarmMonitorCard serverId={serverId} />
</div>
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

231
apps/dokploy/components/dashboard/swarm/details/details-card.tsx
View File

@@ -1,140 +1,127 @@
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { import {
AlertCircle, Box,
CheckCircle, Cpu,
HelpCircle, Database,
Loader2, HardDrive,
LoaderIcon, Loader2,
} from "lucide-react"; } from "lucide-react";
import { ShowNodeApplications } from "../applications/show-applications"; import { ShowNodeApplications } from "../applications/show-applications";
import { ShowNodeConfig } from "./show-node-config"; import { ShowNodeConfig } from "./show-node-config";
export interface SwarmList { export interface SwarmList {
ID: string; ID: string;
Hostname: string; Hostname: string;
Availability: string; Availability: string;
EngineVersion: string; EngineVersion: string;
Status: string; Status: string;
ManagerStatus: string; ManagerStatus: string;
TLSStatus: string; TLSStatus: string;
} }
interface Props { interface Props {
node: SwarmList; node: SwarmList;
serverId?: string; serverId?: string;
} }
export function NodeCard({ node, serverId }: Props) { export function NodeCard({ node, serverId }: Props) {
const { data, isLoading } = api.swarm.getNodeInfo.useQuery({ const { data, isLoading } = api.swarm.getNodeInfo.useQuery({
nodeId: node.ID, nodeId: node.ID,
serverId, serverId,
}); });
const getStatusIcon = (status: string) => {
switch (status) {
case "Ready":
return <CheckCircle className="h-4 w-4 text-green-500" />;
case "Down":
return <AlertCircle className="h-4 w-4 text-red-500" />;
default:
return <HelpCircle className="h-4 w-4 text-yellow-500" />;
}
};
if (isLoading) { if (isLoading) {
return ( return (
<Card className="w-full bg-transparent"> <Card className="w-full bg-background">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center justify-between text-lg"> <CardTitle className="flex items-center justify-between text-lg">
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
{getStatusIcon(node.Status)} {node.Hostname}
{node.Hostname} </span>
</span> <Badge variant="green">
<Badge variant="outline" className="text-xs"> {node.ManagerStatus || "Worker"}
{node.ManagerStatus || "Worker"} </Badge>
</Badge> </CardTitle>
</CardTitle> </CardHeader>
</CardHeader> <CardContent>
<CardContent> <div className="flex items-center justify-center">
<div className="flex items-center justify-center"> <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /> </div>
</div> </CardContent>
</CardContent> </Card>
</Card> );
); }
}
return ( return (
<Card className="w-full bg-transparent"> <Card className="w-full bg-background">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center justify-between"> <CardTitle className="text-lg">Node Status</CardTitle>
<span className="flex items-center gap-2 text-lg"> </CardHeader>
{getStatusIcon(node.Status)} <CardContent>
{node.Hostname} <div className="space-y-6">
</span> <div className="flex flex-wrap items-center justify-between">
<Badge variant="outline" className="text-xs"> <div className="flex items-center space-x-4 p-2 rounded-xl border">
{node.ManagerStatus || "Worker"} <div className={`h-2.5 w-2.5 rounded-full ${node.Status === "Ready" ? "bg-green-500" : "bg-red-500"}`} />
</Badge> <div className="font-medium">{node.Hostname}</div>
</CardTitle> <Badge variant="green">
</CardHeader> {node.ManagerStatus || "Worker"}
<CardContent> </Badge>
<div className="grid gap-2 text-sm"> </div>
<div className="flex justify-between"> <div className="flex flex-wrap items-center space-x-4">
<span className="font-medium">Status:</span> <Badge variant="green" >
<span>{node.Status}</span> TLS Status: {node.TLSStatus}
</div> </Badge>
<div className="flex justify-between"> <Badge variant="blue">
<span className="font-medium">IP Address:</span> Availability: {node.Availability}
{isLoading ? ( </Badge>
<LoaderIcon className="animate-spin" /> </div>
) : ( </div>
<span>{data?.Status?.Addr}</span>
)} <Separator />
</div>
<div className="flex justify-between"> <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<span className="font-medium">Availability:</span> <div className="space-y-2 flex flex-col items-center text-center">
<span>{node.Availability}</span> <div className="flex items-center text-sm text-muted-foreground">
</div> <HardDrive className="mr-2 h-4 w-4" />
<div className="flex justify-between"> Engine Version
<span className="font-medium">Engine Version:</span> </div>
<span>{node.EngineVersion}</span> <div>{node.EngineVersion}</div>
</div> </div>
<div className="flex justify-between"> <div className="space-y-2 flex flex-col items-center text-center">
<span className="font-medium">CPU:</span> <div className="flex items-center text-sm text-muted-foreground">
{isLoading ? ( <Cpu className="mr-2 h-4 w-4" />
<LoaderIcon className="animate-spin" /> CPU
) : ( </div>
<span> <div>{data && (data.Description?.Resources?.NanoCPUs / 1e9).toFixed(2)} Core(s)</div>
{(data?.Description?.Resources?.NanoCPUs / 1e9).toFixed(2)} GHz </div>
</span> <div className="space-y-2 flex flex-col items-center text-center">
)} <div className="flex items-center text-sm text-muted-foreground">
</div> <Database className="mr-2 h-4 w-4" />
<div className="flex justify-between"> Memory
<span className="font-medium">Memory:</span> </div>
{isLoading ? ( <div>
<LoaderIcon className="animate-spin" /> {data && (data.Description?.Resources?.MemoryBytes / 1024 ** 3).toFixed(2)} GB
) : ( </div>
<span> </div>
{( <div className="space-y-2 flex flex-col items-center text-center">
data?.Description?.Resources?.MemoryBytes / <div className="flex items-center text-sm text-muted-foreground">
1024 ** 3 <Box className="mr-2 h-4 w-4" />
).toFixed(2)}{" "} IP Address
GB </div>
</span> <div>{data?.Status?.Addr}</div>
)} </div>
</div> </div>
<div className="flex justify-between">
<span className="font-medium">TLS Status:</span> <div className="flex justify-end w-full space-x-4">
<span>{node.TLSStatus}</span> <ShowNodeConfig nodeId={node.ID} serverId={serverId} />
</div> <ShowNodeApplications serverId={serverId} />
</div> </div>
<div className="flex gap-2 mt-4"> </div>
<ShowNodeConfig nodeId={node.ID} serverId={serverId} /> </CardContent>
<ShowNodeApplications serverId={serverId} /> </Card>
</div> );
</CardContent> }
</Card>
);
}

271
apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
View File

@@ -2,35 +2,35 @@ import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { import {
AlertCircle, Activity,
CheckCircle, Loader2,
HelpCircle, Monitor,
Loader2, Settings,
Server, Server,
} from "lucide-react"; } from "lucide-react";
import { NodeCard } from "./details/details-card"; import { NodeCard } from "./details/details-card";
interface Props { interface Props {
serverId?: string; serverId?: string;
} }
export default function SwarmMonitorCard({ serverId }: Props) { export default function SwarmMonitorCard({ serverId }: Props) {
const { data: nodes, isLoading } = api.swarm.getNodes.useQuery({ const { data: nodes, isLoading } = api.swarm.getNodes.useQuery({
serverId, serverId,
}); });
if (isLoading) { if (isLoading) {
return ( return (
<div className="w-full max-w-7xl mx-auto"> <div className="w-full max-w-7xl mx-auto">
<div className="mb-6 border min-h-[55vh] rounded-lg h-full"> <div className="mb-6 border min-h-[55vh] rounded-lg h-full">
<div className="flex items-center justify-center h-full text-muted-foreground"> <div className="flex items-center justify-center h-full text-muted-foreground">
<Loader2 className="h-6 w-6 animate-spin" /> <Loader2 className="h-6 w-6 animate-spin" />
</div> </div>
</div> </div>
@@ -50,139 +50,116 @@ export default function SwarmMonitorCard({ serverId }: Props) {
); );
} }
const totalNodes = nodes.length; const totalNodes = nodes.length;
const activeNodesCount = nodes.filter( const activeNodesCount = nodes.filter((node) => node.Status === "Ready").length;
(node) => node.Status === "Ready", const managerNodesCount = nodes.filter((node) =>node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable").length;
).length; const activeNodes = nodes.filter((node) => node.Status === "Ready");
const managerNodesCount = nodes.filter( const managerNodes = nodes.filter((node) => node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable");
(node) =>
node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable",
).length;
const activeNodes = nodes.filter((node) => node.Status === "Ready"); return (
const managerNodes = nodes.filter( <div className="min-h-screen">
(node) => <div className="w-full max-w-7xl mx-auto space-y-6 py-4">
node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable", <header className="flex items-center justify-between">
); <div className="space-y-1">
<h1 className="text-2xl font-semibold tracking-tight">Docker Swarm Overview</h1>
<p className="text-sm text-muted-foreground">Monitor and manage your Docker Swarm cluster</p>
</div>
{!serverId && (
<Button onClick={() => window.location.replace("/dashboard/settings/cluster")}>
<Settings className="mr-2 h-4 w-4" />
Manage Cluster
</Button>
)}
</header>
const getStatusIcon = (status: string) => { <div className="grid gap-6 md:grid-cols-3">
switch (status) { <Card className="bg-background">
case "Ready": <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
return <CheckCircle className="h-4 w-4 text-green-500" />; <CardTitle className="text-sm font-medium">Total Nodes</CardTitle>
case "Down": <div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
return <AlertCircle className="h-4 w-4 text-red-500" />; <Server className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
case "Disconnected": </div>
return <AlertCircle className="h-4 w-4 text-red-800" />; </CardHeader>
default: <CardContent>
return <HelpCircle className="h-4 w-4 text-yellow-500" />; <div className="text-2xl font-bold">{totalNodes}</div>
} </CardContent>
}; </Card>
return ( <Card className="bg-background">
<div className="w-full max-w-7xl mx-auto"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<div className="flex justify-between items-center mb-4"> <CardTitle className="text-sm font-medium">
<h1 className="text-xl font-bold">Docker Swarm Overview</h1> Active Nodes
{!serverId && ( <Badge variant="green">
<Button Online
type="button" </Badge>
onClick={() => </CardTitle>
window.location.replace("/dashboard/settings/cluster") <div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
} <Activity className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
> </div>
Manage Cluster </CardHeader>
</Button> <CardContent>
)} <TooltipProvider>
</div> <Tooltip>
<Card className="mb-6 bg-transparent"> <TooltipTrigger>
<CardHeader className="flex flex-row items-center justify-between"> <div className="text-2xl font-bold">
<CardTitle className="flex items-center gap-2 text-xl"> {activeNodesCount} / {totalNodes}
<Server className="size-4" /> </div>
Monitor </TooltipTrigger>
</CardTitle> <TooltipContent>
</CardHeader> <div className="max-h-48 overflow-y-auto">
<CardContent> {activeNodes.map((node) => (
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"> <div key={node.ID} className="flex items-center gap-2">
<div className="flex justify-between items-center"> {node.Hostname}
<span className="text-sm font-medium">Total Nodes:</span> </div>
<Badge variant="secondary">{totalNodes}</Badge> ))}
</div> </div>
<div className="flex justify-between items-center"> </TooltipContent>
<span className="text-sm font-medium">Active Nodes:</span> </Tooltip>
<TooltipProvider> </TooltipProvider>
<Tooltip> </CardContent>
<TooltipTrigger> </Card>
<Badge
variant="secondary" <Card className="bg-background">
className="bg-green-100 dark:bg-green-400 text-black" <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
> <CardTitle className="text-sm font-medium">
{activeNodesCount} / {totalNodes} Manager Nodes
</Badge> <Badge variant="green">
</TooltipTrigger> Online
<TooltipContent> </Badge>
<div className="max-h-48 overflow-y-auto"> </CardTitle>
{activeNodes.map((node) => ( <div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
<div key={node.ID} className="flex items-center gap-2"> <Monitor className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
{getStatusIcon(node.Status)} </div>
{node.Hostname} </CardHeader>
</div> <CardContent>
))} <TooltipProvider>
</div> <Tooltip>
</TooltipContent> <TooltipTrigger>
</Tooltip> <div className="text-2xl font-bold">
</TooltipProvider> {managerNodesCount} / {totalNodes}
</div> </div>
<div className="flex justify-between items-center"> </TooltipTrigger>
<span className="text-sm font-medium">Manager Nodes:</span> <TooltipContent>
<TooltipProvider> <div className="max-h-48 overflow-y-auto">
<Tooltip> {managerNodes.map((node) => (
<TooltipTrigger> <div key={node.ID} className="flex items-center gap-2">
<Badge {node.Hostname}
variant="secondary" </div>
className="bg-blue-100 dark:bg-blue-400 text-black" ))}
> </div>
{managerNodesCount} / {totalNodes} </TooltipContent>
</Badge> </Tooltip>
</TooltipTrigger> </TooltipProvider>
<TooltipContent> </CardContent>
<div className="max-h-48 overflow-y-auto"> </Card>
{managerNodes.map((node) => ( </div>
<div key={node.ID} className="flex items-center gap-2">
{getStatusIcon(node.Status)} <div className="flex flex-row gap-4">
{node.Hostname} {nodes.map((node) => (
</div> <NodeCard key={node.ID} node={node} serverId={serverId} />
))} ))}
</div> </div>
</TooltipContent> </div>
</Tooltip> </div>
</TooltipProvider> );
</div> }
</div>
<div className="border-t pt-4 mt-4">
<h4 className="text-sm font-semibold mb-2">Node Status:</h4>
<ul className="space-y-2">
{nodes.map((node) => (
<li
key={node.ID}
className="flex justify-between items-center text-sm"
>
<span className="flex items-center gap-2">
{getStatusIcon(node.Status)}
{node.Hostname}
</span>
<Badge variant="outline" className="text-xs">
{node.ManagerStatus || "Worker"}
</Badge>
</li>
))}
</ul>
</div>
</CardContent>
</Card>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{nodes.map((node) => (
<NodeCard key={node.ID} node={node} serverId={serverId} />
))}
</div>
</div>
);
}

4
apps/dokploy/pages/dashboard/swarm.tsx
View File

@@ -10,9 +10,7 @@ import superjson from "superjson";
const Dashboard = () => { const Dashboard = () => {
return ( return (
<> <>
<div className="flex flex-wrap gap-4 py-4"> <SwarmMonitorCard />
<SwarmMonitorCard />
</div>
</> </>
); );
}; };