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

Merge branch 'canary' into feat/multi-node-support

Browse Source
This commit is contained in:
Mauricio Siu
2024-05-17 21:43:54 -06:00
parent 976d1f312f d539b80ef7
commit eda33e095e
62 changed files with 609 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/layouts/dashboard-layout.tsx
View File

@@ -10,19 +10,15 @@ export const DashboardLayout = ({ children, tab }: Props) => {
return (
<div>
<div
className="bg-radial relative flex flex-col bg-background pt-6"
className="bg-radial relative flex flex-col bg-background min-h-screen w-full"
id="app-container"
>
<div className="flex items-center justify-center">
<div className="w-full">
<Navbar />
<main className="mt-6 flex w-full flex-col items-center">
<div className="w-full max-w-8xl px-4 lg:px-8">
<NavigationTabs tab={tab}>{children}</NavigationTabs>
</div>
</main>
<Navbar />
<main className="pt-6 flex w-full flex-col items-center">
<div className="w-full max-w-8xl px-4 lg:px-8">
<NavigationTabs tab={tab}>{children}</NavigationTabs>
</div>
</div>
</main>
</div>
</div>
);

2
components/layouts/navbar.tsx
View File

@@ -29,7 +29,7 @@ export const Navbar = () => {
const { mutateAsync } = api.auth.logout.useMutation();
return (
<nav className="border-divider sticky inset-x-0 top-0 z-40 flex h-auto w-full items-center justify-center border-b bg-background/70 backdrop-blur-lg backdrop-saturate-150 data-[menu-open=true]:border-none data-[menu-open=true]:backdrop-blur-xl">
<header className="relative z-40 flex h-[var(--navbar-height)] w-full max-w-8xl flex-row flex-nowrap items-center justify-between gap-4 px-4 sm:px-6">
<header className="relative z-40 flex w-full max-w-8xl flex-row flex-nowrap items-center justify-between gap-4 px-4 sm:px-6 h-16">
<div className="text-medium box-border flex flex-grow basis-0 flex-row flex-nowrap items-center justify-start whitespace-nowrap bg-transparent no-underline">
<Link
href="/dashboard/projects"

135
components/layouts/navigation-tabs.tsx
View File

@@ -1,8 +1,18 @@
import { AddProject } from "@/components/dashboard/projects/add";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { useEffect, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/router";
import { api } from "@/utils/api";
import type { Auth } from "@/server/api/services/auth";
import type { User } from "@/server/api/services/user";
interface TabInfo {
label: string;
tabLabel?: string;
description: string;
index: string;
isShow?: ({ rol, user }: { rol?: Auth["rol"]; user?: User }) => boolean;
}
export type TabState =
| "projects"
@@ -11,6 +21,41 @@ export type TabState =
| "traefik"
| "docker";
const tabMap: Record<TabState, TabInfo> = {
projects: {
label: "Projects",
description: "Manage your projects",
index: "/dashboard/projects",
},
monitoring: {
label: "Monitoring",
description: "Monitor your projects",
index: "/dashboard/monitoring",
},
traefik: {
label: "Traefik",
tabLabel: "Traefik File System",
description: "Manage your traefik",
index: "/dashboard/traefik",
isShow: ({ rol, user }) => {
return Boolean(rol === "admin" || user?.canAccessToTraefikFiles);
},
},
docker: {
label: "Docker",
description: "Manage your docker",
index: "/dashboard/docker",
isShow: ({ rol, user }) => {
return Boolean(rol === "admin" || user?.canAccessToDocker);
},
},
settings: {
label: "Settings",
description: "Manage your settings",
index: "/dashboard/settings/server",
},
};
interface Props {
tab: TabState;
children: React.ReactNode;
@@ -34,23 +79,19 @@ export const NavigationTabs = ({ tab, children }: Props) => {
setActiveTab(tab);
}, [tab]);
const activeTabInfo = useMemo(() => {
return tabMap[activeTab];
}, [activeTab]);
return (
<div className="gap-12 min-h-screen">
<div className="gap-12">
<header className="mb-6 flex w-full items-center gap-2 justify-between flex-wrap">
<div className="flex flex-col gap-2">
<h1 className="text-xl font-bold lg:text-3xl">
{tab === "projects" && "Projects"}
{tab === "monitoring" && "Monitoring"}
{tab === "settings" && "Settings"}
{tab === "traefik" && "Traefik"}
{tab === "docker" && "Docker"}
{activeTabInfo.label}
</h1>
<p className="lg:text-medium text-muted-foreground">
{tab === "projects" && "Manage your deployments"}
{tab === "monitoring" && "Watch the usage of your server"}
{tab === "settings" && "Check the configuration"}
{tab === "traefik" && "Read the traefik config and update it"}
{tab === "docker" && "Manage the docker containers"}
{activeTabInfo.description}
</p>
</div>
{tab === "projects" &&
@@ -60,54 +101,36 @@ export const NavigationTabs = ({ tab, children }: Props) => {
<Tabs
value={activeTab}
className="w-full"
onValueChange={(e) => {
if (e === "settings") {
router.push("/dashboard/settings/server");
} else {
router.push(`/dashboard/${e}`);
}
onValueChange={async (e) => {
setActiveTab(e as TabState);
router.push(tabMap[e as TabState].index);
}}
>
{/* className="grid w-fit grid-cols-4 bg-transparent" */}
<div className="flex flex-row items-center justify-between w-full gap-4 max-sm:overflow-x-auto">
<TabsList className="md:grid md:w-fit md:grid-cols-5 justify-start bg-transparent">
<TabsTrigger
value="projects"
className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
>
Projects
</TabsTrigger>
<TabsTrigger
value="monitoring"
className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
>
Monitoring
</TabsTrigger>
{(data?.rol === "admin" || user?.canAccessToTraefikFiles) && (
<TabsTrigger
value="traefik"
className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
>
Traefik File System
</TabsTrigger>
)}
{(data?.rol === "admin" || user?.canAccessToDocker) && (
<TabsTrigger
value="docker"
className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
>
Docker
</TabsTrigger>
)}
<TabsTrigger
value="settings"
className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
>
Settings
</TabsTrigger>
<div className="flex flex-row items-center justify-between w-full gap-4 max-sm:overflow-x-auto border-b border-b-divider pb-1">
<TabsList className="bg-transparent relative px-0">
{Object.keys(tabMap).map((key) => {
const tab = tabMap[key as TabState];
if (tab.isShow && !tab.isShow?.({ rol: data?.rol, user })) {
return null;
}
return (
<TabsTrigger
key={key}
value={key}
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">
{tab.tabLabel || tab.label}
</span>
{key === activeTab && (
<div className="absolute -bottom-[5.5px] w-full">
<div className="h-0.5 bg-foreground rounded-t-md" />
</div>
)}
</TabsTrigger>
);
})}
</TabsList>
</div>