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> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-6"> <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="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={`h-2.5 w-2.5 rounded-full ${node.Status === "Ready" ? "bg-green-500" : "bg-red-500"}`} />
<div className="font-medium">{node.Hostname}</div> <div className="font-medium">{node.Hostname}</div>

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

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