Repository: ambari Updated Branches: refs/heads/trunk 81173e14d -> a9bc8eb86
AMBARI-5782. View: Files UI clean-up and adjustments. (jaimin) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/a9bc8eb8 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/a9bc8eb8 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/a9bc8eb8 Branch: refs/heads/trunk Commit: a9bc8eb86bbd052e19626e6e6cca21304e8a9380 Parents: 81173e1 Author: Jaimin Jetly <[email protected]> Authored: Thu May 15 15:50:21 2014 -0700 Committer: Jaimin Jetly <[email protected]> Committed: Thu May 15 15:50:59 2014 -0700 ---------------------------------------------------------------------- .../files/src/main/resources/ui/app/adapter.js | 11 +++ .../main/resources/ui/app/controllers/file.js | 4 +- .../main/resources/ui/app/controllers/files.js | 8 +- .../src/main/resources/ui/app/models/file.js | 5 +- .../src/main/resources/ui/app/routes/file.js | 2 +- .../resources/ui/app/styles/application.less | 12 ++- .../main/resources/ui/app/templates/files.hbs | 79 +++++++++++--------- .../src/main/resources/ui/app/views/file.js | 2 +- 8 files changed, 74 insertions(+), 49 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/a9bc8eb8/contrib/views/files/src/main/resources/ui/app/adapter.js ---------------------------------------------------------------------- diff --git a/contrib/views/files/src/main/resources/ui/app/adapter.js b/contrib/views/files/src/main/resources/ui/app/adapter.js index 9f7ca65..b8e127b 100644 --- a/contrib/views/files/src/main/resources/ui/app/adapter.js +++ b/contrib/views/files/src/main/resources/ui/app/adapter.js @@ -362,3 +362,14 @@ Ember.Handlebars.registerBoundHelper('showDateUnix', function(date,format) { Ember.Handlebars.registerBoundHelper('capitalize', function(string) { return string.capitalize(); }); + +Ember.Handlebars.registerBoundHelper('humanSize', function(fileSizeInBytes) { + var i = -1; + var byteUnits = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB']; + do { + fileSizeInBytes = fileSizeInBytes / 1024; + i++; + } while (fileSizeInBytes > 1024); + + return Math.max(fileSizeInBytes, 0.1).toFixed(1) + byteUnits[i]; +}); http://git-wip-us.apache.org/repos/asf/ambari/blob/a9bc8eb8/contrib/views/files/src/main/resources/ui/app/controllers/file.js ---------------------------------------------------------------------- diff --git a/contrib/views/files/src/main/resources/ui/app/controllers/file.js b/contrib/views/files/src/main/resources/ui/app/controllers/file.js index 2c84a94..4c2cccd 100644 --- a/contrib/views/files/src/main/resources/ui/app/controllers/file.js +++ b/contrib/views/files/src/main/resources/ui/app/controllers/file.js @@ -31,7 +31,7 @@ App.FileController = Ember.ObjectController.extend({ var file = this.get('content'), self,path,name,newPath; if (opt === 'edit') { - this.set('tmpName',file.get('title')); + this.set('tmpName',file.get('name')); this.set('isRenaming',true); }; @@ -49,7 +49,7 @@ App.FileController = Ember.ObjectController.extend({ return false; } - if (name === file.get('title')) { + if (name === file.get('name')) { return self.set('isRenaming',false); } http://git-wip-us.apache.org/repos/asf/ambari/blob/a9bc8eb8/contrib/views/files/src/main/resources/ui/app/controllers/files.js ---------------------------------------------------------------------- diff --git a/contrib/views/files/src/main/resources/ui/app/controllers/files.js b/contrib/views/files/src/main/resources/ui/app/controllers/files.js index e8453d3..81d703a 100644 --- a/contrib/views/files/src/main/resources/ui/app/controllers/files.js +++ b/contrib/views/files/src/main/resources/ui/app/controllers/files.js @@ -27,13 +27,13 @@ App.FilesController = Ember.ArrayController.extend({ if (opt == 'cut') { src = file.toJSON({includeId: true}); - src = Em.merge(src,{title:file.get('title'),path:file.get('path')}) + src = Em.merge(src,{name:file.get('name'),path:file.get('path')}) this.set('movingFile',src); }; if (opt == 'move') { self = this; - this.store.move(moving.path,[this.get('path'),moving.title].join('/').replace('//','/')) + this.store.move(moving.path,[this.get('path'),moving.name].join('/').replace('//','/')) .then(function () { self.set('movingFile',null); }); @@ -112,7 +112,7 @@ App.FilesController = Ember.ArrayController.extend({ }); }, - sortProperties: ['title'], + sortProperties: ['name'], sortAscending: true, needs: ["file"], @@ -125,7 +125,7 @@ App.FilesController = Ember.ArrayController.extend({ queryParams: ['path'], path: '/', hideMoving:function () { - return (this.movingFile)?[this.path,this.movingFile.title].join('/').replace('//','/')===this.movingFile.path:false; + return (this.movingFile)?[this.path,this.movingFile.name].join('/').replace('//','/')===this.movingFile.path:false; }.property('movingFile','path'), currentDir:function () { var splitpath = this.get('path').split('/'); http://git-wip-us.apache.org/repos/asf/ambari/blob/a9bc8eb8/contrib/views/files/src/main/resources/ui/app/models/file.js ---------------------------------------------------------------------- diff --git a/contrib/views/files/src/main/resources/ui/app/models/file.js b/contrib/views/files/src/main/resources/ui/app/models/file.js index 955bb4b..9b63f2b 100644 --- a/contrib/views/files/src/main/resources/ui/app/models/file.js +++ b/contrib/views/files/src/main/resources/ui/app/models/file.js @@ -33,11 +33,12 @@ App.File = DS.Model.extend({ modificationTime: a('isodate'), blockSize: a('number'), replication: a('number'), - title:function () { + name:function () { var splitpath = this.get('path').split('/'); return splitpath.get(splitpath.length-1); }.property('path'), date:function () { return parseInt(moment(this.get('modificationTime')).format('X')) - }.property('modificationTime') + }.property('modificationTime'), + size: Em.computed.alias('len') }); http://git-wip-us.apache.org/repos/asf/ambari/blob/a9bc8eb8/contrib/views/files/src/main/resources/ui/app/routes/file.js ---------------------------------------------------------------------- diff --git a/contrib/views/files/src/main/resources/ui/app/routes/file.js b/contrib/views/files/src/main/resources/ui/app/routes/file.js index 97daf88..bad821c 100644 --- a/contrib/views/files/src/main/resources/ui/app/routes/file.js +++ b/contrib/views/files/src/main/resources/ui/app/routes/file.js @@ -39,7 +39,7 @@ App.FilesRoute = Em.Route.extend({ }, dirUp: function () { var currentPath = this.controllerFor('files').get('path'); - var upDir = currentPath.replace(currentPath.substr(currentPath.lastIndexOf('/')), ''); + var upDir = currentPath.substring(0,currentPath.lastIndexOf('/')); var target = upDir || '/'; return this.transitionTo('files',{queryParams: {path: target}}); }, http://git-wip-us.apache.org/repos/asf/ambari/blob/a9bc8eb8/contrib/views/files/src/main/resources/ui/app/styles/application.less ---------------------------------------------------------------------- diff --git a/contrib/views/files/src/main/resources/ui/app/styles/application.less b/contrib/views/files/src/main/resources/ui/app/styles/application.less index 69f99f3..fa1db60 100644 --- a/contrib/views/files/src/main/resources/ui/app/styles/application.less +++ b/contrib/views/files/src/main/resources/ui/app/styles/application.less @@ -86,19 +86,23 @@ } thead tr th.path { cursor: pointer; - width: 20%; + width: 30%; + } + thead tr th.size { + cursor: pointer; + width: 15%; } thead tr th.owner { cursor: pointer; - width: 20%; + width: 15%; } thead tr th.grp { cursor: pointer; - width: 20%; + width: 15%; } thead tr th.perm { cursor: pointer; - width: 20%; + width: 15%; } thead tr th.download { width: 2%; http://git-wip-us.apache.org/repos/asf/ambari/blob/a9bc8eb8/contrib/views/files/src/main/resources/ui/app/templates/files.hbs ---------------------------------------------------------------------- diff --git a/contrib/views/files/src/main/resources/ui/app/templates/files.hbs b/contrib/views/files/src/main/resources/ui/app/templates/files.hbs index 56ff0d1..ba5b573 100644 --- a/contrib/views/files/src/main/resources/ui/app/templates/files.hbs +++ b/contrib/views/files/src/main/resources/ui/app/templates/files.hbs @@ -60,37 +60,40 @@ </div> <div class="panel-body"> - <h4 class="i-am-in" > <i class="fa fa-folder fa-lg"></i> {{currentDir}}</h4> + <h4 class="i-am-in pull-left" > <i class="fa fa-folder fa-lg"></i> {{currentDir}}</h4> + + <div class="btn-group btn-sort pull-right" data-toggle="tooltip" data-placement="left" title="Sort by:"> + <button type="button" class="btn btn-xs btn-default" {{action sort 'toggle'}}> + {{#if sortAscending}} Asc {{else}} Desc {{/if}} + </button> + + <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"> + <span> + {{capitalize sortProperties.firstObject}} + </span> + <span class="caret"></span> + </button> + <ul class="dropdown-menu" role="menu"> + <li><a href="#" {{action 'sort' 'name'}} >Name</a></li> + <li><a href="#" {{action 'sort' 'size'}} >Size</a></li> + <li><a href="#" {{action 'sort' 'owner'}} >Owner</a></li> + <li><a href="#" {{action 'sort' 'group'}} >Group</a></li> + <li><a href="#" {{action 'sort' 'permission'}} >Permission</a></li> + <li><a href="#" {{action 'sort' 'date'}} >Date</a></li> + </ul> + </div> </div> <table class="table table-hover table-files"> <thead> <tr> <th class="icon"></th> - <th class="path" {{action 'sort' 'title'}}> Title {{view view.sortArrow sortProperty='title'}} </th> + <th class="path" {{action 'sort' 'name'}}> Name {{view view.sortArrow sortProperty='name'}} </th> + <th class="size" {{action 'sort' 'size'}}>Size {{view view.sortArrow sortProperty='size'}}</th> <th class="owner" {{action 'sort' 'owner'}}>Owner {{view view.sortArrow sortProperty='owner'}}</th> <th class="grp" {{action 'sort' 'group'}} >Group {{view view.sortArrow sortProperty='group'}}</th> <th class="perm" {{action 'sort' 'permission'}} >Permission {{view view.sortArrow sortProperty='permission'}}</th> <th class="download"> - <div class="btn-group btn-sort" data-toggle="tooltip" data-placement="top" title="Sort by:"> - <button type="button" class="btn btn-xs btn-default" {{action sort 'toggle'}}> - {{#if sortAscending}} Asc {{else}} Desc {{/if}} - </button> - - <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"> - <span> - {{capitalize sortProperties.firstObject}} - </span> - <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu"> - <li><a href="#" {{action 'sort' 'title'}} >Title</a></li> - <li><a href="#" {{action 'sort' 'owner'}} >Owner</a></li> - <li><a href="#" {{action 'sort' 'group'}} >Group</a></li> - <li><a href="#" {{action 'sort' 'permission'}} >Permission</a></li> - <li><a href="#" {{action 'sort' 'date'}} >Date</a></li> - </ul> - </div> </th> <th class="check"> <div id="bulkDropdown" class="btn-group"> @@ -125,12 +128,12 @@ <div> <tr> <td><i class="fa fa-folder"></i></td> - <td {{action 'dirUp'}} colspan="6"> + <td {{action 'dirUp'}} colspan="7"> <strong> .. </strong> </td> </tr> <tr class="error-row"> - <td colspan="7" class="danger"> + <td colspan="8" class="danger"> {{outlet error}} </td> </tr> @@ -148,7 +151,7 @@ <div class="file-name"> <span> <a> - {{movingFile.title}} + {{movingFile.name}} </a> </span> <span class="help-block mod-time"> @@ -158,6 +161,11 @@ </span> </div> </td> + <td> + {{#unless content.isDirectory}} + {{humanSize movingFile.size}} + {{/unless}} + </td> <td >{{movingFile.owner}}</td> <td>{{movingFile.group}}</td> <td>{{movingFile.permission}}</td> @@ -188,19 +196,12 @@ {{#unless isRenaming}} <div class="file-name allow-open"> <span> - {{#link-to 'files' (query-params path=content.path)}} + <a {{action 'open'}}> <strong> - {{content.title}} + {{content.name}} </strong> - {{/link-to}} + </a> </span> - {{#unless isMoving}} - <a {{action 'rename' 'edit'}} {{bind-attr class=":btn-rename "}} data-toggle="tooltip" data-placement="bottom" title="Rename"> - <small> - <i class="fa fa-edit fa-lg"></i> - </small> - </a> - {{/unless }} <span class="help-block mod-time allow-open"> <small class='allow-open'> Updated {{showDate modificationTime 'YYYY-MM-DD HH:mm'}} @@ -223,6 +224,11 @@ </div> {{/unless}} </td> + <td> + {{#unless content.isDirectory}} + {{humanSize content.size}} + {{/unless}} + </td> <td >{{content.owner}}</td> <td>{{content.group}}</td> <td>{{content.permission}}</td> @@ -236,10 +242,13 @@ <a href="#" {{action 'download' 'browse'}} data-toggle="tooltip" data-placement="bottom" title="Download"><i class="fa fa-download fa-fw fa-lg"></i></a> {{/if}} </li> - <li>{{view view.deleteSingleView}}</li> <li> <a href="#" {{action 'moveFile' 'cut' this.content}} data-toggle="tooltip" data-placement="bottom" title="Move"><i class="fa fa-level-down fa-rotate-270 fa-fw fa-lg"></i></span></a> </li> + <li> + <a {{action 'rename' 'edit'}} data-toggle="tooltip" data-placement="bottom" title="Rename"><i class="fa fa-edit fa-lg"></i></a> + </li> + <li>{{view view.deleteSingleView}}</li> </ul> {{/unless}} </td> http://git-wip-us.apache.org/repos/asf/ambari/blob/a9bc8eb8/contrib/views/files/src/main/resources/ui/app/views/file.js ---------------------------------------------------------------------- diff --git a/contrib/views/files/src/main/resources/ui/app/views/file.js b/contrib/views/files/src/main/resources/ui/app/views/file.js index ef1ed29..b9ee3bc 100644 --- a/contrib/views/files/src/main/resources/ui/app/views/file.js +++ b/contrib/views/files/src/main/resources/ui/app/views/file.js @@ -63,7 +63,7 @@ App.FilesView = Em.View.extend({ $(element).popover({ html:true, trigger:'manual', - placement:'top', + placement:'left', content:function() { var content = element.find('.df-popover'); return content.html();
