catalog config can be set as annoation in app class, with simpler app creation syntax; and exposed in gui, including booleans in gui
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/c654ba88 Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/c654ba88 Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/c654ba88 Branch: refs/heads/0.5.0 Commit: c654ba8801559b81199b35c51302f6a056b51246 Parents: 52afc87 Author: Alex Heneveld <[email protected]> Authored: Fri Feb 8 16:06:51 2013 +0000 Committer: Alex Heneveld <[email protected]> Committed: Wed Feb 13 16:21:43 2013 +0000 ---------------------------------------------------------------------- .../assets/js/view/application-add-wizard.js | 149 ++++++++++++------- .../assets/tpl/app-add-wizard/deploy.html | 4 +- .../tpl/app-add-wizard/edit-config-entry.html | 12 +- .../app-add-wizard/required-config-entry.html | 15 ++ 4 files changed, 118 insertions(+), 62 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/c654ba88/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js b/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js index f7a3d98..adfad0b 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js @@ -9,6 +9,7 @@ define([ "text!tpl/app-add-wizard/create.html", "text!tpl/app-add-wizard/create-step-template-entry.html", "text!tpl/app-add-wizard/create-entity-entry.html", + "text!tpl/app-add-wizard/required-config-entry.html", "text!tpl/app-add-wizard/edit-config-entry.html", "text!tpl/app-add-wizard/deploy.html", @@ -20,8 +21,8 @@ define([ ], function (_, $, Backbone, Entity, Application, FormatJSON, Location, ModalHtml, CreateHtml, - CreateStepTemplateEntryHtml, CreateEntityEntryHtml, EditConfigEntryHtml, - DeployHtml, + CreateStepTemplateEntryHtml, CreateEntityEntryHtml, + RequiredConfigEntryHtml, EditConfigEntryHtml, DeployHtml, DeployLocationRowHtml, DeployLocationOptionHtml, PreviewHtml ) { @@ -37,14 +38,15 @@ define([ }, template:_.template(ModalHtml), initialize:function () { - this.model = new Application.Spec + this.model = {} + this.model.spec = new Application.Spec this.currentStep = 0; this.steps = [ { step_id:'what-app', title:'Create Application', instructions:'Choose or build the application to deploy', - view:new ModalWizard.StepCreate({ model:this.model}) + view:new ModalWizard.StepCreate({ model:this.model }) }, { step_id:'name-and-locations', @@ -56,7 +58,7 @@ define([ step_id:'preview', title:'Application Preview', instructions:'Confirm the code which will be sent to the server, optionally tweaking it or saving it for future reference', - view:new ModalWizard.StepPreview({ model:this.model}) + view:new ModalWizard.StepPreview({ model:this.model }) } ] }, @@ -82,7 +84,9 @@ define([ this.currentView = currentStep.view // delegate to sub-views !! - this.$(".modal-body").replaceWith(this.currentView.render().el) + this.currentView.render() + this.currentView.updateForState() + this.$(".modal-body").replaceWith(this.currentView.el) setVisibility(this.$("#prev_step"), (this.currentStep > 0)) setVisibility(this.$("#next_step"), (this.currentStep < 1)) @@ -98,7 +102,7 @@ define([ type:'post', contentType:'application/json', processData:false, - data:JSON.stringify(this.model.toJSON()), + data:JSON.stringify(this.model.spec.toJSON()), success:function (data) { $modal.modal('hide') $modal.fadeTo(500,1); @@ -179,13 +183,13 @@ define([ renderConfiguredEntities:function () { var $configuredEntities = this.$('#entitiesAccordionish').empty() var that = this - if (this.model.get("entities") && this.model.get("entities").length > 0) { - _.each(this.model.get("entities"), function (entity) { + if (this.model.spec.get("entities") && this.model.spec.get("entities").length > 0) { + _.each(this.model.spec.get("entities"), function (entity) { that.addEntityHtml($configuredEntities, entity) }) } }, - + updateForState: function () {}, render:function () { this.renderConfiguredEntities() this.delegateEvents() @@ -251,8 +255,8 @@ define([ $('.entity-info-message',$entityGroup).show('slow').delay(2000).hide('slow') return false } - var saveTarget = this.model.get("entities")[$entityGroup.index()]; - this.model.set("type", null) + var saveTarget = this.model.spec.get("entities")[$entityGroup.index()]; + this.model.spec.set("type", null) saveTarget.name = name saveTarget.type = type saveTarget.config = this.getConfigMap($entityGroup) @@ -277,7 +281,8 @@ define([ $('.entity-info-message').show('slow').delay(2000).hide('slow') return false } - this.model.set("type", type); + this.model.spec.set("type", type); + this.model.catalogEntityData = "LOAD" return true; }, saveAppClass:function () { @@ -288,12 +293,12 @@ define([ $('.entity-info-message').show('slow').delay(2000).hide('slow') return false } - this.model.set("type", type); + this.model.spec.set("type", type); return true; }, addEntityBox:function () { var entity = new Entity.Model - this.model.addEntity( entity ) + this.model.spec.addEntity( entity ) this.addEntityHtml($('#entitiesAccordionish', this.$el), entity) }, addEntityHtml:function (parent, entity) { @@ -304,7 +309,7 @@ define([ }, removeEntityClick:function (event) { var $entityGroup = $(event.currentTarget).parent().parent().parent(); - this.model.removeEntityIndex($entityGroup.index()) + this.model.spec.removeEntityIndex($entityGroup.index()) $entityGroup.remove() }, @@ -326,18 +331,18 @@ define([ allokay = that.saveEntity($($entityGroup)) & allokay }) if (!allokay) return false; - if (this.model.get("entities") && this.model.get("entities").length > 0) { - this.model.set("type", null); + if (this.model.spec.get("entities") && this.model.spec.get("entities").length > 0) { + this.model.spec.set("type", null); return true; } } else if (tabName=='#templateTab') { if (this.saveTemplate()) { - this.model.set("entities", []); + this.model.spec.set("entities", []); return true } } else if (tabName=='#appClassTab') { if (this.saveAppClass()) { - this.model.set("entities", []); + this.model.spec.set("entities", []); return true } } else { @@ -367,23 +372,23 @@ define([ locationOptionTemplate:_.template(DeployLocationOptionHtml), initialize:function () { - this.model.on("change", this.render, this) + this.model.spec.on("change", this.render, this) this.$el.html(this.template({})) this.locations = new Location.Collection() }, beforeClose:function () { - this.model.off("change", this.render) + this.model.spec.off("change", this.render) }, renderName:function () { - this.$('#application-name').val(this.model.get("name")) + this.$('#application-name').val(this.model.spec.get("name")) }, renderAddedLocations:function () { // renders the locations added to the model var that = this; var container = this.$("#selector-container") container.empty() - for (var li = 0; li < this.model.get("locations").length; li++) { - var chosenLocation = this.model.get("locations")[li]; + for (var li = 0; li < this.model.spec.get("locations").length; li++) { + var chosenLocation = this.model.spec.get("locations")[li]; container.append(that.locationRowTemplate({ initialValue: chosenLocation, rowId: li @@ -403,21 +408,35 @@ define([ }) }, render:function () { - var that = this + this.delegateEvents() + return this + }, + updateForState: function () { + var that = this this.renderName() this.locations.fetch({async:false, success:function () { - if (that.model.get("locations").length==0) - that.addLocation() - else - that.renderAddedLocations() + if (that.model.spec.get("locations").length==0) + that.addLocation() + else + that.renderAddedLocations() }}) - this.delegateEvents() - return this + + if (this.model.catalogEntityData==null) { + this.renderStaticConfig(null) + } else if (this.model.catalogEntityData=="LOAD") { + this.renderStaticConfig("LOADING") + $.get('/v1/catalog/entities/'+this.model.spec.get("type"), {}, function (result) { + that.model.catalogEntityData = result + that.renderStaticConfig(that.model.catalogEntityData) + }) + } else { + this.renderStaticConfig(this.model.catalogEntityData) + } }, addLocation:function () { if (this.locations.models.length>0) { - this.model.addLocation(this.locations.models[0].getLinkByName("self")) + this.model.spec.addLocation(this.locations.models[0].getLinkByName("self")) this.renderAddedLocations() } else { this.$('div.info-nolocs-message').show('slow').delay(2000).hide('slow') @@ -425,7 +444,7 @@ define([ }, removeLocation:function (event) { var toBeRemoved = $(event.currentTarget).parent().attr('rowId') - this.model.removeLocationIndex(toBeRemoved) + this.model.spec.removeLocationIndex(toBeRemoved) this.renderAddedLocations() }, addConfigRow:function (event) { @@ -433,13 +452,32 @@ define([ $(event.currentTarget).parent().prev().append($row) }, removeConfigRow:function (event) { - $(event.currentTarget).parent().remove() + $(event.currentTarget).parent().parent().remove() + }, + renderStaticConfig:function (catalogEntryItem) { + this.$('.config-table').html('') + if (catalogEntryItem=="LOADING") { + this.$('.required-config-loading').show() + } else { + this.$('.required-config-loading').hide() + if (catalogEntryItem!=null && catalogEntryItem.config!=null) { + var that = this + _.each(catalogEntryItem.config, function (cfg) { + that.$('.config-table').append(_.template(RequiredConfigEntryHtml, cfg)) + }) + } + } + // TODO add any manually added config }, getConfigMap:function() { var map = {} $('.app-add-wizard-config-entry').each( function (index,elt) { - map[$('#key',elt).val()] = $('#value',elt).val() + map[$('#key',elt).val()] = + $('#checkboxValue',elt).length ? $('#checkboxValue',elt).is(':checked') : + $('#value',elt).val() }) + log("CONFIG") + log(map) return map; }, selection:function (event) { @@ -447,19 +485,19 @@ define([ var loc = this.locations.find(function (candidate) { return candidate.getLinkByName("self")==url }) - this.model.setLocationAtIndex($(event.currentTarget).parent().attr('rowId'), + this.model.spec.setLocationAtIndex($(event.currentTarget).parent().attr('rowId'), loc.getLinkByName("self")) }, updateName:function () { var name = this.$('#application-name').val() if (name) - this.model.set("name", name) + this.model.spec.set("name", name) else - this.model.set("name", "") + this.model.spec.set("name", "") }, validate:function () { - this.model.set("config", this.getConfigMap()) - if (this.model.get("locations").length !== 0) { + this.model.spec.set("config", this.getConfigMap()) + if (this.model.spec.get("locations").length !== 0) { return true } this.$('div.info-message').show('slow').delay(2000).hide('slow') @@ -471,30 +509,31 @@ define([ className:'modal-body', initialize:function () { this.$el.html(_.template(PreviewHtml)) - this.model.on("change", this.render, this) + this.model.spec.on("change", this.render, this) }, beforeClose:function () { - this.model.off("change", this.render) + this.model.spec.off("change", this.render) }, - render:function () { - if (!this.model.get("entities") || this.model.get("entities").length==0) { - delete this.model.attributes["entities"] + updateForState: function () { + if (!this.model.spec.get("entities") || this.model.spec.get("entities").length==0) { + delete this.model.spec.attributes["entities"] } - if (!this.model.get("name")) - delete this.model.attributes["name"] - if (!this.model.get("config") || _.keys(this.model.get("config")).length==0) { - delete this.model.attributes["config"] + if (!this.model.spec.get("name")) + delete this.model.spec.attributes["name"] + if (!this.model.spec.get("config") || _.keys(this.model.spec.get("config")).length==0) { + delete this.model.spec.attributes["config"] } - - this.$('#app-summary').val(FormatJSON(this.model.toJSON())) + this.$('#app-summary').val(FormatJSON(this.model.spec.toJSON())) + }, + render:function () { this.delegateEvents() return this }, validate:function () { // need locations, and type or entities - if ((this.model.get("locations").length > 0) && - (this.model.get("type")!=null || - this.model.getEntities().length > 0)) { + if ((this.model.spec.get("locations").length > 0) && + (this.model.spec.get("type")!=null || + this.model.spec.getEntities().length > 0)) { return true } this.showFailure() http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/c654ba88/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/deploy.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/deploy.html b/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/deploy.html index b5def12..95470fd 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/deploy.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/deploy.html @@ -25,7 +25,9 @@ <div class="control-group"> <div class="app-add-wizard-create-entity-label-newline deploy-label">Configuration</div> - <div class="controls"></div> + <div class="required-config-loading"><i>Loading...</i></div> + <table class="config-table controls" cellspacing="5"> + </table> <div> <button id="add-config" class="btn btn-mini btn-info"> Add Configuration</button> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/c654ba88/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/edit-config-entry.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/edit-config-entry.html b/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/edit-config-entry.html index 366b4d7..ace00df 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/edit-config-entry.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/edit-config-entry.html @@ -1,8 +1,8 @@ -<div class="controls app-add-wizard-config-entry"> - <input id="key" type="text" class="input-medium" name="key" placeholder="key"> - <input id="value" type="text" class="input-medium" name="value" placeholder="value"> +<tr class="controls app-add-wizard-config-entry"> + <td><input id="key" type="text" class="input-medium" name="key" placeholder="key"></td> + <td><input id="value" type="text" class="input-medium" name="value" placeholder="value" style="width: 250px"></td> - <button id="remove-config" class="btn btn-info btn-mini" type="button"> + <td><button id="remove-config" class="btn btn-info btn-mini" type="button"> <i class="icon-minus-sign"></i> - </button> -</div> + </button></td> +</tr> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/c654ba88/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/required-config-entry.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/required-config-entry.html b/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/required-config-entry.html new file mode 100644 index 0000000..fb1f2d1 --- /dev/null +++ b/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/required-config-entry.html @@ -0,0 +1,15 @@ +<tr class="controls app-add-wizard-config-entry"> + <td><% if (label) { %><%= label %><% } else { %><%= name %><% } %> + <input id="key" type="text" class="input-medium" name="key" value="<%= name %>" style="display: none;"> + + </td> + <td> + <% if (type==="java.lang.Boolean" || type==="boolean") { %> + <input id="checkboxValue" type="checkbox" class="input-medium" name="checkboxValue" + <% if (defaultValue===true) { %> checked="checked" <% } %> > + <% } else { %> + <input id="value" type="text" class="input-medium" name="value" value="<%= defaultValue %>" style="width: 250px"> + <% } %> + </td> + <td></td> +</tr>
