From 7c17cfb5c76fb8eedd4528ea0a9d33f1b70e3a95 Mon Sep 17 00:00:00 2001 From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com> Date: Sun, 16 Mar 2025 20:52:57 -0600 Subject: [PATCH] refactor: improve button structure and tooltip integration across dashboard components - Refactored button components in the dashboard to enhance structure and readability. - Integrated tooltips directly within button elements for better user experience. - Updated tooltip descriptions for clarity across various database actions (Deploy, Reload, Start, Stop) for Redis, MySQL, PostgreSQL, and MariaDB. - Ensured consistent formatting and improved code maintainability. --- .../dashboard/application/general/show.tsx | 195 ++++---- .../dashboard/compose/general/actions.tsx | 148 +++--- .../mariadb/general/show-general-mariadb.tsx | 462 +++++++++--------- .../mysql/general/show-general-mysql.tsx | 456 ++++++++--------- .../general/show-general-postgres.tsx | 185 +++---- .../redis/general/show-general-redis.tsx | 456 ++++++++--------- 6 files changed, 988 insertions(+), 914 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/general/show.tsx b/apps/dokploy/components/dashboard/application/general/show.tsx index 01b38bd3..c917d7ab 100644 --- a/apps/dokploy/components/dashboard/application/general/show.tsx +++ b/apps/dokploy/components/dashboard/application/general/show.tsx @@ -76,25 +76,27 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => { }); }} > - - - - - - -

- Downloads the source code and performs a complete build -

- - - + { }); }} > - - - - - - -

Reload the application without rebuilding it

- - - + { }); }} > - - - - - - -

- Only rebuilds the application without downloading new code -

- - - + {data?.applicationStatus === "idle" ? ( @@ -188,26 +195,28 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => { }); }} > - - - - - - -

- Start the application (requires a previous successful - build) -

- - - + ) : ( { }); }} > - - - - - - -

Stop the currently running application

- - - + )} diff --git a/apps/dokploy/components/dashboard/compose/general/actions.tsx b/apps/dokploy/components/dashboard/compose/general/actions.tsx index fc5daec7..0a4433e7 100644 --- a/apps/dokploy/components/dashboard/compose/general/actions.tsx +++ b/apps/dokploy/components/dashboard/compose/general/actions.tsx @@ -55,23 +55,25 @@ export const ComposeActions = ({ composeId }: Props) => { }); }} > - - - - - - -

Downloads the source code and performs a complete build

- - - + { }); }} > - - - - - - -

Reload the compose without rebuilding it

- - - + {data?.composeType === "docker-compose" && data?.composeStatus === "idle" ? ( @@ -127,25 +131,27 @@ export const ComposeActions = ({ composeId }: Props) => { }); }} > - - - - - - -

- Start the compose (requires a previous successful build) -

- - - + ) : ( { }); }} > - - - - - - -

Stop the currently running compose

- - - + )} diff --git a/apps/dokploy/components/dashboard/mariadb/general/show-general-mariadb.tsx b/apps/dokploy/components/dashboard/mariadb/general/show-general-mariadb.tsx index c222b256..2f8bab77 100644 --- a/apps/dokploy/components/dashboard/mariadb/general/show-general-mariadb.tsx +++ b/apps/dokploy/components/dashboard/mariadb/general/show-general-mariadb.tsx @@ -17,236 +17,252 @@ import { type LogLine, parseLogs } from "../../docker/logs/utils"; import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal"; interface Props { - mariadbId: string; + mariadbId: string; } export const ShowGeneralMariadb = ({ mariadbId }: Props) => { - const { data, refetch } = api.mariadb.one.useQuery( - { - mariadbId, - }, - { enabled: !!mariadbId } - ); + const { data, refetch } = api.mariadb.one.useQuery( + { + mariadbId, + }, + { enabled: !!mariadbId }, + ); - const { mutateAsync: reload, isLoading: isReloading } = - api.mariadb.reload.useMutation(); + const { mutateAsync: reload, isLoading: isReloading } = + api.mariadb.reload.useMutation(); - const { mutateAsync: start, isLoading: isStarting } = - api.mariadb.start.useMutation(); + const { mutateAsync: start, isLoading: isStarting } = + api.mariadb.start.useMutation(); - const { mutateAsync: stop, isLoading: isStopping } = - api.mariadb.stop.useMutation(); + const { mutateAsync: stop, isLoading: isStopping } = + api.mariadb.stop.useMutation(); - 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); - } + 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(); - }} - > - - - - - - -

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} - /> -
- - ); + return ( + <> +
+ + + Deploy Settings + + + + { + setIsDeploying(true); + await new Promise((resolve) => setTimeout(resolve, 1000)); + refetch(); + }} + > + + + + + { + await reload({ + mariadbId: mariadbId, + appName: data?.appName || "", + }) + .then(() => { + toast.success("Mariadb reloaded successfully"); + refetch(); + }) + .catch(() => { + toast.error("Error reloading Mariadb"); + }); + }} + > + + + + {data?.applicationStatus === "idle" ? ( + + { + await start({ + mariadbId: mariadbId, + }) + .then(() => { + toast.success("Mariadb started successfully"); + refetch(); + }) + .catch(() => { + toast.error("Error starting Mariadb"); + }); + }} + > + + + + ) : ( + + { + await stop({ + mariadbId: mariadbId, + }) + .then(() => { + toast.success("Mariadb stopped successfully"); + refetch(); + }) + .catch(() => { + toast.error("Error stopping Mariadb"); + }); + }} + > + + + + )} + + + + + + { + setIsDrawerOpen(false); + setFilteredLogs([]); + setIsDeploying(false); + refetch(); + }} + filteredLogs={filteredLogs} + /> +
+ + ); }; diff --git a/apps/dokploy/components/dashboard/mysql/general/show-general-mysql.tsx b/apps/dokploy/components/dashboard/mysql/general/show-general-mysql.tsx index 7002ff78..590127fa 100644 --- a/apps/dokploy/components/dashboard/mysql/general/show-general-mysql.tsx +++ b/apps/dokploy/components/dashboard/mysql/general/show-general-mysql.tsx @@ -16,234 +16,244 @@ import { toast } from "sonner"; import { type LogLine, parseLogs } from "../../docker/logs/utils"; import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal"; interface Props { - mysqlId: string; + mysqlId: string; } export const ShowGeneralMysql = ({ mysqlId }: Props) => { - const { data, refetch } = api.mysql.one.useQuery( - { - mysqlId, - }, - { enabled: !!mysqlId } - ); + const { data, refetch } = api.mysql.one.useQuery( + { + mysqlId, + }, + { enabled: !!mysqlId }, + ); - const { mutateAsync: reload, isLoading: isReloading } = - api.mysql.reload.useMutation(); - const { mutateAsync: start, isLoading: isStarting } = - api.mysql.start.useMutation(); + const { mutateAsync: reload, isLoading: isReloading } = + api.mysql.reload.useMutation(); + const { mutateAsync: start, isLoading: isStarting } = + api.mysql.start.useMutation(); - const { mutateAsync: stop, isLoading: isStopping } = - api.mysql.stop.useMutation(); + const { mutateAsync: stop, isLoading: isStopping } = + api.mysql.stop.useMutation(); - 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); - } + 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(); - }} - > - - - - - - -

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} - /> -
- - ); + 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(); + }} + > + + + { + await reload({ + mysqlId: mysqlId, + appName: data?.appName || "", + }) + .then(() => { + toast.success("MySQL reloaded successfully"); + refetch(); + }) + .catch(() => { + toast.error("Error reloading MySQL"); + }); + }} + > + + + {data?.applicationStatus === "idle" ? ( + { + await start({ + mysqlId: mysqlId, + }) + .then(() => { + toast.success("MySQL started successfully"); + refetch(); + }) + .catch(() => { + toast.error("Error starting MySQL"); + }); + }} + > + + + ) : ( + { + await stop({ + mysqlId: mysqlId, + }) + .then(() => { + toast.success("MySQL stopped successfully"); + refetch(); + }) + .catch(() => { + toast.error("Error stopping MySQL"); + }); + }} + > + + + )} + + + + + + + { + setIsDrawerOpen(false); + setFilteredLogs([]); + setIsDeploying(false); + refetch(); + }} + filteredLogs={filteredLogs} + /> +
+ + ); }; diff --git a/apps/dokploy/components/dashboard/postgres/general/show-general-postgres.tsx b/apps/dokploy/components/dashboard/postgres/general/show-general-postgres.tsx index 999bc850..fec51b5a 100644 --- a/apps/dokploy/components/dashboard/postgres/general/show-general-postgres.tsx +++ b/apps/dokploy/components/dashboard/postgres/general/show-general-postgres.tsx @@ -74,7 +74,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => { { @@ -83,26 +83,28 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => { refetch(); }} > - - - - - - -

Downloads and sets up the PostgreSQL database

- - - + { @@ -111,35 +113,37 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => { appName: data?.appName || "", }) .then(() => { - toast.success("Postgres reloaded successfully"); + toast.success("PostgreSQL reloaded successfully"); refetch(); }) .catch(() => { - toast.error("Error reloading Postgres"); + toast.error("Error reloading PostgreSQL"); }); }} > - - - - - - -

Reload the PostgreSQL without rebuilding it

- - - + {data?.applicationStatus === "idle" ? ( { @@ -147,69 +151,73 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => { postgresId: postgresId, }) .then(() => { - toast.success("Postgres started successfully"); + toast.success("PostgreSQL started successfully"); refetch(); }) .catch(() => { - toast.error("Error starting Postgres"); + toast.error("Error starting PostgreSQL"); }); }} > - - - - - - -

- Start the PostgreSQL database (requires a previous - successful setup) -

- - - + ) : ( { await stop({ postgresId: postgresId, }) .then(() => { - toast.success("Postgres stopped successfully"); + toast.success("PostgreSQL stopped successfully"); refetch(); }) .catch(() => { - toast.error("Error stopping Postgres"); + toast.error("Error stopping PostgreSQL"); }); }} > - - - - - - -

Stop the currently running PostgreSQL database

- - - + )} @@ -221,8 +229,19 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => { variant="outline" className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2" > - - Open Terminal + + +
+ + Open Terminal +
+ + + +

Open a terminal to the PostgreSQL container

+ + + diff --git a/apps/dokploy/components/dashboard/redis/general/show-general-redis.tsx b/apps/dokploy/components/dashboard/redis/general/show-general-redis.tsx index fabd1026..59a123bd 100644 --- a/apps/dokploy/components/dashboard/redis/general/show-general-redis.tsx +++ b/apps/dokploy/components/dashboard/redis/general/show-general-redis.tsx @@ -17,235 +17,245 @@ import { type LogLine, parseLogs } from "../../docker/logs/utils"; import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal"; interface Props { - redisId: string; + redisId: string; } export const ShowGeneralRedis = ({ redisId }: Props) => { - const { data, refetch } = api.redis.one.useQuery( - { - redisId, - }, - { enabled: !!redisId } - ); + const { data, refetch } = api.redis.one.useQuery( + { + redisId, + }, + { enabled: !!redisId }, + ); - const { mutateAsync: reload, isLoading: isReloading } = - api.redis.reload.useMutation(); - const { mutateAsync: start, isLoading: isStarting } = - api.redis.start.useMutation(); + const { mutateAsync: reload, isLoading: isReloading } = + api.redis.reload.useMutation(); + const { mutateAsync: start, isLoading: isStarting } = + api.redis.start.useMutation(); - const { mutateAsync: stop, isLoading: isStopping } = - api.redis.stop.useMutation(); + const { mutateAsync: stop, isLoading: isStopping } = + api.redis.stop.useMutation(); - 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); - } + 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(); - }} - > - - - - - - -

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} - /> -
- - ); + return ( + <> +
+ + + Deploy Settings + + + + { + setIsDeploying(true); + await new Promise((resolve) => setTimeout(resolve, 1000)); + refetch(); + }} + > + + + { + await reload({ + redisId: redisId, + appName: data?.appName || "", + }) + .then(() => { + toast.success("Redis reloaded successfully"); + refetch(); + }) + .catch(() => { + toast.error("Error reloading Redis"); + }); + }} + > + + + {data?.applicationStatus === "idle" ? ( + { + await start({ + redisId: redisId, + }) + .then(() => { + toast.success("Redis started successfully"); + refetch(); + }) + .catch(() => { + toast.error("Error starting Redis"); + }); + }} + > + + + ) : ( + { + await stop({ + redisId: redisId, + }) + .then(() => { + toast.success("Redis stopped successfully"); + refetch(); + }) + .catch(() => { + toast.error("Error stopping Redis"); + }); + }} + > + + + )} + + + + + + + { + setIsDrawerOpen(false); + setFilteredLogs([]); + setIsDeploying(false); + refetch(); + }} + filteredLogs={filteredLogs} + /> +
+ + ); };