Enable date picker for alerts page

ui/src/alerts/components/AlertsTable.js

@@ -27,18 +27,19 @@ const AlertsTable = React.createClass({
   },
 
   componentWillReceiveProps(newProps) {
-    this.filterAlerts(newProps.alerts, this.state.searchTerm)
+    this.filterAlerts(this.state.searchTerm, newProps.alerts)
   },
 
-  filterAlerts(searchTerm) {
+  filterAlerts(searchTerm, newAlerts) {
-    const filteredAlerts = this.props.alerts.filter((h) => {
+    const alerts = newAlerts || this.props.alerts
+    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.host.toLowerCase().search((searchTerm).toLowerCase()) !== -1 ||
-              h.level.toLowerCase().search((searchTerm).toLowerCase()) !== -1
+        h.level.toLowerCase().search((searchTerm).toLowerCase()) !== -1
     })
     this.setState({searchTerm, filteredAlerts})
   },

ui/src/alerts/containers/AlertsApp.js

@@ -52,6 +52,12 @@ const AlertsApp = React.createClass({
     })
   },
 
+  componentDidUpdate(prevProps, prevState) {
+    if (!_.isEqual(prevState.timeRange, this.state.timeRange)) {
+      this.fetchAlerts()
+    }
+  },
+
   fetchAlerts() {
     getAlerts(this.props.source.links.proxy, this.state.timeRange).then((resp) => {
       const results = [];
@@ -105,8 +111,13 @@ const AlertsApp = React.createClass({
     this.setState({isTimeOpen: false})
   },
 
+  handleApplyTime(timeRange) {
+    this.setState({timeRange})
+  },
+
   render() {
     const {source} = this.props
+    const {timeRange} = this.state
     return (
       <div className="page">
         <div className="page-header">
@@ -122,8 +133,8 @@ const AlertsApp = React.createClass({
                 isVisible={this.state.isTimeOpen}
                 onToggle={this.handleToggleTime}
                 onClose={this.handleCloseTime}
-                onApplyTimeRange={(timeRange) => console.log(timeRange)}
+                onApplyTimeRange={this.handleApplyTime}
-                timeRange={{upper: null, lower: null}}
+                timeRange={timeRange}
               />
             </div>
           </div>
@@ -132,7 +143,7 @@ const AlertsApp = React.createClass({
           <div className="container-fluid">
             <div className="row">
               <div className="col-md-12">
-                { this.renderSubComponents() }
+                {this.renderSubComponents()}
               </div>
             </div>
           </div>
@@ -140,7 +151,6 @@ const AlertsApp = React.createClass({
       </div>
     )
   },
-
 })
 
 export default AlertsApp

ui/src/shared/components/CustomTimeRange.js

@@ -62,10 +62,7 @@ class CustomTimeRange extends Component {
     const lower = this.lowerCal.getDate().toISOString()
     const upper = this.upperCal.getDate().toISOString()
 
-    this.props.onApplyTimeRange({
+    this.props.onApplyTimeRange({lower, upper})
-      lower: `'${lower}'`,
-      upper: `'${upper}'`,
-    })
     this.props.onClose()
   }
   /*