Merge pull request #3618 from Dokploy/feat/add-ui-to-show-unhealthy-status-logs

feat(logs): enhance container status display in logs

Author: Siumauricio

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

@@ -34,6 +34,7 @@ export const DockerLogs = dynamic(
 export const badgeStateColor = (state: string) => {
 	switch (state) {
 		case "running":
+		case "ready":
 			return "green";
 		case "exited":
 		case "shutdown":
@@ -142,6 +143,7 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 											<Badge variant={badgeStateColor(container.state)}>
 												{container.state}
 											</Badge>
+											{container.status ? ` ${container.status}` : ""}
 										</SelectItem>
 									))}
 								</div>
@@ -157,6 +159,9 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 											<Badge variant={badgeStateColor(container.state)}>
 												{container.state}
 											</Badge>
+											{container.currentState
+												? ` ${container.currentState}`
+												: ""}
 										</SelectItem>
 									))}
 								</>

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

@@ -128,6 +128,7 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
 											<Badge variant={badgeStateColor(container.state)}>
 												{container.state}
 											</Badge>
+											{container.status ? ` ${container.status}` : ""}
 										</SelectItem>
 									))}
 								</div>
@@ -143,6 +144,9 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
 											<Badge variant={badgeStateColor(container.state)}>
 												{container.state}
 											</Badge>
+											{container.currentState
+												? ` ${container.currentState}`
+												: ""}
 										</SelectItem>
 									))}
 								</>

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

@@ -1,8 +1,8 @@
 import { Loader2 } from "lucide-react";
-import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
 import { badgeStateColor } from "@/components/dashboard/application/logs/show";
 import { Badge } from "@/components/ui/badge";
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
 import {
 	Card,
 	CardContent,
@@ -93,6 +93,7 @@ export const ShowDockerLogsCompose = ({
 									<Badge variant={badgeStateColor(container.state)}>
 										{container.state}
 									</Badge>
+									{container.status ? ` ${container.status}` : ""}
 								</SelectItem>
 							))}
 							<SelectLabel>Containers ({data?.length})</SelectLabel>

packages/server/src/services/docker.ts

@@ -109,7 +109,7 @@ export const getContainersByAppNameMatch = async (
 	try {
 		let result: string[] = [];
 		const cmd =
-			"docker ps -a --format 'CONTAINER ID : {{.ID}} | Name: {{.Names}} | State: {{.State}}'";
+			"docker ps -a --format 'CONTAINER ID : {{.ID}} | Name: {{.Names}} | State: {{.State}} | Status: {{.Status}}'";
 
 		const command =
 			appType === "docker-compose"
@@ -148,10 +148,14 @@ export const getContainersByAppNameMatch = async (
 			const state = parts[2]
 				? parts[2].replace("State: ", "").trim()
 				: "No state";
+
+			const status = parts[3] ? parts[3].replace("Status: ", "").trim() : "";
+
 			return {
 				containerId,
 				name,
 				state,
+				status,
 			};
 		});
 
@@ -168,7 +172,7 @@ export const getStackContainersByAppName = async (
 	try {
 		let result: string[] = [];
 
-		const command = `docker stack ps ${appName} --format 'CONTAINER ID : {{.ID}} | Name: {{.Name}} | State: {{.DesiredState}} | Node: {{.Node}}'`;
+		const command = `docker stack ps ${appName} --format 'CONTAINER ID : {{.ID}} | Name: {{.Name}} | State: {{.DesiredState}} | Node: {{.Node}} | CurrentState: {{.CurrentState}}'`;
 		if (serverId) {
 			const { stdout, stderr } = await execAsyncRemote(serverId, command);
 
@@ -205,11 +209,15 @@ export const getStackContainersByAppName = async (
 			const node = parts[3]
 				? parts[3].replace("Node: ", "").trim()
 				: "No specific node";
+			const currentState = parts[4]
+				? parts[4].replace("CurrentState: ", "").trim()
+				: "";
 			return {
 				containerId,
 				name,
 				state,
 				node,
+				currentState,
 			};
 		});
 
@@ -226,8 +234,7 @@ export const getServiceContainersByAppName = async (
 	try {
 		let result: string[] = [];
 
-		const command = `docker service ps ${appName} --format 'CONTAINER ID : {{.ID}} | Name: {{.Name}} | State: {{.DesiredState}} | Node: {{.Node}}'`;
-
+		const command = `docker service ps ${appName} --format 'CONTAINER ID : {{.ID}} | Name: {{.Name}} | State: {{.DesiredState}} | Node: {{.Node}} | CurrentState: {{.CurrentState}}'`;
 		if (serverId) {
 			const { stdout, stderr } = await execAsyncRemote(serverId, command);
 
@@ -265,10 +272,15 @@ export const getServiceContainersByAppName = async (
 			const node = parts[3]
 				? parts[3].replace("Node: ", "").trim()
 				: "No specific node";
+
+			const currentState = parts[4]
+				? parts[4].replace("CurrentState: ", "").trim()
+				: "";
 			return {
 				containerId,
 				name,
 				state,
+				currentState,
 				node,
 			};
 		});