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

feat: add new items

Browse Source
This commit is contained in:
djknaeckebrot
2024-12-17 21:07:30 +01:00
parent e3ee89104b
commit 3080926a50
1 changed files with 61 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
apps/dokploy/components/dashboard/swarm/show/deatils-card.tsx
View File

@@ -8,11 +8,13 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { api } from "@/utils/api";
import { import {
AlertCircle, AlertCircle,
CheckCircle, CheckCircle,
HelpCircle, HelpCircle,
Layers, Layers,
LoaderIcon,
Settings, Settings,
} from "lucide-react"; } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
@@ -37,6 +39,10 @@ export function NodeCard({ node }: NodeCardProps) {
const [showConfig, setShowConfig] = useState(false); const [showConfig, setShowConfig] = useState(false);
const [showServices, setShowServices] = useState(false); const [showServices, setShowServices] = useState(false);
const { data, isLoading } = api.swarm.getNodeInfo.useQuery({
nodeId: node.ID,
});
const getStatusIcon = (status: string) => { const getStatusIcon = (status: string) => {
switch (status) { switch (status) {
case "Ready": case "Ready":
@@ -48,6 +54,30 @@ export function NodeCard({ node }: NodeCardProps) {
} }
}; };
if (isLoading) {
return (
<Card className="w-full">
<CardHeader>
<CardTitle className="flex items-center justify-between">
<span className="flex items-center gap-2">
{getStatusIcon(node.Status)}
{node.Hostname}
</span>
<Badge variant="outline" className="text-xs">
{node.ManagerStatus || "Worker"}
</Badge>
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex items-center justify-center">
<LoaderIcon className="h-6 w-6 animate-spin" />
</div>
</CardContent>
</Card>
);
}
console.log(data);
return ( return (
<Card className="w-full"> <Card className="w-full">
<CardHeader> <CardHeader>
@@ -67,6 +97,14 @@ export function NodeCard({ node }: NodeCardProps) {
<span className="font-medium">Status:</span> <span className="font-medium">Status:</span>
<span>{node.Status}</span> <span>{node.Status}</span>
</div> </div>
<div className="flex justify-between">
<span className="font-medium">IP Address:</span>
{isLoading ? (
<LoaderIcon className="animate-spin" />
) : (
<span>{data.Status.Addr}</span>
)}
</div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="font-medium">Availability:</span> <span className="font-medium">Availability:</span>
<span>{node.Availability}</span> <span>{node.Availability}</span>
@@ -75,6 +113,29 @@ export function NodeCard({ node }: NodeCardProps) {
<span className="font-medium">Engine Version:</span> <span className="font-medium">Engine Version:</span>
<span>{node.EngineVersion}</span> <span>{node.EngineVersion}</span>
</div> </div>
<div className="flex justify-between">
<span className="font-medium">CPU:</span>
{isLoading ? (
<LoaderIcon className="animate-spin" />
) : (
<span>
{(data.Description.Resources.NanoCPUs / 1e9).toFixed(2)} GHz
</span>
)}
</div>
<div className="flex justify-between">
<span className="font-medium">Memory:</span>
{isLoading ? (
<LoaderIcon className="animate-spin" />
) : (
<span>
{(data.Description.Resources.MemoryBytes / 1024 ** 3).toFixed(
2,
)}{" "}
GB
</span>
)}
</div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="font-medium">TLS Status:</span> <span className="font-medium">TLS Status:</span>
<span>{node.TLSStatus}</span> <span>{node.TLSStatus}</span>