Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add badge component to display container state with color coding

Browse Source
This commit is contained in:
faytranevozter
2024-12-27 01:44:46 +07:00
parent f69fb7684b
commit 27252cf58d
3 changed files with 66 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/dokploy/components/dashboard/application/logs/show.tsx
View File

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

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

@@ -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<string | undefined>();
@@ -123,7 +139,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 +153,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>
))}
</>

21
apps/dokploy/components/dashboard/compose/logs/show.tsx
View File

@@ -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}){" "}
<Badge variant={badgeStateColor(container.state)}>
{container.state}
</Badge>
</SelectItem>
))}
<SelectLabel>Containers ({data?.length})</SelectLabel>