Add plugin loading functionality and basic framework

Dynamically load UI plugins via require.js

Plugin code uses the following format:

(function (cloudStack) {
  var testPlugin1 = function(plugin) {
    // Plugin code goes here
  };

  cloudStack.plugin({
    id: 'testPlugin1',
    title: 'Test Plugin 1',
    desc: 'Sample plugin 1',
    load: testPlugin1
  });
}(cloudStack));

ui/index.jsp

@@ -1606,8 +1606,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>

ui/plugins/plugins.js

@@ -1,6 +1,6 @@
 (function($, cloudStack) {
-  cloudStack.plugins = [
+  cloudStack.plugins.load([
     'testPlugin1',
     'testPlugin2'
-  ];
+  ]);
 }(jQuery, cloudStack));

ui/plugins/testPlugin1/testPlugin1.js

@@ -0,0 +1,12 @@
+(function (cloudStack) {
+  var testPlugin1 = function(plugin) {
+    // Plugin code goes here
+  };
+
+  cloudStack.plugin({
+    id: 'testPlugin1',
+    title: 'Test Plugin 1',
+    desc: 'Sample plugin 1',
+    load: testPlugin1
+  });
+}(cloudStack));

ui/plugins/testPlugin2/testPlugin2.js

@@ -0,0 +1,12 @@
+(function (cloudStack) {
+  var testPlugin2 = function(plugin) {
+    // Plugin code goes here
+  };
+
+  cloudStack.plugin({
+    id: 'testPlugin2',
+    title: 'Test Plugin 2',
+    desc: 'Sample plugin 2',
+    load: testPlugin2
+  });
+}(cloudStack));

ui/scripts/plugins.js

@@ -1,4 +1,33 @@
 (function($, cloudStack) {
+  cloudStack.plugin = function(args) {
+    var id = args.id;
+    var title = args.title;
+    var desc = args.desc;
+
+    cloudStack.plugins.registry[id] = {
+      title: title,
+      desc: desc
+    };
+  };
+
+  cloudStack.plugins = {
+    loaded: [], // Lists loaded plugins by ID
+    registry: {}, // Stores metadata for plugins
+
+    // Loads/executes script
+    load: function(plugins) {
+      $(plugins).map(function(index, pluginID) {
+        var path = '/client/plugins/' + pluginID + '/' + pluginID + '.js';
+
+        require([path], function() {
+          cloudStack.plugins.loaded.push(pluginID);
+        });
+
+        return path;
+      });
+    }
+  };
+
   cloudStack.sections.plugins = {
     title: 'Plugins',
     show: cloudStack.uiCustom.plugins

ui/scripts/ui-custom/plugins.js

@@ -37,16 +37,16 @@
   };
 
   cloudStack.uiCustom.plugins = function() {
-    var plugins = cloudStack.plugins;
+    var plugins = cloudStack.plugins.loaded;
 
     return elems.pluginListing({
-      plugins: $(plugins).map(function(index, plugin) {
-        plugin = plugin.toString();
+      plugins: $(plugins).map(function(index, pluginID) {
+        var plugin = cloudStack.plugins.registry[pluginID];
 
         return {
-          id: plugin,
-          title: plugin,
-          desc: plugin + 'Description'
+          id: plugin.id,
+          title: plugin.title,
+          desc: plugin.desc
         };
       })
     });