brooklyn-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From sjcorbett <...@git.apache.org>
Subject [GitHub] incubator-brooklyn pull request: GUI+REST improvements - yaml spec...
Date Tue, 09 Sep 2014 14:24:00 GMT
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 += "&nbsp;&nbsp;&nbsp;&nbsp;";
    +
    +                                         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 infrastructure@apache.org or file a JIRA ticket
with INFRA.
---

Mime
View raw message