You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by sj...@apache.org on 2014/08/26 12:27:09 UTC
[3/7] git commit: Rework policy config editing
Rework policy config editing
* Uses generic modal view rather than managing a modal itself
* Improved error display
* Shows default values in policy config table
* Adds Brooklyn.view.showModalWith(View) shortcut
Project: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/commit/290a3427
Tree: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/tree/290a3427
Diff: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/diff/290a3427
Branch: refs/heads/master
Commit: 290a34272eb1e6449a01ba70f9a04e4d0c6c33dc
Parents: 8d63fdd
Author: Sam Corbett <sa...@cloudsoftcorp.com>
Authored: Wed Aug 20 12:08:00 2014 +0100
Committer: Sam Corbett <sa...@cloudsoftcorp.com>
Committed: Wed Aug 20 12:26:55 2014 +0100
----------------------------------------------------------------------
usage/jsgui/src/main/webapp/assets/css/base.css | 1 +
.../main/webapp/assets/js/libs/brooklyn-view.js | 16 ++++-
.../webapp/assets/js/view/entity-policies.js | 44 +++++-------
.../assets/js/view/policy-config-invoke.js | 75 ++++++++------------
.../main/webapp/assets/js/view/policy-new.js | 1 +
.../assets/tpl/apps/policy-config-modal.html | 41 -----------
.../main/webapp/assets/tpl/apps/policy-new.html | 2 +-
.../tpl/apps/policy-parameter-config.html | 30 ++++++++
8 files changed, 94 insertions(+), 116 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/290a3427/usage/jsgui/src/main/webapp/assets/css/base.css
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/css/base.css b/usage/jsgui/src/main/webapp/assets/css/base.css
index 66745d6..0c33eec 100644
--- a/usage/jsgui/src/main/webapp/assets/css/base.css
+++ b/usage/jsgui/src/main/webapp/assets/css/base.css
@@ -1276,6 +1276,7 @@ input.error {
word-wrap: break-word;
}
+#policy-config,
.has-no-policies {
margin-bottom: 9px;
}
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/290a3427/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-view.js
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-view.js b/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-view.js
index 584c031..5bc2bc7 100644
--- a/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-view.js
+++ b/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-view.js
@@ -128,7 +128,8 @@ define([
/**
* A view to render another view in a modal. Give another view to render as
- * the `body' parameter.
+ * the `body' parameter that has an onSubmit function that will be called
+ * when the modal's `Save' button is clicked.
*/
module.Modal = Backbone.View.extend({
@@ -158,8 +159,13 @@ define([
},
render: function() {
+ var optionalTitle = this.options.body.title;
+ var title = _.isFunction(optionalTitle)
+ ? optionalTitle()
+ : _.isString(optionalTitle)
+ ? optionalTitle : this.options.title;
this.$el.html(this.template({
- title: this.options.title
+ title: title
}));
this.options.body.render();
this.$(".modal-body").html(this.options.body.$el);
@@ -184,9 +190,13 @@ define([
}
return false;
}
-
});
+ /** Creates, displays and returns a modal with the given view used as its body */
+ module.showModalWith = function (bodyView) {
+ return new module.Modal({body: bodyView}).show();
+ };
+
/**
* Presents inputs for config key names/values with buttons to add/remove entries
* and a function to extract a map of name->value.
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/290a3427/usage/jsgui/src/main/webapp/assets/js/view/entity-policies.js
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/js/view/entity-policies.js b/usage/jsgui/src/main/webapp/assets/js/view/entity-policies.js
index 76480d9..7e254ea 100644
--- a/usage/jsgui/src/main/webapp/assets/js/view/entity-policies.js
+++ b/usage/jsgui/src/main/webapp/assets/js/view/entity-policies.js
@@ -67,12 +67,6 @@ define([
}});
},
- beforeClose: function() {
- if (this._modal) {
- this._modal.close();
- }
- },
-
render:function () {
if (this.viewIsClosed)
return;
@@ -164,7 +158,7 @@ define([
type:config.get("type"),
reconfigurable:config.get("reconfigurable"),
link:config.getLinkByName('self'),
- value:'' // will be set later
+ value: config.get("defaultValue")
}));
$tbody.find('*[rel="tooltip"]').tooltip();
});
@@ -187,7 +181,7 @@ define([
refreshPolicyConfig:function() {
var that = this;
- if (that.viewIsClosed) return;
+ if (that.viewIsClosed || !that.currentStateUrl) return;
var $table = that.$('#policy-config-table').dataTable(),
$rows = that.$("tr.policy-config-row");
$.get(that.currentStateUrl, function (data) {
@@ -196,33 +190,31 @@ define([
$rows.each(function (index, row) {
var key = $(this).find(".policy-config-name").text();
var v = data[key];
- if (v === undefined) v = "";
- $table.fnUpdate(_.escape(v), row, 1, false);
+ if (v !== undefined) {
+ $table.fnUpdate(_.escape(v), row, 1, false);
+ }
});
});
$table.dataTable().fnStandingRedraw();
},
- showPolicyConfigModal:function (evt) {
- evt.stopPropagation();
- // get the model that we need to show, create its view and show it
+ showPolicyConfigModal: function (evt) {
var cid = $(evt.currentTarget).attr("id");
- this._modal = new PolicyConfigInvokeView({
- el:"#policy-modal",
- model:this._config.get(cid),
- policy:this.model
- });
- this._modal.render().$el.modal('show');
+ var currentValue = $(evt.currentTarget)
+ .parent().parent()
+ .find(".policy-config-value")
+ .text();
+ Brooklyn.view.showModalWith(new PolicyConfigInvokeView({
+ model: this._config.get(cid),
+ policy: this.model,
+ currentValue: currentValue
+ }));
},
showNewPolicyModal: function () {
- var newPolicy = new Brooklyn.view.Modal({
- title: "Attach a policy",
- body: new NewPolicyView({
- entity: this.model
- })
- });
- newPolicy.show();
+ Brooklyn.view.showModalWith(new NewPolicyView({
+ entity: this.model
+ }));
},
callStart:function(event) { this.doPost(event, "start"); },
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/290a3427/usage/jsgui/src/main/webapp/assets/js/view/policy-config-invoke.js
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/js/view/policy-config-invoke.js b/usage/jsgui/src/main/webapp/assets/js/view/policy-config-invoke.js
index 4d22438..f1fbebc 100644
--- a/usage/jsgui/src/main/webapp/assets/js/view/policy-config-invoke.js
+++ b/usage/jsgui/src/main/webapp/assets/js/view/policy-config-invoke.js
@@ -21,63 +21,48 @@
*/
define([
"underscore", "jquery", "backbone",
- "text!tpl/apps/policy-config-modal.html",
+ "text!tpl/apps/policy-parameter-config.html",
"bootstrap"
-], function (_, $, Backbone, PolicyConfigModalHtml) {
+], function (_, $, Backbone, PolicyParameterConfigHtml) {
var PolicyConfigInvokeView = Backbone.View.extend({
- template: _.template(PolicyConfigModalHtml),
- events:{
- "click .save-policy-config":"savePolicyConfig",
- "shown": "onShow",
- "hide": "onHide"
- },
+ template: _.template(PolicyParameterConfigHtml),
- onShow: function() {
- this.delegateEvents();
- this.$el.fadeTo(500,1);
+ initialize: function () {
+ _.bindAll(this);
},
- onHide: function() {
- this.undelegateEvents();
+ render: function () {
+ this.$el.html(this.template({
+ name: this.model.get("name"),
+ description: this.model.get("description"),
+ type: this.model.get("type"),
+ value: this.options.currentValue || "",
+ policyName: this.options.policy.get("name")
+ }));
+ return this;
},
- render:function () {
+ onSubmit: function () {
var that = this,
- configUrl = that.model.getLinkByName("self");
- $.get(configUrl, function (data) {
- that.$el.html(that.template({
- name:that.model.get("name"),
- description:that.model.get("description"),
- type:that.model.get("type"),
- value:data,
- policyName:that.options.policy.get("name")
- }));
+ url = that.model.getLinkByName("self") + "/set",
+ val = that.$("#policy-config-value").val();
+ return $.ajax({
+ type: "POST",
+ url: url + "?value=" + val
+ }).fail(function(response) {
+ var message = JSON.parse(response.responseText).message;
+ that.showError(message);
});
- that.model = this.model;
- return that;
},
- savePolicyConfig:function () {
- var that = this,
- url = that.model.getLinkByName("self") + "/set",
- val = that.$("#policy-config-value").val();
- that.$el.fadeTo(500,0.5);
- $.ajax({
- type:"POST",
- url:url+"?value="+val,
- success:function (data) {
- that.$el.modal("hide");
- that.$el.fadeTo(500,1);
- },
- error:function(data) {
- that.$el.fadeTo(100,1).delay(200).fadeTo(200,0.2).delay(200).fadeTo(200,1);
- // TODO render the error better than poor-man's flashing
- console.error("ERROR setting config");
- console.debug(data);
- }});
- // un-delegate events
- that.undelegateEvents();
+ showError: function (message) {
+ this.$(".policy-add-error-container").removeClass("hide");
+ this.$(".policy-add-error-message").html(message);
+ },
+
+ title: function () {
+ return "Reconfigure " + this.options.policy.get("name")
}
});
return PolicyConfigInvokeView;
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/290a3427/usage/jsgui/src/main/webapp/assets/js/view/policy-new.js
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/js/view/policy-new.js b/usage/jsgui/src/main/webapp/assets/js/view/policy-new.js
index 069ef7d..16ba2c9 100644
--- a/usage/jsgui/src/main/webapp/assets/js/view/policy-new.js
+++ b/usage/jsgui/src/main/webapp/assets/js/view/policy-new.js
@@ -26,6 +26,7 @@ define([
return Backbone.View.extend({
template: _.template(NewPolicyHtml),
+ title: "Attach a policy",
initialize: function () {
if (!this.options.entity) {
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/290a3427/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-config-modal.html
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-config-modal.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-config-modal.html
deleted file mode 100644
index 44df226..0000000
--- a/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-config-modal.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<!-- modal to render policy config default value-->
-
-<div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h3>Reconfigure <%= policyName %></h3>
-</div>
-
-<div class="modal-body">
- <p>
- <strong>Update the value for <%= name %></strong>
- </p>
- <p>
- <%= description %>
- </p>
- <input id="policy-config-value" type="text" class="input-medium" name="value" value="<%= value %>">
-</div>
-
-<div class="modal-footer">
- <button type="button" class="btn btn-info btn-mini" data-dismiss="modal">Cancel</button>
- <button type="button" class="btn btn-danger btn-mini save-policy-config">Save</button>
-</div>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/290a3427/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-new.html
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-new.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-new.html
index 35f903e..44c877a 100644
--- a/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-new.html
+++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-new.html
@@ -31,7 +31,7 @@ under the License.
<div class="hide alert alert-error policy-add-error-container" style="margin-top: 9px;">
<strong>Error</strong>
- <span class="policy-add-error-message">Something went badly wrong</span>
+ <span class="policy-add-error-message"></span>
</div>
</form>
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/290a3427/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-parameter-config.html
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-parameter-config.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-parameter-config.html
new file mode 100644
index 0000000..fa52331
--- /dev/null
+++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-parameter-config.html
@@ -0,0 +1,30 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<p>
+ <strong>Update the value for <%= name %></strong>
+</p>
+<p>
+ <%= description %>
+</p>
+<input id="policy-config-value" type="text" class="input-xlarge" name="value" value="<%= value %>" autofocus />
+
+<div class="hide alert alert-error policy-add-error-container" style="margin-top: 9px; margin-bottom: 0;">
+ <strong>Error</strong>
+ <span class="policy-add-error-message"></span>
+</div>