fix: Log searche feedbacks (#10088)

determined-ai · Oct 22, 2024 · 935fa66 · 935fa66
1 parent 29a08ec
commit 935fa66
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/webui/react/src/pages/TrialDetails/LogViewer.tsx b/webui/react/src/pages/TrialDetails/LogViewer.tsx
@@ -33,6 +33,7 @@ export interface Props<T> {
     idSet: Set<RecordKey>;
     isScrollReady: boolean;
   }>;
+  scrollToIndex: number;
 }
 
 export interface ViewerLog extends Log {
@@ -100,6 +101,7 @@ function LogViewer<T>({
   setLogs,
   logsRef,
   local,
+  scrollToIndex,
 }: Props<T>): JSX.Element {
   const componentId = useId();
 
@@ -138,6 +140,11 @@ function LogViewer<T>({
     [setLogs],
   );
 
+  useEffect(() => {
+    if (scrollToIndex < 0) return;
+    virtuosoRef.current?.scrollToIndex({ index: scrollToIndex });
+  }, [scrollToIndex]);
+
   useEffect(() => {
     setScrolledForSearch(false);
   }, [selectedLog]);
@@ -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,

diff --git a/webui/react/src/pages/TrialDetails/TrialDetailsLogs.module.scss b/webui/react/src/pages/TrialDetails/TrialDetailsLogs.module.scss
@@ -30,6 +30,7 @@
       .log {
         cursor: pointer;
         font-family: var(--theme-font-family-code);
+        font-size: 12px;
 
         &:hover {
           color: var(--theme-ix-on-active);

diff --git a/webui/react/src/pages/TrialDetails/TrialDetailsLogs.tsx b/webui/react/src/pages/TrialDetails/TrialDetailsLogs.tsx
@@ -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);
@@ -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],
@@ -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;
@@ -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} />
@@ -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
@@ -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}