Refactor to js class

ui/src/alerts/containers/AlertsApp.js

@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
 import SourceIndicator from '../../shared/components/SourceIndicator'
 import AlertsTable from '../components/AlertsTable'
 import NoKapacitorError from '../../shared/components/NoKapacitorError'
@@ -10,31 +10,27 @@ import AJAX from 'utils/ajax'
 import _ from 'lodash'
 import moment from 'moment'
 
-const AlertsApp = React.createClass({
-  propTypes: {
-    source: PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-      type: PropTypes.string, // 'influx-enterprise'
-      links: PropTypes.shape({
-        proxy: PropTypes.string.isRequired,
-      }).isRequired,
-    }), // .isRequired,
-    addFlashMessage: PropTypes.func, // .isRequired,
-  },
-
-  getInitialState() {
-    return {
+class AlertsApp extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
       loading: true,
       hasKapacitor: false,
       alerts: [],
       isTimeOpen: false,
       timeRange: {
         upper: moment().format(),
-        lower: moment().subtract(1, 'h').format(),
+        lower: moment().subtract(1, 'd').format(),
       },
     }
-  },
+
+    this.fetchAlerts = ::this.fetchAlerts
+    this.renderSubComponents = ::this.renderSubComponents
+    this.handleToggleTime = ::this.handleToggleTime
+    this.handleCloseTime = ::this.handleCloseTime
+    this.handleApplyTime = ::this.handleApplyTime
+  }
+
   // TODO: show a loading screen until we figure out if there is a kapacitor and fetch the alerts
   componentDidMount() {
     const {source} = this.props
@@ -50,17 +46,18 @@ const AlertsApp = React.createClass({
         this.setState({loading: false})
       }
     })
-  },
+  }
 
   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 = [];
+      const results = []
+
       const alertSeries = _.get(resp, ['data', 'results', '0', 'series'], [])
       if (alertSeries.length === 0) {
         this.setState({loading: false, alerts: []})
@@ -84,7 +81,7 @@ const AlertsApp = React.createClass({
       })
       this.setState({loading: false, alerts: results})
     })
-  },
+  }
 
   renderSubComponents() {
     let component
@@ -101,19 +98,19 @@ const AlertsApp = React.createClass({
       }
     }
     return component
-  },
+  }
 
   handleToggleTime() {
     this.setState({isTimeOpen: !this.state.isTimeOpen})
-  },
+  }
 
   handleCloseTime() {
     this.setState({isTimeOpen: false})
-  },
+  }
 
   handleApplyTime(timeRange) {
     this.setState({timeRange})
-  },
+  }
 
   render() {
     const {source} = this.props
@@ -150,7 +147,25 @@ const AlertsApp = React.createClass({
         </div>
       </div>
     )
-  },
-})
+  }
+}
+
+const {
+  func,
+  shape,
+  string,
+} = PropTypes
+
+AlertsApp.propTypes = {
+  source: shape({
+    id: string.isRequired,
+    name: string.isRequired,
+    type: string, // 'influx-enterprise'
+    links: shape({
+      proxy: string.isRequired,
+    }).isRequired,
+  }),
+  addFlashMessage: func,
+}
 
 export default AlertsApp