From 0be149ab617469c7f0fdaebc3a3661263d5b5895 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Thu, 27 Apr 2017 09:32:44 -0700 Subject: [PATCH 1/3] Prettify --- ui/src/admin/actions/index.js | 192 +++++++++++++++------ ui/src/admin/components/DatabaseManager.js | 69 ++++---- 2 files changed, 172 insertions(+), 89 deletions(-) diff --git a/ui/src/admin/actions/index.js b/ui/src/admin/actions/index.js index 280039c192..2538f354e6 100644 --- a/ui/src/admin/actions/index.js +++ b/ui/src/admin/actions/index.js @@ -16,9 +16,7 @@ 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' @@ -46,7 +44,7 @@ export const loadPermissions = ({permissions}) => ({ }, }) -export const loadDatabases = (databases) => ({ +export const loadDatabases = databases => ({ type: 'LOAD_DATABASES', payload: { databases, @@ -65,7 +63,7 @@ export const addDatabase = () => ({ type: 'ADD_DATABASE', }) -export const addRetentionPolicy = (database) => ({ +export const addRetentionPolicy = database => ({ type: 'ADD_RETENTION_POLICY', payload: { database, @@ -105,7 +103,6 @@ export const syncRetentionPolicy = (database, stale, synced) => ({ }, }) - export const editUser = (user, updates) => ({ type: 'EDIT_USER', payload: { @@ -130,21 +127,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 +149,7 @@ export const loadQueries = (queries) => ({ }) // TODO: change to 'removeUser' -export const deleteUser = (user) => ({ +export const deleteUser = user => ({ type: 'DELETE_USER', payload: { user, @@ -160,14 +157,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 +179,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 +217,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 +226,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 +235,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,7 +244,7 @@ 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)) @@ -256,10 +253,12 @@ export const loadDBsAndRPsAsync = (url) => async (dispatch) => { } } -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 +267,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 +281,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 +298,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 +365,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 +375,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 +385,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 +434,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}`) + ) } } diff --git a/ui/src/admin/components/DatabaseManager.js b/ui/src/admin/components/DatabaseManager.js index 961d6b5f42..55469d3108 100644 --- a/ui/src/admin/components/DatabaseManager.js +++ b/ui/src/admin/components/DatabaseManager.js @@ -29,46 +29,49 @@ const DatabaseManager = ({ return (
-

{databases.length === 1 ? '1 Database' : `${databases.length} Databases`}

- +

+ {databases.length === 1 + ? '1 Database' + : `${databases.length} Databases`} +

+
- { - _.sortBy(databases, ({name}) => name.toLowerCase()).map(db => - - ) - } + {_.sortBy(databases, ({name}) => name.toLowerCase()).map(db => ( + + ))}
) } -const { - arrayOf, - bool, - func, - shape, -} = PropTypes +const {arrayOf, bool, func, shape} = PropTypes DatabaseManager.propTypes = { databases: arrayOf(shape()), From 3bf623d07fe066d230898a29b6002a98f6fce5cf Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Thu, 27 Apr 2017 09:37:03 -0700 Subject: [PATCH 2/3] Fix alphabetical jumping --- ui/src/admin/actions/index.js | 3 ++- ui/src/admin/components/DatabaseManager.js | 4 +--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/ui/src/admin/actions/index.js b/ui/src/admin/actions/index.js index 2538f354e6..63737c91d0 100644 --- a/ui/src/admin/actions/index.js +++ b/ui/src/admin/actions/index.js @@ -22,6 +22,7 @@ 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', @@ -247,7 +248,7 @@ export const loadPermissionsAsync = 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)) } diff --git a/ui/src/admin/components/DatabaseManager.js b/ui/src/admin/components/DatabaseManager.js index 55469d3108..5d4921818b 100644 --- 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 = ({ @@ -43,7 +41,7 @@ const DatabaseManager = ({
- {_.sortBy(databases, ({name}) => name.toLowerCase()).map(db => ( + {databases.map(db => ( Date: Thu, 27 Apr 2017 09:44:31 -0700 Subject: [PATCH 3/3] Update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 047297e9a2..71d3b0ffc4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,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 ## v1.2.0-beta9 [2017-04-21]