[WIP] Toolbar and dialog demo

.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"]
+    }
+  }
+}

.gitignore

@@ -14,3 +14,6 @@
 /config/environments/*.local.yml
 
 /spec/manageiq
+
+node_modules/
+yarn.lock

.npmrc

@@ -0,0 +1,2 @@
+# using yarn
+package-lock = false

.postcssrc.yml

@@ -0,0 +1,4 @@
+plugins:
+  postcss-smart-import: {}
+  precss: {}
+  autoprefixer: {}

app/helpers/manageiq/providers/amazon/toolbar_overrides/ems_cloud_center.rb

@@ -0,0 +1,51 @@
+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'}.to_json},
+              :klass => ApplicationHelper::Button::ButtonWithoutRbacCheck),
+            button(
+              :magic_api,
+              'fa fa-magic fa-lg',
+              t = N_('API call'),
+              t,
+              :data  => {'function'      => 'sendDataWithRx',
+                         'function-data' => {:controller      => 'provider_dialogs', # this one is required
+                                             :button          => :magic_api,
+                                             :success_message => N_('API succesfully called'),
+                                             :entity_name     => 'provider',
+                                             :action_name     => 'foobar'}.to_json},
+              :klass => ApplicationHelper::Button::ButtonWithoutRbacCheck),
+            button(
+              :magic_player,
+              'fa fa-magic fa-lg',
+              t = N_('Magic player'),
+              t,
+              :data  => {'function'      => 'sendDataWithRx',
+                         'function-data' => {:controller  => 'provider_dialogs', # this one is required
+                                             :button      => :magic_player,
+                                             :dialog_name => 'test',
+                                             :dialog_title => N_('Magic Provider Dialog'),
+                                             :class       => 'ManageIQ::Providers::Amazon',
+                                             :entity_name => 'ems_cloud',
+                                             :action_name => 'more_foobar',
+                                             :success_message => N_('Magic just happened !'),
+                        }.to_json},
+              :klass => ApplicationHelper::Button::ButtonWithoutRbacCheck),
+          ])
+        end
+      end
+    end
+  end
+end

app/helpers/manageiq/providers/amazon/toolbar_overrides/ems_network_center.rb

@@ -0,0 +1,23 @@
+module ManageIQ
+  module Providers
+    module Amazon
+      module ToolbarOverrides
+        class EmsNetworkCenter < ::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'}.to_json},
+              :klass => ApplicationHelper::Button::ButtonWithoutRbacCheck)
+          ])
+        end
+      end
+    end
+  end
+end

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

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 (
+      <AmazonSecurityGroupForm
+        onSave={values => 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);

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);

app/models/manageiq/providers/amazon/cloud_manager.rb

@@ -71,6 +71,18 @@ class ManageIQ::Providers::Amazon::CloudManager < ManageIQ::Providers::CloudMana
   supports :provisioning
   supports :regions
 
+  def ansible_env_vars
+    {
+      'EC2_ACCESS_KEY' => default_authentication.userid,
+      'EC2_SECRET_KEY' => default_authentication.password,
+      'EC2_REGION'     => provider_region,
+    }
+  end
+
+  def ansible_root
+    ManageIQ::Providers::Amazon::Engine.root.join("content_tmp/ansible")
+  end
+
   def ensure_managers
     build_network_manager unless network_manager
     network_manager.name = "#{name} Network Manager"

app/models/manageiq/providers/amazon/cloud_manager/vm/operations/power.rb

@@ -9,13 +9,19 @@ def validate_pause
   end
 
   def raw_start
-    with_provider_object(&:start)
+    Ansible::Runner.run(ext_management_system.ansible_env_vars,
+                        {:instance_ids => ems_ref},
+                        ext_management_system.ansible_root.join("start_vm.yml"))
+
     # Temporarily update state for quick UI response until refresh comes along
     self.update_attributes!(:raw_power_state => "powering_up")
   end
 
   def raw_stop
-    with_provider_object(&:stop)
+    Ansible::Runner.run(ext_management_system.ansible_env_vars,
+                        {:instance_ids => ems_ref},
+                        ext_management_system.ansible_root.join("stop_vm.yml"))
+
     # Temporarily update state for quick UI response until refresh comes along
     self.update_attributes!(:raw_power_state => "shutting_down")
   end

app/models/manageiq/providers/amazon/network_manager.rb

@@ -36,6 +36,8 @@ class ManageIQ::Providers::Amazon::NetworkManager < ManageIQ::Providers::Network
 
   supports_not :ems_network_new
 
+  supports :create_security_group
+
   def self.ems_type
     @ems_type ||= "ec2_network".freeze
   end
@@ -59,4 +61,8 @@ def self.default_blacklisted_event_names
   def self.display_name(number = 1)
     n_('Network Provider (Amazon)', 'Network Providers (Amazon)', number)
   end
+
+  def create_security_group(options)
+    SecurityGroup.raw_create_security_group(self, options)
+  end
 end

app/models/manageiq/providers/amazon/network_manager/security_group.rb

@@ -1,5 +1,22 @@
 class ManageIQ::Providers::Amazon::NetworkManager::SecurityGroup < ::SecurityGroup
+  supports :create
+
   def self.display_name(number = 1)
     n_('Security Group (Amazon)', 'Security Groups (Amazon)', number)
   end
+
+  def self.raw_create_security_group(ext_management_system, options)
+    Ansible::Runner.run(ext_management_system.parent_manager.ansible_env_vars,
+                        {
+                          :vpc_id                      => options["vpc_id"],
+                          :security_group_name         => options["security_group_name"],
+                          :security_group_description  => options["security_group_description"],
+                          :security_group_rules        => options["security_group_rules"],
+                          :security_group_rules_egress => options["security_group_rules_egress"],
+                        },
+                        ext_management_system.parent_manager.ansible_root.join("create_security_group.yml"))
+  rescue => e
+    _log.error("security_group=[#{options[:name]}], error: #{e}")
+    raise MiqException::MiqSecurityGroupCreateError, e.message, e.backtrace
+  end
 end

content_tmp/ansible/create_security_group.yml

@@ -0,0 +1,7 @@
+---
+- name: Create a security group
+  hosts: localhost
+  connection: local
+  gather_facts: False
+  roles:
+    - create_security_group

content_tmp/ansible/roles/change_vm_state/README.md

@@ -0,0 +1,45 @@
+Changing EC2 VM state
+=========
+
+Role for changing EC2 VM state
+
+Requirements
+------------
+
+Uses https://docs.ansible.com/ansible/latest/modules/ec2_module.html
+
+ - python >= 2.6
+ - boto
+
+Role Variables
+--------------
+
+    # Required VM state, allowed: [absent, running, restarted, stopped]
+    vm_state: 
+    # List of instance ids or one id
+    instance_ids: 
+
+Dependencies
+------------
+
+None
+
+Example Playbook
+----------------
+
+    - name: Start VM
+      hosts: localhost
+      connection: local
+      gather_facts: False
+      vars:
+        vm_state: running
+        instance_ids: 
+          - id1
+          - id2
+      roles:
+        - change_vm_state
+
+License
+-------
+
+Apache

content_tmp/ansible/roles/change_vm_state/defaults/main.yml

@@ -0,0 +1,2 @@
+---
+# defaults file for change_vm_state

content_tmp/ansible/roles/change_vm_state/handlers/main.yml

@@ -0,0 +1,2 @@
+---
+# handlers file for change_vm_state