Introduce addDatabase to store

ui/src/admin/actions/index.js

@@ -64,6 +64,10 @@ export const addRole = () => ({
   type: 'ADD_ROLE',
 })
 
+export const addDatabase = () => ({
+  type: 'ADD_DATABASE',
+})
+
 export const syncUser = (staleUser, syncedUser) => ({
   type: 'SYNC_USER',
   payload: {
@@ -164,7 +168,7 @@ export const loadPermissionsAsync = (url) => async (dispatch) => {
 export const loadDBsAndRPsAsync = (url) => async (dispatch) => {
   const {data: dbs} = await showDatabases(url)
   const {databases} = parseShowDatabases(dbs)
-  dispatch(loadDatabases(databases))
+  dispatch(loadDatabases(databases.map(name => ({name}))))
 
   const {data: {results}} = await showRetentionPolicies(url, databases)
   const retentionPolicies = results.map(parseShowRetentionPolicies)

ui/src/admin/components/DatabaseManager.js

@@ -1,19 +1,20 @@
 import React, {PropTypes} from 'react'
 import {formatRPDuration} from 'utils/formatting'
+import DatabaseTable from 'src/admin/components/DatabaseTable'
 
-const DatabaseManager = ({databases, retentionPolicies}) => {
+const DatabaseManager = ({databases, retentionPolicies, addDatabase}) => {
   return (
     <div className="panel panel-info">
       <div className="panel-heading u-flex u-ai-center u-jc-space-between">
         <h2 className="panel-title">{databases.length === 1 ? '1 Database' : `${databases.length} Databases`}</h2>
-        <div className="btn btn-sm btn-primary">Create Database</div>
+        <div className="btn btn-sm btn-primary" onClick={addDatabase}>Create Database</div>
       </div>
       <div className="panel-body">
         {
           databases.map((db, i) =>
             <DatabaseTable
-              key={i}
-              database={db}
+              key={db.name}
+              database={db.name}
               retentionPolicies={retentionPolicies[i] || []}
             />
           )
@@ -89,14 +90,16 @@ const DatabaseRow = ({name, duration, replication, isDefault}) => {
 const {
   arrayOf,
   bool,
+  func,
   number,
   shape,
   string,
 } = PropTypes
 
 DatabaseManager.propTypes = {
-  databases: arrayOf(string),
+  databases: arrayOf(shape()),
   retentionPolicies: arrayOf(arrayOf(shape)),
+  addDatabase: func,
 }
 
 DatabaseRow.propTypes = {
@@ -106,10 +109,5 @@ DatabaseRow.propTypes = {
   isDefault: bool,
 }
 
-DatabaseTable.propTypes = {
-  database: string,
-  retentionPolicies: arrayOf(shape()),
-}
-
 export default DatabaseManager
 

ui/src/admin/containers/DatabaseManagerPage.js

@@ -2,7 +2,7 @@ import React, {PropTypes, Component} from 'react'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 
-import {loadDBsAndRPsAsync} from 'src/admin/actions'
+import * as adminActionCreators from 'src/admin/actions'
 import DatabaseManager from 'src/admin/components/DatabaseManager'
 
 class DatabaseManagerPage extends Component {
@@ -11,22 +11,37 @@ class DatabaseManagerPage extends Component {
   }
 
   componentDidMount() {
-    const {source: {links: {proxy}}, loadDBsAndRPs} = this.props
+    const {source: {links: {proxy}}, actions} = this.props
 
-    loadDBsAndRPs(proxy)
+    actions.loadDBsAndRPsAsync(proxy)
+  }
+
+  handleCreateDatabase() {
+    // this.props.createDatabase(database)
+  }
+
+  handleAddDatabase() {
+    this.props.actions.addDatabase()
   }
 
   render() {
-    const {databases, retentionPolicies} = this.props
+    const {databases, retentionPolicies, actions} = this.props
 
-    return <DatabaseManager databases={databases} retentionPolicies={retentionPolicies} />
+    return (
+      <DatabaseManager
+        addDatabase={actions.addDatabase}
+        databases={databases}
+        retentionPolicies={retentionPolicies}
+      />
+    )
   }
 }
 
 const {
-  array,
   arrayOf,
+  bool,
   func,
+  number,
   shape,
   string,
 } = PropTypes
@@ -37,9 +52,20 @@ DatabaseManagerPage.propTypes = {
       proxy: string,
     }),
   }),
-  databases: arrayOf(string),
-  retentionPolicies: array,
-  loadDBsAndRPs: func,
+  databases: arrayOf(shape({
+    name: string,
+    isEditing: bool,
+  })),
+  retentionPolicies: arrayOf(arrayOf(shape({
+    name: string,
+    duration: string,
+    replication: number,
+    isDefault: bool,
+  }))),
+  actions: shape({
+    loadDBsAndRPsAsync: func,
+    addDatabase: func,
+  }),
 }
 
 const mapStateToProps = ({admin: {databases, retentionPolicies}}) => ({
@@ -48,7 +74,7 @@ const mapStateToProps = ({admin: {databases, retentionPolicies}}) => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  loadDBsAndRPs: bindActionCreators(loadDBsAndRPsAsync, dispatch),
+  actions: bindActionCreators(adminActionCreators, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(DatabaseManagerPage)

ui/src/admin/reducers/admin.js

@@ -16,6 +16,19 @@ const newDefaultRole = {
   isNew: true,
 }
 
+const newDefaultDatabase = {
+  name: '',
+  isNew: true,
+}
+
+const newDefaultRP = {
+  name: 'autogen',
+  duration: '0',
+  replication: 2,
+  isDefault: true,
+  isNew: true,
+}
+
 const initialState = {
   users: null,
   roles: [],
@@ -70,6 +83,23 @@ export default function admin(state = initialState, action) {
       }
     }
 
+    case 'ADD_DATABASE': {
+      const newDatabase = {...newDefaultDatabase, isEditing: true}
+      const newRetentionPolicies = [{...newDefaultRP}]
+
+      return {
+        ...state,
+        databases: [
+          newDatabase,
+          ...state.databases,
+        ],
+        retentionPolicies: [
+          newRetentionPolicies,
+          ...state.retentionPolicies,
+        ],
+      }
+    }
+
     case 'SYNC_USER': {
       const {staleUser, syncedUser} = action.payload
       const newState = {