From 6df66c387161dcbd769f71fdd7add45e4e2f0f4b Mon Sep 17 00:00:00 2001 From: faytranevozter Date: Fri, 27 Dec 2024 01:34:20 +0700 Subject: [PATCH 1/5] fix: correct typo in logs title --- apps/dokploy/components/dashboard/application/logs/show.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/dokploy/components/dashboard/application/logs/show.tsx b/apps/dokploy/components/dashboard/application/logs/show.tsx index 1100a4bf9..8f6bf1f14 100644 --- a/apps/dokploy/components/dashboard/application/logs/show.tsx +++ b/apps/dokploy/components/dashboard/application/logs/show.tsx @@ -80,7 +80,7 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => { return ( - Logssss + Logs Watch the logs of the application in real time From 20a7995d73d8231613d82f1270872581fb4409e6 Mon Sep 17 00:00:00 2001 From: faytranevozter Date: Fri, 27 Dec 2024 01:43:52 +0700 Subject: [PATCH 2/5] fix: update docker logs command to conditionally include raw flag for swarm --- apps/dokploy/server/wss/docker-container-logs.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/dokploy/server/wss/docker-container-logs.ts b/apps/dokploy/server/wss/docker-container-logs.ts index 4a89e42b2..092f39735 100644 --- a/apps/dokploy/server/wss/docker-container-logs.ts +++ b/apps/dokploy/server/wss/docker-container-logs.ts @@ -54,7 +54,9 @@ export const setupDockerContainerLogsWebSocketServer = ( const client = new Client(); client .once("ready", () => { - const baseCommand = `docker ${runType === "swarm" ? "service" : "container"} logs --timestamps --tail ${tail} ${ + const baseCommand = `docker ${runType === "swarm" ? "service" : "container"} logs --timestamps ${ + runType === "swarm" ? "--raw" : "" + } --tail ${tail} ${ since === "all" ? "" : `--since ${since}` } --follow ${containerId}`; const escapedSearch = search ? search.replace(/'/g, "'\\''") : ""; @@ -98,7 +100,9 @@ export const setupDockerContainerLogsWebSocketServer = ( }); } else { const shell = getShell(); - const baseCommand = `docker ${runType === "swarm" ? "service" : "container"} logs --timestamps --tail ${tail} ${ + const baseCommand = `docker ${runType === "swarm" ? "service" : "container"} logs --timestamps ${ + runType === "swarm" ? "--raw" : "" + } --tail ${tail} ${ since === "all" ? "" : `--since ${since}` } --follow ${containerId}`; const command = search From f69fb7684b5b3aaaa77b3368b5c45f01c934c665 Mon Sep 17 00:00:00 2001 From: faytranevozter Date: Fri, 27 Dec 2024 01:44:10 +0700 Subject: [PATCH 3/5] fix: normalize state string to lowercase and update filter quotes in docker service functions --- packages/server/src/services/docker.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/server/src/services/docker.ts b/packages/server/src/services/docker.ts index 79cd83459..e8bdcb4d5 100644 --- a/packages/server/src/services/docker.ts +++ b/packages/server/src/services/docker.ts @@ -196,7 +196,7 @@ export const getStackContainersByAppName = async ( : "No container name"; const state = parts[2] - ? parts[2].replace("State: ", "").trim() + ? parts[2].replace("State: ", "").trim().toLowerCase() : "No state"; const node = parts[3] ? parts[3].replace("Node: ", "").trim() @@ -255,7 +255,7 @@ export const getServiceContainersByAppName = async ( : "No container name"; const state = parts[2] - ? parts[2].replace("State: ", "").trim() + ? parts[2].replace("State: ", "").trim().toLowerCase() : "No state"; const node = parts[3] @@ -426,7 +426,7 @@ export const getNodeApplications = async (serverId?: string) => { .trim() .split("\n") .map((line) => JSON.parse(line)) - .filter((service) => !service.Name.startsWith('dokploy-')); + .filter((service) => !service.Name.startsWith("dokploy-")); return appArray; } catch (error) {} From 27252cf58da2aced14425a59f0bc6cd663e69cbe Mon Sep 17 00:00:00 2001 From: faytranevozter Date: Fri, 27 Dec 2024 01:44:46 +0700 Subject: [PATCH 4/5] feat: add badge component to display container state with color coding --- .../dashboard/application/logs/show.tsx | 25 +++++++++++++++++-- .../dashboard/compose/logs/show-stack.tsx | 25 +++++++++++++++++-- .../dashboard/compose/logs/show.tsx | 21 +++++++++++++++- 3 files changed, 66 insertions(+), 5 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/logs/show.tsx b/apps/dokploy/components/dashboard/application/logs/show.tsx index 8f6bf1f14..dc8950855 100644 --- a/apps/dokploy/components/dashboard/application/logs/show.tsx +++ b/apps/dokploy/components/dashboard/application/logs/show.tsx @@ -1,3 +1,4 @@ +import { Badge } from "@/components/ui/badge"; import { Card, CardContent, @@ -30,6 +31,21 @@ export const DockerLogs = dynamic( }, ); +const badgeStateColor = (state: string) => { + switch (state) { + case "running": + return "green"; + case "exited": + case "shutdown": + return "red"; + case "accepted": + case "created": + return "blue"; + default: + return "default"; + } +}; + interface Props { appName: string; serverId?: string; @@ -123,7 +139,9 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => { value={container.containerId} > {container.name} ({container.containerId}){" "} - {container.state} + + {container.state} + ))} @@ -135,7 +153,10 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => { value={container.containerId} > {container.name} ({container.containerId}@{container.node} - ) {container.state} + ) + + {container.state} + ))} diff --git a/apps/dokploy/components/dashboard/compose/logs/show-stack.tsx b/apps/dokploy/components/dashboard/compose/logs/show-stack.tsx index cec1e5af2..901aeaaf0 100644 --- a/apps/dokploy/components/dashboard/compose/logs/show-stack.tsx +++ b/apps/dokploy/components/dashboard/compose/logs/show-stack.tsx @@ -1,3 +1,4 @@ +import { Badge } from "@/components/ui/badge"; import { Card, CardContent, @@ -35,6 +36,21 @@ interface Props { serverId?: string; } +const badgeStateColor = (state: string) => { + switch (state) { + case "running": + return "green"; + case "exited": + case "shutdown": + return "red"; + case "accepted": + case "created": + return "blue"; + default: + return "default"; + } +}; + export const ShowDockerLogsStack = ({ appName, serverId }: Props) => { const [option, setOption] = useState<"swarm" | "native">("native"); const [containerId, setContainerId] = useState(); @@ -123,7 +139,9 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => { value={container.containerId} > {container.name} ({container.containerId}){" "} - {container.state} + + {container.state} + ))} @@ -135,7 +153,10 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => { value={container.containerId} > {container.name} ({container.containerId}@{container.node} - ) {container.state} + ) + + {container.state} + ))} diff --git a/apps/dokploy/components/dashboard/compose/logs/show.tsx b/apps/dokploy/components/dashboard/compose/logs/show.tsx index bf7e2993e..56aceeb20 100644 --- a/apps/dokploy/components/dashboard/compose/logs/show.tsx +++ b/apps/dokploy/components/dashboard/compose/logs/show.tsx @@ -1,3 +1,4 @@ +import { Badge } from "@/components/ui/badge"; import { Card, CardContent, @@ -35,6 +36,21 @@ interface Props { appType: "stack" | "docker-compose"; } +const badgeStateColor = (state: string) => { + switch (state) { + case "running": + return "green"; + case "exited": + case "shutdown": + return "red"; + case "accepted": + case "created": + return "blue"; + default: + return "default"; + } +}; + export const ShowDockerLogsCompose = ({ appName, appType, @@ -87,7 +103,10 @@ export const ShowDockerLogsCompose = ({ key={container.containerId} value={container.containerId} > - {container.name} ({container.containerId}) {container.state} + {container.name} ({container.containerId}){" "} + + {container.state} + ))} Containers ({data?.length}) From 985b8bc2e02cdd2d654febba5685e58c0af5a058 Mon Sep 17 00:00:00 2001 From: faytranevozter Date: Fri, 27 Dec 2024 08:48:36 +0700 Subject: [PATCH 5/5] refactor: extract badgeStateColor function for reuse across log components --- .../dashboard/application/logs/show.tsx | 2 +- .../dashboard/compose/logs/show-stack.tsx | 16 ++-------------- .../components/dashboard/compose/logs/show.tsx | 16 +--------------- 3 files changed, 4 insertions(+), 30 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/logs/show.tsx b/apps/dokploy/components/dashboard/application/logs/show.tsx index dc8950855..a73b99d25 100644 --- a/apps/dokploy/components/dashboard/application/logs/show.tsx +++ b/apps/dokploy/components/dashboard/application/logs/show.tsx @@ -31,7 +31,7 @@ export const DockerLogs = dynamic( }, ); -const badgeStateColor = (state: string) => { +export const badgeStateColor = (state: string) => { switch (state) { case "running": return "green"; diff --git a/apps/dokploy/components/dashboard/compose/logs/show-stack.tsx b/apps/dokploy/components/dashboard/compose/logs/show-stack.tsx index 901aeaaf0..d166f933f 100644 --- a/apps/dokploy/components/dashboard/compose/logs/show-stack.tsx +++ b/apps/dokploy/components/dashboard/compose/logs/show-stack.tsx @@ -1,3 +1,4 @@ +import { badgeStateColor } from "@/components/dashboard/application/logs/show"; import { Badge } from "@/components/ui/badge"; import { Card, @@ -36,20 +37,7 @@ interface Props { serverId?: string; } -const badgeStateColor = (state: string) => { - switch (state) { - case "running": - return "green"; - case "exited": - case "shutdown": - return "red"; - case "accepted": - case "created": - return "blue"; - default: - return "default"; - } -}; +badgeStateColor; export const ShowDockerLogsStack = ({ appName, serverId }: Props) => { const [option, setOption] = useState<"swarm" | "native">("native"); diff --git a/apps/dokploy/components/dashboard/compose/logs/show.tsx b/apps/dokploy/components/dashboard/compose/logs/show.tsx index 56aceeb20..4530e0ddd 100644 --- a/apps/dokploy/components/dashboard/compose/logs/show.tsx +++ b/apps/dokploy/components/dashboard/compose/logs/show.tsx @@ -1,3 +1,4 @@ +import { badgeStateColor } from "@/components/dashboard/application/logs/show"; import { Badge } from "@/components/ui/badge"; import { Card, @@ -36,21 +37,6 @@ interface Props { appType: "stack" | "docker-compose"; } -const badgeStateColor = (state: string) => { - switch (state) { - case "running": - return "green"; - case "exited": - case "shutdown": - return "red"; - case "accepted": - case "created": - return "blue"; - default: - return "default"; - } -}; - export const ShowDockerLogsCompose = ({ appName, appType,