diff --git a/ui/src/admin/components/chronograf/OrganizationsTable.js b/ui/src/admin/components/chronograf/OrganizationsTable.js new file mode 100644 index 0000000000..2514d3ab21 --- /dev/null +++ b/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 ( +
+
+
+
+
+

22 Organizations

+ +
+
+
+
ID
+
Name
+
+ {isAddingOrganization + ? + : null} + {organizations.map(org => + + )} +
+
+
+
+
+ ) + } +} + +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 diff --git a/ui/src/admin/containers/OrganizationsPage.js b/ui/src/admin/containers/OrganizationsPage.js new file mode 100644 index 0000000000..7421b813ca --- /dev/null +++ b/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 ( +
+
+
+
+

Admin

+
+
+ +
+
+
+ + {organizations + ? + :
} + +
+ ) + } +} + +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)