Admin Databases Page should be sorted alphabetically (#1185)

* Sort DBs by name

* Sort RPs alphabetically

* Update CHANGELOG

CHANGELOG.md

@@ -29,6 +29,7 @@
   1. [#1137](https://github.com/influxdata/chronograf/pull/1137): Clarify Kapacitor Alert configuration for HipChat
   1. [#1079](https://github.com/influxdata/chronograf/issues/1079): Remove series highlighting in line graphs
   1. [#1124](https://github.com/influxdata/chronograf/pull/1124): Polished dashboard cell drag interaction, use Hover-To-Reveal UI pattern in all tables, Source Indicator & Graph Tips are no longer misleading, and aesthetic improvements to the DB Management page
+  1. [#1185](https://github.com/influxdata/chronograf/pull/1185): Alphabetically sort Admin Database Page
 
 ## v1.2.0-beta7 [2017-03-28]
 ### Bug Fixes

ui/src/admin/components/DatabaseManager.js

@@ -1,4 +1,7 @@
 import React, {PropTypes} from 'react'
+
+import _ from 'lodash'
+
 import DatabaseTable from 'src/admin/components/DatabaseTable'
 
 const DatabaseManager = ({
@@ -31,7 +34,7 @@ const DatabaseManager = ({
       </div>
       <div className="panel-body">
         {
-          databases.map(db =>
+          _.sortBy(databases, ({name}) => name.toLowerCase()).map(db =>
             <DatabaseTable
               key={db.links.self}
               database={db}
@@ -92,4 +95,3 @@ DatabaseManager.propTypes = {
 }
 
 export default DatabaseManager
-

ui/src/admin/components/DatabaseTable.js

@@ -1,4 +1,7 @@
 import React, {PropTypes} from 'react'
+
+import _ from 'lodash'
+
 import DatabaseRow from 'src/admin/components/DatabaseRow'
 import DatabaseTableHeader from 'src/admin/components/DatabaseTableHeader'
 
@@ -55,7 +58,7 @@ const DatabaseTable = ({
           </thead>
           <tbody>
             {
-              database.retentionPolicies.map(rp => {
+              _.sortBy(database.retentionPolicies, ({name}) => name.toLowerCase()).map(rp => {
                 return (
                   <DatabaseRow
                     key={rp.links.self}