Move dbs and rps to redux store

ui/src/admin/actions/index.js

@@ -10,7 +10,14 @@ import {
   updateUser as updateUserAJAX,
 } from 'src/admin/apis'
 
-import {killQuery as killQueryProxy} from 'shared/apis/metaQuery'
+import {
+  killQuery as killQueryProxy,
+  showDatabases,
+  showRetentionPolicies,
+} from 'shared/apis/metaQuery'
+
+import parseShowDatabases from 'src/shared/parsing/showDatabases'
+import parseShowRetentionPolicies from 'src/shared/parsing/showRetentionPolicies'
 import {publishNotification} from 'src/shared/actions/notifications';
 import {ADMIN_NOTIFICATION_DELAY} from 'src/admin/constants'
 
@@ -35,6 +42,20 @@ export const loadPermissions = ({permissions}) => ({
   },
 })
 
+export const loadDatabases = (databases) => ({
+  type: 'LOAD_DATABASES',
+  payload: {
+    databases,
+  },
+})
+
+export const loadRetentionPolicies = (retentionPolicies) => ({
+  type: 'LOAD_RETENTION_POLICIES',
+  payload: {
+    retentionPolicies,
+  },
+})
+
 export const addUser = () => ({
   type: 'ADD_USER',
 })
@@ -140,6 +161,17 @@ export const loadPermissionsAsync = (url) => async (dispatch) => {
   dispatch(loadPermissions(data))
 }
 
+export const loadDBsAndRPsAsync = (url) => async (dispatch) => {
+  const {data: dbs} = await showDatabases(url)
+  const {databases} = parseShowDatabases(dbs)
+  dispatch(loadDatabases(databases))
+
+  const {data: {results}} = await showRetentionPolicies(url, databases)
+  const retentionPolicies = results.map(parseShowRetentionPolicies)
+  const rps = retentionPolicies.map((rp) => rp.retentionPolicies)
+  dispatch(loadRetentionPolicies(rps))
+}
+
 export const createUserAsync = (url, user) => async (dispatch) => {
   try {
     const {data} = await createUserAJAX(url, user)

ui/src/admin/containers/DatabaseManagerPage.js

@@ -1,43 +1,32 @@
 import React, {PropTypes, Component} from 'react'
-import {showDatabases, showRetentionPolicies} from 'src/shared/apis/metaQuery'
+import {connect} from 'react-redux'
-import parseShowDatabases from 'src/shared/parsing/showDatabases'
+import {bindActionCreators} from 'redux'
-import parseShowRetentionPolicies from 'src/shared/parsing/showRetentionPolicies'
+
+import {loadDBsAndRPsAsync} from 'src/admin/actions'
 import DatabaseManager from 'src/admin/components/DatabaseManager'
 
 class DatabaseManagerPage extends Component {
   constructor(props) {
     super(props)
-    this.state = {
-      databases: [],
-      retentionPolicies: [],
-    }
   }
 
-  async componentDidMount() {
+  componentDidMount() {
-    const {source: {links: {proxy}}} = this.props
+    const {source: {links: {proxy}}, loadDBsAndRPs} = this.props
 
-    const {data: dbs} = await showDatabases(proxy)
+    loadDBsAndRPs(proxy)
-    const {databases} = parseShowDatabases(dbs)
-
-    const {data: {results}} = await showRetentionPolicies(proxy, databases)
-    const retentionPolicies = results.map(parseShowRetentionPolicies)
-
-    this.setState({databases, retentionPolicies})
   }
 
   render() {
-    const {databases, retentionPolicies} = this.state
+    const {databases, retentionPolicies} = this.props
-    const rps = retentionPolicies.map((rp) => rp.retentionPolicies)
 
-    if (!databases.length || !retentionPolicies.length) {
+    return <DatabaseManager databases={databases} retentionPolicies={retentionPolicies} />
-      return null
-    }
-
-    return <DatabaseManager databases={databases} retentionPolicies={rps} />
   }
 }
 
 const {
+  array,
+  arrayOf,
+  func,
   shape,
   string,
 } = PropTypes
@@ -48,6 +37,18 @@ DatabaseManagerPage.propTypes = {
       proxy: string,
     }),
   }),
+  databases: arrayOf(string),
+  retentionPolicies: array,
+  loadDBsAndRPs: func,
 }
 
-export default DatabaseManagerPage
+const mapStateToProps = ({admin: {databases, retentionPolicies}}) => ({
+  databases,
+  retentionPolicies,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  loadDBsAndRPs: bindActionCreators(loadDBsAndRPsAsync, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(DatabaseManagerPage)

ui/src/admin/reducers/admin.js

@@ -22,6 +22,8 @@ const initialState = {
   permissions: [],
   queries: [],
   queryIDToKill: null,
+  databases: [],
+  retentionPolicies: [],
 }
 
 export default function admin(state = initialState, action) {
@@ -38,6 +40,14 @@ export default function admin(state = initialState, action) {
       return {...state, ...action.payload}
     }
 
+    case 'LOAD_DATABASES': {
+      return {...state, ...action.payload}
+    }
+
+    case 'LOAD_RETENTION_POLICIES': {
+      return {...state, ...action.payload}
+    }
+
     case 'ADD_USER': {
       const newUser = {...newDefaultUser, isEditing: true}
       return {