feat(logs): enhance container status display in logs

- Added support for displaying "ready" state in badge color logic.
- Updated logs display to include container status and current state in the dashboard components.
- Modified Docker command outputs to include status and current state for better visibility of container health.
This commit is contained in:
Mauricio Siu
2026-02-07 00:13:12 -06:00
parent 3e64647d0d
commit 6cf448ba80
4 changed files with 28 additions and 6 deletions

View File

@@ -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>
))}
</>

View File

@@ -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>
))}
</>

View File

@@ -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>

View File

@@ -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,
};
});