Browse Source

HUE-5614 [responsive] Prettify the new batch notification

Enrico Berti 9 năm trước cách đây
mục cha
commit
bf4188563e

+ 20 - 2
desktop/core/src/desktop/static/desktop/css/responsive.css

@@ -96,10 +96,10 @@ body {
 
 .jobs-panel {
   position: fixed;
-  z-index: 999999;
+  z-index: 2999;
   top: 45px;
   padding: 10px;
-  height: 300px;
+  max-height: 350px;
   width: 400px;
   right: 10px;
   font-size: 13px;
@@ -109,6 +109,20 @@ body {
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
 }
 
+.notification-history {
+  overflow-y: auto;
+  max-height: 270px;
+}
+
+.notification-history-title {
+  background-color: #F1F1F1;
+  padding: 4px;
+}
+
+.notification-history-list li {
+  padding: 4px;
+}
+
 .compose-action {
   float: right;
   margin-top: 10px;
@@ -1036,3 +1050,7 @@ h6 {
 #oozie_workflowComponents .card-toolbar {
   position: static;
 }
+
+.tooltip {
+  z-index: 3000 !important;
+}

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

@@ -4686,7 +4686,7 @@
 
           var Tokenizer = tokenizer.Tokenizer;
           var Rules;
-          if (options.flavor() == 'impala') {
+          if (options.flavor && options.flavor() == 'impala') {
             Rules = impalaRules.ImpalaHighlightRules;
           } else {
             Rules = hiveRules.HiveHighlightRules;

+ 82 - 20
desktop/core/src/desktop/templates/responsive.mako

@@ -203,39 +203,72 @@ ${ hueIcons.symbols() }
           <button class="btn" title="${_('Submission history')}" data-bind="toggle: historyPanelVisible"><i class="fa fa-history"></i>  <div class="jobs-badge">20</div></button>
         </div>
         <div class="jobs-panel" data-bind="visible: historyPanelVisible" style="display: none;">
+          <a class="pointer pull-right" data-bind="click: function(){ historyPanelVisible(false); }"><i class="fa fa-times"></i></a>
           <!-- ko if: editorVM.selectedNotebook() -->
           <!-- ko with: editorVM.selectedNotebook() -->
             <div>
               Showing
               <span data-bind="text: uuid"></span>
               <a href="javascript:void(0)" data-bind="attr: { href: onSuccessUrl() }, text: onSuccessUrl" target="_blank"></a>
-              <!-- ko if: selectedSnippet() -->
-                <div>
-                  Progress
-                  <span data-bind="text: selectedSnippet().progress"></span>
+              <!-- ko if: selectedSnippet -->
+                <!-- ko if: selectedSnippet().progress -->
+                <div class="snippet-progress-container">
+                  <div class="progress-snippet progress active" data-bind="css: {
+                    'progress-starting': progress() == 0 && status() == 'running',
+                    'progress-warning': progress() > 0 && progress() < 100,
+                    'progress-success': progress() == 100,
+                    'progress-danger': progress() == 0 && errors().length > 0}" style="background-color: #FFF; width: 100%">
+                    <div class="bar" data-bind="style: {'width': (errors().length > 0 ? 100 : Math.max(2,progress())) + '%'}"></div>
+                  </div>
                 </div>
+                <!-- /ko -->
                 <!-- ko if: selectedSnippet().result -->
-                <div>
-                  Logs
-                  <span data-bind="text: selectedSnippet().result.logs"></span>
-                </div>
+                <pre data-bind="visible: selectedSnippet().result.logs().length == 0" class="logs logs-bigger">${ _('No logs available at this moment.') }</pre>
+                <pre data-bind="visible: selectedSnippet().result.logs().length > 0, text: result.logs, logScroller: result.logs, logScrollerVisibilityEvent: showLogs, niceScroll" class="logs logs-bigger logs-populated"></pre>
                 <!-- /ko -->
               <!-- /ko -->
             </div>
+            <!-- ko if: history -->
             <hr>
-            X Clear History
-            <ul>
-              <!-- ko foreach: history -->
-                <li style="font-size: 15px; font-weight: 300" data-bind="click: function() { editorVM.openNotebook(uuid()); }">
-                  <span data-bind="text: lastExecuted"></span>
-                  <i class="fa fa-fighter-jet fa-fw"></i>
-                  <span data-bind="text: status"></span>
-                  <span data-bind="text: name"></span>
-                  <span data-bind="text: 'statement'"></span>
-                  <span data-bind="text: uuid"></span>
-                </li>
+            <div class="notification-history margin-bottom-10" data-bind="niceScroll">
+              <!-- ko if: history().length == 0 -->
+              <span style="font-style: italic">${ _('No history to be shown.') }</span>
               <!-- /ko -->
-            </ul>
+              <!-- ko if: history().length > 0 -->
+              <div class="notification-history-title">
+                <strong>${ _('History') }</strong>
+                <div class="inactive-action pointer pull-right" title="${_('Clear the query history')}" data-target="#clearNotificationHistoryModal" data-toggle="modal" rel="tooltip"><i class="fa fa-calendar-times-o"></i></div>
+                <div class="clearfix"></div>
+              </div>
+              <ul class="unstyled notification-history-list">
+                <!-- ko foreach: history -->
+                  <li data-bind="click: function() { editorVM.openNotebook(uuid()); }">
+                    <div class="muted pull-left" data-bind="momentFromNow: {data: lastExecuted, interval: 10000, titleFormat: 'LLL'}"></div>
+                    <div class="pull-right muted">
+                      <!-- ko switch: status -->
+                      <!-- ko case: 'running' -->
+                      <div class="history-status" data-bind="tooltip: { title: '${ _ko("Query running") }', placement: 'bottom' }"><i class="fa fa-fighter-jet fa-fw"></i></div>
+                      <!-- /ko -->
+                      <!-- ko case: 'failed' -->
+                      <div class="history-status" data-bind="tooltip: { title: '${ _ko("Query failed") }', placement: 'bottom' }"><i class="fa fa-exclamation fa-fw"></i></div>
+                      <!-- /ko -->
+                      <!-- ko case: 'available' -->
+                      <div class="history-status" data-bind="tooltip: { title: '${ _ko("Result available") }', placement: 'bottom' }"><i class="fa fa-check fa-fw"></i></div>
+                      <!-- /ko -->
+                      <!-- ko case: 'expired' -->
+                      <div class="history-status" data-bind="tooltip: { title: '${ _ko("Result expired") }', placement: 'bottom' }"><i class="fa fa-unlink fa-fw"></i></div>
+                      <!-- /ko -->
+                      <!-- /ko -->
+                    </div>
+                    <div class="clearfix"></div>
+                    <strong data-bind="text: name, attr: { title: uuid }"></strong>
+                    <div data-bind="highlight: 'statement'" class="history-item"></div>
+                  </li>
+                <!-- /ko -->
+              </ul>
+              <!-- /ko -->
+            </div>
+          <!-- /ko -->
           <!-- /ko -->
           <!-- /ko -->
         </div>
@@ -372,6 +405,21 @@ ${ hueIcons.symbols() }
   </div>
 </div>
 
+<div id="clearNotificationHistoryModal" class="modal hide fade">
+  <div class="modal-header">
+    <a href="#" class="close" data-dismiss="modal">&times;</a>
+    <h3>${_('Confirm History Clear')}</h3>
+  </div>
+  <div class="modal-body">
+    <p>${_('Are you sure you want to clear the query history?')}</p>
+  </div>
+  <div class="modal-footer">
+    <a class="btn" data-dismiss="modal">${_('No')}</a>
+    <a class="btn btn-danger disable-feedback" onclick="editorVM.selectedNotebook().clearHistory()">${_('Yes')}</a>
+  </div>
+</div>
+
+
 <script src="${ static('desktop/ext/js/jquery/jquery-2.2.3.min.js') }"></script>
 <script src="${ static('desktop/js/jquery.migration.js') }"></script>
 <script src="${ static('desktop/js/hue.utils.js') }"></script>
@@ -411,12 +459,22 @@ ${ hueIcons.symbols() }
 <script src="${ static('desktop/ext/js/knockout-sortable.min.js') }"></script>
 <script src="${ static('desktop/ext/js/knockout.validation.min.js') }"></script>
 <script src="${ static('desktop/js/ko.editable.js') }"></script>
+<script src="${ static('desktop/js/ko.switch-case.js') }"></script>
 <script src="${ static('desktop/js/ko.hue-bindings.js') }"></script>
 <script src="${ static('desktop/js/jquery.scrollleft.js') }"></script>
 <script src="${ static('desktop/js/jquery.scrollup.js') }"></script>
 <script src="${ static('desktop/js/jquery.tour.js') }"></script>
 <script src="${ static('desktop/js/sqlFunctions.js') }"></script>
 
+<script src="${ static('desktop/ext/js/selectize.min.js') }"></script>
+<script src="${ static('desktop/js/ko.selectize.js') }"></script>
+
+<script src="${ static('desktop/js/ace/ace.js') }"></script>
+<script src="${ static('desktop/js/ace/mode-impala.js') }"></script>
+<script src="${ static('desktop/js/ace/mode-hive.js') }"></script>
+<script src="${ static('desktop/js/ace/ext-language_tools.js') }"></script>
+<script src="${ static('desktop/js/ace.extended.js') }"></script>
+
 # Task History
 <script src="${ static('desktop/js/autocomplete/sql.js') }"></script>
 <script src="${ static('desktop/js/sqlAutocompleter.js') }"></script>
@@ -468,6 +526,10 @@ ${ assist.assistPanel() }
       }
     };
 
+    $(document).on('hideHistoryModal', function (e) {
+      $('#clearNotificationHistoryModal').modal('hide');
+    });
+
     var onePageViewModel = (function () {
       var LOADED_JS = [];
       var LOADED_CSS = [];

+ 23 - 17
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -976,7 +976,7 @@ var EditorViewModel = (function() {
           if (vm.isResponsive()){
             url = vm.URLS.responsive + '&editor=' + data.history_id;
           }
-          hueUtils.changeURL(url);
+          vm.changeURL(url);
           notebook.id(data.history_id);
           notebook.uuid(data.history_uuid);
           notebook.isHistory(true);
@@ -1822,18 +1822,18 @@ var EditorViewModel = (function() {
             }
 
             if (vm.isResponsive()){
-              hueUtils.changeURL(vm.URLS.responsive + '&editor=' + data.id);
+              vm.changeURL(vm.URLS.responsive + '&editor=' + data.id);
             }
             else {
-              hueUtils.changeURL('/notebook/editor' + (vm.isMobile() ? '_m' : '') + '?editor=' + data.id);
+              vm.changeURL('/notebook/editor' + (vm.isMobile() ? '_m' : '') + '?editor=' + data.id);
             }
           }
           else {
             if (vm.isResponsive()){
-              hueUtils.changeURL(vm.URLS.responsive_notebook + '&notebook=' + data.id);
+              vm.changeURL(vm.URLS.responsive_notebook + '&notebook=' + data.id);
             }
             else {
-              hueUtils.changeURL('/notebook/notebook?notebook=' + data.id);
+              vm.changeURL('/notebook/notebook?notebook=' + data.id);
             }
           }
         }
@@ -2012,10 +2012,10 @@ var EditorViewModel = (function() {
           self.id(null);
           self.uuid(UUID());
           if (vm.isResponsive()) {
-            hueUtils.changeURL(vm.URLS.responsive + '&type=' + vm.editorType());
+            vm.changeURL(vm.URLS.responsive + '&type=' + vm.editorType());
           }
           else {
-            hueUtils.changeURL('/notebook/editor' + (vm.isMobile() ? '_m' : '') + '?type=' + vm.editorType());
+            vm.changeURL('/notebook/editor' + (vm.isMobile() ? '_m' : '') + '?type=' + vm.editorType());
           }
         }
       }).fail(function (xhr) {
@@ -2323,6 +2323,12 @@ var EditorViewModel = (function() {
       return '';
     };
 
+    self.changeURL = function (url) {
+      if (!self.isNotificationManager()) {
+        hueUtils.changeURL(url);
+      }
+    };
+
     self.init = function () {
       if (editor_id) {
         self.openNotebook(editor_id);
@@ -2410,18 +2416,18 @@ var EditorViewModel = (function() {
           if (typeof skipUrlChange === 'undefined' && ! self.isNotificationManager()){
             if (self.editorMode()) {
               if (self.isResponsive()){
-                hueUtils.changeURL(self.URLS.responsive + '&editor=' + data.document.id);
+                self.changeURL(self.URLS.responsive + '&editor=' + data.document.id);
               }
               else {
-                hueUtils.changeURL((self.isMobile() ? self.URLS.editorMobile : self.URLS.editor) + '?editor=' + data.document.id);
+                self.changeURL((self.isMobile() ? self.URLS.editorMobile : self.URLS.editor) + '?editor=' + data.document.id);
               }
             }
             else {
               if (self.isResponsive()){
-                hueUtils.changeURL(self.URLS.responsive_notebook + '&notebook=' + data.document.id);
+                self.changeURL(self.URLS.responsive_notebook + '&notebook=' + data.document.id);
               }
               else {
-                hueUtils.changeURL(self.URLS.notebook + '&notebook=' + data.document.id);
+                self.changeURL(self.URLS.notebook + '&notebook=' + data.document.id);
               }
             }
           }
@@ -2452,25 +2458,25 @@ var EditorViewModel = (function() {
           }
           if (window.location.getParameter('type')) {
             if (self.isResponsive()){
-              hueUtils.changeURL(self.URLS.responsive + '&type=' + window.location.getParameter('type'));
+              self.changeURL(self.URLS.responsive + '&type=' + window.location.getParameter('type'));
             }
             else {
-              hueUtils.changeURL((self.isMobile() ? self.URLS.editorMobile : self.URLS.editor) + '?type=' + window.location.getParameter('type'));
+              self.changeURL((self.isMobile() ? self.URLS.editorMobile : self.URLS.editor) + '?type=' + window.location.getParameter('type'));
             }
           } else {
             if (self.isResponsive()){
-              hueUtils.changeURL(self.URLS.responsive + '&type=' + self.editorType());
+              self.changeURL(self.URLS.responsive + '&type=' + self.editorType());
             }
             else {
-              hueUtils.changeURL((self.isMobile() ? self.URLS.editorMobile : self.URLS.editor) + '?type=' + self.editorType());
+              self.changeURL((self.isMobile() ? self.URLS.editorMobile : self.URLS.editor) + '?type=' + self.editorType());
             }
           }
         } else {
           if (self.isResponsive()){
-            hueUtils.changeURL(self.URLS.responsive_notebook);
+            self.changeURL(self.URLS.responsive_notebook);
           }
           else {
-            hueUtils.changeURL('/notebook/notebook');
+            self.changeURL('/notebook/notebook');
           }
         }
       });