+++ /dev/null
-/*
- * STANDARD_RIFT_IO_COPYRIGHT
- */
-
-import React from 'react';
-import Button from 'widgets/button/rw.button.js';
-import _cloneDeep from 'lodash/cloneDeep';
-import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
-import Crouton from 'react-crouton';
-import TextInput from 'widgets/form_controls/textInput.jsx';
-import 'style/common.scss';
-import './config.scss';
-class Account extends React.Component {
- constructor(props) {
- super(props);
- this.state = {};
- this.state.account = {};
- }
- storeListener = (state) => {
- if(!state.account) {
- this.setUp(this.props)
- }
- state.account && this.setState({account: state.account,accountType: state.accountType, types: state.types, sdnOptions: state.sdnOptions})
- }
- componentWillMount() {
- this.props.store.listen(this.storeListener);
- this.setUp(this.props);
- }
- componentWillReceiveProps(nextProps) {
- if(JSON.stringify(nextProps.params) != JSON.stringify(this.props.params)){
- this.setUp(nextProps);
- }
- }
- componentWillUnmount() {
- this.props.store.unlisten(this.storeListener);
- }
- setUp(props){
- if(props.params.name != 'create') {
- this.props.store.viewAccount({type: props.params.type, name: props.params.name});
- } else {
- this.props.store.setAccountTemplate(props.params.type);
- }
- }
- create(e) {
- e.preventDefault();
- var self = this;
- var Account = this.state.account;
- let AccountType = this.state.accountType;
- if (Account.name == "") {
- self.props.flux.actions.global.showNotification("Please give the account a name");
- return;
- } else {
- var type = Account['account-type'];
- var params = Account.params;
-
- if(params) {
- for (var i = 0; i < params.length; i++) {
- var param = params[i].ref;
- if (typeof(Account[type]) == 'undefined' || typeof(Account[type][param]) == 'undefined' || Account[type][param] == "") {
- if (!params[i].optional) {
- self.props.flux.actions.global.showNotification("Please fill all account details");
- return;
- }
- }
- }
- }
-
- let nestedParams = Account.nestedParams && Account.nestedParams;
- if (nestedParams && nestedParams.params) {
- for (let i = 0; i < nestedParams.params.length; i++) {
- let nestedParam = nestedParams.params[i].ref;
- if (typeof(Account[type]) == 'undefined' || typeof(Account[type][nestedParams['container-name']][nestedParam]) == 'undefined' || Account[type][nestedParams['container-name']][nestedParam] == "") {
- if (!nestedParams.params[i].optional) {
- self.props.flux.actions.global.showNotification("Please fill all account details");
- return;
- }
- }
- }
- }
- }
-
- let newAccount = _cloneDeep(removeTrailingWhitespace(Account));
- delete newAccount.params;
- newAccount.nestedParams &&
- newAccount.nestedParams['container-name'] &&
- delete newAccount[newAccount.nestedParams['container-name']];
- delete newAccount.nestedParams;
-
- this.props.flux.actions.global.showScreenLoader();
- this.props.store.create(newAccount, AccountType).then(function() {
- self.props.router.push({pathname:'accounts'});
- self.props.flux.actions.global.hideScreenLoader.defer();
- },
- function() {
- self.props.flux.actions.global.showNotification("There was an error creating your account. Please contact your system administrator.");
- self.props.flux.actions.global.hideScreenLoader.defer();
- });
- }
- update(e) {
- e.preventDefault();
- var self = this;
- var Account = this.state.account;
- let AccountType = this.state.accountType;
- this.props.flux.actions.global.showScreenLoader();
- this.props.store.update(Account, AccountType).then(function() {
- self.props.router.push({pathname:'accounts'});
- self.props.flux.actions.global.hideScreenLoader();
- },
- function() {
-
- });
- }
- cancel = (e) => {
- e.preventDefault();
- e.stopPropagation();
- this.props.router.push({pathname:'accounts'});
- }
- handleDelete = () => {
- let self = this;
- let msg = 'Preparing to delete "' + self.state.account.name + '"' +
- ' Are you sure you want to delete this ' + self.state.accountType + ' account?"';
- if (window.confirm(msg)) {
- this.props.store.delete(self.state.accountType, self.state.account.name).then(function() {
- self.props.flux.actions.global.hideScreenLoader();
- self.props.router.push({pathname:'accounts'});
- }, function(){
- // self.props.flux.actions.global.hideScreenLoader.defer();
- // console.log('Delete Account Fail');
- });
- } else {
- self.props.flux.actions.global.hideScreenLoader();
- }
- }
- handleNameChange(event) {
- this.props.store.handleNameChange(event);
- }
- handleAccountTypeChange(node, event) {
- this.props.store.handleAccountTypeChange(node, event);
- }
- handleSelectSdnAccount = (e) => {
- var tmp = this.state.account;
- if(e) {
- tmp['sdn-account'] = e;
- } else {
- if(tmp['sdn-account']) {
- delete tmp['sdn-account'];
- }
- }
- console.log(e, tmp)
- }
- preventDefault = (e) => {
- e.preventDefault();
- e.stopPropagation();
- }
- evaluateSubmit = (e) => {
- if (e.keyCode == 13) {
- if (this.props.edit) {
- this.update(e);
- } else {
- this.create(e);
- }
- e.preventDefault();
- e.stopPropagation();
- }
- }
-
- render() {
- let self = this;
- let {store, ...props} = this.props;
- // This section builds elements that only show up on the create page.
- // var name = <label>Name <input type="text" onChange={this.handleNameChange.bind(this)} style={{'textAlign':'left'}} /></label>;
- var name = <TextInput label="Name" onChange={this.handleNameChange.bind(this)} required={true} />;
- let params = null;
- let selectAccount = null;
- let resfreshStatus = null;
- let Account = this.state.account;
- // AccountType is for the view, not the data account-type value;
- let AccountType = this.state.accountType;
- let Types = this.state.types;
- let isEdit = this.props.params.name != 'create';
- var buttons;
- let cloudResources = Account['cloud-resources-state'] && Account['cloud-resources-state'][Account['account-type']];
- let cloudResourcesStateHTML = null;
-
- // Account Type Radio
- var selectAccountStack = [];
- if (!isEdit) {
- buttons = [
- <Button key="0" onClick={this.cancel} className="cancel light" label="Cancel"></Button>,
- <Button key="1" role="button" onClick={this.create.bind(this)} className="save dark" label="Save" />
- ]
- for (var i = 0; i < Types.length; i++) {
- var node = Types[i];
- var isSelected = (Account['account-type'] == node['account-type']);
- selectAccountStack.push(
- <label key={i} className={"accountSelection " + (isSelected ? "accountSelection--isSelected" : "")}>
- <div className={"accountSelection-overlay" + (isSelected ? "accountSelection-overlay--isSelected" : "")}></div>
- <div className="accountSelection-imageWrapper">
- <img src={store.getImage(node['account-type'])}/>
- </div>
- <input type="radio" name="account" onChange={this.handleAccountTypeChange.bind(this, node)} defaultChecked={node.name == Types[0].name} value={node['account-type']} />{node.name}
- </label>
- )
- }
- selectAccount = (
- <div className="accountForm">
- <h3 className="accountForm-title">Select Account Type</h3>
- <div className="select-type accountForm-content" >
- {selectAccountStack}
- </div>
- </div>
- );
- } else {
- selectAccount = null
- }
-
- //
- // This sections builds the parameters for the account details.
- if (Account.params) {
- var paramsStack = [];
- var optionalField = '';
- for (var i = 0; i < Account.params.length; i++) {
- var node = Account.params[i];
- var value = ""
- if (Account[Account['account-type']]) {
- value = Account[Account['account-type']][node.ref]
- }
- if (this.props.edit && Account.params) {
- 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} />
- );
- }
- params = (
- <li className="create-fleet-pool accountForm">
- <h3 className="accountForm-title"> {isEdit ? 'Update' : 'Enter'} Account Details</h3>
- <div className="accountForm-content">
- {paramsStack}
- </div>
- </li>
- )
- } else {
- params = (
- <li className="create-fleet-pool accountForm">
- <h3 className="accountForm-title"> {isEdit ? 'Update' : 'Enter'}</h3>
- <label style={{'marginLeft':'17px', color:'#888'}}>No Details Required</label>
- </li>
- )
- }
-
- // This section builds elements that only show up in the edit page.
- if (isEdit) {
- name = <label>{Account.name}</label>;
- buttons = [
- <Button key="2" onClick={this.handleDelete} className="light" label="Remove Account" />,
- <Button key="3" onClick={this.cancel} className="light" label="Cancel" />,
- <Button key="4" role="button" onClick={this.update.bind(this)} className="update dark" label="Update" />
- ];
- resfreshStatus = Account['connection-status'] ? (
- <div className="accountForm">
- <div className="accountForm-title accountForm-title--edit">
- Connection Status
- </div>
- <div className="accountForm-content" style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
- <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
- <AccountConnectivityStatus 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>
- </div>
- {
- Account['connection-status'].status.toUpperCase() === 'FAILURE' ?
- displayFailureMessage(Account['connection-status'].details) : null
- }
- </div>
- ) : null;
- // cloudResourcesStateHTML = (
- // <div className="accountForm">
- // <h3 className="accountForm-title">Resources Status</h3>
- // <div className="accountForm-content" >
- // <ul>
- // {
- // cloudResources && props.AccountMeta.resources[Account['account-type']].map(function(r, i) {
-
- // return (
- // <li key={i}>
- // {r}: {cloudResources[r]}
- // </li>
- // )
- // }) || 'No Additional Resources'
- // }
- // </ul>
- // </div>
- // </div>
- // )
- }
-
- var html = (
-
- <form className="app-body create Accounts" onSubmit={this.preventDefault} onKeyDown={this.evaluateSubmit}>
- <div className="noticeSubText noticeSubText_right">
- * required
- </div>
- <div className="associateSdnAccount accountForm">
- <h3 className="accountForm-title">Account</h3>
- <div className="accountForm-content" style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
- <h4 style={{flex: '1'}}>{name}</h4>
- { isEdit ?
- (
- <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
- <img src={store.getImage(Account['account-type'])}/> {props.AccountMeta.labelByType[Account['account-type']]}
- </div>)
- : null
- }
- </div>
- </div>
-
- {selectAccount}
- {sdnAccounts}
- {resfreshStatus}
- {cloudResourcesStateHTML}
- <ol className="flex-row">
- {params}
- </ol>
- <div className="form-actions">
- {buttons}
- </div>
- </form>
- )
- return html;
- }
-}
-
-function displayFailureMessage(msg) {
- return (
- <div className="accountForm-content" style={{maxWidth: '600px'}}>
- <div style={{paddingBottom: '1rem'}}>Details:</div>
- <div>
- {msg}
- </div>
-
- </div>
- )
-}
-
-class SelectOption extends React.Component {
- constructor(props){
- super(props);
- }
- handleOnChange = (e) => {
- this.props.onChange(JSON.parse(e.target.value));
- }
- render() {
- let html;
- html = (
- <select className={this.props.className} onChange={this.handleOnChange}>
- {
- this.props.options.map(function(op, i) {
- return <option key={i} value={JSON.stringify(op.value)}>{op.label}</option>
- })
- }
- </select>
- );
- return html;
- }
-}
-SelectOption.defaultProps = {
- options: [],
- onChange: function(e) {
- console.dir(e)
- }
-}
-
-function removeTrailingWhitespace(Account) {
- var type = Account['account-type'];
- var params = Account.params;
-
- if(params) {
- for (var i = 0; i < params.length; i++) {
- var param = params[i].ref;
- if(typeof(Account[type][param]) == 'string') {
- Account[type][param] = Account[type][param].trim();
- }
- }
- }
-
- let nestedParams = Account.nestedParams;
- if (nestedParams && nestedParams.params) {
- for (let i = 0; i < nestedParams.params.length; i++) {
- let nestedParam = nestedParams.params[i].ref;
- let nestedParamValue = Account[type][nestedParams['container-name']][nestedParam];
- if (typeof(nestedParamValue) == 'string') {
- Account[type][nestedParams['container-name']][nestedParam] = nestedParamValue.trim();
- }
- }
- }
- return Account;
-}
-
-export default SkyquakeComponent(Account)
projects / osm / UI.git / blobdiff