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

Use header in layout

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-05 11:48:53 -06:00
parent 15b38d8e8d
commit 5391976b4b
1 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -381,11 +381,8 @@ function Logs() {
</Button> </Button>
)} )}
<div <div className="size-full flex flex-col my-2 font-mono text-sm sm:p-2 whitespace-pre-wrap bg-primary border border-secondary rounded-md overflow-hidden">
ref={contentRef} <div className="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 *:px-2 *:py-3 *:text-sm *:text-primary-foreground/40">
className="w-full h-min my-2 font-mono text-sm sm:p-2 whitespace-pre-wrap overflow-auto no-scrollbar bg-primary border border-secondary rounded-md"
>
<div className="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 *:p-2 *:text-sm *:text-primary-foreground/40">
<div className="p-1 flex items-center capitalize">Type</div> <div className="p-1 flex items-center capitalize">Type</div>
<div className="col-span-2 sm:col-span-1 flex items-center"> <div className="col-span-2 sm:col-span-1 flex items-center">
Timestamp Timestamp
@ -395,45 +392,50 @@ function Logs() {
Message Message
</div> </div>
</div> </div>
{logLines.length > 0 && <div
[...Array(logRange.end).keys()].map((idx) => { ref={contentRef}
const logLine = className="w-full flex flex-col overflow-y-auto no-scrollbar"
idx >= logRange.start >
? logLines[idx - logRange.start] {logLines.length > 0 &&
: undefined; [...Array(logRange.end).keys()].map((idx) => {
const logLine =
idx >= logRange.start
? logLines[idx - logRange.start]
: undefined;
if (logLine) {
const line = logLines[idx - logRange.start];
if (filterSeverity && !filterSeverity.includes(line.severity)) {
return (
<div
ref={idx == logRange.start + 10 ? startLogRef : undefined}
/>
);
}
if (logLine) {
const line = logLines[idx - logRange.start];
if (filterSeverity && !filterSeverity.includes(line.severity)) {
return ( return (
<div <LogLineData
ref={idx == logRange.start + 10 ? startLogRef : undefined} key={`${idx}-${logService}`}
startRef={
idx == logRange.start + 10 ? startLogRef : undefined
}
className={initialScroll ? "" : "invisible"}
line={line}
onClickSeverity={() => setFilterSeverity([line.severity])}
onSelect={() => setSelectedLog(line)}
/> />
); );
} }
return ( return (
<LogLineData <div
key={`${idx}-${logService}`} key={`${idx}-${logService}`}
startRef={ className={isDesktop ? "h-12" : "h-16"}
idx == logRange.start + 10 ? startLogRef : undefined
}
className={initialScroll ? "" : "invisible"}
line={line}
onClickSeverity={() => setFilterSeverity([line.severity])}
onSelect={() => setSelectedLog(line)}
/> />
); );
} })}
{logLines.length > 0 && <div id="page-bottom" ref={endLogRef} />}
return ( </div>
<div
key={`${idx}-${logService}`}
className={isDesktop ? "h-12" : "h-16"}
/>
);
})}
{logLines.length > 0 && <div id="page-bottom" ref={endLogRef} />}
</div> </div>
</div> </div>
); );
@ -456,7 +458,7 @@ function LogLineData({
return ( return (
<div <div
ref={startRef} ref={startRef}
className={`py-2 grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 gap-2 border-secondary border-t cursor-pointer hover:bg-muted ${className} *:text-sm`} className={`w-full py-2 grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 gap-2 border-secondary border-t cursor-pointer hover:bg-muted ${className} *:text-sm`}
onClick={onSelect} onClick={onSelect}
> >
<div className="h-full p-1 flex items-center gap-2"> <div className="h-full p-1 flex items-center gap-2">
@ -470,7 +472,7 @@ function LogLineData({
{line.section} {line.section}
</div> </div>
</div> </div>
<div className="size-full pr-2 col-span-5 sm:col-span-4 md:col-span-8 flex justify-between items-center"> <div className="size-full pl-2 sm:pl-0 pr-2 col-span-5 sm:col-span-4 md:col-span-8 flex justify-between items-center">
<div className="w-full overflow-hidden whitespace-nowrap text-ellipsis"> <div className="w-full overflow-hidden whitespace-nowrap text-ellipsis">
{line.content} {line.content}
</div> </div>