Add install wizard JS

ui/index-test.html

@@ -1403,6 +1403,8 @@
     <!-- CloudStack -->
     <script src="scripts/ui-custom/login.js" type="text/javascript"></script>
     <script src="scripts-test/cloudStack.js" type="text/javascript"></script>
+    <script src="scripts-test/installWizard.js" type="text/javascript"></script>
+    <script src="scripts/ui-custom/installWizard.js" type="text/javascript"></script>
     <script src="scripts/ui-custom/projects.js" type="text/javascript"></script>
     <script src="scripts-test/projects.js" type="text/javascript"></script>
     <script src="scripts-test/dashboard.js" type="text/javascript"></script>

ui/index.jsp

@@ -1411,6 +1411,8 @@
     <script src="scripts/ui-custom/login.js" type="text/javascript"></script>
     <script src="scripts/ui-custom/projects.js" type="text/javascript"></script>
     <script src="scripts/cloudStack.js" type="text/javascript"></script>
+    <script src="scripts/installWizard.js" type="text/javascript"></script>
+    <script src="scripts/ui-custom/installWizard.js" type="text/javascript"></script>
     <script src="scripts/projects.js" type="text/javascript"></script>
     <script src="scripts/dashboard.js" type="text/javascript"></script>
     <script src="scripts/ui-custom/instanceWizard.js" type="text/javascript"></script>

ui/scripts-test/cloudStack.js

@@ -28,11 +28,11 @@
 
   $(function() {
     var $container = $('#cloudStack3-container');
-    
+
     // Login
     cloudStack.uiCustom.login({
       $container: $container,
-      
+
       // Use this for checking the session, to bypass login screen
       bypassLoginCheck: function(args) {
         var disabledLogin = document.location.href.split('?')[1] == 'login=disabled';
@@ -66,13 +66,31 @@
         return args.response.error();
       },
 
-      // Show cloudStack main UI widget
       complete: function(args) {
-        $container.cloudStack($.extend(cloudStack, {
+        var context = {
-          context: {
+          users: [args.user]
-            users: [args.user]
+        };
+        var cloudStackArgs = $.extend(cloudStack, {
+          context: context
+        });
+
+        // Check to invoke install wizard
+        cloudStack.installWizard.check({
+          context: context,
+          response: {
+            success: function(args) {
+              if (args.doInstall) {
+                cloudStack.uiCustom.installWizard({
+                  $container: $container,
+                  context: context
+                });
+              } else {
+                // Show cloudStack main UI
+                $container.cloudStack(cloudStackArgs);
+              }
+            }
           }
-        }));
+        });
       }
     });
   });

ui/scripts-test/installWizard.js

@@ -0,0 +1,12 @@
+(function($, cloudStack, testData) {
+  cloudStack.installWizard = {
+    // Check if install wizard should be invoked
+    check: function(args) {
+      setTimeout(function() {
+        args.response.success({
+          doInstall: false
+        });
+      }, 100);
+    }
+  };
+}(jQuery, cloudStack, testData));

ui/scripts/cloudStack.js

@@ -151,11 +151,30 @@
 
       // Show cloudStack main UI widget
       complete: function(args) {
-        $container.cloudStack($.extend(cloudStack, {
+        var context = {
-          context: {
+          users: [args.user]
-            users: [args.user]
+        };
+        var cloudStackArgs = $.extend(cloudStack, {
+          context: context
+        });
+
+        // Check to invoke install wizard
+        cloudStack.installWizard.check({
+          context: context,
+          response: {
+            success: function(args) {
+              if (args.doInstall) {
+                cloudStack.uiCustom.installWizard({
+                  $container: $container,
+                  context: context
+                });
+              } else {
+                // Show cloudStack main UI
+                $container.cloudStack(cloudStackArgs);
+              }
+            }
           }
-        }));
+        });
       }
     });
   });

ui/scripts/installWizard.js

@@ -0,0 +1,17 @@
+(function($, cloudStack, testData) {
+  cloudStack.installWizard = {
+    // Check if install wizard should be invoked
+    check: function(args) {
+      $.ajax({
+        url: createURL('listZones'),
+        dataType: 'json',
+        async: true,
+        success: function(data) {
+          args.response.success({
+            doInstall: !(data.listzonesresponse.zone && data.listzonesresponse.zone.length)
+          });          
+        }
+      });
+    }
+  };
+}(jQuery, cloudStack, testData));

ui/scripts/ui-custom/installWizard.js

@@ -0,0 +1,43 @@
+(function($, cloudStack, testData) {
+  cloudStack.uiCustom.installWizard = function(args) {
+    var context = args.context;
+    var $installWizard = $('<div>').addClass('install-wizard');
+    var $container = args.$container;
+
+    var elems = {
+      nextButton: function() {
+        return $('<div>').addClass('button next').html('Next');
+      }
+    };
+
+    // Layout/behavior for each step in wizard
+    var steps = {
+      // Welcome screen
+      welcome: function(args) {
+        return $.merge(
+          $('<h1>').html('Welcome screen'),
+          $('<p>').html('Welcome text goes here.'),
+          $('<div>').addClass('button next').html('Next'),
+          elems.nextButton().click(args.nextStep)
+        );
+      },
+
+      addZone: function(args) {
+        var $zoneWizard = $('#template').find('.multi-wizard.zone-wizard').clone();
+
+        return $.merge(
+          $zoneWizard.find('.steps .setup-zone'),
+          elems.nextButton().click(function() {
+            args.nextStep({
+              data: {
+                zone: cloudStack.serializeForm
+              }
+            });
+          })
+        );
+      }
+    };
+
+    $installWizard.append(steps.addZone).appendTo($container);
+  };
+}(jQuery, cloudStack, testData));

ui/scripts/ui/widgets/listView.js

@@ -441,8 +441,9 @@
     var $filters = $('<div></div>').addClass('filters reduced-hide');
     $filters.append('<label>Filter By: </label>');
 
-    var $filterSelect = $('<select id="filterBy"></select>').appendTo($filters);
+    var $filterSelect = $('<select></select>').appendTo($filters);
-    
+    $filterSelect.append('<option value="all">All</option>'); // Always appears by default
+
     if (filters)
       $.each(filters, function(key) {
         var $option = $('<option>').attr({
@@ -870,21 +871,13 @@
 
     createFilters($toolbar, listViewData.filters);
     createSearchBar($toolbar);
-    
     loadBody(
       $table,
       listViewData.dataProvider,
       listViewData.fields,
       false,
       {
-        page: page,        
+        page: page,
-        filterBy: {
-          kind: $listView.find('select[id=filterBy]').val(),
-          search: {
-            value: $listView.find('input[type=text]').val(),
-            by: 'name'
-          }
-        },        
         ref: args.ref
       },
       actions,
@@ -935,7 +928,7 @@
         {
           page: 1,
           filterBy: {
-        	kind: $listView.find('select[id=filterBy]').val(),
+            kind: $listView.find('select').val(),
             search: {
               value: $listView.find('input[type=text]').val(),
               by: 'name'