Introduce add retention policy to state

ui/src/admin/actions/index.js

@@ -75,6 +75,14 @@ export const addDatabase = () => ({
   },
 })
 
+export const addRetentionPolicy = (database) => ({
+  type: 'ADD_RETENTION_POLICY',
+  payload: {
+    id: uuid.v4(),
+    database,
+  },
+})
+
 export const syncUser = (staleUser, syncedUser) => ({
   type: 'SYNC_USER',
   payload: {
@@ -222,12 +230,13 @@ 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.map(name => ({name, id: uuid.v4()}))))
 
   const {data: {results}} = await showRetentionPolicies(url, databases)
   const retentionPolicies = results.map(parseShowRetentionPolicies)
-  const rps = retentionPolicies.map((rp) => rp.retentionPolicies)
-  dispatch(loadRetentionPolicies(rps))
+  const rps = retentionPolicies.map(rp => rp.retentionPolicies)
+  const dbsAndRps = databases.map((name, i) => ({name, id: uuid.v4(), retentionPolicies: rps[i]}))
+
+  dispatch(loadDatabases(dbsAndRps))
 }
 
 export const createUserAsync = (url, user) => async (dispatch) => {

ui/src/admin/components/DatabaseManager.js

@@ -3,7 +3,6 @@ import DatabaseTable from 'src/admin/components/DatabaseTable'
 
 const DatabaseManager = ({
   databases,
-  retentionPolicies,
   addDatabase,
   onEditDatabase,
   onKeyDownDatabase,
@@ -11,6 +10,7 @@ const DatabaseManager = ({
   onConfirmDatabase,
   onStartDeleteDatabase,
   onDatabaseDeleteConfirm,
+  onAddRetentionPolicy,
 }) => {
   return (
     <div className="panel panel-info">
@@ -20,17 +20,17 @@ const DatabaseManager = ({
       </div>
       <div className="panel-body">
         {
-          databases.map((db, i) =>
+          databases.map(db =>
             <DatabaseTable
               key={db.id}
               database={db}
-              retentionPolicies={retentionPolicies[i] || []}
               onEditDatabase={onEditDatabase}
               onKeyDownDatabase={onKeyDownDatabase}
               onCancelDatabase={onCancelDatabase}
               onConfirmDatabase={onConfirmDatabase}
               onStartDeleteDatabase={onStartDeleteDatabase}
               onDatabaseDeleteConfirm={onDatabaseDeleteConfirm}
+              onAddRetentionPolicy={onAddRetentionPolicy}
             />
           )
         }
@@ -47,7 +47,6 @@ const {
 
 DatabaseManager.propTypes = {
   databases: arrayOf(shape()),
-  retentionPolicies: arrayOf(arrayOf(shape)),
   addDatabase: func,
   onEditDatabase: func,
   onKeyDownDatabase: func,
@@ -55,6 +54,7 @@ DatabaseManager.propTypes = {
   onConfirmDatabase: func,
   onStartDeleteDatabase: func,
   onDatabaseDeleteConfirm: func,
+  onAddRetentionPolicy: func,
 }
 
 export default DatabaseManager

ui/src/admin/components/DatabaseTable.js

@@ -3,20 +3,19 @@ import {DatabaseRow} from 'src/admin/components/DatabaseRow'
 import ConfirmButtons from 'src/admin/components/ConfirmButtons'
 
 const {
-  arrayOf,
   func,
   shape,
 } = PropTypes
 
 const DatabaseTable = ({
   database,
-  retentionPolicies,
   onEditDatabase,
   onKeyDownDatabase,
   onCancelDatabase,
   onConfirmDatabase,
   onStartDeleteDatabase,
   onDatabaseDeleteConfirm,
+  onAddRetentionPolicy,
 }) => {
   return (
     <div className="db-manager">
@@ -28,6 +27,7 @@ const DatabaseTable = ({
         onConfirm={onConfirmDatabase}
         onStartDelete={onStartDeleteDatabase}
         onDatabaseDeleteConfirm={onDatabaseDeleteConfirm}
+        onAddRetentionPolicy={onAddRetentionPolicy}
       />
       <div className="db-manager-table">
         <table className="table v-center admin-table">
@@ -41,7 +41,7 @@ const DatabaseTable = ({
           </thead>
           <tbody>
             {
-              retentionPolicies.map(({name, duration, replication, isDefault}) => {
+              database.retentionPolicies.map(({name, duration, replication, isDefault}) => {
                 return (
                   <DatabaseRow
                     key={name}
@@ -63,12 +63,12 @@ const DatabaseTable = ({
 DatabaseTable.propTypes = {
   onEditDatabase: func,
   database: shape(),
-  retentionPolicies: arrayOf(shape()),
   onKeyDownDatabase: func,
   onCancelDatabase: func,
   onConfirmDatabase: func,
   onStartDeleteDatabase: func,
   onDatabaseDeleteConfirm: func,
+  onAddRetentionPolicy: func,
 }
 
 const DatabaseTableHeader = ({
@@ -79,6 +79,7 @@ const DatabaseTableHeader = ({
   onCancel,
   onStartDelete,
   onDatabaseDeleteConfirm,
+  onAddRetentionPolicy,
 }) => {
   if (database.isEditing) {
     return (
@@ -97,6 +98,7 @@ const DatabaseTableHeader = ({
       database={database}
       onStartDelete={onStartDelete}
       onDatabaseDeleteConfirm={onDatabaseDeleteConfirm}
+      onAddRetentionPolicy={onAddRetentionPolicy}
     />
   )
 }
@@ -109,12 +111,14 @@ DatabaseTableHeader.propTypes = {
   onConfirm: func,
   onStartDelete: func,
   onDatabaseDeleteConfirm: func,
+  onAddRetentionPolicy: func,
 }
 
 const Header = ({
   database,
   onStartDelete,
   onDatabaseDeleteConfirm,
+  onAddRetentionPolicy,
 }) => {
   const confirmStyle = {
     display: 'flex',
@@ -127,8 +131,8 @@ const Header = ({
       <button className="btn btn-xs btn-danger" onClick={() => onStartDelete(database)}>
         Delete
       </button>
-      <button className="btn btn-xs btn-primary">
-        {`Add retention policy`}
+      <button className="btn btn-xs btn-primary" onClick={() => onAddRetentionPolicy(database)}>
+        Add retention policy
       </button>
     </div>
   )
@@ -163,6 +167,7 @@ Header.propTypes = {
   database: shape(),
   onStartDelete: func,
   onDatabaseDeleteConfirm: func,
+  onAddRetentionPolicy: func,
 }
 
 const EditHeader = ({database, onEdit, onKeyDown, onConfirm, onCancel}) => (

ui/src/admin/containers/DatabaseManagerPage.js

@@ -18,6 +18,24 @@ class DatabaseManagerPage extends Component {
     actions.loadDBsAndRPsAsync(proxy)
   }
 
+  render() {
+    const {databases, actions} = this.props
+
+    return (
+      <DatabaseManager
+        databases={databases}
+        onKeyDownDatabase={this.handleKeyDownDatabase}
+        onDatabaseDeleteConfirm={this.handleDatabaseDeleteConfirm}
+        addDatabase={actions.addDatabase}
+        onEditDatabase={actions.editDatabase}
+        onCancelDatabase={actions.removeDatabase}
+        onConfirmDatabase={actions.createDatabaseAsync}
+        onStartDeleteDatabase={actions.startDeleteDatabase}
+        onAddRetentionPolicy={actions.addRetentionPolicy}
+      />
+    )
+  }
+
   handleKeyDownDatabase(e, database) {
     const {key} = e
     const {actions} = this.props
@@ -45,24 +63,6 @@ class DatabaseManagerPage extends Component {
 
     actions.updateDatabaseDeleteCode(database, value)
   }
-
-  render() {
-    const {databases, retentionPolicies, actions} = this.props
-
-    return (
-      <DatabaseManager
-        databases={databases}
-        retentionPolicies={retentionPolicies}
-        onKeyDownDatabase={this.handleKeyDownDatabase}
-        onDatabaseDeleteConfirm={this.handleDatabaseDeleteConfirm}
-        addDatabase={actions.addDatabase}
-        onEditDatabase={actions.editDatabase}
-        onCancelDatabase={actions.removeDatabase}
-        onConfirmDatabase={actions.createDatabaseAsync}
-        onStartDeleteDatabase={actions.startDeleteDatabase}
-      />
-    )
-  }
 }
 
 const {
@@ -91,6 +91,7 @@ DatabaseManagerPage.propTypes = {
     isDefault: bool,
   }))),
   actions: shape({
+    addRetentionPolicy: func,
     loadDBsAndRPsAsync: func,
     createDatabaseAsync: func,
     addDatabase: func,

ui/src/admin/reducers/admin.js

@@ -17,11 +17,6 @@ const newDefaultRole = {
   isNew: true,
 }
 
-const newDefaultDatabase = {
-  name: '',
-  isNew: true,
-}
-
 const newDefaultRP = {
   name: 'autogen',
   duration: '0',
@@ -30,6 +25,19 @@ const newDefaultRP = {
   isNew: true,
 }
 
+const newEmptyRP = {
+  name: '',
+  duration: '0',
+  replication: 0,
+  isNew: true,
+}
+
+const newDefaultDatabase = {
+  name: '',
+  isNew: true,
+  retentionPolicies: [newDefaultRP],
+}
+
 const initialState = {
   users: null,
   roles: [],
@@ -37,7 +45,6 @@ const initialState = {
   queries: [],
   queryIDToKill: null,
   databases: [],
-  retentionPolicies: [],
 }
 
 export default function admin(state = initialState, action) {
@@ -58,10 +65,6 @@ export default function admin(state = initialState, action) {
       return {...state, ...action.payload}
     }
 
-    case 'LOAD_RETENTION_POLICIES': {
-      return {...state, ...action.payload}
-    }
-
     case 'ADD_USER': {
       const newUser = {...newDefaultUser, isEditing: true}
       return {
@@ -87,7 +90,6 @@ export default function admin(state = initialState, action) {
     case 'ADD_DATABASE': {
       const {id} = action.payload
       const newDatabase = {...newDefaultDatabase, id, isEditing: true}
-      const newRetentionPolicies = [{...newDefaultRP}]
 
       return {
         ...state,
@@ -95,13 +97,20 @@ export default function admin(state = initialState, action) {
           newDatabase,
           ...state.databases,
         ],
-        retentionPolicies: [
-          newRetentionPolicies,
-          ...state.retentionPolicies,
-        ],
       }
     }
 
+    case 'ADD_RETENTION_POLICY': {
+      const {database} = action.payload
+      const databases = state.databases.map(db =>
+        db.id === database.id ?
+        {...database, retentionPolicies: [newEmptyRP, ...database.retentionPolicies]}
+        : db
+      )
+
+      return {...state, databases}
+    }
+
     case 'SYNC_USER': {
       const {staleUser, syncedUser} = action.payload
       const newState = {