Skip to content

Commit 747a88a

Browse files
author
Dylan Huang
authored
UI improvements (#268)
* Enhance LogsSection component with auto-scroll functionality - Added a ref to the logs container to enable auto-scrolling to the bottom whenever new logs are fetched. - Updated the component to import useRef for managing the scroll container reference. * vite build
1 parent a89c9d9 commit 747a88a

File tree

6 files changed

+21
-10
lines changed

6 files changed

+21
-10
lines changed

‎vite-app/dist/assets/index-34WaHH5W.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

vite-app/dist/assets/index-C81y9r9l.js renamed to vite-app/dist/assets/index-DOPsfOMT.js

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

vite-app/dist/assets/index-C81y9r9l.js.map renamed to vite-app/dist/assets/index-DOPsfOMT.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vite-app/dist/assets/index-DpYZaoAr.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎vite-app/dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>EP | Log Viewer</title>
77
<link rel="icon" href="/assets/favicon-BkAAWQga.png" />
8-
<script type="module" crossorigin src="/assets/index-C81y9r9l.js"></script>
9-
<link rel="stylesheet" crossorigin href="/assets/index-DpYZaoAr.css">
8+
<script type="module" crossorigin src="/assets/index-DOPsfOMT.js"></script>
9+
<link rel="stylesheet" crossorigin href="/assets/index-34WaHH5W.css">
1010
</head>
1111
<body>
1212
<div id="root"></div>

‎vite-app/src/components/LogsSection.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { observer } from "mobx-react";
2-
import { useState, useEffect } from "react";
2+
import { useState, useEffect, useRef } from "react";
33
import {
44
LogsResponseSchema,
55
type LogEntry,
@@ -18,6 +18,7 @@ export const LogsSection = observer(({ rolloutId }: LogsSectionProps) => {
1818
const [loading, setLoading] = useState(false);
1919
const [error, setError] = useState<string | null>(null);
2020
const [selectedLevel, setSelectedLevel] = useState<string>("");
21+
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
2122

2223
const fetchLogs = async (isInitialLoad = false) => {
2324
if (!rolloutId) return;
@@ -114,6 +115,13 @@ export const LogsSection = observer(({ rolloutId }: LogsSectionProps) => {
114115
}
115116
}, [rolloutId, selectedLevel]);
116117

118+
// Auto-scroll to bottom whenever logs update
119+
useEffect(() => {
120+
const el = scrollContainerRef.current;
121+
if (!el) return;
122+
el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
123+
}, [logs]);
124+
117125
if (!rolloutId) {
118126
return null;
119127
}
@@ -160,7 +168,10 @@ export const LogsSection = observer(({ rolloutId }: LogsSectionProps) => {
160168
)}
161169

162170
{logs.length > 0 && (
163-
<div className="max-h-[800px] min-h-4 overflow-auto border border-gray-200">
171+
<div
172+
ref={scrollContainerRef}
173+
className="max-h-[800px] min-h-4 overflow-auto border border-gray-200"
174+
>
164175
<div>
165176
{logs.map((log, index) => (
166177
<div

0 commit comments

Comments
 (0)