feat(multi server): add env and toggle dashboard remote

apps/dokploy/components/dashboard/settings/servers/show-servers.tsx

@@ -29,14 +29,13 @@ import { SetupServer } from "./setup-server";
 import { UpdateServer } from "./update-server";
 import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal";
 import { ShowModalLogs } from "../web-server/show-modal-logs";
+import { ToggleTraefikDashboard } from "./toggle-traefik-dashboard";
+import { EditTraefikEnv } from "../web-server/edit-traefik-env";
 export const ShowServers = () => {
 	const { data, refetch } = api.server.all.useQuery();
 	const { mutateAsync } = api.server.remove.useMutation();
 	const { data: sshKeys } = api.sshKey.all.useQuery();
 
-	const { mutateAsync: toggleDashboard, isLoading: toggleDashboardIsLoading } =
-		api.settings.toggleDashboard.useMutation();
-
 	const {
 		mutateAsync: cleanDockerBuilder,
 		isLoading: cleanDockerBuilderIsLoading,
@@ -63,9 +62,6 @@ export const ShowServers = () => {
 	const { mutateAsync: cleanAll, isLoading: cleanAllIsLoading } =
 		api.settings.cleanAll.useMutation();
 
-	const { data: haveTraefikDashboardPortEnabled, refetch: refetchDashboard } =
-		api.settings.haveTraefikDashboardPortEnabled.useQuery();
-
 	return (
 		<div className="p-6 space-y-6">
 			<div className="space-y-2 flex flex-row justify-between items-end">
@@ -226,35 +222,18 @@ export const ShowServers = () => {
 														>
 															<span>Watch logs</span>
 														</ShowModalLogs>
+														<EditTraefikEnv serverId={server.serverId}>
+															<DropdownMenuItem
+																onSelect={(e) => e.preventDefault()}
+																className="w-full cursor-pointer space-x-3"
+															>
+																<span>Modify Env</span>
+															</DropdownMenuItem>
+														</EditTraefikEnv>
+														<ToggleTraefikDashboard
+															serverId={server.serverId}
+														/>
 
-														{/* <DropdownMenuItem
-															onClick={async () => {
-																await toggleDashboard({
-																	enableDashboard:
-																		!haveTraefikDashboardPortEnabled,
-																	serverId: server.serverId,
-																})
-																	.then(async () => {
-																		toast.success(
-																			`${haveTraefikDashboardPortEnabled ? "Disabled" : "Enabled"} Dashboard`,
-																		);
-																		refetchDashboard();
-																	})
-																	.catch(() => {
-																		toast.error(
-																			`${haveTraefikDashboardPortEnabled ? "Disabled" : "Enabled"} Dashboard`,
-																		);
-																	});
-															}}
-															className="w-full cursor-pointer space-x-3"
-														>
-															<span>
-																{haveTraefikDashboardPortEnabled
-																	? "Disable"
-																	: "Enable"}{" "}
-																Dashboard
-															</span>
-														</DropdownMenuItem> */}
 														<DropdownMenuSeparator />
 
 														<DropdownMenuLabel>Storage</DropdownMenuLabel>

apps/dokploy/components/dashboard/settings/servers/toggle-traefik-dashboard.tsx

@@ -0,0 +1,48 @@
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { api } from "@/utils/api";
+import { toast } from "sonner";
+
+interface Props {
+	serverId: string;
+}
+export const ToggleTraefikDashboard = ({ serverId }: Props) => {
+	const { mutateAsync: toggleDashboard, isLoading: toggleDashboardIsLoading } =
+		api.settings.toggleDashboard.useMutation();
+	const { data: haveTraefikDashboardPortEnabled, refetch: refetchDashboard } =
+		api.settings.haveTraefikDashboardPortEnabled.useQuery(
+			{
+				serverId,
+			},
+			{
+				enabled: !!serverId,
+			},
+		);
+	return (
+		<>
+			<DropdownMenuItem
+				onClick={async () => {
+					await toggleDashboard({
+						enableDashboard: !haveTraefikDashboardPortEnabled,
+						serverId: serverId,
+					})
+						.then(async () => {
+							toast.success(
+								`${haveTraefikDashboardPortEnabled ? "Disabled" : "Enabled"} Dashboard`,
+							);
+							refetchDashboard();
+						})
+						.catch(() => {
+							toast.error(
+								`${haveTraefikDashboardPortEnabled ? "Disabled" : "Enabled"} Dashboard`,
+							);
+						});
+				}}
+				className="w-full cursor-pointer space-x-3"
+			>
+				<span>
+					{haveTraefikDashboardPortEnabled ? "Disable" : "Enable"} Dashboard
+				</span>
+			</DropdownMenuItem>
+		</>
+	);
+};

apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx

@@ -65,6 +65,7 @@ export const EditTraefikEnv = ({ children, serverId }: Props) => {
 	const onSubmit = async (data: Schema) => {
 		await mutateAsync({
 			env: data.env,
+			serverId,
 		})
 			.then(async () => {
 				toast.success("Traefik Env Updated");