feat(ui): Node search tool in UI Workflow viewer (#5000)

Signed-off-by: Huan-Cheng Chang <changhc84@gmail.com>
argoproj · Feb 3, 2021 · 99c049b · 99c049b
1 parent 5047f07
commit 99c049b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/ui/src/app/shared/components/graph/graph-panel.scss b/ui/src/app/shared/components/graph/graph-panel.scss
@@ -24,6 +24,11 @@
   }
 }
 
+.node-search-bar {
+  display: inline-block;
+  margin-left: 10px;
+}
+
 .graph-options-panel {
   margin: 10px;
   padding: 10px;

diff --git a/ui/src/app/shared/components/graph/graph-panel.tsx b/ui/src/app/shared/components/graph/graph-panel.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {useEffect} from 'react';
+import {TextInput} from '../../../shared/components/text-input';
 import {ScopedLocalStorage} from '../../scoped-local-storage';
 import {FilterDropDown} from '../filter-drop-down';
 import {Icon} from '../icon';
@@ -55,6 +56,7 @@ export const GraphPanel = (props: Props) => {
     const [nodeGenres, setNodeGenres] = React.useState<NodeGenres>(storage.getItem('nodeGenres', props.nodeGenres));
     const [nodeClassNames, setNodeClassNames] = React.useState<NodeClassNames>(storage.getItem('nodeClassNames', props.nodeClassNames));
     const [nodeTags, setNodeTags] = React.useState<NodeTags>(props.nodeTags);
+    const [nodeSearchKeyword, setNodeSearchKeyword] = React.useState<string>('');
 
     useEffect(() => storage.setItem('nodeSize', nodeSize, props.nodeSize), [nodeSize]);
     useEffect(() => storage.setItem('horizontal', horizontal, props.horizontal), [horizontal]);
@@ -73,7 +75,8 @@ export const GraphPanel = (props: Props) => {
         return (
             nodeGenres[label.genre] &&
             (!nodeClassNames || Object.entries(nodeClassNames).find(([className, checked]) => checked && (label.classNames || '').split(' ').includes(className))) &&
-            (!nodeTags || Object.entries(nodeTags).find(([tag, checked]) => !label.tags || (checked && label.tags.has(tag))))
+            (!nodeTags || Object.entries(nodeTags).find(([tag, checked]) => !label.tags || (checked && label.tags.has(tag)))) &&
+            props.graph.nodes.get(id).label.includes(nodeSearchKeyword)
         );
     };
 
@@ -132,6 +135,9 @@ export const GraphPanel = (props: Props) => {
                         <i className='fa fa-bolt' />
                     </a>
                     {props.options}
+                    <div className='node-search-bar'>
+                        <TextInput value={nodeSearchKeyword} onChange={v => setNodeSearchKeyword(v)} placeholder={'Search'} />
+                    </div>
                 </div>
             )}
             <div className={'graph ' + props.classNames}>