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
Show Stats 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,
DialogTrigger,
} from "@/components/ui/dialog";
import { api } from "@/utils/api";
import {
AlertCircle,
CheckCircle,
HelpCircle,
Layers,
LoaderIcon,
Settings,
} from "lucide-react";
import { useState } from "react";
@ -37,6 +39,10 @@ export function NodeCard({ node }: NodeCardProps) {
const [showConfig, setShowConfig] = useState(false);
const [showServices, setShowServices] = useState(false);
const { data, isLoading } = api.swarm.getNodeInfo.useQuery({
nodeId: node.ID,
});
const getStatusIcon = (status: string) => {
switch (status) {
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 (
<Card className="w-full">
<CardHeader>
@ -67,6 +97,14 @@ export function NodeCard({ node }: NodeCardProps) {
<span className="font-medium">Status:</span>
<span>{node.Status}</span>
</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">
<span className="font-medium">Availability:</span>
<span>{node.Availability}</span>
@ -75,6 +113,29 @@ export function NodeCard({ node }: NodeCardProps) {
<span className="font-medium">Engine Version:</span>
<span>{node.EngineVersion}</span>
</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">
<span className="font-medium">TLS Status:</span>
<span>{node.TLSStatus}</span>