CDPD-49776: [ozone] Add UI changes (#3189)

(cherry picked from commit de3a3e6)
(cherry picked from commit ce14518)
Change-Id: I7d3353bf1648afc403f8e2ed39cd450077422617
(cherry picked from commit 0029f3d)

apps/filebrowser/src/filebrowser/templates/fb_components.mako

@@ -51,6 +51,12 @@ else:
               <svg class="hi"><use xlink:href='#hi-adls'></use></svg>
             </span>
           </li>
+        %elif path.lower().find('ofs://') == 0:
+          <li style="padding-top: 12px">
+            <span class="breadcrumb-link homeLink">
+              <svg class="hi"><use xlink:href='#hi-adls'></use></svg>
+            </span>
+          </li>
         %else:
           <li><a class="pointer breadcrumb-link homeLink" data-bind="click: $root.openHome, attr:{'href': window.HUE_BASE_URL + '/filebrowser/view=' + window.USER_HOME_DIR  + '?default_to_home'}">
             <i class="fa fa-home"></i> ${_('Home')}</a>

apps/filebrowser/src/filebrowser/templates/listdir.mako

@@ -49,7 +49,7 @@ ${ fb_components.menubar() }
   %endif
 </style>
 
-<div id="${ path.startswith('s3a://') and 'filebrowser_s3Components' or path.startswith('abfs://') and 'filebrowser_abfsComponents' or 'filebrowserComponents' }" class="container-fluid filebrowser" style="min-height: calc(100vh - 130px);">
+<div id="${ path.startswith('s3a://') and 'filebrowser_s3Components' or path.startswith('abfs://') and 'filebrowser_abfsComponents'  or path.startswith('ofs://') and 'filebrowser_ofsComponents'or 'filebrowserComponents' }" class="container-fluid filebrowser" style="min-height: calc(100vh - 130px);">
   <div class="card card-small">
     <div class="actionbar">
     <%actionbar:render>
@@ -66,7 +66,7 @@ ${ fb_components.menubar() }
               <span class="caret" style="line-height: 15px"></span>
             </button>
             <ul class="dropdown-menu" style="top: auto">
-              <li><a data-hue-analytics="filebrowser:actions-menu/rename-click" href="javascript: void(0)" title="${_('Rename')}" data-bind="visible: !inTrash() && selectedFiles().length == 1, click: renameFile,
+              <li><a data-hue-analytics="filebrowser:actions-menu/rename-click" href="javascript: void(0)" title="${_('Rename')}" data-bind="visible: !inTrash() && selectedFiles().length == 1 && !isOFSRoot() && !isOFSVol(), click: renameFile,
               enable: selectedFiles().length == 1 && isCurrentDirSelected().length == 0"><i class="fa fa-fw fa-font"></i>
               ${_('Rename')}</a></li>
               <li><a data-hue-analytics="filebrowser:actions-menu/move-click" href="javascript: void(0)" title="${_('Move')}" data-bind="click: move, enable: selectedFiles().length > 0 &&
@@ -171,7 +171,7 @@ ${ fb_components.menubar() }
           <!-- /ko -->
           <!-- ko ifnot: isS3() || isABFS() -->
           <div id="upload-dropdown" class="btn-group" style="vertical-align: middle">
-            <a data-hue-analytics="filebrowser:upload-btn-click" href="javascript: void(0)" class="btn upload-link dropdown-toggle" title="${_('Upload')}" data-bind="click: uploadFile, visible: !inTrash(), css: {'disabled': isS3() && isS3Root() || isABFS() && isABFSRoot()}">
+            <a data-hue-analytics="filebrowser:upload-btn-click" href="javascript: void(0)" class="btn upload-link dropdown-toggle" title="${_('Upload')}" data-bind="click: uploadFile, visible: !inTrash(), css: {'disabled': isS3() && isS3Root() || isABFS() && isABFSRoot() || (isOFS() && (isOFSRoot() || isOFSVol()))}">
               <i class="fa fa-arrow-circle-o-up"></i> ${_('Upload')}
             </a>
           </div>
@@ -183,12 +183,13 @@ ${ fb_components.menubar() }
               <span class="caret"></span>
             </a>
             <ul class="dropdown-menu pull-right" style="top: auto">
-              <li data-bind="visible: !isS3() && !isABFS() || isS3() && !isS3Root() || isABFS() && !isABFSRoot()"><a data-hue-analytics="filebrowser:new-file-btn-click" href="javascript: void(0)" class="create-file-link" title="${_('File')}"><i class="fa fa-file-o"></i> ${_('File')}</a></li>
+              <li data-bind="visible: !isS3() && !isABFS() && !isOFS() || isS3() && !isS3Root() || isABFS() && !isABFSRoot() || isOFS() && !isOFSRoot() && !isOFSVol()"><a data-hue-analytics="filebrowser:new-file-btn-click" href="javascript: void(0)" class="create-file-link" title="${_('File')}"><i class="fa fa-file-o"></i> ${_('File')}</a></li>
               <li><a href="javascript: void(0)" class="create-directory-link" title="${_('Directory')}">
                 <i class="fa fa-folder"></i>
-                <span data-bind="visible: !isS3() && !isABFS() || isS3() && !isS3Root() || isABFS() && !isABFSRoot()">${_('Directory')}</span>
-                <span data-bind="visible: isS3() && isS3Root()">${_('Bucket')}</span>
+                <span data-bind="visible: !isS3() && !isABFS() && !isOFS() || isS3() && !isS3Root() || isABFS() && !isABFSRoot() || isOFS() && !isOFSRoot() && !isOFSVol()">${_('Directory')}</span>
+                <span data-bind="visible: (isS3() && isS3Root()) || (isOFS() && isOFSVol())">${_('Bucket')}</span>
                 <span data-bind="visible: isABFS() && isABFSRoot()">${_('File System')}</span>
+                <span data-bind="visible: isOFS() && isOFSRoot()">${_('Volume')}</span>
               </a></li>
             </ul>
           </div>

apps/filebrowser/src/filebrowser/templates/listdir_components.mako

@@ -461,27 +461,33 @@ else:
     <div id="createDirectoryModal" class="modal hide fade">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="${ _('Close') }"><span aria-hidden="true">&times;</span></button>
-        <!-- ko if: (!isS3() && !isABFS()) || (isS3() && !isS3Root()) || (isABFS() && !isABFSRoot()) -->
+        <!-- ko if: (!isS3() && !isABFS() && !isOFS()) || (isS3() && !isS3Root()) || (isABFS() && !isABFSRoot()) || (isOFS() && !isOFSRoot() && !isOFSVol())  -->
         <h2 class="modal-title">${_('Create Directory')}</h2>
         <!-- /ko -->
-        <!-- ko if: isS3() && isS3Root() -->
+        <!-- ko if: (isS3() && isS3Root()) || (isOFS() && isOFSVol()) -->
         <h2 class="modal-title">${_('Create Bucket')}</h2>
         <!-- /ko -->
         <!-- ko if: isABFS() && isABFSRoot() -->
         <h2 class="modal-title">${_('Create File System')}</h2>
         <!-- /ko -->
+        <!-- ko if: isOFS() && isOFSRoot() -->
+        <h2 class="modal-title">${_('Create Volume')}</h2>
+        <!-- /ko -->
       </div>
       <div class="modal-body">
         <label>
-          <!-- ko if: (!isS3() && !isABFS()) || (isS3() && !isS3Root()) || (isABFS() && !isABFSRoot()) -->
+          <!-- ko if: (!isS3() && !isABFS() && !isOFS()) || (isS3() && !isS3Root()) || (isABFS() && !isABFSRoot()) || (isOFS() && !isOFSRoot() && !isOFSVol()) -->
           ${_('Directory Name')}
           <!-- /ko -->
-          <!-- ko if: isS3() && isS3Root() -->
+          <!-- ko if: (isS3() && isS3Root()) || (isOFS() && isOFSVol()) -->
           ${_('Bucket Name')}
           <!-- /ko -->
           <!-- ko if: isABFS() && isABFSRoot() -->
           ${_('File System Name')}
           <!-- /ko -->
+          <!-- ko if: isOFS() && isOFSRoot() -->
+          ${_('Volume Name')}
+          <!-- /ko -->
           <input id="newDirectoryNameInput" name="name" value="" type="text" class="input-xlarge"/></label>
           <input type="hidden" name="path" data-bind="value: currentPath"/>
       </div>
@@ -575,12 +581,12 @@ else:
   <!-- actions context menu -->
   <ul class="context-menu dropdown-menu">
   <!-- ko ifnot: $root.inTrash -->
-    <li data-bind="visible: (!isS3() && !isABFS()) || (isS3() && !isS3Root()) || (isABFS() && !isABFSRoot()), css: {'disabled': $root.selectedFiles().length != 1 || isCurrentDirSelected().length > 0}">
+    <li data-bind="visible: (!isS3() && !isABFS() && !isOFS()) || (isS3() && !isS3Root()) || (isABFS() && !isABFSRoot()) || (isOFS() && !isOFSRoot() && !isOFSVol()), css: {'disabled': $root.selectedFiles().length != 1 || isCurrentDirSelected().length > 0}">
     <a href="javascript: void(0)" title="${_('Rename')}" data-bind="click: ($root.selectedFiles().length == 1 && isCurrentDirSelected().length == 0) ? $root.renameFile: void(0)"><i class="fa fa-fw fa-font"></i>
     ${_('Rename')}</a></li>
-    <li data-bind="visible: (!isS3() && !isABFS()) || (isS3() && !isS3Root()) || (isABFS() && !isABFSRoot()), css: {'disabled': $root.selectedFiles().length == 0 || isCurrentDirSelected().length > 0}">
+    <li data-bind="visible: (!isS3() && !isABFS() && !isOFS()) || (isS3() && !isS3Root()) || (isABFS() && !isABFSRoot()) || (isOFS() && !isOFSRoot() && !isOFSVol()), css: {'disabled': $root.selectedFiles().length == 0 || isCurrentDirSelected().length > 0}">
     <a href="javascript: void(0)" title="${_('Move')}" data-bind="click: ( $root.selectedFiles().length > 0 && isCurrentDirSelected().length == 0) ? $root.move: void(0)"><i class="fa fa-fw fa-random"></i> ${_('Move')}</a></li>
-    <li data-bind="visible: (!isS3() && !isABFS()) || (isS3() && !isS3Root()) || (isABFS() && !isABFSRoot()), css: {'disabled': $root.selectedFiles().length == 0 || isCurrentDirSelected().length > 0}">
+    <li data-bind="visible: (!isS3() && !isABFS() && !isOFS()) || (isS3() && !isS3Root()) || (isABFS() && !isABFSRoot()) || (isOFS() && !isOFSRoot() && !isOFSVol()), css: {'disabled': $root.selectedFiles().length == 0 || isCurrentDirSelected().length > 0}">
     <a href="javascript: void(0)" title="${_('Copy')}" data-bind="click: ($root.selectedFiles().length > 0 && isCurrentDirSelected().length == 0) ? $root.copy: void(0)"><i class="fa fa-fw fa-files-o"></i> ${_('Copy')}</a></li>
     % if show_download_button:
     <li data-bind="css: {'disabled': $root.inTrash() || $root.selectedFiles().length != 1 || selectedFile().type != 'file'}">
@@ -1062,6 +1068,10 @@ else:
         return self.currentPath().toLowerCase().indexOf('abfs://') === 0;
       });
 
+      self.isOFS = ko.pureComputed(function () {
+        return self.currentPath().toLowerCase().indexOf('ofs://') === 0;
+      });
+
       self.scheme = ko.pureComputed(function () {
         var path = self.currentPath();
         return path.substring(0, path.indexOf(':/')) || "hdfs";
@@ -1073,6 +1083,8 @@ else:
           return 'adls';
         } else if (scheme === 's3a' ){
           return 's3';
+        } else if (scheme === 'ofs' ){
+          return 'ofs';
         } else if (!scheme || scheme == 'hdfs') {
           return 'hdfs';
         } else {
@@ -1088,6 +1100,8 @@ else:
           return 'adl:/';
         } else if (path.indexOf('abfs://') >= 0) {
           return 'abfs://';
+        } else if (path.indexOf('ofs://') >= 0) {
+          return 'ofs://';
         } else {
           return '/';
         }
@@ -1106,13 +1120,13 @@ else:
         return currentPath.indexOf('/') === 0 || currentPath.indexOf('hdfs') === 0
       });
       self.isCompressEnabled = ko.pureComputed(function () {
-        return !self.isS3() && !self.isAdls() && !self.isABFS();
+        return !self.isS3() && !self.isAdls() && !self.isABFS() && !self.isOFS();
       });
       self.isSummaryEnabled = ko.pureComputed(function () {
-        return self.isHdfs();
+        return self.isHdfs() || self.isOFS();
       });
       self.isPermissionEnabled = ko.pureComputed(function () {
-        return !self.isS3() && !self.isABFSRoot();
+        return !self.isS3() && !self.isABFSRoot() && !self.isOFS();
       });
       self.isReplicationEnabled = ko.pureComputed(function () {
         return self.isHdfs();
@@ -1132,6 +1146,14 @@ else:
         return self.isABFS() && self.currentPath().toLowerCase() === 'abfs://';
       });
 
+      self.isOFSRoot = ko.pureComputed(function () {
+        return self.isOFS() && self.currentPath().toLowerCase() === 'ofs://';
+      });
+
+      self.isOFSVol = ko.pureComputed(function () {
+        return self.isOFS() && self.currentPath().split("/").length === 3 && self.currentPath().split("/")[2] !== '';
+      });
+
       self.inTrash = ko.computed(function() {
         return self.currentPath().match(/^\/user\/.+?\/\.Trash/);
       });
@@ -1990,6 +2012,10 @@ else:
         });
 
         $("#fileUploader").on('fb:updatePath', function (e, options) {
+          const uploadingToOzone = self.currentPath().startsWith("ofs://");          
+          if (uploadingToOzone && UPLOAD_CHUNK_SIZE) {
+            uploader.setOption('sizeLimit', UPLOAD_CHUNK_SIZE);
+          }  
           uploader.setParams({
             dest: options.dest,
             fileFieldLabel: "hdfs_file"

desktop/core/src/desktop/js/api/apiHelper.js

@@ -70,6 +70,7 @@ class ApiHelper {
       setInLocalStorage(this.getAssistCacheIdentifier({ sourceType: 'hdfs' }), {});
       setInLocalStorage(this.getAssistCacheIdentifier({ sourceType: 'adls' }), {});
       setInLocalStorage(this.getAssistCacheIdentifier({ sourceType: 'abfs' }), {});
+      setInLocalStorage(this.getAssistCacheIdentifier({ sourceType: 'ofs' }), {});
       setInLocalStorage(this.getAssistCacheIdentifier({ sourceType: 'git' }), {});
       setInLocalStorage(this.getAssistCacheIdentifier({ sourceType: 's3' }), {});
       setInLocalStorage(this.getAssistCacheIdentifier({ sourceType: 'collections' }), {});
@@ -215,7 +216,7 @@ class ApiHelper {
    *
    * @param {Object} options
    * @param {string[]} options.path
-   * @param {string} options.type - 's3', 'adls', 'abfs' or 'hdfs'
+   * @param {string} options.type - 's3', 'adls', 'abfs', 'ofs' or 'hdfs'
    * @param {number} [options.offset]
    * @param {number} [options.length]
    * @param {boolean} [options.silenceErrors]
@@ -228,6 +229,8 @@ class ApiHelper {
       url = URLS.ADLS_API_PREFIX;
     } else if (options.type === 'abfs') {
       url = URLS.ABFS_API_PREFIX;
+    } else if (options.type === 'ofs') {
+      url = URLS.OFS_API_PREFIX;
     } else {
       url = URLS.HDFS_API_PREFIX;
     }
@@ -461,7 +464,71 @@ class ApiHelper {
       })
     );
   }
+  /**
+   * @param {Object} options
+   * @param {Function} options.successCallback
+   * @param {Function} [options.errorCallback]
+   * @param {boolean} [options.silenceErrors]
+   * @param {Number} [options.timeout]
+   * @param {Object} [options.editor] - Ace editor
+   *
+   * @param {string[]} options.pathParts
+   * @param {number} [options.pageSize] - Default 500
+   * @param {number} [options.page] - Default 1
+   * @param {string} [options.filter]
+   */
+  fetchOfsPath(options) {
+    let url =
+      URLS.OFS_API_PREFIX +
+      options.pathParts.join('/') +
+      '?format=json&sortby=name&descending=false&pagesize=' +
+      (options.pageSize || 500) +
+      '&pagenum=' +
+      (options.page || 1);
+    if (options.filter) {
+      url += '&filter=' + options.filter;
+    }
+    const fetchFunction = storeInCache => {
+      if (options.timeout === 0) {
+        assistErrorCallback(options)({ status: -1 });
+        return;
+      }
+      return $.ajax({
+        dataType: 'json',
+        url: url,
+        timeout: options.timeout,
+        success: data => {
+          if (
+            !data.error &&
+            !successResponseIsError(data) &&
+            typeof data.files !== 'undefined' &&
+            data.files !== null
+          ) {
+            if (data.files.length > 2 && !options.filter) {
+              storeInCache(data);
+            }
+            options.successCallback(data);
+          } else {
+            assistErrorCallback(options)(data);
+          }
+        }
+      })
+        .fail(assistErrorCallback(options))
+        .always(() => {
+          if (typeof options.editor !== 'undefined' && options.editor !== null) {
+            options.editor.hideSpinner();
+          }
+        });
+    };
 
+    return this.fetchCached(
+      $.extend({}, options, {
+        sourceType: 'ofs',
+        url: url,
+        fetchFunction: fetchFunction
+      })
+    );
+  }
   /**
    * @param {Object} options
    * @param {Function} options.successCallback

desktop/core/src/desktop/js/api/urls.js

@@ -23,6 +23,7 @@ export const DOCUMENTS_SEARCH_API = '/desktop/api2/docs/';
 export const GET_HUE_CONFIG_API = '/desktop/api2/get_hue_config';
 export const FETCH_CONFIG_API = '/api/get_config/';
 export const HDFS_API_PREFIX = '/filebrowser/view=' + encodeURIComponent('/');
+export const OFS_API_PREFIX = '/filebrowser/view=' + encodeURIComponent('ofs://');
 export const ADLS_API_PREFIX = '/filebrowser/view=' + encodeURIComponent('adl:/');
 export const ABFS_API_PREFIX = '/filebrowser/view=' + encodeURIComponent('ABFS://');
 export const GIT_API_PREFIX = '/desktop/api/vcs/contents/';

desktop/core/src/desktop/js/apps/editor/components/aceEditor/autocomplete/AutocompleteResults.ts

@@ -1192,6 +1192,9 @@ class AutocompleteResults {
       }
     } else if (/^hdfs:\/\//i.test(path)) {
       path = path.substring(6);
+    } else if (/^ofs:\/\//i.test(path)) {
+      fetchFunction = 'fetchOfsPath';
+      path = path.substring(5);
     }
 
     const parts = path.split('/');

desktop/core/src/desktop/js/components/sidebar/HueSidebar.vue

@@ -308,6 +308,8 @@
               adaptedName = 'adls';
             } else if (location.href.indexOf('=abfs') !== -1) {
               adaptedName = 'abfs';
+            } else if (location.href.indexOf('=ofs') !== -1) {
+              adaptedName = 'ofs';
             } else {
               adaptedName = 'hdfs';
             }

desktop/core/src/desktop/js/ext/fileuploader.custom.js

@@ -315,6 +315,9 @@ qq.FileUploaderBasic.prototype = {
     setParams: function(params){
         this._options.params = params;
     },
+    setOption: function(key, val){
+        this._options[key] = val;
+    },
     getInProgress: function(){
         return this._filesInProgress;
     },

desktop/core/src/desktop/js/jquery/plugins/jquery.filechooser.js

@@ -125,6 +125,23 @@ const defaults = {
         home: '',
         name: 'ABFS'
       }
+    },
+    ofs: {
+      scheme: 'ofs',
+      root: 'ofs://',
+      home: '/?default_ofs_home',
+      icon: {
+        svg: {
+          brand: '#hi-adls',
+          home: '#hi-adls'
+        },
+        brand: 'fa-windows',
+        home: 'fa-windows'
+      },
+      label: {
+        home: '',
+        name: 'OFS'
+      }
     }
   },
   fsSelected: 'hdfs',

desktop/core/src/desktop/js/ko/bindings/ace/ko.aceEditor.js

@@ -640,6 +640,16 @@ registerBinding(NAME, {
       dblClickAbfsItemSub.remove();
     });
 
+    const dblClickOfsItemSub = huePubSub.subscribe('assist.dblClickOfsItem', assistHdfsEntry => {
+      if ($el.data('last-active-editor')) {
+        editor.session.insert(editor.getCursorPosition(), 'ofs://' + assistHdfsEntry.path + "'");
+      }
+    });
+
+    disposeFunctions.push(() => {
+      dblClickOfsItemSub.remove();
+    });
+
     const dblClickGitItemSub = huePubSub.subscribe('assist.dblClickGitItem', assistGitEntry => {
       if ($el.data('last-active-editor')) {
         editor.session.setValue(assistGitEntry.fileContent());

desktop/core/src/desktop/js/ko/components/assist/assistStorageEntry.js

@@ -39,6 +39,10 @@ const TYPE_SPECIFICS = {
   s3: {
     apiHelperFetchFunction: 'fetchS3Path',
     dblClickPubSubId: 'assist.dblClickS3Item'
+  },
+  ofs: {
+    apiHelperFetchFunction: 'fetchOfsPath',
+    dblClickPubSubId: 'assist.dblClickOfsItem'
   }
 };
 
@@ -359,6 +363,7 @@ class AssistStorageEntry {
     type = type.replace(/s3.*/i, 's3');
     type = type.replace(/adl.*/i, 'adls');
     type = type.replace(/abfs.*/i, 'abfs');
+    type = type.replace(/ofs.*/i, 'ofs');
 
     // TODO: connector.id for browser connectors
     const connector = findBrowserConnector(connector => connector.type === type);

desktop/core/src/desktop/js/ko/components/assist/ko.assistPanel.js

@@ -130,7 +130,8 @@ class AssistPanel {
               interpreter.type === 'adls' ||
               interpreter.type === 'hdfs' ||
               interpreter.type === 's3' ||
-              interpreter.type === 'abfs'
+              interpreter.type === 'abfs' ||
+              interpreter.type === 'ofs'
           );
 
           if (storageBrowsers.length) {

desktop/core/src/desktop/js/ko/components/assist/ko.assistStoragePanel.js

@@ -224,7 +224,9 @@ class AssistStoragePanel {
 
     huePubSub.subscribe('assist.storage.go.home', () => {
       const path =
-        this.activeSource().type === 's3' || this.activeSource().type === 'abfs'
+        this.activeSource().type === 's3' ||
+        this.activeSource().type === 'abfs' ||
+        this.activeSource().type === 'ofs'
           ? '/'
           : window.USER_HOME_DIR;
       this.loadPath(path);