jsgui for activities - supports drill-down, shows details inline, clearer state icons, fixes some hover issues
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/96a49a3a Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/96a49a3a Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/96a49a3a Branch: refs/heads/0.6.0 Commit: 96a49a3af58349029f82e950936a479285b2aa40 Parents: e38b10b Author: Alex Heneveld <[email protected]> Authored: Wed Mar 13 01:35:08 2013 +0000 Committer: Alex Heneveld <[email protected]> Committed: Wed Aug 7 11:07:59 2013 +0100 ---------------------------------------------------------------------- usage/jsgui/src/main/webapp/assets/css/base.css | 124 ++++++++++-- .../webapp/assets/js/libs/brooklyn-utils.js | 1 - .../webapp/assets/js/view/entity-activities.js | 190 ++++++++++++++----- .../main/webapp/assets/js/view/entity-config.js | 12 +- .../webapp/assets/js/view/entity-policies.js | 12 +- .../webapp/assets/js/view/entity-sensors.js | 5 +- .../src/main/webapp/assets/js/view/viewutils.js | 13 +- .../main/webapp/assets/tpl/apps/activities.html | 15 +- .../assets/tpl/apps/activity-full-details.html | 2 +- .../tpl/apps/activity-row-details-main.html | 12 ++ .../assets/tpl/apps/activity-row-details.html | 32 ++-- .../webapp/assets/tpl/apps/activity-table.html | 11 ++ .../webapp/assets/tpl/apps/sensor-name.html | 2 +- 13 files changed, 309 insertions(+), 122 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/96a49a3a/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 5a7838c..acbde88 100644 --- a/usage/jsgui/src/main/webapp/assets/css/base.css +++ b/usage/jsgui/src/main/webapp/assets/css/base.css @@ -550,26 +550,63 @@ line-height: 18px; .app-summary > .name { margin-bottom: 12px; } .app-summary .json { margin-top: 18px; } -#activity-details div.for-activity-textarea { +table.dataTable tbody td.row-expansion { + background: #D8E4D0; +} +table.dataTable.activity-table tbody td.row-expansion { + background: #FFFFFF; +} + +#activities-table-group div.for-activity-textarea { /* correct for textarea width oddity */ margin-right: 10px; + margin-top: 6px; } -#activities-table .toolbar-row i { - background-image: url("../img/glyphicons-halflings-dark-green.png"); +#activities-table-group div.for-activity-textarea textarea { + margin-bottom: 0px; + border-color: #BBB; +} +#activities-root .toolbar-row i { + background-image: url("../img/glyphicons-halflings.png"); width: 18px; } -#activities-table .toolbar-row i.active { - background-image: url("../img/glyphicons-halflings-green.png"); +#activities-root .toolbar-row i.active { + background-image: url("../img/glyphicons-halflings-bright-green.png"); +} +#activities-root .toolbar-row { + padding-top: 1px; } -#activities-table .toolbar-row i:hover, -#activities-table .toolbar-row i.active:hover { - background-image: url("../img/glyphicons-halflings-bright-green.png"); +#activities-root .toolbar-row i:hover, +#activities-root .toolbar-row i.active:hover { + background-image: url("../img/glyphicons-halflings-dark-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; +table.dataTable td.row-expansion { + padding-top: 0px; } +.opened-row-details { + display: block; + font-size: 90%; + + border-top: dotted whiteSmoke 1px; + margin-top: 0px; + padding-top: 2px; + + margin-left: -6px; + margin-right: -6px; + padding-left: 6px; + padding-right: 6px; + + margin-bottom: 4px; + padding-bottom: 6px; + border-right: dotted gray 1px; + border-bottom: dotted gray 1px; + border-left: dotted gray 1px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + + background: #D8E0D4; +} + /* effector modal dialog */ #params td { vertical-align: middle; @@ -590,6 +627,37 @@ background-color: #F9F9F9; table.dataTable tr.even { background-color: #FFFFFF; } +table.dataTable tbody tr.selected, +table.dataTable tr.odd.selected td.sorting_1, +table.dataTable tr.even.selected td.sorting_1 { + background: #B8C8B0; +} +table.nonDatatables tr:hover, +table.nonDatatables tr.odd:hover, +table.nonDatatables tr.even:hover, +table.dataTable tr:hover:not(.selected), +table.dataTable tr.odd:hover:not(.selected), +table.dataTable tr.even:hover:not(.selected), +table.nonDatatables tr:hover td, +table.nonDatatables tr.odd:hover td, +table.nonDatatables tr.even:hover td, +table.dataTable tr:hover:not(.selected) td:not(.row-expansion), +table.dataTable tr:hover:not(.selected) td.sorting_1:not(.row-expansion), +table.dataTable tr.odd:hover:not(.selected) td:not(.row-expansion), +table.dataTable tr.even:hover:not(.selected) td:not(.row-expansion) { + background-color: #E0E4E0; +} +table.dataTable tbody tr.selected:hover, +table.dataTable tr.odd.selected td.sorting_1:hover, +table.dataTable tr.even.selected td.sorting_1:hover { + background: #98B890; +} + +table.dataTable.activity-table tbody tr.activity-row, +table.nonDatatables#policies-table tbody tr.policy-row { + cursor: hand; cursor: pointer; +} + table.dataTable thead th { text-align: left; background-color: #E0E4E0; @@ -724,18 +792,10 @@ table.table.nonDatatables tbody > tr:first-child > td { /* need both bottom of head, and top of body, to support empty table and override non-empty row top border */ border-top: 1px black solid; } -table.dataTable tbody tr.selected, -table.dataTable tr.odd.selected td.sorting_1, -table.dataTable tr.even.selected td.sorting_1 { - background: #AC8 !important; -}, 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 { @@ -1053,4 +1113,26 @@ input[type="file"] { .padded-div { padding: 0.5em 1.2em; -} \ No newline at end of file +} + +/* this is used in activities, for when we slide in a panel e.g. for sub-table */ +.slide-panel-group { + width: 569px; +} +.slide-panel { + position: relative; + width: 569px; + margin-right: -569px; + float: left; +} +.subpanel-header-row { + color: black; + background-color: #b8b8b8; + padding-top: 12px; + padding-bottom: 12px; + margin-bottom: 24px; + padding-left: 12px; + vertical-align: top; + font-weight: 700; + font-size: 120%; +} http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/96a49a3a/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 faeecae..7a19b3a 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 @@ -41,4 +41,3 @@ define([ }); - http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/96a49a3a/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 53e8f3c..30d6265 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,9 +3,12 @@ */ define([ "underscore", "jquery", "backbone", "brooklyn-utils", "view/viewutils", - "text!tpl/apps/activities.html", "text!tpl/apps/activity-row-details.html", "text!tpl/apps/activity-full-details.html", + "text!tpl/apps/activities.html", "text!tpl/apps/activity-table.html", + "text!tpl/apps/activity-row-details.html", "text!tpl/apps/activity-row-details-main.html", + "text!tpl/apps/activity-full-details.html", "bootstrap", "formatJson", "jquery-datatables", "datatables-extensions" -], function (_, $, Backbone, Util, ViewUtils, ActivitiesHtml, ActivityRowDetailsHtml, ActivityFullDetailsHtml) { +], function (_, $, Backbone, Util, ViewUtils, + ActivitiesHtml, ActivityTableHtml, ActivityRowDetailsHtml, ActivityRowDetailsMainHtml, ActivityFullDetailsHtml) { var ActivitiesView = Backbone.View.extend({ template:_.template(ActivitiesHtml), @@ -14,16 +17,19 @@ define([ selectedId:null, selectedRow:null, events:{ - "click #activities-table tr":"rowClick", + "click .activity-table tr":"rowClick", 'click .refresh':'refreshNow', 'click .toggleAutoRefresh':'toggleAutoRefresh', + 'click .showDrillDown':'showDrillDown', + 'click .backDrillDown':'backDrillDown', 'click .toggleFullDetail':'toggleFullDetail' }, initialize:function () { this.$el.html(this.template({ })); + this.$('#activities-root').html(_.template(ActivityTableHtml)) $.ajaxSetup({ async:false }); var that = this, - $table = that.$('#activities-table'); + $table = that.$('#activities-root .activity-table'); that.collection.url = that.model.getLinkByName("activities"); that.table = ViewUtils.myDataTable($table, { "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) { @@ -38,15 +44,6 @@ define([ "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 ] -// } ] }); @@ -64,6 +61,10 @@ define([ refreshNow: function() { this.collection.fetch({reset: true}); }, + render:function () { + this.updateActivitiesNow(this); + return this; + }, beforeClose:function () { this.collection.off("reset", this.render); }, @@ -73,49 +74,44 @@ define([ enableAutoRefresh: function(isEnabled) { this.refreshActive = isEnabled }, - render:function () { + refreshNow: function() { + this.collection.fetch(); + this.table.fnAdjustColumnSizing(); + }, + updateActivitiesNow: function() { var that = this; if (that.table == null || this.collection.length==0) { // nothing to do } else { ViewUtils.updateMyDataTable(that.table, that.collection, function(task, index) { - return [ - // columns are: id, name, when submitted, status - task.get("id"), - task.get("displayName"), - task.get("submitTimeUtc"), - task.get("currentStatus") - ]; - //also have: -// startTimeUtc:task.get("startTimeUtc"), -// endTimeUtc:task.get("endTimeUtc"), -// entityDisplayName:task.get("entityDisplayName") - }) + return [ task.get("id"), + task.get("displayName"), + task.get("submitTimeUtc"), + task.get("currentStatus") + ]; + }); this.showDetailRow(true); } return this; }, rowClick:function(evt) { - -// $(this).toggleClass('icon-chevron-down icon-chevron-right') -// var open = $(this).hasClass('icon-chevron-down') - var that = this; var row = $(evt.currentTarget).closest("tr"); + var table = $(evt.currentTarget).closest(".activity-table"); var id = row.attr("id"); if (id==null) // is the details row, ignore click here return; - - $("#activities-table tr").removeClass("selected"); + + $(table).find("tr").removeClass("selected"); if (this.selectedRow!=null) { var r = this.selectedRow; // slide it up, then close once it is hidden (else it vanishes suddenly) // the slide effect isn't just cool, it helps keep rows in a visually consistent place // (so that it doesn't just jump when you click, if a row above it was previously selected) - $('tr[#'+id+'] .activity-row-details').slideUp(50, "swing", function() { + $('tr[#'+id+'] .opened-row-details').slideUp(300, function() { that.table.fnClose(r); }) } @@ -124,7 +120,8 @@ define([ // deselected this.selectedRow = null; this.selectedId = null; - this.showFullActivity(null); + this.hideFullActivity(id); +// this.showDrillDown(null); } else { row.addClass("selected"); this.selectedRow = row[0]; @@ -135,37 +132,126 @@ define([ }, showDetailRow: function(updateOnly) { - var id = this.selectedId; + var id = this.selectedId, + that = this; if (id==null) return; var task = this.collection.get(id); if (task==null) return; - var html = _.template(ActivityRowDetailsHtml, { task: task==null ? null : task.attributes, updateOnly: updateOnly }) - $('tr#'+id).next().find('.row-expansion').html(html) - $('tr#'+id).next().find('.row-expansion .activity-row-details').slideDown(50); + if (!updateOnly) { + var html = _.template(ActivityRowDetailsHtml, { + task: task==null ? null : task.attributes, + link: that.model.getLinkByName("activities")+"/"+id, + updateOnly: updateOnly + }) + $('tr#'+id).next().find('td.row-expansion').html(html) + $('tr#'+id).next().find('td.row-expansion').attr('id', id) + } else { + // just update + $('tr#'+id).next().find('.task-description').html(Util.prep(task.attributes.description)) + } + + var html = _.template(ActivityRowDetailsMainHtml, { + task: task==null ? null : task.attributes, + link: that.model.getLinkByName("activities")+"/"+id, + updateOnly: updateOnly + }) + $('tr#'+id).next().find('.expansion-main').html(html) + + + if (!updateOnly) { + $('tr#'+id).next().find('.row-expansion .opened-row-details').hide() + $('tr#'+id).next().find('.row-expansion .opened-row-details').slideDown(300) + } }, - toggleFullDetail: function() { + backDrillDown: function(parent) { + var $t = this.$('#activities-root') + var $t2 = this.$('#1234') + $t2.animate({ + left: 569 //prevTable.width() + }, 500, function() { + $t2.remove() + }); + + $t.show().css({ + left: -600 //-($t2.width()) + }).animate({ + left: 0 + }, 500); + }, + showDrillDown: function(event) { + var parentId = $(event.currentTarget).closest("td.row-expansion").attr("id"); + log("WIP drill down - "+parentId) + log(this.collection) + notImplementedYet; + + var $t = this.$('#activities-root') + // style="display: inline-block; overflow: hidden; white-space: nowrap;" + $t2 = $t.after('<div>').next() + $t2.attr('id', '1234') + $t2.addClass('slide-panel') + $t2.hide() + $t2.append('<div class="subpanel-header-row backDrillDown">'+ + '<i class="backDrillDown icon-chevron-left handy" rel="tooltip" title="Return to sibling tasks" style="margin-top: 4px;"></i>'+ + ' Sub-tasks of: \'sample 1234\''+ + '</div>') + $t2.append('<div class="table-scroll-wrapper"></div>') + $t2.find('.table-scroll-wrapper').append(_.template(ActivityTableHtml)) + $t2t = $t2.find('table.activity-table') + + table2 = ViewUtils.myDataTable( $t2t, { + "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) { + $(nRow).attr('id', aData[0]) + $(nRow).addClass('activity-row') + }, + "aoColumnDefs": [ + { + "mRender": function ( data, type, row ) { + return Util.prep(data) + }, + "aTargets": [ 1, 2, 3 ] + }, + { "bVisible": false, "aTargets": [ 0 ] } + ] + }); + table2.fnAddData( [ "XXX", "Sample sub-task", "MOCK", "(work in progress)" ]) + + $t.animate({ + left: -600 + }, 300, function() { + $t.hide() + }); + + $t2.show().css({ + left: 600 + , top: 0 + }).animate({ + left: 0 + }, 300); + }, + toggleFullDetail: function(evt) { var i = $('.toggleFullDetail'); + var id = i.closest("td.row-expansion").attr('id') i.toggleClass('active') if (i.hasClass('active')) - this.showFullActivity() + this.showFullActivity(id) else - this.hideFullActivity() + this.hideFullActivity(id) }, - showFullActivity: function() { - var id = this.selectedId + showFullActivity: function(id) { + log("FULL for "+id) + id = this.selectedId + var $details = $("td.row-expansion#"+id+" .expansion-footer"); var task = this.collection.get(id); - if (task==null) { - this.hideFullActivity(); - return; - } var html = _.template(ActivityFullDetailsHtml, { task: task }); - $("#activity-details").html(html); - $("#activity-details").slideDown(100); + $details.html(html); + $details.slideDown(100); }, - hideFullActivity: function() { - $("#activity-details").slideUp(100); + hideFullActivity: function(id) { + id = this.selectedId + var $details = $("td.row-expansion#"+id+" .expansion-footer"); + $details.slideUp(100); } }); return ActivitiesView; -}); \ No newline at end of file +}); http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/96a49a3a/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 a213fe7..59a411c 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 @@ -14,7 +14,7 @@ define([ configMetadata:{}, refreshActive:true, events:{ - 'click .refresh':'refreshConfig', + 'click .refresh':'refreshNow', 'click .filterEmpty':'toggleFilterEmpty', 'click .toggleAutoRefresh':'toggleAutoRefresh' }, @@ -37,9 +37,10 @@ define([ "mRender": function ( data, type, row ) { // name (column 1) should have tooltip title return '<span class="config-name" '+ - 'rel="tooltip" title="<b>'+ - Util.prep(data['description'])+'</b><br/>('+ - Util.prep(data['type'])+')" data-placement="left">'+ + 'rel="tooltip" title='+ + (data['description'] ? + '"<b>'+Util.prep(data['description'])+'</b><br/>' : '')+ + '('+Util.prep(data['type'])+')" data-placement="left">'+ Util.prep(data['name'])+'</span>'; }, "aTargets": [ 1 ] @@ -90,7 +91,7 @@ define([ enableAutoRefresh: function(isEnabled) { this.refreshActive = isEnabled }, - refreshConfig:function () { + refreshNow:function () { this.updateConfigNow(this); }, updateConfigPeriodically:function (that) { @@ -134,6 +135,7 @@ define([ value ]; }); + ViewUtils.processTooltips($table) }); } }); http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/96a49a3a/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 b74a5cb..f2ab825 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 @@ -92,8 +92,8 @@ define([ this.activePolicy = null; this._config = null; $("#policy-config-table").dataTable().fnDestroy(); - $("#policy-config").hide(100); - $("#policy-config-none-selected").show(100); + $("#policy-config").slideUp(100); + $("#policy-config-none-selected").slideDown(100); } else { row.addClass("selected"); var that = this; @@ -112,7 +112,7 @@ define([ // TODO better to use a json array, as we do elsewhere var $table = $('#policy-config-table'), $tbody = $('#policy-config-table tbody').empty(); - $("#policy-config-none-selected").hide(100); + $("#policy-config-none-selected").slideUp(100); if (that._config.length==0) { $(".has-no-policy-config").show(); } else { @@ -132,8 +132,8 @@ define([ $tbody.find('*[rel="tooltip"]').tooltip(); }); that.currentStateUrl = that._policies.get(that.activePolicy).getLinkByName("config") + "/current-state"; - $("#policy-config").show(100); - $table.show(100); + $("#policy-config").slideDown(100); + $table.slideDown(100); ViewUtils.myDataTable($table, { "bAutoWidth": false, "aoColumns" : [ @@ -194,4 +194,4 @@ define([ }); return EntityPoliciesView; -}); \ No newline at end of file +}); http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/96a49a3a/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 a22e410..b820f2d 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 @@ -43,7 +43,10 @@ define([ "mRender": function ( data, type, row ) { // name (column 1) should have tooltip title var actions = that.getSensorActions(data.name); - var context = _.extend(data, {href: actions.json}); + // if data.description or .type is absent we get an error in html rendering (js) + // unless we set it explicitly (there is probably a nicer way to do this however?) + var context = _.extend(data, {href: actions.json, + description: data['description'], type: data['type']}); return sensorNameHtml(context); }, "aTargets": [ 1 ] http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/96a49a3a/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 958be9a..4411b93 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/viewutils.js @@ -39,15 +39,15 @@ define([ }, addRefreshButton: function($table) { this.myDataTableToolbarAddHtml($table, - '<i class="refresh table-toolbar-icon icon-refresh handy smallpadside" rel="tooltip" title="Reload content immediately"></i>'); + '<i class="refresh table-toolbar-icon bootstrap-glyph icon-refresh handy smallpadside" rel="tooltip" title="Reload content immediately"></i>'); }, addFilterEmptyButton: function($table) { this.myDataTableToolbarAddHtml($table, - '<i class="filterEmpty table-toolbar-icon icon-eye-open handy bottom smallpadside" rel="tooltip" title="Show/hide empty records"></i>'); + '<i class="filterEmpty table-toolbar-icon bootstrap-glyph icon-eye-open handy bottom smallpadside" rel="tooltip" title="Show/hide empty records"></i>'); }, addAutoRefreshButton: function($table) { this.myDataTableToolbarAddHtml($table, - '<i class="toggleAutoRefresh table-toolbar-icon icon-pause handy smallpadside" rel="tooltip" title="Toggle auto-refresh"></i>'); + '<i class="toggleAutoRefresh table-toolbar-icon bootstrap-glyph icon-pause handy smallpadside" rel="tooltip" title="Toggle auto-refresh"></i>'); }, /* fnConvertData takes the entries in collection (value, optionalKeyOrIndex) and returns a list * whose first element is the ID (hidden first column of table) @@ -106,7 +106,7 @@ define([ // log("adding "+newDisplayData[prop]) table.fnAddData( newDisplayData[prop] ) } - table.fnAdjustColumnSizing(); +// table.fnAdjustColumnSizing(); table.fnStandingRedraw(); }, toggleFilterEmpty: function($table, column) { @@ -171,6 +171,11 @@ define([ // try underscore return _.each(collection, fn); } + }, + // makes tooltips appear as white-on-black-bubbles rather than boring black-on-yellow-boxes + // but NB if the html is updated the tooltip can remain visible until page refresh + processTooltips: function($el) { + $el.find('*[rel="tooltip"]').tooltip(); } }; return ViewUtils; http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/96a49a3a/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 7d2c159..b6f8503 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/activities.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/activities.html @@ -1,15 +1,6 @@ -<div class="table-scroll-wrapper"> -<table id="activities-table" width="100%"> - <thead> - <tr> - <th width="1%"></th> - <th width="40%">Task</th> - <th width="30%">Submitted</th> - <th width="30%">Status</th> - </tr> - </thead> - <tbody></tbody> -</table> +<div id="activities-table-group" class="slide-panel-group"> + <div id="activities-root" class="table-scroll-wrapper slide-panel" width="569"> + </div> </div> <div> </div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/96a49a3a/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 index 5c37272..cc25b6f 100644 --- 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 @@ -1,5 +1,5 @@ <div class="for-activity-textarea"> - <textarea readonly="readonly" rows="16" style="width:100%;"><%= + <textarea readonly="readonly" rows="8" style="width:100%;"><%= //FormatJSON(task.toJSON()) task.attributes.detailedStatus %></textarea> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/96a49a3a/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-row-details-main.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-row-details-main.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-row-details-main.html new file mode 100644 index 0000000..af03f66 --- /dev/null +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-row-details-main.html @@ -0,0 +1,12 @@ + <% 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 %> + <% } %> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/96a49a3a/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 index 6e99ac8..a499245 100644 --- 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 @@ -1,23 +1,19 @@ -<div class="activity-row-details<% if (!updateOnly) { %> hide<% } %>"> +<div class="opened-row-details <% if (!updateOnly) { %> hide<% } %>"> <% 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 class="expansion-header"> + <div style="float: right;" class="toolbar-row"> + <!-- <a class="handy icon-book toggleLog"></a> --> + <a href="<%= link %>"><i class="handy icon-file showJson" rel="tooltip" title="JSON direct link"></i></a> + <i class="handy icon-inbox toggleFullDetail" rel="tooltip" title="Show even more detail"></i> + <i class="handy icon-chevron-right showDrillDown" rel="tooltip" title="Drill into sub-tasks"></i> + </div> + <b><i><span class="task-description"><%= task.description %></span></i></b> + </div> + <div class="expansion-main"> + </div> + <div class="expansion-footer"> + </div> </div> <% } %> </div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/96a49a3a/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-table.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-table.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-table.html new file mode 100644 index 0000000..597db9d --- /dev/null +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-table.html @@ -0,0 +1,11 @@ +<table class="activity-table" width="569"> + <thead> + <tr> + <th width="0%"></th> + <th width="40%">Task</th> + <th width="30%">Submitted</th> + <th width="30%">Status</th> + </tr> + </thead> + <tbody></tbody> +</table> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/96a49a3a/usage/jsgui/src/main/webapp/assets/tpl/apps/sensor-name.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/sensor-name.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/sensor-name.html index 491b918..b0dcd4f 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/sensor-name.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/sensor-name.html @@ -1,5 +1,5 @@ <span class="sensor-name" rel="tooltip" data-placement="left" - title="<b><%- description %></b><br/><%- type %>"> + title="<% if (description) { %><b><%- description %></b><br/><% } %>(<%- type %>)"> <% if (href) { %><a href="<%= href %>"> <% } %> <%- name %> <% if (href) { %></a> <% } %>
