Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Log search feedbacks #10088

Merged
merged 3 commits into from
Oct 22, 2024
Merged

fix: Log search feedbacks #10088

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03c1d7b
fix: Log searche feedbacks
gt2345 Oct 21, 2024
faf17f8
add comments
gt2345 Oct 22, 2024
d326014
fix
gt2345 Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion webui/react/src/pages/TrialDetails/LogViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export interface Props<T> {
idSet: Set<RecordKey>;
isScrollReady: boolean;
}>;
scrollToIndex: number;
}

export interface ViewerLog extends Log {
Expand Down Expand Up @@ -100,6 +101,7 @@ function LogViewer<T>({
setLogs,
logsRef,
local,
scrollToIndex,
}: Props<T>): JSX.Element {
const componentId = useId();

Expand Down Expand Up @@ -138,6 +140,11 @@ function LogViewer<T>({
[setLogs],
);

useEffect(() => {
if (scrollToIndex < 0) return;
virtuosoRef.current?.scrollToIndex({ index: scrollToIndex });
}, [scrollToIndex]);

useEffect(() => {
setScrolledForSearch(false);
}, [selectedLog]);
Expand All @@ -146,7 +153,7 @@ function LogViewer<T>({
if (scrolledForSearch || !selectedLog || !local.current.isScrollReady) return;
setTimeout(() => {
const index = logs.findIndex((l) => l.id === selectedLog.id);
if (index > -1 && index + 1 < logs.length) {
if (index > -1) {
virtuosoRef.current?.scrollToIndex({
behavior: 'smooth',
index: index,
Expand Down
1 change: 1 addition & 0 deletions webui/react/src/pages/TrialDetails/TrialDetailsLogs.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
.log {
cursor: pointer;
font-family: var(--theme-font-family-code);
font-size: 12px;

&:hover {
color: var(--theme-ix-on-active);
Expand Down
27 changes: 16 additions & 11 deletions webui/react/src/pages/TrialDetails/TrialDetailsLogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,11 @@ const TrialDetailsLogs: React.FC<Props> = ({ experiment, trial }: Props) => {
const [logs, setLogs] = useState<ViewerLog[]>([]);
const [searchOn, setSearchOn] = useState<boolean>(false);
const [logViewerOn, setLogViewerOn] = useState<boolean>(true);
const [searchInput, setSearchInput] = useState<string>('');
const [searchInput, setSearchInput] = useState<string | undefined>(undefined);
const [searchResults, setSearchResults] = useState<TrialLog[]>([]);
const [selectedLog, setSelectedLog] = useState<ViewerLog>();
const [searchWidth, setSearchWidth] = useState(INITIAL_SEARCH_WIDTH);
const [scrollToIndex, setScrollToIndex] = useState(-1);
const confirm = useConfirm();
const canceler = useRef(new AbortController());
const container = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -105,10 +106,8 @@ const TrialDetailsLogs: React.FC<Props> = ({ experiment, trial }: Props) => {
updateSettings({
agentId: filters.agentIds,
containerId: filters.containerIds,
enableRegex: filters.enableRegex,
level: filters.levels,
rankId: filters.rankIds,
searchText: filters.searchText,
});
},
[updateSettings],
Expand Down Expand Up @@ -292,7 +291,9 @@ const TrialDetailsLogs: React.FC<Props> = ({ experiment, trial }: Props) => {

const logEntry = formatLogEntry(l);

const i = settings.enableRegex ? content.match(`${key}`)?.index : content.indexOf(key);
const i = settings.enableRegex
? content.match(`${key}`)?.index
: content.toLowerCase().indexOf(key.toLowerCase());
if (_.isUndefined(i) || i < 0) return;
const keyLen = settings.enableRegex ? content.match(`${key}`)?.[0].length || 0 : key.length;
const j = i + keyLen;
Expand Down Expand Up @@ -447,6 +448,14 @@ const TrialDetailsLogs: React.FC<Props> = ({ experiment, trial }: Props) => {
if (logsRef.current && screenfull.isEnabled) screenfull.toggle();
}, []);

const onSwitchSearch = useCallback(() => {
setSearchOn((prev) => !prev);
// open log pane when closing the search pane
searchOn && setLogViewerOn(true);
// sometime the selected log of the log pane would offset when closing the search pane, since the width of the log pane changes
searchOn && selectedLog && setScrollToIndex(logs.findIndex((l) => l.id === selectedLog.id));
}, [searchOn, selectedLog, logs]);

const rightButtons = (
<Row>
<ClipboardButton copiedMessage={clipboardCopiedMessage} getContent={getClipboardContent} />
Expand All @@ -471,16 +480,11 @@ const TrialDetailsLogs: React.FC<Props> = ({ experiment, trial }: Props) => {
<Input
allowClear
placeholder="Search Logs..."
value={searchInput || settings.searchText}
value={searchInput ?? settings.searchText}
width={240}
onChange={onSearchChange}
/>
<Button
type={searchOn ? 'primary' : 'default'}
onClick={() => {
setSearchOn((prev) => !prev);
searchOn && setLogViewerOn(true);
}}>
<Button type={searchOn ? 'primary' : 'default'} onClick={onSwitchSearch}>
<Icon name="search" showTooltip title={`${searchOn ? 'Close' : 'Open'} Search`} />
</Button>
<Button
Expand Down Expand Up @@ -508,6 +512,7 @@ const TrialDetailsLogs: React.FC<Props> = ({ experiment, trial }: Props) => {
local={local}
logs={logs}
logsRef={logsRef}
scrollToIndex={scrollToIndex}
selectedLog={selectedLog}
serverAddress={serverAddress}
setLogs={setLogs}
Expand Down
Loading