X-Git-Url: https://osm.etsi.org/gitweb/?p=osm%2FUI.git;a=blobdiff_plain;f=skyquake%2Fplugins%2Fconfig%2Fsrc%2Fdashboard%2Finputs.jsx;fp=skyquake%2Fplugins%2Fconfig%2Fsrc%2Fdashboard%2Finputs.jsx;h=457a08ec7be253bf34fe0cb3500c497b68fdb27b;hp=0000000000000000000000000000000000000000;hb=dfe972ff7c9f7b6b1d730e66b0b2aa8df2ce329b;hpb=e8b63f1993b397787576bdd884366a6640a5adea

diff --git a/skyquake/plugins/config/src/dashboard/inputs.jsx b/skyquake/plugins/config/src/dashboard/inputs.jsx
new file mode 100644
index 000000000..457a08ec7
--- /dev/null
+++ b/skyquake/plugins/config/src/dashboard/inputs.jsx
@@ -0,0 +1,401 @@
+/*
+ * STANDARD_RIFT_IO_COPYRIGHT
+ */
+
+import React from 'react';
+import Button from 'widgets/button/rw.button.js';
+import _ from 'lodash';
+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)