import Crouton from 'react-crouton';
import TextInput from 'widgets/form_controls/textInput.jsx';
import {AccountConnectivityStatus} from '../account_sidebar/accountSidebar.jsx';
+
import 'style/common.scss';
import './account.scss';
class Account extends React.Component {
value = Account.params[node.ref];
}
paramsStack.push(
- <TextInput key={node.label} className="accountForm-input" label={node.label} required={!node.optional} onChange={this.props.store.handleParamChange(node)} value={value} />
+ <TextInput
+ key={node.label}
+ className="accountForm-input"
+ label={node.label}
+ required={!node.optional}
+ onChange={this.props.store.handleParamChange(node)}
+ value={value}
+ readonly={self.props.readonly}
+
+ />
);
}
// </label>
// );
nestedParamsStack.push(
- <TextInput key={node.label} label={node.label} required={!node.optional} className="create-fleet-pool-input" type="text" onChange={this.props.store.handleNestedParamChange(Account.nestedParams['container-name'], node)} value={value}/>
+ <TextInput
+ key={node.label}
+ label={node.label}
+ required={!node.optional}
+ className="create-fleet-pool-input"
+ type="text"
+ onChange={this.props.store.handleNestedParamChange(Account.nestedParams['container-name'], node)}
+ value={value}
+ readonly={self.props.readonly}
+ />
);
}
}
<AccountConnectivityStatus status={Account['connection-status'].status} />
{Account['connection-status'] && Account['connection-status'].status && Account['connection-status'].status.toUpperCase()}
</div>
- <Button className="refreshList light" onClick={this.props.store.refreshAccount.bind(this, Account.name, AccountType)} label="REFRESH STATUS"></Button>
+ <Button is-disabled={self.props.readonly} className="refreshList light" onClick={this.props.store.refreshAccount.bind(this, Account.name, AccountType)} label="REFRESH STATUS"></Button>
</div>
{
(Account['connection-status'] && Account['connection-status'].status && Account['connection-status'].status.toUpperCase()) === 'FAILURE' ?
{params}
</ol>
<div className="form-actions">
- {buttons}
+ {!self.props.readonly ? buttons : null}
</div>
</form>
)
}
}
+Account.contextTypes = {
+ router: React.PropTypes.object,
+ userProfile: React.PropTypes.object
+}
+
function displayFailureMessage(msg) {
return (
<div className="accountForm-content" style={{maxWidth: '600px'}}>
import AccountStore from './accountStore.js';
import AccountSidebar from '../account_sidebar/accountSidebar.jsx';
import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
+import {SkyquakeRBAC, isRBACValid} from 'widgets/skyquake_rbac/skyquakeRBAC.jsx';
+import ROLES from 'utils/roleConstants.js';
+
+const PROJECT_ROLES = ROLES.PROJECT;
+const PLATFORM = ROLES.PLATFORM;
+
+//Delete this line after testing is done
+// PROJECT_ROLES.ACCOUNT_ADMIN = '';
import 'style/layout.scss';
class AccountsDashboard extends React.Component {
render() {
let self = this;
let html;
+ let READONLY = !isRBACValid(this.context.userProfile, [PROJECT_ROLES.ACCOUNT_ADMIN]);
html = (<div className="launchpad-account-dashboard content-wrapper">
<div className="flex">
- <AccountSidebar {...this.state} store={this.Store}/>
+ <AccountSidebar {...this.state} readonly={READONLY} store={this.Store}/>
<div>
- { this.props.children ? React.cloneElement(this.props.children, {store: self.Store, ...self.state}) : 'Edit or Create New Accounts'
+ { this.props.children ? React.cloneElement(this.props.children, {readonly: READONLY, store: self.Store, ...self.state}) : 'Edit or Create New Accounts'
}
</div>
</div>
}
}
AccountsDashboard.contextTypes = {
- router: React.PropTypes.object
+ router: React.PropTypes.object,
+ userProfile: React.PropTypes.object
};
export default SkyquakeComponent(AccountsDashboard);
}
render() {
let html;
+ let self = this;
let {store, ...props} = this.props;
//[this.props.cloud,this.props.sdn,this.props['config-agent']]
let AccountData = [
<div>
<h1>VIM Accounts</h1>
{cloudAccounts}
- <DashboardCard className="accountSidebarCard">
- <Link
- to={{pathname: '/accounts/cloud/create'}}
- title="Create Cloud Account"
- className={'accountSidebarCard_create'}
- >
- Add VIM Account
- <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
- </Link>
- </DashboardCard>
+ {
+ !self.props.readonly ?
+ <DashboardCard className="accountSidebarCard">
+ <Link
+ to={{pathname: '/accounts/cloud/create'}}
+ title="Create Cloud Account"
+ className={'accountSidebarCard_create'} >
+ Add VIM Account
+ <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
+ </Link>
+ </DashboardCard>
+ : <div style={{margin:'1rem'}}></div>
+ }
</div>)
: null}
<h1>SDN Accounts</h1>
{sdnAccounts}
- <DashboardCard className="accountSidebarCard">
- <Link
- to={{pathname: '/accounts/sdn/create'}}
- title="Create Sdn Account"
- className={'accountSidebarCard_create'}
- >
- Add SDN Account
- <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
- </Link>
- </DashboardCard>
+ {
+ !self.props.readonly ?
+ <DashboardCard className="accountSidebarCard">
+ <Link
+ to={{pathname: '/accounts/sdn/create'}}
+ title="Create Sdn Account"
+ className={'accountSidebarCard_create'}>
+ Add SDN Account
+ <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
+ </Link>
+
+ </DashboardCard>
+ : <div style={{margin:'1rem'}}></div>
+ }
<h1>Config Agent Accounts</h1>
{configAgentAccounts}
- <DashboardCard className="accountSidebarCard">
- <Link
- to={{pathname: '/accounts/config-agent/create'}}
- title="Create Config Agent Account"
- className={'accountSidebarCard_create'}
- >
- Add Config Agent Account
- <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
- </Link>
- </DashboardCard>
+ {
+ !self.props.readonly ?
+ <DashboardCard className="accountSidebarCard">
+ <Link
+ to={{pathname: '/accounts/config-agent/create'}}
+ title="Create Config Agent Account"
+ className={'accountSidebarCard_create'}
+ >
+ Add Config Agent Account
+ <img src={require("style/img/launchpad-add-fleet-icon.png")}/>
+ </Link>
+ </DashboardCard>
+ : <div style={{margin:'1rem'}}></div>
+ }
</div>
);
return html;
deleteProject = (e) => {
e.preventDefault();
e.stopPropagation();
- this.Store.deleteProject({
+ if (confirm('Are you sure you want to delete this project?')) {
+ this.Store.deleteProject({
'name': this.state['name']
});
+ }
}
createProject = (e) => {
let self = this;
deleteUser = (e) => {
e.preventDefault();
e.stopPropagation();
- this.Store.deleteUser({
+ if (confirm('Are you sure you want to delete this user?')) {
+ this.Store.deleteUser({
'user-name': this.state['user-name'],
'user-domain': this.state['user-domain']
});
+ }
+
}
createUser = (e) => {
e.preventDefault();