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

Feature: Tail live logs (#27)

Browse source 
* chore: add new yarn.lock

* chore: add pkgs

* feat: push events via server-sent-events

* feat(web): tail live logs

* fix: update irc network

* fix: set baseurl

* fix: headers
This commit is contained in:
Ludvig Lundgren 2021-09-07 22:23:27 +02:00 • committed by GitHub
parent 11fcf1ead9
commit 09eb0b1716
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 213 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

59
web/src/screens/Logs.tsx Normal file
View file

@ -0,0 +1,59 @@
import { useEffect, useRef, useState } from "react";
import APIClient from "../api/APIClient";
type LogEvent = {
time: string;
level: string;
message: string;
};
export default function Logs() {
const [logs, setLogs] = useState<LogEvent[]>([])
const messagesEndRef: any = useRef(null)
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "auto" })
}
useEffect(() => {
const es = APIClient.events.logs()
es.onmessage = (event) => {
let d: LogEvent = JSON.parse(event.data)
setLogs(prevState => ([...prevState, d]))
scrollToBottom()
}
return () => {
es.close()
}
}, [setLogs]);
return (
<main className="-mt-48">
<header className="py-10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-white capitalize">Logs</h1>
</div>
</header>
<div className="max-w-7xl mx-auto pb-12 px-2 sm:px-4 lg:px-8">
<div className="bg-white rounded-lg shadow px-2 sm:px-4 py-3 sm:py-4">
<div className=" overflow-y-auto p-2 rounded-lg h-96 bg-gray-900">
{logs.map((a, idx) => (
<p key={idx}>
<span className="font-mono 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-gray-300">{a.message}</span>
</p>
))}
<div ref={messagesEndRef} />
</div>
</div>
</div>
</main>
)
}