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

fix: fixed highligh search terms color

Browse Source
This commit is contained in:
190km
2025-02-23 01:18:18 +00:00
parent 56af89468a
commit 2470d672d4
1 changed files with 23 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
View File

@@ -35,45 +35,34 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
}) })
: "--- No time found ---"; : "--- No time found ---";
const highlightMessage = (text: string, term: string) => { const highlightMessage = (text: string, term: string) => {
if (!term) { if (!term) {
return (
<span
className="transition-colors"
dangerouslySetInnerHTML={{
__html: fancyAnsi.toHtml(text),
}}
/>
);
}
const htmlContent = fancyAnsi.toHtml(text);
const searchRegex = new RegExp(`(${escapeRegExp(term)})`, "gi");
const modifiedContent = htmlContent.replace(
searchRegex,
(match) =>
`<span class="bg-orange-200/80 dark:bg-orange-900/80 font-bold">${match}</span>`,
);
return ( return (
<span <span
className="transition-colors" className="transition-colors"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{ __html: modifiedContent }}
__html: fancyAnsi.toHtml(text),
}}
/> />
); );
} };
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) => { const tooltip = (color: string, timestamp: string | null) => {
const square = ( const square = (