Browse Source

[editor] Add the possibility to expand the logs

Enrico Berti 9 years ago
parent
commit
f8197d7

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

@@ -1396,6 +1396,47 @@
     }
   };
 
+  ko.bindingHandlers.logResizer = {
+    init: function (element, valueAccessor) {
+      var options = ko.unwrap(valueAccessor()),
+        $resizer = $(element),
+        $parent = $resizer.parents(options.parent),
+        $target = $parent.find(options.target),
+        onStart = options.onStart,
+        onResize = options.onResize;
+
+      var initialHeight = $.totalStorage('hue.editor.logs.size') || 80;
+      $target.css("height", initialHeight + "px");
+
+      var initialOffset = null;
+      $resizer.draggable({
+        axis: "y",
+        start: function (event, ui) {
+          if (onStart) {
+            onStart();
+          }
+          if (!initialOffset) {
+            initialOffset = $resizer.offset().top;
+          }
+        },
+        drag: function (event, ui) {
+          var currentHeight = (ui.offset.top - initialOffset) + initialHeight;
+          $.totalStorage('hue.editor.logs.size', currentHeight);
+          $target.css("height", currentHeight + "px");
+          ui.offset.top = 0;
+          ui.position.top = 0;
+        },
+        stop: function (event, ui) {
+          ui.offset.top = 0;
+          ui.position.top = 0;
+          if (onResize) {
+            onResize();
+          }
+        }
+      });
+    }
+  };
+
   ko.bindingHandlers.splitDraggable = {
     init: function (element, valueAccessor) {
       var options = ko.unwrap(valueAccessor());

+ 22 - 4
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -421,10 +421,8 @@ body {
   right: 0;
 }
 
-.snippet-code-resizer {
+.snippet-code-resizer, .snippet-log-resizer {
   border-top: 1px solid #F1F1F1;
-  margin-left: 35px;
-  margin-right: 20px;
   cursor: row-resize;
   text-align: center;
   font-size: 12px;
@@ -432,12 +430,31 @@ body {
   margin-bottom: 5px;
   color: #E1E1E1;
 }
-.snippet-code-resizer > i {
+
+.snippet-code-resizer {
+  margin-left: 35px;
+  margin-right: 20px;
+}
+
+.snippet-code-resizer > i, .snippet-log-resizer > i {
   -ms-transform: scale(1.3,1); /* IE 9 */
   -webkit-transform: scale(1.3,1); /* Safari */
   transform: scale(1.3,1);
 }
 
+.snippet-log-expander {
+  position: absolute;
+  text-align: center;
+  cursor: pointer;
+  bottom: 4px;
+  width: 100%;
+}
+
+.snippet-log-expander:hover {
+  background-color: #FFF;
+  opacity:.5;
+}
+
 .snippet-log-container, .query-history-container {
   margin-left: 35px;
   margin-right: 20px;
@@ -505,6 +522,7 @@ body {
   font-size: 11px;
   height: 80px;
   overflow-y: auto;
+  margin-bottom: 0;
 }
 
 h1.empty {

+ 4 - 1
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -407,7 +407,10 @@ ${ require.config() }
         <li><a data-bind="text: $.trim($data.name), attr: { href: $data.url }" target="_blank"></a></li>
       </ul>
       <pre data-bind="visible: result.logs().length == 0" class="logs logs-bigger">${ _('No logs available at this moment.') }</pre>
-      <pre data-bind="visible: result.logs().length > 0, text: result.logs, logScroller: result.logs" class="logs logs-bigger"></pre>
+      <pre data-bind="visible: result.logs().length > 0, text: result.logs, logScroller: result.logs" class="logs logs-bigger logs-populated"></pre>
+    </div>
+    <div class="snippet-log-resizer" data-bind="visible: result.logs().length > 0, logResizer: {parent: '.snippet-log-container', target: '.logs-populated', onStart: hideFixedHeaders, onResize: function(){ hideFixedHeaders(); redrawFixedHeaders(500); }}">
+      <i class="fa fa-ellipsis-h"></i>
     </div>
   </div>
   <div class="snippet-log-container">