SERVER-67197 Add node list search by name

4 files changed, 41 insertions, 7 deletions

diff --git a/buildscripts/libdeps/graph_visualizer_web_stack/src/DataGrid.js b/buildscripts/libdeps/graph_visualizer_web_stack/src/DataGrid.js
index 8364b55ff67..dd16b5a33d8 100644
--- a/buildscripts/libdeps/graph_visualizer_web_stack/src/DataGrid.js
+++ b/buildscripts/libdeps/graph_visualizer_web_stack/src/DataGrid.js
@@ -112,7 +112,7 @@ const DataGrid = ({
       style["justifyContent"] = "space-evenly";
       finalCellData = (
         <Checkbox
-          checked={checkBoxes[rowIndex].selected}
+          checked={checkBoxes[rowIndex] ? checkBoxes[rowIndex].selected : false}
           onChange={(event) => {
             setCheckBoxes(
               checkBoxes.map((checkbox, index) => {
diff --git a/buildscripts/libdeps/graph_visualizer_web_stack/src/NodeList.js b/buildscripts/libdeps/graph_visualizer_web_stack/src/NodeList.js
index 96f19a5d071..eed58ee8875 100644
--- a/buildscripts/libdeps/graph_visualizer_web_stack/src/NodeList.js
+++ b/buildscripts/libdeps/graph_visualizer_web_stack/src/NodeList.js
@@ -3,10 +3,12 @@ import React from "react";
 import { connect } from "react-redux";
 import { getNodes } from "./redux/store";
 import { setFindNode } from "./redux/findNode";
+import { setListSearchTerm } from "./redux/listSearchTerm";
 import { socket } from "./connect";
 
 import DataGrid from "./DataGrid";
 import LoadingBar from "./LoadingBar";
+import TextField from "@material-ui/core/TextField";
 
 const columns = [
   { dataKey: "check", label: "Selected", width: 70 },
@@ -14,7 +16,7 @@ const columns = [
   { id: "ID", dataKey: "node", label: "Node", width: 200 },
 ];
 
-const NodeList = ({ nodes, loading, setFindNode }) => {
+const NodeList = ({ nodes, loading, setFindNode, setListSearchTerm}) => {
   function handleCheckBoxes(rowIndex, event) {
     socket.emit("row_selected", {
       data: { node: nodes[rowIndex].node, name: nodes[rowIndex].name },
@@ -26,8 +28,18 @@ const NodeList = ({ nodes, loading, setFindNode }) => {
     setFindNode(event.target.textContent);
   }
 
+  function handleSearchTermChange(event) {
+    setListSearchTerm(event.target.value);
+  }
+
   return (
     <LoadingBar loading={loading} height={"95%"}>
+      <TextField
+        fullWidth
+        onChange={handleSearchTermChange}
+        onClick={(event)=> event.target.select()}
+        label="Search for Node"
+      />
       <DataGrid
         rows={nodes}
         columns={columns}
@@ -40,4 +52,4 @@ const NodeList = ({ nodes, loading, setFindNode }) => {
   );
 };
 
-export default connect(getNodes, { setFindNode })(NodeList);
+export default connect(getNodes, { setFindNode, setListSearchTerm })(NodeList);
diff --git a/buildscripts/libdeps/graph_visualizer_web_stack/src/redux/listSearchTerm.js b/buildscripts/libdeps/graph_visualizer_web_stack/src/redux/listSearchTerm.js
new file mode 100644
index 00000000000..df288f4af47
--- /dev/null
+++ b/buildscripts/libdeps/graph_visualizer_web_stack/src/redux/listSearchTerm.js
@@ -0,0 +1,16 @@
+import { initialState } from "./store";
+
+export const listSearchTerm = (state = initialState, action) => {
+  switch (action.type) {
+    case "setListSearchTerm":
+      return action.payload;
+
+    default:
+      return state;
+  }
+};
+
+export const setListSearchTerm = (listSearchTerm) => ({
+  type: "setListSearchTerm",
+  payload: listSearchTerm,
+});
\ No newline at end of file
diff --git a/buildscripts/libdeps/graph_visualizer_web_stack/src/redux/store.js b/buildscripts/libdeps/graph_visualizer_web_stack/src/redux/store.js
index 8024c7cb327..e539ef21292 100644
--- a/buildscripts/libdeps/graph_visualizer_web_stack/src/redux/store.js
+++ b/buildscripts/libdeps/graph_visualizer_web_stack/src/redux/store.js
@@ -8,6 +8,7 @@ import { links } from "./links";
 import { graphData } from "./graphData";
 import { findNode } from "./findNode";
 import { graphPaths } from "./graphPaths";
+import { listSearchTerm } from "./listSearchTerm";
 
 export const initialState = {
   loading: false,
@@ -61,6 +62,7 @@ export const initialState = {
       dependencies: [{ node: "test/test2.so", symbols: [] }],
     },
   ],
+  listSearchTerm: "",
 };
 
 export const getLoading = (state) => {
@@ -88,11 +90,12 @@ export const getCounts = (state) => {
 };
 
 export const getRows = (state) => {
+  let searchedNodes = state.nodes.filter(node => node.node.indexOf(state.listSearchTerm) > -1);
   return {
-    rowCount: state.nodes.length,
-    rowGetter: ({ index }) => state.nodes[index],
-    checkBox: ({ index }) => state.nodes[index].selected,
-    nodes: state.nodes,
+    rowCount: searchedNodes.length,
+    rowGetter: ({ index }) => searchedNodes[index],
+    checkBox: ({ index }) => searchedNodes[index].selected,
+    nodes: searchedNodes,
   };
 };
 
@@ -109,6 +112,8 @@ export const getNodes = (state) => {
   return {
     nodes: state.nodes,
     loading: state.loading,
+    listSearchTerm: state.listSearchTerm,
+    searchedNodes: state.nodes.filter(node => node.node.indexOf(state.listSearchTerm) > -1),
   };
 };
 
@@ -137,6 +142,7 @@ const store = createStore(
     graphData,
     findNode,
     graphPaths,
+    listSearchTerm,
   }),
   initialState
 );