From e3282bc50529616770216fb4d99d8ccddea53e1a Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Wed, 29 Mar 2017 09:29:55 -0700 Subject: [PATCH] Enable date picker for alerts page --- ui/src/alerts/components/AlertsTable.js | 11 ++++++----- ui/src/alerts/containers/AlertsApp.js | 18 ++++++++++++++---- ui/src/shared/components/CustomTimeRange.js | 5 +---- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js index 124591e577..ef797e854b 100644 --- a/ui/src/alerts/components/AlertsTable.js +++ b/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) { - const filteredAlerts = this.props.alerts.filter((h) => { + filterAlerts(searchTerm, newAlerts) { + 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.level.toLowerCase().search((searchTerm).toLowerCase()) !== -1 + h.host.toLowerCase().search((searchTerm).toLowerCase()) !== -1 || + h.level.toLowerCase().search((searchTerm).toLowerCase()) !== -1 }) this.setState({searchTerm, filteredAlerts}) }, diff --git a/ui/src/alerts/containers/AlertsApp.js b/ui/src/alerts/containers/AlertsApp.js index 546c35eb3a..97643b7f5f 100644 --- a/ui/src/alerts/containers/AlertsApp.js +++ b/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 (
@@ -122,8 +133,8 @@ const AlertsApp = React.createClass({ isVisible={this.state.isTimeOpen} onToggle={this.handleToggleTime} onClose={this.handleCloseTime} - onApplyTimeRange={(timeRange) => console.log(timeRange)} - timeRange={{upper: null, lower: null}} + onApplyTimeRange={this.handleApplyTime} + timeRange={timeRange} />
@@ -132,7 +143,7 @@ const AlertsApp = React.createClass({
- { this.renderSubComponents() } + {this.renderSubComponents()}
@@ -140,7 +151,6 @@ const AlertsApp = React.createClass({ ) }, - }) export default AlertsApp diff --git a/ui/src/shared/components/CustomTimeRange.js b/ui/src/shared/components/CustomTimeRange.js index 46a1973029..6358164e57 100644 --- a/ui/src/shared/components/CustomTimeRange.js +++ b/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({ - lower: `'${lower}'`, - upper: `'${upper}'`, - }) + this.props.onApplyTimeRange({lower, upper}) this.props.onClose() } /*