AMBARI-5915. View: Files UI clean-up and adjustments (PART 2). (jaimin)

contrib/views/files/src/main/resources/ui/app/components/renameInput.js

@@ -0,0 +1,103 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+var App = require('app');
+
+App.RenameInputComponent = Ember.Component.extend({
+  tagName:'span',
+  layoutName:'util/renameInput',
+  actions:{
+    rename:function (opt) {
+      var target, tmpName;
+
+      switch (opt) {
+        case 'edit': this.set('isRenaming',true); break;
+        case 'cancel': this.set('isRenaming',false); break;
+        case 'confirm':
+          tmpName = this.get('tmpName');
+          if (tmpName.length==0) {
+            break;
+          };
+          target = this.get('targetObject');
+          target.send(this.get('actionName'),this.get('filePath'),tmpName);
+          this.set('isRenaming',false);
+          break;
+
+        default: this.toggleProperty('isRenaming');
+      }
+    },
+  },
+
+  /**
+   * passed params
+   */
+  file:null,
+  actionName:null,
+  isRenaming:false,
+
+  fileName:function () {
+    var name, file = this.get('file');
+    if (file instanceof DS.Model) {
+      name = this.get('file.name');
+    } else {
+      name = file.substr(file.lastIndexOf('/')+1);
+    };
+    return name;
+  }.property('file'),
+
+  filePath:function () {
+    var path, file = this.get('file');
+    if (file instanceof DS.Model) {
+      path = this.get('file.path');
+    } else {
+      path = file;
+    };
+    return path;
+  }.property('file'),
+
+  setTmpName:function () {
+    if (this.get('isRenaming')) {
+      this.set('tmpName',this.get('fileName'));
+    } else {
+      this.set('tmpName','');
+    };
+  }.observes('isRenaming'),
+
+  onFileChange:function () {
+    this.set('isRenaming',false);
+  }.observes('file'),
+
+  renameInputView: Em.TextField.extend({
+    controller:null,
+    didInsertElement:function () {
+      var element = $(this.get('element'));
+      element.focus().val(this.value)
+    },
+    keyUp: function(e) {
+      var target = this.get('targetObject');
+      if (e.keyCode==13) {
+        return target.send('rename', 'confirm');
+      };
+
+      if (e.keyCode==27) {
+        return target.send('rename', 'cancel');
+      };
+    }
+  })
+});

contrib/views/files/src/main/resources/ui/app/controllers/files.js

@@ -43,6 +43,36 @@ App.FilesController = Ember.ArrayController.extend({
         this.set('movingFile',null);
       };
     },
+    showRenameInput:function () {
+      this.toggleProperty('isRenaming');
+    },
+    renameDir:function (path,newName) {
+      var self = this,
+          basedir = path.substring(0,path.lastIndexOf('/')+1);
+          newPath = basedir + newName;
+
+      if (path === newPath) {
+        return false;
+      };
+
+      this.store.listdir(basedir).then(function (listdir) {
+        var recordExists = listdir.isAny('id',newPath);
+
+        listdir.forEach(function (file) {
+          self.store.unloadRecord(file);
+        });
+
+        if (recordExists) {
+          return self.send('showAlert',{message:newPath + ' already exists.'});
+        };
+
+        self.store.move(path,newPath).then(function (newDir) {
+          self.store.unloadRecord(newDir);
+          self.set('path',newPath);
+        });
+      });
+
+    },
     deleteFile:function () {
       var self = this;
       var selected = this.get('selectedFiles');
@@ -118,12 +148,14 @@ App.FilesController = Ember.ArrayController.extend({
   needs: ["file"],
   movingFile:null,
   uploader:App.Uploader,
+  isRenaming:false,
   isRemoving:false,
   isMkdir:false,
   isUploading:false,
   newDirName:'',
   queryParams: ['path'],
   path: '/',
+  isRootDir:Ember.computed.equal('path', '/'),
   hideMoving:function () {
     return (this.movingFile)?[this.path,this.movingFile.name].join('/').replace('//','/')===this.movingFile.path:false;
   }.property('movingFile','path'),
@@ -131,23 +163,25 @@ App.FilesController = Ember.ArrayController.extend({
     var splitpath = this.get('path').split('/');
     return splitpath.get(splitpath.length-1) || '/';
   }.property('path'),
-  selectedOne:function () {
-    return this.get('selectedFiles.length') == 1;
-  }.property('selectedFiles'),
-  isSelected:function () {
-    return this.get('selectedFiles.length') > 0;
-  }.property('selectedFiles'),
-  selectedFiles:function () {
-    return this.get('content').filterProperty('selected',true);
-  }.property('content.@each.selected'),
+  selectedOne:Ember.computed.equal('selectedFiles.length', 1),
+  isSelected:Ember.computed.gt('selectedFiles.length', 0),
+  selectedFiles:Ember.computed.filterBy('content', 'selected', true),
   canConcat:function () {
     return this.get('selectedFiles').filterProperty('isDirectory').get('length')==0;
-  }.property('selectedFiles'),
-  fileList:function () {
-    return this.get('arrangedContent');
-  }.property('arrangedContent')
+  }.property('selectedFiles.length'),
+
+  fileList: Ember.computed.alias('arrangedContent')
 });
 
 App.FilesAlertController = Em.ObjectController.extend({
-  content:null
+  content:null,
+  output:function () {
+    var error = this.get('content'),output;
+    if (error instanceof Em.Error) {
+      output = error;
+    } else {
+      output = {status:error.status, message:error.statusText||error.message};
+    };
+    return output;
+  }.property('content')
 });

contrib/views/files/src/main/resources/ui/app/initialize.js

@@ -35,6 +35,7 @@ require('templates/util/uploader');
 require('templates/util/contextMenu');
 require('templates/util/deleteBulk');
 require('templates/util/errorRow');
+require('templates/util/renameInput');
 
 //////////////////////////////////
 // Models
@@ -55,6 +56,7 @@ require('controllers/file');
 
 require('components/uploader');
 require('components/contextMenu');
+require('components/renameInput');
 
 /////////////////////////////////
 // Views

contrib/views/files/src/main/resources/ui/app/models/file.js

@@ -24,6 +24,10 @@ App.File = DS.Model.extend({
   path: function() {
     return this.get('id');
   }.property('id'),
+  basedir:function () {
+    var path = this.get('id');
+    return path.substring(0,path.lastIndexOf('/'))||'/';
+  }.property('id'),
   isDirectory: a('boolean'),
   len: a('number'),
   owner: a('string'),

contrib/views/files/src/main/resources/ui/app/routes/file.js

@@ -27,12 +27,7 @@ App.FilesRoute = Em.Route.extend({
   actions:{
     error:function (error,transition,e) {
       if (this.router._lookupActiveView('files')) {
-        this.controllerFor('filesAlert').set('content',error);
-        this.render('files.alert',{
-          into:'files',
-          outlet:'error',
-          controller:'filesAlert'
-        });
+        this.send('showAlert',error);
       } else {
         return true;
       };
@@ -46,6 +41,14 @@ App.FilesRoute = Em.Route.extend({
     willTransition:function (argument) {
       this.send('removeAlert');
     },
+    showAlert:function (error) {
+      this.controllerFor('filesAlert').set('content',error);
+      this.render('files.alert',{
+        into:'files',
+        outlet:'error',
+        controller:'filesAlert'
+      });
+    },
     removeAlert:function () {
       this.disconnectOutlet({
         outlet: 'error',
@@ -69,11 +72,5 @@ App.FilesRoute = Em.Route.extend({
         file.store.unloadRecord(file);
       })
     });
-  },
-  setupController:function (controller,model,transition) {
-    controller.set('model', model);
-  },
-  renderTemplate:function (q,w,e) {
-    this.render('files');
   }
 });

contrib/views/files/src/main/resources/ui/app/styles/application.less

@@ -67,6 +67,7 @@
   .panel-body {
     .i-am-in {
       margin: 0;
+      width: 80%;
     }
   }
 
@@ -296,4 +297,27 @@
   margin: -4px 0;
 }
 
-
+.renameable {
+  display: inline-block;
+  &.half {
+    width: 50%;
+  }
+  &.stocked {
+    margin-top: -12px;
+    margin-bottom: -12px;
+  }
+  .form-control {
+    font-size: 14px;
+  }
+  .mod-time{
+    margin: 0;
+  }
+  .file-name {
+    margin-top: -5px;
+    margin-bottom: -5px;
+  }
+  .btn-rename-cancel {
+    border-radius: 0 !important;
+    margin-left: -1px;
+  }
+}

contrib/views/files/src/main/resources/ui/app/templates/files.hbs

@@ -60,7 +60,11 @@
   </div>
 
   <div class="panel-body">
-    <h4 class="i-am-in pull-left" > <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>
+    {{#rename-input file=path actionName='renameDir' isRenaming=isRenaming class='renameable stocked half'}}
+      {{currentDir}} <a href="#" {{bind-attr class="isRootDir:hide"}} {{action showRenameInput}}><i class="fa fa-edit"></i></a>
+    {{/rename-input}}
+    </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'}}>

contrib/views/files/src/main/resources/ui/app/templates/util/errorRow.hbs

@@ -18,7 +18,7 @@
 
 <div class="text-center">
   <button {{action 'removeAlert'}} type="button" class="close" aria-hidden="true">&times;</button>
-  <strong>{{content.status}} </strong> {{content.statusText}}  
+  <strong>{{output.status}} </strong> {{output.message}}
 </div>
   
 

contrib/views/files/src/main/resources/ui/app/templates/util/renameInput.hbs

@@ -0,0 +1,38 @@
+{{!
+   Licensed to the Apache Software Foundation (ASF) under one
+   or more contributor license agreements.  See the NOTICE file
+   distributed with this work for additional information
+   regarding copyright ownership.  The ASF licenses this file
+   to you under the Apache License, Version 2.0 (the
+   "License"); you may not use this file except in compliance
+   with the License.  You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+}}
+{{#if isRenaming}}
+
+<div class="input-group input-group-sm rename-area">
+  {{view view.renameInputView class="form-control rename-input" valueBinding='tmpName'}}
+  <div class="input-group-btn">
+    <button  type="button" {{action 'rename' 'cancel'}} {{bind-attr class=":btn :btn-danger :btn-xs :btn-rename-cancel isRenaming:show"}} >
+      <i class="fa fa-times"></i> Cancel
+    </button>
+  </div>
+  <div class="input-group-btn">
+    <button  type="button" {{action 'rename' 'confirm'}} {{bind-attr class=":btn :btn-success :btn-xs :btn-rename isRenaming:show"}} >
+      <i class="fa fa-check"></i> Rename
+    </button>
+  </div>
+</div>
+
+{{else}}
+
+  {{yield}}
+
+{{/if}}