You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by he...@apache.org on 2016/02/01 18:52:16 UTC
[43/50] [abbrv] brooklyn-ui git commit: activities now expand in
place,
and show better formatted details (next up: filtering based on task type,
and better task names)
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 <al...@cloudsoftcorp.com>
Authored: Tue Mar 5 18:04:42 2013 -0800
Committer: Alex Heneveld <al...@cloudsoftcorp.com>
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>