瀏覽代碼

HUE-5950 [importer] Wire in dropzone on the page for a quick file upload

Enrico Berti 8 年之前
父節點
當前提交
c671475

+ 1 - 0
Gruntfile.js

@@ -41,6 +41,7 @@ module.exports = function(grunt) {
           'desktop/libs/notebook/src/notebook/static/notebook/css/notebook-layout.css': 'desktop/libs/notebook/src/notebook/static/notebook/less/notebook-layout.less',
           'apps/oozie/src/oozie/static/oozie/css/workflow-editor.css': 'apps/oozie/src/oozie/static/oozie/less/workflow-editor.less',
           'apps/filebrowser/src/filebrowser/static/filebrowser/css/display.css': 'apps/filebrowser/src/filebrowser/static/filebrowser/less/display.less',
+          'apps/filebrowser/src/filebrowser/static/filebrowser/css/listdir_components.css': 'apps/filebrowser/src/filebrowser/static/filebrowser/less/listdir_components.less',
           'apps/jobbrowser/src/jobbrowser/static/jobbrowser/css/jobbrowser.css': 'apps/jobbrowser/src/jobbrowser/static/jobbrowser/less/jobbrowser.less',
           'apps/jobbrowser/src/jobbrowser/static/jobbrowser/css/jobbrowser-embeddable.css': 'apps/jobbrowser/src/jobbrowser/static/jobbrowser/less/jobbrowser-embeddable.less',
         }

文件差異過大導致無法顯示
+ 16 - 322
apps/filebrowser/src/filebrowser/static/filebrowser/css/listdir_components.css


+ 276 - 0
apps/filebrowser/src/filebrowser/static/filebrowser/less/listdir_components.less

@@ -0,0 +1,276 @@
+.fixed {
+  position: fixed;
+  top: 40px;
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
+}
+
+.sortable {
+  cursor: pointer;
+}
+
+.file-row {
+  height: 37px;
+}
+
+.fileChooserModal {
+  padding: 14px;
+}
+
+.fileChooserModal .hueBreadcrumb {
+  margin: 0 0 18px !important;
+}
+
+.fieldError {
+  border-color: #B94A48 !important;
+}
+
+.filebrowser .form-inline {
+  position: relative;
+  right: 10px;
+  top: -10px;
+}
+
+.filebrowser .pagination {
+  background-color: #f5f5f5;
+  border-top: 1px solid #e3e3e3;
+  bottom: 0;
+  -webkit-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.1);
+  -moz-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.1);
+  box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.1);
+  left: 0;
+  margin: 0;
+  padding: 0px;
+  position: fixed;
+  width: 100%;
+  z-index: 1001;
+}
+
+.filebrowser .pagination p {
+  padding-top: 10px;
+  padding-left: 10px;
+  margin: 0 .5em;
+}
+
+.filebrowser .pagination select {
+  margin-top: 4px;
+}
+
+.filebrowser .pagination ul {
+  margin-top: 14px;
+  margin-right: 20px;
+}
+
+.filebrowser .pagination-input-form {
+  position: relative;
+  right: 1em;
+  top: 5px;
+}
+
+.filebrowser .pagination-input {
+  text-align: center;
+  width: 40px;
+}
+
+.flush-right {
+  position: relative;
+  right: -3em;
+}
+
+.actionbar {
+  padding-top: 6px;
+  background-color: #FFFFFF;
+}
+
+.shadow {
+  -webkit-box-shadow: 0px 2px 3px rgba(50, 50, 50, 0.1);
+  -moz-box-shadow: 0px 2px 3px rgba(50, 50, 50, 0.1);
+  box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.1);
+}
+
+.scrollable {
+  margin-bottom: 80px;
+}
+
+#jHueHdfsAutocomplete ul li {
+  cursor: pointer;
+}
+
+#jHueHdfsAutocomplete ul li:hover,  #jHueHdfsAutocomplete ul li.active {
+  color: #FFFFFF;
+  background: #338BB8;
+}
+
+#jHueHdfsAutocomplete .popover-content {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.history {
+  padding: 0 10px 8px 0;
+  top: 10px;
+}
+
+.history:hover {
+  border-bottom: 2px solid #338bb8;
+}
+
+.history a {
+  color: #737373;
+  text-decoration: none;
+}
+
+.history.no-history:hover {
+  border-bottom: 2px solid transparent;
+}
+
+.history.no-history a {
+  color: #ccc;
+  cursor: default;
+}
+
+.history > .dropdown-menu {
+  left: inherit;
+  right: 0;
+}
+
+.hoverMsg {
+  background: #000;
+  height: 100%;
+  left: 0;
+  opacity: .5;
+  position: fixed;
+  width: 100%;
+  top:0;
+  z-index: 10000;
+}
+
+.hoverText {
+  color: #fff;
+  font-size: 5em;
+  position: relative;
+  text-align: center;
+  top: 45%;
+  font-weight: 700;
+  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
+  -webkit-animation-name: bounceInDown;
+  animation-name: bounceInDown;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+#copyModal .modal-body, #moveModal .modal-body {
+  max-height: 300px;
+}
+
+#copyModal .modal-footer div, #moveModal .modal-footer div {
+  position: absolute;
+  left: 10px;
+  width: 400px;
+  text-align: left;
+  display: none;
+}
+
+.row-animated {
+  -webkit-transition: background-color 200ms linear;
+  -moz-transition: background-color 200ms linear;
+  -o-transition: background-color 200ms linear;
+  -ms-transition: background-color 200ms linear;
+  transition: background-color 200ms linear;
+}
+
+.row-selected {
+  background-color: #e5e5e5;
+}
+
+.row-highlighted {
+  background-color: #d9edf7;
+}
+
+.row-deleted {
+  background-color: #f2dede;
+}
+
+.context-menu {
+  display: none;
+  position: absolute;
+  width: 250px;
+}
+
+.drag-hover {
+  background: #e5e5e5;
+  border-left: 3px solid #338bb8;
+  border-right: 3px solid #338bb8;
+}
+
+.qq-upload-button {
+  display: inline-block;
+  height: 29px;
+  min-height: 29px;
+  padding: 0 8px;
+  margin: 0;
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 29px;
+  color: #444;
+  text-align: center;
+  text-shadow: none;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: #f9f9f9;
+  background-image: -moz-linear-gradient(top, #fff, #f1f1f1);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#f1f1f1));
+  background-image: -webkit-linear-gradient(top, #fff, #f1f1f1);
+  background-image: -o-linear-gradient(top, #fff, #f1f1f1);
+  background-image: linear-gradient(to bottom, #fff, #f1f1f1);
+  background-repeat: repeat-x;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-color: #f1f1f1 #f1f1f1 #cbcbcb;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  border-color: rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff1f1f1', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+.qq-upload-button-focus {
+  outline: none;
+}
+
+.qq-upload-drop-area {
+  width: 99%;
+}
+
+.qq-upload-failed-text {
+  color: #b94a48;
+}
+
+.filebrowser .editable-breadcrumbs {
+  cursor: text;
+}
+
+.filebrowser .editable-breadcrumbs:hover {
+  background-color: #F0F0F0;
+}
+
+.filebrowser #hueBreadcrumbText {
+  font-size: 1.25em;
+  margin-left: 25px;
+  margin-top: 6px;
+  padding-left: 14px;
+  border-radius: 2px;
+  border: 1px solid #EEE;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  font-weight: bold;
+}

+ 0 - 2
apps/filebrowser/src/filebrowser/templates/listdir.mako

@@ -201,8 +201,6 @@ ${ fb_components.menubar() }
   <p class="hoverText"></p>
 </div>
 
-</div>
-
 %if not is_embeddable:
 ${ commonfooter(request, messages) | n,unicode }
 %endif

+ 10 - 21
apps/filebrowser/src/filebrowser/templates/listdir_components.mako

@@ -603,17 +603,6 @@ from filebrowser.conf import ENABLE_EXTRACT_UPLOADED_ARCHIVE
 
   <div id="submit-wf-modal" class="modal hide"></div>
 
-  <div id="progressStatus" class="uploadstatus well hide">
-    <h4>${ _('Upload progress') }</h4>
-    <div id="progressStatusBar" class="hide progress active">
-      <div class="bar bar-upload"></div>
-    </div>
-    <div id="progressStatusContent" class="scrollable-uploadstatus">
-      <div class="updateStatus"> </div>
-    </div>
-  <div>
-</div>
-
   <script id="fileTemplate" type="text/html">
     <tr class="row-animated" style="cursor: pointer" data-bind="drop: { enabled: name !== '.' && type !== 'file' && (!$root.isS3() || ($root.isS3() && !$root.isS3Root())), value: $data }, event: { mouseover: toggleHover, mouseout: toggleHover, contextmenu: showContextMenu }, click: $root.viewFile, css: { 'row-selected': selected(), 'row-highlighted': highlighted(), 'row-deleted': deleted() }">
       <td class="center" data-bind="click: handleSelect" style="cursor: default">
@@ -2145,7 +2134,7 @@ from filebrowser.conf import ENABLE_EXTRACT_UPLOADED_ARCHIVE
                 '<span class="break-word" data-dz-name></span>' +
                 '<div class="pull-right">' +
                 '<span class="muted" data-dz-size></span>&nbsp;&nbsp;' +
-                '<span data-dz-remove><a href="javascript:undefined;" title="${ _('Cancel upload') }"><i class="fa fa-fw fa-times"></i></a></span>' +
+                '<span data-dz-remove><a href="javascript:undefined;" title="' + DropzoneGlobals.i18n.cancelUpload + '"><i class="fa fa-fw fa-times"></i></a></span>' +
                 '<span style="display: none" data-dz-uploaded><i class="fa fa-fw fa-check muted"></i></span>' +
                 '</div>' +
                 '<div class="progress-row-bar" data-dz-uploadprogress></div>' +
@@ -2157,7 +2146,7 @@ from filebrowser.conf import ENABLE_EXTRACT_UPLOADED_ARCHIVE
               if (e.dataTransfer.files.length > 0) {
                 $('#progressStatus').removeClass('hide');
                 $('#progressStatusBar').removeClass('hide');
-                $('#progressStatusBar div').css("width", "0");
+                $('#progressStatusBar div').css('width', '0');
               }
             },
             processing: function (file) {
@@ -2169,12 +2158,12 @@ from filebrowser.conf import ENABLE_EXTRACT_UPLOADED_ARCHIVE
               this.options.url = '/filebrowser/upload/file?dest=' + newDest;
             },
             uploadprogress: function (file, progress) {
-              $("[data-dz-name]").each(function (cnt, item) {
+              $('[data-dz-name]').each(function (cnt, item) {
                 if ($(item).text() === file.name) {
-                  $(item).parents(".progress-row").find("[data-dz-uploadprogress]").width(progress.toFixed() + "%");
-                  if (progress.toFixed() === "100"){
-                    $(item).parents(".progress-row").find("[data-dz-remove]").hide();
-                    $(item).parents(".progress-row").find("[data-dz-uploaded]").show();
+                  $(item).parents('.progress-row').find('[data-dz-uploadprogress]').width(progress.toFixed() + '%');
+                  if (progress.toFixed() === '100') {
+                    $(item).parents('.progress-row').find('[data-dz-remove]').hide();
+                    $(item).parents('.progress-row').find('[data-dz-uploaded]').show();
                   }
                 }
               });
@@ -2183,7 +2172,7 @@ from filebrowser.conf import ENABLE_EXTRACT_UPLOADED_ARCHIVE
               $('#progressStatusBar div').width(progress.toFixed() + "%");
             },
             canceled: function () {
-              $.jHueNotify.info("${_('Upload has been canceled')}");
+              $.jHueNotify.info(DropzoneGlobals.i18n.uploadCanceled);
             },
             complete: function (data) {
               if (data.xhr.response != '') {
@@ -2193,7 +2182,7 @@ from filebrowser.conf import ENABLE_EXTRACT_UPLOADED_ARCHIVE
                     $(document).trigger('error', response.data);
                   }
                   else {
-                    $(document).trigger('info', response.path + "${ _(' uploaded successfully.') }");
+                    $(document).trigger('info', response.path + ' ' + DropzoneGlobals.i18n.uploadSucceeded);
                     viewModel.filesToHighlight.push(response.path);
                   }
                 }
@@ -2201,7 +2190,7 @@ from filebrowser.conf import ENABLE_EXTRACT_UPLOADED_ARCHIVE
             }
           };
           if (ops.path.toLowerCase() !== 's3a://') {
-            _dropzone = new Dropzone($('.filebrowser')[0], options);
+            _dropzone = new Dropzone($('.hoverMsg')[0], options);
 
             _dropzone.on('queuecomplete', function () {
               setTimeout(function () {

文件差異過大導致無法顯示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


+ 47 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -3500,3 +3500,50 @@ input:invalid:focus,textarea:invalid:focus,select:invalid:focus {
   -moz-box-shadow: 0 0 6px #f8b9b7;
   box-shadow: 0 0 6px #f8b9b7
 }
+
+.uploadstatus {
+  border: 1px solid #d8d8d8;
+  border-bottom: none;
+  bottom: 0;
+  right: 60px;
+  margin: 0;
+  position: fixed;
+  width: 560px;
+  z-index: 1001;
+}
+
+.scrollable-uploadstatus {
+  max-height: 170px;
+  overflow-y: auto;
+}
+
+.uploadstatusbar {
+  background-color: #d9edf7;
+  height: 4px;
+  bottom: 0;
+  left: 0;
+  margin: 0;
+  position: fixed;
+  width: 100%;
+}
+
+.uploadstatusbar div {
+  background-color: #338bb8;
+  height: 4px;
+  width: 30%;
+}
+
+.progress-row {
+  margin-top: 7px;
+}
+
+.progress-row-bar {
+  height: 1px;
+  background-color: #338BB8;
+  width: 0;
+  margin-top: 3px;
+}
+
+.progress .bar-upload {
+  background-color: #338BB8!important;
+}

+ 60 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -5326,6 +5326,66 @@
       var value = ko.unwrap(valueAccessor());
 
       var options = {
+        autoDiscover: false,
+        maxFilesize: 5000000,
+        previewsContainer: '#progressStatusContent',
+        previewTemplate: '<div class="progress-row">' +
+        '<span class="break-word" data-dz-name></span>' +
+        '<div class="pull-right">' +
+        '<span class="muted" data-dz-size></span>&nbsp;&nbsp;' +
+        '<span data-dz-remove><a href="javascript:undefined;" title="' + DropzoneGlobals.i18n.cancelUpload + '"><i class="fa fa-fw fa-times"></i></a></span>' +
+          '<span style="display: none" data-dz-uploaded><i class="fa fa-fw fa-check muted"></i></span>' +
+        '</div>' +
+        '<div class="progress-row-bar" data-dz-uploadprogress></div>' +
+        '</div>',
+        drop: function (e) {
+          $('.hoverMsg').addClass('hide');
+          if (e.dataTransfer.files.length > 0) {
+            $('#progressStatus').removeClass('hide');
+            $('#progressStatusBar').removeClass('hide');
+            $('#progressStatusBar div').css('width', '0');
+          }
+        },
+        uploadprogress: function (file, progress) {
+          $('[data-dz-name]').each(function (cnt, item) {
+            if ($(item).text() === file.name) {
+              $(item).parents('.progress-row').find('[data-dz-uploadprogress]').width(progress.toFixed() + '%');
+              if (progress.toFixed() === '100') {
+                $(item).parents('.progress-row').find('[data-dz-remove]').hide();
+                $(item).parents('.progress-row').find('[data-dz-uploaded]').show();
+              }
+            }
+          });
+        },
+        totaluploadprogress: function (progress) {
+          $('#progressStatusBar div').width(progress.toFixed() + "%");
+        },
+        canceled: function () {
+          $.jHueNotify.info(DropzoneGlobals.i18n.uploadCanceled);
+        },
+        complete: function (data) {
+          if (data.xhr.response != '') {
+            var response = JSON.parse(data.xhr.response);
+            if (response && response.status != null) {
+              if (response.status != 0) {
+                $(document).trigger('error', response.data);
+              }
+              else {
+                $(document).trigger('info', response.path + ' ' + DropzoneGlobals.i18n.uploadSucceeded);
+                if (value.onComplete) {
+                  value.onComplete(response.path);
+                }
+              }
+            }
+          }
+        },
+        queuecomplete: function () {
+          window.setTimeout(function () {
+            $('#progressStatus').addClass('hide');
+            $('#progressStatusBar').addClass('hide');
+            $('#progressStatusBar div').css('width', '0');
+          }, 2500);
+        },
         createImageThumbnails: false
       };
 

+ 49 - 1
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -947,4 +947,52 @@ a:visited {
 .selectize-error {
   color: @hue-error-color;
   font-size: 12px;
-}
+}
+
+.uploadstatus {
+  border: 1px solid #d8d8d8;
+  border-bottom: none;
+  bottom: 0;
+  right: 60px;
+  margin: 0;
+  position: fixed;
+  width: 560px;
+  z-index: 1001;
+}
+
+.scrollable-uploadstatus {
+  max-height: 170px;
+  overflow-y: auto;
+}
+
+.uploadstatusbar {
+  background-color: #d9edf7;
+  height: 4px;
+  bottom: 0;
+  left: 0;
+  margin: 0;
+  position: fixed;
+  width: 100%;
+}
+
+.uploadstatusbar div {
+  background-color: #338bb8;
+  height: 4px;
+  width: 30%;
+}
+
+.progress-row {
+  margin-top: 7px;
+}
+
+.progress-row-bar {
+  height: 1px;
+  background-color: #338BB8;
+  width: 0;
+  margin-top: 3px;
+}
+
+.progress .bar-upload {
+  background-color: #338BB8!important;
+}
+

+ 17 - 1
desktop/core/src/desktop/templates/common_header_footer_components.mako

@@ -92,7 +92,12 @@ from metadata.conf import has_optimizer, OPTIMIZER
     };
 
     DropzoneGlobals = {
-      homeDir: '${ user.get_home_directory() }'
+      homeDir: '${ user.get_home_directory() }',
+      i18n: {
+        cancelUpload: '${ _('Cancel upload') }',
+        uploadCanceled: '${ _('The upload has been canceled') }',
+        uploadSucceeded: '${ _('uploaded successfully') }',
+      }
     };
 
     AutocompleterGlobals = {
@@ -357,6 +362,17 @@ from metadata.conf import has_optimizer, OPTIMIZER
 </%def>
 
 <%def name="footer(messages)">
+
+<div id="progressStatus" class="uploadstatus well hide">
+  <h4>${ _('Upload progress') }</h4>
+  <div id="progressStatusBar" class="hide progress active">
+    <div class="bar bar-upload"></div>
+  </div>
+  <div id="progressStatusContent" class="scrollable-uploadstatus">
+    <div class="updateStatus"> </div>
+  </div>
+</div>
+
 <script type="text/javascript">
   $(document).ready(function () {
     $(document).on("info", function (e, msg) {

+ 1 - 1
desktop/libs/indexer/src/indexer/templates/importer.mako

@@ -255,7 +255,7 @@ ${ assist.assistPanel() }
 
 </style>
 
-<span id="importerComponents" class="notebook">
+<span id="importerComponents" class="notebook" data-bind="dropzone: { url: '/filebrowser/upload/file?dest=' + DropzoneGlobals.homeDir, params: {dest: DropzoneGlobals.homeDir}, paramName: 'hdfs_file', onComplete: function(path){ createWizard.source.path(path); } }">
 <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container-fluid">

部分文件因文件數量過多而無法顯示