mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-07-28 01:05:25 +02:00
Merge branch 'canary' into feature/node-cluster-logs
This commit is contained in:
Mauricio Siu
@@ -7,9 +7,10 @@ import {
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { FancyAnsi } from "fancy-ansi";
|
||||
import { escapeRegExp } from "lodash";
|
||||
import React from "react";
|
||||
import { type LogLine, getLogType, parseAnsi } from "./utils";
|
||||
import { type LogLine, getLogType } from "./utils";
|
||||
|
||||
interface LogLineProps {
|
||||
log: LogLine;
|
||||
@@ -17,6 +18,8 @@ interface LogLineProps {
|
||||
searchTerm?: string;
|
||||
}
|
||||
|
||||
const fancyAnsi = new FancyAnsi();
|
||||
|
||||
export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
|
||||
const { timestamp, message, rawTimestamp } = log;
|
||||
const { type, variant, color } = getLogType(message);
|
||||
@@ -34,37 +37,42 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
|
||||
|
||||
const highlightMessage = (text: string, term: string) => {
|
||||
if (!term) {
|
||||
const segments = parseAnsi(text);
|
||||
return segments.map((segment, index) => (
|
||||
<span key={index} className={segment.className || undefined}>
|
||||
{segment.text}
|
||||
</span>
|
||||
));
|
||||
return (
|
||||
<span
|
||||
className="transition-colors"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: fancyAnsi.toHtml(text),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// For search, we need to handle both ANSI and search highlighting
|
||||
const segments = parseAnsi(text);
|
||||
return segments.map((segment, index) => {
|
||||
const parts = segment.text.split(
|
||||
new RegExp(`(${escapeRegExp(term)})`, "gi"),
|
||||
);
|
||||
return (
|
||||
<span key={index} className={segment.className || undefined}>
|
||||
{parts.map((part, partIndex) =>
|
||||
part.toLowerCase() === term.toLowerCase() ? (
|
||||
<span
|
||||
key={partIndex}
|
||||
className="bg-yellow-200 dark:bg-yellow-900"
|
||||
>
|
||||
{part}
|
||||
</span>
|
||||
) : (
|
||||
part
|
||||
),
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
});
|
||||
const htmlContent = fancyAnsi.toHtml(text);
|
||||
const modifiedContent = htmlContent.replace(
|
||||
/<span([^>]*)>([^<]*)<\/span>/g,
|
||||
(match, attrs, content) => {
|
||||
const searchRegex = new RegExp(`(${escapeRegExp(term)})`, "gi");
|
||||
if (!content.match(searchRegex)) return match;
|
||||
|
||||
const segments = content.split(searchRegex);
|
||||
const wrappedSegments = segments
|
||||
.map((segment: string) =>
|
||||
segment.toLowerCase() === term.toLowerCase()
|
||||
? `<span${attrs} class="bg-yellow-200/50 dark:bg-yellow-900/50">${segment}</span>`
|
||||
: segment,
|
||||
)
|
||||
.join("");
|
||||
|
||||
return `<span${attrs}>${wrappedSegments}</span>`;
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
<span
|
||||
className="transition-colors"
|
||||
dangerouslySetInnerHTML={{ __html: modifiedContent }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const tooltip = (color: string, timestamp: string | null) => {
|
||||
|
||||
@@ -12,47 +12,6 @@ interface LogStyle {
|
||||
variant: LogVariant;
|
||||
color: string;
|
||||
}
|
||||
interface AnsiSegment {
|
||||
text: string;
|
||||
className: string;
|
||||
}
|
||||
|
||||
const ansiToTailwind: Record<number, string> = {
|
||||
// Reset
|
||||
0: "",
|
||||
// Regular colors
|
||||
30: "text-black dark:text-gray-900",
|
||||
31: "text-red-600 dark:text-red-500",
|
||||
32: "text-green-600 dark:text-green-500",
|
||||
33: "text-yellow-600 dark:text-yellow-500",
|
||||
34: "text-blue-600 dark:text-blue-500",
|
||||
35: "text-purple-600 dark:text-purple-500",
|
||||
36: "text-cyan-600 dark:text-cyan-500",
|
||||
37: "text-gray-600 dark:text-gray-400",
|
||||
// Bright colors
|
||||
90: "text-gray-500 dark:text-gray-600",
|
||||
91: "text-red-500 dark:text-red-600",
|
||||
92: "text-green-500 dark:text-green-600",
|
||||
93: "text-yellow-500 dark:text-yellow-600",
|
||||
94: "text-blue-500 dark:text-blue-600",
|
||||
95: "text-purple-500 dark:text-purple-600",
|
||||
96: "text-cyan-500 dark:text-cyan-600",
|
||||
97: "text-white dark:text-gray-300",
|
||||
// Background colors
|
||||
40: "bg-black",
|
||||
41: "bg-red-600",
|
||||
42: "bg-green-600",
|
||||
43: "bg-yellow-600",
|
||||
44: "bg-blue-600",
|
||||
45: "bg-purple-600",
|
||||
46: "bg-cyan-600",
|
||||
47: "bg-white",
|
||||
// Formatting
|
||||
1: "font-bold",
|
||||
2: "opacity-75",
|
||||
3: "italic",
|
||||
4: "underline",
|
||||
};
|
||||
|
||||
const LOG_STYLES: Record<LogType, LogStyle> = {
|
||||
error: {
|
||||
@@ -191,56 +150,3 @@ export const getLogType = (message: string): LogStyle => {
|
||||
|
||||
return LOG_STYLES.info;
|
||||
};
|
||||
|
||||
export function parseAnsi(text: string) {
|
||||
const segments: { text: string; className: string }[] = [];
|
||||
let currentIndex = 0;
|
||||
let currentClasses: string[] = [];
|
||||
|
||||
while (currentIndex < text.length) {
|
||||
const escStart = text.indexOf("\x1b[", currentIndex);
|
||||
|
||||
// No more escape sequences found
|
||||
if (escStart === -1) {
|
||||
if (currentIndex < text.length) {
|
||||
segments.push({
|
||||
text: text.slice(currentIndex),
|
||||
className: currentClasses.join(" "),
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Add text before escape sequence
|
||||
if (escStart > currentIndex) {
|
||||
segments.push({
|
||||
text: text.slice(currentIndex, escStart),
|
||||
className: currentClasses.join(" "),
|
||||
});
|
||||
}
|
||||
|
||||
const escEnd = text.indexOf("m", escStart);
|
||||
if (escEnd === -1) break;
|
||||
|
||||
// Handle multiple codes in one sequence (e.g., \x1b[1;31m)
|
||||
const codesStr = text.slice(escStart + 2, escEnd);
|
||||
const codes = codesStr.split(";").map((c) => Number.parseInt(c, 10));
|
||||
|
||||
if (codes.includes(0)) {
|
||||
// Reset all formatting
|
||||
currentClasses = [];
|
||||
} else {
|
||||
// Add new classes for each code
|
||||
for (const code of codes) {
|
||||
const className = ansiToTailwind[code];
|
||||
if (className && !currentClasses.includes(className)) {
|
||||
currentClasses.push(className);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
currentIndex = escEnd + 1;
|
||||
}
|
||||
|
||||
return segments;
|
||||
}
|
||||
@@ -59,7 +59,10 @@ export const DockerTerminalModal = ({
|
||||
{children}
|
||||
</DropdownMenuItem>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-7xl">
|
||||
<DialogContent
|
||||
className="max-h-screen overflow-y-auto sm:max-w-7xl"
|
||||
onEscapeKeyDown={(event) => event.preventDefault()}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Docker Terminal</DialogTitle>
|
||||
<DialogDescription>
|
||||
@@ -73,7 +76,7 @@ export const DockerTerminalModal = ({
|
||||
serverId={serverId || ""}
|
||||
/>
|
||||
<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogContent onEscapeKeyDown={(event) => event.preventDefault()}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
Are you sure you want to close the terminal?
|
||||
|
||||
@@ -4,6 +4,7 @@ import { FitAddon } from "xterm-addon-fit";
|
||||
import "@xterm/xterm/css/xterm.css";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { AttachAddon } from "@xterm/addon-attach";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
@@ -18,6 +19,7 @@ export const DockerTerminal: React.FC<Props> = ({
|
||||
}) => {
|
||||
const termRef = useRef(null);
|
||||
const [activeWay, setActiveWay] = React.useState<string | undefined>("bash");
|
||||
const { resolvedTheme } = useTheme();
|
||||
useEffect(() => {
|
||||
const container = document.getElementById(id);
|
||||
if (container) {
|
||||
@@ -28,8 +30,9 @@ export const DockerTerminal: React.FC<Props> = ({
|
||||
lineHeight: 1.4,
|
||||
convertEol: true,
|
||||
theme: {
|
||||
cursor: "transparent",
|
||||
cursor: resolvedTheme === "light" ? "#000000" : "transparent",
|
||||
background: "rgba(0, 0, 0, 0)",
|
||||
foreground: "currentColor",
|
||||
},
|
||||
});
|
||||
const addonFit = new FitAddon();
|
||||
|
||||
Reference in New Issue
Block a user