Introduce Organizations page

Same functionality as the Manage Organizations modal, just in its own
page

ui/src/admin/components/chronograf/OrganizationsTable.js

@@ -0,0 +1,89 @@
+import React, {Component, PropTypes} from 'react'
+
+import Organization from 'src/admin/components/chronograf/Organization'
+import NewOrganization from 'src/admin/components/chronograf/NewOrganization'
+
+class OrganizationsTable extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      isAddingOrganization: false,
+    }
+  }
+  handleClickCreateOrganization = () => {
+    this.setState({isAddingOrganization: true})
+  }
+
+  handleCancelCreateOrganization = () => {
+    this.setState({isAddingOrganization: false})
+  }
+
+  handleCreateOrganization = newOrganization => {
+    const {onCreateOrg} = this.props
+    onCreateOrg(newOrganization)
+  }
+
+  render() {
+    const {organizations, onDeleteOrg, onRenameOrg} = this.props
+    const {isAddingOrganization} = this.state
+
+    return (
+      <div className="container-fluid">
+        <div className="row">
+          <div className="col-xs-12">
+            <div className="panel panel-minimal">
+              <div className="panel-heading u-flex u-ai-center u-jc-space-between">
+                <h2 className="panel-title">22 Organizations</h2>
+                <button
+                  className="btn btn-sm btn-primary"
+                  onClick={this.handleClickCreateOrganization}
+                  disabled={isAddingOrganization}
+                >
+                  <span className="icon plus" /> Create Organization
+                </button>
+              </div>
+              <div className="panel-body">
+                <div className="manage-orgs-form--org-labels">
+                  <div className="manage-orgs-form--id">ID</div>
+                  <div className="manage-orgs-form--name">Name</div>
+                </div>
+                {isAddingOrganization
+                  ? <NewOrganization
+                      onCreateOrganization={this.handleCreateOrganization}
+                      onCancelCreateOrganization={
+                        this.handleCancelCreateOrganization
+                      }
+                    />
+                  : null}
+                {organizations.map(org =>
+                  <Organization
+                    key={org.name}
+                    organization={org}
+                    onDelete={onDeleteOrg}
+                    onRename={onRenameOrg}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const {arrayOf, func, shape, string} = PropTypes
+
+OrganizationsTable.propTypes = {
+  organizations: arrayOf(
+    shape({
+      id: string, // when optimistically created, organization will not have an id
+      name: string.isRequired,
+    })
+  ).isRequired,
+  onCreateOrg: func.isRequired,
+  onDeleteOrg: func.isRequired,
+  onRenameOrg: func.isRequired,
+}
+export default OrganizationsTable

ui/src/admin/containers/OrganizationsPage.js

@@ -0,0 +1,104 @@
+import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux'
+
+import * as adminChronografActionCreators from 'src/admin/actions/chronograf'
+import {publishAutoDismissingNotification} from 'shared/dispatchers'
+
+import OrganizationsTable from 'src/admin/components/chronograf/OrganizationsTable'
+import SourceIndicator from 'shared/components/SourceIndicator'
+import FancyScrollbar from 'shared/components/FancyScrollbar'
+
+class OrganizationsPage extends Component {
+  constructor(props) {
+    super(props)
+
+    // this.state = {
+    //
+    // }
+  }
+
+  componentDidMount() {
+    const {links, actions: {loadOrganizationsAsync}} = this.props
+
+    loadOrganizationsAsync(links.organizations) // TODO: make sure server allows admin to hit this for safety
+  }
+
+  // SINGLE ORGANIZATION ACTIONS
+  handleCreateOrganization = organizationName => {
+    const {links, actions: {createOrganizationAsync}} = this.props
+    createOrganizationAsync(links.organizations, {name: organizationName})
+  }
+  handleRenameOrganization = (organization, name) => {
+    const {actions: {renameOrganizationAsync}} = this.props
+    renameOrganizationAsync(organization, {...organization, name})
+  }
+  handleDeleteOrganization = organization => {
+    const {actions: {deleteOrganizationAsync}} = this.props
+    deleteOrganizationAsync(organization)
+  }
+
+  render() {
+    const {organizations} = this.props
+
+    return (
+      <div className="page">
+        <div className="page-header">
+          <div className="page-header__container">
+            <div className="page-header__left">
+              <h1 className="page-header__title">Admin</h1>
+            </div>
+            <div className="page-header__right">
+              <SourceIndicator />
+            </div>
+          </div>
+        </div>
+        <FancyScrollbar className="page-contents">
+          {organizations
+            ? <OrganizationsTable
+                organizations={organizations}
+                onCreateOrg={this.handleCreateOrganization}
+                onDeleteOrg={this.handleDeleteOrganization}
+                onRenameOrg={this.handleRenameOrganization}
+              />
+            : <div className="page-spinner" />}
+        </FancyScrollbar>
+      </div>
+    )
+  }
+}
+
+const {arrayOf, func, shape, string} = PropTypes
+
+OrganizationsPage.propTypes = {
+  links: shape({
+    users: string.isRequired,
+    organizations: string.isRequired,
+  }),
+  organizations: arrayOf(
+    shape({
+      id: string, // when optimistically created, it will not have an id
+      name: string.isRequired,
+      link: string,
+    })
+  ),
+  actions: shape({
+    loadOrganizationsAsync: func.isRequired,
+    createOrganizationAsync: func.isRequired,
+    renameOrganizationAsync: func.isRequired,
+    deleteOrganizationAsync: func.isRequired,
+  }),
+  notify: func.isRequired,
+}
+
+const mapStateToProps = ({links, adminChronograf: {organizations}}) => ({
+  links,
+  organizations,
+})
+
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators(adminChronografActionCreators, dispatch),
+  notify: bindActionCreators(publishAutoDismissingNotification, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(OrganizationsPage)