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

refactor: remove not needed import, move to better folder structure

Browse Source
This commit is contained in:
djknaeckebrot
2024-12-18 08:49:02 +01:00
parent 9d497142db
commit d4d74d3831
17 changed files with 7 additions and 1365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dokploy/components/dashboard/swarm/applications/columns.tsx
View File

@@ -11,7 +11,7 @@ import {
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { ShowNodeConfig } from "../details/show-node"; import { ShowNodeConfig } from "../details/show-node-config";
// import { ShowContainerConfig } from "../config/show-container-config"; // import { ShowContainerConfig } from "../config/show-container-config";
// import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs"; // import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
// import { DockerTerminalModal } from "../terminal/docker-terminal-modal"; // import { DockerTerminalModal } from "../terminal/docker-terminal-modal";

2
apps/dokploy/components/dashboard/swarm/applications/show-applications.tsx
View File

@@ -7,7 +7,6 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { Layers, LoaderIcon } from "lucide-react"; import { Layers, LoaderIcon } from "lucide-react";
import React from "react"; import React from "react";
@@ -108,7 +107,6 @@ const ShowNodeApplications = ({ nodeName }: Props) => {
<div className="max-h-[90vh]"> <div className="max-h-[90vh]">
<DataTable columns={columns} data={combinedData ?? []} /> <DataTable columns={columns} data={combinedData ?? []} />
</div> </div>
{/* <div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem] bg-card max-h-[70vh] overflow-auto"></div> */}
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );

139
apps/dokploy/components/dashboard/swarm/containers/columns.tsx
View File

@@ -1,139 +0,0 @@
import type { ColumnDef } from "@tanstack/react-table";
import { ArrowUpDown, MoreHorizontal } from "lucide-react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import type { Badge } from "@/components/ui/badge";
import { ShowNodeConfig } from "../details/show-node";
// import { ShowContainerConfig } from "../config/show-container-config";
// import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
// import { DockerTerminalModal } from "../terminal/docker-terminal-modal";
// import type { Container } from "./show-containers";
export interface ContainerList {
containerId: string;
name: string;
image: string;
ports: string;
state: string;
status: string;
serverId: string | null | undefined;
}
export const columns: ColumnDef<ContainerList>[] = [
{
accessorKey: "ID",
accessorFn: (row) => row.containerId,
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
ID
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("containerId")}</div>;
},
},
{
accessorKey: "Name",
accessorFn: (row) => row.name,
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Name
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("name")}</div>;
},
},
{
accessorKey: "Image",
accessorFn: (row) => row.image,
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Image
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("image")}</div>;
},
},
{
accessorKey: "Ports",
accessorFn: (row) => row.ports,
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Ports
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("ports")}</div>;
},
},
{
accessorKey: "State",
accessorFn: (row) => row.state,
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
State
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("state")}</div>;
},
},
{
accessorKey: "Status",
accessorFn: (row) => row.status,
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Status
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("status")}</div>;
},
},
];

210
apps/dokploy/components/dashboard/swarm/containers/data-table.tsx
View File

@@ -1,210 +0,0 @@
"use client";
import {
type ColumnDef,
type ColumnFiltersState,
type SortingState,
type VisibilityState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
import { ChevronDown } from "lucide-react";
import React from "react";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
isLoading: boolean;
}
export function DataTable<TData, TValue>({
columns,
data,
isLoading,
}: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[],
);
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const table = useReactTable({
data,
columns,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection,
state: {
sorting,
columnFilters,
columnVisibility,
rowSelection,
},
});
return (
<div className="mt-6 grid gap-4 pb-20 w-full">
<div className="flex flex-col gap-4 </div>w-full overflow-auto">
<div className="flex items-center gap-2 max-sm:flex-wrap">
<Input
placeholder="Filter by name..."
value={(table.getColumn("Name")?.getFilterValue() as string) ?? ""}
onChange={(event) =>
table.getColumn("Name")?.setFilterValue(event.target.value)
}
className="md:max-w-sm"
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="sm:ml-auto max-sm:w-full">
Columns <ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{table
.getAllColumns()
.filter((column) => column.getCanHide())
.map((column) => {
return (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) =>
column.toggleVisibility(!!value)
}
>
{column.id}
</DropdownMenuCheckboxItem>
);
})}
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="rounded-md border">
{isLoading ? (
<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
<span className="text-muted-foreground text-lg font-medium">
Loading...
</span>
</div>
) : data?.length === 0 ? (
<div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
<span className="text-muted-foreground text-lg font-medium">
No results.
</span>
</div>
) : (
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table?.getRowModel()?.rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
{isLoading ? (
<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
<span className="text-muted-foreground text-lg font-medium">
Loading...
</span>
</div>
) : (
<>No results.</>
)}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
)}
</div>
{data && data?.length > 0 && (
<div className="flex items-center justify-end space-x-2 py-4">
<div className="space-x-2 flex flex-wrap">
<Button
variant="outline"
size="sm"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
Previous
</Button>
<Button
variant="outline"
size="sm"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
Next
</Button>
</div>
</div>
)}
</div>
</div>
);
}

48
apps/dokploy/components/dashboard/swarm/containers/show-container.tsx
View File

@@ -1,48 +0,0 @@
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { api } from "@/utils/api";
import React from "react";
import { ShowContainers } from "../../docker/show/show-containers";
import { columns } from "./columns";
import { DataTable } from "./data-table";
// import { columns } from "./columns";
// import { DataTable } from "./data-table";
interface Props {
serverId: string;
}
const ShowNodeContainers = ({ serverId }: Props) => {
return (
<Dialog>
<DialogTrigger asChild>
<DropdownMenuItem
className="w-full cursor-pointer"
onSelect={(e) => e.preventDefault()}
>
Show Container
</DropdownMenuItem>
</DialogTrigger>
<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
<DialogHeader>
<DialogTitle>Node Container</DialogTitle>
<DialogDescription>
See all containers running on this node
</DialogDescription>
</DialogHeader>
<div className="text-wrap rounded-lgtext-sm sm:max-w-[59rem] bg-transparent max-h-[90vh] overflow-auto ">
<ShowContainers serverId={serverId} />
</div>
</DialogContent>
</Dialog>
);
};
export default ShowNodeContainers;

57
apps/dokploy/components/dashboard/swarm/show/deatils-card.tsx → apps/dokploy/components/dashboard/swarm/details/deatils-card.tsx
View File

@@ -1,25 +1,10 @@
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
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 {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { import { AlertCircle, CheckCircle, HelpCircle, LoaderIcon } from "lucide-react";
AlertCircle,
CheckCircle,
HelpCircle,
Layers,
LoaderIcon,
Settings,
} from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import ShowNodeApplications from "../applications/show-applications"; import ShowNodeApplications from "../applications/show-applications";
import { ShowNodeConfig } from "../details/show-node"; import { ShowNodeConfig } from "./show-node-config";
export interface SwarmList { export interface SwarmList {
ID: string; ID: string;
@@ -36,9 +21,6 @@ interface NodeCardProps {
} }
export function NodeCard({ node }: NodeCardProps) { export function NodeCard({ node }: NodeCardProps) {
const [showConfig, setShowConfig] = useState(false);
const [showServices, setShowServices] = useState(false);
const { data, isLoading } = api.swarm.getNodeInfo.useQuery({ const { data, isLoading } = api.swarm.getNodeInfo.useQuery({
nodeId: node.ID, nodeId: node.ID,
}); });
@@ -77,7 +59,6 @@ export function NodeCard({ node }: NodeCardProps) {
); );
} }
console.log(data);
return ( return (
<Card className="w-full bg-transparent"> <Card className="w-full bg-transparent">
<CardHeader> <CardHeader>
@@ -143,41 +124,7 @@ export function NodeCard({ node }: NodeCardProps) {
</div> </div>
<div className="flex gap-2 mt-4"> <div className="flex gap-2 mt-4">
<ShowNodeConfig nodeId={node.ID} /> <ShowNodeConfig nodeId={node.ID} />
{/* <Dialog open={showConfig} onOpenChange={setShowConfig}>
<DialogTrigger asChild>
<Button variant="outline" size="sm" className="w-full">
<Settings className="h-4 w-4 mr-2" />
Config
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Node Configuration</DialogTitle>
</DialogHeader>
<div className="mt-4">
<pre className="bg-gray-100 p-4 rounded-md overflow-auto">
{JSON.stringify(node, null, 2)}
</pre>
</div>
</DialogContent>
</Dialog> */}
<ShowNodeApplications nodeName="node.Hostname" /> <ShowNodeApplications nodeName="node.Hostname" />
{/* <Dialog open={showServices} onOpenChange={setShowServices}>
<DialogTrigger asChild>
<Button variant="outline" size="sm" className="w-full">
<Layers className="h-4 w-4 mr-2" />
Services
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Node Services</DialogTitle>
</DialogHeader>
<div className="mt-4">
<p>Service information would be displayed here.</p>
</div>
</DialogContent>
</Dialog> */}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>

8
apps/dokploy/components/dashboard/swarm/details/show-node.tsx → apps/dokploy/components/dashboard/swarm/details/show-node-config.tsx
View File

@@ -8,10 +8,8 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { Settings } from "lucide-react"; import { Settings } from "lucide-react";
import React from "react";
interface Props { interface Props {
nodeId: string; nodeId: string;
@@ -22,12 +20,6 @@ export const ShowNodeConfig = ({ nodeId }: Props) => {
return ( return (
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
{/* <DropdownMenuItem
className="w-full cursor-pointer"
onSelect={(e) => e.preventDefault()}
>
Show Config
</DropdownMenuItem> */}
<Button variant="outline" size="sm" className="w-full"> <Button variant="outline" size="sm" className="w-full">
<Settings className="h-4 w-4 mr-2" /> <Settings className="h-4 w-4 mr-2" />
Config Config

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

@@ -15,7 +15,7 @@ import {
Loader2, Loader2,
Server, Server,
} from "lucide-react"; } from "lucide-react";
import { NodeCard } from "./show/deatils-card"; import { NodeCard } from "./details/deatils-card";
export interface SwarmList { export interface SwarmList {
ID: string; ID: string;

168
apps/dokploy/components/dashboard/swarm/servers/columns.tsx
View File

@@ -1,168 +0,0 @@
import type { ColumnDef } from "@tanstack/react-table";
import { ArrowUpDown, MoreHorizontal } from "lucide-react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import type { Badge } from "@/components/ui/badge";
import { ShowContainers } from "../../docker/show/show-containers";
import ShowNodeContainers from "../containers/show-container";
import { ShowNodeConfig } from "../details/show-node";
// import { ShowContainerConfig } from "../config/show-container-config";
// import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
// import { DockerTerminalModal } from "../terminal/docker-terminal-modal";
// import type { Container } from "./show-containers";
export interface ServerList {
totalSum: number;
serverId: string;
name: string;
description: string | null;
ipAddress: string;
port: number;
username: string;
appName: string;
enableDockerCleanup: boolean;
createdAt: string;
adminId: string;
serverStatus: "active" | "inactive";
command: string;
sshKeyId: string | null;
}
export const columns: ColumnDef<ServerList>[] = [
{
accessorKey: "serverId",
accessorFn: (row) => row.serverId,
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Server ID
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("serverId")}</div>;
},
},
{
accessorKey: "name",
accessorFn: (row) => row.name,
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Name
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("name")}</div>;
},
},
{
accessorKey: "ipAddress",
accessorFn: (row) => row.ipAddress,
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
IP Address
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("ipAddress")}</div>;
},
},
{
accessorKey: "port",
accessorFn: (row) => row.port,
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Port
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("port")}</div>;
},
},
{
accessorKey: "username",
accessorFn: (row) => row.username,
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Username
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("username")}</div>;
},
},
{
accessorKey: "createdAt",
accessorFn: (row) => row.createdAt,
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Created at
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("createdAt")}</div>;
},
},
{
id: "actions",
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<ShowNodeContainers serverId={row.original.serverId} />
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];

210
apps/dokploy/components/dashboard/swarm/servers/data-table.tsx
View File

@@ -1,210 +0,0 @@
"use client";
import {
type ColumnDef,
type ColumnFiltersState,
type SortingState,
type VisibilityState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
import { ChevronDown } from "lucide-react";
import React from "react";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
isLoading: boolean;
}
export function DataTable<TData, TValue>({
columns,
data,
isLoading,
}: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[],
);
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const table = useReactTable({
data,
columns,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection,
state: {
sorting,
columnFilters,
columnVisibility,
rowSelection,
},
});
return (
<div className="mt-6 grid gap-4 pb-20 w-full">
<div className="flex flex-col gap-4 </div>w-full overflow-auto">
<div className="flex items-center gap-2 max-sm:flex-wrap">
<Input
placeholder="Filter by name..."
value={(table.getColumn("Name")?.getFilterValue() as string) ?? ""}
onChange={(event) =>
table.getColumn("Name")?.setFilterValue(event.target.value)
}
className="md:max-w-sm"
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="sm:ml-auto max-sm:w-full">
Columns <ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{table
.getAllColumns()
.filter((column) => column.getCanHide())
.map((column) => {
return (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) =>
column.toggleVisibility(!!value)
}
>
{column.id}
</DropdownMenuCheckboxItem>
);
})}
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="rounded-md border">
{isLoading ? (
<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
<span className="text-muted-foreground text-lg font-medium">
Loading...
</span>
</div>
) : data?.length === 0 ? (
<div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
<span className="text-muted-foreground text-lg font-medium">
No results.
</span>
</div>
) : (
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table?.getRowModel()?.rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
{isLoading ? (
<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
<span className="text-muted-foreground text-lg font-medium">
Loading...
</span>
</div>
) : (
<>No results.</>
)}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
)}
</div>
{data && data?.length > 0 && (
<div className="flex items-center justify-end space-x-2 py-4">
<div className="space-x-2 flex flex-wrap">
<Button
variant="outline"
size="sm"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
Previous
</Button>
<Button
variant="outline"
size="sm"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
Next
</Button>
</div>
</div>
)}
</div>
</div>
);
}

21
apps/dokploy/components/dashboard/swarm/server-card.tsx → apps/dokploy/components/dashboard/swarm/servers/server-card.tsx
View File

@@ -3,10 +3,7 @@ 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 { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"; import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { AlertCircle, CheckCircle, HelpCircle, ServerIcon } from "lucide-react"; import { AlertCircle, CheckCircle, HelpCircle, ServerIcon } from "lucide-react";
import { useState } from "react"; import { ShowContainers } from "../../docker/show/show-containers";
import { ShowContainers } from "../docker/show/show-containers";
// import type { Server } from "../types/server";
// import { ShowServerContainers } from "./ShowServerContainers";
export interface Server { export interface Server {
serverId: string; serverId: string;
@@ -29,8 +26,6 @@ interface ServerOverviewCardProps {
} }
export function ServerOverviewCard({ server }: ServerOverviewCardProps) { export function ServerOverviewCard({ server }: ServerOverviewCardProps) {
const [showContainers, setShowContainers] = useState(false);
const getStatusIcon = (status: string) => { const getStatusIcon = (status: string) => {
switch (status) { switch (status) {
case "active": case "active":
@@ -101,21 +96,7 @@ export function ServerOverviewCard({ server }: ServerOverviewCardProps) {
<ShowContainers serverId={server.serverId} /> <ShowContainers serverId={server.serverId} />
</DialogContent> </DialogContent>
</Dialog> </Dialog>
{/* <Button
variant="outline"
size="sm"
className="w-full"
onClick={() => setShowContainers(!showContainers)}
>
<ServerIcon className="h-4 w-4 mr-2" />
{showContainers ? "Hide" : "Show"} Containers
</Button> */}
</div> </div>
{/* {showContainers && (
<div className="mt-4">
<ShowContainers serverId={server.serverId} />
</div>
)} */}
</CardContent> </CardContent>
</Card> </Card>
); );

2
apps/dokploy/components/dashboard/swarm/servers/servers-overview.tsx
View File

@@ -1,5 +1,5 @@
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { ServerOverviewCard } from "../server-card"; import { ServerOverviewCard } from "./server-card";
export default function ServersOverview() { export default function ServersOverview() {
const { data: servers, isLoading } = api.server.all.useQuery(); const { data: servers, isLoading } = api.server.all.useQuery();

16
apps/dokploy/components/dashboard/swarm/servers/show-server.tsx
View File

@@ -1,16 +0,0 @@
import { api } from "@/utils/api";
import React from "react";
import { columns } from "./columns";
import { DataTable } from "./data-table";
function ShowApplicationServers() {
const { data, isLoading } = api.server.all.useQuery();
console.log(data);
return (
<DataTable columns={columns} data={data ?? []} isLoading={isLoading} />
);
}
export default ShowApplicationServers;

202
apps/dokploy/components/dashboard/swarm/show/columns.tsx
View File

@@ -1,202 +0,0 @@
import type { ColumnDef } from "@tanstack/react-table";
import { ArrowUpDown, MoreHorizontal } from "lucide-react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Badge } from "@/components/ui/badge";
import ShowNodeApplications from "../applications/show-applications";
import ShowContainers from "../containers/show-container";
import { ShowNodeConfig } from "../details/show-node";
// import { ShowContainerConfig } from "../config/show-container-config";
// import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
// import { DockerTerminalModal } from "../terminal/docker-terminal-modal";
// import type { Container } from "./show-containers";
export interface SwarmList {
ID: string;
Hostname: string;
Availability: string;
EngineVersion: string;
Status: string;
ManagerStatus: string;
TLSStatus: string;
}
export const columns: ColumnDef<SwarmList>[] = [
{
accessorKey: "ID",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
ID
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("ID")}</div>;
},
},
{
accessorKey: "EngineVersion",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Engine Version
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("EngineVersion")}</div>;
},
},
{
accessorKey: "Hostname",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Hostname
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
return <div>{row.getValue("Hostname")}</div>;
},
},
// {
// accessorKey: "Status",
// header: ({ column }) => {
// return (
// <Button
// variant="ghost"
// onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
// >
// Status
// <ArrowUpDown className="ml-2 h-4 w-4" />
// </Button>
// );
// },
// cell: ({ row }) => {
// const value = row.getValue("status") as string;
// return (
// <div className="capitalize">
// <Badge
// variant={
// value === "Ready"
// ? "default"
// : value === "failed"
// ? "destructive"
// : "secondary"
// }
// >
// {value}
// </Badge>
// </div>
// );
// },
// },
{
accessorKey: "Availability",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Availability
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
const value = row.getValue("Availability") as string;
return (
<div className="capitalize">
<Badge
variant={
value === "Active"
? "default"
: value === "Drain"
? "destructive"
: "secondary"
}
>
{value}
</Badge>
</div>
);
},
},
{
accessorKey: "ManagerStatus",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
ManagerStatus
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => (
<div className="lowercase">{row.getValue("ManagerStatus")}</div>
),
},
{
id: "actions",
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<ShowNodeConfig nodeId={row.original.ID} />
<ShowNodeApplications nodeName={row.original.Hostname} />
{/* <ShowDockerModalLogs
containerId={container.containerId}
serverId={container.serverId}
>
View Logs
</ShowDockerModalLogs>
<ShowContainerConfig
containerId={container.containerId}
serverId={container.serverId || ""}
/>
<DockerTerminalModal
containerId={container.containerId}
serverId={container.serverId || ""}
>
Terminal
</DockerTerminalModal> */}
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];

269
apps/dokploy/components/dashboard/swarm/show/data-table.tsx
View File

@@ -1,269 +0,0 @@
"use client";
import {
type ColumnFiltersState,
type SortingState,
type VisibilityState,
type ColumnDef,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import React from "react";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
} from "@/components/ui/dropdown-menu";
import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
import { Button } from "@/components/ui/button";
import { ChevronDown } from "lucide-react";
import { Input } from "@/components/ui/input";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
isLoading: boolean;
}
export function DataTable<TData, TValue>({
columns,
data,
isLoading,
}: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const table = useReactTable({
data,
columns,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection,
state: {
sorting,
columnFilters,
columnVisibility,
rowSelection,
},
});
console.log("Data in DataTable", data);
return (
<div className="mt-6 grid gap-4 pb-20 w-full">
<div className="flex flex-col gap-4 w-full overflow-auto">
<div className="flex items-center gap-2 max-sm:flex-wrap">
<Input
placeholder="Filter by name..."
value={
(table.getColumn("Hostname")?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table.getColumn("Hostname")?.setFilterValue(event.target.value)
}
className="md:max-w-sm"
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="sm:ml-auto max-sm:w-full">
Columns <ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{table
.getAllColumns()
.filter((column) => column.getCanHide())
.map((column) => {
return (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) =>
column.toggleVisibility(!!value)
}
>
{column.id}
</DropdownMenuCheckboxItem>
);
})}
</DropdownMenuContent>
</DropdownMenu>
</div>
{/* <Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table?.getRowModel()?.rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
{isLoading ? (
<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
<span className="text-muted-foreground text-lg font-medium">
Loading...
</span>
</div>
) : (
<>No results.</>
)}
</TableCell>
</TableRow>
)}
</TableBody>
</Table> */}
<div className="rounded-md border">
{isLoading ? (
<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
<span className="text-muted-foreground text-lg font-medium">
Loading...
</span>
</div>
) : data?.length === 0 ? (
<div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
<span className="text-muted-foreground text-lg font-medium">
No results.
</span>
</div>
) : (
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table?.getRowModel()?.rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
{isLoading ? (
<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
<span className="text-muted-foreground text-lg font-medium">
Loading...
</span>
</div>
) : (
<>No results.</>
)}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
)}
</div>
{data && data?.length > 0 && (
<div className="flex items-center justify-end space-x-2 py-4">
<div className="space-x-2 flex flex-wrap">
<Button
variant="outline"
size="sm"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
Previous
</Button>
<Button
variant="outline"
size="sm"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
Next
</Button>
</div>
</div>
)}
</div>
</div>
);
}

14
apps/dokploy/components/dashboard/swarm/show/show-nodes.tsx
View File

@@ -1,14 +0,0 @@
import { api } from "@/utils/api";
import React from "react";
import { columns } from "./columns";
import { DataTable } from "./data-table";
function ShowSwarmNodes() {
const { data, isLoading } = api.swarm.getNodes.useQuery();
return (
<DataTable columns={columns} data={data ?? []} isLoading={isLoading} />
);
}
export default ShowSwarmNodes;

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

@@ -1,6 +1,6 @@
import { ShowServers } from "@/components/dashboard/settings/servers/show-servers"; import { ShowServers } from "@/components/dashboard/settings/servers/show-servers";
import SwarmMonitorCard from "@/components/dashboard/swarm/monitoring-card"; import SwarmMonitorCard from "@/components/dashboard/swarm/monitoring-card";
import { ServerOverviewCard } from "@/components/dashboard/swarm/server-card"; import { ServerOverviewCard } from "@/components/dashboard/swarm/servers/server-card";
import ServersOverview from "@/components/dashboard/swarm/servers/servers-overview"; import ServersOverview from "@/components/dashboard/swarm/servers/servers-overview";
import ShowApplicationServers from "@/components/dashboard/swarm/servers/show-server"; import ShowApplicationServers from "@/components/dashboard/swarm/servers/show-server";
import ShowSwarmNodes from "@/components/dashboard/swarm/show/show-nodes"; import ShowSwarmNodes from "@/components/dashboard/swarm/show/show-nodes";