From 73f93f8a134df48490a7833286432bbe2f92ebbb Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sun, 26 Jan 2025 17:49:51 -0600
Subject: [PATCH] refactor: add server IP address

---
 .../components/dashboard/project/add-application.tsx  | 11 ++++++++---
 .../components/dashboard/project/add-compose.tsx      | 10 ++++++++--
 .../components/dashboard/project/add-template.tsx     | 11 +++++++++--
 .../settings/certificates/add-certificate.tsx         | 10 ++++++++--
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/apps/dokploy/components/dashboard/project/add-application.tsx b/apps/dokploy/components/dashboard/project/add-application.tsx
index 2c30df8d..da30cfee 100644
--- a/apps/dokploy/components/dashboard/project/add-application.tsx
+++ b/apps/dokploy/components/dashboard/project/add-application.tsx
@@ -70,7 +70,7 @@ interface Props {
 
 export const AddApplication = ({ projectId, projectName }: Props) => {
 	const utils = api.useUtils();
-
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const [visible, setVisible] = useState(false);
 	const slug = slugify(projectName);
 	const { data: servers } = api.server.withSSHKey.useQuery();
@@ -166,7 +166,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 										<Tooltip>
 											<TooltipTrigger asChild>
 												<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
-													Select a Server (Optional)
+													Select a Server {!isCloud ? "(Optional)" : ""}
 													<HelpCircle className="size-4 text-muted-foreground" />
 												</FormLabel>
 											</TooltipTrigger>
@@ -197,7 +197,12 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 														key={server.serverId}
 														value={server.serverId}
 													>
-														{server.name}
+														<span className="flex items-center gap-2 justify-between w-full">
+															<span>{server.name}</span>
+															<span className="text-muted-foreground text-xs self-center">
+																{server.ipAddress}
+															</span>
+														</span>
 													</SelectItem>
 												))}
 												<SelectLabel>Servers ({servers?.length})</SelectLabel>
diff --git a/apps/dokploy/components/dashboard/project/add-compose.tsx b/apps/dokploy/components/dashboard/project/add-compose.tsx
index dc753e94..ea8690a8 100644
--- a/apps/dokploy/components/dashboard/project/add-compose.tsx
+++ b/apps/dokploy/components/dashboard/project/add-compose.tsx
@@ -73,6 +73,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 	const utils = api.useUtils();
 	const [visible, setVisible] = useState(false);
 	const slug = slugify(projectName);
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: servers } = api.server.withSSHKey.useQuery();
 	const { mutateAsync, isLoading, error, isError } =
 		api.compose.create.useMutation();
@@ -173,7 +174,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 										<Tooltip>
 											<TooltipTrigger asChild>
 												<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
-													Select a Server (Optional)
+													Select a Server {!isCloud ? "(Optional)" : ""}
 													<HelpCircle className="size-4 text-muted-foreground" />
 												</FormLabel>
 											</TooltipTrigger>
@@ -204,7 +205,12 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 														key={server.serverId}
 														value={server.serverId}
 													>
-														{server.name}
+														<span className="flex items-center gap-2 justify-between w-full">
+															<span>{server.name}</span>
+															<span className="text-muted-foreground text-xs self-center">
+																{server.ipAddress}
+															</span>
+														</span>
 													</SelectItem>
 												))}
 												<SelectLabel>Servers ({servers?.length})</SelectLabel>
diff --git a/apps/dokploy/components/dashboard/project/add-template.tsx b/apps/dokploy/components/dashboard/project/add-template.tsx
index bc8929b2..cc6962aa 100644
--- a/apps/dokploy/components/dashboard/project/add-template.tsx
+++ b/apps/dokploy/components/dashboard/project/add-template.tsx
@@ -80,6 +80,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 	const [viewMode, setViewMode] = useState<"detailed" | "icon">("detailed");
 	const [selectedTags, setSelectedTags] = useState<string[]>([]);
 	const { data } = api.compose.templates.useQuery();
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: servers } = api.server.withSSHKey.useQuery();
 	const { data: tags, isLoading: isLoadingTags } =
 		api.compose.getTags.useQuery();
@@ -372,7 +373,8 @@ export const AddTemplate = ({ projectId }: Props) => {
 																<Tooltip>
 																	<TooltipTrigger asChild>
 																		<Label className="break-all w-fit flex flex-row gap-1 items-center pb-2 pt-3.5">
-																			Select a Server (Optional)
+																			Select a Server{" "}
+																			{!isCloud ? "(Optional)" : ""}
 																			<HelpCircle className="size-4 text-muted-foreground" />
 																		</Label>
 																	</TooltipTrigger>
@@ -405,7 +407,12 @@ export const AddTemplate = ({ projectId }: Props) => {
 																				key={server.serverId}
 																				value={server.serverId}
 																			>
-																				{server.name}
+																				<span className="flex items-center gap-2 justify-between w-full">
+																					<span>{server.name}</span>
+																					<span className="text-muted-foreground text-xs self-center">
+																						{server.ipAddress}
+																					</span>
+																				</span>
 																			</SelectItem>
 																		))}
 																		<SelectLabel>
diff --git a/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx b/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
index 3d03d7c6..c6546f2d 100644
--- a/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
+++ b/apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx
@@ -61,6 +61,7 @@ export const AddCertificate = () => {
 	const [open, setOpen] = useState(false);
 	const utils = api.useUtils();
 
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { mutateAsync, isError, error, isLoading } =
 		api.certificates.create.useMutation();
 	const { data: servers } = api.server.withSSHKey.useQuery();
@@ -181,7 +182,7 @@ export const AddCertificate = () => {
 										<Tooltip>
 											<TooltipTrigger asChild>
 												<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
-													Select a Server (Optional)
+													Select a Server {!isCloud && "(Optional)"}
 													<HelpCircle className="size-4 text-muted-foreground" />
 												</FormLabel>
 											</TooltipTrigger>
@@ -202,7 +203,12 @@ export const AddCertificate = () => {
 														key={server.serverId}
 														value={server.serverId}
 													>
-														{server.name}
+														<span className="flex items-center gap-2 justify-between w-full">
+															<span>{server.name}</span>
+															<span className="text-muted-foreground text-xs self-center">
+																{server.ipAddress}
+															</span>
+														</span>
 													</SelectItem>
 												))}
 												<SelectLabel>Servers ({servers?.length})</SelectLabel>