Merge pull request #1000 from faytranevozter/feat/simplify-node-logs

Feat: simplify node service log & add badge color on list service/container

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(
 	},
 );
 
+export 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}
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
 										</SelectItem>
 									))}
 								</div>
@@ -135,7 +153,10 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 											value={container.containerId}
 										>
 											{container.name} ({container.containerId}@{container.node}
-											) {container.state}
+											)
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
 										</SelectItem>
 									))}
 								</>

apps/dokploy/components/dashboard/compose/logs/show-stack.tsx

@@ -1,3 +1,5 @@
+import { badgeStateColor } from "@/components/dashboard/application/logs/show";
+import { Badge } from "@/components/ui/badge";
 import {
 	Card,
 	CardContent,
@@ -35,6 +37,8 @@ interface Props {
 	serverId?: string;
 }
 
+badgeStateColor;
+
 export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
 	const [option, setOption] = useState<"swarm" | "native">("native");
 	const [containerId, setContainerId] = useState<string | undefined>();
@@ -123,7 +127,9 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
 											value={container.containerId}
 										>
 											{container.name} ({container.containerId}){" "}
-											{container.state}
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
 										</SelectItem>
 									))}
 								</div>
@@ -135,7 +141,10 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
 											value={container.containerId}
 										>
 											{container.name} ({container.containerId}@{container.node}
-											) {container.state}
+											)
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
 										</SelectItem>
 									))}
 								</>

apps/dokploy/components/dashboard/compose/logs/show.tsx

@@ -1,3 +1,5 @@
+import { badgeStateColor } from "@/components/dashboard/application/logs/show";
+import { Badge } from "@/components/ui/badge";
 import {
 	Card,
 	CardContent,
@@ -87,7 +89,10 @@ export const ShowDockerLogsCompose = ({
 									key={container.containerId}
 									value={container.containerId}
 								>
-									{container.name} ({container.containerId}) {container.state}
+									{container.name} ({container.containerId}){" "}
+									<Badge variant={badgeStateColor(container.state)}>
+										{container.state}
+									</Badge>
 								</SelectItem>
 							))}
 							<SelectLabel>Containers ({data?.length})</SelectLabel>

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

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]