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: show banner when the server is disabled

Browse Source
This commit is contained in:
Mauricio Siu
2024-10-21 02:19:10 -06:00
parent 53edf06476
commit c0afcaf3f6
8 changed files with 632 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx
View File

@@ -35,7 +35,7 @@ import { appRouter } from "@/server/api/root";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { validateRequest } from "@dokploy/server"; import { validateRequest } from "@dokploy/server";
import { createServerSideHelpers } from "@trpc/react-query/server"; import { createServerSideHelpers } from "@trpc/react-query/server";
import { GlobeIcon, HelpCircle } from "lucide-react"; import { GlobeIcon, HelpCircle, ServerOff } from "lucide-react";
import type { import type {
GetServerSidePropsContext, GetServerSidePropsContext,
InferGetServerSidePropsType, InferGetServerSidePropsType,
@@ -156,90 +156,111 @@ const Service = (
</div> </div>
</header> </header>
</div> </div>
<Tabs
value={tab} {data?.server?.serverStatus === "inactive" ? (
defaultValue="general" <div className="flex h-[55vh] border-2 rounded-xl border-dashed p-4">
className="w-full" <div className="max-w-3xl mx-auto flex flex-col items-center justify-center self-center gap-3">
onValueChange={(e) => { <ServerOff className="size-10 text-muted-foreground self-center" />
setSab(e as TabState); <span className="text-center text-base text-muted-foreground">
const newPath = `/dashboard/project/${projectId}/services/application/${applicationId}?tab=${e}`; This service is hosted on the server {data.server.name}, but this
router.push(newPath, undefined, { shallow: true }); server has been disabled because your current plan doesn't include
}} enough servers. Please purchase more servers to regain access to
> this application.
<div className="flex flex-row items-center justify-between w-full gap-4"> </span>
<TabsList <span className="text-center text-base text-muted-foreground">
className={cn( Go to{" "}
"md:grid md:w-fit max-md:overflow-y-scroll justify-start", <Link href="/dashboard/settings/billing" className="text-primary">
data?.serverId ? "md:grid-cols-6" : "md:grid-cols-7", Billing
)} </Link>
> </span>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
{!data?.serverId && (
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
)}
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="deployments">Deployments</TabsTrigger>
<TabsTrigger value="domains">Domains</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<UpdateApplication applicationId={applicationId} />
{(auth?.rol === "admin" || user?.canDeleteServices) && (
<DeleteApplication applicationId={applicationId} />
)}
</div> </div>
</div> </div>
) : (
<Tabs
value={tab}
defaultValue="general"
className="w-full"
onValueChange={(e) => {
setSab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/application/${applicationId}?tab=${e}`;
router.push(newPath, undefined, { shallow: true });
}}
>
<div className="flex flex-row items-center justify-between w-full gap-4">
<TabsList
className={cn(
"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
data?.serverId ? "md:grid-cols-6" : "md:grid-cols-7",
)}
>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
{!data?.serverId && (
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
)}
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="deployments">Deployments</TabsTrigger>
<TabsTrigger value="domains">Domains</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<UpdateApplication applicationId={applicationId} />
{(auth?.rol === "admin" || user?.canDeleteServices) && (
<DeleteApplication applicationId={applicationId} />
)}
</div>
</div>
<TabsContent value="general"> <TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">
<ShowGeneralApplication applicationId={applicationId} />
</div>
</TabsContent>
<TabsContent value="environment">
<div className="flex flex-col gap-4 pt-2.5">
<ShowEnvironment applicationId={applicationId} />
</div>
</TabsContent>
{!data?.serverId && (
<TabsContent value="monitoring">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<DockerMonitoring appName={data?.appName || ""} /> <ShowGeneralApplication applicationId={applicationId} />
</div> </div>
</TabsContent> </TabsContent>
)} <TabsContent value="environment">
<div className="flex flex-col gap-4 pt-2.5">
<ShowEnvironment applicationId={applicationId} />
</div>
</TabsContent>
{!data?.serverId && (
<TabsContent value="monitoring">
<div className="flex flex-col gap-4 pt-2.5">
<DockerMonitoring appName={data?.appName || ""} />
</div>
</TabsContent>
)}
<TabsContent value="logs"> <TabsContent value="logs">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<ShowDockerLogs <ShowDockerLogs
appName={data?.appName || ""} appName={data?.appName || ""}
serverId={data?.serverId || ""} serverId={data?.serverId || ""}
/> />
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="deployments" className="w-full"> <TabsContent value="deployments" className="w-full">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<ShowDeployments applicationId={applicationId} /> <ShowDeployments applicationId={applicationId} />
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="domains" className="w-full"> <TabsContent value="domains" className="w-full">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<ShowDomains applicationId={applicationId} /> <ShowDomains applicationId={applicationId} />
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="advanced"> <TabsContent value="advanced">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<AddCommand applicationId={applicationId} /> <AddCommand applicationId={applicationId} />
<ShowClusterSettings applicationId={applicationId} /> <ShowClusterSettings applicationId={applicationId} />
<ShowApplicationResources applicationId={applicationId} /> <ShowApplicationResources applicationId={applicationId} />
<ShowVolumes applicationId={applicationId} /> <ShowVolumes applicationId={applicationId} />
<ShowRedirects applicationId={applicationId} /> <ShowRedirects applicationId={applicationId} />
<ShowSecurity applicationId={applicationId} /> <ShowSecurity applicationId={applicationId} />
<ShowPorts applicationId={applicationId} /> <ShowPorts applicationId={applicationId} />
<ShowTraefikConfig applicationId={applicationId} /> <ShowTraefikConfig applicationId={applicationId} />
</div> </div>
</TabsContent> </TabsContent>
</Tabs> </Tabs>
)}
</div> </div>
); );
}; };

180
apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx
View File

@@ -29,7 +29,7 @@ import { appRouter } from "@/server/api/root";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { validateRequest } from "@dokploy/server"; import { validateRequest } from "@dokploy/server";
import { createServerSideHelpers } from "@trpc/react-query/server"; import { createServerSideHelpers } from "@trpc/react-query/server";
import { CircuitBoard } from "lucide-react"; import { CircuitBoard, ServerOff } from "lucide-react";
import { HelpCircle } from "lucide-react"; import { HelpCircle } from "lucide-react";
import type { import type {
GetServerSidePropsContext, GetServerSidePropsContext,
@@ -151,98 +151,118 @@ const Service = (
</div> </div>
</header> </header>
</div> </div>
<Tabs {data?.server?.serverStatus === "inactive" ? (
value={tab} <div className="flex h-[55vh] border-2 rounded-xl border-dashed p-4">
defaultValue="general" <div className="max-w-3xl mx-auto flex flex-col items-center justify-center self-center gap-3">
className="w-full" <ServerOff className="size-10 text-muted-foreground self-center" />
onValueChange={(e) => { <span className="text-center text-base text-muted-foreground">
setSab(e as TabState); This service is hosted on the server {data.server.name}, but this
const newPath = `/dashboard/project/${projectId}/services/compose/${composeId}?tab=${e}`; server has been disabled because your current plan doesn't include
router.push(newPath, undefined, { shallow: true }); enough servers. Please purchase more servers to regain access to
}} this application.
> </span>
<div className="flex flex-row items-center justify-between w-full gap-4"> <span className="text-center text-base text-muted-foreground">
<TabsList Go to{" "}
className={cn( <Link href="/dashboard/settings/billing" className="text-primary">
"md:grid md:w-fit max-md:overflow-y-scroll justify-start", Billing
data?.serverId ? "md:grid-cols-6" : "md:grid-cols-7", </Link>
data?.composeType === "docker-compose" ? "" : "md:grid-cols-6", </span>
data?.serverId && data?.composeType === "stack"
? "md:grid-cols-5"
: "",
)}
>
<TabsTrigger value="general">General</TabsTrigger>
{data?.composeType === "docker-compose" && (
<TabsTrigger value="environment">Environment</TabsTrigger>
)}
{!data?.serverId && (
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
)}
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="deployments">Deployments</TabsTrigger>
<TabsTrigger value="domains">Domains</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<UpdateCompose composeId={composeId} />
{(auth?.rol === "admin" || user?.canDeleteServices) && (
<DeleteCompose composeId={composeId} />
)}
</div> </div>
</div> </div>
) : (
<Tabs
value={tab}
defaultValue="general"
className="w-full"
onValueChange={(e) => {
setSab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/compose/${composeId}?tab=${e}`;
router.push(newPath, undefined, { shallow: true });
}}
>
<div className="flex flex-row items-center justify-between w-full gap-4">
<TabsList
className={cn(
"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
data?.serverId ? "md:grid-cols-6" : "md:grid-cols-7",
data?.composeType === "docker-compose" ? "" : "md:grid-cols-6",
data?.serverId && data?.composeType === "stack"
? "md:grid-cols-5"
: "",
)}
>
<TabsTrigger value="general">General</TabsTrigger>
{data?.composeType === "docker-compose" && (
<TabsTrigger value="environment">Environment</TabsTrigger>
)}
{!data?.serverId && (
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
)}
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="deployments">Deployments</TabsTrigger>
<TabsTrigger value="domains">Domains</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<UpdateCompose composeId={composeId} />
<TabsContent value="general"> {(auth?.rol === "admin" || user?.canDeleteServices) && (
<div className="flex flex-col gap-4 pt-2.5"> <DeleteCompose composeId={composeId} />
<ShowGeneralCompose composeId={composeId} /> )}
</div>
</div> </div>
</TabsContent>
<TabsContent value="environment"> <TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">
<ShowEnvironmentCompose composeId={composeId} />
</div>
</TabsContent>
{!data?.serverId && (
<TabsContent value="monitoring">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<ShowMonitoringCompose <ShowGeneralCompose composeId={composeId} />
</div>
</TabsContent>
<TabsContent value="environment">
<div className="flex flex-col gap-4 pt-2.5">
<ShowEnvironmentCompose composeId={composeId} />
</div>
</TabsContent>
{!data?.serverId && (
<TabsContent value="monitoring">
<div className="flex flex-col gap-4 pt-2.5">
<ShowMonitoringCompose
serverId={data?.serverId || ""}
appName={data?.appName || ""}
appType={data?.composeType || "docker-compose"}
/>
</div>
</TabsContent>
)}
<TabsContent value="logs">
<div className="flex flex-col gap-4 pt-2.5">
<ShowDockerLogsCompose
serverId={data?.serverId || ""} serverId={data?.serverId || ""}
appName={data?.appName || ""} appName={data?.appName || ""}
appType={data?.composeType || "docker-compose"} appType={data?.composeType || "docker-compose"}
/> />
</div> </div>
</TabsContent> </TabsContent>
)}
<TabsContent value="logs"> <TabsContent value="deployments">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<ShowDockerLogsCompose <ShowDeploymentsCompose composeId={composeId} />
serverId={data?.serverId || ""} </div>
appName={data?.appName || ""} </TabsContent>
appType={data?.composeType || "docker-compose"}
/>
</div>
</TabsContent>
<TabsContent value="deployments"> <TabsContent value="domains">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<ShowDeploymentsCompose composeId={composeId} /> <ShowDomainsCompose composeId={composeId} />
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="advanced">
<TabsContent value="domains"> <div className="flex flex-col gap-4 pt-2.5">
<div className="flex flex-col gap-4 pt-2.5"> <AddCommandCompose composeId={composeId} />
<ShowDomainsCompose composeId={composeId} /> <ShowVolumesCompose composeId={composeId} />
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="advanced"> </Tabs>
<div className="flex flex-col gap-4 pt-2.5"> )}
<AddCommandCompose composeId={composeId} />
<ShowVolumesCompose composeId={composeId} />
</div>
</TabsContent>
</Tabs>
</div> </div>
); );
}; };

154
apps/dokploy/pages/dashboard/project/[projectId]/services/mariadb/[mariadbId].tsx
View File

@@ -30,7 +30,7 @@ import { appRouter } from "@/server/api/root";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { validateRequest } from "@dokploy/server"; import { validateRequest } from "@dokploy/server";
import { createServerSideHelpers } from "@trpc/react-query/server"; import { createServerSideHelpers } from "@trpc/react-query/server";
import { HelpCircle } from "lucide-react"; import { HelpCircle, ServerOff } from "lucide-react";
import type { import type {
GetServerSidePropsContext, GetServerSidePropsContext,
InferGetServerSidePropsType, InferGetServerSidePropsType,
@@ -137,79 +137,99 @@ const Mariadb = (
</div> </div>
</header> </header>
</div> </div>
<Tabs {data?.server?.serverStatus === "inactive" ? (
value={tab} <div className="flex h-[55vh] border-2 rounded-xl border-dashed p-4">
defaultValue="general" <div className="max-w-3xl mx-auto flex flex-col items-center justify-center self-center gap-3">
className="w-full" <ServerOff className="size-10 text-muted-foreground self-center" />
onValueChange={(e) => { <span className="text-center text-base text-muted-foreground">
setSab(e as TabState); This service is hosted on the server {data.server.name}, but this
const newPath = `/dashboard/project/${projectId}/services/mariadb/${mariadbId}?tab=${e}`; server has been disabled because your current plan doesn't include
enough servers. Please purchase more servers to regain access to
router.push(newPath, undefined, { shallow: true }); this application.
}} </span>
> <span className="text-center text-base text-muted-foreground">
<div className="flex flex-row items-center justify-between w-full gap-4"> Go to{" "}
<TabsList <Link href="/dashboard/settings/billing" className="text-primary">
className={cn( Billing
"md:grid md:w-fit max-md:overflow-y-scroll justify-start", </Link>
data?.serverId ? "md:grid-cols-5" : "md:grid-cols-6", </span>
)}
>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
{!data?.serverId && (
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
)}
<TabsTrigger value="backups">Backups</TabsTrigger>
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<UpdateMariadb mariadbId={mariadbId} />
{(auth?.rol === "admin" || user?.canDeleteServices) && (
<DeleteMariadb mariadbId={mariadbId} />
)}
</div> </div>
</div> </div>
) : (
<Tabs
value={tab}
defaultValue="general"
className="w-full"
onValueChange={(e) => {
setSab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/mariadb/${mariadbId}?tab=${e}`;
<TabsContent value="general"> router.push(newPath, undefined, { shallow: true });
<div className="flex flex-col gap-4 pt-2.5"> }}
<ShowGeneralMariadb mariadbId={mariadbId} /> >
<ShowInternalMariadbCredentials mariadbId={mariadbId} /> <div className="flex flex-row items-center justify-between w-full gap-4">
<ShowExternalMariadbCredentials mariadbId={mariadbId} /> <TabsList
className={cn(
"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
data?.serverId ? "md:grid-cols-5" : "md:grid-cols-6",
)}
>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
{!data?.serverId && (
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
)}
<TabsTrigger value="backups">Backups</TabsTrigger>
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<UpdateMariadb mariadbId={mariadbId} />
{(auth?.rol === "admin" || user?.canDeleteServices) && (
<DeleteMariadb mariadbId={mariadbId} />
)}
</div>
</div> </div>
</TabsContent>
<TabsContent value="environment"> <TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">
<ShowMariadbEnvironment mariadbId={mariadbId} />
</div>
</TabsContent>
{!data?.serverId && (
<TabsContent value="monitoring">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<DockerMonitoring appName={data?.appName || ""} /> <ShowGeneralMariadb mariadbId={mariadbId} />
<ShowInternalMariadbCredentials mariadbId={mariadbId} />
<ShowExternalMariadbCredentials mariadbId={mariadbId} />
</div> </div>
</TabsContent> </TabsContent>
)} <TabsContent value="environment">
<TabsContent value="logs"> <div className="flex flex-col gap-4 pt-2.5">
<div className="flex flex-col gap-4 pt-2.5"> <ShowMariadbEnvironment mariadbId={mariadbId} />
<ShowDockerLogs </div>
serverId={data?.serverId || ""} </TabsContent>
appName={data?.appName || ""} {!data?.serverId && (
/> <TabsContent value="monitoring">
</div> <div className="flex flex-col gap-4 pt-2.5">
</TabsContent> <DockerMonitoring appName={data?.appName || ""} />
<TabsContent value="backups"> </div>
<div className="flex flex-col gap-4 pt-2.5"> </TabsContent>
<ShowBackupMariadb mariadbId={mariadbId} /> )}
</div> <TabsContent value="logs">
</TabsContent> <div className="flex flex-col gap-4 pt-2.5">
<TabsContent value="advanced"> <ShowDockerLogs
<div className="flex flex-col gap-4 pt-2.5"> serverId={data?.serverId || ""}
<ShowAdvancedMariadb mariadbId={mariadbId} /> appName={data?.appName || ""}
</div> />
</TabsContent> </div>
</Tabs> </TabsContent>
<TabsContent value="backups">
<div className="flex flex-col gap-4 pt-2.5">
<ShowBackupMariadb mariadbId={mariadbId} />
</div>
</TabsContent>
<TabsContent value="advanced">
<div className="flex flex-col gap-4 pt-2.5">
<ShowAdvancedMariadb mariadbId={mariadbId} />
</div>
</TabsContent>
</Tabs>
)}
</div> </div>
); );
}; };

156
apps/dokploy/pages/dashboard/project/[projectId]/services/mongo/[mongoId].tsx
View File

@@ -30,7 +30,7 @@ import { appRouter } from "@/server/api/root";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { validateRequest } from "@dokploy/server"; import { validateRequest } from "@dokploy/server";
import { createServerSideHelpers } from "@trpc/react-query/server"; import { createServerSideHelpers } from "@trpc/react-query/server";
import { HelpCircle } from "lucide-react"; import { HelpCircle, ServerOff } from "lucide-react";
import type { import type {
GetServerSidePropsContext, GetServerSidePropsContext,
InferGetServerSidePropsType, InferGetServerSidePropsType,
@@ -138,80 +138,100 @@ const Mongo = (
</div> </div>
</header> </header>
</div> </div>
<Tabs {data?.server?.serverStatus === "inactive" ? (
value={tab} <div className="flex h-[55vh] border-2 rounded-xl border-dashed p-4">
defaultValue="general" <div className="max-w-3xl mx-auto flex flex-col items-center justify-center self-center gap-3">
className="w-full" <ServerOff className="size-10 text-muted-foreground self-center" />
onValueChange={(e) => { <span className="text-center text-base text-muted-foreground">
setSab(e as TabState); This service is hosted on the server {data.server.name}, but this
const newPath = `/dashboard/project/${projectId}/services/mongo/${mongoId}?tab=${e}`; server has been disabled because your current plan doesn't include
enough servers. Please purchase more servers to regain access to
router.push(newPath, undefined, { shallow: true }); this application.
}} </span>
> <span className="text-center text-base text-muted-foreground">
<div className="flex flex-row items-center justify-between w-full gap-4"> Go to{" "}
<TabsList <Link href="/dashboard/settings/billing" className="text-primary">
className={cn( Billing
"md:grid md:w-fit max-md:overflow-y-scroll justify-start", </Link>
data?.serverId ? "md:grid-cols-5" : "md:grid-cols-6", </span>
)}
>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
{!data?.serverId && (
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
)}
<TabsTrigger value="backups">Backups</TabsTrigger>
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<UpdateMongo mongoId={mongoId} />
{(auth?.rol === "admin" || user?.canDeleteServices) && (
<DeleteMongo mongoId={mongoId} />
)}
</div> </div>
</div> </div>
) : (
<Tabs
value={tab}
defaultValue="general"
className="w-full"
onValueChange={(e) => {
setSab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/mongo/${mongoId}?tab=${e}`;
<TabsContent value="general"> router.push(newPath, undefined, { shallow: true });
<div className="flex flex-col gap-4 pt-2.5"> }}
<ShowGeneralMongo mongoId={mongoId} /> >
<ShowInternalMongoCredentials mongoId={mongoId} /> <div className="flex flex-row items-center justify-between w-full gap-4">
<ShowExternalMongoCredentials mongoId={mongoId} /> <TabsList
className={cn(
"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
data?.serverId ? "md:grid-cols-5" : "md:grid-cols-6",
)}
>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
{!data?.serverId && (
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
)}
<TabsTrigger value="backups">Backups</TabsTrigger>
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<UpdateMongo mongoId={mongoId} />
{(auth?.rol === "admin" || user?.canDeleteServices) && (
<DeleteMongo mongoId={mongoId} />
)}
</div>
</div> </div>
</TabsContent>
<TabsContent value="environment"> <TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">
<ShowMongoEnvironment mongoId={mongoId} />
</div>
</TabsContent>
{!data?.serverId && (
<TabsContent value="monitoring">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<DockerMonitoring appName={data?.appName || ""} /> <ShowGeneralMongo mongoId={mongoId} />
<ShowInternalMongoCredentials mongoId={mongoId} />
<ShowExternalMongoCredentials mongoId={mongoId} />
</div> </div>
</TabsContent> </TabsContent>
)} <TabsContent value="environment">
<TabsContent value="logs"> <div className="flex flex-col gap-4 pt-2.5">
<div className="flex flex-col gap-4 pt-2.5"> <ShowMongoEnvironment mongoId={mongoId} />
<ShowDockerLogs </div>
serverId={data?.serverId || ""} </TabsContent>
appName={data?.appName || ""} {!data?.serverId && (
/> <TabsContent value="monitoring">
</div> <div className="flex flex-col gap-4 pt-2.5">
</TabsContent> <DockerMonitoring appName={data?.appName || ""} />
<TabsContent value="backups"> </div>
<div className="flex flex-col gap-4 pt-2.5"> </TabsContent>
<ShowBackupMongo mongoId={mongoId} /> )}
</div> <TabsContent value="logs">
</TabsContent> <div className="flex flex-col gap-4 pt-2.5">
<TabsContent value="advanced"> <ShowDockerLogs
<div className="flex flex-col gap-4 pt-2.5"> serverId={data?.serverId || ""}
<ShowAdvancedMongo mongoId={mongoId} /> appName={data?.appName || ""}
</div> />
</TabsContent> </div>
</Tabs> </TabsContent>
<TabsContent value="backups">
<div className="flex flex-col gap-4 pt-2.5">
<ShowBackupMongo mongoId={mongoId} />
</div>
</TabsContent>
<TabsContent value="advanced">
<div className="flex flex-col gap-4 pt-2.5">
<ShowAdvancedMongo mongoId={mongoId} />
</div>
</TabsContent>
</Tabs>
)}
</div> </div>
); );
}; };

156
apps/dokploy/pages/dashboard/project/[projectId]/services/mysql/[mysqlId].tsx
View File

@@ -30,7 +30,7 @@ import { appRouter } from "@/server/api/root";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { validateRequest } from "@dokploy/server"; import { validateRequest } from "@dokploy/server";
import { createServerSideHelpers } from "@trpc/react-query/server"; import { createServerSideHelpers } from "@trpc/react-query/server";
import { HelpCircle } from "lucide-react"; import { HelpCircle, ServerOff } from "lucide-react";
import type { import type {
GetServerSidePropsContext, GetServerSidePropsContext,
InferGetServerSidePropsType, InferGetServerSidePropsType,
@@ -137,80 +137,100 @@ const MySql = (
</div> </div>
</header> </header>
</div> </div>
<Tabs {data?.server?.serverStatus === "inactive" ? (
value={tab} <div className="flex h-[55vh] border-2 rounded-xl border-dashed p-4">
defaultValue="general" <div className="max-w-3xl mx-auto flex flex-col items-center justify-center self-center gap-3">
className="w-full" <ServerOff className="size-10 text-muted-foreground self-center" />
onValueChange={(e) => { <span className="text-center text-base text-muted-foreground">
setSab(e as TabState); This service is hosted on the server {data.server.name}, but this
const newPath = `/dashboard/project/${projectId}/services/mysql/${mysqlId}?tab=${e}`; server has been disabled because your current plan doesn't include
enough servers. Please purchase more servers to regain access to
router.push(newPath, undefined, { shallow: true }); this application.
}} </span>
> <span className="text-center text-base text-muted-foreground">
<div className="flex flex-row items-center justify-between w-full gap-4"> Go to{" "}
<TabsList <Link href="/dashboard/settings/billing" className="text-primary">
className={cn( Billing
"md:grid md:w-fit max-md:overflow-y-scroll justify-start", </Link>
data?.serverId ? "md:grid-cols-5" : "md:grid-cols-6", </span>
)}
>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
{!data?.serverId && (
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
)}
<TabsTrigger value="backups">Backups</TabsTrigger>
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<UpdateMysql mysqlId={mysqlId} />
{(auth?.rol === "admin" || user?.canDeleteServices) && (
<DeleteMysql mysqlId={mysqlId} />
)}
</div> </div>
</div> </div>
) : (
<Tabs
value={tab}
defaultValue="general"
className="w-full"
onValueChange={(e) => {
setSab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/mysql/${mysqlId}?tab=${e}`;
<TabsContent value="general"> router.push(newPath, undefined, { shallow: true });
<div className="flex flex-col gap-4 pt-2.5"> }}
<ShowGeneralMysql mysqlId={mysqlId} /> >
<ShowInternalMysqlCredentials mysqlId={mysqlId} /> <div className="flex flex-row items-center justify-between w-full gap-4">
<ShowExternalMysqlCredentials mysqlId={mysqlId} /> <TabsList
className={cn(
"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
data?.serverId ? "md:grid-cols-5" : "md:grid-cols-6",
)}
>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
{!data?.serverId && (
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
)}
<TabsTrigger value="backups">Backups</TabsTrigger>
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<UpdateMysql mysqlId={mysqlId} />
{(auth?.rol === "admin" || user?.canDeleteServices) && (
<DeleteMysql mysqlId={mysqlId} />
)}
</div>
</div> </div>
</TabsContent>
<TabsContent value="environment" className="w-full"> <TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">
<ShowMysqlEnvironment mysqlId={mysqlId} />
</div>
</TabsContent>
{!data?.serverId && (
<TabsContent value="monitoring">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<DockerMonitoring appName={data?.appName || ""} /> <ShowGeneralMysql mysqlId={mysqlId} />
<ShowInternalMysqlCredentials mysqlId={mysqlId} />
<ShowExternalMysqlCredentials mysqlId={mysqlId} />
</div> </div>
</TabsContent> </TabsContent>
)} <TabsContent value="environment" className="w-full">
<TabsContent value="logs"> <div className="flex flex-col gap-4 pt-2.5">
<div className="flex flex-col gap-4 pt-2.5"> <ShowMysqlEnvironment mysqlId={mysqlId} />
<ShowDockerLogs </div>
serverId={data?.serverId || ""} </TabsContent>
appName={data?.appName || ""} {!data?.serverId && (
/> <TabsContent value="monitoring">
</div> <div className="flex flex-col gap-4 pt-2.5">
</TabsContent> <DockerMonitoring appName={data?.appName || ""} />
<TabsContent value="backups"> </div>
<div className="flex flex-col gap-4 pt-2.5"> </TabsContent>
<ShowBackupMySql mysqlId={mysqlId} /> )}
</div> <TabsContent value="logs">
</TabsContent> <div className="flex flex-col gap-4 pt-2.5">
<TabsContent value="advanced"> <ShowDockerLogs
<div className="flex flex-col gap-4 pt-2.5"> serverId={data?.serverId || ""}
<ShowAdvancedMysql mysqlId={mysqlId} /> appName={data?.appName || ""}
</div> />
</TabsContent> </div>
</Tabs> </TabsContent>
<TabsContent value="backups">
<div className="flex flex-col gap-4 pt-2.5">
<ShowBackupMySql mysqlId={mysqlId} />
</div>
</TabsContent>
<TabsContent value="advanced">
<div className="flex flex-col gap-4 pt-2.5">
<ShowAdvancedMysql mysqlId={mysqlId} />
</div>
</TabsContent>
</Tabs>
)}
</div> </div>
); );
}; };

156
apps/dokploy/pages/dashboard/project/[projectId]/services/postgres/[postgresId].tsx
View File

@@ -30,7 +30,7 @@ import { appRouter } from "@/server/api/root";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { validateRequest } from "@dokploy/server"; import { validateRequest } from "@dokploy/server";
import { createServerSideHelpers } from "@trpc/react-query/server"; import { createServerSideHelpers } from "@trpc/react-query/server";
import { HelpCircle } from "lucide-react"; import { HelpCircle, ServerOff } from "lucide-react";
import type { import type {
GetServerSidePropsContext, GetServerSidePropsContext,
InferGetServerSidePropsType, InferGetServerSidePropsType,
@@ -138,80 +138,100 @@ const Postgresql = (
</div> </div>
</header> </header>
</div> </div>
<Tabs {data?.server?.serverStatus === "inactive" ? (
value={tab} <div className="flex h-[55vh] border-2 rounded-xl border-dashed p-4">
defaultValue="general" <div className="max-w-3xl mx-auto flex flex-col items-center justify-center self-center gap-3">
className="w-full" <ServerOff className="size-10 text-muted-foreground self-center" />
onValueChange={(e) => { <span className="text-center text-base text-muted-foreground">
setSab(e as TabState); This service is hosted on the server {data.server.name}, but this
const newPath = `/dashboard/project/${projectId}/services/postgres/${postgresId}?tab=${e}`; server has been disabled because your current plan doesn't include
enough servers. Please purchase more servers to regain access to
router.push(newPath, undefined, { shallow: true }); this application.
}} </span>
> <span className="text-center text-base text-muted-foreground">
<div className="flex flex-row items-center justify-between w-full gap-4"> Go to{" "}
<TabsList <Link href="/dashboard/settings/billing" className="text-primary">
className={cn( Billing
"md:grid md:w-fit max-md:overflow-y-scroll justify-start", </Link>
data?.serverId ? "md:grid-cols-5" : "md:grid-cols-6", </span>
)}
>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
{!data?.serverId && (
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
)}
<TabsTrigger value="backups">Backups</TabsTrigger>
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<UpdatePostgres postgresId={postgresId} />
{(auth?.rol === "admin" || user?.canDeleteServices) && (
<DeletePostgres postgresId={postgresId} />
)}
</div> </div>
</div> </div>
) : (
<Tabs
value={tab}
defaultValue="general"
className="w-full"
onValueChange={(e) => {
setSab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/postgres/${postgresId}?tab=${e}`;
<TabsContent value="general"> router.push(newPath, undefined, { shallow: true });
<div className="flex flex-col gap-4 pt-2.5"> }}
<ShowGeneralPostgres postgresId={postgresId} /> >
<ShowInternalPostgresCredentials postgresId={postgresId} /> <div className="flex flex-row items-center justify-between w-full gap-4">
<ShowExternalPostgresCredentials postgresId={postgresId} /> <TabsList
className={cn(
"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
data?.serverId ? "md:grid-cols-5" : "md:grid-cols-6",
)}
>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
{!data?.serverId && (
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
)}
<TabsTrigger value="backups">Backups</TabsTrigger>
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<UpdatePostgres postgresId={postgresId} />
{(auth?.rol === "admin" || user?.canDeleteServices) && (
<DeletePostgres postgresId={postgresId} />
)}
</div>
</div> </div>
</TabsContent>
<TabsContent value="environment"> <TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">
<ShowPostgresEnvironment postgresId={postgresId} />
</div>
</TabsContent>
{!data?.serverId && (
<TabsContent value="monitoring">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<DockerMonitoring appName={data?.appName || ""} /> <ShowGeneralPostgres postgresId={postgresId} />
<ShowInternalPostgresCredentials postgresId={postgresId} />
<ShowExternalPostgresCredentials postgresId={postgresId} />
</div> </div>
</TabsContent> </TabsContent>
)} <TabsContent value="environment">
<TabsContent value="logs"> <div className="flex flex-col gap-4 pt-2.5">
<div className="flex flex-col gap-4 pt-2.5"> <ShowPostgresEnvironment postgresId={postgresId} />
<ShowDockerLogs </div>
serverId={data?.serverId || ""} </TabsContent>
appName={data?.appName || ""} {!data?.serverId && (
/> <TabsContent value="monitoring">
</div> <div className="flex flex-col gap-4 pt-2.5">
</TabsContent> <DockerMonitoring appName={data?.appName || ""} />
<TabsContent value="backups"> </div>
<div className="flex flex-col gap-4 pt-2.5"> </TabsContent>
<ShowBackupPostgres postgresId={postgresId} /> )}
</div> <TabsContent value="logs">
</TabsContent> <div className="flex flex-col gap-4 pt-2.5">
<TabsContent value="advanced"> <ShowDockerLogs
<div className="flex flex-col gap-4 pt-2.5"> serverId={data?.serverId || ""}
<ShowAdvancedPostgres postgresId={postgresId} /> appName={data?.appName || ""}
</div> />
</TabsContent> </div>
</Tabs> </TabsContent>
<TabsContent value="backups">
<div className="flex flex-col gap-4 pt-2.5">
<ShowBackupPostgres postgresId={postgresId} />
</div>
</TabsContent>
<TabsContent value="advanced">
<div className="flex flex-col gap-4 pt-2.5">
<ShowAdvancedPostgres postgresId={postgresId} />
</div>
</TabsContent>
</Tabs>
)}
</div> </div>
); );
}; };

144
apps/dokploy/pages/dashboard/project/[projectId]/services/redis/[redisId].tsx
View File

@@ -29,7 +29,7 @@ import { appRouter } from "@/server/api/root";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { validateRequest } from "@dokploy/server"; import { validateRequest } from "@dokploy/server";
import { createServerSideHelpers } from "@trpc/react-query/server"; import { createServerSideHelpers } from "@trpc/react-query/server";
import { HelpCircle } from "lucide-react"; import { HelpCircle, ServerOff } from "lucide-react";
import type { import type {
GetServerSidePropsContext, GetServerSidePropsContext,
InferGetServerSidePropsType, InferGetServerSidePropsType,
@@ -137,74 +137,94 @@ const Redis = (
</div> </div>
</header> </header>
</div> </div>
<Tabs {data?.server?.serverStatus === "inactive" ? (
value={tab} <div className="flex h-[55vh] border-2 rounded-xl border-dashed p-4">
defaultValue="general" <div className="max-w-3xl mx-auto flex flex-col items-center justify-center self-center gap-3">
className="w-full" <ServerOff className="size-10 text-muted-foreground self-center" />
onValueChange={(e) => { <span className="text-center text-base text-muted-foreground">
setSab(e as TabState); This service is hosted on the server {data.server.name}, but this
const newPath = `/dashboard/project/${projectId}/services/redis/${redisId}?tab=${e}`; server has been disabled because your current plan doesn't include
enough servers. Please purchase more servers to regain access to
router.push(newPath, undefined, { shallow: true }); this application.
}} </span>
> <span className="text-center text-base text-muted-foreground">
<div className="flex flex-row items-center justify-between w-full gap-4"> Go to{" "}
<TabsList <Link href="/dashboard/settings/billing" className="text-primary">
className={cn( Billing
"md:grid md:w-fit max-md:overflow-y-scroll justify-start", </Link>
data?.serverId ? "md:grid-cols-4" : "md:grid-cols-5", </span>
)}
>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
{!data?.serverId && (
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
)}
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<UpdateRedis redisId={redisId} />
{(auth?.rol === "admin" || user?.canDeleteServices) && (
<DeleteRedis redisId={redisId} />
)}
</div> </div>
</div> </div>
) : (
<Tabs
value={tab}
defaultValue="general"
className="w-full"
onValueChange={(e) => {
setSab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/redis/${redisId}?tab=${e}`;
<TabsContent value="general"> router.push(newPath, undefined, { shallow: true });
<div className="flex flex-col gap-4 pt-2.5"> }}
<ShowGeneralRedis redisId={redisId} /> >
<ShowInternalRedisCredentials redisId={redisId} /> <div className="flex flex-row items-center justify-between w-full gap-4">
<ShowExternalRedisCredentials redisId={redisId} /> <TabsList
className={cn(
"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
data?.serverId ? "md:grid-cols-4" : "md:grid-cols-5",
)}
>
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
{!data?.serverId && (
<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
)}
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<div className="flex flex-row gap-2">
<UpdateRedis redisId={redisId} />
{(auth?.rol === "admin" || user?.canDeleteServices) && (
<DeleteRedis redisId={redisId} />
)}
</div>
</div> </div>
</TabsContent>
<TabsContent value="environment"> <TabsContent value="general">
<div className="flex flex-col gap-4 pt-2.5">
<ShowRedisEnvironment redisId={redisId} />
</div>
</TabsContent>
{!data?.serverId && (
<TabsContent value="monitoring">
<div className="flex flex-col gap-4 pt-2.5"> <div className="flex flex-col gap-4 pt-2.5">
<DockerMonitoring appName={data?.appName || ""} /> <ShowGeneralRedis redisId={redisId} />
<ShowInternalRedisCredentials redisId={redisId} />
<ShowExternalRedisCredentials redisId={redisId} />
</div> </div>
</TabsContent> </TabsContent>
)} <TabsContent value="environment">
<TabsContent value="logs"> <div className="flex flex-col gap-4 pt-2.5">
<div className="flex flex-col gap-4 pt-2.5"> <ShowRedisEnvironment redisId={redisId} />
<ShowDockerLogs </div>
serverId={data?.serverId || ""} </TabsContent>
appName={data?.appName || ""} {!data?.serverId && (
/> <TabsContent value="monitoring">
</div> <div className="flex flex-col gap-4 pt-2.5">
</TabsContent> <DockerMonitoring appName={data?.appName || ""} />
<TabsContent value="advanced"> </div>
<div className="flex flex-col gap-4 pt-2.5"> </TabsContent>
<ShowAdvancedRedis redisId={redisId} /> )}
</div> <TabsContent value="logs">
</TabsContent> <div className="flex flex-col gap-4 pt-2.5">
</Tabs> <ShowDockerLogs
serverId={data?.serverId || ""}
appName={data?.appName || ""}
/>
</div>
</TabsContent>
<TabsContent value="advanced">
<div className="flex flex-col gap-4 pt-2.5">
<ShowAdvancedRedis redisId={redisId} />
</div>
</TabsContent>
</Tabs>
)}
</div> </div>
); );
}; };

1
apps/dokploy/server/api/routers/compose.ts
View File

@@ -252,7 +252,6 @@ export const composeRouter = createTRPCRouter({
descriptionLog: "", descriptionLog: "",
server: !!compose.serverId, server: !!compose.serverId,
}; };
console.log(jobData);
if (IS_CLOUD && compose.serverId) { if (IS_CLOUD && compose.serverId) {
jobData.serverId = compose.serverId; jobData.serverId = compose.serverId;