diff --git a/.babelrc b/.babelrc new file mode 100644 index 000000000..37029bd03 --- /dev/null +++ b/.babelrc @@ -0,0 +1,31 @@ +{ + "presets": [ + [ + "env", + { + "targets": { + "browsers": [ + "> 1%", + "last 2 versions", + "Firefox ESR", + "IE 10", + "IE 11" + ] + } + } + ], + "react", + "es2015", + ], + "plugins": [ + "transform-class-properties", + "transform-export-extensions", + "transform-object-rest-spread", + "transform-object-assign" + ], + "env": { + "test": { + "plugins": ["transform-es2015-modules-commonjs"] + } + } +} diff --git a/.gitignore b/.gitignore index 182eeb079..f2c7c3bb4 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,6 @@ /config/environments/*.local.yml /spec/manageiq + +node_modules/ +yarn.lock diff --git a/.npmrc b/.npmrc new file mode 100644 index 000000000..99e12685e --- /dev/null +++ b/.npmrc @@ -0,0 +1,2 @@ +# using yarn +package-lock = false diff --git a/.postcssrc.yml b/.postcssrc.yml new file mode 100644 index 000000000..bc4f02ab3 --- /dev/null +++ b/.postcssrc.yml @@ -0,0 +1,4 @@ +plugins: + postcss-smart-import: {} + precss: {} + autoprefixer: {} diff --git a/app/helpers/manageiq/providers/amazon/toolbar_overrides/ems_cloud_center.rb b/app/helpers/manageiq/providers/amazon/toolbar_overrides/ems_cloud_center.rb new file mode 100644 index 000000000..3ee429bd8 --- /dev/null +++ b/app/helpers/manageiq/providers/amazon/toolbar_overrides/ems_cloud_center.rb @@ -0,0 +1,33 @@ +module ManageIQ + module Providers + module Amazon + module ToolbarOverrides + class EmsCloudCenter < ::ApplicationHelper::Toolbar::Override + button_group('magic', [ + button( + :magic, + 'fa fa-magic fa-lg', + t = N_('Magic'), + t, + :data => {'function' => 'sendDataWithRx', + 'function-data' => {:controller => 'provider_dialogs', # this one is required + :button => :magic, + :modal_title => N_('Create a Security Group'), + :component_name => 'CreateAmazonSecurityGroupForm', + :ems_id => EmsCloud.first.id}.to_json}, # this line to be removed, usage replaced with ManageIQ.record.recordId + :klass => ApplicationHelper::Button::ButtonWithoutRbacCheck), + button( + :magic_dialog, + 'fa fa-magic fa-lg', + t = N_('Magic'), + t, + :data => {'function' => 'sendDataWithRx', + 'function-data' => {:controller => 'provider_dialogs', # this one is required + :button => :magic_dialog}.to_json}, + :klass => ApplicationHelper::Button::ButtonWithoutRbacCheck), + ]) + end + end + end + end +end diff --git a/app/helpers/manageiq/providers/amazon/toolbar_overrides/x_vm_cloud_center.rb b/app/helpers/manageiq/providers/amazon/toolbar_overrides/x_vm_cloud_center.rb new file mode 100644 index 000000000..e65123dbe --- /dev/null +++ b/app/helpers/manageiq/providers/amazon/toolbar_overrides/x_vm_cloud_center.rb @@ -0,0 +1,43 @@ +module ManageIQ + module Providers + module Amazon + module ToolbarOverrides + class XVmCloudCenter < ::ApplicationHelper::Toolbar::Override + button_group('amazon_stuff', [ + select( + :amazon_stuff, + 'fa fa-cog fa-lg', + t = N_('Amazon Stuff'), + t, + :items => [ + button( + :amazon_do_start_instance, + 'fa fa-refresh fa-lg', + N_('Do something to this Instance'), + N_('Start this Instance'), + :confirm => N_("Really wanna do something?"), + :klass => ApplicationHelper::Button::ButtonWithoutRbacCheck, + ), + button( + :amazon_do_stop_instance, + 'fa fa-search fa-lg', + N_('Do something more to this Instance'), + N_('Stop this Instance'), + :confirm => N_("Still not enough?"), + :klass => ApplicationHelper::Button::ButtonWithoutRbacCheck, + ), + button( + :amazon_do_stop_instance, + 'fa fa-search fa-lg', + N_('Do something more to this Instance'), + N_('Create security group'), + :klass => ApplicationHelper::Button::ButtonWithoutRbacCheck, + ), + ] + ) + ]) + end + end + end + end +end diff --git a/app/javascript/components/create-amazon-security-group-form.jsx b/app/javascript/components/create-amazon-security-group-form.jsx new file mode 100644 index 000000000..c03f24469 --- /dev/null +++ b/app/javascript/components/create-amazon-security-group-form.jsx @@ -0,0 +1,71 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { AmazonSecurityGroupForm } from '@manageiq/react-ui-components/dist/amazon-security-form-group'; + +const API = window.API; + +const getData = () => API.get("/api/cloud_networks/?attributes=ems_ref,name,type&expand=resources&filter[]=type='ManageIQ::Providers::Amazon*'") + .then(data => data.resources.map(resource => ({ + value: resource.ems_ref, + label: resource.name, + }))); + +const createGroups = (values, providerId) => + API.post(`/api/providers/${providerId}/security_groups`, { + action: 'create', + resource: { ...values }, + }); + +class CreateAmazonSecurityGroupForm extends React.Component { + constructor(props) { + super(props); + this.state = { + values: {}, + }; + this.handleFormStateUpdate = this.handleFormStateUpdate.bind(this); + } + + componentDidMount() { + this.props.dispatch({ + type: 'FormButtons.init', + payload: { + newRecord: true, + pristine: true, + addClicked: () => { + createGroups(this.state.values, ManageIQ.record.recordId); + }, + }, + }); + } + + handleFormStateUpdate(formState) { + this.props.dispatch({ + type: 'FormButtons.saveable', + payload: formState.valid, + }); + this.props.dispatch({ + type: 'FormButtons.pristine', + payload: formState.pristine, + }); + this.setState({ values: formState.values }); + } + + render() { + return ( + createGroups(values, ManageIQ.record.recordId)} + onCancel={() => console.log('Cancel clicked')} + loadData={getData} + updateFormState={this.handleFormStateUpdate} + hideControls + /> + ); + } +} + +CreateAmazonSecurityGroupForm.propTypes = { + dispatch: PropTypes.func.isRequired, +}; + +export default connect()(CreateAmazonSecurityGroupForm); \ No newline at end of file diff --git a/app/javascript/packs/component-definitions-common.js b/app/javascript/packs/component-definitions-common.js new file mode 100644 index 000000000..542d2e63e --- /dev/null +++ b/app/javascript/packs/component-definitions-common.js @@ -0,0 +1,4 @@ +import CreateAmazonSecurityGroupForm from '../components/create-amazon-security-group-form'; +import '@manageiq/react-ui-components/dist/amazon-security-form-group.css'; + +ManageIQ.component.addReact('CreateAmazonSecurityGroupForm', CreateAmazonSecurityGroupForm); diff --git a/package.json b/package.json new file mode 100644 index 000000000..05fabade7 --- /dev/null +++ b/package.json @@ -0,0 +1,41 @@ +{ + "name": "manageiq-providers-amazon", + "version": "1.0.0", + "description": "ManageIQ Cloud Management Platform", + "main": "index.js", + "repository": { + "type": "git", + "url": "git+https://github.com/ManageIQ/manageiq.git" + }, + "author": "ManageIQ", + "license": "Apache-2.0", + "bugs": { + "url": "https://github.com/ManageIQ/manageiq/issues" + }, + "homepage": "https://github.com/ManageIQ/manageiq#readme", + "dependencies": { + "@manageiq/react-ui-components": "~0.9.5", + "prop-types": "^15.6.0", + "react": "^16.3.1", + "react-dom": "^16.3.1", + "react-redux": "^5.0.7", + "redux": "^4.0.0" + }, + "devDependencies": { + "babel-plugin-add-module-exports": "^0.2.1", + "babel-plugin-syntax-dynamic-import": "^6.18.0", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-export-extensions": "^6.22.0", + "babel-plugin-transform-object-assign": "^6.8.0", + "babel-plugin-transform-object-rest-spread": "^6.26.0", + "babel-preset-env": "^1.6.0", + "babel-preset-es2015": "^6.24.1", + "babel-preset-react": "^6.24.1", + "babel-preset-stage-1": "^6.24.1" + }, + "engines": { + "node": ">= 6.9.1", + "npm": ">= 3.10.3", + "yarn": ">= 0.20.1" + } +}