Add Users container page.

ui/.eslintrc

@@ -230,7 +230,7 @@
     'react/no-string-refs': 0, // TODO: 2
     'react/no-unknown-property': 2,
     'react/prop-types': 2,
-    'react/prefer-es6-class': [2, 'never'],
+    'react/prefer-es6-class': 0,
     'react/react-in-jsx-scope': 2,
     'react/require-extension': 0,
     'react/self-closing-comp': 0, // TODO: we can re-enable this if some brave soul wants to update the code (mostly spans acting as icons)

ui/src/index.js

@@ -14,6 +14,7 @@ import {KapacitorPage, KapacitorRulePage, KapacitorRulesPage, KapacitorTasksPage
 import DataExplorer from 'src/data_explorer';
 import {DashboardsPage, DashboardPage} from 'src/dashboards';
 import {CreateSource, SourcePage, ManageSources} from 'src/sources';
+import {UsersPage} from 'src/users';
 import NotFound from 'src/shared/components/NotFound';
 import configureStore from 'src/store/configureStore';
 import {getMe, getSources} from 'shared/apis';
@@ -127,6 +128,7 @@ const Root = React.createClass({
               <Route path="alert-rules" component={KapacitorRulesPage} />
               <Route path="alert-rules/:ruleID" component={KapacitorRulePage} />
               <Route path="alert-rules/new" component={KapacitorRulePage} />
+              <Route path="users" component={UsersPage} />
             </Route>
           </Route>
           <Route path="*" component={NotFound} />

ui/src/store/configureStore.js

@@ -7,12 +7,14 @@ import * as dataExplorerReducers from 'src/data_explorer/reducers';
 import * as sharedReducers from 'src/shared/reducers';
 import rulesReducer from 'src/kapacitor/reducers/rules';
 import dashboardUI from 'src/dashboards/reducers/ui';
+import usersReducer from 'src/users/reducers/users';
 import persistStateEnhancer from './persistStateEnhancer';
 
 const rootReducer = combineReducers({
   ...sharedReducers,
   ...dataExplorerReducers,
   rules: rulesReducer,
+  users: usersReducer,
   dashboardUI,
 });
 

ui/src/users/actions/index.js

@@ -0,0 +1,13 @@
+import {getUsers} from 'src/users/apis'
+
+export const loadUsers = (users) => ({
+  type: 'LOAD_USERS',
+  payload: {
+    users,
+  },
+})
+
+export const loadUsersAsync = (url) => async (dispatch) => {
+  const users = await getUsers(url)
+  dispatch(loadUsers(users))
+}

ui/src/users/apis/index.js

@@ -0,0 +1,12 @@
+import AJAX from 'src/utils/ajax'
+
+export const getUsers = async (url) => {
+  try {
+    return await AJAX({
+      method: 'GET',
+      url,
+    })
+  } catch (error) {
+    console.error(error) // eslint-disable-line no-console
+  }
+}

ui/src/users/containers/UsersPage.js

@@ -0,0 +1,48 @@
+import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {loadUsersAsync} from 'src/users/actions'
+
+class UsersPage extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidMount() {
+    const {source, loadUsers} = this.props
+    loadUsers(source.links.users)
+  }
+
+  render() {
+    return (
+      <div>Hello Users</div>
+    )
+  }
+}
+
+const {
+  func,
+  shape,
+  string,
+} = PropTypes
+
+UsersPage.propTypes = {
+  source: shape({
+    id: string.isRequired,
+    links: shape({
+      users: string.isRequired,
+    }),
+  }).isRequired,
+  users: shape(),
+  loadUsers: func,
+}
+
+const mapStateToProps = ({users}) => ({
+  users,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  loadUsers: bindActionCreators(loadUsersAsync, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(UsersPage);

ui/src/users/index.js

@@ -0,0 +1,2 @@
+import UsersPage from './containers/UsersPage';
+export {UsersPage};

ui/src/users/reducers/users.js

@@ -0,0 +1,8 @@
+export default function users(state = {}, action) {
+  switch (action.type) {
+    case 'LOAD_USERS': {
+      return {...state, ...action.payload}
+    }
+  }
+  return state
+}