Added filter bar

nerdlets/drop-rule-explorer/index.js

@@ -14,14 +14,15 @@ function DropRuleExplorer() {
   const [sortingType, setSortingType] = useState(0);
   const [sortColumn, setSortColumn] = useState(0);
   const [selectedItem, setSelectedItem]  = useState(null);
+  const [filterTerm, setFilterTerm]  = useState(null);
 
   const [newNRQL, setNewNRQL]  = useState("");
   const [newDescription, setNewDescription]  = useState("");
   const [newType, setNewType]  = useState("DROP_DATA" );
   const [newSource, setNewSource]  = useState("NerdGraph");
 
   //reset state and clear form
-  const resetFormAndState = () => {
+  const resetFormAndState = (cb) => {
     setSelectedItem(null);
     setNewType("DROP_DATA");
     setNewSource("NerdGraph");
@@ -46,7 +47,6 @@ function DropRuleExplorer() {
       }
     })
 
-
     const _onClickTableHeaderCell = (column, evt, { nextSortingType }) => {
       if (column === sortColumn) {
         setSortingType(nextSortingType);
@@ -284,16 +284,38 @@ function DropRuleExplorer() {
             }
           }
 
-          if(data.actor.dropRules.nrqlDropRules.list.rules.length > 0) {
+          const drawFilterBar = () => {
+            return <div className="filterForm">
+              <Form>
+                <TextField labelInline info="A (case insensitive) regex search pattern on description and NRQL fields" style={{width:'100%'}} label="Filter" value={filterTerm} onChange={event => {resetFormAndState(); setFilterTerm(event.target.value);  }} />
+              </Form>
+            </div>
+          };
+
+
+          const filterData = (rules) => {
+            if(filterTerm == null || filterTerm.length == 0 || filterTerm == "") {
+              return rules;
+            } else {
+              const regex = new RegExp(filterTerm,'i');
+              return rules.filter(rule => {return regex.test(rule.nrql) || regex.test(rule.description)});
+            }
+          };
+
+          const filteredRules=filterData(data.actor.dropRules.nrqlDropRules.list.rules);
+
+          if(filteredRules.length > 0) {
             return <>
+              {drawFilterBar()}
               <BlockText className="summaryLine">
-                <strong>{data.actor.dropRules.nrqlDropRules.list.rules.length}</strong>{` drop rules found for account "${data.actor.accountDetails.name}"`}. Select a rule to view details.
+                <strong>{filteredRules.length}</strong>{` drop rules found for account "${data.actor.accountDetails.name}"`}. Select a rule to view details.
               </BlockText>
-               {tableRender(data.actor.dropRules.nrqlDropRules.list.rules,refetch,createForm)}
+               {tableRender(filteredRules,refetch,createForm)}
 
              </>
           } else {
             return <>
+              {drawFilterBar()}
               <div className="dropRulesContainer">There are no drop rules for account: "{data.actor.accountDetails.name}" ({selectedAccountId}).</div>
               {createForm()}
             </>

nerdlets/drop-rule-explorer/styles.scss

@@ -12,7 +12,7 @@
 }
 
 .summaryLine {
-  margin-top: 2em;
+  margin-top: 1em;
   padding-left: 0.5em;
 }
 
@@ -47,6 +47,12 @@
   margin-bottom: 1em;
 }
 
+
+.filterForm {
+  width: 20%;
+  margin-top:2em;
+  padding-left:0.5em;
+}
 .docsLink {
   margin-top:4em;
 }

nr1.json

@@ -1,6 +1,6 @@
 {
   "schemaType": "NERDPACK",
-  "id": "xxx-xxx-xxx-xxx",
+  "id": "3530a816-ad8d-4882-bfdd-563c8452b6f1",
   "displayName": "Drop Rule Explorer",
   "description": "For exploring drop rules in account"
 }

package.json

@@ -1,7 +1,7 @@
 {
     "private": true,
     "name": "drop-rule-explorer",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "scripts": {
         "start": "nr1 nerdpack:serve",
         "test": "exit 0"