Add presentational component that lists database users.

ui/src/store/configureStore.js

@@ -5,16 +5,16 @@ import makeQueryExecuter from 'src/shared/middleware/queryExecuter';
 import resizeLayout from 'src/shared/middleware/resizeLayout';
 import * as dataExplorerReducers from 'src/data_explorer/reducers';
 import * as sharedReducers from 'src/shared/reducers';
+import adminReducer from 'src/users/reducers/admin';
 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,
+  admin: adminReducer,
   rules: rulesReducer,
-  users: usersReducer,
   dashboardUI,
 });
 

ui/src/users/actions/index.js

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

ui/src/users/components/UsersTable.js

@@ -0,0 +1,42 @@
+import React, {PropTypes} from 'react'
+
+const UsersTable = ({users}) => (
+  <div className="panel panel-minimal">
+    <div className="panel-heading u-flex u-ai-center u-jc-space-between">
+      <h2 className="panel-title">Database Users</h2>
+    </div>
+    <div className="panel-body">
+      <table className="table v-center">
+        <thead>
+          <tr>
+            <th>User Name</th>
+          </tr>
+        </thead>
+        <tbody>
+          {
+            users.map((u) => {
+              return <div key={u.name}>{u.name}</div>;
+            })
+          }
+        </tbody>
+      </table>
+    </div>
+  </div>
+)
+
+const {
+  arrayOf,
+  shape,
+  string,
+} = PropTypes
+
+UsersTable.propTypes = {
+  users: arrayOf(shape({
+    name: string.isRequired,
+    roles: arrayOf(shape({
+      name: string,
+    })),
+  })),
+}
+
+export default UsersTable

ui/src/users/containers/UsersPage.js

@@ -2,6 +2,7 @@ import React, {Component, PropTypes} from 'react'
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {loadUsersAsync} from 'src/users/actions'
+import UsersTable from 'src/users/components/UsersTable'
 
 class UsersPage extends Component {
   constructor(props) {
@@ -14,13 +15,16 @@ class UsersPage extends Component {
   }
 
   render() {
+    const {users} = this.props
+
     return (
-      <div>Hello Users</div>
+      <UsersTable users={users} />
     )
   }
 }
 
 const {
+  arrayOf,
   func,
   shape,
   string,
@@ -33,12 +37,12 @@ UsersPage.propTypes = {
       users: string.isRequired,
     }),
   }).isRequired,
-  users: shape(),
+  users: arrayOf(shape()),
   loadUsers: func,
 }
 
-const mapStateToProps = ({users}) => ({
+const mapStateToProps = ({admin}) => ({
-  users,
+  users: admin.users,
 })
 
 const mapDispatchToProps = (dispatch) => ({

ui/src/users/reducers/admin.js

@@ -1,4 +1,8 @@
-export default function users(state = {}, action) {
+const initialState = {
+  users: [],
+}
+
+export default function admin(state = initialState, action) {
   switch (action.type) {
     case 'LOAD_USERS': {
       return {...state, ...action.payload}