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 swarm tab and dashboard page for managing Docker swarm

Browse Source
This commit is contained in:
djknaeckebrot 2024-12-17 12:05:02 +01:00
parent b592a025e4
commit 04d3eb9ec0
2 changed files with 235 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

298
apps/dokploy/components/layouts/navigation-tabs.tsx
View File

@ -7,166 +7,176 @@ import { useEffect, useMemo, useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
interface TabInfo { interface TabInfo {
label: string; label: string;
tabLabel?: string; tabLabel?: string;
description: string; description: string;
index: string; index: string;
type: TabState; type: TabState;
isShow?: ({ rol, user }: { rol?: Auth["rol"]; user?: User }) => boolean; isShow?: ({ rol, user }: { rol?: Auth["rol"]; user?: User }) => boolean;
} }
export type TabState = export type TabState =
| "projects" | "projects"
| "monitoring" | "monitoring"
| "settings" | "settings"
| "traefik" | "traefik"
| "requests" | "requests"
| "docker"; | "docker"
| "swarm";
const getTabMaps = (isCloud: boolean) => { const getTabMaps = (isCloud: boolean) => {
const elements: TabInfo[] = [ const elements: TabInfo[] = [
{ {
label: "Projects", label: "Projects",
description: "Manage your projects", description: "Manage your projects",
index: "/dashboard/projects", index: "/dashboard/projects",
type: "projects", type: "projects",
}, },
]; ];
if (!isCloud) { if (!isCloud) {
elements.push( elements.push(
{ {
label: "Monitoring", label: "Monitoring",
description: "Monitor your projects", description: "Monitor your projects",
index: "/dashboard/monitoring", index: "/dashboard/monitoring",
type: "monitoring", type: "monitoring",
}, },
{ {
label: "Traefik", label: "Traefik",
tabLabel: "Traefik File System", tabLabel: "Traefik File System",
description: "Manage your traefik", description: "Manage your traefik",
index: "/dashboard/traefik", index: "/dashboard/traefik",
isShow: ({ rol, user }) => { isShow: ({ rol, user }) => {
return Boolean(rol === "admin" || user?.canAccessToTraefikFiles); return Boolean(rol === "admin" || user?.canAccessToTraefikFiles);
}, },
type: "traefik", type: "traefik",
}, },
{ {
label: "Docker", label: "Docker",
description: "Manage your docker", description: "Manage your docker",
index: "/dashboard/docker", index: "/dashboard/docker",
isShow: ({ rol, user }) => { isShow: ({ rol, user }) => {
return Boolean(rol === "admin" || user?.canAccessToDocker); return Boolean(rol === "admin" || user?.canAccessToDocker);
}, },
type: "docker", type: "docker",
}, },
{ {
label: "Requests", label: "Swarm",
description: "Manage your requests", description: "Manage your docker swarm",
index: "/dashboard/requests", index: "/dashboard/swarm",
isShow: ({ rol, user }) => { isShow: ({ rol, user }) => {
return Boolean(rol === "admin" || user?.canAccessToDocker); return Boolean(rol === "admin" || user?.canAccessToDocker);
}, },
type: "requests", type: "swarm",
}, },
); {
} label: "Requests",
description: "Manage your requests",
index: "/dashboard/requests",
isShow: ({ rol, user }) => {
return Boolean(rol === "admin" || user?.canAccessToDocker);
},
type: "requests",
}
);
}
elements.push({ elements.push({
label: "Settings", label: "Settings",
description: "Manage your settings", description: "Manage your settings",
type: "settings", type: "settings",
index: isCloud index: isCloud
? "/dashboard/settings/profile" ? "/dashboard/settings/profile"
: "/dashboard/settings/server", : "/dashboard/settings/server",
}); });
return elements; return elements;
}; };
interface Props { interface Props {
tab: TabState; tab: TabState;
children: React.ReactNode; children: React.ReactNode;
} }
export const NavigationTabs = ({ tab, children }: Props) => { export const NavigationTabs = ({ tab, children }: Props) => {
const router = useRouter(); const router = useRouter();
const { data } = api.auth.get.useQuery(); const { data } = api.auth.get.useQuery();
const [activeTab, setActiveTab] = useState<TabState>(tab); const [activeTab, setActiveTab] = useState<TabState>(tab);
const { data: isCloud } = api.settings.isCloud.useQuery(); const { data: isCloud } = api.settings.isCloud.useQuery();
const tabMap = useMemo(() => getTabMaps(isCloud ?? false), [isCloud]); const tabMap = useMemo(() => getTabMaps(isCloud ?? false), [isCloud]);
const { data: user } = api.user.byAuthId.useQuery( const { data: user } = api.user.byAuthId.useQuery(
{ {
authId: data?.id || "", authId: data?.id || "",
}, },
{ {
enabled: !!data?.id && data?.rol === "user", enabled: !!data?.id && data?.rol === "user",
}, }
); );
useEffect(() => { useEffect(() => {
setActiveTab(tab); setActiveTab(tab);
}, [tab]); }, [tab]);
const activeTabInfo = useMemo(() => { const activeTabInfo = useMemo(() => {
return tabMap.find((tab) => tab.type === activeTab); return tabMap.find((tab) => tab.type === activeTab);
}, [activeTab]); }, [activeTab]);
return ( return (
<div className="gap-12"> <div className="gap-12">
<header className="mb-6 flex w-full items-center gap-2 justify-between flex-wrap"> <header className="mb-6 flex w-full items-center gap-2 justify-between flex-wrap">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<h1 className="text-xl font-bold lg:text-3xl"> <h1 className="text-xl font-bold lg:text-3xl">
{activeTabInfo?.label} {activeTabInfo?.label}
</h1> </h1>
<p className="lg:text-medium text-muted-foreground"> <p className="lg:text-medium text-muted-foreground">
{activeTabInfo?.description} {activeTabInfo?.description}
</p> </p>
</div> </div>
{tab === "projects" && {tab === "projects" &&
(data?.rol === "admin" || user?.canCreateProjects) && <AddProject />} (data?.rol === "admin" || user?.canCreateProjects) && <AddProject />}
</header> </header>
<div className="flex w-full justify-between gap-8 "> <div className="flex w-full justify-between gap-8 ">
<Tabs <Tabs
value={activeTab} value={activeTab}
className="w-full" className="w-full"
onValueChange={async (e) => { onValueChange={async (e) => {
setActiveTab(e as TabState); setActiveTab(e as TabState);
const tab = tabMap.find((tab) => tab.type === e); const tab = tabMap.find((tab) => tab.type === e);
router.push(tab?.index || ""); router.push(tab?.index || "");
}} }}
> >
<div className="flex flex-row items-center justify-between w-full gap-4 max-sm:overflow-x-auto overflow-y-hidden border-b border-b-divider pb-1"> <div className="flex flex-row items-center justify-between w-full gap-4 max-sm:overflow-x-auto overflow-y-hidden border-b border-b-divider pb-1">
<TabsList className="bg-transparent relative px-0"> <TabsList className="bg-transparent relative px-0">
{tabMap.map((tab, index) => { {tabMap.map((tab, index) => {
if (tab?.isShow && !tab?.isShow?.({ rol: data?.rol, user })) { if (tab?.isShow && !tab?.isShow?.({ rol: data?.rol, user })) {
return null; return null;
} }
return ( return (
<TabsTrigger <TabsTrigger
key={tab.type} key={tab.type}
value={tab.type} value={tab.type}
className="relative py-2.5 md:px-5 data-[state=active]:shadow-none data-[state=active]:bg-transparent rounded-md hover:bg-zinc-100 hover:dark:bg-zinc-800 data-[state=active]:hover:bg-zinc-100 data-[state=active]:hover:dark:bg-zinc-800" className="relative py-2.5 md:px-5 data-[state=active]:shadow-none data-[state=active]:bg-transparent rounded-md hover:bg-zinc-100 hover:dark:bg-zinc-800 data-[state=active]:hover:bg-zinc-100 data-[state=active]:hover:dark:bg-zinc-800"
> >
<span className="relative z-[1] w-full"> <span className="relative z-[1] w-full">
{tab?.tabLabel || tab?.label} {tab?.tabLabel || tab?.label}
</span> </span>
{tab.type === activeTab && ( {tab.type === activeTab && (
<div className="absolute -bottom-[5.5px] w-full"> <div className="absolute -bottom-[5.5px] w-full">
<div className="h-0.5 bg-foreground rounded-t-md" /> <div className="h-0.5 bg-foreground rounded-t-md" />
</div> </div>
)} )}
</TabsTrigger> </TabsTrigger>
); );
})} })}
</TabsList> </TabsList>
</div> </div>
<TabsContent value={activeTab} className="w-full"> <TabsContent value={activeTab} className="w-full">
{children} {children}
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </div>
</div> </div>
); );
}; };

81
apps/dokploy/pages/dashboard/swarm.tsx Normal file
View File

@ -0,0 +1,81 @@
import { ShowSwarm } from "@/components/dashboard/swarm/show/node-list";
import ShowSwarmNodes from "@/components/dashboard/swarm/show/show-nodes";
import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { appRouter } from "@/server/api/root";
import { IS_CLOUD, validateRequest } from "@dokploy/server";
import { createServerSideHelpers } from "@trpc/react-query/server";
import type { GetServerSidePropsContext } from "next";
import React, { type ReactElement } from "react";
import superjson from "superjson";
const Dashboard = () => {
return <ShowSwarmNodes />;
};
export default Dashboard;
Dashboard.getLayout = (page: ReactElement) => {
return <DashboardLayout tab={"swarm"}>{page}</DashboardLayout>;
};
export async function getServerSideProps(
ctx: GetServerSidePropsContext<{ serviceId: string }>
) {
if (IS_CLOUD) {
return {
redirect: {
permanent: true,
destination: "/dashboard/projects",
},
};
}
const { user, session } = await validateRequest(ctx.req, ctx.res);
if (!user) {
return {
redirect: {
permanent: true,
destination: "/",
},
};
}
const { req, res } = ctx;
const helpers = createServerSideHelpers({
router: appRouter,
ctx: {
req: req as any,
res: res as any,
db: null as any,
session: session,
user: user,
},
transformer: superjson,
});
try {
await helpers.project.all.prefetch();
const auth = await helpers.auth.get.fetch();
if (auth.rol === "user") {
const user = await helpers.user.byAuthId.fetch({
authId: auth.id,
});
if (!user.canAccessToDocker) {
return {
redirect: {
permanent: true,
destination: "/",
},
};
}
}
return {
props: {
trpcState: helpers.dehydrate(),
},
};
} catch (error) {
return {
props: {},
};
}
}