AMBARI-5782. View: Files UI clean-up and adjustments. (jaimin)

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];
+});

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);
         }
 

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('/');

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')
 });

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}});
     },

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%;

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>

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();