administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 21:25:24 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Render all items

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-03 08:28:00 -06:00
parent ff31cc1807
commit 1184aa9ad5
1 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/src/pages/Logs.tsx
View File

@ -20,7 +20,7 @@ const frigateSection = /[\w.]*/;
const goSeverity = /(DEB )|(INF )|(WARN )|(ERR )/; const goSeverity = /(DEB )|(INF )|(WARN )|(ERR )/;
const goSection = /\[[\w]*]/; const goSection = /\[[\w]*]/;
const ngSeverity = /(GET)|(POST)|(PATCH)|(DELETE)/; const ngSeverity = /(GET)|(POST)|(PUT)|(PATCH)|(DELETE)/;
function Logs() { function Logs() {
const [logService, setLogService] = useState<LogType>("frigate"); const [logService, setLogService] = useState<LogType>("frigate");
@ -246,6 +246,15 @@ function Logs() {
return; return;
} }
if (logLines.length < 100) {
setAtBottom(true);
return;
}
if (atBottom) {
return;
}
if (!contentRef.current) { if (!contentRef.current) {
return; return;
} }
@ -255,6 +264,8 @@ function Logs() {
behavior: "instant", behavior: "instant",
}); });
setTimeout(() => setAtBottom(true), 300); setTimeout(() => setAtBottom(true), 300);
// we need to listen on the current range of visible items
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [logLines, logService]); }, [logLines, logService]);
return ( return (
@ -328,15 +339,20 @@ function Logs() {
Message Message
</div> </div>
</div> </div>
{logLines.length > 0 && logRange.start > 0 && <div ref={startLogRef} />} {logLines.length > 0 &&
{logLines.map((log, idx) => ( [...Array(logRange.end - 1).keys()].map((idx) =>
idx >= logRange.start ? (
<LogLineData <LogLineData
key={`${idx}-${log.content}`} key={`${idx}-${logService}`}
startRef={idx == logRange.start ? startLogRef : undefined}
className={atBottom ? "" : "invisible"} className={atBottom ? "" : "invisible"}
offset={idx} offset={idx}
line={log} line={logLines[idx - logRange.start]}
/> />
))} ) : (
<div key={`${idx}-${logService}`} className="h-12" />
),
)}
{logLines.length > 0 && <div id="page-bottom" ref={endLogRef} />} {logLines.length > 0 && <div id="page-bottom" ref={endLogRef} />}
</div> </div>
</div> </div>
@ -344,11 +360,12 @@ function Logs() {
} }
type LogLineDataProps = { type LogLineDataProps = {
startRef?: (node: HTMLDivElement | null) => void;
className: string; className: string;
line: LogLine; line: LogLine;
offset: number; offset: number;
}; };
function LogLineData({ className, line, offset }: LogLineDataProps) { function LogLineData({ startRef, className, line, offset }: LogLineDataProps) {
// long log message // long log message
const contentRef = useRef<HTMLDivElement | null>(null); const contentRef = useRef<HTMLDivElement | null>(null);
@ -379,6 +396,7 @@ function LogLineData({ className, line, offset }: LogLineDataProps) {
return ( return (
<div <div
ref={startRef}
className={`py-2 grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 gap-2 ${offset % 2 == 0 ? "bg-secondary" : "bg-secondary/80"} border-t border-x ${className}`} className={`py-2 grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 gap-2 ${offset % 2 == 0 ? "bg-secondary" : "bg-secondary/80"} border-t border-x ${className}`}
> >
<div <div