You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by db...@apache.org on 2016/02/24 19:18:01 UTC

[03/10] ambari git commit: AMBARI-15145. Revamped Filebrowser Design - UI. (dipayanb)

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/services/file-preview.js
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/services/file-preview.js b/contrib/views/files/src/main/resources/ui/app/services/file-preview.js
new file mode 100644
index 0000000..2dc8558
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/services/file-preview.js
@@ -0,0 +1,119 @@
+/**
+ * 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.
+ */
+
+import Ember from 'ember';
+import FileOperationMixin from '../mixins/file-operation';
+
+export default Ember.Service.extend(FileOperationMixin, {
+  fileSelectionService: Ember.inject.service('files-selection'),
+  selectedFiles: Ember.computed.alias('fileSelectionService.files'),
+  selected: Ember.computed('selectedFiles', function () {
+    return this.get('selectedFiles').objectAt(0);
+  }),
+  selectedFilePath: Ember.computed('selected.path', function () {
+    return this.get('selected.path');
+  }),
+  filesDownloadService: Ember.inject.service('files-download'),
+  fileContent: '',
+  startIndex: 0,
+  offset: 5000,
+  path: '',
+  isLoading: false,
+  fileFetchFinished: false,
+  hasError: false,
+
+  endIndex: function () {
+    return this.get('startIndex') + this.get('offset');
+  }.property('startIndex'),
+
+  reset: function () {
+    this.set('fileContent', '');
+    this.set('startIndex', 0);
+    this.set('offset', 5000);
+    this.set('path', '');
+    this.set('isLoading', false);
+    this.set('hasError', false);
+    this.set('fileFetchFinished', false);
+  },
+
+  getNextContent: function () {
+    return this._getContent();
+  },
+
+  _getContent: function () {
+
+    var _self = this;
+
+    if (this.get('fileFetchFinished')) {
+      return false;
+    }
+
+    var adapter = this.get('store').adapterFor('file');
+    var baseURL = adapter.buildURL('file');
+    var renameUrl = baseURL.substring(0, baseURL.lastIndexOf('/'));
+    var previewUrl = renameUrl.substring(0, renameUrl.lastIndexOf('/')) + "/preview/file?path=";
+
+    var currentFetchPath = previewUrl + this.get('selected.path') + '&start=' + this.get('startIndex') + '&end=' + this.get('endIndex');
+
+    this.set('isLoading', true);
+
+    Ember.$.ajax({
+      url: currentFetchPath,
+      dataType: 'json',
+      type: 'get',
+      contentType: 'application/json',
+      success: this._fetchSuccess,
+      beforeSend: function (xhr) {
+        xhr.setRequestHeader('X-Requested-By', 'ambari');
+        xhr.setRequestHeader('Authorization', 'Basic YWRtaW46YWRtaW4=');
+      },
+      success: function (response, textStatus, jQxhr) {
+        _self.set('fileContent', _self.get('fileContent') + response.data);
+        _self.set('fileFetchFinished', response.isFileEnd);
+        _self.set('isLoading', false);
+
+      },
+      error: function (jQxhr, textStatus, errorThrown) {
+        console.log("Preview Fail pagecontent: " + errorThrown);
+        _self.set('hasError', true);
+        _self.set('isLoading', false);
+      }
+    })
+
+    this.set('startIndex', (this.get('startIndex') + this.get('offset')));
+
+  },
+
+  _fetchSuccess: function (response, textStatus, jQxhr) {
+    this.set('fileContent', this.get('fileContent') + response.data);
+    this.set('fileFetchFinished', response.isFileEnd);
+    this.set('isLoading', false);
+  },
+
+  _fetchError: function (jQxhr, textStatus, errorThrown) {
+    console.log("Preview Fail pagecontent: " + errorThrown);
+    this.set('hasError', true);
+    this.set('isLoading', false);
+  },
+
+  download: function (event) {
+    this.get('filesDownloadService').download();
+  }
+
+});
+

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/services/file-rename.js
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/services/file-rename.js b/contrib/views/files/src/main/resources/ui/app/services/file-rename.js
new file mode 100644
index 0000000..31109f0
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/services/file-rename.js
@@ -0,0 +1,54 @@
+/**
+ * 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.
+ */
+
+import Ember from 'ember';
+import FileOperationMixin from '../mixins/file-operation';
+
+export default Ember.Service.extend(FileOperationMixin, {
+  logger: Ember.inject.service('alert-messages'),
+
+  // Returns a promise for the operation. Upon sucess or error, this also
+  // appropriately sends error messages.
+  rename: function(srcPath, destName) {
+    return new Ember.RSVP.Promise((resolve, reject) => {
+      var basePath = this.getBaseDirPath(srcPath);
+      var destPath = basePath + destName;
+      if(this._isDestinationPathExists(destPath)) {
+        var error = {success: false, message: `${destPath} already exists`, retry: true};
+        return reject(error);
+      }
+
+      var adapter = this.get('store').adapterFor('file');
+      var baseURL = adapter.buildURL('file');
+      var renameUrl = baseURL.substring(0, baseURL.lastIndexOf('/')) + "/rename";
+      var data = {src: srcPath, dst: destPath};
+      adapter.ajax(renameUrl, "POST", {data: data}).then((response) => {
+        this.get('logger').success(`Successfully renamed ${srcPath} to ${destPath}.`, {}, {flashOnly: true});
+        resolve(response);
+      }, (responseError) => {
+        var error = this.extractError(responseError);
+        this.get('logger').danger(`Failed to rename ${srcPath} to ${destPath}`, error);
+        reject(error);
+      });
+    });
+  },
+
+  _isDestinationPathExists(destinationPath) {
+    return this.get('store').peekAll('file').isAny('path', destinationPath);
+  }
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/services/files-download.js
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/services/files-download.js b/contrib/views/files/src/main/resources/ui/app/services/files-download.js
new file mode 100644
index 0000000..5b54bc0
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/services/files-download.js
@@ -0,0 +1,157 @@
+/**
+ * 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.
+ */
+
+import Ember from 'ember';
+import FileOperationMixin from '../mixins/file-operation';
+
+export default Ember.Service.extend(FileOperationMixin, {
+  fileSelectionService: Ember.inject.service('files-selection'),
+  logger: Ember.inject.service('alert-messages'),
+
+  download: function() {
+    var entries = this.get('fileSelectionService.files');
+    if(entries.length === 0) {
+      return this._downloadEmptyError();
+    } else if(entries.length === 1) {
+      return this._downloadSingle(entries);
+    } else {
+      return this._downloadMulti(entries);
+    }
+  },
+
+  concatenate: function() {
+    var entries = this.get('fileSelectionService.files');
+    if(entries.length === 0 || entries.length === 1) {
+      return this._concatenateNotPossibleError();
+    } else {
+      return this._concatenateFiles(entries);
+    }
+  },
+
+  _downloadSingle: function(entries) {
+    var entry = entries[0];
+    if(entry.get('isDirectory')) {
+      // There is no difference between downloading a single directory
+      // or multiple directories and file.
+      return this._downloadMulti(entries);
+    }
+    var adapter = this.get('store').adapterFor('file');
+    var data = {checkperm: true, path: entry.get('path')};
+    return new Ember.RSVP.Promise((resolve, reject) => {
+        adapter.ajax(this._getDownloadBrowseUrl(), "GET", {data: data}).then(
+          (response) => {
+            if(response.allowed) {
+              window.location.href = this._getDownloadUrl(entry.get('path'));
+              resolve();
+            }
+          }, (rejectResponse) => {
+            var error = this.extractError(rejectResponse);
+            this.get('logger').danger("Failed to download file.", error);
+            reject(error);
+          });
+    });
+  },
+
+  _downloadMulti: function(entries) {
+    var entryPaths = entries.map((entry) => {
+      return entry.get('path');
+    });
+    var data = {download: true, entries: entryPaths};
+    var adapter = this.get('store').adapterFor('file');
+    return new Ember.RSVP.Promise((resolve, reject) => {
+      adapter.ajax(this._getDownloadGenLinkUrl(), "POST", {data: data}).then(
+        (response) => {
+          var downloadZipLink = this._getDownloadZipUrl(response.requestId);
+          window.location.href = downloadZipLink;
+          resolve();
+        }, (rejectResponse) => {
+          //TODO: Need to do alerts and logging.
+          var error = this.extractError(rejectResponse);
+          this.get('logger').danger("Failed to download Zip.", error);
+          reject(error);
+        });
+    });
+  },
+
+  _concatenateFiles: function(entries) {
+    var entryPaths = entries.map((entry) => {
+      return entry.get('path');
+    });
+
+    var data = {download: true, entries: entryPaths};
+    var adapter = this.get('store').adapterFor('file');
+    return new Ember.RSVP.Promise((resolve, reject) => {
+      adapter.ajax(this._getConcatGenLinkUrl(), "POST", {data: data}).then(
+        (response) => {
+          var downloadConcatLink = this._getDownloadConcatUrl(response.requestId);
+          window.location.href = downloadConcatLink;
+          resolve();
+        }, (rejectResponse) => {
+          //TODO: Need to do alerts and logging.
+          var error = this.extractError(rejectResponse);
+          this.get('logger').danger("Failed to concatenate files.", error);
+          reject(error);
+        });
+    });
+  },
+
+  _downloadEmptyError: function() {
+    return new Ember.RSVP.Promise(function(resolve, reject) {
+      reject("No files to download.");
+    });
+  },
+  _concatenateNotPossibleError: function() {
+    return new Ember.RSVP.Promise(function(resolve, reject) {
+      reject("Cannot concatenate zero or single file.");
+    });
+  },
+
+  _getDownloadGenLinkUrl: function() {
+    var urlFragments = this._getBaseURLFragments();
+    return urlFragments.slice(0, urlFragments.length - 2).join('/') + "/download/zip/generate-link";
+  },
+
+  _getDownloadZipUrl: function(requestId) {
+    var genLinkUrl = this._getDownloadGenLinkUrl();
+    return genLinkUrl.substring(0, genLinkUrl.lastIndexOf('/')) + "?requestId=" + requestId;
+  },
+
+  _getDownloadBrowseUrl: function() {
+    var urlFragments = this._getBaseURLFragments();
+    return urlFragments.slice(0, urlFragments.length - 2).join('/') + "/download/browse";
+  },
+
+  _getDownloadUrl: function(path) {
+    return this._getDownloadBrowseUrl() + "?path=" + path + "&download=true";
+  },
+
+  _getConcatGenLinkUrl: function() {
+    var urlFragments = this._getBaseURLFragments();
+    return urlFragments.slice(0, urlFragments.length - 2).join('/') + "/download/concat/generate-link";
+  },
+
+  _getDownloadConcatUrl: function(requestId) {
+    var genLinkUrl = this._getConcatGenLinkUrl();
+    return genLinkUrl.substring(0, genLinkUrl.lastIndexOf('/')) + "?requestId=" + requestId;
+  },
+
+  _logError: function(message, error) {
+    this.get('logger').danger(message, error);
+  }
+
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/services/files-selection.js
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/services/files-selection.js b/contrib/views/files/src/main/resources/ui/app/services/files-selection.js
new file mode 100644
index 0000000..724c72a
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/services/files-selection.js
@@ -0,0 +1,64 @@
+/**
+ * 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.
+ */
+
+import Ember from 'ember';
+
+export default Ember.Service.extend({
+  files: [],
+  lastFileSelected: null,
+  filesCount: Ember.computed('files.[]', function() {
+    return this.get('files').filterBy('isDirectory', false).length;
+  }),
+  folderCount: Ember.computed('files.[]', 'filesCount', function() {
+    return this.get('files.length') - this.get('filesCount');
+  }),
+
+  selectFiles: function(files) {
+    files.forEach((file) => {
+      file.set('isSelected', true);
+      this.get('files').pushObject(file);
+      this.set('lastFileSelected', file);
+    });
+  },
+
+  deselectFile: function(file) {
+
+    if (file.get('isSelected')) {
+        file.set('isSelected', false);
+    }
+
+    this.set('files', this.get('files').without(file));
+    if(file === this.get('lastFileSelected')) {
+      this.set('lastFileSelected', this.get('files').objectAt(this.get('files.length') - 1));
+    }
+
+  },
+
+  deselectAll: function() {
+    this.get('files').forEach((file) => {
+      file.set('isSelected', false);
+    });
+    this.set('files', []);
+    this.set('lastFileSelected');
+  },
+
+  reset: function() {
+    this.set('files', []);
+    this.set('lastFileSelected');
+  }
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/services/modal-event-bus.js
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/services/modal-event-bus.js b/contrib/views/files/src/main/resources/ui/app/services/modal-event-bus.js
new file mode 100644
index 0000000..aa9075f
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/services/modal-event-bus.js
@@ -0,0 +1,48 @@
+/**
+ * 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.
+ */
+
+import Ember from 'ember';
+
+export default Ember.Service.extend({
+  registerModal: function(modalControlProperty) {
+    if(Ember.isBlank(modalControlProperty) || (typeof modalControlProperty !== 'string')) {
+      Ember.assert("Modal: Can only register with a 'String' control property name.", false);
+      return false;
+    }
+    if(typeof this.get(modalControlProperty) !== 'undefined') {
+      Ember.assert("Modal: '" + modalControlProperty + "' has already been registered.", false);
+      return false;
+    }
+    this.set(modalControlProperty, false);
+  },
+
+  showModal: function(modalControlProperty) {
+    if(Ember.isBlank(modalControlProperty) || (typeof modalControlProperty !== 'string')) {
+      Ember.assert("Modal: Can only use 'String' control property name for showing modal.", false);
+      return false;
+    }
+    this.set(modalControlProperty, true);
+  },
+  resetModal: function(modalControlProperty) {
+    if(Ember.isBlank(modalControlProperty) || (typeof modalControlProperty !== 'string')) {
+      Ember.assert("Modal: Can only use 'String' control property name for reset modal.", false);
+      return false;
+    }
+    this.set(modalControlProperty);
+  }
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/styles/app.less
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/styles/app.less b/contrib/views/files/src/main/resources/ui/app/styles/app.less
new file mode 100644
index 0000000..55327e9
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/styles/app.less
@@ -0,0 +1,188 @@
+/**
+ * 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.
+ */
+
+@import 'bootstrap';
+
+// Component customizations
+@border-radius-base: 2px;
+@border-radius-large: 3px;
+@border-radius-small: 1.5px;
+
+// Breadcrumb customizations
+@breadcrumb-bg: @body-bg;
+@breadcrumb-separator: ">";
+.breadcrumb {
+  display: inline;
+  padding-left: 5px;
+  li {
+    position: relative;
+    top: 2px;
+  }
+}
+
+
+// Dropdown customizations
+@dropdown-link-hover-color: @link-hover-color;
+@dropdown-link-color: @link-color;
+
+body {
+  min-width: 1150px;
+  min-height: 800px;
+}
+
+.container-wrap {
+  margin-top: 5px;
+}
+
+
+.files-header {
+  padding-bottom: 10px;
+  border-bottom: 2px solid lighten(@gray-light, 25%);
+}
+
+.file-row {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid darken(@gray-lighter, 5%);
+  -webkit-user-select: none;  /* Chrome all / Safari all */
+  -moz-user-select: none;     /* Firefox all */
+  -ms-user-select: none;      /* IE 10+ */
+  user-select: none;
+  &:hover {
+    background-color: @table-bg-hover;
+  }
+}
+.row-selected {
+  background-color: lighten(@component-active-bg, 40%) !important;
+}
+
+
+
+.context-text-row {
+  position: absolute;
+  .context-text {
+    position: relative;
+    display: inline-block;
+    padding: 5px 20px;
+    background: darken(@state-warning-bg, 25%);
+    border: 1px solid @state-warning-border;
+    border-radius: @border-radius-large;
+  }
+}
+
+.context-menu-row {
+  padding-top: 5px;
+  li > a {
+    text-decoration: none;
+  }
+  li.disabled > a {
+    color: @gray-light;
+    cursor: default;
+  }
+
+  .context-menu-entries {
+    margin-bottom: 0px;
+  }
+}
+
+.flash-messages-wrap {
+  position: absolute;
+  width: 40%;
+  min-width: 575px;
+  left: 50%;
+  margin-left: -20%;
+  z-index: 1000;
+}
+
+.flash-messages {
+  border-radius: @border-radius-large;
+  .alert-icon {
+    float: left;
+    margin-right: 15px;
+  }
+
+  .alert-message-wrap {
+    display: table;
+    min-height: 56px;
+    .alert-message {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+
+}
+
+
+
+.spinner-wrap {
+  margin-right: 15px;
+}
+
+.file-picker {
+  .file-picker__dropzone {
+    color: @gray-light;
+    cursor: pointer;
+    border: 2px dashed darken(@gray-lighter, 10%);
+    height: 150px;
+    .vert-align-middle {
+      margin-top: 32px;
+    }
+  }
+}
+.file-picker-progress {
+  margin-bottom: 5px;
+}
+
+.loading-spinner {
+  margin-top: 150px;
+}
+.loading-message {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-top: 7px;
+  position: fixed;
+  top: 0px;
+  z-index: 1000;
+  border-radius: @border-radius-large;
+  background-color: darken(@state-warning-bg, 25%);
+}
+
+.well-sm {
+  margin-bottom: 10px;
+}
+
+.messages-header {
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+  border-bottom: 1px solid darken(@gray-lighter, 5%);
+}
+
+.messages-title {
+  font-size: 26px;
+}
+
+.directory-viewer {
+  height: 300px;
+  overflow-x: scroll;
+  overflow-y: scroll;
+  border:1px solid #e5e5e5;
+}
+
+div.text-danger pre{
+  color: #a94442;
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/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
deleted file mode 100644
index b41fa2e..0000000
--- a/contrib/views/files/src/main/resources/ui/app/styles/application.less
+++ /dev/null
@@ -1,388 +0,0 @@
-/**
- * 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.
- */
-
-.wrap {
-  padding: 10px;
-}
-
-.panel-files {
-  .panel-heading {
-    height: 41px;
-    padding: 5px 10px;
-    border-radius: 0px;
-    border: 1px solid #DDDDDD;
-
-    .breadcrumb {
-      margin-bottom: 0;
-      padding: 5px 10px;
-      //background-color: #fff;
-
-      .active a {
-        color: #999999 !important;
-      }
-
-      li:first-child + li:before {
-        padding: 0 3px;
-        content: " ";
-      }
-    }
-
-    .upload-area, .mkdir-area{
-      // margin: -4px 5px -4px 5px;
-      width: 350px;
-      margin-right: 5px;
-    }
-    .uploadwrap, .mkdirwrap{
-      margin-right: 5px;
-    }
-    .btn-mkdir-cancel {
-      border-radius: 0 !important;
-      margin-left: -1px;
-    }
-    .mkdir-input{
-      font-size: 14px;
-    }
-    .btn-upload {
-      button {
-        border-radius:0 !important;
-      }
-    }
-  }
-
-  .panel-body {
-    .i-am-in {
-      margin: 0;
-      width: 80%;
-      .dir-name {
-        color: black;
-      }
-    }
-    .input-group-search {
-      .input-search {
-        padding-right: 25px;
-      }
-      .form-control-feedback {
-        position: absolute;
-        z-index: 2;
-        top: 8px;
-        right: 39px;
-        cursor: pointer;
-        opacity: 0.5;
-      }
-    }
-  }
-
-  .table-files{
-    td {
-      cursor: pointer;
-    }
-    thead {
-      background-color: #f5f5f5;
-    }
-    thead > tr > th {
-      border-bottom: 1px solid #dddddd;
-      border-top: 1px solid #dddddd !important;
-    }
-    thead tr th.icon {
-      width: 2%;
-    }
-    thead tr th.path {
-      cursor: pointer;
-      width: 30%;
-    }
-    thead tr th.size {
-      cursor: pointer;
-      width: 10%;
-    }
-    thead tr th.date {
-      cursor: pointer;
-      width: 20%;
-    }
-    thead tr th.owner {
-      cursor: pointer;
-      width: 10%;
-    }
-    thead tr th.grp {
-      cursor: pointer;
-      width: 10%;
-    }
-    thead tr th.perm {
-      cursor: pointer;
-      width: 10%;
-    }
-    thead tr th.download {
-      width: 2%;
-      .btn-group{
-        width: 145px;
-      }
-    }
-    thead tr th.check{
-      width: 2%;
-      .btn-group {
-        width: 50px;
-        .input-group-addon {
-          padding: 2px 17px 1px 5px;
-          position: relative;
-          float: left;
-        }
-        .checkbox {
-          margin: 0;
-          min-height: 17px;
-        }
-      }
-    }
-    tbody {
-      .error-row{
-        td {
-          padding: 0;
-          border: 0;
-          & > div {
-            border-top: 1px solid #DDDDDD;
-            padding: 8px;
-            color: #a94442;
-            word-break: break-word;
-          }
-        }
-      }
-      .fa-spin {
-        -webkit-animation: spin 0.7s infinite linear;
-        -moz-animation: spin 0.7s infinite linear;
-        -o-animation: spin 0.7s infinite linear;
-        animation: spin 0.7s infinite linear;
-      }
-      .chmod-row {
-        &:hover > td {
-          background-color: #fff;
-          cursor: default;
-        }
-        & > td {
-          border-top: 0;
-          padding: 0;
-        }
-/*         .chmod-wrap {
-  transition: all 0.3s ease;
-  opacity: 1;
-  margin-right: 0px;
-  height: 32px;
-  overflow: hidden;
-  padding-top: 5px;
-} */
-      }
-      .btn-delete {
-        .popover-content{
-          width: 80px;
-        }
-      }
-      .levelup {
-        text-align: center;
-      }
-      .levelup:hover {
-        background-color: #dddddd;
-      }
-      tr {
-        &.isMoving {
-          opacity: 0.5;
-        }
-        td {
-          vertical-align: middle;
-        }
-        .file-actions{
-          width: 130px;
-          margin-bottom: 0;
-          .delete-forever {
-            float: right;
-            margin: 0px 0px 0 10px;
-          }
-        }
-        .mod-time{
-          margin: 0;
-        }
-        .file-name {
-          margin-top: -5px;
-          margin-bottom: -5px;
-        }
-        .rename-area {
-          //margin: -4px;
-        }
-        .btn-rename {
-          display: none;
-        }
-        &:hover .btn-rename {
-          display: inline-block;
-        }
-        .btn-rename-cancel {
-          border-radius: 0 !important;
-          margin-left: -1px;
-        }
-        .rename-input{
-          font-size: 14px;
-        }
-      }
-    }
-  }
-
-}
-
-
-.btn-file {
-    position: relative;
-    overflow: hidden;
-}
-.btn-file input[type=file] {
-    position: absolute;
-    top: 0;
-    right: 0;
-    min-width: 100%;
-    min-height: 100%;
-    font-size: 999px;
-    text-align: right;
-    filter: alpha(opacity=0);
-    opacity: 0;
-    outline: none;
-    background: white;
-    cursor: inherit;
-    display: block;
-}
-
-.dropdown-submenu {
-  position:relative;
-  & > a {
-    white-space: normal !important;
-  }
-  & > .dropdown-menu {
-    top:0;
-    left:100%;
-    margin-top:-6px;
-    margin-left:-1px;
-    -webkit-border-radius:0 6px 6px 6px;
-    -moz-border-radius:0 6px 6px 6px;
-    border-radius:0 6px 6px 6px;
-  }
-  &:hover > .dropdown-menu {
-    display:block;
-  }
-  &.pull-left {
-    float:none;
-    & > .dropdown-menu {
-      left:-100%;
-      margin-left:10px;
-    }
-  }
-  & > .left-submenu {
-    -webkit-border-radius:6px 0 6px 6px;
-    -moz-border-radius:6px 0 6px 6px;
-    border-radius:6px 0 6px 6px;
-    float: right;
-    right: 100%;
-    left: inherit;
-  }
-}
-
-#bulkDropdown {
-  .sub-label{
-    display: inline-block;
-    width: 55%;
-  }
-}
-
-#context-menu {
-  .sub-label{
-    display: inline-block;
-    width: 55%;
-  }
-  .dropdown-confirm {
-    margin: -4px 8px;
-  }
-}
-
-.dropdown-confirm {
-  margin: -4px 0;
-}
-
-
-.fa-right {
-  top: 3px;
-  position: relative;
-  color: #cccccc;
-}
-
-.fa-gr {
-  color: #ccc;
-}
-
-
-.dropdown-context {
-  .nav-header{
-    cursor:default;
-  }
-  .dropdown-submenu:hover {
-    .dropdown-menu {
-      display: none;
-    }
-    & > .dropdown-menu {
-      display: block;
-    }
-  }
-}
-
-.dropdown-context-sub:before, .dropdown-context-sub:after{
-  display:none;
-}
-.compressed-context {
-  a {
-    padding-left: 14px;
-    padding-top: 0;
-    padding-bottom: 0;
-    font-size: 13px;
-  }
-  .divider {
-    margin: 5px 1px;
-  }
-  .nav-header {
-    padding:1px 13px;
-  }
-}
-
-.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;
-  }
-}
-.modal-backdrop.in {
-  filter: alpha(opacity=0);
-  opacity: 0;
-}

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/application.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/application.hbs b/contrib/views/files/src/main/resources/ui/app/templates/application.hbs
index 5ce40eb..543c4ff 100644
--- a/contrib/views/files/src/main/resources/ui/app/templates/application.hbs
+++ b/contrib/views/files/src/main/resources/ui/app/templates/application.hbs
@@ -1,21 +1,37 @@
 {{!
-   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.
+* 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.
 }}
 
-<div class="wrap">
+<div class="container-fluid container-wrap">
+  <div class="row">
+    <div class="flash-messages-wrap">
+      {{#each flashMessages.queue as |flash|}}
+        {{alert-message flash=flash}}
+      {{/each}}
+    </div>
+
+  </div>
+  {{#if isLoading}}
+    <div class="row">
+      <div class="col-md-2 col-xs-2 col-md-offset-5 col-xs-offset-5 loading-message text-center">
+        {{fa-icon icon="spinner" spin=true}} Loading
+      </div>
+    </div>
+  {{/if}}
   {{outlet}}
 </div>
+

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/.gitkeep
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/.gitkeep b/contrib/views/files/src/main/resources/ui/app/templates/components/.gitkeep
new file mode 100644
index 0000000..e69de29

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/alert-message-display.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/alert-message-display.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/alert-message-display.hbs
new file mode 100644
index 0000000..8dfa913
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/templates/components/alert-message-display.hbs
@@ -0,0 +1,34 @@
+{{!
+* 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.
+}}
+
+
+<p><strong>{{{title}}}</strong></p>
+<div>
+  <pre class="prettyprint">
+    <small>
+      {{shortenedValue}}
+      {{#if shorten}}
+        {{#unless expanded}}
+          <a href="#" {{action "toggleExpanded"}}>(more...)</a>
+        {{else}}
+          <a href="#" {{action "toggleExpanded"}}>(less...)</a>
+        {{/unless}}
+      {{/if}}
+    </small>
+  </pre>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/alert-message.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/alert-message.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/alert-message.hbs
new file mode 100644
index 0000000..29a5fa0
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/templates/components/alert-message.hbs
@@ -0,0 +1,34 @@
+{{!
+* 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.
+}}
+
+<div class={{alert-message-context-class flash.type "clearfix alert alert-dismissible alert-"}}>
+  <button type="button" class="close" {{action "closeAlert"}}><span aria-hidden="true">&times;</span></button>
+  <div class="alert-icon">
+    {{#fa-stack size=2}}
+      {{fa-icon "circle-thin" stack=2}}
+      {{fa-icon (alert-message-icon-class flash.type) stack=1}}
+    {{/fa-stack}}
+  </div>
+  <div class="alert-message-wrap">
+    <div class="alert-message">
+      {{{flash.message}}}
+    </div>
+  </div>
+
+</div>
+

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/chmodInput.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/chmodInput.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/chmodInput.hbs
deleted file mode 100644
index 4805e65..0000000
--- a/contrib/views/files/src/main/resources/ui/app/templates/components/chmodInput.hbs
+++ /dev/null
@@ -1,100 +0,0 @@
-{{!
-   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.
-}}
-
-<td colspan="8" class="">
-
-<div class="modal chmodal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
-  <div class="modal-dialog modal-sm">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-        <h4 class="modal-title">Edit permission</h4>
-      </div>
-      <div class="modal-body">
-
-        <form class="form-horizontal" role="form">
-          <div class="form-group">
-            <label class="col-sm-2 control-label">User</label>
-            <div class="col-sm-10">
-              <div class="btn-group" data-toggle="buttons">
-                <label {{bind-attr class=":btn :btn-sm usrR:btn-primary:btn-default :btn-chmod" }} >
-                  {{input type="checkbox" checked=usrR}} <span>Read</span>
-                </label>
-                <label {{bind-attr class=":btn :btn-sm usrW:btn-primary:btn-default :btn-chmod" }} >
-                  {{input type="checkbox" checked=usrW}} <span>Write</span>
-                </label>
-                <label {{bind-attr class=":btn :btn-sm usrE:btn-primary:btn-default :btn-chmod" }} >
-                  {{input type="checkbox" checked=usrE}} <span>Execute</span>
-                </label>
-              </div>
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="col-sm-2 control-label">Group</label>
-            <div class="col-sm-10">
-              <div class="btn-group" data-toggle="buttons">
-                <label {{bind-attr class=":btn :btn-sm grpR:btn-primary:btn-default :btn-chmod" }} >
-                  {{input type="checkbox" checked=grpR}} <span>Read</span>
-                </label>
-                <label {{bind-attr class=":btn :btn-sm grpW:btn-primary:btn-default :btn-chmod" }} >
-                  {{input type="checkbox" checked=grpW}} <span>Write</span>
-                </label>
-                <label {{bind-attr class=":btn :btn-sm grpE:btn-primary:btn-default :btn-chmod" }} >
-                  {{input type="checkbox" checked=grpE}} <span>Execute</span>
-                </label>
-              </div>
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="col-sm-2 control-label">Other</label>
-            <div class="col-sm-10">
-              <div class="btn-group" data-toggle="buttons">
-                <label {{bind-attr class=":btn :btn-sm otrR:btn-primary:btn-default :btn-chmod" }} >
-                  {{input type="checkbox" checked=otrR}} <span>Read</span>
-                </label>
-                <label {{bind-attr class=":btn :btn-sm otrW:btn-primary:btn-default :btn-chmod" }} >
-                  {{input type="checkbox" checked=otrW}} <span>Write</span>
-                </label>
-                <label {{bind-attr class=":btn :btn-sm otrE:btn-primary:btn-default :btn-chmod" }} >
-                  {{input type="checkbox" checked=otrE}} <span>Execute</span>
-                </label>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-              <div class="checkbox">
-                <label>
-                  {{input type="checkbox"}} <span> Modify recursively</span>
-                </label>
-              </div>
-            </div>
-          </div>
-        </form>
-
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" {{action 'close'}}>Close</button>
-        <button type="button" class="btn btn-primary" {{action 'confirm'}}>Save changes</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-</td>

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/context-row-menu.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/context-row-menu.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/context-row-menu.hbs
new file mode 100644
index 0000000..6a52f33
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/templates/components/context-row-menu.hbs
@@ -0,0 +1,39 @@
+{{!
+* 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 isSelected}}
+    <div class="col-md-12">
+        <ul class="list-inline context-menu-entries">
+            <li class={{if isMultiSelected "disabled"}}><a href="#" {{action "open"}}>{{fa-icon "folder-open-o" size="lg"}} Open</a></li>
+            <li class={{if isMultiSelected "disabled"}}><a href="#" {{action "rename"}}>{{fa-icon "edit" size="lg"}} Rename</a></li>
+            <li class={{if isMultiSelected "disabled"}}><a href="#" {{action "permission"}}>{{fa-icon "lock" size="lg"}} Permissions</a></li>
+            <li><a href="#" {{action "delete"}}>{{fa-icon "trash" size="lg"}} Delete</a></li>
+            <li><a href="#" {{action "copy"}}>{{fa-icon "file-o" size="lg"}} Copy </a></li>
+            <li><a href="#" {{action "move"}}>{{fa-icon "share" size="lg"}} Move </a></li>
+            <li><a href="#" {{action "download"}}>{{fa-icon "download" size="lg"}} Download </a></li>
+            <li class={{unless isOnlyMultiFilesSelected "disabled"}}><a href="#" {{action "concatenate"}}>{{fa-icon "file-text" size="lg"}} concatenate </a></li>
+        </ul>
+
+      {{copy-modal closeModalAction="modalClosed" name="ctx-copy"}}
+      {{move-modal closeModalAction="modalClosed" refreshAction="refreshCurrentRoute" name="ctx-move"}}
+      {{open-preview-modal closeModalAction="modalClosed" name="ctx-open"}}
+      {{rename-modal closeModalAction="modalClosed" refreshAction="refreshCurrentRoute" name="ctx-rename"}}
+      {{delete-modal closeModalAction="modalClosed" refreshAction="refreshCurrentRoute" name="ctx-delete" currentPathIsTrash=currentPathIsTrash}}
+      {{permission-modal closeModalAction="modalClosed" name="ctx-permission"}}
+    </div>
+{{/if}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/contextMenu.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/contextMenu.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/contextMenu.hbs
deleted file mode 100644
index 2cd6303..0000000
--- a/contrib/views/files/src/main/resources/ui/app/templates/components/contextMenu.hbs
+++ /dev/null
@@ -1,43 +0,0 @@
-{{!
-   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.
-}}
-
-{{#dropdown-wrap}}
-<div id="context-menu">
-  <ul class="dropdown-menu dropdown-context compressed-context" role="menu">
-    {{#if view.target.content.isDirectory}}
-      <li><a tabindex="-1" href="#" {{action 'open'}}>Open folder</a></li>
-    {{else}}
-      <li><a tabindex="-1" href="#" {{action 'download'}}>Download</a></li>
-    {{/if}}
-    <li><a tabindex="-1" href="#" {{action 'moveFile' 'cut' view.target.content}}>Move</a></li>
-    <li><a tabindex="-1" href="#" {{action 'showChmod'}} >Permissions</a></li>
-    <li><a tabindex="-1" href="#" {{action 'editName'}} >Rename</a></li>
-    <li class="divider"></li>
-    <li class="dropdown-submenu">
-      <a href="#" data-disabled="disabled">
-      <span> Delete </span>
-        <i class="fa fa-chevron-right pull-right fa-right"></i>
-      </a>
-      <ul class="dropdown-menu">
-        {{confirm-delete confirm="removeFile" deleteForever=true access=true}}
-        {{confirm-delete confirm="moveToTrash" deleteForever=false access=true}}
-      </ul>
-    </li>
-  </ul>
-</div>
-{{/dropdown-wrap}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/copy-modal.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/copy-modal.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/copy-modal.hbs
new file mode 100644
index 0000000..3e561e5
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/templates/components/copy-modal.hbs
@@ -0,0 +1,87 @@
+{{!
+* 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 modalGuard}}
+  <div class="modal fade" tabindex=-1 role="dialog">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h3 class="modal-title">Copy to <span style="font-weight: normal; font-size: 14px;">{{selectionName}}</span>
+          </h3>
+          <div class="text-danger">
+            {{#if browseError}}
+              {{alert-message-display title="Error: "
+              value=browseErrorMessage
+              shorten=true
+              length=100}}
+            {{/if}}
+          </div>
+
+        </div>
+        <div class="modal-body">
+          {{#unless isUpdating}}
+            {{#unless hasError}}
+              {{directory-viewer pathSelectAction="pathSelected" errorAction="browseError"}}
+            {{else}}
+              <div class="text-danger">
+                {{alert-message-display title="Error: "
+                value=currentFailureMessage
+                shorten=true
+                length=100}}
+              </div>
+            {{/unless}}
+          {{else}}
+            <div class="text-center">
+              {{fa-icon "spinner" spin=true size="2"}}
+            </div>
+          {{/unless}}
+        </div>
+        <div class="modal-footer">
+          {{#unless hasError}}
+            <button type="button"
+                    class="btn btn-default {{if isUpdating "disabled"}}" {{action 'close'}}>{{fa-icon icon="close"}}
+              Cancel
+            </button>
+            <button type="submit"
+                    class="btn btn-primary {{if isUpdating "disabled"}}" {{action 'copy'}}>{{fa-icon icon="share"}} Copy
+            </button>
+
+          {{else}}
+            {{#unless shouldRetry}}
+              <button type="button" class="btn btn-default"
+                      disabled={{isUpdating}} {{action "close"}}>{{fa-icon "remove"}} Cancel
+              </button>
+            {{/unless}}
+            <button type="button" class="btn btn-danger"
+                    disabled={{isUpdating}} {{action "retryError"}}>{{fa-icon "refresh"}} Retry
+            </button>
+            {{#if shouldRetry}}
+              <button type="button" class="btn btn-danger"
+                      disabled={{isUpdating}} {{action "skipAndRetry"}}>{{fa-icon "step-forward"}} Skip
+              </button>
+              <button type="button" class="btn btn-danger"
+                      disabled={{isUpdating}} {{action "skipAll"}}>{{fa-icon "fast-forward"}} Skip All
+              </button>
+            {{/if}}
+          {{/unless}}
+        </div>
+      </div>
+    </div>
+  </div>
+{{/if}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/delete-modal.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/delete-modal.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/delete-modal.hbs
new file mode 100644
index 0000000..207a2a8
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/templates/components/delete-modal.hbs
@@ -0,0 +1,69 @@
+{{!
+* 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 modalGuard}}
+  <div class="modal fade" tabindex=-1 role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h4 class="modal-title">{{fa-icon icon="trash"}} Delete</h4>
+        </div>
+        <div class="modal-body">
+          {{#unless isDeleting}}
+            {{#unless hasError}}
+              <p class="lead">Are you sure you want to delete{{#if hasFiles}} {{filesCount}} file(s){{#if hasFolders}} and {{/if}}{{/if}}{{#if hasFolders}} {{folderCount}} folder(s) {{/if}}?</p>
+              {{#if showDeletePermanentCheckbox}}
+                <div class="checkbox">
+                  <label>
+                    {{input type="checkbox" checked=deletePermanently}} <strong>Delete permanently</strong>
+                  </label>
+                </div>
+              {{/if}}
+            {{else}}
+              <p class="text-danger">{{{currentFailureMessage}}}</p>
+              {{alert-message-display title="Details:"
+                value=currentServerFailureMessage
+                shorten=true
+                length=100}}
+            {{/unless}}
+          {{else}}
+            <div class="text-center">
+              {{fa-icon "spinner" spin=true size="2"}}
+            </div>
+          {{/unless}}
+        </div>
+        <div class="modal-footer">
+          {{#unless hasError}}
+            <button type="button" class="btn btn-default" disabled={{isDeleting}} {{action "close"}}>{{fa-icon "remove"}} Cancel</button>
+            <button type="button" class="btn btn-danger" disabled={{isDeleting}} {{action "delete"}}>{{fa-icon "trash"}} Delete</button>
+          {{else}}
+            {{#unless shouldRetry}}
+              <button type="button" class="btn btn-default" disabled={{isDeleting}} {{action "close"}}>{{fa-icon "remove"}} Cancel</button>
+            {{/unless}}
+            <button type="button" class="btn btn-danger" disabled={{isDeleting}} {{action "retryError"}}>{{fa-icon "refresh"}} Retry</button>
+            {{#if shouldRetry}}
+              <button type="button" class="btn btn-danger" disabled={{isDeleting}} {{action "skipAndRetry"}}>{{fa-icon "step-forward"}} Skip</button>
+              <button type="button" class="btn btn-danger" disabled={{isDeleting}} {{action "skipAll"}}>{{fa-icon "fast-forward"}} Skip All</button>
+            {{/if}}
+          {{/unless}}
+        </div>
+      </div>
+    </div>
+  </div>
+{{/if}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/deleteBulk.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/deleteBulk.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/deleteBulk.hbs
deleted file mode 100644
index e7e6c69..0000000
--- a/contrib/views/files/src/main/resources/ui/app/templates/components/deleteBulk.hbs
+++ /dev/null
@@ -1,46 +0,0 @@
-{{!
-   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 isRemoving}}
-<a  tabindex="-1">
-  {{#if deleteForever}}
-    <i class="fa fa-fw fa-exclamation-triangle"></i>
-    <span class="sub-label" > Delete forever </span>
-  {{else}}
-    <i class="fa fa-fw fa-trash-o"></i>
-    <span class="sub-label" >Move To Trash</span>
-  {{/if}}
-  <div class="btn-group text-center dropdown-confirm">
-    <button {{action 'cancel'}} type="button" class="btn btn-xs btn-danger">
-      <span class="glyphicon glyphicon-remove"></span>
-    </button>
-    <button {{action 'confirm'}} type="button" class="btn btn-xs btn-success delete">
-      <span class="glyphicon glyphicon-ok delete"></span>
-    </button>
-  </div>
-</a>
-{{else}}
-<a {{action 'ask'}} tabindex="-1" href="#">
-  {{#if deleteForever}}
-    <i class="fa fa-fw fa-exclamation-triangle"></i> <span class="sub-label" > Delete forever </span>
-  {{else}}
-    <i class="fa fa-fw fa-trash-o"></i> <span class="sub-label" >Move To Trash</span>
-  {{/if}}
-</a>
-{{/if}}
-

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/deletePopover.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/deletePopover.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/deletePopover.hbs
deleted file mode 100644
index e5f3b9a..0000000
--- a/contrib/views/files/src/main/resources/ui/app/templates/components/deletePopover.hbs
+++ /dev/null
@@ -1,38 +0,0 @@
-{{!
-   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.
-}}
-
-<a data-toggle="tooltip" data-placement="bottom" title="Delete"> <i class="fa fa-trash-o fa-lg"></i> </a>
-
-{{#bs-popover triggers='click' placement='left'}}
-  <div class="input-group" >
-    <div class="btn-group ">
-      <button {{action 'close'}} type="button" class="btn btn-xs btn-danger">
-        <i class="fa fa-times fa-fw"></i>
-      </button>
-      <button {{action 'confirm'}} type="button" class="btn btn-xs btn-success">
-        <i class="fa fa-check fa-fw"></i>
-      </button>
-    </div>
-    <div class="checkbox delete-forever">
-      <label>
-      {{input type="checkbox" checkedBinding='deleteForever' }} Delete forever
-      </label>
-    </div>
-  </div>
-{{/bs-popover}}
-

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/directory-viewer.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/directory-viewer.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/directory-viewer.hbs
new file mode 100644
index 0000000..6671b8b
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/templates/components/directory-viewer.hbs
@@ -0,0 +1,17 @@
+{{!
+* 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.
+}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/file-row.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/file-row.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/file-row.hbs
new file mode 100644
index 0000000..2976cf9
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/templates/components/file-row.hbs
@@ -0,0 +1,46 @@
+{{!
+* 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.
+}}
+
+<div class="row">
+  <div class={{get-value-from-columns columnHeaders 'name' 'columnClass'}}>
+    {{#if file.isDirectory}}
+      {{#link-to 'files' (query-params path=file.path) bubbles=false title=file.name}}{{fa-icon "folder-o"}} {{shorten-text file.name 40}} {{/link-to}}
+    {{else}}
+      <span title={{ file.name }}>{{fa-icon "file-o"}} {{shorten-text file.name 40}}</span>
+    {{/if}}
+  </div>
+  <div class={{get-value-from-columns columnHeaders 'size' 'columnClass'}}>
+    {{#unless file.isDirectory}}
+      {{size-humanize file.size}}
+    {{else}}
+      --
+    {{/unless}}
+  </div>
+  <div class={{get-value-from-columns columnHeaders 'date' 'columnClass'}}>
+    {{show-date file.modificationTime 'YYYY-MM-DD HH:mm'}}
+  </div>
+  <div class={{get-value-from-columns columnHeaders 'owner' 'columnClass'}}>
+    {{file.owner}}
+  </div>
+  <div class={{get-value-from-columns columnHeaders 'group' 'columnClass'}}>
+    {{file.group}}
+  </div>
+  <div class={{get-value-from-columns columnHeaders 'permission' 'columnClass'}}>
+    {{file.permission}}
+  </div>
+</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/file-search.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/file-search.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/file-search.hbs
new file mode 100644
index 0000000..298d672
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/templates/components/file-search.hbs
@@ -0,0 +1,20 @@
+{{!
+* 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.
+}}
+
+{{input type="text" placeholder="Search in current directory..." class="form-control input-sm" value=searchText}}
+<span class="input-group-addon">{{fa-icon icon='search'}}</span>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/files-breadcrumb.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/files-breadcrumb.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/files-breadcrumb.hbs
new file mode 100644
index 0000000..2d0e961
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/templates/components/files-breadcrumb.hbs
@@ -0,0 +1,42 @@
+{{!
+* 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 collapsingRequired}}
+  <li>
+    <div class="dropdown">
+      <a class="dropdown-toggle" d="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+        {{#fa-stack}}
+          {{fa-icon "folder-o" stack=2}}
+          {{fa-icon "caret-down" stack=1}}
+        {{/fa-stack}}
+      </a>
+      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+        {{#each collapsedCrumbs as |crumb|}}
+          <li>{{#link-to 'files' (query-params path=crumb.path) title=crumb.name }}{{fa-icon "folder-o"}} {{shorten-text crumb.name 20}}{{/link-to}}</li>
+        {{/each}}
+      </ul>
+    </div>
+  </li>
+{{/if}}
+{{#each expandedCrumbs as |crumb|}}
+  {{#if crumb.last}}
+    <li class="active"><span title={{crumb.name}}>{{shorten-text crumb.name 20}}</span></li>
+  {{else}}
+    <li>{{#link-to 'files' (query-params path=crumb.path) title=crumb.name }}{{shorten-text crumb.name 20}}{{/link-to}}</li>
+  {{/if}}
+{{/each}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/files-collection.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/files-collection.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/files-collection.hbs
new file mode 100644
index 0000000..0dcc15b
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/templates/components/files-collection.hbs
@@ -0,0 +1,53 @@
+{{!
+* 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.
+}}
+
+<div class="row">
+  <div class="col-md-12 col-xs-12 files-header">
+    {{#each columnsConfig as |column|}}
+      <div class={{column.columnClass}} {{action 'rotateSort' column}}>
+        <strong>{{column.title}}</strong>
+        {{#if sortEnabled}}
+          {{#if column.sortable}}
+            <span class="">{{fa-icon icon=(get-sorting-icon column.sortOrder)}}</span>
+          {{/if}}
+        {{/if}}
+      </div>
+    {{/each}}
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-12 col-xs-12">
+    {{#unless isEmptyParentPath}}
+      <div class="row">
+        <div class="col-md-12 col-xs-12">
+          {{#link-to 'files' (query-params path=parentPath)}}
+            <div class="col-md-12 col-xs-12 file-row">
+              {{fa-icon "fa-reply"}}
+            </div>
+          {{/link-to}}
+        </div>
+      </div>
+    {{/unless}}
+    <div style={{containerStyle}}>
+      {{#ember-collection items=items cell-layout=(fixed-grid-layout currentWidth 41) as |file index|}}
+        {{yield file index}}
+      {{/ember-collection}}
+    </div>
+  </div>
+</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/mkdirInput.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/mkdirInput.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/mkdirInput.hbs
deleted file mode 100644
index 14176f9..0000000
--- a/contrib/views/files/src/main/resources/ui/app/templates/components/mkdirInput.hbs
+++ /dev/null
@@ -1,37 +0,0 @@
-{{!
-   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.
-}}
-
-{{#unless isMkdir}}
-  <button type="button" {{action 'edit'}} {{bind-attr class=":btn :btn-default :btn-sm :pull-right :mkdirwrap canCreate::disabled"}}>
-    <i class="fa fa-plus"></i> New directory
-  </button>
-{{else}}
-  <div class="input-group input-group-sm pull-right mkdir-area">
-    {{input class="form-control mkdir-input" valueBinding='newDirName' placeholder="Enter Directory Name" enter='create'}}
-    <div class="input-group-btn">
-      <button  type="button" {{action 'cancel'}} {{bind-attr class=":btn :btn-danger :btn-sm :btn-mkdir-cancel"}} >
-        <i class="fa fa-times"></i> Cancel
-      </button>
-    </div>
-    <div class="input-group-btn">
-      <button  type="button" {{action 'create'}} {{bind-attr class="newDirName::disabled :btn :btn-success :btn-sm :btn-mkdir"}} >
-        <i class="fa fa-check"></i> Create
-      </button>
-    </div>
-  </div>
-{{/unless}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/move-modal.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/move-modal.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/move-modal.hbs
new file mode 100644
index 0000000..1655930
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/templates/components/move-modal.hbs
@@ -0,0 +1,87 @@
+{{!
+* 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 modalGuard}}
+  <div class="modal fade" tabindex=-1 role="dialog">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h3 class="modal-title">Move to <span style="font-weight: normal; font-size: 14px;">{{selectionName}}</span>
+          </h3>
+          <div class="text-danger">
+            {{#if browseError}}
+              {{alert-message-display title="Error: "
+              value=browseErrorMessage
+              shorten=true
+              length=100}}
+            {{/if}}
+          </div>
+
+        </div>
+        <div class="modal-body">
+          {{#unless isUpdating}}
+            {{#unless hasError}}
+              {{directory-viewer pathSelectAction="pathSelected" errorAction="browseError"}}
+            {{else}}
+              <div class="text-danger">
+                {{alert-message-display title="Error: "
+                value=currentFailureMessage
+                shorten=true
+                length=100}}
+              </div>
+            {{/unless}}
+          {{else}}
+            <div class="text-center">
+              {{fa-icon "spinner" spin=true size="2"}}
+            </div>
+          {{/unless}}
+        </div>
+        <div class="modal-footer">
+          {{#unless hasError}}
+            <button type="button"
+                    class="btn btn-default {{if isUpdating "disabled"}}" {{action 'close'}}>{{fa-icon icon="close"}}
+              Cancel
+            </button>
+            <button type="submit"
+                    class="btn btn-primary {{if isUpdating "disabled"}}" {{action 'move'}}>{{fa-icon icon="share"}} Move
+            </button>
+
+          {{else}}
+            {{#unless shouldRetry}}
+              <button type="button" class="btn btn-default"
+                      disabled={{isUpdating}} {{action "close"}}>{{fa-icon "remove"}} Cancel
+              </button>
+            {{/unless}}
+            <button type="button" class="btn btn-danger"
+                    disabled={{isUpdating}} {{action "retryError"}}>{{fa-icon "refresh"}} Retry
+            </button>
+            {{#if shouldRetry}}
+              <button type="button" class="btn btn-danger"
+                      disabled={{isUpdating}} {{action "skipAndRetry"}}>{{fa-icon "step-forward"}} Skip
+              </button>
+              <button type="button" class="btn btn-danger"
+                      disabled={{isUpdating}} {{action "skipAll"}}>{{fa-icon "fast-forward"}} Skip All
+              </button>
+            {{/if}}
+          {{/unless}}
+        </div>
+      </div>
+    </div>
+  </div>
+{{/if}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/new-directory.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/new-directory.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/new-directory.hbs
new file mode 100644
index 0000000..bc21f31
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/templates/components/new-directory.hbs
@@ -0,0 +1,48 @@
+{{!
+* 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.
+}}
+
+<button type="button" class="btn btn-sm btn-primary" id="myBtn" {{action "openModal"}} disabled={{currentPathIsTrash}}>{{fa-icon icon="folder-o"}} New Folder</button>
+
+{{#if modalGuard}}
+  <!-- Modal Dialog -->
+  <div class="modal fade" id="createDirectoryModal" role="dialog">
+    <div class="modal-dialog">
+      <!-- Modal content-->
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h4 class="modal-title">{{fa-icon "folder-o"}} Add new folder</h4>
+        </div>
+        <form role="form">
+          <div class="modal-body">
+            <div class="form-group {{if hasError "has-error"}}">
+              <label>Name</label>
+              {{input type="text" class="form-control" placeholder="Enter folder name..." value=folderName}}
+              {{#if hasError}}<span class="help-block">{{errorMessage}}</span>{{/if}}
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" {{action "close"}}>{{fa-icon "close"}} Cancel</button>
+            <button type="submit" class="btn btn-default btn-primary" {{action "create"}} >{{fa-icon "plus"}} Add</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+<!-- Modal Dialog Ends -->
+{{/if}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/open-preview-modal.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/open-preview-modal.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/open-preview-modal.hbs
new file mode 100644
index 0000000..98a5459
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/templates/components/open-preview-modal.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 modalGuard}}
+  <div class="modal fade" tabindex=-1 role="dialog">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h3 class="modal-title">File Preview</h3>
+          <div>{{ selectedFilePath }}</div>
+        </div>
+        <pre class="modal-body preview-content"
+             style="white-space:pre;margin: 10px; padding: 10px;overflow-y: auto; height: 350px">{{ filePreviewService.fileContent }}</pre>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" {{action 'close'}}>{{fa-icon icon="close"}} Cancel</button>
+          <button type="submit" class="btn btn-primary" {{action 'download'}}>{{fa-icon icon="download"}}Download
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{{/if}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/b988562a/contrib/views/files/src/main/resources/ui/app/templates/components/permission-modal.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/files/src/main/resources/ui/app/templates/components/permission-modal.hbs b/contrib/views/files/src/main/resources/ui/app/templates/components/permission-modal.hbs
new file mode 100644
index 0000000..e6dee66
--- /dev/null
+++ b/contrib/views/files/src/main/resources/ui/app/templates/components/permission-modal.hbs
@@ -0,0 +1,69 @@
+{{!
+* 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 modalGuard}}
+  <div class="modal fade" tabindex=-1 role="dialog">
+    <div class="modal-dialog modal-sm">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h4 class="modal-title">{{fa-icon icon="edit"}} Edit Permissions for {{#if selected.isDirectory}}folder{{else}}file{{/if}}</h4>
+        </div>
+        <form class="form-horizontal">
+          <div class="modal-body">
+
+            <div class="form-group">
+              <label class="col-sm-2 control-label">User</label>
+              <div class="btn-group col-md-10">
+                <button type="button" class="btn {{if usrR "btn-primary" "btn-default"}}" {{action "togglePermission" "usrR"}}>Read</button>
+                <button type="button" class="btn {{if usrW "btn-primary" "btn-default"}}" {{action "togglePermission" "usrW"}}>Write</button>
+                <button type="button" class="btn {{if usrE "btn-primary" "btn-default"}}" {{action "togglePermission" "usrE"}}>Execute</button>
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label class="col-sm-2 control-label">Group</label>
+              <div class="btn-group col-md-10">
+                <button type="button" class="btn {{if grpR "btn-primary" "btn-default"}}" {{action "togglePermission" "grpR"}}>Read</button>
+                <button type="button" class="btn {{if grpW "btn-primary" "btn-default"}}" {{action "togglePermission" "grpW"}}>Write</button>
+                <button type="button" class="btn {{if grpE "btn-primary" "btn-default"}}" {{action "togglePermission" "grpE"}}>Execute</button>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-sm-2 control-label">Other</label>
+              <div class="btn-group col-md-10">
+                <button type="button" class="btn {{if othR "btn-primary" "btn-default"}}" {{action "togglePermission" "othR"}}>Read</button>
+                <button type="button" class="btn {{if othW "btn-primary" "btn-default"}}" {{action "togglePermission" "othW"}}>Write</button>
+                <button type="button" class="btn {{if othE "btn-primary" "btn-default"}}" {{action "togglePermission" "othE"}}>Execute</button>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <span class="spinner-wrap">
+              {{#if isUpdating}}
+                {{fa-icon "refresh" spin=true}}
+              {{/if}}
+            </span>
+            <button type="button" class="btn btn-default {{if isUpdating "disabled"}}" {{action 'close'}}>{{fa-icon icon="close"}} Cancel</button>
+            <button type="submit" class="btn btn-primary {{if isUpdating "disabled"}}" {{action 'chmod'}}>{{fa-icon icon="edit"}} Save</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+{{/if}}
\ No newline at end of file