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

style: added gap for cards title & gap for tls status & availability

Browse Source
This commit is contained in:
190km
2024-12-30 20:05:44 +01:00
parent 638fbe17a6
commit a7983f32a6
2 changed files with 61 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,7 +63,7 @@ export function NodeCard({ node, serverId }: Props) {
</CardHeader>
<CardContent>
<div className="space-y-6">
<div className="flex flex-wrap items-center justify-between">
<div className="flex flex-wrap gap-y-2 items-center justify-between">
<div className="flex items-center space-x-4 p-2 rounded-xl border">
<div className={`h-2.5 w-2.5 rounded-full ${node.Status === "Ready" ? "bg-green-500" : "bg-red-500"}`} />
<div className="font-medium">{node.Hostname}</div>

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

@@ -8,13 +8,7 @@ import {
TooltipTrigger,
} from "@/components/ui/tooltip";
import { api } from "@/utils/api";
import {
Activity,
Loader2,
Monitor,
Settings,
Server,
} from "lucide-react";
import { Activity, Loader2, Monitor, Settings, Server } from "lucide-react";
import { NodeCard } from "./details/details-card";
interface Props {
@@ -26,46 +20,62 @@ export default function SwarmMonitorCard({ serverId }: Props) {
serverId,
});
if (isLoading) {
return (
<div className="w-full max-w-7xl mx-auto">
<div className="mb-6 border min-h-[55vh] rounded-lg h-full">
<div className="flex items-center justify-center h-full text-muted-foreground">
<Loader2 className="h-6 w-6 animate-spin" />
</div>
</div>
</div>
);
}
if (isLoading) {
return (
<div className="w-full max-w-7xl mx-auto">
<div className="mb-6 border min-h-[55vh] rounded-lg h-full">
<div className="flex items-center justify-center h-full text-muted-foreground">
<Loader2 className="h-6 w-6 animate-spin" />
</div>
</div>
</div>
);
}
if (!nodes) {
return (
<div className="w-full max-w-7xl mx-auto">
<div className="mb-6 border min-h-[55vh] rounded-lg h-full">
<div className="flex items-center justify-center h-full text-destructive">
<span>Failed to load data</span>
</div>
</div>
</div>
);
}
if (!nodes) {
return (
<div className="w-full max-w-7xl mx-auto">
<div className="mb-6 border min-h-[55vh] rounded-lg h-full">
<div className="flex items-center justify-center h-full text-destructive">
<span>Failed to load data</span>
</div>
</div>
</div>
);
}
const totalNodes = nodes.length;
const activeNodesCount = nodes.filter((node) => node.Status === "Ready").length;
const managerNodesCount = nodes.filter((node) =>node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable").length;
const activeNodesCount = nodes.filter(
(node) => node.Status === "Ready"
).length;
const managerNodesCount = nodes.filter(
(node) =>
node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable"
).length;
const activeNodes = nodes.filter((node) => node.Status === "Ready");
const managerNodes = nodes.filter((node) => node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable");
const managerNodes = nodes.filter(
(node) =>
node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable"
);
return (
<div className="min-h-screen">
<div className="w-full max-w-7xl mx-auto space-y-6 py-4">
<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>
<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")}>
<Button
onClick={() =>
window.location.replace("/dashboard/settings/cluster")
}
>
<Settings className="mr-2 h-4 w-4" />
Manage Cluster
</Button>
@@ -87,12 +97,13 @@ export default function SwarmMonitorCard({ serverId }: Props) {
<Card className="bg-background">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
Active Nodes
<Badge variant="green">
Online
</Badge>
</CardTitle>
<div className="flex items-center gap-2">
<CardTitle className="text-sm font-medium">
Active Nodes
</CardTitle>
<Badge variant="green">Online</Badge>
</div>
<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>
@@ -121,12 +132,13 @@ export default function SwarmMonitorCard({ serverId }: Props) {
<Card className="bg-background">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
Manager Nodes
<Badge variant="green">
Online
</Badge>
</CardTitle>
<div className="flex items-center gap-2">
<CardTitle className="text-sm font-medium">
Manager Nodes
</CardTitle>
<Badge variant="green">Online</Badge>
</div>
<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
<Monitor className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
</div>
@@ -162,4 +174,4 @@ export default function SwarmMonitorCard({ serverId }: Props) {
</div>
</div>
);
}
}