Merge pull request #1342 from influxdata/chore/alphabetical-dbs

Chore/alphabetical dbs

CHANGELOG.md

@@ -10,6 +10,7 @@
 
 ### UI Improvements
   1. [#1335](https://github.com/influxdata/chronograf/pull/1335): Improve UX for sanitized kapacitor settings
+  1. [#1342](https://github.com/influxdata/chronograf/pull/1342): No more sort-as-you-type in DB admin
   1. [#1344](https://github.com/influxdata/chronograf/pull/1344): Remove K8 dashboard
   1. [#1340](https://github.com/influxdata/chronograf/pull/1340): Automatically switch to table view if meta query
 

ui/src/admin/actions/index.js

@@ -16,14 +16,13 @@ import {
   updateRetentionPolicy as updateRetentionPolicyAJAX,
 } from 'src/admin/apis'
 
-import {
+import {killQuery as killQueryProxy} from 'shared/apis/metaQuery'
-  killQuery as killQueryProxy,
-} from 'shared/apis/metaQuery'
 
 import {publishAutoDismissingNotification} from 'shared/dispatchers'
 import {errorThrown} from 'shared/actions/errors'
 
 import {REVERT_STATE_DELAY} from 'shared/constants'
+import _ from 'lodash'
 
 export const loadUsers = ({users}) => ({
   type: 'LOAD_USERS',
@@ -46,7 +45,7 @@ export const loadPermissions = ({permissions}) => ({
   },
 })
 
-export const loadDatabases = (databases) => ({
+export const loadDatabases = databases => ({
   type: 'LOAD_DATABASES',
   payload: {
     databases,
@@ -65,7 +64,7 @@ export const addDatabase = () => ({
   type: 'ADD_DATABASE',
 })
 
-export const addRetentionPolicy = (database) => ({
+export const addRetentionPolicy = database => ({
   type: 'ADD_RETENTION_POLICY',
   payload: {
     database,
@@ -105,7 +104,6 @@ export const syncRetentionPolicy = (database, stale, synced) => ({
   },
 })
 
-
 export const editUser = (user, updates) => ({
   type: 'EDIT_USER',
   payload: {
@@ -130,21 +128,21 @@ export const editDatabase = (database, updates) => ({
   },
 })
 
-export const killQuery = (queryID) => ({
+export const killQuery = queryID => ({
   type: 'KILL_QUERY',
   payload: {
     queryID,
   },
 })
 
-export const setQueryToKill = (queryIDToKill) => ({
+export const setQueryToKill = queryIDToKill => ({
   type: 'SET_QUERY_TO_KILL',
   payload: {
     queryIDToKill,
   },
 })
 
-export const loadQueries = (queries) => ({
+export const loadQueries = queries => ({
   type: 'LOAD_QUERIES',
   payload: {
     queries,
@@ -152,7 +150,7 @@ export const loadQueries = (queries) => ({
 })
 
 // TODO: change to 'removeUser'
-export const deleteUser = (user) => ({
+export const deleteUser = user => ({
   type: 'DELETE_USER',
   payload: {
     user,
@@ -160,14 +158,14 @@ export const deleteUser = (user) => ({
 })
 
 // TODO: change to 'removeRole'
-export const deleteRole = (role) => ({
+export const deleteRole = role => ({
   type: 'DELETE_ROLE',
   payload: {
     role,
   },
 })
 
-export const removeDatabase = (database) => ({
+export const removeDatabase = database => ({
   type: 'REMOVE_DATABASE',
   payload: {
     database,
@@ -182,28 +180,28 @@ export const removeRetentionPolicy = (database, retentionPolicy) => ({
   },
 })
 
-export const filterUsers = (text) => ({
+export const filterUsers = text => ({
   type: 'FILTER_USERS',
   payload: {
     text,
   },
 })
 
-export const filterRoles = (text) => ({
+export const filterRoles = text => ({
   type: 'FILTER_ROLES',
   payload: {
     text,
   },
 })
 
-export const addDatabaseDeleteCode = (database) => ({
+export const addDatabaseDeleteCode = database => ({
   type: 'ADD_DATABASE_DELETE_CODE',
   payload: {
     database,
   },
 })
 
-export const removeDatabaseDeleteCode = (database) => ({
+export const removeDatabaseDeleteCode = database => ({
   type: 'REMOVE_DATABASE_DELETE_CODE',
   payload: {
     database,
@@ -220,7 +218,7 @@ export const editRetentionPolicy = (database, retentionPolicy, updates) => ({
 })
 
 // async actions
-export const loadUsersAsync = (url) => async (dispatch) => {
+export const loadUsersAsync = url => async dispatch => {
   try {
     const {data} = await getUsersAJAX(url)
     dispatch(loadUsers(data))
@@ -229,7 +227,7 @@ export const loadUsersAsync = (url) => async (dispatch) => {
   }
 }
 
-export const loadRolesAsync = (url) => async (dispatch) => {
+export const loadRolesAsync = url => async dispatch => {
   try {
     const {data} = await getRolesAJAX(url)
     dispatch(loadRoles(data))
@@ -238,7 +236,7 @@ export const loadRolesAsync = (url) => async (dispatch) => {
   }
 }
 
-export const loadPermissionsAsync = (url) => async (dispatch) => {
+export const loadPermissionsAsync = url => async dispatch => {
   try {
     const {data} = await getPermissionsAJAX(url)
     dispatch(loadPermissions(data))
@@ -247,19 +245,21 @@ export const loadPermissionsAsync = (url) => async (dispatch) => {
   }
 }
 
-export const loadDBsAndRPsAsync = (url) => async (dispatch) => {
+export const loadDBsAndRPsAsync = url => async dispatch => {
   try {
     const {data: {databases}} = await getDbsAndRpsAJAX(url)
-    dispatch(loadDatabases(databases))
+    dispatch(loadDatabases(_.sortBy(databases, ({name}) => name.toLowerCase())))
   } catch (error) {
     dispatch(errorThrown(error))
   }
 }
 
-export const createUserAsync = (url, user) => async (dispatch) => {
+export const createUserAsync = (url, user) => async dispatch => {
   try {
     const {data} = await createUserAJAX(url, user)
-    dispatch(publishAutoDismissingNotification('success', 'User created successfully'))
+    dispatch(
+      publishAutoDismissingNotification('success', 'User created successfully')
+    )
     dispatch(syncUser(user, data))
   } catch (error) {
     dispatch(errorThrown(error, `Failed to create user: ${error.data.message}`))
@@ -268,10 +268,12 @@ export const createUserAsync = (url, user) => async (dispatch) => {
   }
 }
 
-export const createRoleAsync = (url, role) => async (dispatch) => {
+export const createRoleAsync = (url, role) => async dispatch => {
   try {
     const {data} = await createRoleAJAX(url, role)
-    dispatch(publishAutoDismissingNotification('success', 'Role created successfully'))
+    dispatch(
+      publishAutoDismissingNotification('success', 'Role created successfully')
+    )
     dispatch(syncRole(role, data))
   } catch (error) {
     dispatch(errorThrown(error, `Failed to create role: ${error.data.message}`))
@@ -280,11 +282,16 @@ export const createRoleAsync = (url, role) => async (dispatch) => {
   }
 }
 
-export const createDatabaseAsync = (url, database) => async (dispatch) => {
+export const createDatabaseAsync = (url, database) => async dispatch => {
   try {
     const {data} = await createDatabaseAJAX(url, database)
     dispatch(syncDatabase(database, data))
-    dispatch(publishAutoDismissingNotification('success', 'Database created successfully'))
+    dispatch(
+      publishAutoDismissingNotification(
+        'success',
+        'Database created successfully'
+      )
+    )
   } catch (error) {
     dispatch(errorThrown(error))
     // undo optimistic upda, `Failed to create database: ${error.data.message}`te
@@ -292,30 +299,61 @@ export const createDatabaseAsync = (url, database) => async (dispatch) => {
   }
 }
 
-export const createRetentionPolicyAsync = (database, retentionPolicy) => async (dispatch) => {
+export const createRetentionPolicyAsync = (
+  database,
+  retentionPolicy
+) => async dispatch => {
   try {
-    const {data} = await createRetentionPolicyAJAX(database.links.retentionPolicies, retentionPolicy)
+    const {data} = await createRetentionPolicyAJAX(
-    dispatch(publishAutoDismissingNotification('success', 'Retention policy created successfully'))
+      database.links.retentionPolicies,
+      retentionPolicy
+    )
+    dispatch(
+      publishAutoDismissingNotification(
+        'success',
+        'Retention policy created successfully'
+      )
+    )
     dispatch(syncRetentionPolicy(database, retentionPolicy, data))
   } catch (error) {
     dispatch(errorThrown(error))
     // undo optimistic upda, `Failed to create retention policy: ${error.data.message}`te
-    setTimeout(() => dispatch(removeRetentionPolicy(database, retentionPolicy)), REVERT_STATE_DELAY)
+    setTimeout(
+      () => dispatch(removeRetentionPolicy(database, retentionPolicy)),
+      REVERT_STATE_DELAY
+    )
   }
 }
 
-export const updateRetentionPolicyAsync = (database, retentionPolicy, updates) => async (dispatch) => {
+export const updateRetentionPolicyAsync = (
+  database,
+  retentionPolicy,
+  updates
+) => async dispatch => {
   try {
     dispatch(editRetentionPolicy(database, retentionPolicy, updates))
-    const {data} = await updateRetentionPolicyAJAX(retentionPolicy.links.self, updates)
+    const {data} = await updateRetentionPolicyAJAX(
-    dispatch(publishAutoDismissingNotification('success', 'Retention policy updated successfully'))
+      retentionPolicy.links.self,
+      updates
+    )
+    dispatch(
+      publishAutoDismissingNotification(
+        'success',
+        'Retention policy updated successfully'
+      )
+    )
     dispatch(syncRetentionPolicy(database, retentionPolicy, data))
   } catch (error) {
-    dispatch(errorThrown(error, `Failed to update retention policy: ${error.data.message}`))
+    dispatch(
+      errorThrown(
+        error,
+        `Failed to update retention policy: ${error.data.message}`
+      )
+    )
   }
 }
 
-export const killQueryAsync = (source, queryID) => async (dispatch) => {
+export const killQueryAsync = (source, queryID) => async dispatch => {
   // optimistic update
   dispatch(killQuery(queryID))
   dispatch(setQueryToKill(null))
@@ -328,7 +366,7 @@ export const killQueryAsync = (source, queryID) => async (dispatch) => {
   }
 }
 
-export const deleteRoleAsync = (role) => async (dispatch) => {
+export const deleteRoleAsync = role => async dispatch => {
   dispatch(deleteRole(role))
   try {
     await deleteRoleAJAX(role.links.self)
@@ -338,7 +376,7 @@ export const deleteRoleAsync = (role) => async (dispatch) => {
   }
 }
 
-export const deleteUserAsync = (user) => async (dispatch) => {
+export const deleteUserAsync = user => async dispatch => {
   dispatch(deleteUser(user))
   try {
     await deleteUserAJAX(user.links.self)
@@ -348,29 +386,48 @@ export const deleteUserAsync = (user) => async (dispatch) => {
   }
 }
 
-export const deleteDatabaseAsync = (database) => async (dispatch) => {
+export const deleteDatabaseAsync = database => async dispatch => {
   dispatch(removeDatabase(database))
   try {
     await deleteDatabaseAJAX(database.links.self)
     dispatch(publishAutoDismissingNotification('success', 'Database deleted'))
   } catch (error) {
-    dispatch(errorThrown(error, `Failed to delete database: ${error.data.message}`))
+    dispatch(
+      errorThrown(error, `Failed to delete database: ${error.data.message}`)
+    )
   }
 }
 
-export const deleteRetentionPolicyAsync = (database, retentionPolicy) => async (dispatch) => {
+export const deleteRetentionPolicyAsync = (
+  database,
+  retentionPolicy
+) => async dispatch => {
   dispatch(removeRetentionPolicy(database, retentionPolicy))
   try {
     await deleteRetentionPolicyAJAX(retentionPolicy.links.self)
-    dispatch(publishAutoDismissingNotification('success', `Retention policy ${retentionPolicy.name} deleted`))
+    dispatch(
+      publishAutoDismissingNotification(
+        'success',
+        `Retention policy ${retentionPolicy.name} deleted`
+      )
+    )
   } catch (error) {
-    dispatch(errorThrown(error, `Failed to delete retentionPolicy: ${error.data.message}`))
+    dispatch(
+      errorThrown(
+        error,
+        `Failed to delete retentionPolicy: ${error.data.message}`
+      )
+    )
   }
 }
 
-export const updateRoleUsersAsync = (role, users) => async (dispatch) => {
+export const updateRoleUsersAsync = (role, users) => async dispatch => {
   try {
-    const {data} = await updateRoleAJAX(role.links.self, users, role.permissions)
+    const {data} = await updateRoleAJAX(
+      role.links.self,
+      users,
+      role.permissions
+    )
     dispatch(publishAutoDismissingNotification('success', 'Role users updated'))
     dispatch(syncRole(role, data))
   } catch (error) {
@@ -378,42 +435,66 @@ export const updateRoleUsersAsync = (role, users) => async (dispatch) => {
   }
 }
 
-export const updateRolePermissionsAsync = (role, permissions) => async (dispatch) => {
+export const updateRolePermissionsAsync = (
+  role,
+  permissions
+) => async dispatch => {
   try {
-    const {data} = await updateRoleAJAX(role.links.self, role.users, permissions)
+    const {data} = await updateRoleAJAX(
-    dispatch(publishAutoDismissingNotification('success', 'Role permissions updated'))
+      role.links.self,
+      role.users,
+      permissions
+    )
+    dispatch(
+      publishAutoDismissingNotification('success', 'Role permissions updated')
+    )
     dispatch(syncRole(role, data))
   } catch (error) {
-    dispatch(errorThrown(error, `Failed to update role:  ${error.data.message}`))
+    dispatch(
+      errorThrown(error, `Failed to update role:  ${error.data.message}`)
+    )
   }
 }
 
-export const updateUserPermissionsAsync = (user, permissions) => async (dispatch) => {
+export const updateUserPermissionsAsync = (
+  user,
+  permissions
+) => async dispatch => {
   try {
     const {data} = await updateUserAJAX(user.links.self, {permissions})
-    dispatch(publishAutoDismissingNotification('success', 'User permissions updated'))
+    dispatch(
+      publishAutoDismissingNotification('success', 'User permissions updated')
+    )
     dispatch(syncUser(user, data))
   } catch (error) {
-    dispatch(errorThrown(error, `Failed to update user:  ${error.data.message}`))
+    dispatch(
+      errorThrown(error, `Failed to update user:  ${error.data.message}`)
+    )
   }
 }
 
-export const updateUserRolesAsync = (user, roles) => async (dispatch) => {
+export const updateUserRolesAsync = (user, roles) => async dispatch => {
   try {
     const {data} = await updateUserAJAX(user.links.self, {roles})
     dispatch(publishAutoDismissingNotification('success', 'User roles updated'))
     dispatch(syncUser(user, data))
   } catch (error) {
-    dispatch(errorThrown(error, `Failed to update user:  ${error.data.message}`))
+    dispatch(
+      errorThrown(error, `Failed to update user:  ${error.data.message}`)
+    )
   }
 }
 
-export const updateUserPasswordAsync = (user, password) => async (dispatch) => {
+export const updateUserPasswordAsync = (user, password) => async dispatch => {
   try {
     const {data} = await updateUserAJAX(user.links.self, {password})
-    dispatch(publishAutoDismissingNotification('success', 'User password updated'))
+    dispatch(
+      publishAutoDismissingNotification('success', 'User password updated')
+    )
     dispatch(syncUser(user, data))
   } catch (error) {
-    dispatch(errorThrown(error, `Failed to update user:  ${error.data.message}`))
+    dispatch(
+      errorThrown(error, `Failed to update user:  ${error.data.message}`)
+    )
   }
 }

ui/src/admin/components/DatabaseManager.js

@@ -1,7 +1,5 @@
 import React, {PropTypes} from 'react'
 
-import _ from 'lodash'
-
 import DatabaseTable from 'src/admin/components/DatabaseTable'
 
 const DatabaseManager = ({
@@ -29,46 +27,49 @@ const DatabaseManager = ({
   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>
+        <h2 className="panel-title">
-        <button className="btn btn-sm btn-primary" disabled={isAddDBDisabled} onClick={addDatabase}>Create Database</button>
+          {databases.length === 1
+            ? '1 Database'
+            : `${databases.length} Databases`}
+        </h2>
+        <button
+          className="btn btn-sm btn-primary"
+          disabled={isAddDBDisabled}
+          onClick={addDatabase}
+        >
+          Create Database
+        </button>
       </div>
       <div className="panel-body">
-        {
+        {databases.map(db => (
-          _.sortBy(databases, ({name}) => name.toLowerCase()).map(db =>
+          <DatabaseTable
-            <DatabaseTable
+            key={db.links.self}
-              key={db.links.self}
+            database={db}
-              database={db}
+            notify={notify}
-              notify={notify}
+            isRFDisplayed={isRFDisplayed}
-              isRFDisplayed={isRFDisplayed}
+            onEditDatabase={onEditDatabase}
-              onEditDatabase={onEditDatabase}
+            onKeyDownDatabase={onKeyDownDatabase}
-              onKeyDownDatabase={onKeyDownDatabase}
+            onCancelDatabase={onCancelDatabase}
-              onCancelDatabase={onCancelDatabase}
+            onConfirmDatabase={onConfirmDatabase}
-              onConfirmDatabase={onConfirmDatabase}
+            onRemoveDeleteCode={onRemoveDeleteCode}
-              onRemoveDeleteCode={onRemoveDeleteCode}
+            onDeleteDatabase={onDeleteDatabase}
-              onDeleteDatabase={onDeleteDatabase}
+            onStartDeleteDatabase={onStartDeleteDatabase}
-              onStartDeleteDatabase={onStartDeleteDatabase}
+            onDatabaseDeleteConfirm={onDatabaseDeleteConfirm}
-              onDatabaseDeleteConfirm={onDatabaseDeleteConfirm}
+            onAddRetentionPolicy={onAddRetentionPolicy}
-              onAddRetentionPolicy={onAddRetentionPolicy}
+            onStopEditRetentionPolicy={onStopEditRetentionPolicy}
-              onStopEditRetentionPolicy={onStopEditRetentionPolicy}
+            onCancelRetentionPolicy={onCancelRetentionPolicy}
-              onCancelRetentionPolicy={onCancelRetentionPolicy}
+            onCreateRetentionPolicy={onCreateRetentionPolicy}
-              onCreateRetentionPolicy={onCreateRetentionPolicy}
+            onUpdateRetentionPolicy={onUpdateRetentionPolicy}
-              onUpdateRetentionPolicy={onUpdateRetentionPolicy}
+            onRemoveRetentionPolicy={onRemoveRetentionPolicy}
-              onRemoveRetentionPolicy={onRemoveRetentionPolicy}
+            onDeleteRetentionPolicy={onDeleteRetentionPolicy}
-              onDeleteRetentionPolicy={onDeleteRetentionPolicy}
+          />
-            />
+        ))}
-          )
-        }
       </div>
     </div>
   )
 }
 
-const {
+const {arrayOf, bool, func, shape} = PropTypes
-  arrayOf,
-  bool,
-  func,
-  shape,
-} = PropTypes
 
 DatabaseManager.propTypes = {
   databases: arrayOf(shape()),