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

Chore/alphabetical dbs
2017-04-28 12:48:32 -07:00 · 2017-04-28 12:48:32 -07:00 · 5139dc6e36
parent d9653fd3f0 18aad4b563
commit 5139dc6e36
3 changed files with 175 additions and 92 deletions
--- a/CHANGELOG.md
+++ b/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

--- a/ui/src/admin/actions/index.js
+++ b/ui/src/admin/actions/index.js
@ -16,14 +16,13 @@ import {
  updateRetentionPolicy as updateRetentionPolicyAJAX,
 } from 'src/admin/apis'

-import {
-  killQuery as killQueryProxy,
-} from 'shared/apis/metaQuery'
+import {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)
-    dispatch(publishAutoDismissingNotification('success', 'Retention policy created successfully'))
+    const {data} = await createRetentionPolicyAJAX(
+      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)
-    dispatch(publishAutoDismissingNotification('success', 'Retention policy updated successfully'))
+    const {data} = await updateRetentionPolicyAJAX(
+      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)
-    dispatch(publishAutoDismissingNotification('success', 'Role permissions updated'))
+    const {data} = await updateRoleAJAX(
+      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}`)
+    )
  }
 }
--- a/ui/src/admin/components/DatabaseManager.js
+++ b/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>
-        <button className="btn btn-sm btn-primary" disabled={isAddDBDisabled} onClick={addDatabase}>Create Database</button>
+        <h2 className="panel-title">
+          {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">
-        {
-          _.sortBy(databases, ({name}) => name.toLowerCase()).map(db =>
-            <DatabaseTable
-              key={db.links.self}
-              database={db}
-              notify={notify}
-              isRFDisplayed={isRFDisplayed}
-              onEditDatabase={onEditDatabase}
-              onKeyDownDatabase={onKeyDownDatabase}
-              onCancelDatabase={onCancelDatabase}
-              onConfirmDatabase={onConfirmDatabase}
-              onRemoveDeleteCode={onRemoveDeleteCode}
-              onDeleteDatabase={onDeleteDatabase}
-              onStartDeleteDatabase={onStartDeleteDatabase}
-              onDatabaseDeleteConfirm={onDatabaseDeleteConfirm}
-              onAddRetentionPolicy={onAddRetentionPolicy}
-              onStopEditRetentionPolicy={onStopEditRetentionPolicy}
-              onCancelRetentionPolicy={onCancelRetentionPolicy}
-              onCreateRetentionPolicy={onCreateRetentionPolicy}
-              onUpdateRetentionPolicy={onUpdateRetentionPolicy}
-              onRemoveRetentionPolicy={onRemoveRetentionPolicy}
-              onDeleteRetentionPolicy={onDeleteRetentionPolicy}
-            />
-          )
-        }
+        {databases.map(db => (
+          <DatabaseTable
+            key={db.links.self}
+            database={db}
+            notify={notify}
+            isRFDisplayed={isRFDisplayed}
+            onEditDatabase={onEditDatabase}
+            onKeyDownDatabase={onKeyDownDatabase}
+            onCancelDatabase={onCancelDatabase}
+            onConfirmDatabase={onConfirmDatabase}
+            onRemoveDeleteCode={onRemoveDeleteCode}
+            onDeleteDatabase={onDeleteDatabase}
+            onStartDeleteDatabase={onStartDeleteDatabase}
+            onDatabaseDeleteConfirm={onDatabaseDeleteConfirm}
+            onAddRetentionPolicy={onAddRetentionPolicy}
+            onStopEditRetentionPolicy={onStopEditRetentionPolicy}
+            onCancelRetentionPolicy={onCancelRetentionPolicy}
+            onCreateRetentionPolicy={onCreateRetentionPolicy}
+            onUpdateRetentionPolicy={onUpdateRetentionPolicy}
+            onRemoveRetentionPolicy={onRemoveRetentionPolicy}
+            onDeleteRetentionPolicy={onDeleteRetentionPolicy}
+          />
+        ))}
      </div>
    </div>
  )
 }

-const {
-  arrayOf,
-  bool,
-  func,
-  shape,
-} = PropTypes
+const {arrayOf, bool, func, shape} = PropTypes

 DatabaseManager.propTypes = {
  databases: arrayOf(shape()),