This is an automated email from the ASF dual-hosted git repository.
dahn pushed a commit to branch 4.19
in repository https://gitbox.apache.org/repos/asf/cloudstack-documentation.git
The following commit(s) were added to refs/heads/4.19 by this push:
new 02e9228 cleanup under developer guide (#404)
02e9228 is described below
commit 02e9228ebdee78e2a887d0d6dbc1ee85ae509ab1
Author: Rohit Yadav <[email protected]>
AuthorDate: Tue Jun 11 15:02:10 2024 +0530
cleanup under developer guide (#404)
Signed-off-by: Rohit Yadav <[email protected]>
Co-authored-by: Suresh Kumar Anaparti <[email protected]>
---
source/_static/images/plugin1.jpg | Bin 32999 -> 0 bytes
source/_static/images/plugin2.jpg | Bin 35149 -> 0 bytes
source/_static/images/plugin3.jpg | Bin 41983 -> 0 bytes
source/_static/images/plugin4.png | Bin 6015 -> 0 bytes
source/_static/images/plugin_intro.png | Bin 1496 -> 0 bytes
source/developersguide/developer_guide.rst | 237 +++++-------------
source/developersguide/get_help.rst | 15 +-
source/developersguide/plugins.rst | 382 -----------------------------
8 files changed, 71 insertions(+), 563 deletions(-)
diff --git a/source/_static/images/plugin1.jpg
b/source/_static/images/plugin1.jpg
deleted file mode 100644
index 970233d..0000000
Binary files a/source/_static/images/plugin1.jpg and /dev/null differ
diff --git a/source/_static/images/plugin2.jpg
b/source/_static/images/plugin2.jpg
deleted file mode 100644
index 9c8a610..0000000
Binary files a/source/_static/images/plugin2.jpg and /dev/null differ
diff --git a/source/_static/images/plugin3.jpg
b/source/_static/images/plugin3.jpg
deleted file mode 100644
index 07fae79..0000000
Binary files a/source/_static/images/plugin3.jpg and /dev/null differ
diff --git a/source/_static/images/plugin4.png
b/source/_static/images/plugin4.png
deleted file mode 100644
index 8cf28be..0000000
Binary files a/source/_static/images/plugin4.png and /dev/null differ
diff --git a/source/_static/images/plugin_intro.png
b/source/_static/images/plugin_intro.png
deleted file mode 100644
index f166e3b..0000000
Binary files a/source/_static/images/plugin_intro.png and /dev/null differ
diff --git a/source/developersguide/developer_guide.rst
b/source/developersguide/developer_guide.rst
index 7e61f04..262d069 100644
--- a/source/developersguide/developer_guide.rst
+++ b/source/developersguide/developer_guide.rst
@@ -18,26 +18,27 @@ CloudStack Installation from GIT repo for Developers
====================================================
This guide is aimed at CloudStack developers who need to build the code.
-These instructions are valid on a Ubuntu 18.04 and CentOS 7 systems
-and were tested with the 4.11 release of Apache CloudStack. Please
-adapt them if you are on a different operating system or using a newer/older
-version of CloudStack. This book is composed of the following sections:
+These instructions are valid on a Ubuntu 22.04 and 24.04 systems
+and were tested with the 4.19 release of Apache CloudStack. Community
maintained
+CloudStack self-learning course is also available at `CloudStack HackerBook
+<https://github.com/shapeblue/hackerbook/tree/main>`__.
+
+Please adapt them if you are on a different operating system or using a
+newer/older version of CloudStack. This book is composed of the following
+sections:
#. Installation of the prerequisites
#. Compiling and installation from source
-#. Using the CloudStack simulator
+#. Using the CloudStack Simulator
-#. Installation with DevCloud the CloudStack sandbox
+#. Using Appliance for development
#. Building your own packages
#. The CloudStack API
-#. Testing the AWS API interface
-
-
Prerequisites
-------------
@@ -49,27 +50,22 @@ installed:
* jdk 11+ (openjdk-11-jdk)
* maven 3+
* git
-* python-pip
-* python-setuptools
+* python3-pip
+* python3-setuptools
* mkisofs
-* A MySql Server
+* MySql 8x Server
-Example Ubuntu 18.04
-~~~~~~~~~~~~~~~~~~~~
+Example Ubuntu
+~~~~~~~~~~~~~~
::
- apt update
- apt install openjdk-11-jdk-headless maven git python-pip mkisofs git
mysql-server
+ sudo apt update
+ sudo apt install git openssh-client openjdk-11-jdk maven mysql-client
mysql-server nfs-kernel-server quota genisoimage python3 python3-pip
-Example CentOS 7
-~~~~~~~~~~~~~~~~
-
-::
-
- yum install -y epel-release
- yum localinstall -y
http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm
- yum install -y java-1.11.0-openjdk-devel maven python-setuptools python-pip
genisoimage git mysql-community-server
+Note: ensure to install python 3.8/3.9/3.10, as required you can install
+specific Python3 versions using pyenv. Similarly, Java versions can be
installed
+and managed using jenv.
Installing CloudStack from Source
----------------------------------
@@ -86,7 +82,14 @@ To build a stable release, checkout the branch for that
version:
::
- git checkout 4.11.2
+ git checkout 4.19
+
+Optional, you can install noredist/nonoss dependencies:
+
+::
+
+ git clone https://github.com/shapeblue/cloudstack-nonoss
+ cd cloudstack-nonoss && bash -x install-non-oss.sh
To compile Apache CloudStack, go to the cloudstack source folder and
run:
@@ -96,7 +99,8 @@ run:
mvn -Pdeveloper,systemvm clean install
If you want to skip the tests add ``-DskipTests`` to the command above.
-Do NOT use ``-Dmaven.test.skip=true`` because that will break the build.
+Do NOT use ``-Dmaven.test.skip=true`` because that will break the build. To
+build noredist/nonoss add ``-Dnoredist`` flag to the command.
If you have set a root mysql password, you will need to adjust the password in
``utils/conf/db.properties``
@@ -113,13 +117,24 @@ Run Apache CloudStack with jetty for testing
mvn -pl :cloud-client-ui jetty:run
+To build and run the UI, do this:
+
+::
+
+ curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
+ sudo apt install nodejs
+ cd cloudstack/ui
+ npm install
+ npm run serve
+
Log Into Apache CloudStack:
Open your Web browser and use this URL to connect to CloudStack:
::
- http://localhost:8080/client/
+ http://localhost:5050 # this runs the UI
+ http://localhost:8080/client/ # this is the API backend
Replace ``localhost`` with the IP of your management server if need be.
@@ -168,122 +183,38 @@ Start jetty with the simulator enabled
::
- mvn -Dsimulator -Dorg.eclipse.jetty.annotations.maxWait=120 -pl
:cloud-client-ui jetty:run
+ mvn -Dsimulator -pl :cloud-client-ui jetty:run
Setup a basic or advanced zone with Marvin. In a separate shell://
::
- python tools/marvin/marvin/deployDataCenter.py -i setup/dev/basic.cfg
+ python3 tools/marvin/marvin/deployDataCenter.py -i setup/dev/basic.cfg
OR
- python tools/marvin/marvin/deployDataCenter.py -i setup/dev/advanced.cfg
+ python3 tools/marvin/marvin/deployDataCenter.py -i setup/dev/advanced.cfg
-At this stage log in the CloudStack management server at
-http://localhost:8080/client with the credentials admin/password, you
-should see a fully configured zone infrastructure.
+At this stage log in the CloudStack management server UI at
+http://localhost:5050 or using CLI with the API endpoint at
+http://localhost:8080/client with the credentials admin/password, you should
see
+a fully configured zone infrastructure.
You can now run integration tests, use the API etc.
-Building non-free Packages
---------------------------
-
-Certain CloudStack packages are not built by default because they depend on
-libraries without redistribution rights. To build these, you need to install
-the dependencies manually.
-
-::
-
- git clone https://github.com/rhtyd/cloudstack-nonoss
- cd cloudstack-nonoss
- ./install-non-oss.sh
-
-You can then build and run CloudStack as normal by adding the `-Dnodist` flag
-to build and run lines, e.g.
-
-::
-
- mvn -Dsimulator -Dnoredist -Dorg.eclipse.jetty.annotations.maxWait=120 -pl
:cloud-client-ui jetty:run
-
-Using DevCloud
---------------
+Using Appliance for development
+-------------------------------
The Installing from source section will only get you to the point of
runnign the management server, it does not get you any hypervisors. The
-simulator section gets you a simulated datacenter for testing. With
-DevCloud you can run at least one hypervisor and add it to your
-management server the way you would a real physical machine.
-
-`DevCloud <https://cwiki.apache.org/confluence/display/CLOUDSTACK/DevCloud>`__
-is the CloudStack sandbox, the standard version is a VirtualBox based
-image. There is also a KVM based image for it. Here we only show steps
-with the VirtualBox image. For KVM see the
-`wiki <https://cwiki.apache.org/confluence/display/CLOUDSTACK/devcloud-kvm>`__.
-
-\*\* DevCloud Pre-requisites
-
-#. Install `VirtualBox <http://www.virtualbox.org>`__ on your machine
-
-#. Run VirtualBox and under >Preferences create a *host-only interface*
- on which you disable the DHCP server
+simulator section gets you a simulated datacenter for testing. An appliance
+based development such as using ``mbx`` can allow you to run at least one
+hypervisor and add it to your management server the way you would a real
physical machine.
-#. Download the DevCloud `image
- <http://people.apache.org/~bhaisaab/cloudstack/devcloud/devcloud2.ova>`__
-
-#. In VirtualBox, under File > Import Appliance import the DevCloud
- image.
-
-#. Verify the settings under > Settings and check the ``enable PAE``
- option in the processor menu
-
-#. Once the Instance has booted try to ``ssh`` to it with credentials:
- ``root/password``
-
- ssh [email protected]
-
-
-Adding DevCloud as an Hypervisor
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-Picking up from a clean build:
-
-::
-
- mvn -Pdeveloper,systemvm clean install
- mvn -P developer -pl developer,tools/devcloud -Ddeploydb
-
-At this stage install marvin similarly than with the simulator:
-
-::
-
- pip install tools/marvin/dist/Marvin-|release|.tar.gz
-
-Start the management server
-
-::
-
- mvn -pl client jetty:run
-
-Then you are going to configure CloudStack to use the running DevCloud
-Instance:
-
-::
-
- cd tools/devcloud
- python ../marvin/marvin/deployDataCenter.py -i devcloud.cfg
-
-If you are curious, check the ``devcloud.cfg`` file and see how the data
-center is defined: 1 Zone, 1 Pod, 1 Cluster, 1 Host, 1 primary Storage,
-1 Seondary Storage, all provided by Devcloud.
-
-You can now log in the management server at
-``http://localhost:8080/client`` and start experimenting with the UI or
-the API.
-
-Do note that the management server is running in your local machine and
-that DevCloud is used only as a n Hypervisor. You could potentially run
-the management server within DevCloud as well, or memory granted, run
-multiple DevClouds.
+MonkeyBox or `mbx <https://github.com/shapeblue/mbx>`__
+enable VM/appliance-based CloudStack development. It is tested with Ubuntu and
+uses KVM and prebuilt images to deploy QA and dev environments for anybody to
+try out CloudStack with a range of hypervisors, local and NFS storage.
+Please refer to the project for more details: https://github.com/shapeblue/mbx
Building Packages
-----------------
@@ -320,7 +251,6 @@ One directory up from the CloudStack root dir you will find:
cloudstack_|release|.dsc
cloudstack_|release|.tar.gz
cloudstack-agent_|release|_all.deb
- cloudstack-awsapi_|release|_all.deb
cloudstack-cli_|release|_all.deb
cloudstack-common_|release|_all.deb
cloudstack-docs_|release|_all.deb
@@ -487,53 +417,6 @@ is a sub-project of Apache CloudStack and gives
operators/developers the
ability to use any of the API methods. It has nice auto-completion and
help feature as well as an API discovery mechanism since 4.2.
-
-Testing the AWS API interface
------------------------------
-
-While the native CloudStack API is not a standard, CloudStack provides a
-AWS EC2 compatible interface. It has the great advantage that existing
-tools written with EC2 libraries can be re-used against a CloudStack
-based cloud. In the installation books we described how to run this
-interface from installing packages. In this section we show you how to
-compile the interface with ``maven`` and test it with Python boto
-module.
-
-Starting from a running management server (with DevCloud for Instance),
-start the AWS API interface in a separate shell with:
-
-::
-
- mvn -Pawsapi -pl :cloud-awsapi jetty:run
-
-Log into the CloudStack UI ``http://localhost:8080/client``, go to
-*Service Offerings* and edit one of the compute offerings to have the
-name ``m1.small`` or any of the other AWS EC2 Instance types.
-
-With access and secret keys generated for a user you should now be able
-to use Python `Boto <http://docs.pythonboto.org/en/latest/>`__ module:
-
-::
-
- import boto
- import boto.ec2
-
-
accesskey="2IUSA5xylbsPSnBQFoWXKg3RvjHgsufcKhC1SeiCbeEc0obKwUlwJamB_gFmMJkFHYHTIafpUx0pHcfLvt-dzw"
-
secretkey="oxV5Dhhk5ufNowey7OVHgWxCBVS4deTl9qL0EqMthfPBuy3ScHPo2fifDxw1aXeL5cyH10hnLOKjyKphcXGeDA"
-
- region = boto.ec2.regioninfo.RegionInfo(name="ROOT", endpoint="localhost")
- conn = boto.connect_ec2(aws_access_key_id=accesskey,
aws_secret_access_key=secretkey, is_secure=False, region=region, port=7080,
path="/awsapi", api_version="2012-08-15")
-
- images=conn.get_all_images()
- print images
-
- res = images[0].run(instance_type='m1.small',security_groups=['default'])
-
-Note the new ``api_version`` number in the connection object and also
-note that there was no user registration to make like in previous
-CloudStack releases.
-
-
Conclusions
-----------
@@ -548,4 +431,4 @@ be. As a quick start, you might want to consider KVM+NFS
and a Basic
Zone.
If you've run into any problems with this, please ask on the
-cloudstack-dev `mailing list
<http://cloudstack.apache.org/mailing-lists.html>`__.
+cloudstack-dev `mailing list
<https://cloudstack.apache.org/mailing-lists.html>`__.
diff --git a/source/developersguide/get_help.rst
b/source/developersguide/get_help.rst
index 18466cb..9f4670f 100644
--- a/source/developersguide/get_help.rst
+++ b/source/developersguide/get_help.rst
@@ -27,6 +27,9 @@ Need some help getting started? Feel free to ask on the
`mailing list
discussions about development and the project itself happen. This is a high
volume list.
+Github users can also start discussion at
+https://github.com/apache/cloudstack/discussions
+
Documentation Available
-----------------------
@@ -49,11 +52,15 @@ Books
|60recipe| |acs-packt| |jp1| |jp2|
-Commercial support
-------------------
+Support
+-------
+
+For community support you may ask on the project's users mailing list or via
+Github discussions.
Some companies offer commercial support for Apache CloudStack or their own
-product based on CloudStack.
+product based on CloudStack. You may ask on the list or `search yourself
+<https://www.google.com/search?q=cloudstack+support>`__.
.. |60recipe| image:: /_static/images/60recipe.gif
@@ -67,4 +74,4 @@ product based on CloudStack.
:target:
http://www.amazon.co.jp/gp/product/4798130583/ref=as_li_ss_tl?ie=UTF8&camp=247&creative=7399&creativeASIN=4798130583&linkCode=as2&tag=aaaaaaaeaeaea-22
.. |jp2| image:: /_static/images/jp2.jpg
:alt: CloudStack実践ガイド[前編]
- :target:
http://www.amazon.co.jp/CloudStack%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-%E5%89%8D%E7%B7%A8-NextPublishing-%E5%A4%A7%E5%89%8A-%E7%B7%91/dp/4844395920/ref=pd_bxgy_b_img_y
\ No newline at end of file
+ :target:
http://www.amazon.co.jp/CloudStack%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-%E5%89%8D%E7%B7%A8-NextPublishing-%E5%A4%A7%E5%89%8A-%E7%B7%91/dp/4844395920/ref=pd_bxgy_b_img_y
diff --git a/source/developersguide/plugins.rst
b/source/developersguide/plugins.rst
index 3864d99..ddb0481 100644
--- a/source/developersguide/plugins.rst
+++ b/source/developersguide/plugins.rst
@@ -339,385 +339,3 @@
http://docs.aws.amazon.com/AWSJavaSDK/latest/javadoc/com/amazonaws/services/s3/m
| | Schedules a new transfer to upload data to Amazon S3. |
+------------------+---------------------------------------------------------+
-
-Third Party UI Plugins
-----------------------
-
-Using the new third-party plugin framework, you can write and install
-extensions to CloudStack. The installed and enabled plugins will appear in
-the UI alongside the other features. The code for the plugin is simply
-placed in a special directory within CloudStack’s installed code at any
-time after CloudStack installation. The new plugin appears only when it is
-enabled by the cloud administrator.
-
-.. figure:: /_static/images/plugin_intro.png
- :align: center
- :alt: New plugin button in CloudStack navbar
-
-The left navigation bar of the CloudStack UI has a new Plugins button to
-help you work with UI plugins.
-
-
-How to Write a Plugin: Overview
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-The basic procedure for writing a plugin is:
-
-#. Write the code and create the other files needed. You will need the
- plugin code itself (in Javascript), a thumbnail image, the plugin
- listing, and a CSS file.
-
- .. figure:: /_static/images/plugin1.jpg
- :align: center
- :alt: Write the plugin code
-
- All UI plugins have the following set of files:
-
- ::
-
- +-- cloudstack/
- +-- ui/
- +-- plugins/
- +-- csMyFirstPlugin/
- +-- config.js --> Plugin metadata (title, author,
vendor URL, etc.)
- +-- icon.png --> Icon, shown on side nav bar and
plugin listing
- (should be square, and ~50x50px)
- +-- csMyFirstPlugin.css --> CSS file, loaded automatically when
plugin loads
- +-- csMyFirstPlugin.js --> Main JS file, containing plugin code
-
-
- The same files must also be present at
- `/tomcat/webapps/client/plugins`.
-
-#. The CloudStack administrator adds the folder containing your plugin code
- under the CloudStack PLUGINS folder.
-
- .. figure:: /_static/images/plugin2.jpg
- :align: center
- :alt: The plugin code is placed in the PLUGINS folder
-
-#. The administrator also adds the name of your plugin to the plugin.js
- file in the PLUGINS folder.
-
- .. figure:: /_static/images/plugin3.jpg
- :align: center
- :alt: The plugin name is added to `plugin.js` in the PLUGINS folder
-
-#. The next time the user refreshes the UI in the browser, your plugin
- will appear in the left navigation bar.
-
- .. figure:: /_static/images/plugin4.png
- :align: center
- :alt: The plugin appears in the UI
-
-
-How to Write a Plugin: Implementation Details
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-This section requires an understanding of JavaScript and the CloudStack
-API. You don't need knowledge of specific frameworks for this tutorial
-(jQuery, etc.), since the CloudStack UI handles the front-end rendering for
-you.
-
-There is much more to the CloudStack UI framework than can be described
-here. The UI is very flexible to handle many use cases, so there are
-countless options and variations. The best reference right now is to
-read the existing code for the main UI, which is in the /ui folder.
-Plugins are written in a very similar way to the main UI.
-
-#. **Create the directory to hold your plugin.**
-
- All plugins are composed of set of required files in the directory
- /ui/plugins/pluginID, where pluginID is a short name for your
- plugin. It's recommended that you prefix your folder name (for
- example, bfMyPlugin) to avoid naming conflicts with other people's
- plugins.
-
- In this example, the plugin is named csMyFirstPlugin.
-
- ::
-
- $ cd cloudstack/ui/plugins
- $ mkdir csMyFirstPlugin
- $ ls -l
-
- total 8
- drwxr-xr-x 2 bgregory staff 68 Feb 11 14:44 csMyFirstPlugin
- -rw-r--r-- 1 bgregory staff 101 Feb 11 14:26 plugins.js
-
-#. **Change to your new plugin directory.**
-
- ::
-
- $ cd csMyFirstPlugin
-
-#. **Set up the listing.**
-
- Add the file `config.js`, using your favorite editor.
-
- ::
-
- $ vi config.js
-
- Add the following content to config.js. This information will be
- displayed on the plugin listing page in the UI:
-
- ::
-
- (function (cloudStack) {
- cloudStack.plugins.csMyFirstPlugin.config = {
- title: 'My first plugin',
- desc: 'Tutorial plugin',
- externalLink: 'http://www.cloudstack.org/',
- authorName: 'Test Plugin Developer',
- authorEmail: '[email protected]'
- };
- }(cloudStack));
-
-
-#. **Add a new main section.**
-
- Add the file csMyFirstPlugin.js, using your favorite editor.
-
- ::
-
- $ vi csMyFirstPlugin.js
-
- Add the following content to csMyFirstPlugin.js:
-
- ::
-
- (function (cloudStack) {
- cloudStack.plugins.csMyFirstPlugin = function(plugin) {
- plugin.ui.addSection({
- id: 'csMyFirstPlugin',
- title: 'My Plugin',
- preFilter: function(args) {
- return isAdmin();
- },
- show: function() {
- return $('<div>').html('Content will go here');
- }
- });
- };
- }(cloudStack));
-
-
-#. **Register the plugin.**
-
- You now have the minimal content needed to run the plugin, so you
- can activate the plugin in the UI by adding it to plugins.js. First,
- edit the file:
-
- ::
-
- $ cd cloudstack/ui/plugins
- $ vi plugins.js
-
-
- Now add the following to plugins.js:
-
- ::
-
- (function($, cloudStack) {
- cloudStack.plugins = [
- 'csMyFirstPlugin'
- ];
- }(jQuery, cloudStack));
-
-
-#. **Check the plugin in the UI.**
-
- First, copy all the plugin code that you have created so far to
- `/tomcat/webapps/client/plugins`. Then refresh the browser and click
- Plugins in the side navigation bar. You should see your new plugin.
-
-#. **Make the plugin do something.**
-
- Right now, you just have placeholder content in the new plugin. It's
- time to add real code. In this example, you will write a basic list
- view, which renders data from an API call. You will list all virtual
- machines owned by the logged-in user. To do this, replace the 'show'
- function in the plugin code with a 'listView' block, containing the
- required syntax for a list view. To get the data, use the
- listVirtualMachines API call. Without any parameters, it will return
- Instances only for your active user. Use the provided 'apiCall' helper
- method to handle the server call. Of course, you are free to use any
- other method for making the AJAX call (for example, jQuery's $.ajax
- method).
-
- First, open your plugin's JavaScript source file in your favorite
- editor:
-
- ::
-
- $ cd csMyFirstPlugin
- $ vi csMyFirstPlugin.js
-
-
- Add the following code in csMyFirstPlugin.js:
-
- ::
-
- (function (cloudStack) {
- cloudStack.plugins.csMyFirstPlugin = function(plugin) {
- plugin.ui.addSection({
- id: 'csMyFirstPlugin',
- title: 'My Plugin',
- preFilter: function(args) {
- return isAdmin();
- },
-
- // Render page as a list view
- listView: {
- id: 'testPluginInstances',
- fields: {
- name: { label: 'label.name' },
- instancename: { label: 'label.internal.name' },
- displayname: { label: 'label.display.name' },
- zonename: { label: 'label.zone.name' }
- },
- dataProvider: function(args) {
- // API calls go here, to retrive the data asynchronously
- //
- // On successful retrieval, call
- // args.response.success({ data: [data array] });
- plugin.ui.apiCall('listVirtualMachines', {
- success: function(json) {
- var vms = json.listvirtualmachinesresponse.virtualmachine;
-
- args.response.success({ data: vms });
- },
- error: function(errorMessage) {
- args.response.error(errorMessage)
- }
- });
- }
- }
- });
- };
- }(cloudStack));
-
-
-#. **Test the plugin.**
-
- First, copy all the plugin code that you have created so far to
- `/tomcat/webapps/client/plugins`. Then refresh the browser. You can
- see that your placeholder content was replaced with a list table,
- containing 4 columns of Instance data.
-
-#. **Add an action button.**
-
- Let's add an action button to the list view, which will reboot the
- Instance. To do this, add an actions block under listView. After
- specifying the correct format, the actions will appear automatically
- to the right of each row of data.
-
- ::
-
- $ vi csMyFirstPlugin.js
-
-
- Now add the following new code in csMyFirstPlugin.js. (The dots ...
- show where we have omitted some existing code for the sake of space.
- Don't actually cut and paste that part):
-
- ::
-
- ...
- listView: {
- id: 'testPluginInstances',
- ...
-
- actions: {
- // The key/ID you specify here will determine what icon is
- // shown in the UI for this action,
- // and will be added as a CSS class to the action's element
- // (i.e., '.action.restart')
- //
- // -- here, 'restart' is a predefined name in CloudStack that will
- // automatically show a 'reboot' arrow as an icon;
- // this can be changed in csMyFirstPlugin.css
- restart: {
- label: 'Restart VM',
- messages: {
- confirm: function() { return 'Are you sure you want to
restart this VM?' },
- notification: function() { return 'Rebooted VM' }
- },
- action: function(args) {
- // Get the instance object of the selected row from context
- //
- // -- all currently loaded state is stored in 'context' as
objects,
- // such as the selected list view row,
- // the selected section, and active user
- //
- // -- for list view actions, the object's key will be the
same as
- // listView.id, specified above;
- // always make sure you specify an 'id' for the listView,
- // or else it will be 'undefined!'
- var instance = args.context.testPluginInstances[0];
-
- plugin.ui.apiCall('rebootVirtualMachine', {
- // These will be appended to the API request
- //
- // i.e., rebootVirtualMachine&id=...
- data: {
- id: instance.id
- },
- success: function(json) {
- args.response.success({
- // This is an async job, so success here only indicates
- // that the job was initiated.
- //
- // To pass the job ID to the notification UI
- // (for checking to see when action is completed),
- // '_custom: { jobID: ... }' needs to always be passed
on success,
- // in the same format as below
- _custom: { jobId:
json.rebootvirtualmachineresponse.jobid }
- });
- },
-
-
- error: function(errorMessage) {
- args.response.error(errorMessage); // Cancel action, show
error message returned
- }
- });
- },
-
- // Because rebootVirtualMachine is an async job, we need to add
- // a poll function, which will perodically check
- // the management server to see if the job is ready
- // (via pollAsyncJobResult API call)
- //
- // The plugin API provides a helper function,
'plugin.ui.pollAsyncJob',
- / which will work for most jobs
- // in CloudStack
- notification: {
- poll: plugin.ui.pollAsyncJob
- }
- }
- },
-
- dataProvider: function(args) {
- ...
- ...
-
-
-#. **Add the thumbnail icon.**
-
- Create an icon file; it should be square, about 50x50 pixels, and
- named `icon.png`. Copy it into the same directory with your plugin
- code: `cloudstack/ui/plugins/csMyFirstPlugin/icon.png`.
-
-#. **Add the stylesheet.**
-
- Create a CSS file, with the same name as your `.js` file. Copy it into
- the same directory with your plugin code:
- `cloudstack/ui/plugins/csMyFirstPlugin/csMyFirstPlugin.css`.
-
-
-.. | plugin_intro.png: New plugin button in CloudStack navbar | image::
_static/images/plugin_intro.png
-.. | plugin1.jpg: Write the plugin code | image:: _static/images/plugin1.jpg
-.. | plugin2.jpg: The plugin code is placed in the PLUGINS folder | image::
_static/images/plugin2.jpg
-.. | plugin3.jpg: The plugin name is added to plugin.js in the PLUGINS folder
| image:: _static/images/plugin3.jpg
-.. | plugin4.png: The plugin appears in the UI | image::
_static/images/plugin4.png
