From: Laurence Maultsby Date: Mon, 12 Sep 2016 16:14:43 +0000 (-0400) Subject: RIFT-14134, RIFT-14548: RO CRU and Instantiate Data Centers X-Git-Tag: v1.0.0~17 X-Git-Url: https://osm.etsi.org/gitweb/?p=osm%2FUI.git;a=commitdiff_plain;h=dfe972ff7c9f7b6b1d730e66b0b2aa8df2ce329b RIFT-14134, RIFT-14548: RO CRU and Instantiate Data Centers Signed-off-by: Laurence Maultsby --- diff --git a/skyquake/framework/widgets/panel/panel.jsx b/skyquake/framework/widgets/panel/panel.jsx index e8a31186b..4ef7c892f 100644 --- a/skyquake/framework/widgets/panel/panel.jsx +++ b/skyquake/framework/widgets/panel/panel.jsx @@ -1,5 +1,5 @@ /* - * + * * Copyright 2016 RIFT.IO Inc * * Licensed under the Apache License, Version 2.0 (the "License"); @@ -25,20 +25,21 @@ export class Panel extends Component { render() { let self = this; let {children, className, title, ...props} = self.props; - let classRoot = className ? ' ' + className : ' ' + let classRoot = className ? ' ' + className : ' '; + let hasCorners = this.props['no-corners']; let titleTag = title ?
{title}
: ''; return (
- - + { !hasCorners ? : null } + { !hasCorners ? : null } {titleTag}
{children}
- - + { !hasCorners ? : null } + { !hasCorners ? : null }
) } @@ -50,7 +51,8 @@ Panel.defaultProps = { export class PanelWrapper extends Component { render() { - return (
+ return ( +
{this.props.children}
) } @@ -60,7 +62,7 @@ export default Panel; function decorateClassNames(className, addendum) { - return className.split(' ').map(function(c) { + return className.trim().split(' ').map(function(c) { return c + addendum }).join(' '); } diff --git a/skyquake/framework/widgets/panel/panel.scss b/skyquake/framework/widgets/panel/panel.scss index ff36bbf0d..2a31b1c14 100644 --- a/skyquake/framework/widgets/panel/panel.scss +++ b/skyquake/framework/widgets/panel/panel.scss @@ -1,5 +1,5 @@ /* - * + * * Copyright 2016 RIFT.IO Inc * * Licensed under the Apache License, Version 2.0 (the "License"); @@ -55,6 +55,12 @@ } } +.skyquakePanelWrapper.column { + .skyquakePanel-wrapper { + height:auto; + } +} + /* Style for storybook */ body{ height:100%; diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx b/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx index eca94135a..53a382feb 100644 --- a/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx +++ b/skyquake/framework/widgets/skyquake_container/skyquakeContainer.jsx @@ -1,5 +1,5 @@ /* - * + * * Copyright 2016 RIFT.IO Inc * * Licensed under the Apache License, Version 2.0 (the "License"); @@ -83,7 +83,7 @@ export default class skyquakeContainer extends React.Component { } render() { - const {displayNotification, notificationMessage, displayScreenLoader, ...state} = this.state; + const {displayNotification, notificationMessage, displayScreenLoader, notificationType, ...state} = this.state; var html; if (this.matchesLoginUrl()) { @@ -104,7 +104,7 @@ export default class skyquakeContainer extends React.Component {
+ ) : null; + // cloudResourcesStateHTML = ( + //
+ //

Resources Status

+ //
+ //
    + // { + // cloudResources && props.AccountMeta.resources[Account['account-type']].map(function(r, i) { + + // return ( + //
  • + // {r}: {cloudResources[r]} + //
    • + // ) + // }) || 'No Additional Resources' + // } + //
+ //
+ //
+ // ) + } + + var html = ( + +
+
+ * required +
+
+

Account

+
+

{name}

+ { isEdit ? + ( +
+ {props.AccountMeta.labelByType[Account['account-type']]} +
) + : null + } +
+
+ + {selectAccount} + {sdnAccounts} + {resfreshStatus} + {cloudResourcesStateHTML} +
    + {params} +
+
+ {buttons} +
+
+ ) + return html; + } +} + +function displayFailureMessage(msg) { + return ( +
+
Details:
+
+ {msg} +
+ +
+ ) +} + +class SelectOption extends React.Component { + constructor(props){ + super(props); + } + handleOnChange = (e) => { + this.props.onChange(JSON.parse(e.target.value)); + } + render() { + let html; + html = ( + + ); + 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) diff --git a/skyquake/plugins/config/src/main.js b/skyquake/plugins/config/src/main.js new file mode 100644 index 000000000..5dc626feb --- /dev/null +++ b/skyquake/plugins/config/src/main.js @@ -0,0 +1,15 @@ +/* + * STANDARD_RIFT_IO_COPYRIGHT + */ +import "babel-polyfill"; +import { render } from 'react-dom'; +import SkyquakeRouter from 'widgets/skyquake_container/skyquakeRouter.jsx'; +const config = require('json!../config.json'); + +let context = require.context('./', true, /^\.\/.*\.jsx$/); +let router = SkyquakeRouter(config, context); +let element = document.querySelector('#app'); + +render(router, element); + + diff --git a/skyquake/plugins/config/webpack.production.config.js b/skyquake/plugins/config/webpack.production.config.js new file mode 100644 index 000000000..49ad6317a --- /dev/null +++ b/skyquake/plugins/config/webpack.production.config.js @@ -0,0 +1,61 @@ +/* + * STANDARD_RIFT_IO_COPYRIGHT + */ +var Webpack = require('webpack'); +var path = require('path'); +var nodeModulesPath = path.resolve(__dirname, 'node_modules'); +var buildPath = path.resolve(__dirname, 'public', 'build'); +var mainPath = path.resolve(__dirname, 'src', 'main.js'); +var uiPluginCmakeBuild = process.env.ui_plugin_cmake_build || false; +var frameworkPath = uiPluginCmakeBuild?'../../../../skyquake/skyquake-build/framework':'../../framework'; +var HtmlWebpackPlugin = require('html-webpack-plugin'); +var CommonsPlugin = new require("webpack/lib/optimize/CommonsChunkPlugin") +// Added to overcome node-sass bug https://github.com/iam4x/isomorphic-flux-boilerplate/issues/62 +process.env.UV_THREADPOOL_SIZE=64; +var config = { + devtool: 'source-map', + entry: mainPath, + output: { + path: buildPath, + filename: 'bundle.js', + publicPath: "build/" + }, + resolve: { + extensions: ['', '.js', '.jsx', '.css', '.scss'], + root: path.resolve(frameworkPath), + alias: { + 'widgets': path.resolve(frameworkPath) + '/widgets', + 'style': path.resolve(frameworkPath) + '/style', + 'utils': path.resolve(frameworkPath) + '/utils' + } + }, + module: { + loaders: [{ + test: /\.(jpe?g|png|gif|svg|ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/i, + loader: "file-loader" + }, + { + test: /\.(js|jsx)$/, + exclude: /react-treeview/, + loader: 'babel-loader', + query: { + presets: ["es2015", "stage-0", "react"] + } + }, { + test: /\.css$/, + loader: 'style!css' + }, { + test: /\.scss/, + loader: 'style!css!sass?includePaths[]='+ path.resolve(frameworkPath) + } + ] + }, + plugins: [ + new HtmlWebpackPlugin({ + filename: '../index.html' + , templateContent: '
' + }), + new Webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity) + ] +}; +module.exports = config; diff --git a/skyquake/plugins/launchpad/api/launchpad.js b/skyquake/plugins/launchpad/api/launchpad.js index 397228942..96818e040 100644 --- a/skyquake/plugins/launchpad/api/launchpad.js +++ b/skyquake/plugins/launchpad/api/launchpad.js @@ -1,5 +1,5 @@ /* - * + * * Copyright 2016 RIFT.IO Inc * * Licensed under the Apache License, Version 2.0 (the "License"); @@ -1906,7 +1906,7 @@ DataCenters.get = function(req) { 'Authorization': req.get('Authorization') }); request({ - url: utils.confdPort(api_server) + APIVersion + '/api/operational/datacenters/cloud-accounts?deep', + url: utils.confdPort(api_server) + APIVersion + '/api/operational/datacenters?deep', method: 'GET', headers: requestHeaders, forever: constants.FOREVER_ON, @@ -1915,7 +1915,7 @@ DataCenters.get = function(req) { if (utils.validateResponse('DataCenters.get', error, response, body, resolve, reject)) { var returnData = {}; try { - data = JSON.parse(response.body)['rw-launchpad:cloud-accounts']; + data = JSON.parse(response.body)["rw-launchpad:datacenters"]["ro-accounts"]; data.map(function(c) { returnData[c.name] = c.datacenters; }) diff --git a/skyquake/plugins/launchpad/src/instantiate/instantiateDashboard.jsx b/skyquake/plugins/launchpad/src/instantiate/instantiateDashboard.jsx index 607576b5e..9c358e8c0 100644 --- a/skyquake/plugins/launchpad/src/instantiate/instantiateDashboard.jsx +++ b/skyquake/plugins/launchpad/src/instantiate/instantiateDashboard.jsx @@ -1,5 +1,5 @@ /* - * + * * Copyright 2016 RIFT.IO Inc * * Licensed under the Apache License, Version 2.0 (the "License"); @@ -40,8 +40,10 @@ class InstantiateDashboard extends React.Component { asyncOperations.push(this.Store.getCatalog()); asyncOperations.push(this.Store.getCloudAccount(function() { asyncOperations.push(self.Store.getDataCenters()); + asyncOperations.push(self.Store.getResourceOrchestrator()); asyncOperations.push(self.Store.getSshKey()); asyncOperations.push(self.Store.getConfigAgent()); + asyncOperations.push(self.Store.getResourceOrchestrator()); })); Promise.all(asyncOperations).then(function(resolve, reject) { if(self.props.params.nsd) { @@ -75,7 +77,7 @@ class InstantiateDashboard extends React.Component { self.props.actions.showNotification('Spaces and special characters except underscores are not supported in the network service name at this time'); return; } - if (this.isOpenMano() && (this.state.dataCenterID == "" || !this.state.dataCenterID)) { + if (this.state.isOpenMano && (this.state.dataCenterID == "" || !this.state.dataCenterID)) { self.props.actions.showNotification("Please enter the Data Center ID"); return; } @@ -87,7 +89,7 @@ class InstantiateDashboard extends React.Component { return !this.props.location.pathname.split('/')[2]; } isOpenMano = () => { - return this.state.selectedCloudAccount['account-type'] == 'openmano'; + return this.state.ro['account-type'] == 'openmano'; } openDescriptor = (descriptor) => { let NSD = descriptor; diff --git a/skyquake/plugins/launchpad/src/instantiate/instantiateInputParams.jsx b/skyquake/plugins/launchpad/src/instantiate/instantiateInputParams.jsx index 00397ed9f..87c95921f 100644 --- a/skyquake/plugins/launchpad/src/instantiate/instantiateInputParams.jsx +++ b/skyquake/plugins/launchpad/src/instantiate/instantiateInputParams.jsx @@ -1,6 +1,6 @@ /* - * + * * Copyright 2016 RIFT.IO Inc * * Licensed under the Apache License, Version 2.0 (the "License"); @@ -33,11 +33,20 @@ export default class InstantiateInputParams extends Component {
- { - isOpenMano(props.selectedCloudAccount) ? this.dataCentersHTML(props.dataCenters[selectedCloudAccount.name], props.nsFn.updateSelectedDataCenter) : null + !isOpenMano(props.ro) ? + ( + + ) + : null + } + { + isOpenMano(props.ro) ? + dataCentersHTML(props.dataCenters[props.ro.name], + props.nsFn.updateSelectedDataCenter) + : null }
@@ -60,11 +69,21 @@ export default class InstantiateInputParams extends Component { return (

VNFD: {v.name}

- + { + !isOpenMano(props.ro) ? + ( + + ) + : null + } { - isOpenMano(defaultValue) ? dataCentersHTML(dataCenters[defaultValue.account.name], props.vnfFn.updateSelectedDataCenter(v['member-vnf-index'])) : null + isOpenMano(props.ro) ? + dataCentersHTML( + props.dataCenters[props.ro.name], + props.vnfFn.updateSelectedDataCenter.bind(null, v['member-vnf-index'])) + : null } { (props.configAgentAccounts && props.configAgentAccounts.length > 0) ? @@ -548,22 +567,17 @@ function constructCloudAccountOptions(cloudAccounts){ }); return CloudAccountOptions; } -function dataCentersHTML(state, onChange) { +function dataCentersHTML(dataCenters, onChange) { //Build DataCenter options //Relook at this, why is it an object? - let dataCenters = state.dataCenters || []; - let DataCenterOptions = {}; - if(dataCenters){ - for (let d in dataCenters) { - DataCenterOptions[d] = dataCenters[d].map(function(dc, index) { - return { - label: dc.name, - value: dc.uuid - } - }); + let DataCenterOptions = []; + DataCenterOptions = dataCenters && dataCenters.map(function(dc, index) { + return { + label: dc.name, + value: dc.uuid } - } - if (dataCenters.length > 0) { + }); + if (dataCenters && dataCenters.length > 0) { return (