diff --git a/ui/src/admin/components/chronograf/AdminTabs.js b/ui/src/admin/components/chronograf/AdminTabs.js index 3bbf51484..f07abf513 100644 --- a/ui/src/admin/components/chronograf/AdminTabs.js +++ b/ui/src/admin/components/chronograf/AdminTabs.js @@ -28,7 +28,7 @@ const AdminTabs = ({ { requiredRole: SUPERADMIN_ROLE, type: ORGANIZATIONS_TAB_NAME, - component: , + component: , }, { requiredRole: ADMIN_ROLE, diff --git a/ui/src/admin/components/chronograf/OrganizationsTable.js b/ui/src/admin/components/chronograf/OrganizationsTable.js index fe9c729e1..997c7470c 100644 --- a/ui/src/admin/components/chronograf/OrganizationsTable.js +++ b/ui/src/admin/components/chronograf/OrganizationsTable.js @@ -38,6 +38,7 @@ class OrganizationsTable extends Component { onRenameOrg, onChooseDefaultRole, onTogglePublic, + currentOrganization, } = this.props const {isCreatingOrganization} = this.state @@ -62,7 +63,7 @@ class OrganizationsTable extends Component {
-
ID
+
Name
Public{' '} @@ -85,6 +86,7 @@ class OrganizationsTable extends Component { onDelete={onDeleteOrg} onRename={onRenameOrg} onChooseDefaultRole={onChooseDefaultRole} + currentOrganization={currentOrganization} /> )}
@@ -102,6 +104,10 @@ OrganizationsTable.propTypes = { name: string.isRequired, }) ).isRequired, + currentOrganization: shape({ + name: string.isRequired, + id: string.isRequired, + }), onCreateOrg: func.isRequired, onDeleteOrg: func.isRequired, onRenameOrg: func.isRequired, diff --git a/ui/src/admin/components/chronograf/OrganizationsTableRow.js b/ui/src/admin/components/chronograf/OrganizationsTableRow.js index c850c52fa..93690854a 100644 --- a/ui/src/admin/components/chronograf/OrganizationsTableRow.js +++ b/ui/src/admin/components/chronograf/OrganizationsTableRow.js @@ -1,9 +1,14 @@ import React, {Component, PropTypes} from 'react' +import {connect} from 'react-redux' +import {bindActionCreators} from 'redux' +import {withRouter} from 'react-router' import SlideToggle from 'shared/components/SlideToggle' import ConfirmButtons from 'shared/components/ConfirmButtons' import Dropdown from 'shared/components/Dropdown' +import {meChangeOrganizationAsync} from 'shared/actions/auth' + import {DEFAULT_ORG_ID} from 'src/admin/constants/chronografAdmin' import {USER_ROLES} from 'src/admin/constants/chronografAdmin' @@ -33,6 +38,13 @@ class OrganizationsTableRow extends Component { } } + handleChangeCurrentOrganization = async () => { + const {router, links, meChangeOrganization, organization} = this.props + + await meChangeOrganization(links.me, {organization: organization.id}) + router.push('') + } + handleNameClick = () => { this.setState({isEditing: true}) } @@ -106,7 +118,7 @@ class OrganizationsTableRow extends Component { render() { const {workingName, isEditing, isDeleting} = this.state - const {organization} = this.props + const {organization, currentOrganization} = this.props const dropdownRolesItems = USER_ROLES.map(role => ({ ...role, @@ -119,8 +131,17 @@ class OrganizationsTableRow extends Component { return (
-
- {organization.id} +
+ {organization.id === currentOrganization.id + ? + : }
{isEditing ? ({ + meChangeOrganization: bindActionCreators(meChangeOrganizationAsync, dispatch), +}) + +const mapStateToProps = ({links}) => ({ + links, +}) + +export default connect(mapStateToProps, mapDispatchToProps)( + withRouter(OrganizationsTableRow) +) diff --git a/ui/src/admin/components/chronograf/OrganizationsTableRowNew.js b/ui/src/admin/components/chronograf/OrganizationsTableRowNew.js index 179b67752..9e62c38fe 100644 --- a/ui/src/admin/components/chronograf/OrganizationsTableRowNew.js +++ b/ui/src/admin/components/chronograf/OrganizationsTableRowNew.js @@ -59,7 +59,7 @@ class OrganizationsTableRowNew extends Component { return (
-
—
+
—
role.organization === organization.id ) + const userIsMe = user.id === meID + return ( - - {user.name} - + {userIsMe + ? + + {user.name} + + : + {user.name} + } @@ -66,7 +73,7 @@ const UsersTableRow = ({ onDelete={onDelete} item={user} buttonSize="btn-xs" - disabled={user.id === meID} + disabled={userIsMe} /> ) diff --git a/ui/src/admin/containers/AdminChronografPage.js b/ui/src/admin/containers/AdminChronografPage.js index f4c08dfab..cda710e5d 100644 --- a/ui/src/admin/containers/AdminChronografPage.js +++ b/ui/src/admin/containers/AdminChronografPage.js @@ -111,6 +111,10 @@ AdminChronografPage.propTypes = { name: string.isRequired, }).isRequired, meRole: string.isRequired, + me: shape({ + name: string.isRequired, + id: string.isRequired, + }).isRequired, meID: string.isRequired, actions: shape({ loadUsersAsync: func.isRequired, @@ -125,6 +129,7 @@ const mapStateToProps = ({ links, adminChronograf: {users}, auth: { + me, me: {currentOrganization: meCurrentOrganization, role: meRole, id: meID}, }, }) => ({ @@ -132,6 +137,7 @@ const mapStateToProps = ({ users, meCurrentOrganization, meRole, + me, meID, }) diff --git a/ui/src/admin/containers/OrganizationsPage.js b/ui/src/admin/containers/OrganizationsPage.js index 4daa7f210..9ae5c5a5d 100644 --- a/ui/src/admin/containers/OrganizationsPage.js +++ b/ui/src/admin/containers/OrganizationsPage.js @@ -52,7 +52,7 @@ class OrganizationsPage extends Component { } render() { - const {organizations} = this.props + const {organizations, currentOrganization} = this.props return ( ) } @@ -87,6 +88,10 @@ OrganizationsPage.propTypes = { deleteOrganizationAsync: func.isRequired, }), getMe: func.isRequired, + currentOrganization: shape({ + name: string.isRequired, + id: string.isRequired, + }), } const mapStateToProps = ({links, adminChronograf: {organizations}}) => ({ diff --git a/ui/src/side_nav/components/UserNavBlock.js b/ui/src/side_nav/components/UserNavBlock.js index b8afbf0c6..532af0520 100644 --- a/ui/src/side_nav/components/UserNavBlock.js +++ b/ui/src/side_nav/components/UserNavBlock.js @@ -87,16 +87,14 @@ class UserNavBlock extends Component { })}
Account
+
+
+ {me.scheme} / {me.provider} +
+
Logout - {isSuperAdmin - ?
-
- You are a SuperAdmin -
-
- : null}
{me.name}
@@ -107,13 +105,11 @@ class UserNavBlock extends Component { {me.name}
Account
- {isSuperAdmin - ?
-
- You are a SuperAdmin -
-
- : null} +
+
+ {me.scheme} / {me.provider} +
+
Logout diff --git a/ui/src/style/components/organizations-table.scss b/ui/src/style/components/organizations-table.scss index 374145130..80551bbc4 100644 --- a/ui/src/style/components/organizations-table.scss +++ b/ui/src/style/components/organizations-table.scss @@ -24,6 +24,15 @@ color: $g13-mist; font-weight: 500; } +.orgs-table--active { + padding: 0 4px 0 0; + width: 102px; + height: 30px; + + button.btn { + width: 100%; + } +} .orgs-table--name, .orgs-table--name-disabled, input[type="text"].form-control.orgs-table--input { @@ -76,7 +85,7 @@ input[type="text"].form-control.orgs-table--input { height: 30px; margin-right: 4px; text-align: center; - width: 104px; + width: 88px; background-color: $g4-onyx; border-radius: 4px; line-height: 30px; @@ -97,7 +106,7 @@ input[type="text"].form-control.orgs-table--input { .orgs-table--default-role, .orgs-table--default-role-disabled { - width: 130px; + width: 100px; height: 30px; margin-right: 4px; } @@ -130,7 +139,8 @@ input[type="text"].form-control.orgs-table--input { > .orgs-table--name, > .orgs-table--name:hover, - > .orgs-table--public { + > .orgs-table--public, + > .orgs-table--active { transition: none; background-color: transparent; border-color: transparent; @@ -140,12 +150,14 @@ input[type="text"].form-control.orgs-table--input { > .orgs-table--name, > .orgs-table--name:hover, > .orgs-table--default-role, - > .orgs-table--public { + > .orgs-table--public, + > .orgs-table--active { color: $g17-whisper; font-weight: 500; } > .orgs-table--default-role, - > .orgs-table--public { + > .orgs-table--public, + > .orgs-table--active { line-height: 30px; font-size: 13px; padding: 0 11px; diff --git a/ui/src/style/fonts/icomoon.eot b/ui/src/style/fonts/icomoon.eot index 769f6b7b6..f707eac29 100755 Binary files a/ui/src/style/fonts/icomoon.eot and b/ui/src/style/fonts/icomoon.eot differ diff --git a/ui/src/style/fonts/icomoon.svg b/ui/src/style/fonts/icomoon.svg index da0f6daa4..d16220968 100755 --- a/ui/src/style/fonts/icomoon.svg +++ b/ui/src/style/fonts/icomoon.svg @@ -87,6 +87,7 @@ + diff --git a/ui/src/style/fonts/icomoon.ttf b/ui/src/style/fonts/icomoon.ttf index 7644afca4..6733c8957 100755 Binary files a/ui/src/style/fonts/icomoon.ttf and b/ui/src/style/fonts/icomoon.ttf differ diff --git a/ui/src/style/fonts/icomoon.woff b/ui/src/style/fonts/icomoon.woff index f54e1f877..56dcbfd30 100755 Binary files a/ui/src/style/fonts/icomoon.woff and b/ui/src/style/fonts/icomoon.woff differ diff --git a/ui/src/style/fonts/icomoon.woff2 b/ui/src/style/fonts/icomoon.woff2 index f55349920..867586645 100755 Binary files a/ui/src/style/fonts/icomoon.woff2 and b/ui/src/style/fonts/icomoon.woff2 differ diff --git a/ui/src/style/layout/sidebar.scss b/ui/src/style/layout/sidebar.scss index c8ded05b4..1138f0b95 100644 --- a/ui/src/style/layout/sidebar.scss +++ b/ui/src/style/layout/sidebar.scss @@ -263,10 +263,6 @@ span.icon.sidebar--icon.sidebar--icon__superadmin { @include no-user-select(); > div { - display: flex; - padding: 4px 8px; - align-items: center; - border-radius: 3px; @include gradient-h($c-pineapple,$c-tiger); color: $c-sapphire; } @@ -280,6 +276,36 @@ span.icon.sidebar--icon.sidebar--icon__superadmin { cursor: default; } } + +.sidebar-menu--provider { + padding: 4px $sidebar-menu--gutter; + font-size: 15px; + font-weight: 500; + @include no-user-select(); + + > div { + @include gradient-h($c-rainforest,$c-pool); + color: $g20-white; + } + span.icon { + display: inline-block; + margin-right: 6px; + position: relative; + top: -2px; + } + &:hover { + cursor: default; + } +} +.sidebar-menu--superadmin > div, +.sidebar-menu--provider > div { + display: flex; + padding: 4px 8px; + align-items: center; + border-radius: 3px; + white-space: nowrap; +} + .fancy-scroll--container.sidebar-menu--scrollbar { .fancy-scroll--thumb-h {display: none !important;} .fancy-scroll--thumb-v { @include gradient-v($g20-white,$c-neutrino); } diff --git a/ui/src/style/pages/users.scss b/ui/src/style/pages/users.scss index e5b585593..96b480018 100644 --- a/ui/src/style/pages/users.scss +++ b/ui/src/style/pages/users.scss @@ -110,3 +110,13 @@ table.table.chronograf-admin-table tbody tr.chronograf-admin-table--new-user { padding-bottom: 8px; } } + +/* Highlight "Me" in the users table */ +.chronograf-user--me { + color: $c-rainforest; + + > span.icon { + display: inline-block; + margin-right: 4px; + } +} diff --git a/ui/src/style/theme/bootstrap-theme.scss b/ui/src/style/theme/bootstrap-theme.scss index a78dfc017..d1dcb1b61 100755 --- a/ui/src/style/theme/bootstrap-theme.scss +++ b/ui/src/style/theme/bootstrap-theme.scss @@ -358,6 +358,9 @@ span.text-color-danger { .icon.heroku-simple:before { content: "\e948"; } +.icon.shuffle:before { + content: "\e94e"; +} .icon.alert-triangle:before { content: "\f02d"; } @@ -5721,6 +5724,25 @@ input.form-control.form-astronaut::-moz-selection, textarea.form-control.form-astronaut::-moz-selection { background-color: #9394ff; } +input.form-control.form-volcano, +textarea.form-control.form-volcano { + color: #ff8564; +} +input.form-control.form-volcano:focus, +textarea.form-control.form-volcano:focus { + color: #fff7f4; + background-color: #2f1f29; + border-color: #ff8564; + box-shadow: 0 0 8px #f95f53; +} +input.form-control.form-volcano::selection, +textarea.form-control.form-volcano::selection { + background-color: #f95f53; +} +input.form-control.form-volcano::-moz-selection, +textarea.form-control.form-volcano::-moz-selection { + background-color: #f95f53; +} .form-control.monotype { font-family: "Roboto Mono", monospace; }