Merge branch 'main' into refactor-ui-code-split-xterm

Signed-off-by: Anton Gilgur <[email protected]>
argoproj · May 14, 2024 · 36586e4 · 36586e4
2 parents b9a3941 + 5b7d147
commit 36586e4
Showing 1 changed file with 10 additions and 14 deletions.
diff --git a/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx b/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx
@@ -6,6 +6,7 @@ import {map, publishReplay, refCount} from 'rxjs/operators';
 
 import * as models from '../../../../models';
 import {execSpec} from '../../../../models';
+import debounce from '../../../shared/debounce';
 import {Button} from '../../../shared/components/button';
 import {ErrorNotice} from '../../../shared/components/error-notice';
 import {InfoIcon, WarningIcon} from '../../../shared/components/fa-icons';
@@ -75,9 +76,6 @@ function parseAndTransform(formattedString: string, timeZone: string) {
 
 export function WorkflowLogsViewer({workflow, initialNodeId, initialPodName, container, archived}: WorkflowLogsViewerProps) {
     const storage = new ScopedLocalStorage('workflow-logs-viewer');
-    const storedJsonFields = storage.getItem('jsonFields', {
-        values: []
-    } as SelectedJsonFields);
 
     const {popup} = useContext(Context);
     const [podName, setPodName] = useState(initialPodName || '');
@@ -86,16 +84,22 @@ export function WorkflowLogsViewer({workflow, initialNodeId, initialPodName, con
     const [error, setError] = useState<Error>();
     const [loaded, setLoaded] = useState(false);
     const [logsObservable, setLogsObservable] = useState<Observable<string>>();
+    const [selectedJsonFields, setSelectedJsonFields] = useState<SelectedJsonFields>(() => {
+        return storage.getItem<SelectedJsonFields>('jsonFields', {values: []});
+    });
+
+    function setDebouncedGrep(value: string) {
+        debounce(() => setGrep(value), 1000)[0]();
+    }
+
     // timezone used for ui rendering only
     const [uiTimezone, setUITimezone] = useState<string>(DEFAULT_TZ);
     // timezone used for timezone formatting
     const [timezone, setTimezone] = useLocalStorage<string>(TZ_LOCALSTORAGE_KEY, DEFAULT_TZ);
-
     // update the UI everytime the timezone changes
     useEffect(() => {
         setUITimezone(timezone);
     }, [timezone]);
-    const [selectedJsonFields, setSelectedJsonFields] = useState<SelectedJsonFields>(storedJsonFields);
 
     useEffect(() => {
         setError(null);
@@ -149,13 +153,6 @@ export function WorkflowLogsViewer({workflow, initialNodeId, initialPodName, con
         return () => subscription.unsubscribe();
     }, [workflow.metadata.namespace, workflow.metadata.name, podName, selectedContainer, grep, archived, selectedJsonFields, timezone]);
 
-    // filter allows us to introduce a short delay, before we actually change grep
-    const [logFilter, setLogFilter] = useState('');
-    useEffect(() => {
-        const x = setTimeout(() => setGrep(logFilter), 1000);
-        return () => clearTimeout(x);
-    }, [logFilter]);
-
     // map pod names to corresponding node IDs
     const podNamesToNodeIDs = new Map<string, string>();
     const podNames = [{value: '', label: 'All'}].concat(
@@ -246,8 +243,7 @@ export function WorkflowLogsViewer({workflow, initialNodeId, initialPodName, con
                 </Button>
                 <span className='fa-pull-right'>
                     <div className='log-menu'>
-                        <i className='fa fa-filter' />{' '}
-                        <input type='search' defaultValue={logFilter} onChange={v => setLogFilter(v.target.value)} placeholder='Filter (regexp)...' />
+                        <i className='fa fa-filter' /> <input type='search' defaultValue={grep} onChange={v => setDebouncedGrep(v.target.value)} placeholder='Filter (regexp)...' />
                         <i className='fa fa-globe' />{' '}
                         <Autocomplete
                             items={filteredTimezones}