Skip to content

Commit

Permalink
Replace View Instance with instance dropdown
Browse files Browse the repository at this point in the history
* makes it clear what you're viewing
* allows to quickly change the instance
* instance management icon was removed, can be reached via dropdown

Fixes #590
  • Loading branch information
davkal committed Aug 3, 2016
1 parent 38e9479 commit addc3e7
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 26 deletions.
2 changes: 2 additions & 0 deletions ui-server/client/src/common/api.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ export function getInstance(id) {
if (res.organizations) {
const instance = res.organizations.find(org => org.id === id);
if (instance) {
// hack to only have one request
instance.organizations = res.organizations;
resolve(instance);
} else {
reject(Error('Instance not found'));
Expand Down
24 changes: 24 additions & 0 deletions ui-server/client/src/components/instance-item.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react';
import MenuItem from 'material-ui/MenuItem';
import { hashHistory } from 'react-router';

import { encodeURIs } from '../common/request';

export default class InstanceItem extends React.Component {

constructor(props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
const url = encodeURIs`/instances/select/${this.props.id}`;
hashHistory.push(url);
}

render() {
return (
<MenuItem primaryText={this.props.name} onClick={this.handleClick} />
);
}
}
5 changes: 3 additions & 2 deletions ui-server/client/src/components/private-page.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default class PrivatePage extends React.Component {
}

handleInstanceSuccess(instance) {
this.setState({ instance });
this.setState(instance);
}

handleInstanceError(res) {
Expand Down Expand Up @@ -45,7 +45,8 @@ export default class PrivatePage extends React.Component {
<div style={styles.backgroundContainer}>
<Toolbar
page={this.props.page}
instance={this.state.instance}
instances={this.state.organizations}
instanceName={this.state.name}
orgId={this.props.orgId} />
{this.props.children}
</div>
Expand Down
70 changes: 46 additions & 24 deletions ui-server/client/src/components/toolbar.jsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,42 @@
import React from 'react';
import Divider from 'material-ui/Divider';
import FlatButton from 'material-ui/FlatButton';
import FontIcon from 'material-ui/FontIcon';
import IconButton from 'material-ui/IconButton';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import Paper from 'material-ui/Paper';
import { hashHistory } from 'react-router';

import { encodeURIs } from '../common/request';
import Colors from '../common/colors';

import InstanceItem from './instance-item';
import { Logo } from './logo';

export default class Toolbar extends React.Component {

constructor(props, context) {
super(props, context);
this.handleClickInstance = this.handleClickInstance.bind(this);
this.handleManageInstances = this.handleManageInstances.bind(this);
}

handleClickInstance() {
const url = encodeURIs`/app/${this.props.orgId}`;
hashHistory.push(url);
}

handleManageInstances() {
const url = encodeURIs`/instance/${this.props.orgId}`;
hashHistory.push(url);
}

getLinks() {
return [{
iconClass: 'fa fa-cog',
title: 'Settings for this instance',
route: encodeURIs`#/org/${this.props.orgId}`
}, {
title: 'Manage instances',
iconClass: 'fa fa-cubes',
route: encodeURIs`#/instance/${this.props.orgId}`
}, {
title: 'User account',
iconClass: 'fa fa-user',
Expand Down Expand Up @@ -67,7 +86,7 @@ export default class Toolbar extends React.Component {
width: '100%'
},
toolbarCenter: {
padding: 15
padding: 8
},
toolbarLeft: {
top: 2,
Expand All @@ -76,17 +95,6 @@ export default class Toolbar extends React.Component {
width: 160,
position: 'relative'
},
toolbarOrganization: {
color: Colors.text2,
fontSize: '110%',
lineHeight: 1
},
toolbarOrganizationName: {
color: Colors.text2,
fontSize: '60%',
lineHeight: 1,
marginLeft: '0.5em'
},
toolbarRight: {
padding: 15,
},
Expand All @@ -98,6 +106,7 @@ export default class Toolbar extends React.Component {
};

const links = this.renderLinks();
const viewText = this.props.instanceName ? `View ${this.props.instanceName}` : 'Loading...';

return (
<div>
Expand All @@ -107,14 +116,27 @@ export default class Toolbar extends React.Component {
<Logo />
</div>
<div style={styles.toolbarCenter}>
{this.props.instance && <a href={encodeURIs`#/app/${this.props.orgId}`}
style={styles.toolbarOrganization}>

View Instance
<span style={styles.toolbarOrganizationName}>
{this.props.instance.name}
</span>
</a>}
<div style={{position: 'relative'}}>
<FlatButton
style={{color: Colors.text2}}
onClick={this.handleClickInstance}
label={viewText} />
{this.props.instances && this.props.instances.length > 0 && <IconMenu
iconButtonElement={<IconButton iconStyle={{color: Colors.text2}}>
<FontIcon className="fa fa-caret-down" />
</IconButton>}
style={{position: 'absolute', right: -40, top: -6}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
>
{this.props.instances.map(ins => <InstanceItem key={ins.id} {...ins} />)}
<Divider />
<MenuItem
style={{lineHeight: '24px', fontSize: 13}}
primaryText="Manage instances" onClick={this.handleManageInstances} />
</IconMenu>
}
</div>
</div>
<div style={styles.toolbarRight}>
{links}
Expand Down

0 comments on commit addc3e7

Please sign in to comment.