idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 08:49:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): added ability to customize logs view (#236)

Browse source 
* enhancement(frontend/logs): added ability to indent messages, hide wrapped text and ability to turn off "scroll to bottom page on new line". addresses #232

* fix: improved "hide wrapped text" feature
This commit is contained in:
stacksmash76 2022-04-12 16:57:20 +02:00 • committed by GitHub
parent 9e5b7b0aa5
commit 4b74a006c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 161 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

102
web/src/screens/Logs.tsx
View file

@ -1,6 +1,10 @@
import { useEffect, useRef, useState } from "react";
import { ExclamationIcon } from "@heroicons/react/solid";
import { APIClient } from "../api/APIClient";
import {ExclamationIcon} from "@heroicons/react/solid";
import { Checkbox } from "../components/Checkbox";
import { classNames } from "../utils";
import { SettingsContext } from "../utils/Context";
type LogEvent = {
time: string;
@ -8,26 +12,46 @@ type LogEvent = {
message: string;
};
type LogLevel = "TRACE" | "DEBUG" | "INFO" | "ERROR";
const LogColors: Record<LogLevel, string> = {
"TRACE": "text-purple-300",
"DEBUG": "text-yellow-500",
"INFO": "text-green-500",
"ERROR": "text-red-500",
};
export const Logs = () => {
const [settings, setSettings] = SettingsContext.use();
const messagesEndRef = useRef<HTMLDivElement>(null);
const [logs, setLogs] = useState<LogEvent[]>([]);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "auto" })
messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
}
useEffect(() => {
const es = APIClient.events.logs()
const es = APIClient.events.logs();
es.onmessage = (event) => {
const d = JSON.parse(event.data) as LogEvent;
setLogs(prevState => ([...prevState, d]));
const newData = JSON.parse(event.data) as LogEvent;
setLogs((prevState) => [...prevState, newData]);
if (settings.scrollOnNewLog)
scrollToBottom();
}
return () => {
es.close();
}
}, [setLogs]);
return () => es.close();
}, [setLogs, settings]);
const onSetValue = (
key: "scrollOnNewLog" | "indentLogLines" | "hideWrappedText",
newValue: boolean
) => setSettings((prevState) => ({
...prevState,
[key]: newValue
}));
return (
<main>
@ -44,17 +68,57 @@ export const Logs = () => {
</div>
</header>
<div className="max-w-7xl mx-auto pb-12 px-2 sm:px-4 lg:px-8">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg px-2 sm:px-4 py-3 sm:py-4">
<div className="overflow-y-auto p-2 rounded-lg min-h-[32rem] lg:min-h-[48rem] min-w-full bg-gray-100 dark:bg-gray-900">
<div
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg px-2 sm:px-4 pb-3 sm:pb-4"
>
<Checkbox
label="Scroll to bottom on new message"
value={settings.scrollOnNewLog}
setValue={(newValue) => onSetValue("scrollOnNewLog", newValue)}
/>
<Checkbox
label="Indent log lines"
description="Indent each log line according to their respective starting position"
value={settings.indentLogLines}
setValue={(newValue) => onSetValue("indentLogLines", newValue)}
/>
<Checkbox
label="Hide wrapped text"
description="Hides text that is meant to be wrapped"
value={settings.hideWrappedText}
setValue={(newValue) => onSetValue("hideWrappedText", newValue)}
/>
<div
className="overflow-y-auto p-2 rounded-lg min-h-[32rem] lg:min-h-[48rem] min-w-full bg-gray-100 dark:bg-gray-900"
>
{logs.map((a, idx) => (
<p key={idx}>
<span className="font-mono text-gray-500 dark:text-gray-600 mr-2">{a.time}</span>
{a.level === "TRACE" && <span className="font-mono font-semibold text-purple-300">{a.level}</span>}
{a.level === "DEBUG" && <span className="font-mono font-semibold text-yellow-500">{a.level}</span>}
{a.level === "INFO" && <span className="font-mono font-semibold text-green-500">{a.level} </span>}
{a.level === "ERROR" && <span className="font-mono font-semibold text-red-500">{a.level}</span>}
<span className="ml-2 text-black dark:text-gray-300">{a.message}</span>
</p>
<div
key={idx}
className={classNames(
settings.indentLogLines ? "grid justify-start grid-flow-col" : "",
settings.hideWrappedText ? "truncate hover:text-ellipsis hover:whitespace-normal" : "",
)}
>
<span
className="font-mono text-gray-500 dark:text-gray-600 mr-2 h-full"
>
{a.time}
</span>
{a.level in LogColors ? (
<span
className={classNames(
LogColors[a.level as LogLevel],
"font-mono font-semibold h-full"
)}
>
{a.level}
{' '}
</span>
) : null}
<span className="ml-2 text-black dark:text-gray-300">
{a.message}
</span>
</div>
))}
<div ref={messagesEndRef} />
</div>

9
web/src/utils/Context.ts
View file

@ -46,12 +46,18 @@ export const AuthContext = newRidgeState<AuthInfo>(
interface SettingsType {
debug: boolean;
darkTheme: boolean;
scrollOnNewLog: boolean;
indentLogLines: boolean;
hideWrappedText: boolean;
}
export const SettingsContext = newRidgeState<SettingsType>(
{
debug: false,
darkTheme: true
darkTheme: true,
scrollOnNewLog: false,
indentLogLines: false,
hideWrappedText: false
},
{
onSet: (new_state) => {
@ -61,6 +67,7 @@ export const SettingsContext = newRidgeState<SettingsType>(
} else {
document.documentElement.classList.remove("dark");
}
localStorage.setItem("settings", JSON.stringify(new_state));
} catch (e) {
console.log("An error occurred while trying to modify the local settings context state.");