diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 260db04d720..72892d68879 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -297,6 +297,212 @@ body.login { background: #FFFFFF; } +/*Install wizard*/ +.install-wizard { + width: 1024px; + height: 768px; + margin: auto; + overflow: hidden; + border: 1px solid #E2E2E2; + border-top: none; + position: relative; +} + +.install-wizard .header { + text-align: center; + background: #0D6CAA; + color: #FFFFFF; + padding: 32px 0 89px; + /*+text-shadow:0px 2px 2px #4B4B4B;*/ + -moz-text-shadow: 0px 2px 2px #4B4B4B; + -webkit-text-shadow: 0px 2px 2px #4B4B4B; + -o-text-shadow: 0px 2px 2px #4B4B4B; + text-shadow: 0px 2px 2px #4B4B4B; + z-index: 9; +} + +.install-wizard .step { + max-width: 691px; + margin: auto; + padding: 56px 0 0; +} + +.install-wizard .step .title { + width: 303px; + margin: auto auto 30px; + font-size: 22px; + clear: both; + color: #1D4E7D; +} + +.install-wizard .step .subtitle { + color: #808080; + font-weight: bold; +} + +.install-wizard .step p { + color: #4A4A4A; + font-size: 15px; + line-height: 23px; +} + +.install-wizard .step .field { + text-align: left; + margin: 0 0 12px; +} + +.install-wizard .step .field label { + display: block; + clear: both; + font-size: 13px; + color: #4D4D4D; +} + +.install-wizard .step .field label.error { + color: #FF2424; + font-size: 11px; +} + +.install-wizard .body { + width: 987px; + height: 626px; + margin: -52px auto auto; + z-index: 10; + /*+box-shadow:0px 3px 15px #696767;*/ + -moz-box-shadow: 0px 3px 15px #696767; + -webkit-box-shadow: 0px 3px 15px #696767; + -o-box-shadow: 0px 3px 15px #696767; + box-shadow: 0px 3px 15px #696767; + background: #FFFFFF; +} + +.install-wizard h2 { + font-size: 24px; + margin: 0 0 19px; +} + +.install-wizard input[type=text], +.install-wizard input[type=password], +.install-wizard input[type=text], +.install-wizard select { + width: 288px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #CDCDCD; + /*+box-shadow:inset 0px 1px 0px #AEAEAE;*/ + -moz-box-shadow: inset 0px 1px 0px #AEAEAE; + -webkit-box-shadow: inset 0px 1px 0px #AEAEAE; + -o-box-shadow: inset 0px 1px 0px #AEAEAE; + box-shadow: inset 0px 1px 0px #AEAEAE; + font-size: 14px; + color: #232323; + padding: 6px; + background: #F7F7F7; +} + +.install-wizard .button { + background: url(../images/bg-gradients.png) 0px -221px; + padding: 7px 25px; + /*+border-radius:10px;*/ + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; + border-radius: 10px 10px 10px 10px; + border: 1px solid #505050; + color: #FFFFFF; + font-size: 13px; + font-weight: bold; + /*+text-shadow:0px -1px 3px #3F4351;*/ + -moz-text-shadow: 0px -1px 3px #3F4351; + -webkit-text-shadow: 0px -1px 3px #3F4351; + -o-text-shadow: 0px -1px 3px #3F4351; + text-shadow: 0px -1px 3px #3F4351; + float: right; + cursor: pointer; + margin-top: 15px; +} + +/*** Setup form*/ +.install-wizard .step .setup-form { + display: inline-block; + background: #F0F0F0; + width: 469px; + border: 1px solid #CFCFCF; + /*+text-shadow:0px 1px 0px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 0px #FFFFFF; + -webkit-text-shadow: 0px 1px 0px #FFFFFF; + -o-text-shadow: 0px 1px 0px #FFFFFF; + text-shadow: 0px 1px 0px #FFFFFF; +} + +.install-wizard .step .setup-form .title { + float: left; + margin: 17px 0 0 29px; + color: #626F7C; +} + +.install-wizard .step .setup-form .field { + width: 389px; + display: inline-block; + margin: 6px 0 1px 31px; + padding: 9px; + background: #E2E2E2; + color: #57646D; +} + +.install-wizard .step .setup-form .field .name { + width: 93px; + text-align: right; + float: left; + font-size: 13px; + padding: 10px 0 0 0px; +} + +.install-wizard .step .setup-form .field .value { + float: right; +} + +.install-wizard .step .setup-form input[type=text], +.install-wizard .step .setup-form input[type=password] { + width: 278px; + border: 1px solid #8D8D8D; + padding: 2px 2px 1px; + margin: 6px 4px 0 0; +} + +.install-wizard .step .setup-form .multi-range input[type=text] { + width: 128px; +} + +.install-wizard .step .setup-form input.button { + margin: 0 30px 14px 15px; +} + +/*** Step: Change user*/ +.install-wizard .step.change-user { + text-align: center; + padding-top: 95px; + width: 316px; + margin: auto; +} + +.install-wizard .step.intro { +} + +.install-wizard .step.intro .title { + color: #565454; + margin-left: 0; + margin-bottom: 21px; + font-size: 25px; +} + +.install-wizard .step.intro .subtitle { + margin-bottom: 9px; +} + /*Notifications*/ div.notification-box { width: 323px; @@ -3451,11 +3657,11 @@ label.error { } .multi-wizard .progress ul li span.multiline { - /*+placement:shift -154px 16px;*/ + /*+placement:shift -21px 12px;*/ position: relative; - left: -154px; - top: 16px; - width: 87px; + left: -21px; + top: 12px; + width: 71px; } .multi-wizard .progress ul li span.arrow { diff --git a/ui/scripts-test/cloudStack.js b/ui/scripts-test/cloudStack.js index 83317536e8b..402e86aeac4 100644 --- a/ui/scripts-test/cloudStack.js +++ b/ui/scripts-test/cloudStack.js @@ -82,7 +82,10 @@ if (args.doInstall) { cloudStack.uiCustom.installWizard({ $container: $container, - context: context + context: context, + complete: function() { + $container.cloudStack(cloudStackArgs); + } }); } else { // Show cloudStack main UI diff --git a/ui/scripts-test/installWizard.js b/ui/scripts-test/installWizard.js index 6612c2ca2fd..117cee0b3ea 100644 --- a/ui/scripts-test/installWizard.js +++ b/ui/scripts-test/installWizard.js @@ -2,11 +2,106 @@ cloudStack.installWizard = { // Check if install wizard should be invoked check: function(args) { + args.response.success({ + doInstall: args.context.users[0].username == 'newuser' + }); + }, + + changeUser: function(args) { setTimeout(function() { args.response.success({ - doInstall: false + data: { + newUser: { + username: args.data.username + } + } }); - }, 100); + }, 500); + }, + + // Copy text + copy: { + whatIsCloudStack: function(args) { + args.response.success({ + text: 'CloudStack is open source software written in java that is designed to deploy and manage large networks of virtual machines, as a highly available, scalable cloud computing platform. CloudStack current supports the most popular open source hypervisors VMware, Oracle VM, KVM, XenServer and Xen Cloud Platform. CloudStack offers three ways to manage cloud computing environments: a easy-to-use web interface, command line and a full-featured RESTful API.' + }); + }, + + whatIsAZone: function(args) { + args.response.success({ + text: 'A zone is integral to the CloudStack platform -- your entire network is represented via a zone. More text goes here...' + }); + }, + + whatIsAPod: function(args) { + args.response.success({ + text: 'A pod is a part of a zone. More text goes here...' + }); + }, + + whatIsACluster: function(args) { + args.response.success({ + text: 'A cluster is a part of a zone. More text goes here...' + }); + }, + + whatIsAHost: function(args) { + args.response.success({ + text: 'A host is a part of a zone. More text goes here...' + }); + }, + + whatIsPrimaryStorage: function(args) { + args.response.success({ + text: 'Primary storage is a part of a zone. More text goes here...' + }); + }, + + whatIsSecondaryStorage: function(args) { + args.response.success({ + text: 'Secondary storage is a part of a zone. More text goes here...' + }); + } + }, + + action: function(args) { + var complete = args.response.success; + + var createZone = function(args) { + createPod(); + }; + + var createPod = function(args) { + createIPRange(); + }; + + var createIPRange = function(args) { + createCluster(); + }; + + var createCluster = function(args) { + createHost(); + }; + + var createHost = function(args) { + createPrimaryStorage(); + }; + + var createPrimaryStorage = function(args) { + createSecondaryStorage(); + }; + + var createSecondaryStorage = function(args) { + pollSystemVMs(); + }; + + var pollSystemVMs = function() { + setTimeout(function() { + complete(); + }, 5000); + }; + + createZone(); } }; -}(jQuery, cloudStack, testData)); \ No newline at end of file +}(jQuery, cloudStack, testData)); diff --git a/ui/scripts-test/system.js b/ui/scripts-test/system.js index af461a9be1c..d6a5739a62d 100644 --- a/ui/scripts-test/system.js +++ b/ui/scripts-test/system.js @@ -46,13 +46,9 @@ } ], dataProvider: function(args) { -<<<<<<< HEAD - args.response.success({ data: testData.data.networks[0] }); -======= args.response.success({ data: testData.data.networks[0] }); ->>>>>>> master } }, ipAddresses: { @@ -1074,6 +1070,7 @@ password: { label: 'Password', + isPassword: true, validation: { required: true } }, diff --git a/ui/scripts/ui-custom/installWizard.js b/ui/scripts/ui-custom/installWizard.js index 5ffc63d5bab..8911c3e7794 100644 --- a/ui/scripts/ui-custom/installWizard.js +++ b/ui/scripts/ui-custom/installWizard.js @@ -1,54 +1,612 @@ (function($, cloudStack, testData) { - cloudStack.uiCustom.installWizard = function(args) { + var installWizard = function(args) { var context = args.context; var $installWizard = $('
').addClass('install-wizard'); var $container = args.$container; - var action = cloudStack.installWizard.action; - var complete = args.complete; + var state = {}; // Hold wizard form state + /** + * Successful installation action + */ + var complete = function() { + $installWizard.remove(); + + args.complete(); + }; + + /** + * Retrive copy text and append to element -- async + * @param id + * @param $elem + */ + var getCopy = function(id, $elem) { + cloudStack.installWizard.copy[id]({ + response: { + success: function(args) { + $elem.append(args.text); + } + } + }); + + return $elem; + }; + + /** + * Go to specified step in flow -- for use in individual steps + * @param stateStepID ID to group state elements in (i.e., zone, pod, cluster, ...) + * @param $elem (optional) Element containing
, to serialize for state + */ + var goTo = cloudStack._goto = function(stepID, stateID, $elem) { + var $nextStep = steps[stepID](); + var $body = $installWizard.find('.body'); + + if (stateID && $elem) { + state[stateID] = cloudStack.serializeForm($elem.is('form') ? $elem : $elem.find('form')); + } + + $body.children().fadeOut('fast', function() { + $(this).remove(); + $nextStep.addClass('step').hide().appendTo($body).fadeIn(); + }); + }; + + /** + * Generic page elements + */ var elems = { - nextButton: function() { - return $('
').addClass('button next').html('Next'); + header: function() { + return $('
').addClass('header') + .append( + $.merge( + $('

').html('Hello and Welcome to CloudStack.'), + $('

').html('This tour will aid you in setting up your CloudStack installation') + ) + ); + }, + body: function() { + return $('
').addClass('body'); + }, + nextButton: function(label, options) { + var $button = options && !options.type ? + $('
').addClass('button goTo').html(label) : + $('').attr({ type: 'submit' }).addClass('button goTo').val(label); + + return $button; } }; - // Layout/behavior for each step in wizard + /** + * Layout/behavior for each step in wizard + */ var steps = { - // Welcome screen - welcome: function(args) { - return $.merge( - $('

').html('Welcome screen'), - $('

').html('Welcome text goes here.'), - $('

').addClass('button next').html('Next'), - elems.nextButton().click(args.nextStep) + changeUser: function(args) { + var $changeUser = $('
').addClass('step change-user'); + var $form = $('').appendTo($changeUser); + + // Fields + var $password = $('').addClass('required').attr({ type: 'password', name: 'password' }); + var $passwordConfirm = $('').addClass('required').attr({ type: 'password', name: 'password-confirm' }); + var $save = elems.nextButton('Save and continue', { type: 'submit' }); + + $form.append( + $('
').addClass('title').html('Please change your password.'), + $('
').addClass('field').append( + $(''), $password + ), + $('
').addClass('field').append( + $(''), $passwordConfirm + ), + $save + ); + + $form.validate(); + + // Save event + $form.submit(function() { + if (!$form.valid()) return false; + + var $loading = $('
').addClass('loading-overlay').prependTo($form); + cloudStack.installWizard.changeUser({ + data: cloudStack.serializeForm($form), + response: { + success: function(args) { + goTo('intro', 'newUser', $form); + } + } + }); + + return false; + }); + + return $changeUser; + }, + + intro: function(args) { + var $intro = $('
').addClass('intro'); + var $title = $('
').addClass('title') + .html('What is CloudStack?'); + var $subtitle = $('
').addClass('subtitle') + .html('Subtitle text goes here'); + var $copy = getCopy('whatIsCloudStack', $('

')); + var $continue = elems.nextButton('Continue with basic installation'); + + $continue.click(function() { + goTo('addZoneIntro'); + + return false; + }); + + return $intro.append( + $title, $subtitle, + $copy, + $continue ); }, - addZone: function(args) { - var $zoneWizard = $('#template').find('.multi-wizard.zone-wizard').clone(); + /** + * Add zone intro text + * @param args + */ + addZoneIntro: function(args) { + var $intro = $('
').addClass('intro'); + var $title = $('
').addClass('title') + .html('Let\'s add a zone.'); + var $subtitle = $('
').addClass('subtitle') + .html('What is a zone?'); + var $copy = getCopy('whatIsAZone', $('

')); + var $continue = elems.nextButton('OK'); - return $.merge( - $zoneWizard.find('.steps .setup-zone'), - elems.nextButton().click(function() { - args.nextStep({ - data: { - zone: cloudStack.serializeForm - } - }); - }) + $continue.click(function() { + goTo('addZone'); + + return false; + }); + + return $intro.append( + $title, $subtitle, + $copy, + $continue + ); + }, + + /** + * Add zone form + * @param args + */ + addZone: function(args) { + var $addZone = $('
').addClass('add-zone'); + var $addZoneForm = $('
').addClass('setup-form').append( + $('#template').find('.multi-wizard.zone-wizard .steps .setup-zone').clone() + ); + var $save = elems.nextButton('Continue', { type: 'submit' }); + var $title = $('
').addClass('title').html('Setup Zone'); + + $addZoneForm.find('form').validate(); + + $save.click(function() { + if (!$addZoneForm.find('form').valid()) return false; + + goTo('addIPRange', 'zone', $addZoneForm); + + return false; + }); + + // Remove unneeded fields + $addZoneForm.find('.main-desc, .conditional').remove(); + $addZoneForm.find('.field:last').remove(); + + return $addZone.append( + $addZoneForm + .prepend($title) + .append($save) + ); + }, + + /** + * Add IP range form + * @param args + */ + addIPRange: function(args) { + var $addIPRange = $('
').addClass('add-zone'); + var $addIPRangeForm = $('
').addClass('setup-form').append( + $('#template').find('.multi-wizard.zone-wizard .steps .add-ip-range').clone() + ); + var $save = elems.nextButton('Continue', { type: 'submit' }); + var $title = $('
').addClass('title').html('Setup IP Range'); + + $addIPRangeForm.find('form').validate(); + + $save.click(function() { + if (!$addIPRangeForm.find('form').valid()) return false; + + goTo('addPodIntro', 'zoneIPRange', $addIPRangeForm); + + return false; + }); + + // Remove unneeded fields + $addIPRangeForm.find('.main-desc, .conditional').remove(); + + return $addIPRange.append( + $addIPRangeForm + .prepend($title) + .append($save) + ); + }, + + /** + * Add pod intro text + * @param args + */ + addPodIntro: function(args) { + var $intro = $('
').addClass('intro'); + var $title = $('
').addClass('title') + .html('Let\'s add a pod.'); + var $subtitle = $('
').addClass('subtitle') + .html('What is a pod?'); + var $copy = getCopy('whatIsAPod', $('

')); + var $continue = elems.nextButton('OK'); + + $continue.click(function() { + goTo('addPod'); + + return false; + }); + + return $intro.append( + $title, $subtitle, + $copy, + $continue + ); + }, + + /** + * Add pod form + * @param args + */ + addPod: function(args) { + var $addPod = $('
').addClass('add-pod'); + var $addPodForm = $('
').addClass('setup-form').append( + $('#template').find('.multi-wizard.zone-wizard .steps .setup-pod').clone() + ); + var $save = elems.nextButton('Continue', { type: 'submit' }); + var $title = $('
').addClass('title').html('Add a Pod'); + + $addPodForm.find('form').validate(); + + $save.click(function() { + if (!$addPodForm.find('form').valid()) return false; + + goTo('addClusterIntro', 'pod', $addPodForm); + + return false; + }); + + // Remove unneeded fields + $addPodForm.find('.main-desc, .conditional').remove(); + + return $addPod.append( + $addPodForm + .prepend($title) + .append($save) + ); + }, + + /** + * Add cluster intro text + * @param args + */ + addClusterIntro: function(args) { + var $intro = $('
').addClass('intro'); + var $title = $('
').addClass('title') + .html('Let\'s add a cluster.'); + var $subtitle = $('
').addClass('subtitle') + .html('What is a cluster?'); + var $copy = getCopy('whatIsACluster', $('

')); + var $continue = elems.nextButton('OK'); + + $continue.click(function() { + goTo('addCluster'); + + return false; + }); + + return $intro.append( + $title, $subtitle, + $copy, + $continue + ); + }, + + /** + * Add cluster form + * @param args + */ + addCluster: function(args) { + var $addCluster = $('
').addClass('add-cluster'); + var addClusterForm = cloudStack.dialog.createForm({ + noDialog: true, + form: cloudStack.sections.system + .subsections.clusters.listView + .actions.add.createForm, + after: function(args) { + goTo('addHostIntro', 'cluster', $addClusterForm); + } + }); + var $addClusterForm = $('
').addClass('setup-form').append( + addClusterForm.$formContainer + ); + + var $save = elems.nextButton('Continue', { type: 'submit' }).appendTo($addClusterForm.find('form')); + var $title = $('
').addClass('title').html('Add a Cluster'); + + $addClusterForm.find('form').submit(function() { + addClusterForm.completeAction($addClusterForm); + + return false; + }); + + // Cleanup + $addClusterForm.find('.message').remove(); + $addClusterForm.find('.form-item').addClass('field').find('label.error').hide(); + $addClusterForm.find('.form-item[rel=podId]').remove(); + + return $addCluster.append( + $addClusterForm + .prepend($title) + ); + }, + + /** + * Add host intro text + * @param args + */ + addHostIntro: function(args) { + var $intro = $('
').addClass('intro'); + var $title = $('
').addClass('title') + .html('Let\'s add a host.'); + var $subtitle = $('
').addClass('subtitle') + .html('What is a host?'); + var $copy = getCopy('whatIsAHost', $('

')); + var $continue = elems.nextButton('OK'); + + $continue.click(function() { + goTo('addHost'); + + return false; + }); + + return $intro.append( + $title, $subtitle, + $copy, + $continue + ); + }, + + /** + * Add host form + * @param args + */ + addHost: function(args) { + var $addHost = $('
').addClass('add-host'); + var addHostForm = cloudStack.dialog.createForm({ + noDialog: true, + form: cloudStack.sections.system + .subsections.hosts.listView + .actions.add.createForm, + after: function(args) { + goTo('addPrimaryStorageIntro', 'host', $addHostForm); + } + }); + var $addHostForm = $('
').addClass('setup-form').append( + addHostForm.$formContainer + ); + var $save = elems.nextButton('Continue', { type: 'submit' }).appendTo($addHostForm.find('form')); + var $title = $('
').addClass('title').html('Add a Host'); + + $addHostForm.find('form').submit(function() { + addHostForm.completeAction($addHostForm); + + return false; + }); + + // Cleanup + $addHostForm.find('.message').remove(); + $addHostForm.find('.form-item').addClass('field').find('label.error').hide(); + $addHostForm.find('.form-item[rel=cluster], .form-item[rel=pod]').remove(); + + return $addHost.append( + $addHostForm + .prepend($title) + ); + }, + + /** + * Add primary storage intro text + * @param args + */ + addHostIntro: function(args) { + var $intro = $('
').addClass('intro'); + var $title = $('
').addClass('title') + .html('Let\'s add primary storage.'); + var $subtitle = $('
').addClass('subtitle') + .html('What is primary storage?'); + var $copy = getCopy('whatIsPrimaryStorage', $('

')); + var $continue = elems.nextButton('OK'); + + $continue.click(function() { + goTo('addPrimaryStorage'); + + return false; + }); + + return $intro.append( + $title, $subtitle, + $copy, + $continue + ); + }, + + /** + * Add primary storage + * @param args + */ + addPrimaryStorage: function(args) { + var $addPrimaryStorage = $('
').addClass('add-primary-storage'); + var addPrimaryStorageForm = cloudStack.dialog.createForm({ + noDialog: true, + form: cloudStack.sections.system + .subsections['primary-storage'].listView + .actions.add.createForm, + after: function(args) { + goTo('addSecondaryStorageIntro', 'primaryStorage', $addPrimaryStorageForm); + } + }); + var $addPrimaryStorageForm = $('
').addClass('setup-form').append( + addPrimaryStorageForm.$formContainer + ); + var $save = elems.nextButton('Continue', { type: 'submit' }).appendTo($addPrimaryStorageForm.find('form')); + var $title = $('
').addClass('title').html('Add Primary Storage'); + + $addPrimaryStorageForm.find('form').submit(function() { + addPrimaryStorageForm.completeAction($addPrimaryStorageForm); + + return false; + }); + + // Cleanup + $addPrimaryStorageForm.find('.message').remove(); + $addPrimaryStorageForm.find('.form-item').addClass('field').find('label.error').hide(); + $addPrimaryStorageForm.find('.form-item[rel=clusterId], .form-item[rel=podId]').remove(); + + return $addPrimaryStorage.append( + $addPrimaryStorageForm + .prepend($title) + ); + }, + + /** + * Add secondary storage intro text + * @param args + */ + addHostIntro: function(args) { + var $intro = $('
').addClass('intro'); + var $title = $('
').addClass('title') + .html('Let\'s add secondary storage.'); + var $subtitle = $('
').addClass('subtitle') + .html('What is a secondary storage?'); + var $copy = getCopy('whatIsSecondaryStorage', $('

')); + var $continue = elems.nextButton('OK'); + + $continue.click(function() { + goTo('addSecondaryStorage'); + + return false; + }); + + return $intro.append( + $title, $subtitle, + $copy, + $continue + ); + }, + + /** + * Add secondary storage + * @param args + */ + addSecondaryStorage: function(args) { + var $addSecondaryStorage = $('
').addClass('add-secondary-storage'); + var addSecondaryStorageForm = cloudStack.dialog.createForm({ + noDialog: true, + form: cloudStack.sections.system + .subsections['secondary-storage'].listView + .actions.add.createForm, + after: function(args) { + goTo('launchInfo', 'secondaryStorage', $addSecondaryStorageForm); + } + }); + var $addSecondaryStorageForm = $('
').addClass('setup-form').append( + addSecondaryStorageForm.$formContainer + ); + var $save = elems.nextButton('Continue', { type: 'submit' }).appendTo($addSecondaryStorageForm.find('form')); + var $title = $('
').addClass('title').html('Add Secondary Storage'); + + $addSecondaryStorageForm.find('form').submit(function() { + addSecondaryStorageForm.completeAction($addSecondaryStorageForm); + + return false; + }); + + // Cleanup + $addSecondaryStorageForm.find('.message').remove(); + $addSecondaryStorageForm.find('.form-item').addClass('field').find('label.error').hide(); + + return $addSecondaryStorage.append( + $addSecondaryStorageForm + .prepend($title) + ); + }, + + /** + * Pre-launch text + */ + launchInfo: function(args) { + var $intro = $('
').addClass('intro'); + var $title = $('
').addClass('title') + .html('Congratulations!.'); + var $subtitle = $('
').addClass('subtitle') + .html('Click the launch button.'); + var $copy = getCopy('whatIsACluster', $('

')); + var $continue = elems.nextButton('Launch'); + + $continue.click(function() { + goTo('launch'); + + return false; + }); + + return $intro.append( + $title, $subtitle, + $copy, + $continue + ); + }, + + /** + * Initiates launch tasks + */ + launch: function(args) { + var $intro = $('
').addClass('intro'); + var $title = $('
').addClass('title') + .html('Now building your cloud...') + .append($('').attr({ src: 'images/ajax-loader.gif' })); + var $subtitle = $('
').addClass('subtitle') + .html('You may want to get a cup of coffee right now.'); + + cloudStack.installWizard.action({ + response: { + success: function() { + complete(); + } + } + }); + + return $intro.append( + $title, $subtitle ); } }; - action({ - context: context, - response: { - success: function() { - complete(); - } - } - }); + var initialStep = steps.changeUser().addClass('step'); - $installWizard.append(steps.addZone).appendTo($container); + $installWizard.append( + $.merge( + elems.header(), + elems.body().append(initialStep) + ) + ).appendTo($container); }; -}(jQuery, cloudStack, testData)); \ No newline at end of file + + cloudStack.uiCustom.installWizard = installWizard; +}(jQuery, cloudStack, testData)); diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js index 239f7dbbab8..31d8f24daac 100644 --- a/ui/scripts/ui/widgets/listView.js +++ b/ui/scripts/ui/widgets/listView.js @@ -441,9 +441,8 @@ var $filters = $('
').addClass('filters reduced-hide'); $filters.append(''); - var $filterSelect = $('').appendTo($filters); - $filterSelect.append(''); // Always appears by default - + var $filterSelect = $('').appendTo($filters); + if (filters) $.each(filters, function(key) { var $option = $('