Github user sjcorbett commented on a diff in the pull request:
https://github.com/apache/incubator-brooklyn/pull/156#discussion_r17302943
--- Diff: usage/jsgui/src/main/webapp/assets/js/view/entity-config.js ---
@@ -22,146 +22,473 @@
* @type {*}
*/
define([
- "underscore", "jquery", "backbone", "brooklyn-utils",
- "view/viewutils", "model/config-summary", "text!tpl/apps/config.html",
+ "underscore", "jquery", "backbone", "brooklyn-utils", "zeroclipboard",
"view/viewutils",
+ "model/config-summary", "text!tpl/apps/config.html",
"text!tpl/apps/config-name.html",
"jquery-datatables", "datatables-extensions"
-], function (_, $, Backbone, Util, ViewUtils, ConfigSummary, ConfigHtml) {
+], function (_, $, Backbone, Util, ZeroClipboard, ViewUtils,
ConfigSummary, ConfigHtml, ConfigNameHtml) {
+ // TODO consider extracting all such usages to a shared ZeroClipboard
wrapper?
+ ZeroClipboard.config({ moviePath: 'assets/js/libs/ZeroClipboard.swf'
});
+
+ var configHtml = _.template(ConfigHtml),
+ configNameHtml = _.template(ConfigNameHtml);
+
+ // TODO refactor to share code w entity-sensors.js
+ // in meantime, see notes there!
var EntityConfigView = Backbone.View.extend({
- template:_.template(ConfigHtml),
+ template: configHtml,
configMetadata:{},
refreshActive:true,
+ zeroClipboard: null,
+
events:{
'click .refresh':'refreshNow',
'click .filterEmpty':'toggleFilterEmpty',
- 'click .toggleAutoRefresh':'toggleAutoRefresh'
+ 'click .toggleAutoRefresh':'toggleAutoRefresh',
+
+ 'mouseup .valueOpen':'valueOpen',
+ 'mouseover #config-table tbody tr':'noteFloatMenuActive',
+ 'mouseout #config-table tbody tr':'noteFloatMenuSeemsInactive',
+ 'mouseover .floatGroup':'noteFloatMenuActive',
+ 'mouseout .floatGroup':'noteFloatMenuSeemsInactive',
+ 'mouseover .clipboard-item':'noteFloatMenuActiveCI',
+ 'mouseout .clipboard-item':'noteFloatMenuSeemsInactiveCI',
+ 'mouseover .hasFloatLeft':'showFloatLeft',
+ 'mouseover .hasFloatDown':'enterFloatDown',
+ 'mouseout .hasFloatDown':'exitFloatDown',
+ 'mouseup .light-popup-menu-item':'closeFloatMenuNow',
},
+
initialize:function () {
- _.bindAll(this)
- this.$el.html(this.template({ }));
+ _.bindAll(this);
+ this.$el.html(this.template());
+
var that = this,
$table = this.$('#config-table');
that.table = ViewUtils.myDataTable($table, {
"fnRowCallback": function( nRow, aData, iDisplayIndex,
iDisplayIndexFull ) {
- $(nRow).attr('id', aData[0])
+ $(nRow).attr('id', aData[0]);
$('td',nRow).each(function(i,v){
- if (i==1) $(v).attr('class','config-actions');
- if (i==2) $(v).attr('class','config-value');
- })
+ if (i==1) $(v).attr('class','config-value');
+ });
return nRow;
},
"aoColumnDefs": [
- { // name, with tooltip
+ { // name (with tooltip)
"mRender": function ( data, type, row
) {
- // name (column 1) should have
tooltip title
- return '<span class="config-name"
'+
- 'rel="tooltip" title='+
- (data['description'] ?
-
'"<b>'+Util.escape(data['description'])+'</b><br/>' : '')+
-
'('+Util.escape(data['type'])+')" data-placement="left">'+
-
Util.escape(data['name'])+'</span>';
+ var actions =
that.getConfigActions(data.name);
+ var context = _.extend(data, {
+ description:
data['description'], type: data['type']});
+ return configNameHtml(context);
},
"aTargets": [ 1 ]
},
- { // actions (just one, json link hard
coded here apart from url)
- "mRender": function ( link, type, row
) {
- if (link=="") return "";
- var text=""
- var icon="icon-file"
- var title="JSON direct link"
- var actionsText =
- "<a
href='"+Util.escape(link)+"'"+
- "
class='"+Util.escape(icon)+"'"+
- "
title='"+Util.escape(title)+"'>"+
-
Util.escape(text)+"</a>\n";
- //just one action here
- return actionsText;
- },
- "aTargets": [ 2 ]
- },
{ // value
"mRender": function ( data, type, row
) {
- return Util.toDisplayString(data)
+ var escapedValue =
Util.toDisplayString(data);
+ if (type!='display')
+ return escapedValue;
+
+ var hasEscapedValue =
(escapedValue!=null && (""+escapedValue).length > 0);
+ configName = row[0],
+ actions =
that.getConfigActions(configName);
+
+ // datatables doesn't seem to
expose any way to modify the html in place for a cell,
+ // so we rebuild
+
+ var result = "<span
class='value'>"+(hasEscapedValue ? escapedValue : '')+"</span>";
+ if (actions.open)
+ result = "<a
href='"+actions.open+"'>" + result + "</a>";
+ if (escapedValue==null ||
escapedValue.length < 3)
+ // include whitespace so we
can click on it, if it's really small
+ result +=
" ";
+
+ var $row =
$('tr[id="'+configName+'"]');
+ var existing =
$row.find('.dynamic-contents');
+ // for the json url, use the full
url (relative to window.location.href)
+ var jsonUrl = actions.json ? new
URI(actions.json).resolve(new URI(window.location.href)).toString() : null;
+ // prefer to update in place, so
menus don't disappear, also more efficient
+ // (but if menu is changed, we do
recreate it)
+ if (existing.length>0) {
+ if
(that.checkFloatMenuUpToDate($row, actions.open, '.actions-open',
'open-target') &&
+
that.checkFloatMenuUpToDate($row, escapedValue, '.actions-copy') &&
+
that.checkFloatMenuUpToDate($row, actions.json, '.actions-json-open',
'open-target') &&
+
that.checkFloatMenuUpToDate($row, jsonUrl, '.actions-json-copy', 'copy-value'))
{
+// log("updating in place
"+configName)
+ existing.html(result);
+ return
$row.find('td.config-value').html();
+ }
+ }
+
+ // build the menu - either
because it is the first time, or the actions are stale
+// log("creating "+configName);
+
+ var downMenu = "";
+ if (actions.open)
+ downMenu += "<div
class='light-popup-menu-item valueOpen actions-open'
open-target='"+actions.open+"'>" +
+ "Open</div>";
+ if (hasEscapedValue) downMenu +=
+ "<div
class='light-popup-menu-item handy valueCopy actions-copy clipboard-item'>Copy
Value</div>";
+ if (actions.json) downMenu +=
+ "<div
class='light-popup-menu-item handy valueOpen actions-json-open'
open-target='"+actions.json+"'>" +
+ "Open REST Link</div>";
+ if (actions.json &&
hasEscapedValue) downMenu +=
+ "<div
class='light-popup-menu-item handy valueCopy actions-json-copy clipboard-item'
copy-value='"+
+ jsonUrl+"'>Copy REST
Link</div>";
+ if (downMenu=="") {
+// log("no actions for
"+configName);
+ downMenu +=
+ "<div
class='light-popup-menu-item'>(no actions)</div>";
+ }
+ downMenu = "<div
class='floatDown'><div class='light-popup'><div class='light-popup-body'>"
+ + downMenu +
+ "</div></div></div>";
+ result = "<span
class='hasFloatLeft handy dynamic-contents'>" + result +
+ "</span>" +
+ "<div
class='floatLeft'><span class='icon-chevron-down hasFloatDown'></span>" +
+ downMenu +
+ "</div>";
+ result = "<div
class='floatGroup'>" + result + "</div>";
+ // also see updateFloatMenus
which wires up the JS for these classes
+
+ return result;
},
- "aTargets": [ 3 ]
+ "aTargets": [ 2 ]
},
// ID in column 0 is standard (assumed in
ViewUtils)
- { "bVisible": false, "aTargets": [ 0 ]
/* hide id column */ }
+ { "bVisible": false, "aTargets": [ 0 ] }
]
});
- ViewUtils.addFilterEmptyButton(that.table);
- ViewUtils.addAutoRefreshButton(that.table);
- ViewUtils.addRefreshButton(that.table);
- that.loadConfigMetadata();
- that.updateConfigPeriodically();
- that.toggleFilterEmpty();
- },
- render:function () {
- this.updateConfigNow();
+
+ this.zeroClipboard = new ZeroClipboard();
--- End diff --
Call `this.zeroClipboard.destroy()` in the views `beforeClose` function.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at [email protected] or file a JIRA ticket
with INFRA.
---
