You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by he...@apache.org on 2016/02/01 18:52:02 UTC
[29/50] [abbrv] brooklyn-ui git commit: catalog config can be set as
annoation in app class, with simpler app creation syntax;
and exposed in gui, including booleans in gui
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 <al...@cloudsoftcorp.com>
Authored: Fri Feb 8 16:06:51 2013 +0000
Committer: Alex Heneveld <al...@cloudsoftcorp.com>
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>