activity page shows "choose a task" message, and summary page has a few more details called out
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/bb3565b8 Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/bb3565b8 Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/bb3565b8 Branch: refs/heads/0.5.0 Commit: bb3565b8bd601a2966a93db2bc1d7bf56eadae1a Parents: e0e98a3 Author: Alex Heneveld <[email protected]> Authored: Thu Dec 6 18:02:27 2012 -0500 Committer: Alex Heneveld <[email protected]> Committed: Thu Dec 6 18:02:27 2012 -0500 ---------------------------------------------------------------------- .../src/main/webapp/assets/css/prettybrook.css | 9 ++++ .../webapp/assets/js/view/entity-activities.js | 25 ++++++++--- .../main/webapp/assets/js/view/entity-config.js | 5 +-- .../webapp/assets/js/view/entity-sensors.js | 5 +-- .../webapp/assets/js/view/entity-summary.js | 35 ++++++++++++--- .../main/webapp/assets/js/view/script-groovy.js | 39 +++------------- .../src/main/webapp/assets/js/view/viewutils.js | 47 +++++++++++++++++++- .../main/webapp/assets/tpl/apps/activities.html | 7 ++- .../assets/tpl/apps/activity-details.html | 2 +- .../main/webapp/assets/tpl/apps/summary.html | 42 ++++++++++++++++- 10 files changed, 159 insertions(+), 57 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/bb3565b8/usage/jsgui/src/main/webapp/assets/css/prettybrook.css ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/css/prettybrook.css b/usage/jsgui/src/main/webapp/assets/css/prettybrook.css index 3e1fa1f..8e7fb25 100644 --- a/usage/jsgui/src/main/webapp/assets/css/prettybrook.css +++ b/usage/jsgui/src/main/webapp/assets/css/prettybrook.css @@ -528,6 +528,15 @@ line-height: 18px; width: auto; } +.app-summary .inforow > div { display: inline-block; } +.app-summary .inforow .name { font-weight: 700; width: 80px; padding-right: 12px;} +.app-summary > .name { margin-bottom: 18px; } +.app-summary .json { margin-top: 18px; } + +#activity-details div.for-activity-textarea { + /* correct for textarea width oddity */ + margin-right: 10px; +} /* effector modal dialog */ #params td { vertical-align: middle; http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/bb3565b8/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js b/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js index fb30921..94e1a23 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js @@ -30,6 +30,7 @@ define([ $tbody = this.$("#activities-table tbody").empty() if (this.collection.length==0) { this.$(".has-no-activities").show(); + this.$("#activity-details-none-selected").hide() } else { this.$(".has-no-activities").hide(); this.collection.each(function (task) { @@ -45,6 +46,8 @@ define([ if (that.activeTask) { $("#activities-table tr[id='"+that.activeTask+"']").addClass("selected") that.showFullActivity(that.activeTask) + } else { + this.$("#activity-details-none-selected").show() } }) } @@ -56,8 +59,7 @@ define([ $("#activities-table tr").removeClass("selected") if (this.activeTask == id) { // deselected - this.activeTask = null - this.$("#activity-details").hide(100) + this.showFullActivity(null) } else { row.addClass("selected") this.activeTask = id @@ -65,16 +67,25 @@ define([ } }, showFullActivity:function (id) { + this.$("#activity-details-none-selected").hide(100) var task = this.collection.get(id) if (task==null) { this.activeTask = null this.$("#activity-details").hide(100) + this.$("#activity-details-none-selected").show(100) + return + } + + var $ta = this.$("#activity-details textarea") + if ($ta.length) { + $ta.val(FormatJSON(task.toJSON())) + } else { + var html = _.template(ActivityDetailsHtml, { + displayName:this.model.get("displayName"), + description:FormatJSON(task.toJSON()) + }) + this.$("#activity-details").html(html) } - var html = _.template(ActivityDetailsHtml, { - displayName:this.model.get("displayName"), - description:FormatJSON(task.toJSON()) - }) - this.$("#activity-details").html(html) this.$("#activity-details").show(100) } }) http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/bb3565b8/usage/jsgui/src/main/webapp/assets/js/view/entity-config.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/entity-config.js b/usage/jsgui/src/main/webapp/assets/js/view/entity-config.js index 899b0a4..5cf7482 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/entity-config.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/entity-config.js @@ -20,7 +20,6 @@ define([ $table = this.$('#config-table'), $tableBody = this.$('tbody').empty(), that = this - this.viewUtils = new ViewUtils({}) configCollection.url = this.model.getLinkByName('config') var success = function () { configCollection.each(function (config) { @@ -32,7 +31,7 @@ define([ })) }) that.updateConfigPeriodically(that) - that.viewUtils.myDataTable($table) + ViewUtils.myDataTable($table) // TODO tooltip doesn't work on 'i' elements in table (bottom left toolbar) $table.find('*[rel="tooltip"]').tooltip() } @@ -43,7 +42,7 @@ define([ return this }, toggleFilterEmpty: function() { - this.viewUtils.toggleFilterEmpty(this.$('#config-table'), 1) + ViewUtils.toggleFilterEmpty(this.$('#config-table'), 1) }, refreshConfig:function () { this.updateConfigNow(this); http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/bb3565b8/usage/jsgui/src/main/webapp/assets/js/view/entity-sensors.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/entity-sensors.js b/usage/jsgui/src/main/webapp/assets/js/view/entity-sensors.js index 19c5cdc..63c9b04 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/entity-sensors.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/entity-sensors.js @@ -20,7 +20,6 @@ define([ $table = this.$('#sensors-table'), $tableBody = this.$('tbody').empty(), that = this - this.viewUtils = new ViewUtils({}) sensorsCollection.url = this.model.getLinkByName('sensors') var success = function () { sensorsCollection.each(function (sensor) { @@ -39,7 +38,7 @@ define([ })) }) that.updateSensorsPeriodically(that) - that.viewUtils.myDataTable($table) + ViewUtils.myDataTable($table) // TODO tooltip doesn't work on 'i' elements in table (bottom left toolbar) $table.find('*[rel="tooltip"]').tooltip() } @@ -50,7 +49,7 @@ define([ return this }, toggleFilterEmpty: function() { - this.viewUtils.toggleFilterEmpty(this.$('#sensors-table'), 2) + ViewUtils.toggleFilterEmpty(this.$('#sensors-table'), 2) }, refreshSensors:function () { this.updateSensorsNow(this); http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/bb3565b8/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js b/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js index 2f7ef84..2d587ca 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js @@ -3,17 +3,42 @@ * @type {*} */ define([ - "underscore", "jquery", "backbone", "text!tpl/apps/summary.html", "formatJson" -], function (_, $, Backbone, SummaryHtml) { + "underscore", "jquery", "backbone", "view/viewutils", + "text!tpl/apps/summary.html", "formatJson", "brooklyn-utils" +], function (_, $, Backbone, ViewUtils, SummaryHtml) { var EntitySummaryView = Backbone.View.extend({ template:_.template(SummaryHtml), - render:function () { + initialize: function() { + var that = this + var ej = FormatJSON(this.model.toJSON()); this.$el.html(this.template({ - entity:FormatJSON(this.model.toJSON()), - application:FormatJSON(this.options.application.toJSON()) + entity:this.model, + application:this.options.application, + entityJson:ej, + applicationJson:FormatJSON(this.options.application.toJSON()) })) + ViewUtils.updateTextareaWithData($(".for-textarea", this.$el), ej, true, 150, 400) + ViewUtils.attachToggler(this.$el) + that.callPeriodically("entity-summary-sensors", + function() { that.updateSensorsNow(that) }, 3000) + that.updateSensorsNow(that) + }, + render:function () { return this + }, + revealIfHasValue: function(that, sensor, $div) { + $.ajax({ + url: that.model.getLinkByName("sensors")+"/"+sensor, + contentType:"application/json", + success:function (data) { + $(".value", $div).html(_.escape(data)) + $div.show() + }}) + }, + updateSensorsNow: function(that) { + that.revealIfHasValue(that, "service.isUp", that.$(".serviceUp")) + that.revealIfHasValue(that, "service.state", that.$(".status")) } }) http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/bb3565b8/usage/jsgui/src/main/webapp/assets/js/view/script-groovy.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/script-groovy.js b/usage/jsgui/src/main/webapp/assets/js/view/script-groovy.js index 0e457de..a9610f8 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/script-groovy.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/script-groovy.js @@ -1,5 +1,6 @@ define([ "underscore", "jquery", "backbone", + "view/viewutils", "text!tpl/script/groovy.html", "jquery-slideto", @@ -7,8 +8,8 @@ define([ "jquery-ba-bbq", "handlebars", "bootstrap", - "brooklyn-utils" -], function (_, $, Backbone, GroovyHtml) { + "brooklyn-utils", +], function (_, $, Backbone, ViewUtils, GroovyHtml) { var ScriptGroovyView = Backbone.View.extend({ tagName:"div", @@ -26,24 +27,11 @@ define([ this.$el.html(_.template(GroovyHtml, {})) $(".output", this.$el).hide() $(".output .toggler-region", this.$el).hide() - $(".toggler-header", this.$el).click(this.toggleNext) + ViewUtils.attachToggler(this.$el) }, render:function (eventName) { return this }, - toggleNext: function(event) { - var root = $(event.currentTarget).closest(".toggler-header"); - root.toggleClass("user-hidden"); - $(".toggler-icon", root). - toggleClass("icon-chevron-left"). - toggleClass("icon-chevron-down"); - - var next = root.next(); - if (root.hasClass("user-hidden")) - next.hide('fast'); - else - next.show('fast') - }, loadExample: function() { $(".input textarea").val( 'import static brooklyn.entity.basic.Entities.*\n'+ @@ -59,24 +47,7 @@ define([ 'return mgmt.applications\n') }, updateTextareaWithData: function($div, data, alwaysShow) { - var $ta = $("textarea", $div) - var show = alwaysShow - if (data !== undefined) { - $ta.val(data) - show = true - } else { - $ta.val("") - } - if (show) { - log("foo") - $div.show(100) - $ta.css("height", 50); - var height = Math.min($ta.prop("scrollHeight"), 350) - $ta.css("height", height); - log(height) - } else { - $div.hide() - } + ViewUtils.updateTextareaWithData($div, data, alwaysShow, 50, 350) }, submitScript: function() { var that = this; http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/bb3565b8/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js b/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js index b802119..7572ffd 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js @@ -2,7 +2,7 @@ define([ "underscore", "jquery", "backbone" ], function (_, $, Backbone) { - var ViewUtils = Backbone.View.extend({ + var ViewUtils = { myDataTable:function($table) { $table.dataTable({ @@ -39,8 +39,51 @@ define([ toggleClass('icon-eye-open icon-eye-close').hasClass('icon-eye-close') if (hideEmpties) $table.dataTable().fnFilter('.+', column, true); else $table.dataTable().fnFilter('.*', column, true); + }, + + attachToggler: function($scope) { + var $togglers; + if ($scope === undefined) $togglers = $(".toggler-header") + else $togglers = $(".toggler-header", $scope); + $togglers.click(this.onTogglerClick) + }, + onTogglerClick: function(event) { + var root = $(event.currentTarget).closest(".toggler-header"); + root.toggleClass("user-hidden"); + $(".toggler-icon", root). + toggleClass("icon-chevron-left"). + toggleClass("icon-chevron-down"); + + var next = root.next(); + if (root.hasClass("user-hidden")) + next.hide('fast'); + else + next.show('fast') + }, + + updateTextareaWithData: function($div, data, alwaysShow, minPx, maxPx) { + var $ta = $("textarea", $div) + var show = alwaysShow + if (data !== undefined) { + $ta.val(data) + show = true + } else { + $ta.val("") + } + if (show) { + $div.show(100) + $ta.css("height", minPx); + // scrollHeight prop works sometimes (e.g. groovy page) but not others (e.g. summary) + var height = $ta.prop("scrollHeight") + height = Math.min(height, maxPx) + height = Math.max(height, minPx) + $ta.css("height", height); + } else { + $div.hide() + } } - }) + } + return ViewUtils }) \ No newline at end of file http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/bb3565b8/usage/jsgui/src/main/webapp/assets/tpl/apps/activities.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/activities.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/activities.html index 8dbe3ec..d894035 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/activities.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/activities.html @@ -12,4 +12,9 @@ <i>No activities currently available on this entity</i> </div> -<div id="activity-details"></div> +<div id="activity-details"> +</div> + +<div id="activity-details-none-selected"> + <i>Select an entity above to view details.</i> +</div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/bb3565b8/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-details.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-details.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-details.html index 83faca7..136e8ae 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-details.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-details.html @@ -1,3 +1,3 @@ -<div> +<div class="for-activity-textarea"> <textarea readonly="readonly" rows="16" style="width:100%;"><%= description %></textarea> </div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/bb3565b8/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html index baf8863..48f5d23 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html @@ -1 +1,41 @@ -<textarea readonly="readonly" rows="25"><%= entity %></textarea> +<div class="app-summary"> + + <div class="name"> + <h2><%= entity.get('name') %></h2> + </div> + + <div class="id inforow"> + <div class="name">ID</div> + <div class="value"><%= entity.get('id') %></div> + </div> + + <div class="status inforow hide"> + <div class="name">Status</div> + <div class="value"><i>Loading...</i></div> + </div> + <div class="serviceUp inforow hide"> + <div class="name">Available</div> + <div class="value"><i>Loading...</i></div> + </div> + <!-- TODO + <div class="toggler-region location inforow"> + <div class="name">Location</div> + <div class="value"><i>Loading...</i></div> + </div> + --> + <!-- TODO + parent, app, children + map + --> + + <div class="toggler-region json"> + <div class="toggler-header"> + <div class="toggler-icon icon-chevron-down"></div> + <div><b>JSON</b></div> + </div> + <div class="for-textarea"> + <textarea id="json-textrea" readonly="readonly"><%= entityJson %></textarea> + </div> + </div> + +</div> \ No newline at end of file
