activities now expand in place, and show better formatted details (next up: filtering based on task type, and better task names)
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/e14c0e30 Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/e14c0e30 Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/e14c0e30 Branch: refs/heads/0.5.0 Commit: e14c0e304936097bd2eec1a23cbe013f03b4c0ab Parents: b4ddfb5 Author: Alex Heneveld <[email protected]> Authored: Tue Mar 5 18:04:42 2013 -0800 Committer: Alex Heneveld <[email protected]> Committed: Mon Mar 11 15:32:39 2013 +0000 ---------------------------------------------------------------------- .../src/main/webapp/assets/css/prettybrook.css | 28 ++++- .../img/glyphicons-halflings-bright-green.png | Bin 0 -> 26800 bytes .../img/glyphicons-halflings-dark-green.png | Bin 0 -> 27158 bytes .../assets/img/glyphicons-halflings-green.png | Bin 0 -> 27143 bytes .../webapp/assets/js/libs/brooklyn-utils.js | 15 +++ .../webapp/assets/js/view/entity-activities.js | 111 +++++++++++++------ .../main/webapp/assets/tpl/apps/activities.html | 2 +- .../assets/tpl/apps/activity-details.html | 3 - .../assets/tpl/apps/activity-full-details.html | 6 + .../assets/tpl/apps/activity-row-details.html | 23 ++++ .../src/main/webapp/assets/tpl/apps/page.html | 4 +- .../assets/tpl/catalog/add-location-modal.html | 4 +- .../main/webapp/assets/tpl/catalog/page.html | 6 +- 13 files changed, 152 insertions(+), 50 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e14c0e30/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 433adcf..f33e8a7 100644 --- a/usage/jsgui/src/main/webapp/assets/css/prettybrook.css +++ b/usage/jsgui/src/main/webapp/assets/css/prettybrook.css @@ -537,6 +537,22 @@ line-height: 18px; /* correct for textarea width oddity */ margin-right: 10px; } +#activities-table .toolbar-row i { + background-image: url("../img/glyphicons-halflings-dark-green.png"); + width: 18px; +} +#activities-table .toolbar-row i.active { + background-image: url("../img/glyphicons-halflings-green.png"); +} +#activities-table .toolbar-row i:hover, +#activities-table .toolbar-row i.active:hover { + background-image: url("../img/glyphicons-halflings-bright-green.png"); +} +#activities-table tr.activity-row:hover:not(.selected), +#activities-table tr.activity-row:hover:not(.selected) td, +#activities-table tr.activity-row:hover:not(.selected) td.sorting_1 { + background-color: #E4E8E2; +} /* effector modal dialog */ #params td { vertical-align: middle; @@ -561,6 +577,7 @@ table.dataTable thead th { text-align: left; background-color: #E0E4E0; line-height: 24px; +font-size: 110%; } table.dataTable { margin: 0; @@ -699,6 +716,9 @@ table.table.nonDatatables tbody tr.selected, table.table.nonDatatables tbody tr.selected td { background: #AC8; } +table.dataTable tbody td.row-expansion { + background: #D8E4D0; +} /* we keep the thin gray line between rows for manual tables, subtle difference but seems nice */ div.for-empty-table { @@ -1139,24 +1159,24 @@ textarea { margin-top: -18px !important; } -.icon-plus-sign { +.icon-br-plus-sign { background: url(../images/application-icon-add.png) top left !important; width: 15px !important; height: 15px !important; } -.icon-plus-sign:hover { +.icon-br-plus-sign:hover { background: url(../images/application-icon-add-hover.png) top left !important; } -.icon-refresh { +.icon-br-refresh { background: url(../images/application-icon-refresh.png) top left !important; width: 15px !important; height: 15px !important; } -.green-hover.icon-refresh:hover { +.icon-br-refresh:hover { background: url(../images/application-icon-refresh-hover.png) top left !important; } http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e14c0e30/usage/jsgui/src/main/webapp/assets/img/glyphicons-halflings-bright-green.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/img/glyphicons-halflings-bright-green.png b/usage/jsgui/src/main/webapp/assets/img/glyphicons-halflings-bright-green.png new file mode 100644 index 0000000..39473e0 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/img/glyphicons-halflings-bright-green.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e14c0e30/usage/jsgui/src/main/webapp/assets/img/glyphicons-halflings-dark-green.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/img/glyphicons-halflings-dark-green.png b/usage/jsgui/src/main/webapp/assets/img/glyphicons-halflings-dark-green.png new file mode 100644 index 0000000..6671579 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/img/glyphicons-halflings-dark-green.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e14c0e30/usage/jsgui/src/main/webapp/assets/img/glyphicons-halflings-green.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/img/glyphicons-halflings-green.png b/usage/jsgui/src/main/webapp/assets/img/glyphicons-halflings-green.png new file mode 100644 index 0000000..0616efb Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/img/glyphicons-halflings-green.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e14c0e30/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-utils.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-utils.js b/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-utils.js index 063ffca..e902158 100644 --- a/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-utils.js +++ b/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-utils.js @@ -18,6 +18,21 @@ function log(obj) { } } +function log(obj1, obj2) { + if (typeof window.console != 'undefined') { + console.log(obj1); + console.log(obj2); + } +} + +function log(obj1, obj2, obj3) { + if (typeof window.console != 'undefined') { + console.log(obj1); + console.log(obj2); + console.log(obj3); + } +} + function setVisibility(obj, visible) { if (visible) obj.show() else obj.hide() http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e14c0e30/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 e7473e6..d3a9702 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 @@ -3,17 +3,20 @@ */ define([ "underscore", "jquery", "backbone", "view/viewutils", - "text!tpl/apps/activities.html", "text!tpl/apps/activity-details.html", + "text!tpl/apps/activities.html", "text!tpl/apps/activity-row-details.html", "text!tpl/apps/activity-full-details.html", "bootstrap", "formatJson", "jquery-datatables", "datatables-extensions", "brooklyn-utils" -], function (_, $, Backbone, ViewUtils, ActivitiesHtml, ActivityDetailsHtml) { +], function (_, $, Backbone, ViewUtils, ActivitiesHtml, ActivityRowDetailsHtml, ActivityFullDetailsHtml) { var ActivitiesView = Backbone.View.extend({ template:_.template(ActivitiesHtml), table:null, refreshActive:true, + selectedId:null, + selectedRow:null, events:{ "click #activities-table tr":"rowClick", - 'click .toggleAutoRefresh':'toggleAutoRefresh' + 'click .toggleAutoRefresh':'toggleAutoRefresh', + 'click .toggleFullDetail':'toggleFullDetail' }, initialize:function () { this.$el.html(this.template({ })); @@ -24,17 +27,28 @@ define([ that.table = ViewUtils.myDataTable($table, { "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) { $(nRow).attr('id', aData[0]) + $(nRow).addClass('activity-row') }, "aoColumnDefs": [ { "mRender": function ( data, type, row ) { return prep(data) }, - "aTargets": [ 0, 1, 2, 3 ] + "aTargets": [ 1, 2, 3 ] }, { "bVisible": false, "aTargets": [ 0 ] } + // or could use a chevron +// { +// "mRender": function ( data, type, row ) { +// return '<i class="activity-expander icon-chevron-right handy"></i>' +// }, +// "bSortable": false, +// "sWidth": "20px", +// "aTargets": [ 0 ] +// } ] }); + // TODO domain-specific filters ViewUtils.addAutoRefreshButton(that.table); ViewUtils.addRefreshButton(that.table); @@ -57,6 +71,7 @@ define([ }, render:function () { var that = this; + $('.expanded-node', that.table).remove() if (that.table == null || this.collection.length==0) { $(".has-no-activities").show(); $("#activity-details-none-selected").hide(); @@ -79,53 +94,79 @@ define([ return this; }, rowClick:function(evt) { - // TODO link row click, and details stuff + +// $(this).toggleClass('icon-chevron-down icon-chevron-right') +// var open = $(this).hasClass('icon-chevron-down') + var row = $(evt.currentTarget).closest("tr"); var id = row.attr("id"); + + if (id==null) + // is the details row, ignore click here + return; + $("#activities-table tr").removeClass("selected"); - if (this.activeTask == id) { + + if (this.selectedRow!=null) + this.table.fnClose(this.selectedRow); + + if (this.selectedId == id) { // deselected + this.selectedRow = null; + this.selectedId = null; this.showFullActivity(null); + } else { row.addClass("selected"); - this.activeTask = id; - this.showFullActivity(id); + this.selectedRow = row[0]; + this.selectedId = id; + this.table.fnOpen(row[0], '', 'row-expansion'); + this.showDetailRow(); } }, - showFullActivity:function (id) { - $("#activity-details-none-selected").slideUp(100); + + showDetailRow: function() { + var task = this.collection.get(this.selectedId); + var html = _.template(ActivityRowDetailsHtml, { task: task==null ? null : task.attributes }) + $('.row-expansion').html(html) + }, + toggleFullDetail: function() { + var i = $('.toggleFullDetail'); + i.toggleClass('active') + if (i.hasClass('active')) + this.showFullActivity() + else + this.hideFullActivity() + }, + showFullActivity: function() { + var id = this.selectedId + $("#activity-details-none-selected").slideUp(50); var task = this.collection.get(id); if (task==null) { - this.activeTask = null; - $("#activity-details").slideUp(100); - $("#activity-details-none-selected").slideDown(100); + this.hideFullActivity(); 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()) - }); - $("#activity-details").html(html); - } + var html = _.template(ActivityFullDetailsHtml, { task: task }); + $("#activity-details").html(html); $("#activity-details").slideDown(100); + }, + hideFullActivity: function() { + $("#activity-details").slideUp(100); + $("#activity-details-none-selected").slideDown(50); } }); - ActivitiesView.Details = Backbone.View.extend({ - tagName:"div", - className:"modal hide", - template:_.template(ActivityDetailsHtml), - render:function () { - this.$el.html(this.template({ - displayName:this.model.get("displayName"), - description:FormatJSON(this.model.toJSON()) - })); - return this; - } - }); +// ActivitiesView.Details = Backbone.View.extend({ +// tagName:"div", +// className:"modal hide", +// template:_.template(ActivityFullDetailsHtml), +// render:function () { +// this.$el.html(this.template({ +// displayName:this.model.get("displayName"), +// description:FormatJSON(this.model.toJSON()) +// })); +// return this; +// } +// }); return ActivitiesView; }); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e14c0e30/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 9839826..622c058 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/activities.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/activities.html @@ -2,7 +2,7 @@ <table id="activities-table" width="100%"> <thead> <tr> - <th width="10%">ID</th> + <th width="1%"></th> <th width="40%">Task</th> <th width="30%">Submitted</th> <th width="30%">Status</th> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e14c0e30/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 deleted file mode 100644 index 136e8ae..0000000 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-details.html +++ /dev/null @@ -1,3 +0,0 @@ -<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/e14c0e30/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-full-details.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-full-details.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-full-details.html new file mode 100644 index 0000000..5c37272 --- /dev/null +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-full-details.html @@ -0,0 +1,6 @@ +<div class="for-activity-textarea"> + <textarea readonly="readonly" rows="16" style="width:100%;"><%= + //FormatJSON(task.toJSON()) + task.attributes.detailedStatus + %></textarea> +</div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e14c0e30/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-row-details.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-row-details.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-row-details.html new file mode 100644 index 0000000..553380f --- /dev/null +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-row-details.html @@ -0,0 +1,23 @@ +<div class="activity-row-details"> +<% if (task == null) { %> <i>No information available</i> <% } else { %> + <div style="float: right;" class="toolbar-row"> + <!-- <a class="handy icon-book toggleLog"></a> --> + <i class="handy icon-folder-open toggleFullDetail"></i> + </div> + <div><b><i><%= task.description %></i></b></div> + <div> + <% if (task.startTimeUtc) { %>started <%= task.startTimeUtc %><% + if (task.submitTimeUtc != task.startTimeUtc) { %> (submitted <%= task.submitTimeUtc %>)<% } + if (task.endTimeUtc) { %>, finished <%= task.endTimeUtc %> + <% } else { %>, in progress + <% } %> + <% } else { %> + submitted <%= task.submitTimeUtc %>, waiting + <% } %> + <% if (task.tags) { %> + <br/> + tags: <%= task.tags %> + <% } %> + </div> +<% } %> +</div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e14c0e30/usage/jsgui/src/main/webapp/assets/tpl/apps/page.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/page.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/page.html index a5314dd..b4a56dd 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/page.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/page.html @@ -3,9 +3,9 @@ <div class="navbar_top"> <h3>Applications</h3> <div class="apps-tree-toolbar"> - <i id="add-new-application" class="icon-plus-sign handy green-hover" /> + <i id="add-new-application" class="icon-br-plus-sign handy" /> - <i class="icon-refresh refresh handy green-hover" /> + <i class="icon-br-refresh refresh handy" /> </div> </div> <div class="navbar_main_wrapper cssninja"> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e14c0e30/usage/jsgui/src/main/webapp/assets/tpl/catalog/add-location-modal.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/catalog/add-location-modal.html b/usage/jsgui/src/main/webapp/assets/tpl/catalog/add-location-modal.html index 2fb1fb0..19d84a9 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/catalog/add-location-modal.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/catalog/add-location-modal.html @@ -27,7 +27,7 @@ <input id="key" type="text" class="input-medium" placeholder="key"> <input id="value" type="text" class="input-medium" placeholder="value"> <button id="add-location-config" class="btn btn-inverted btn-mini" type="button"> - <i class="icon-plus-sign"></i> + <i class="icon-br-plus-sign"></i> </button> </div> </div> @@ -44,4 +44,4 @@ <div class="modal-footer"> <button class="btn" data-dismiss="modal" type="button">Close</button> <button id="new-location-submit" class="btn btn-primary" type="button">Save</button> -</div> \ No newline at end of file +</div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e14c0e30/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html b/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html index b0ef309..dd6f100 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html @@ -5,9 +5,9 @@ <div class="navbar_top"> <h3>Catalog</h3> <div class="apps-tree-toolbar"> - <i id="add-new-thing" class="icon-plus-sign handy green-hover" /> + <i id="add-new-thing" class="icon-br-plus-sign handy" /> - <i class="icon-refresh refresh handy green-hover" /> + <i class="icon-br-refresh refresh handy" /> </div> </div> <div class="navbar_main_wrapper cssninja"> @@ -99,4 +99,4 @@ </form> </div> -<div class="modal hide fade" id="new-location-modal"></div> \ No newline at end of file +<div class="modal hide fade" id="new-location-modal"></div>
