Merge branch 'ui-plugins'

client/WEB-INF/classes/resources/messages.properties

@@ -17,6 +17,11 @@
 
 
 #new labels (begin) **********************************************************************************************
+label.plugins=Plugins
+label.plugin.details=Plugin details
+label.author.name=Author name
+label.author.email=Author e-mail
+label.external.link=External link
 label.egress.rules=Egress rules
 message.acquire.new.ip.vpc=Please confirm that you would like to acquire a new IP for this VPC.
 label.zoneWizard.trafficType.management=Management: Traffic between CloudStack\'s internal resources, including any components that communicate with the Management Server, such as hosts and CloudStack system VMs

ui/css/cloudstack3.css

@@ -2336,6 +2336,28 @@ div.detail-group.actions td {
   top: 18px;
 }
 
+#navigation ul li.custom-icon span.icon {
+  display: block;
+  width: 50px;
+  height: 50px;
+  position: relative;
+  float: left;
+  margin-right: -47px;
+  background: none;
+}
+
+#navigation ul li.custom-icon span.icon img {
+  width: 50px;
+  height: 50px;
+  float: left;
+  /*+placement:shift -6px -17px;*/
+  position: relative;
+  left: -6px;
+  top: -17px;
+  position: absolute;
+  margin-right: -14px;
+}
+
 #navigation ul li.last.active,
 #navigation ul li.last:hover {
   height: 52px;
@@ -2392,6 +2414,10 @@ div.detail-group.actions td {
   background-position: -519px -24px;
 }
 
+#navigation ul li.plugins span.icon {
+  background: url(../images/sprites.png) no-repeat -140px -291px;
+}
+
 /*Browser*/
 #browser {
   width: 794px;
@@ -10929,6 +10955,73 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
   font-size: 11px;
 }
 
+/*Plugins listing*/
+.plugins-listing {
+}
+
+.plugins-listing ul {
+  width: 100%;
+}
+
+.plugins-listing ul li {
+  /*+border-radius:4px;*/
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  border-radius: 4px;
+  /*+box-shadow:0px 2px 6px #D3D3D3;*/
+  -moz-box-shadow: 0px 2px 6px #D3D3D3;
+  -webkit-box-shadow: 0px 2px 6px #D3D3D3;
+  -o-box-shadow: 0px 2px 6px #D3D3D3;
+  box-shadow: 0px 2px 6px #D3D3D3;
+  border: 1px solid #A8A3A3;
+  background: url(../images/bg-gradients.png) 0px -29px;
+  width: 98%;
+  height: 66px;
+  margin: 9px auto 12px;
+  cursor: pointer;
+}
+
+.plugins-listing ul li:hover {
+  /*+box-shadow:inset 0px 2px 4px #B9B9B9;*/
+  -moz-box-shadow: inset 0px 2px 4px #B9B9B9;
+  -webkit-box-shadow: inset 0px 2px 4px #B9B9B9;
+  -o-box-shadow: inset 0px 2px 4px #B9B9B9;
+  box-shadow: inset 0px 2px 4px #B9B9B9;
+}
+
+.plugins-listing ul li .title {
+  display: block;
+  float: left;
+  width: 90%;
+  font-weight: bold;
+  /*+text-shadow:0px 1px 1px #FFFFFF;*/
+  -moz-text-shadow: 0px 1px 1px #FFFFFF;
+  -webkit-text-shadow: 0px 1px 1px #FFFFFF;
+  -o-text-shadow: 0px 1px 1px #FFFFFF;
+  text-shadow: 0px 1px 1px #FFFFFF;
+  color: #4A5A6A;
+  margin: 13px 0 7px;
+}
+
+.plugins-listing ul li .desc {
+  color: #524E4E;
+  font-size: 13px;
+}
+
+.plugins-listing ul li .icon {
+  display: block;
+  width: 50px;
+  height: 50px;
+  float: left;
+  margin: 8px 13px 13px 11px;
+}
+
+.plugins-listing ul li .icon img {
+  width: 100%;
+  height: 100%;
+}
+
 /*Action icons*/
 .action.edit .icon {
   background-position: 1px -1px;

ui/dictionary.jsp

@@ -25,6 +25,11 @@ under the License.
 <% long now = System.currentTimeMillis(); %>
 <script language="javascript">
 dictionary = {
+'label.plugins': '<fmt:message key="label.plugins"/>',
+'label.plugin.details': '<fmt:message key="label.plugin.details"/>',
+'label.author.name': '<fmt:message key="label.author.name"/>',
+'label.author.email': '<fmt:message key="label.author.email"/>',
+'label.external.link': '<fmt:message key="label.external.link"/>',
 'label.enable.s3': '<fmt:message key="label.enable.s3"/>',
 'confirm.enable.s3': '<fmt:message key="confirm.enable.s3"/>',
 'message.after.enable.s3': '<fmt:message key="message.after.enable.s3"/>',

ui/index.jsp

@@ -1607,8 +1607,9 @@ under the License.
     <script src="lib/date.js" type="text/javascript"></script>
     <script src="lib/jquery.cookies.js" type="text/javascript"></script>
     <script src="lib/jquery.md5.js" type="text/javascript" ></script>
-		
-    <script src="lib/excanvas.js"></script>
+    <script src="lib/require.js" type="text/javascript"></script>
+
+    <script src="lib/excanvas.js" type="text/javascript"></script>
     <script src="lib/flot/jquery.flot.js" type="text/javascript"></script>
     <script src="lib/flot/jquery.colorhelpers.js" type="text/javascript"></script>
     <script src="lib/flot/jquery.flot.crosshair.js" type="text/javascript"></script>
@@ -1674,8 +1675,12 @@ under the License.
     <script type="text/javascript" src="scripts/system.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/domains.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/docs.js?t=<%=now%>"></script>
-    <script type="text/javascript" src="scripts/domains.js?t=<%=now%>"></script>   
     <script type="text/javascript" src="scripts/vm_snapshots.js?t=<%=now%>"></script>  
+
+    <!-- Plugins -->
+    <script type="text/javascript" src="scripts/ui-custom/plugins.js?t=<%=now%>"></script>
+    <script type="text/javascript" src="plugins/plugins.js?t=<%=now%>"></script>
+    <script type="text/javascript" src="scripts/plugins.js?t=<%=now%>"></script>
   </body>
 </html>
 <jsp:include page="dictionary.jsp" />

ui/plugins/plugins.js

@@ -0,0 +1,5 @@
+(function($, cloudStack) {
+  cloudStack.plugins = [
+    // 'testPlugin'
+  ];
+}(jQuery, cloudStack));

ui/plugins/testPlugin/config.js

@@ -0,0 +1,9 @@
+(function (cloudStack) {
+  cloudStack.plugins.testPlugin.config = {
+    title: 'Test Plugin',
+    desc: 'Sample plugin',
+    externalLink: 'http://www.cloudstack.org/',
+    authorName: 'Test Plugin Developer',
+    authorEmail: 'plugin.developer@example.com'
+  };
+}(cloudStack));

ui/plugins/testPlugin/testPlugin.css

@@ -0,0 +1,2 @@
+/* Put your CSS here */
+

ui/plugins/testPlugin/testPlugin.js

@@ -0,0 +1,14 @@
+(function (cloudStack) {
+  cloudStack.plugins.testPlugin = function(plugin) {
+    plugin.ui.addSection({
+      id: 'testPlugin',
+      title: 'TestPlugin',
+      preFilter: function(args) {
+        return isAdmin();
+      },
+      show: function() {
+        return $('<div>').html('Test plugin section');
+      }
+    });
+  };
+}(cloudStack));

ui/scripts/cloudStack.js

@@ -19,18 +19,26 @@
     home: 'dashboard',
 
     sectionPreFilter: function(args) {
+      var sections = [];
+
       if(isAdmin()) {
-        return ["dashboard", "instances", "storage", "network", "templates", "accounts", "domains", "events", "system", "global-settings", "configuration", "projects"];
+        sections = ["dashboard", "instances", "storage", "network", "templates", "accounts", "domains", "events", "system", "global-settings", "configuration", "projects"];
       }
       else if(isDomainAdmin()) {
-        return ["dashboard", "instances", "storage", "network", "templates", "accounts", "domains", "events", "projects"];
+        sections = ["dashboard", "instances", "storage", "network", "templates", "accounts", "domains", "events", "projects"];
       }
       else if (g_userProjectsEnabled) {
-        return ["dashboard", "instances", "storage", "network", "templates", "accounts", "events", "projects"];
+        sections = ["dashboard", "instances", "storage", "network", "templates", "accounts", "events", "projects"];
       }
       else { //normal user
-        return ["dashboard", "instances", "storage", "network", "templates", "accounts", "events"];
+        sections = ["dashboard", "instances", "storage", "network", "templates", "accounts", "events"];
       }
+
+      if (cloudStack.plugins.length) {
+        sections.push('plugins');
+      }
+
+      return sections;
     },
     sections: {
       /**
@@ -49,7 +57,8 @@
 			
       system: {},  //root-admin only     
       'global-settings': {}, //root-admin only     
-      configuration: {} //root-admin only    
+      configuration: {}, //root-admin only
+      plugins: {}
     }
   });
 

ui/scripts/plugins.js

@@ -0,0 +1,60 @@
+(function($, cloudStack, require) {
+  var loadCSS = function(path) {
+    var $link = $('<link>');
+
+    $link.attr({
+      rel: 'stylesheet',
+      type: 'text/css',
+      href: path
+    });
+
+    $('head').append($link);
+  };
+
+  var pluginAPI = {
+    pollAsyncJob: pollAsyncJobResult,
+    apiCall: function(command, args) {
+      $.ajax({
+        url: createURL(command),
+        data: args.data,
+        success: args.success,
+        error: function(json) {
+          args.error(parseXMLHttpResponse(json));
+        }
+      })
+    },
+    addSection: function(section) {
+      cloudStack.sections[section.id] = $.extend(section, {
+        customIcon: 'plugins/' + section.id + '/icon.png'
+      });
+    },
+    extend: function(obj) {
+      $.extend(true, cloudStack, obj);
+    }
+  };
+  
+  cloudStack.sections.plugins = {
+    title: 'label.plugins',
+    show: cloudStack.uiCustom.plugins
+  };
+
+  // Load plugins
+  $(cloudStack.plugins).map(function(index, pluginID) {
+    var basePath = 'plugins/' + pluginID + '/';
+    var pluginJS = basePath + pluginID + '.js';
+    var configJS = basePath + 'config.js';
+    var pluginCSS = basePath + pluginID + '.css';
+
+    require([pluginJS], function() {
+      require([configJS]);
+      loadCSS(pluginCSS);
+
+      // Execute plugin
+      cloudStack.plugins[pluginID]({
+        ui: pluginAPI
+      });
+    });
+
+    // Load CSS
+  });
+}(jQuery, cloudStack, require));

ui/scripts/ui-custom/plugins.js

@@ -0,0 +1,93 @@
+(function($, cloudStack) {
+  var elems = {
+    pluginItem: function(args) {
+      var id = args.id;
+      var title = args.title;
+      var desc = args.desc;
+      var iconURL = args.iconURL;
+      var $pluginItem = $('<li>').addClass('plugin-item').addClass(id);
+      var $title = $('<span>').addClass('title').html(title);
+      var $desc = $('<span>').addClass('desc').html(desc);
+      var $icon = $('<span>').addClass('icon').append(
+        $('<img>').attr({ src: iconURL })
+      );
+
+      $pluginItem.append(
+        $icon, $title, $desc
+      );
+
+      return $pluginItem;
+    },
+    pluginListing: function(args) {
+      var plugins = args.plugins;
+      var $plugins = $('<ul>');
+      var $pluginsListing = $('<div>').addClass('plugins-listing');
+
+      $(plugins).each(function() {
+        var plugin = this;
+        var $plugin = elems.pluginItem({
+          id: plugin.id,
+          title: plugin.title,
+          desc: plugin.desc,
+          iconURL: 'plugins/' + plugin.id + '/icon.png'
+        });
+        var $browser = $('#browser .container');
+
+        $plugin.click(function() {
+          $browser.cloudBrowser('addPanel', {
+            title: plugin.title,
+            $parent: $('.panel:first'),
+            complete: function($panel) {
+              $panel.detailView({
+                name: 'Plugin details',
+                tabs: {
+                  details: {
+                    title: 'label.plugin.details',
+                    fields: [
+                      {
+                        name: { label: 'label.name' }
+                      },
+                      {
+                        desc: { label: 'label.description' },
+                        externalLink: {
+                          isExternalLink: true,
+                          label: 'label.external.link'
+                        }
+                      },
+                      {
+                        authorName: { label: 'label.author.name' },
+                        authorEmail: { label: 'label.author.email' },
+                        id: { label: 'label.id' }
+                      }
+                    ],
+                    dataProvider: function(args) {
+                      args.response.success({ data: plugin });
+                    }
+                  }
+                }
+              });
+            }
+          });
+        });
+
+        $plugin.appendTo($plugins);
+      });
+
+      $pluginsListing.append($plugins);
+
+      return $pluginsListing;
+    }
+  };
+
+  cloudStack.uiCustom.plugins = function() {
+    var plugins = cloudStack.plugins;
+
+    return elems.pluginListing({
+      plugins: $(plugins).map(function(index, pluginID) {
+        var plugin = cloudStack.plugins[pluginID].config;
+
+        return $.extend(plugin, { id: pluginID });
+      })
+    });
+  };
+}(jQuery, cloudStack)); 

ui/scripts/ui/core.js

@@ -40,9 +40,12 @@
 
     $.each(args.sections, function(sectionID, args) {
       if (preFilter && $.inArray(sectionID, preFilter) == -1) {
-        return true;
+        if (!(args.preFilter && args.preFilter())) {
+          return true;
+        }
       }
 
+      
       var $li = $('<li>')
             .addClass('navigation-item')
             .addClass(sectionID)
@@ -50,6 +53,12 @@
             .append($('<span>').html(_l(args.title)))
             .data('cloudStack-section-id', sectionID);
 
+      if (args.customIcon) {
+        $li.addClass('custom-icon').find('span.icon').html('').append(
+          $('<img>').attr({ src: args.customIcon })
+        );
+      }
+
       $li.appendTo($navList);
 
       return true;

ui/scripts/ui/widgets/detailView.js

@@ -823,7 +823,16 @@
 				 */
 				
         $name.html(_l(value.label));
-        $value.html(_s(content));
+
+        if (!value.isExternalLink) {
+          $value.html(_s(content));
+        } else {
+          $value.html('').append(
+            $('<a>').attr({
+              href: _s(content)
+            }).html(_s(content))
+          );
+        }
 
         // Set up validation metadata
         $value.data('validation-rules', value.validation);