From ccf23e4f4878ec65699cc7db4d7bf1aa178ffa5e Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Thu, 18 May 2017 12:01:27 -0700
Subject: [PATCH] Fix regex special character filter match bug and revert Query
 Editor autocomplete filter

---
 ui/src/alerts/components/AlertsTable.js            |  7 ++++---
 ui/src/data_explorer/components/MeasurementList.js |  3 ++-
 ui/src/data_explorer/components/QueryEditor.js     |  5 ++++-
 ui/src/data_explorer/components/TagListItem.js     |  3 ++-
 ui/src/hosts/components/HostsTable.js              |  7 ++++---
 ui/src/shared/components/Dropdown.js               | 10 +++++-----
 6 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js
index 763e8af85c..1e20964152 100644
--- a/ui/src/alerts/components/AlertsTable.js
+++ b/ui/src/alerts/components/AlertsTable.js
@@ -34,15 +34,16 @@ const AlertsTable = React.createClass({
 
   filterAlerts(searchTerm, newAlerts) {
     const alerts = newAlerts || this.props.alerts
+    const filterText = searchTerm.toLowerCase()
     const filteredAlerts = alerts.filter(h => {
       if (h.host === null || h.name === null || h.level === null) {
         return false
       }
 
       return (
-        h.name.toLowerCase().search(searchTerm.toLowerCase()) !== -1 ||
-        h.host.toLowerCase().search(searchTerm.toLowerCase()) !== -1 ||
-        h.level.toLowerCase().search(searchTerm.toLowerCase()) !== -1
+        h.name.toLowerCase().includes(filterText) ||
+        h.host.toLowerCase().includes(filterText) ||
+        h.level.toLowerCase().includes(filterText)
       )
     })
     this.setState({searchTerm, filteredAlerts})
diff --git a/ui/src/data_explorer/components/MeasurementList.js b/ui/src/data_explorer/components/MeasurementList.js
index f4b7f68c83..8bf56c9de1 100644
--- a/ui/src/data_explorer/components/MeasurementList.js
+++ b/ui/src/data_explorer/components/MeasurementList.js
@@ -115,8 +115,9 @@ const MeasurementList = React.createClass({
       )
     }
 
+    const filterText = this.state.filterText.toLowerCase()
     const measurements = this.state.measurements.filter(m =>
-      m.match(this.state.filterText)
+      m.toLowerCase().includes(filterText)
     )
 
     return (
diff --git a/ui/src/data_explorer/components/QueryEditor.js b/ui/src/data_explorer/components/QueryEditor.js
index e4e17ac4d9..8a314d1f09 100644
--- a/ui/src/data_explorer/components/QueryEditor.js
+++ b/ui/src/data_explorer/components/QueryEditor.js
@@ -162,9 +162,12 @@ class QueryEditor extends Component {
     if (matched && !_.isEmpty(templates)) {
       // maintain cursor poition
       const start = this.editor.selectionStart
+
       const end = this.editor.selectionEnd
+      const filterText = matched[0].substr(1).toLowerCase()
+
       const filteredTemplates = templates.filter(t =>
-        t.tempVar.startsWith(matched[0])
+        t.tempVar.toLowerCase().includes(filterText)
       )
 
       const found = filteredTemplates.find(
diff --git a/ui/src/data_explorer/components/TagListItem.js b/ui/src/data_explorer/components/TagListItem.js
index f1d54c1d33..c3653e1225 100644
--- a/ui/src/data_explorer/components/TagListItem.js
+++ b/ui/src/data_explorer/components/TagListItem.js
@@ -52,7 +52,8 @@ const TagListItem = React.createClass({
       return <div>no tag values</div>
     }
 
-    const filtered = tagValues.filter(v => v.match(this.state.filterText))
+    const filterText = this.state.filterText.toLowerCase()
+    const filtered = tagValues.filter(v => v.toLowerCase().includes(filterText))
 
     return (
       <div className="query-builder--sub-list">
diff --git a/ui/src/hosts/components/HostsTable.js b/ui/src/hosts/components/HostsTable.js
index 8a7ab80f68..0694821989 100644
--- a/ui/src/hosts/components/HostsTable.js
+++ b/ui/src/hosts/components/HostsTable.js
@@ -35,20 +35,21 @@ const HostsTable = React.createClass({
   },
 
   filter(allHosts, searchTerm) {
+    const filterText = searchTerm.toLowerCase()
     return allHosts.filter(h => {
       const apps = h.apps ? h.apps.join(', ') : ''
       // search each tag for the presence of the search term
       let tagResult = false
       if (h.tags) {
         tagResult = Object.keys(h.tags).reduce((acc, key) => {
-          return acc || h.tags[key].search(searchTerm) !== -1
+          return acc || h.tags[key].toLowerCase().includes(filterText)
         }, false)
       } else {
         tagResult = false
       }
       return (
-        h.name.search(searchTerm) !== -1 ||
-        apps.search(searchTerm) !== -1 ||
+        h.name.toLowerCase().includes(filterText) ||
+        apps.toLowerCase().includes(filterText) ||
         tagResult
       )
     })
diff --git a/ui/src/shared/components/Dropdown.js b/ui/src/shared/components/Dropdown.js
index 137c4766a0..46a7bff51d 100644
--- a/ui/src/shared/components/Dropdown.js
+++ b/ui/src/shared/components/Dropdown.js
@@ -120,11 +120,11 @@ class Dropdown extends Component {
 
   applyFilter(searchTerm) {
     const {items} = this.props
-    const matchingItems = items.filter(item => {
-      if (item.text === null) {
-        return false
-      }
-      return item.text.toLowerCase().search(searchTerm.toLowerCase()) !== -1
+    const filterText = searchTerm.toLowerCase()
+    const matchingItems = items.filter(item =>
+      item.text.toLowerCase().includes(filterText)
+    )
+
     })
     this.setState({filteredItems: matchingItems})
     this.setState({highlightedItemIndex: 0})