UI Plugin: Use new format

Define plugins as namespaced objects instead of as function calls. This
is easier to implement and manage by the framework.

New format changes for defining plugins:

Now create 2 JS files in plugin folder:
  -config.js
  -[pluginName].js

plugins.js (listing) format:

  cloudStack.plugins = [
    'testPlugin'
  ];

config.js format:

  cloudStack.plugins.testPlugin.config = {
    title: 'Test Plugin',
    desc: 'Sample plugin'
  };

[pluginName].js format:

  cloudStack.plugins.testPlugin = function(plugin) {
    //
    // Plugin code goes here
    //
  };

ui/index.jsp

@@ -1674,11 +1674,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/ui-custom/plugins.js?t=<%=now%>"></script>
-    <script type="text/javascript" src="scripts/plugins.js?t=<%=now%>"></script>
 
-    <!-- Plugin listing -->
+    <script type="text/javascript" src="scripts/ui-custom/plugins.js?t=<%=now%>"></script>
+    
+    <!-- Plugins -->
     <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

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

ui/plugins/testPlugin/config.js

@@ -0,0 +1,6 @@
+(function (cloudStack) {
+  cloudStack.plugins.testPlugin.config = {
+    title: 'Test Plugin',
+    desc: 'Sample plugin'
+  };
+}(cloudStack));

ui/plugins/testPlugin/testPlugin.js

@@ -0,0 +1,7 @@
+(function (cloudStack) {
+  cloudStack.plugins.testPlugin = function(plugin) {
+    //
+    // Plugin code goes here
+    //
+  };
+}(cloudStack));

ui/plugins/testPlugin1/testPlugin1.js

@@ -1,12 +0,0 @@
-(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

@@ -1,12 +0,0 @@
-(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,35 +1,26 @@
-(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;
-      });
-    }
-  };
-
+(function($, cloudStack, require) {
   cloudStack.sections.plugins = {
     title: 'Plugins',
     show: cloudStack.uiCustom.plugins
-  }
-}(jQuery, cloudStack));
+  };
+
+  // Load plugins
+  $(cloudStack.plugins).map(function(index, pluginID) {
+    var basePath = 'plugins/' + pluginID + '/';
+    var pluginJS = basePath + pluginID + '.js';
+    var configJS = basePath + 'config.js';
+
+    require([pluginJS], function() {
+      require([configJS]);
+
+      // Execute plugin
+      cloudStack.plugins[pluginID]({
+        ui: {
+          extend: function(obj) {
+            $.extend(true, cloudStack, obj);
+          }
+        }
+      });
+    });
+  });
+}(jQuery, cloudStack, require));

ui/scripts/ui-custom/plugins.js

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