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: added new logs styling in deployments views

Browse Source
This commit is contained in:
190km
2024-12-12 21:00:17 +01:00
parent fe088bad3b
commit ee622b1ba0
2 changed files with 35 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
View File

@@ -6,6 +6,8 @@ import {
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { TerminalLine } from "../../docker/logs/terminal-line";
import { LogLine, parseLogs } from "../../docker/logs/utils";
interface Props { interface Props {
logPath: string | null; logPath: string | null;
@@ -15,6 +17,7 @@ interface Props {
} }
export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => { export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
const [data, setData] = useState(""); const [data, setData] = useState("");
const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
const endOfLogsRef = useRef<HTMLDivElement>(null); const endOfLogsRef = useRef<HTMLDivElement>(null);
const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
@@ -52,6 +55,11 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" }); endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
}; };
useEffect(() => {
const logs = parseLogs(data);
setFilteredLogs(logs);
}, [data]);
useEffect(() => { useEffect(() => {
scrollToBottom(); scrollToBottom();
}, [data]); }, [data]);
@@ -81,12 +89,15 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
</DialogHeader> </DialogHeader>
<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]"> <div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
<code> <div>
<pre className="whitespace-pre-wrap break-words"> {filteredLogs.map((log: LogLine, index: number) => (
{data || "Loading..."} <TerminalLine
</pre> key={index}
log={log}
/>
)) || "Loading..."}
<div ref={endOfLogsRef} /> <div ref={endOfLogsRef} />
</code> </div>
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

25
apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
View File

@@ -6,6 +6,8 @@ import {
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { TerminalLine } from "../../docker/logs/terminal-line";
import { LogLine, parseLogs } from "../../docker/logs/utils";
interface Props { interface Props {
logPath: string | null; logPath: string | null;
@@ -21,8 +23,8 @@ export const ShowDeploymentCompose = ({
}: Props) => { }: Props) => {
const [data, setData] = useState(""); const [data, setData] = useState("");
const endOfLogsRef = useRef<HTMLDivElement>(null); const endOfLogsRef = useRef<HTMLDivElement>(null);
const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
useEffect(() => { useEffect(() => {
if (!open || !logPath) return; if (!open || !logPath) return;
@@ -58,6 +60,13 @@ export const ShowDeploymentCompose = ({
endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" }); endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
}; };
useEffect(() => {
const logs = parseLogs(data);
console.log(data);
console.log(logs);
setFilteredLogs(logs);
}, [data]);
useEffect(() => { useEffect(() => {
scrollToBottom(); scrollToBottom();
}, [data]); }, [data]);
@@ -87,12 +96,16 @@ export const ShowDeploymentCompose = ({
</DialogHeader> </DialogHeader>
<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]"> <div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
<code> <div>
<pre className="whitespace-pre-wrap break-words">
{data || "Loading..."} {filteredLogs.map((log: LogLine, index: number) => (
</pre> <TerminalLine
key={index}
log={log}
/>
)) || "Loading..."}
<div ref={endOfLogsRef} /> <div ref={endOfLogsRef} />
</code> </div>
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>