From 855b36cc6ce8467899f5b224081ed56073fca485 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 20 Jan 2017 12:27:00 -0800
Subject: [PATCH 1/5] Fix filtering in alerts table

---
 ui/src/alerts/components/AlertsTable.js | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js
index 3921301f5b..ed95bb4755 100644
--- a/ui/src/alerts/components/AlertsTable.js
+++ b/ui/src/alerts/components/AlertsTable.js
@@ -30,13 +30,17 @@ const AlertsTable = React.createClass({
     this.filterAlerts(newProps.alerts, this.state.searchTerm);
   },
 
-  filterAlerts(allAlerts, searchTerm) {
-    const alerts = allAlerts.filter((h) => {
-      return h.name.toLowerCase().search(searchTerm.toLowerCase()) !== -1 ||
-              h.host.toLowerCase().search(searchTerm.toLowerCase()) !== -1 ||
-              h.level.toLowerCase().search(searchTerm.toLowerCase()) !== -1;
+  filterAlerts(searchTerm) {
+    const filteredAlerts = this.props.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;
     });
-    this.setState({searchTerm, filteredAlerts: alerts});
+    this.setState({searchTerm, filteredAlerts});
   },
 
   changeSort(key) {
@@ -67,7 +71,7 @@ const AlertsTable = React.createClass({
       <div className="panel panel-minimal">
         <div className="panel-heading u-flex u-ai-center u-jc-space-between">
           <h2 className="panel-title">{this.props.alerts.length} Alerts</h2>
-          <SearchBar onSearch={_.wrap(this.props.alerts, this.filterAlerts)} />
+          <SearchBar onSearch={this.filterAlerts} />
         </div>
         <div className="panel-body">
           <table className="table v-center">
@@ -111,8 +115,8 @@ const SearchBar = React.createClass({
     onSearch: PropTypes.func.isRequired,
   },
 
-  handleChange() {
-    this.props.onSearch(this.refs.searchInput.value);
+  handleChange(e) {
+    this.props.onSearch(e.target.value);
   },
 
   render() {
@@ -122,7 +126,6 @@ const SearchBar = React.createClass({
           type="text"
           className="form-control"
           placeholder="Filter Alerts by Name..."
-          ref="searchInput"
           onChange={this.handleChange}
         />
         <div className="input-group-addon">

From b63ce0a6af1986b900b07118606c1494536bacbe Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 20 Jan 2017 12:27:17 -0800
Subject: [PATCH 2/5] Fix duplicate children error spam

---
 ui/src/alerts/components/AlertsTable.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js
index ed95bb4755..a0f4efa904 100644
--- a/ui/src/alerts/components/AlertsTable.js
+++ b/ui/src/alerts/components/AlertsTable.js
@@ -86,9 +86,9 @@ const AlertsTable = React.createClass({
             </thead>
             <tbody>
               {
-                alerts.map(({name, time, value, host, level}) => {
+                alerts.map(({name, level, time, value, host}) => {
                   return (
-                    <tr key={`${name}-${time}-${host}-${value}`}>
+                    <tr key={`${name}-${level}-${time}-${host}-${value}`}>
                       <td className="monotype">{name}</td>
                       <td className={`monotype alert-level-${level.toLowerCase()}`}>{level}</td>
                       <td className="monotype">{(new Date(Number(time)).toISOString())}</td>

From da5c1d3a0c53422b7daa9235065d10e0cae47235 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 20 Jan 2017 12:43:18 -0800
Subject: [PATCH 3/5] Make AlertTable source of truth for search term

---
 ui/src/alerts/components/AlertsTable.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js
index a0f4efa904..4ff1b0a86f 100644
--- a/ui/src/alerts/components/AlertsTable.js
+++ b/ui/src/alerts/components/AlertsTable.js
@@ -71,7 +71,7 @@ const AlertsTable = React.createClass({
       <div className="panel panel-minimal">
         <div className="panel-heading u-flex u-ai-center u-jc-space-between">
           <h2 className="panel-title">{this.props.alerts.length} Alerts</h2>
-          <SearchBar onSearch={this.filterAlerts} />
+          <SearchBar onSearch={this.filterAlerts} searchTerm={this.state.searchTerm}/>
         </div>
         <div className="panel-body">
           <table className="table v-center">
@@ -113,6 +113,7 @@ const AlertsTable = React.createClass({
 const SearchBar = React.createClass({
   propTypes: {
     onSearch: PropTypes.func.isRequired,
+    searchTerm: PropTypes.string.isRequired,
   },
 
   handleChange(e) {
@@ -127,6 +128,7 @@ const SearchBar = React.createClass({
           className="form-control"
           placeholder="Filter Alerts by Name..."
           onChange={this.handleChange}
+          value={this.props.searchTerm}
         />
         <div className="input-group-addon">
           <span className="icon search" aria-hidden="true"></span>

From 0a865e22e64cd1402c82f311f40c8d6ac8b16fec Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 20 Jan 2017 12:57:58 -0800
Subject: [PATCH 4/5] Fix laggy input typing

---
 ui/src/alerts/components/AlertsTable.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js
index 4ff1b0a86f..43a6f9e8ae 100644
--- a/ui/src/alerts/components/AlertsTable.js
+++ b/ui/src/alerts/components/AlertsTable.js
@@ -71,7 +71,7 @@ const AlertsTable = React.createClass({
       <div className="panel panel-minimal">
         <div className="panel-heading u-flex u-ai-center u-jc-space-between">
           <h2 className="panel-title">{this.props.alerts.length} Alerts</h2>
-          <SearchBar onSearch={this.filterAlerts} searchTerm={this.state.searchTerm}/>
+          <SearchBar onSearch={this.filterAlerts}/>
         </div>
         <div className="panel-body">
           <table className="table v-center">
@@ -113,11 +113,25 @@ const AlertsTable = React.createClass({
 const SearchBar = React.createClass({
   propTypes: {
     onSearch: PropTypes.func.isRequired,
-    searchTerm: PropTypes.string.isRequired,
+  },
+
+  getInitialState() {
+    return {
+      searchTerm: '',
+    };
+  },
+
+  componentWillMount() {
+    const waitPeriod = 300;
+    this.handleSearch = _.debounce(this.handleSearch, waitPeriod);
+  },
+
+  handleSearch() {
+    this.props.onSearch(this.state.searchTerm);
   },
 
   handleChange(e) {
-    this.props.onSearch(e.target.value);
+    this.setState({searchTerm: e.target.value}, this.handleSearch);
   },
 
   render() {
@@ -128,7 +142,7 @@ const SearchBar = React.createClass({
           className="form-control"
           placeholder="Filter Alerts by Name..."
           onChange={this.handleChange}
-          value={this.props.searchTerm}
+          value={this.state.searchTerm}
         />
         <div className="input-group-addon">
           <span className="icon search" aria-hidden="true"></span>

From 4709272817784dd3a4cd261806ab2a526bb6adb3 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 23 Jan 2017 11:30:10 -0800
Subject: [PATCH 5/5] Match order of keys

---
 ui/src/alerts/components/AlertsTable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js
index 43a6f9e8ae..48fdcc2d70 100644
--- a/ui/src/alerts/components/AlertsTable.js
+++ b/ui/src/alerts/components/AlertsTable.js
@@ -86,7 +86,7 @@ const AlertsTable = React.createClass({
             </thead>
             <tbody>
               {
-                alerts.map(({name, level, time, value, host}) => {
+                alerts.map(({name, level, time, host, value}) => {
                   return (
                     <tr key={`${name}-${level}-${time}-${host}-${value}`}>
                       <td className="monotype">{name}</td>