refactor(ui): improve log highlighting and template formatting

This commit is contained in:
Mauricio Siu 2025-02-23 18:11:27 -06:00
parent 125e44812b
commit d3b2cee7fb
3 changed files with 53 additions and 54 deletions

View File

@ -35,34 +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={{ __html: modifiedContent }} 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 (
<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 = (

View File

@ -1,38 +1,38 @@
import { import {
type DomainSchema, type DomainSchema,
type Schema, type Schema,
type Template, type Template,
generateRandomDomain, generateRandomDomain,
} from "../utils"; } from "../utils";
export function generate(schema: Schema): Template { export function generate(schema: Schema): Template {
const dashboardDomain = generateRandomDomain(schema); const dashboardDomain = generateRandomDomain(schema);
const backendDomain = generateRandomDomain(schema); const backendDomain = generateRandomDomain(schema);
const actionsDomain = generateRandomDomain(schema); const actionsDomain = generateRandomDomain(schema);
const domains: DomainSchema[] = [ const domains: DomainSchema[] = [
{ {
host: dashboardDomain, host: dashboardDomain,
port: 6791, port: 6791,
serviceName: "dashboard", serviceName: "dashboard",
}, },
{ {
host: backendDomain, host: backendDomain,
port: 3210, port: 3210,
serviceName: "backend", serviceName: "backend",
}, },
{ {
host: actionsDomain, host: actionsDomain,
port: 3211, port: 3211,
serviceName: "backend", serviceName: "backend",
}, },
]; ];
const envs = [ const envs = [
`NEXT_PUBLIC_DEPLOYMENT_URL=http://${backendDomain}`, `NEXT_PUBLIC_DEPLOYMENT_URL=http://${backendDomain}`,
`CONVEX_CLOUD_ORIGIN=http://${backendDomain}`, `CONVEX_CLOUD_ORIGIN=http://${backendDomain}`,
`CONVEX_SITE_ORIGIN=http://${actionsDomain}`, `CONVEX_SITE_ORIGIN=http://${actionsDomain}`,
]; ];
return { envs, domains }; return { envs, domains };
} }

View File

@ -1619,4 +1619,3 @@ export const templates: TemplateData[] = [
load: () => import("./wikijs/index").then((m) => m.generate), load: () => import("./wikijs/index").then((m) => m.generate),
}, },
]; ];