diff --git a/apps/dokploy/components/dashboard/application/general/show.tsx b/apps/dokploy/components/dashboard/application/general/show.tsx
index 2f066280..b8ebca50 100644
--- a/apps/dokploy/components/dashboard/application/general/show.tsx
+++ b/apps/dokploy/components/dashboard/application/general/show.tsx
@@ -10,289 +10,304 @@ import {
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { api } from "@/utils/api";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import {
Ban,
CheckCircle2,
Hammer,
- HelpCircle,
RefreshCcw,
+ Rocket,
Terminal,
} from "lucide-react";
import { useRouter } from "next/router";
import { toast } from "sonner";
import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
interface Props {
- applicationId: string;
+ applicationId: string;
}
export const ShowGeneralApplication = ({ applicationId }: Props) => {
- const router = useRouter();
- const { data, refetch } = api.application.one.useQuery(
- {
- applicationId,
- },
- { enabled: !!applicationId },
- );
- const { mutateAsync: update } = api.application.update.useMutation();
- const { mutateAsync: start, isLoading: isStarting } =
- api.application.start.useMutation();
- const { mutateAsync: stop, isLoading: isStopping } =
- api.application.stop.useMutation();
+ const router = useRouter();
+ const { data, refetch } = api.application.one.useQuery(
+ {
+ applicationId,
+ },
+ { enabled: !!applicationId }
+ );
+ const { mutateAsync: update } = api.application.update.useMutation();
+ const { mutateAsync: start, isLoading: isStarting } =
+ api.application.start.useMutation();
+ const { mutateAsync: stop, isLoading: isStopping } =
+ api.application.stop.useMutation();
- const { mutateAsync: deploy } = api.application.deploy.useMutation();
+ const { mutateAsync: deploy } = api.application.deploy.useMutation();
- const { mutateAsync: reload, isLoading: isReloading } =
- api.application.reload.useMutation();
+ const { mutateAsync: reload, isLoading: isReloading } =
+ api.application.reload.useMutation();
- const { mutateAsync: redeploy } = api.application.redeploy.useMutation();
+ const { mutateAsync: redeploy } = api.application.redeploy.useMutation();
- return (
- <>
-
-
- Deploy Settings
-
-
-
- {
- await deploy({
- applicationId: applicationId,
- })
- .then(() => {
- toast.success("Application deployed successfully");
- refetch();
- router.push(
- `/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
- );
- })
- .catch(() => {
- toast.error("Error deploying application");
- });
- }}
- >
-
- Deploy
-
-
-
-
-
-
- Downloads the source code and performs a complete build
-
-
-
-
-
-
- {
- await reload({
- applicationId: applicationId,
- appName: data?.appName || "",
- })
- .then(() => {
- toast.success("Application reloaded successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error reloading application");
- });
- }}
- >
-
- Reload
-
-
- {
- await redeploy({
- applicationId: applicationId,
- })
- .then(() => {
- toast.success("Application rebuilt successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error rebuilding application");
- });
- }}
- >
-
- Rebuild
-
-
-
-
-
-
- Only rebuilds the application without downloading new
- code
-
-
-
-
-
-
+ return (
+ <>
+
+
+ Deploy Settings
+
+
+
+ {
+ await deploy({
+ applicationId: applicationId,
+ })
+ .then(() => {
+ toast.success("Application deployed successfully");
+ refetch();
+ router.push(
+ `/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`
+ );
+ })
+ .catch(() => {
+ toast.error("Error deploying application");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+
+ Downloads the source code and performs a complete build
+
+
+
+
+
+ {
+ await reload({
+ applicationId: applicationId,
+ appName: data?.appName || "",
+ })
+ .then(() => {
+ toast.success("Application reloaded successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error reloading application");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+
+ Reload the application when you change configuration or
+ environment variables
+
+
+
+
+
+ {
+ await redeploy({
+ applicationId: applicationId,
+ })
+ .then(() => {
+ toast.success("Application rebuilt successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error rebuilding application");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+
+ Only rebuilds the application without downloading new code
+
+
+
+
+
- {data?.applicationStatus === "idle" ? (
- {
- await start({
- applicationId: applicationId,
- })
- .then(() => {
- toast.success("Application started successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error starting application");
- });
- }}
- >
-
- Start
-
-
-
-
-
-
- Start the application (requires a previous successful
- build)
-
-
-
-
-
-
- ) : (
- {
- await stop({
- applicationId: applicationId,
- })
- .then(() => {
- toast.success("Application stopped successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error stopping application");
- });
- }}
- >
-
- Stop
-
-
-
-
-
- Stop the currently running application
-
-
-
-
-
- )}
-
-
-
-
-
-
- Autodeploy
- {
- await update({
- applicationId,
- autoDeploy: enabled,
- })
- .then(async () => {
- toast.success("Auto Deploy Updated");
- await refetch();
- })
- .catch(() => {
- toast.error("Error updating Auto Deploy");
- });
- }}
- className="flex flex-row gap-2 items-center"
- />
-
+ {data?.applicationStatus === "idle" ? (
+ {
+ await start({
+ applicationId: applicationId,
+ })
+ .then(() => {
+ toast.success("Application started successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error starting application");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+
+ Start the application (requires a previous successful
+ build)
+
+
+
+
+
+ ) : (
+ {
+ await stop({
+ applicationId: applicationId,
+ })
+ .then(() => {
+ toast.success("Application stopped successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error stopping application");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+ Stop the currently running application
+
+
+
+
+ )}
+
+
+
+
+
+
+ Autodeploy
+ {
+ await update({
+ applicationId,
+ autoDeploy: enabled,
+ })
+ .then(async () => {
+ toast.success("Auto Deploy Updated");
+ await refetch();
+ })
+ .catch(() => {
+ toast.error("Error updating Auto Deploy");
+ });
+ }}
+ className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+ />
+
-
- Clean Cache
- {
- await update({
- applicationId,
- cleanCache: enabled,
- })
- .then(async () => {
- toast.success("Clean Cache Updated");
- await refetch();
- })
- .catch(() => {
- toast.error("Error updating Clean Cache");
- });
- }}
- className="flex flex-row gap-2 items-center"
- />
-
-
-
-
+ Clean Cache
+ {
+ await update({
+ applicationId,
+ cleanCache: enabled,
+ })
+ .then(async () => {
+ toast.success("Clean Cache Updated");
+ await refetch();
+ })
+ .catch(() => {
+ toast.error("Error updating Clean Cache");
+ });
+ }}
+ className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+ />
+
+
+
+
-
- {
- await deploy({
- composeId: composeId,
- })
- .then(() => {
- toast.success("Compose deployed successfully");
- refetch();
- router.push(
- `/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
- );
- })
- .catch(() => {
- toast.error("Error deploying compose");
- });
- }}
- >
-
- Deploy
-
-
-
-
-
- Downloads the source code and performs a complete build
-
-
-
-
-
- {
- await redeploy({
- composeId: composeId,
- })
- .then(() => {
- toast.success("Compose rebuilt successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error rebuilding compose");
- });
- }}
- >
-
- Rebuild
-
-
-
-
-
- Only rebuilds the compose without downloading new code
-
-
-
-
-
- {data?.composeType === "docker-compose" &&
- data?.composeStatus === "idle" ? (
- {
- await start({
- composeId: composeId,
- })
- .then(() => {
- toast.success("Compose started successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error starting compose");
- });
- }}
- >
-
- Start
-
-
-
-
-
-
- Start the compose (requires a previous successful build)
-
-
-
-
-
-
- ) : (
- {
- await stop({
- composeId: composeId,
- })
- .then(() => {
- toast.success("Compose stopped successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error stopping compose");
- });
- }}
- >
-
- Stop
-
-
-
-
-
- Stop the currently running compose
-
-
-
-
-
- )}
-
-
-
-
-
-
- Autodeploy
- {
- await update({
- composeId,
- autoDeploy: enabled,
- })
- .then(async () => {
- toast.success("Auto Deploy Updated");
- await refetch();
- })
- .catch(() => {
- toast.error("Error updating Auto Deploy");
- });
- }}
- className="flex flex-row gap-2 items-center"
- />
-
-
+
+ {
+ await deploy({
+ composeId: composeId,
+ })
+ .then(() => {
+ toast.success("Compose deployed successfully");
+ refetch();
+ router.push(
+ `/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`
+ );
+ })
+ .catch(() => {
+ toast.error("Error deploying compose");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+ Downloads the source code and performs a complete build
+
+
+
+
+ {
+ await redeploy({
+ composeId: composeId,
+ })
+ .then(() => {
+ toast.success("Compose reloaded successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error reloading compose");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+
+ Reload the compose when you change configuration or
+ environment variables
+
+
+
+
+
+ {data?.composeType === "docker-compose" &&
+ data?.composeStatus === "idle" ? (
+ {
+ await start({
+ composeId: composeId,
+ })
+ .then(() => {
+ toast.success("Compose started successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error starting compose");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+
+ Start the compose (requires a previous successful build)
+
+
+
+
+
+ ) : (
+ {
+ await stop({
+ composeId: composeId,
+ })
+ .then(() => {
+ toast.success("Compose stopped successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error stopping compose");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+ Stop the currently running compose
+
+
+
+
+ )}
+
+
+
+
+
+
+ Autodeploy
+ {
+ await update({
+ composeId,
+ autoDeploy: enabled,
+ })
+ .then(async () => {
+ toast.success("Auto Deploy Updated");
+ await refetch();
+ })
+ .catch(() => {
+ toast.error("Error updating Auto Deploy");
+ });
+ }}
+ className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+ />
+
+
;
interface Props {
- mariadbId: string;
+ mariadbId: string;
}
export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
- const { data: ip } = api.settings.getIp.useQuery();
- const { data, refetch } = api.mariadb.one.useQuery({ mariadbId });
- const { mutateAsync, isLoading } = api.mariadb.saveExternalPort.useMutation();
- const [connectionUrl, setConnectionUrl] = useState("");
- const getIp = data?.server?.ipAddress || ip;
- const form = useForm({
- defaultValues: {},
- resolver: zodResolver(DockerProviderSchema),
- });
+ const { data: ip } = api.settings.getIp.useQuery();
+ const { data, refetch } = api.mariadb.one.useQuery({ mariadbId });
+ const { mutateAsync, isLoading } = api.mariadb.saveExternalPort.useMutation();
+ const [connectionUrl, setConnectionUrl] = useState("");
+ const getIp = data?.server?.ipAddress || ip;
+ const form = useForm({
+ defaultValues: {},
+ resolver: zodResolver(DockerProviderSchema),
+ });
- useEffect(() => {
- if (data?.externalPort) {
- form.reset({
- externalPort: data.externalPort,
- });
- }
- }, [form.reset, data, form]);
+ useEffect(() => {
+ if (data?.externalPort) {
+ form.reset({
+ externalPort: data.externalPort,
+ });
+ }
+ }, [form.reset, data, form]);
- const onSubmit = async (values: DockerProvider) => {
- await mutateAsync({
- externalPort: values.externalPort,
- mariadbId,
- })
- .then(async () => {
- toast.success("External Port updated");
- await refetch();
- })
- .catch(() => {
- toast.error("Error saving the external port");
- });
- };
+ const onSubmit = async (values: DockerProvider) => {
+ await mutateAsync({
+ externalPort: values.externalPort,
+ mariadbId,
+ })
+ .then(async () => {
+ toast.success("External Port updated");
+ await refetch();
+ })
+ .catch(() => {
+ toast.error("Error saving the external port");
+ });
+ };
- useEffect(() => {
- const buildConnectionUrl = () => {
- const port = form.watch("externalPort") || data?.externalPort;
+ useEffect(() => {
+ const buildConnectionUrl = () => {
+ const port = form.watch("externalPort") || data?.externalPort;
- return `mariadb://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
- };
+ return `mariadb://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
+ };
- setConnectionUrl(buildConnectionUrl());
- }, [
- data?.appName,
- data?.externalPort,
- data?.databasePassword,
- form,
- data?.databaseName,
- data?.databaseUser,
- getIp,
- ]);
- return (
- <>
-
-
-
- External Credentials
-
- In order to make the database reachable trought internet is
- required to set a port, make sure the port is not used by another
- application or database
-
-
-
- {!getIp && (
-
- You need to set an IP address in your{" "}
-
- )}
-
+
+
+
+
([]);
- const [isDeploying, setIsDeploying] = useState(false);
- api.mariadb.deployWithLogs.useSubscription(
- {
- mariadbId: mariadbId,
- },
- {
- enabled: isDeploying,
- onData(log) {
- if (!isDrawerOpen) {
- setIsDrawerOpen(true);
- }
+ const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+ const [filteredLogs, setFilteredLogs] = useState([]);
+ const [isDeploying, setIsDeploying] = useState(false);
+ api.mariadb.deployWithLogs.useSubscription(
+ {
+ mariadbId: mariadbId,
+ },
+ {
+ enabled: isDeploying,
+ onData(log) {
+ if (!isDrawerOpen) {
+ setIsDrawerOpen(true);
+ }
- if (log === "Deployment completed successfully!") {
- setIsDeploying(false);
- }
- const parsedLogs = parseLogs(log);
- setFilteredLogs((prev) => [...prev, ...parsedLogs]);
- },
- onError(error) {
- console.error("Deployment logs error:", error);
- setIsDeploying(false);
- },
- },
- );
+ if (log === "Deployment completed successfully!") {
+ setIsDeploying(false);
+ }
+ const parsedLogs = parseLogs(log);
+ setFilteredLogs((prev) => [...prev, ...parsedLogs]);
+ },
+ onError(error) {
+ console.error("Deployment logs error:", error);
+ setIsDeploying(false);
+ },
+ }
+ );
- return (
- <>
-
-
-
- Deploy Settings
-
-
-
- {
- setIsDeploying(true);
- await new Promise((resolve) => setTimeout(resolve, 1000));
- refetch();
- }}
- >
-
- Deploy
-
-
-
-
-
- Downloads and sets up the MariaDB database
-
-
-
-
-
- {
- await reload({
- mariadbId: mariadbId,
- appName: data?.appName || "",
- })
- .then(() => {
- toast.success("Mariadb reloaded successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error reloading Mariadb");
- });
- }}
- >
-
- Reload
-
-
-
-
-
- Restart the MariaDB service without rebuilding
-
-
-
-
-
- {data?.applicationStatus === "idle" ? (
- {
- await start({
- mariadbId: mariadbId,
- })
- .then(() => {
- toast.success("Mariadb started successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error starting Mariadb");
- });
- }}
- >
-
- Start
-
-
-
-
-
-
- Start the MariaDB database (requires a previous
- successful setup)
-
-
-
-
-
-
- ) : (
- {
- await stop({
- mariadbId: mariadbId,
- })
- .then(() => {
- toast.success("Mariadb stopped successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error stopping Mariadb");
- });
- }}
- >
-
- Stop
-
-
-
-
-
- Stop the currently running MariaDB database
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
{
- setIsDrawerOpen(false);
- setFilteredLogs([]);
- setIsDeploying(false);
- refetch();
- }}
- filteredLogs={filteredLogs}
- />
-
+
+
+ Deploy Settings
+
+
+
+ {
+ setIsDeploying(true);
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ refetch();
+ }}
+ >
+
+
+
+
+
+
+
+ Downloads and sets up the MariaDB database
+
+
+
+
+ {
+ await reload({
+ mariadbId: mariadbId,
+ appName: data?.appName || "",
+ })
+ .then(() => {
+ toast.success("Mariadb reloaded successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error reloading Mariadb");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+ Restart the MariaDB service without rebuilding
+
+
+
+
+ {data?.applicationStatus === "idle" ? (
+ {
+ await start({
+ mariadbId: mariadbId,
+ })
+ .then(() => {
+ toast.success("Mariadb started successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error starting Mariadb");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+
+ Start the MariaDB database (requires a previous
+ successful setup)
+
+
+
+
+
+ ) : (
+ {
+ await stop({
+ mariadbId: mariadbId,
+ })
+ .then(() => {
+ toast.success("Mariadb stopped successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error stopping Mariadb");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+ Stop the currently running MariaDB database
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ Open a terminal to the MariaDB container
+
+
+
+
+
+
+
{
+ setIsDrawerOpen(false);
+ setFilteredLogs([]);
+ setIsDeploying(false);
+ refetch();
+ }}
+ filteredLogs={filteredLogs}
+ />
+ ;
interface Props {
- mongoId: string;
+ mongoId: string;
}
export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
- const { data: ip } = api.settings.getIp.useQuery();
- const { data, refetch } = api.mongo.one.useQuery({ mongoId });
- const { mutateAsync, isLoading } = api.mongo.saveExternalPort.useMutation();
- const [connectionUrl, setConnectionUrl] = useState("");
- const getIp = data?.server?.ipAddress || ip;
- const form = useForm({
- defaultValues: {},
- resolver: zodResolver(DockerProviderSchema),
- });
+ const { data: ip } = api.settings.getIp.useQuery();
+ const { data, refetch } = api.mongo.one.useQuery({ mongoId });
+ const { mutateAsync, isLoading } = api.mongo.saveExternalPort.useMutation();
+ const [connectionUrl, setConnectionUrl] = useState("");
+ const getIp = data?.server?.ipAddress || ip;
+ const form = useForm({
+ defaultValues: {},
+ resolver: zodResolver(DockerProviderSchema),
+ });
- useEffect(() => {
- if (data?.externalPort) {
- form.reset({
- externalPort: data.externalPort,
- });
- }
- }, [form.reset, data, form]);
+ useEffect(() => {
+ if (data?.externalPort) {
+ form.reset({
+ externalPort: data.externalPort,
+ });
+ }
+ }, [form.reset, data, form]);
- const onSubmit = async (values: DockerProvider) => {
- await mutateAsync({
- externalPort: values.externalPort,
- mongoId,
- })
- .then(async () => {
- toast.success("External Port updated");
- await refetch();
- })
- .catch(() => {
- toast.error("Error saving the external port");
- });
- };
+ const onSubmit = async (values: DockerProvider) => {
+ await mutateAsync({
+ externalPort: values.externalPort,
+ mongoId,
+ })
+ .then(async () => {
+ toast.success("External Port updated");
+ await refetch();
+ })
+ .catch(() => {
+ toast.error("Error saving the external port");
+ });
+ };
- useEffect(() => {
- const buildConnectionUrl = () => {
- const port = form.watch("externalPort") || data?.externalPort;
+ useEffect(() => {
+ const buildConnectionUrl = () => {
+ const port = form.watch("externalPort") || data?.externalPort;
- return `mongodb://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}`;
- };
+ return `mongodb://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}`;
+ };
- setConnectionUrl(buildConnectionUrl());
- }, [
- data?.appName,
- data?.externalPort,
- data?.databasePassword,
- form,
- data?.databaseUser,
- getIp,
- ]);
+ setConnectionUrl(buildConnectionUrl());
+ }, [
+ data?.appName,
+ data?.externalPort,
+ data?.databasePassword,
+ form,
+ data?.databaseUser,
+ getIp,
+ ]);
- return (
- <>
-
-
-
- External Credentials
-
- In order to make the database reachable trought internet is
- required to set a port, make sure the port is not used by another
- application or database
-
-
-
- {!getIp && (
-
- You need to set an IP address in your{" "}
-
- )}
-
+
+
+
+
([]);
- const [isDeploying, setIsDeploying] = useState(false);
- api.mongo.deployWithLogs.useSubscription(
- {
- mongoId: mongoId,
- },
- {
- enabled: isDeploying,
- onData(log) {
- if (!isDrawerOpen) {
- setIsDrawerOpen(true);
- }
+ const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+ const [filteredLogs, setFilteredLogs] = useState([]);
+ const [isDeploying, setIsDeploying] = useState(false);
+ api.mongo.deployWithLogs.useSubscription(
+ {
+ mongoId: mongoId,
+ },
+ {
+ enabled: isDeploying,
+ onData(log) {
+ if (!isDrawerOpen) {
+ setIsDrawerOpen(true);
+ }
- if (log === "Deployment completed successfully!") {
- setIsDeploying(false);
- }
+ if (log === "Deployment completed successfully!") {
+ setIsDeploying(false);
+ }
- const parsedLogs = parseLogs(log);
- setFilteredLogs((prev) => [...prev, ...parsedLogs]);
- },
- onError(error) {
- console.error("Deployment logs error:", error);
- setIsDeploying(false);
- },
- },
- );
- return (
- <>
-
-
-
- Deploy Settings
-
-
-
- {
- setIsDeploying(true);
- await new Promise((resolve) => setTimeout(resolve, 1000));
- refetch();
- }}
- >
-
- Deploy
-
-
-
-
-
- Downloads and sets up the MongoDB database
-
-
-
-
-
- {
- await reload({
- mongoId: mongoId,
- appName: data?.appName || "",
- })
- .then(() => {
- toast.success("Mongo reloaded successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error reloading Mongo");
- });
- }}
- >
-
- Reload
-
-
-
-
-
- Restart the MongoDB service without rebuilding
-
-
-
-
-
- {data?.applicationStatus === "idle" ? (
- {
- await start({
- mongoId: mongoId,
- })
- .then(() => {
- toast.success("Mongo started successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error starting Mongo");
- });
- }}
- >
-
- Start
-
-
-
-
-
-
- Start the MongoDB database (requires a previous
- successful setup)
-
-
-
-
-
-
- ) : (
- {
- await stop({
- mongoId: mongoId,
- })
- .then(() => {
- toast.success("Mongo stopped successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error stopping Mongo");
- });
- }}
- >
-
- Stop
-
-
-
-
-
- Stop the currently running MongoDB database
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
{
- setIsDrawerOpen(false);
- setFilteredLogs([]);
- setIsDeploying(false);
- refetch();
- }}
- filteredLogs={filteredLogs}
- />
-
+
+
+ Deploy Settings
+
+
+
+ {
+ setIsDeploying(true);
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ refetch();
+ }}
+ >
+
+
+
+
+
+
+
+ Downloads and sets up the MongoDB database
+
+
+
+
+ {
+ await reload({
+ mongoId: mongoId,
+ appName: data?.appName || "",
+ })
+ .then(() => {
+ toast.success("Mongo reloaded successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error reloading Mongo");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+ Restart the MongoDB service without rebuilding
+
+
+
+
+ {data?.applicationStatus === "idle" ? (
+ {
+ await start({
+ mongoId: mongoId,
+ })
+ .then(() => {
+ toast.success("Mongo started successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error starting Mongo");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+
+ Start the MongoDB database (requires a previous
+ successful setup)
+
+
+
+
+
+ ) : (
+ {
+ await stop({
+ mongoId: mongoId,
+ })
+ .then(() => {
+ toast.success("Mongo stopped successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error stopping Mongo");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+ Stop the currently running MongoDB database
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ Open a terminal to the MongoDB container
+
+
+
+
+
+
+
{
+ setIsDrawerOpen(false);
+ setFilteredLogs([]);
+ setIsDeploying(false);
+ refetch();
+ }}
+ filteredLogs={filteredLogs}
+ />
+ ;
interface Props {
- mysqlId: string;
+ mysqlId: string;
}
export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
- const { data: ip } = api.settings.getIp.useQuery();
- const { data, refetch } = api.mysql.one.useQuery({ mysqlId });
- const { mutateAsync, isLoading } = api.mysql.saveExternalPort.useMutation();
- const [connectionUrl, setConnectionUrl] = useState("");
- const getIp = data?.server?.ipAddress || ip;
- const form = useForm({
- defaultValues: {},
- resolver: zodResolver(DockerProviderSchema),
- });
+ const { data: ip } = api.settings.getIp.useQuery();
+ const { data, refetch } = api.mysql.one.useQuery({ mysqlId });
+ const { mutateAsync, isLoading } = api.mysql.saveExternalPort.useMutation();
+ const [connectionUrl, setConnectionUrl] = useState("");
+ const getIp = data?.server?.ipAddress || ip;
+ const form = useForm({
+ defaultValues: {},
+ resolver: zodResolver(DockerProviderSchema),
+ });
- useEffect(() => {
- if (data?.externalPort) {
- form.reset({
- externalPort: data.externalPort,
- });
- }
- }, [form.reset, data, form]);
+ useEffect(() => {
+ if (data?.externalPort) {
+ form.reset({
+ externalPort: data.externalPort,
+ });
+ }
+ }, [form.reset, data, form]);
- const onSubmit = async (values: DockerProvider) => {
- await mutateAsync({
- externalPort: values.externalPort,
- mysqlId,
- })
- .then(async () => {
- toast.success("External Port updated");
- await refetch();
- })
- .catch(() => {
- toast.error("Error saving the external port");
- });
- };
+ const onSubmit = async (values: DockerProvider) => {
+ await mutateAsync({
+ externalPort: values.externalPort,
+ mysqlId,
+ })
+ .then(async () => {
+ toast.success("External Port updated");
+ await refetch();
+ })
+ .catch(() => {
+ toast.error("Error saving the external port");
+ });
+ };
- useEffect(() => {
- const buildConnectionUrl = () => {
- const port = form.watch("externalPort") || data?.externalPort;
+ useEffect(() => {
+ const buildConnectionUrl = () => {
+ const port = form.watch("externalPort") || data?.externalPort;
- return `mysql://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
- };
+ return `mysql://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
+ };
- setConnectionUrl(buildConnectionUrl());
- }, [
- data?.appName,
- data?.externalPort,
- data?.databasePassword,
- data?.databaseName,
- data?.databaseUser,
- form,
- getIp,
- ]);
- return (
- <>
-
-
-
- External Credentials
-
- In order to make the database reachable trought internet is
- required to set a port, make sure the port is not used by another
- application or database
-
-
-
- {!getIp && (
-
- You need to set an IP address in your{" "}
-
- )}
-
+
+
+
+
([]);
- const [isDeploying, setIsDeploying] = useState(false);
- api.mysql.deployWithLogs.useSubscription(
- {
- mysqlId: mysqlId,
- },
- {
- enabled: isDeploying,
- onData(log) {
- if (!isDrawerOpen) {
- setIsDrawerOpen(true);
- }
+ const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+ const [filteredLogs, setFilteredLogs] = useState([]);
+ const [isDeploying, setIsDeploying] = useState(false);
+ api.mysql.deployWithLogs.useSubscription(
+ {
+ mysqlId: mysqlId,
+ },
+ {
+ enabled: isDeploying,
+ onData(log) {
+ if (!isDrawerOpen) {
+ setIsDrawerOpen(true);
+ }
- if (log === "Deployment completed successfully!") {
- setIsDeploying(false);
- }
- const parsedLogs = parseLogs(log);
- setFilteredLogs((prev) => [...prev, ...parsedLogs]);
- },
- onError(error) {
- console.error("Deployment logs error:", error);
- setIsDeploying(false);
- },
- },
- );
- return (
- <>
-
-
-
- Deploy Settings
-
-
-
- {
- setIsDeploying(true);
- await new Promise((resolve) => setTimeout(resolve, 1000));
- refetch();
- }}
- >
-
- Deploy
-
-
-
-
-
- Downloads and sets up the MySQL database
-
-
-
-
-
- {
- await reload({
- mysqlId: mysqlId,
- appName: data?.appName || "",
- })
- .then(() => {
- toast.success("Mysql reloaded successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error reloading Mysql");
- });
- }}
- >
-
- Reload
-
-
-
-
-
- Restart the MySQL service without rebuilding
-
-
-
-
-
- {data?.applicationStatus === "idle" ? (
- {
- await start({
- mysqlId: mysqlId,
- })
- .then(() => {
- toast.success("Mysql started successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error starting Mysql");
- });
- }}
- >
-
- Start
-
-
-
-
-
-
- Start the MySQL database (requires a previous
- successful setup)
-
-
-
-
-
-
- ) : (
- {
- await stop({
- mysqlId: mysqlId,
- })
- .then(() => {
- toast.success("Mysql stopped successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error stopping Mysql");
- });
- }}
- >
-
- Stop
-
-
-
-
-
- Stop the currently running MySQL database
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
{
- setIsDrawerOpen(false);
- setFilteredLogs([]);
- setIsDeploying(false);
- refetch();
- }}
- filteredLogs={filteredLogs}
- />
-
+
+
+ Deploy Settings
+
+
+
+ {
+ setIsDeploying(true);
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ refetch();
+ }}
+ >
+
+
+
+
+
+
+
+ Downloads and sets up the MySQL database
+
+
+
+
+ {
+ await reload({
+ mysqlId: mysqlId,
+ appName: data?.appName || "",
+ })
+ .then(() => {
+ toast.success("Mysql reloaded successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error reloading Mysql");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+ Restart the MySQL service without rebuilding
+
+
+
+
+ {data?.applicationStatus === "idle" ? (
+ {
+ await start({
+ mysqlId: mysqlId,
+ })
+ .then(() => {
+ toast.success("Mysql started successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error starting Mysql");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+
+ Start the MySQL database (requires a previous
+ successful setup)
+
+
+
+
+
+ ) : (
+ {
+ await stop({
+ mysqlId: mysqlId,
+ })
+ .then(() => {
+ toast.success("Mysql stopped successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error stopping Mysql");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+ Stop the currently running MySQL database
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ Open a terminal to the MySQL container
+
+
+
+
+
+
+
{
+ setIsDrawerOpen(false);
+ setFilteredLogs([]);
+ setIsDeploying(false);
+ refetch();
+ }}
+ filteredLogs={filteredLogs}
+ />
+ ;
interface Props {
- postgresId: string;
+ postgresId: string;
}
export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
- const { data: ip } = api.settings.getIp.useQuery();
- const { data, refetch } = api.postgres.one.useQuery({ postgresId });
- const { mutateAsync, isLoading } =
- api.postgres.saveExternalPort.useMutation();
- const getIp = data?.server?.ipAddress || ip;
- const [connectionUrl, setConnectionUrl] = useState("");
+ const { data: ip } = api.settings.getIp.useQuery();
+ const { data, refetch } = api.postgres.one.useQuery({ postgresId });
+ const { mutateAsync, isLoading } =
+ api.postgres.saveExternalPort.useMutation();
+ const getIp = data?.server?.ipAddress || ip;
+ const [connectionUrl, setConnectionUrl] = useState("");
- const form = useForm({
- defaultValues: {},
- resolver: zodResolver(DockerProviderSchema),
- });
+ const form = useForm({
+ defaultValues: {},
+ resolver: zodResolver(DockerProviderSchema),
+ });
- useEffect(() => {
- if (data?.externalPort) {
- form.reset({
- externalPort: data.externalPort,
- });
- }
- }, [form.reset, data, form]);
+ useEffect(() => {
+ if (data?.externalPort) {
+ form.reset({
+ externalPort: data.externalPort,
+ });
+ }
+ }, [form.reset, data, form]);
- const onSubmit = async (values: DockerProvider) => {
- await mutateAsync({
- externalPort: values.externalPort,
- postgresId,
- })
- .then(async () => {
- toast.success("External Port updated");
- await refetch();
- })
- .catch(() => {
- toast.error("Error saving the external port");
- });
- };
+ const onSubmit = async (values: DockerProvider) => {
+ await mutateAsync({
+ externalPort: values.externalPort,
+ postgresId,
+ })
+ .then(async () => {
+ toast.success("External Port updated");
+ await refetch();
+ })
+ .catch(() => {
+ toast.error("Error saving the external port");
+ });
+ };
- useEffect(() => {
- const buildConnectionUrl = () => {
- const port = form.watch("externalPort") || data?.externalPort;
+ useEffect(() => {
+ const buildConnectionUrl = () => {
+ const port = form.watch("externalPort") || data?.externalPort;
- return `postgresql://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
- };
+ return `postgresql://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
+ };
- setConnectionUrl(buildConnectionUrl());
- }, [
- data?.appName,
- data?.externalPort,
- data?.databasePassword,
- form,
- data?.databaseName,
- getIp,
- ]);
+ setConnectionUrl(buildConnectionUrl());
+ }, [
+ data?.appName,
+ data?.externalPort,
+ data?.databasePassword,
+ form,
+ data?.databaseName,
+ getIp,
+ ]);
- return (
- <>
-
-
-
- External Credentials
-
- In order to make the database reachable trought internet is
- required to set a port, make sure the port is not used by another
- application or database
-
-
-
- {!getIp && (
-
- You need to set an IP address in your{" "}
-
- )}
-
+
+
+
+
([]);
- const [isDeploying, setIsDeploying] = useState(false);
- api.postgres.deployWithLogs.useSubscription(
- {
- postgresId: postgresId,
- },
- {
- enabled: isDeploying,
- onData(log) {
- if (!isDrawerOpen) {
- setIsDrawerOpen(true);
- }
+ const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+ const [filteredLogs, setFilteredLogs] = useState([]);
+ const [isDeploying, setIsDeploying] = useState(false);
+ api.postgres.deployWithLogs.useSubscription(
+ {
+ postgresId: postgresId,
+ },
+ {
+ enabled: isDeploying,
+ onData(log) {
+ if (!isDrawerOpen) {
+ setIsDrawerOpen(true);
+ }
- if (log === "Deployment completed successfully!") {
- setIsDeploying(false);
- }
- const parsedLogs = parseLogs(log);
- setFilteredLogs((prev) => [...prev, ...parsedLogs]);
- },
- onError(error) {
- console.error("Deployment logs error:", error);
- setIsDeploying(false);
- },
- },
- );
+ if (log === "Deployment completed successfully!") {
+ setIsDeploying(false);
+ }
+ const parsedLogs = parseLogs(log);
+ setFilteredLogs((prev) => [...prev, ...parsedLogs]);
+ },
+ onError(error) {
+ console.error("Deployment logs error:", error);
+ setIsDeploying(false);
+ },
+ }
+ );
- return (
- <>
-
-
-
- Deploy Settings
-
-
-
- {
- setIsDeploying(true);
- await new Promise((resolve) => setTimeout(resolve, 1000));
- refetch();
- }}
- >
-
- Deploy
-
-
-
-
-
- Downloads and sets up the PostgreSQL database
-
-
-
-
-
- {
- await reload({
- postgresId: postgresId,
- appName: data?.appName || "",
- })
- .then(() => {
- toast.success("Postgres reloaded successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error reloading Postgres");
- });
- }}
- >
-
- Reload
-
-
-
-
-
- Restart the PostgreSQL service without rebuilding
-
-
-
-
-
- {data?.applicationStatus === "idle" ? (
- {
- await start({
- postgresId: postgresId,
- })
- .then(() => {
- toast.success("Postgres started successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error starting Postgres");
- });
- }}
- >
-
- Start
-
-
-
-
-
-
- Start the PostgreSQL database (requires a previous
- successful setup)
-
-
-
-
-
-
- ) : (
- {
- await stop({
- postgresId: postgresId,
- })
- .then(() => {
- toast.success("Postgres stopped successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error stopping Postgres");
- });
- }}
- >
-
- Stop
-
-
-
-
-
- Stop the currently running PostgreSQL database
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
{
- setIsDrawerOpen(false);
- setFilteredLogs([]);
- setIsDeploying(false);
- refetch();
- }}
- filteredLogs={filteredLogs}
- />
-
+
+
+ Deploy Settings
+
+
+
+ {
+ setIsDeploying(true);
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ refetch();
+ }}
+ >
+
+
+
+
+
+
+
+ Downloads and sets up the PostgreSQL database
+
+
+
+
+ {
+ await reload({
+ postgresId: postgresId,
+ appName: data?.appName || "",
+ })
+ .then(() => {
+ toast.success("Postgres reloaded successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error reloading Postgres");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+
+ Reload the PostgreSQL when you change configuration or
+ environment variables
+
+
+
+
+
+ {data?.applicationStatus === "idle" ? (
+ {
+ await start({
+ postgresId: postgresId,
+ })
+ .then(() => {
+ toast.success("Postgres started successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error starting Postgres");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+
+ Start the PostgreSQL database (requires a previous
+ successful setup)
+
+
+
+
+
+ ) : (
+ {
+ await stop({
+ postgresId: postgresId,
+ })
+ .then(() => {
+ toast.success("Postgres stopped successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error stopping Postgres");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+ Stop the currently running PostgreSQL database
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
{
+ setIsDrawerOpen(false);
+ setFilteredLogs([]);
+ setIsDeploying(false);
+ refetch();
+ }}
+ filteredLogs={filteredLogs}
+ />
+
-
-
- Internal Credentials
-
-
-
-
- User
-
-
- Database Name
-
-
-
- Internal Port (Container)
-
+ const { data } = api.postgres.one.useQuery({ postgresId });
+ return (
+ <>
+
+
+
+ Internal Credentials
+
+
+
-
-
-
-
- );
+
+ Internal Connection URL
+
+
+
+
;
interface Props {
- postgresId: string;
+ postgresId: string;
}
export const UpdatePostgres = ({ postgresId }: Props) => {
- const [isOpen, setIsOpen] = useState(false);
- const utils = api.useUtils();
- const { mutateAsync, error, isError, isLoading } =
- api.postgres.update.useMutation();
- const { data } = api.postgres.one.useQuery(
- {
- postgresId,
- },
- {
- enabled: !!postgresId,
- },
- );
- const form = useForm({
- defaultValues: {
- description: data?.description ?? "",
- name: data?.name ?? "",
- },
- resolver: zodResolver(updatePostgresSchema),
- });
- useEffect(() => {
- if (data) {
- form.reset({
- description: data.description ?? "",
- name: data.name,
- });
- }
- }, [data, form, form.reset]);
+ const [isOpen, setIsOpen] = useState(false);
+ const utils = api.useUtils();
+ const { mutateAsync, error, isError, isLoading } =
+ api.postgres.update.useMutation();
+ const { data } = api.postgres.one.useQuery(
+ {
+ postgresId,
+ },
+ {
+ enabled: !!postgresId,
+ }
+ );
+ const form = useForm({
+ defaultValues: {
+ description: data?.description ?? "",
+ name: data?.name ?? "",
+ },
+ resolver: zodResolver(updatePostgresSchema),
+ });
+ useEffect(() => {
+ if (data) {
+ form.reset({
+ description: data.description ?? "",
+ name: data.name,
+ });
+ }
+ }, [data, form, form.reset]);
- const onSubmit = async (formData: UpdatePostgres) => {
- await mutateAsync({
- name: formData.name,
- postgresId: postgresId,
- description: formData.description || "",
- })
- .then(() => {
- toast.success("Postgres updated successfully");
- utils.postgres.one.invalidate({
- postgresId: postgresId,
- });
- setIsOpen(false);
- })
- .catch(() => {
- toast.error("Error updating Postgres");
- })
- .finally(() => {});
- };
+ const onSubmit = async (formData: UpdatePostgres) => {
+ await mutateAsync({
+ name: formData.name,
+ postgresId: postgresId,
+ description: formData.description || "",
+ })
+ .then(() => {
+ toast.success("Postgres updated successfully");
+ utils.postgres.one.invalidate({
+ postgresId: postgresId,
+ });
+ setIsOpen(false);
+ })
+ .catch(() => {
+ toast.error("Error updating Postgres");
+ })
+ .finally(() => {});
+ };
- return (
-
-
-
-
-
-
-
- Modify Postgres
- Update the Postgres data
-
- {isError && {error?.message} }
+ return (
+
+
+
+
+
+
+
+ Modify Postgres
+ Update the Postgres data
+
+ {isError && {error?.message} }
-
+
+
+ );
};
diff --git a/apps/dokploy/components/dashboard/redis/general/show-external-redis-credentials.tsx b/apps/dokploy/components/dashboard/redis/general/show-external-redis-credentials.tsx
index 5abf0bc1..75b5478a 100644
--- a/apps/dokploy/components/dashboard/redis/general/show-external-redis-credentials.tsx
+++ b/apps/dokploy/components/dashboard/redis/general/show-external-redis-credentials.tsx
@@ -1,6 +1,6 @@
+import { AlertBlock } from "@/components/shared/alert-block";
import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
import { Button } from "@/components/ui/button";
-import { AlertBlock } from "@/components/shared/alert-block";
import {
Card,
CardContent,
@@ -20,146 +20,145 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
-import Link from "next/link";
const DockerProviderSchema = z.object({
- externalPort: z.preprocess((a) => {
- if (a !== null) {
- const parsed = Number.parseInt(z.string().parse(a), 10);
- return Number.isNaN(parsed) ? null : parsed;
- }
- return null;
- }, z
- .number()
- .gte(0, "Range must be 0 - 65535")
- .lte(65535, "Range must be 0 - 65535")
- .nullable()),
+ externalPort: z.preprocess((a) => {
+ if (a !== null) {
+ const parsed = Number.parseInt(z.string().parse(a), 10);
+ return Number.isNaN(parsed) ? null : parsed;
+ }
+ return null;
+ }, z.number().gte(0, "Range must be 0 - 65535").lte(65535, "Range must be 0 - 65535").nullable()),
});
type DockerProvider = z.infer;
interface Props {
- redisId: string;
+ redisId: string;
}
export const ShowExternalRedisCredentials = ({ redisId }: Props) => {
- const { data: ip } = api.settings.getIp.useQuery();
- const { data, refetch } = api.redis.one.useQuery({ redisId });
- const { mutateAsync, isLoading } = api.redis.saveExternalPort.useMutation();
- const [connectionUrl, setConnectionUrl] = useState("");
- const getIp = data?.server?.ipAddress || ip;
+ const { data: ip } = api.settings.getIp.useQuery();
+ const { data, refetch } = api.redis.one.useQuery({ redisId });
+ const { mutateAsync, isLoading } = api.redis.saveExternalPort.useMutation();
+ const [connectionUrl, setConnectionUrl] = useState("");
+ const getIp = data?.server?.ipAddress || ip;
- const form = useForm({
- defaultValues: {},
- resolver: zodResolver(DockerProviderSchema),
- });
+ const form = useForm({
+ defaultValues: {},
+ resolver: zodResolver(DockerProviderSchema),
+ });
- useEffect(() => {
- if (data?.externalPort) {
- form.reset({
- externalPort: data.externalPort,
- });
- }
- }, [form.reset, data, form]);
+ useEffect(() => {
+ if (data?.externalPort) {
+ form.reset({
+ externalPort: data.externalPort,
+ });
+ }
+ }, [form.reset, data, form]);
- const onSubmit = async (values: DockerProvider) => {
- await mutateAsync({
- externalPort: values.externalPort,
- redisId,
- })
- .then(async () => {
- toast.success("External Port updated");
- await refetch();
- })
- .catch(() => {
- toast.error("Error saving the external port");
- });
- };
+ const onSubmit = async (values: DockerProvider) => {
+ await mutateAsync({
+ externalPort: values.externalPort,
+ redisId,
+ })
+ .then(async () => {
+ toast.success("External Port updated");
+ await refetch();
+ })
+ .catch(() => {
+ toast.error("Error saving the external port");
+ });
+ };
- useEffect(() => {
- const buildConnectionUrl = () => {
- const _hostname = window.location.hostname;
- const port = form.watch("externalPort") || data?.externalPort;
+ useEffect(() => {
+ const buildConnectionUrl = () => {
+ const _hostname = window.location.hostname;
+ const port = form.watch("externalPort") || data?.externalPort;
- return `redis://default:${data?.databasePassword}@${getIp}:${port}`;
- };
+ return `redis://default:${data?.databasePassword}@${getIp}:${port}`;
+ };
- setConnectionUrl(buildConnectionUrl());
- }, [data?.appName, data?.externalPort, data?.databasePassword, form, getIp]);
- return (
- <>
-
-
-
- External Credentials
-
- In order to make the database reachable trought internet is
- required to set a port, make sure the port is not used by another
- application or database
-
-
-
- {!getIp && (
-
- You need to set an IP address in your{" "}
-
- )}
-
+
+
+
+
([]);
- const [isDeploying, setIsDeploying] = useState(false);
- api.redis.deployWithLogs.useSubscription(
- {
- redisId: redisId,
- },
- {
- enabled: isDeploying,
- onData(log) {
- if (!isDrawerOpen) {
- setIsDrawerOpen(true);
- }
+ const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+ const [filteredLogs, setFilteredLogs] = useState([]);
+ const [isDeploying, setIsDeploying] = useState(false);
+ api.redis.deployWithLogs.useSubscription(
+ {
+ redisId: redisId,
+ },
+ {
+ enabled: isDeploying,
+ onData(log) {
+ if (!isDrawerOpen) {
+ setIsDrawerOpen(true);
+ }
- if (log === "Deployment completed successfully!") {
- setIsDeploying(false);
- }
- const parsedLogs = parseLogs(log);
- setFilteredLogs((prev) => [...prev, ...parsedLogs]);
- },
- onError(error) {
- console.error("Deployment logs error:", error);
- setIsDeploying(false);
- },
- },
- );
+ if (log === "Deployment completed successfully!") {
+ setIsDeploying(false);
+ }
+ const parsedLogs = parseLogs(log);
+ setFilteredLogs((prev) => [...prev, ...parsedLogs]);
+ },
+ onError(error) {
+ console.error("Deployment logs error:", error);
+ setIsDeploying(false);
+ },
+ }
+ );
- return (
- <>
-
-
-
- Deploy Settings
-
-
-
- {
- setIsDeploying(true);
- await new Promise((resolve) => setTimeout(resolve, 1000));
- refetch();
- }}
- >
-
- Deploy
-
-
-
-
-
- Downloads and sets up the Redis database
-
-
-
-
-
- {
- await reload({
- redisId: redisId,
- appName: data?.appName || "",
- })
- .then(() => {
- toast.success("Redis reloaded successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error reloading Redis");
- });
- }}
- >
-
- Reload
-
-
-
-
-
- Restart the Redis service without rebuilding
-
-
-
-
-
- {data?.applicationStatus === "idle" ? (
- {
- await start({
- redisId: redisId,
- })
- .then(() => {
- toast.success("Redis started successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error starting Redis");
- });
- }}
- >
-
- Start
-
-
-
-
-
-
- Start the Redis database (requires a previous
- successful setup)
-
-
-
-
-
-
- ) : (
- {
- await stop({
- redisId: redisId,
- })
- .then(() => {
- toast.success("Redis stopped successfully");
- refetch();
- })
- .catch(() => {
- toast.error("Error stopping Redis");
- });
- }}
- >
-
- Stop
-
-
-
-
-
- Stop the currently running Redis database
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
{
- setIsDrawerOpen(false);
- setFilteredLogs([]);
- setIsDeploying(false);
- refetch();
- }}
- filteredLogs={filteredLogs}
- />
-
+
+
+ Deploy Settings
+
+
+
+ {
+ setIsDeploying(true);
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ refetch();
+ }}
+ >
+
+
+
+
+
+
+
+ Downloads and sets up the Redis database
+
+
+
+
+ {
+ await reload({
+ redisId: redisId,
+ appName: data?.appName || "",
+ })
+ .then(() => {
+ toast.success("Redis reloaded successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error reloading Redis");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+ Restart the Redis service without rebuilding
+
+
+
+
+ {data?.applicationStatus === "idle" ? (
+ {
+ await start({
+ redisId: redisId,
+ })
+ .then(() => {
+ toast.success("Redis started successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error starting Redis");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+
+ Start the Redis database (requires a previous
+ successful setup)
+
+
+
+
+
+ ) : (
+ {
+ await stop({
+ redisId: redisId,
+ })
+ .then(() => {
+ toast.success("Redis stopped successfully");
+ refetch();
+ })
+ .catch(() => {
+ toast.error("Error stopping Redis");
+ });
+ }}
+ >
+
+
+
+
+
+
+
+ Stop the currently running Redis database
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ Open a terminal to the Redis container
+
+
+
+
+
+
+
{
+ setIsDrawerOpen(false);
+ setFilteredLogs([]);
+ setIsDeploying(false);
+ refetch();
+ }}
+ filteredLogs={filteredLogs}
+ />
+