refactor(ui): optimize state in logs viewer (argoproj#13046)

Signed-off-by: Anton Gilgur <[email protected]>

ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
-
 import {Autocomplete} from 'argo-ui';
 import {Observable} from 'rxjs';
 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}