47 lines
1.0 KiB
TypeScript
47 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef } from "react";
|
|
|
|
export type LogsType = {
|
|
machine_id?: string;
|
|
logs: string;
|
|
timestamp: number;
|
|
}[];
|
|
|
|
export function LogsViewer({ logs }: { logs: LogsType }) {
|
|
const container = useRef<HTMLDivElement | null>(null);
|
|
|
|
useEffect(() => {
|
|
// console.log(logs.length, container.current);
|
|
if (container.current) {
|
|
const scrollHeight = container.current.scrollHeight;
|
|
|
|
container.current.scrollTo({
|
|
top: scrollHeight,
|
|
behavior: "smooth",
|
|
});
|
|
}
|
|
}, [logs.length]);
|
|
|
|
return (
|
|
<div
|
|
ref={(ref) => {
|
|
if (!container.current && ref) {
|
|
const scrollHeight = ref.scrollHeight;
|
|
|
|
ref.scrollTo({
|
|
top: scrollHeight,
|
|
behavior: "instant",
|
|
});
|
|
}
|
|
container.current = ref;
|
|
}}
|
|
className="flex flex-col text-xs p-2 overflow-y-scroll max-h-[400px] whitespace-break-spaces"
|
|
>
|
|
{logs.map((x, i) => (
|
|
<div key={i}>{x.logs}</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|