130 lines
4.4 KiB
TypeScript
130 lines
4.4 KiB
TypeScript
import {useEffect, useRef, useState} from "react";
|
|
import {create} from "zustand";
|
|
|
|
import formatDuration from "../../utils/formatDuration.ts";
|
|
import {type LogFilterPredicate, type LogRecord, useLogs} from "./useLogs.ts";
|
|
import Filters from "./Filters.tsx";
|
|
import {type Cell, useCell} from "../../utils/cellStore.ts";
|
|
|
|
import styles from "./Logging.module.css";
|
|
|
|
type LoggingSettings = {
|
|
showRelativeTime: boolean;
|
|
setShowRelativeTime: (showRelativeTime: boolean) => void;
|
|
scrollToBottom: boolean;
|
|
setScrollToBottom: (scrollToBottom: boolean) => void;
|
|
};
|
|
|
|
const useLoggingSettings = create<LoggingSettings>((set) => ({
|
|
showRelativeTime: false,
|
|
setShowRelativeTime: (showRelativeTime: boolean) => set({ showRelativeTime }),
|
|
scrollToBottom: true,
|
|
setScrollToBottom: (scrollToBottom: boolean) => set({ scrollToBottom }),
|
|
}));
|
|
|
|
function LogMessage({
|
|
recordCell,
|
|
onUpdate,
|
|
}: {
|
|
recordCell: Cell<LogRecord>,
|
|
onUpdate?: () => void,
|
|
}) {
|
|
const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
|
|
const record = useCell(recordCell);
|
|
|
|
/**
|
|
* Normalizes the log level number to a multiple of 10, for which there are CSS styles.
|
|
*/
|
|
const normalizedLevelNo = (() => {
|
|
// By default, the highest level is 50 (CRITICAL). Custom levels can be higher, but we don't have more critical color.
|
|
if (record.levelno >= 50) return 50;
|
|
|
|
return Math.round(record.levelno / 10) * 10;
|
|
})();
|
|
|
|
const normalizedName = record.name.split(".").pop() || record.name;
|
|
|
|
useEffect(() => {
|
|
if (onUpdate) onUpdate();
|
|
}, [record, onUpdate]);
|
|
|
|
return <div className={`${styles.logContainer} round-md border-lg flex-row gap-md`}>
|
|
<div className={`${styles[`accented${normalizedLevelNo}`]} flex-col padding-sm justify-between`}>
|
|
<span className={"mono bold"}>{record.levelname}</span>
|
|
<span className={"mono clickable font-small"}
|
|
onClick={() => setShowRelativeTime(!showRelativeTime)}
|
|
>{showRelativeTime
|
|
? formatDuration(record.relativeCreated)
|
|
: new Date(record.created * 1000).toLocaleTimeString()
|
|
}</span>
|
|
</div>
|
|
<div className={"flex-col flex-1 padding-sm"}>
|
|
<span className={"mono"}>{normalizedName}</span>
|
|
<span>{record.message}</span>
|
|
</div>
|
|
</div>;
|
|
}
|
|
|
|
function LogMessages({ recordCells }: { recordCells: Cell<LogRecord>[] }) {
|
|
const scrollableRef = useRef<HTMLDivElement>(null);
|
|
const lastElementRef = useRef<HTMLLIElement>(null)
|
|
const { scrollToBottom, setScrollToBottom } = useLoggingSettings();
|
|
|
|
useEffect(() => {
|
|
if (!scrollableRef.current) return;
|
|
const currentScrollableRef = scrollableRef.current;
|
|
|
|
const handleScroll = () => setScrollToBottom(false);
|
|
|
|
currentScrollableRef.addEventListener("wheel", handleScroll);
|
|
currentScrollableRef.addEventListener("touchmove", handleScroll);
|
|
|
|
return () => {
|
|
currentScrollableRef.removeEventListener("wheel", handleScroll);
|
|
currentScrollableRef.removeEventListener("touchmove", handleScroll);
|
|
}
|
|
}, [scrollableRef, setScrollToBottom]);
|
|
|
|
function scrollLastElementIntoView(force = false) {
|
|
if ((!scrollToBottom && !force) || !lastElementRef.current) return;
|
|
lastElementRef.current.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
|
|
return <div ref={scrollableRef} className={"min-height-0 scroll-y padding-b-md"}>
|
|
<ol className={`${styles.noNumbers} margin-0 flex-col gap-md`}>
|
|
{recordCells.map((recordCell, i) => (
|
|
<li key={`${i}_${recordCell.get().firstRelativeCreated}`}>
|
|
<LogMessage recordCell={recordCell} onUpdate={scrollLastElementIntoView} />
|
|
</li>
|
|
))}
|
|
<li ref={lastElementRef}></li>
|
|
</ol>
|
|
{!scrollToBottom && <button
|
|
className={styles.floatingButton}
|
|
onClick={() => {
|
|
setScrollToBottom(true);
|
|
scrollLastElementIntoView(true);
|
|
}}
|
|
>
|
|
Scroll to bottom
|
|
</button>}
|
|
</div>;
|
|
}
|
|
|
|
export default function Logging() {
|
|
const [filterPredicates, setFilterPredicates] = useState(new Map<string, LogFilterPredicate>());
|
|
const { filteredLogs, distinctNames } = useLogs(filterPredicates)
|
|
|
|
return <div className={`flex-col gap-lg min-height-0 ${styles.loggingContainer}`}>
|
|
<div className={"flex-row gap-lg justify-between align-center"}>
|
|
<h2 className={"margin-0"}>Logs</h2>
|
|
<Filters
|
|
filterPredicates={filterPredicates}
|
|
setFilterPredicates={setFilterPredicates}
|
|
agentNames={distinctNames}
|
|
/>
|
|
</div>
|
|
<LogMessages recordCells={filteredLogs} />
|
|
</div>;
|
|
}
|