Fixup
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/556d802e Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/556d802e Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/556d802e Branch: refs/heads/0.5.0 Commit: 556d802e4cfa15a8fca8756312218b96e9ea93b2 Parents: 056d4ac Author: Andrew Kennedy <[email protected]> Authored: Wed Feb 6 22:30:03 2013 +0000 Committer: Andrew Kennedy <[email protected]> Committed: Wed Feb 27 17:26:56 2013 +0000 ---------------------------------------------------------------------- .../assets/js/model/policy-config-summary.js | 1 + .../webapp/assets/js/view/entity-policies.js | 71 +++++++++++----- .../assets/js/view/policy-config-invoke.js | 55 +++++++++++++ .../js/view/policy-config-update-invoke.js | 87 -------------------- .../assets/tpl/apps/policy-config-modal.html | 5 +- .../assets/tpl/apps/policy-config-row.html | 4 +- .../src/main/webapp/assets/tpl/apps/policy.html | 6 +- 7 files changed, 115 insertions(+), 114 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/556d802e/usage/jsgui/src/main/webapp/assets/js/model/policy-config-summary.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/model/policy-config-summary.js b/usage/jsgui/src/main/webapp/assets/js/model/policy-config-summary.js index 392a1ba..a60e15c 100644 --- a/usage/jsgui/src/main/webapp/assets/js/model/policy-config-summary.js +++ b/usage/jsgui/src/main/webapp/assets/js/model/policy-config-summary.js @@ -11,6 +11,7 @@ define([ type:"", description:"", defaultValue:"", + value:"", reconfigurable:"", links:{ self:"", http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/556d802e/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 6bad6c3..b41e9de 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 @@ -5,21 +5,19 @@ * @type {*} */ define([ - "underscore", - "jquery", - "backbone", + "underscore", "jquery", "backbone", "model/policy-summary", "model/policy-config-summary", + "view/policy-config-invoke", "text!tpl/apps/policy.html", "text!tpl/apps/policy-row.html", "text!tpl/apps/policy-config-row.html", - "bootstrap" + "bootstrap" ], function ( - _, - $, - Backbone, + _, $, Backbone, PolicySummary, PolicyConfigSummary, + PolicyConfigInvokeView, PolicyHtml, PolicyRowHtml, PolicyConfigRowHtml @@ -28,13 +26,12 @@ define([ var EntityPoliciesView = Backbone.View.extend({ template:_.template(PolicyHtml), policyRow:_.template(PolicyRowHtml), - policyConfigRow:_.template(PolicyConfigRowHtml), events:{ "click #policies-table tr":"rowClick", "click .policy-start":"callStart", "click .policy-stop":"callStop", "click .policy-destroy":"callDestroy", -// "click .policy-config-edit":"policyConfigEdit", + "click .show-policy-config-modal":"showPolicyConfigModal", }, initialize:function () { this.$el.html(this.template({})) @@ -42,9 +39,6 @@ define([ this._policies = new PolicySummary.Collection() // fetch the list of policies and create a view for each one this._policies.url = this.model.getLinkByName("policies") - this.callPeriodically("entity-policies", function() { - that.refresh() - }, 3000) this.refresh() }, refresh: function() { @@ -91,17 +85,19 @@ define([ this.$("#policy-config-none-selected").show(100) } else { row.addClass("selected") + var that = this this.activePolicy = id // fetch the list of policy config entries var policy = this._policies.get(id) this._config = new PolicyConfigSummary.Collection() this._config.url = policy.getLinkByName("config") this._config.fetch({success:function () { - this.showPolicyConfig(id) + that.showPolicyConfig() }}) } }, - showPolicyConfig:function (id) { + showPolicyConfig:function () { + var that = this this.$("#policy-config-none-selected").hide(100) var $tc = this.$('#policy-config-table tbody').empty() if (this._config.length==0) { @@ -111,22 +107,57 @@ define([ var policyConfigRow = _.template(PolicyConfigRowHtml) this._config.each(function (config) { $tc.append(policyConfigRow({ + cid:config.cid, name:config.get("name"), description:config.get("description"), - defaultValue:config.get("defaultValue"), + type:config.get("type"), reconfigurable:config.get("reconfigurable"), + link:config.getLinkByName('self'), + value:"" // config.get("defaultValue"), /* will be re-set later */ })) // TODO tooltip doesn't work on 'i' elements in table (bottom left toolbar) $tc.find('*[rel="tooltip"]').tooltip() }) } this.$("#policy-config").show(100) - this.$("#policy-config-table").show(100) + this.$("#policy-config-table").dataTable().show(100) + var currentStateUrl = this._policies.get(that.activePolicy).getLinkByName("config") + "/current-state" + that.refreshPolicyConfig(currentStateUrl) + this.callPeriodically("entity-policy-config", function() { + that.refreshPolicyConfig(currentStateUrl) + }, 3000) + }, + refreshPolicyConfig:function (currentStateUrl) { + var that = this, + $table = that.$('#policy-config-table'), + $rows = that.$("tr.policy-config-row") + $.get(currentStateUrl, function (data) { + // iterate over the sensors table and update each sensor + $rows.each(function (index, row) { + var key = $(this).find(".policy-config-name").text() + var v = data[key] + if (v === undefined) v = "" + $table.dataTable().fnUpdate(_.escape(v), row, 1) + that._config.at(index).set("value", v) + }) + }) + }, + showPolicyConfigModal:function (evt) { + // get the model that we need to show, create its view and show it + var cid = $(evt.currentTarget).attr("id") + this._modal = new PolicyConfigInvokeView({ + el:"#policy-config-modal", + model:this._config.getByCid(cid), + policy:this.model, + }) + var a = this._modal.render() + a.$el.show() + a.$el.modal('show') }, - callStart: function(event) { this.doPost(event, "start") }, - callStop: function(event) { this.doPost(event, "stop") }, - callDestroy: function(event) { this.doPost(event, "destroy") }, - doPost: function(event, linkname) { + callStart:function(event) { this.doPost(event, "start") }, + callStop:function(event) { this.doPost(event, "stop") }, + callDestroy:function(event) { this.doPost(event, "destroy") }, + doPost:function(event, linkname) { var that = this var url = $(event.currentTarget).attr("link"); // trigger the event by ajax with attached parameters http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/556d802e/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 new file mode 100644 index 0000000..be38f67 --- /dev/null +++ b/usage/jsgui/src/main/webapp/assets/js/view/policy-config-invoke.js @@ -0,0 +1,55 @@ +/** + * Render a policy configuration key as a modal. + */ +define([ + "underscore", "jquery", "backbone", "text!tpl/apps/policy-config-modal.html", "bootstrap" +], function (_, $, Backbone, PolicyConfigModalHtml) { + + var PolicyConfigInvokeView = Backbone.View.extend({ + template:_.template(PolicyConfigModalHtml), + events:{ + "click .save-policy-config":"savePolicyConfig", + "shown":"unfade" + }, + render:function () { + var that = this, + configUrl = this.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"), + })) + }) + return this + }, + unfade: function() { + this.$el.fadeTo(500,1); + }, + savePolicyConfig:function () { + var that = this, + url = this.model.getLinkByName("self") + "/set", + val = this.$("#policy-config-value").val() + this.$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 + // (would just be connection error -- with timeout=0 we get a task even for invalid input) + log("ERROR setting config") + log(data) + }}) + // un-delegate events + this.undelegateEvents() + } + }) + return PolicyConfigInvokeView +}) http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/556d802e/usage/jsgui/src/main/webapp/assets/js/view/policy-config-update-invoke.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/policy-config-update-invoke.js b/usage/jsgui/src/main/webapp/assets/js/view/policy-config-update-invoke.js deleted file mode 100644 index 4053d87..0000000 --- a/usage/jsgui/src/main/webapp/assets/js/view/policy-config-update-invoke.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * Render an entity effector as a modal. - */ -define([ - "underscore", "jquery", "backbone", "text!tpl/apps/effector-modal.html", "text!tpl/apps/param.html", - "text!tpl/apps/param-list.html", "brooklyn-utils" -], function (_, $, Backbone, EffectorModalHtml, ParamHtml, ParamListHtml) { - - var EffectorInvokeView = Backbone.View.extend({ - template:_.template(EffectorModalHtml), - effectorParam:_.template(ParamHtml), - effectorParamList:_.template(ParamListHtml), - events:{ - "click .invoke-effector":"invokeEffector", - "shown":"unfade" - }, - render:function () { - var that = this, params = this.model.get("parameters") - this.$el.html(this.template({ - name:this.model.get("name"), - entityName:this.options.entity.get("name"), - description:this.model.get("description")?this.model.get("description"):"" - })) - // do we have parameters to render? - if (params.length !== 0) { - this.$(".modal-body").html(this.effectorParamList({})) - // select the body of the table we just rendered and append params - var $tbody = this.$("tbody") - _(params).each(function (param) { - $tbody.append(that.effectorParam({ - name:param.name, - type:param.type, - description:param.description?param.description:"" - })) - }) - } - this.$(".modal-body").find('*[rel="tooltip"]').tooltip() - return this - }, - unfade: function() { - this.$el.fadeTo(500,1); - }, - extractParamsFromTable:function () { - var parameters = {} - // iterate over the rows - this.$(".effector-param").each(function (index) { - var key = $(this).find(".param-name").text(), - value = $(this).find(".param-value").val() - // we need to create an object out of the input so it will send as the server expects: java Map - parameters[key] = $.parseJSON(value) - }) - return parameters - }, - invokeEffector:function () { - var that = this - var url = this.model.getLinkByName("self") - var parameters = this.extractParamsFromTable() - this.$el.fadeTo(500,0.5); - $.ajax({ - type:"POST", - url:url+"?timeout=0", - data:JSON.stringify(parameters), - contentType:"application/json", - success:function (data) { - that.$el.modal("hide") - that.$el.fadeTo(500,1); - // data.id contains the task, if we wanted to switch to showing it - // NB we now timeout immediately, so always run in background - // ideally we might have a timeout of 300ms - // switch to task if it is still running - // otherwise show the answer - // ... or simpler, just switch to task, so response can be shown - }, - 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 - // (would just be connection error -- with timeout=0 we get a task even for invalid input) - - log("ERROR invoking effector") - log(data) - }}) - // un-delegate events - this.undelegateEvents() - } - }) - return EffectorInvokeView -}) http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/556d802e/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 index 657551d..1e70918 100644 --- 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 @@ -8,11 +8,10 @@ </div> <div class="modal-body"> - <!-- what goes here --> - <p><i>No arguments required</i></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 invoke-effector">Save</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/brooklyn-ui/blob/556d802e/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-config-row.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-config-row.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-config-row.html index 66a5aa1..d67c750 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-config-row.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/policy-config-row.html @@ -2,10 +2,10 @@ <td><span class="policy-config-name" rel="tooltip" title="<b><%= description %></b><br/>(<%= type %>)" data-placement="left" ><%= name %></span></td> - <td class="policy-config-defautValue"><%= (defaultValue === undefined ? "" : defaultValue) %></td> + <td class="policy-config-value" style="word-wrap:break-word;"><%= value %></td> <td class="policy-config-action"> <% if (reconfigurable) { %> - <button class="btn btn-info btn-mini policy-config-edit" link="<%= config.getLinkByName('edit') %>">Edit</button> + <button class="btn btn-info btn-mini show-policy-config-modal" id="<%= cid %>">Edit</button> <% } %> </td> </tr> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/556d802e/usage/jsgui/src/main/webapp/assets/tpl/apps/policy.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/policy.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/policy.html index 1b322ac..9a8d41c 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/policy.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/policy.html @@ -17,8 +17,8 @@ <thead> <tr> <th width="40%">Name</th> - <th width="40%">Default Value</th> - <th width="20%">Edit</th> + <th width="50%">Default Value</th> + <th width="10%">Edit</th> </tr> </thead> <tbody></tbody> @@ -31,3 +31,5 @@ <div id="policy-config-none-selected"> <i>Select a policy above to view or edit configuration.</i> </div> + +<div id="policy-config-modal" class="modal hide fade"></div> \ No newline at end of file
