Browse Source

HUE-3281 [editor] Enabled results

Enrico Berti 9 years ago
parent
commit
c41ede7

+ 8 - 1
desktop/core/src/desktop/static/desktop/css/hue-mobile.css

@@ -70,8 +70,15 @@ body.open {
   float: left;
 }
 
+.nav-collapse .nav>li>a {
+  color: #DBE8F1;
+}
+
+.navbar .nav>.active>a {
+  color: #FFF;
+}
+
 .ace_layer {
   word-wrap: break-word!important;
   white-space: normal!important;
 }
-

+ 14 - 6
desktop/core/src/desktop/templates/common_header_m.mako

@@ -36,7 +36,7 @@ if USE_NEW_EDITOR.get():
 </%def>
 <%def name="get_title(title)">
   % if title:
-    ${smart_unicode(title)}
+    ${smart_unicode(title).upper()}
   % endif
 </%def>
 <html lang="en">
@@ -271,16 +271,24 @@ if USE_NEW_EDITOR.get():
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a class="brand" href="#">
+      <a class="brand" href="/about">
         <img src="${ static('desktop/art/hue-logo-mini-white.png') }" />
         ${get_title(title)}
       </a>
       <div class="nav-collapse collapse">
         <ul class="nav">
-          <li class="active"><a href="#">Home</a></li>
-          <li><a href="#about">About</a></li>
-          <li><a href="#contact">Contact</a></li>
-
+          <li><a title="${_('My documents')}" rel="navigator-tooltip" href="${ home_url }">${_('My documents')}</a></li>
+          % if 'beeswax' in apps:
+             % if USE_NEW_EDITOR.get():
+             <li><a href="${ url('notebook:editor_m') }?type=hive">${_('Hive')}</a></li>
+             % endif
+           % endif
+           % if 'impala' in apps:
+             % if USE_NEW_EDITOR.get(): ## impala requires beeswax anyway
+             <li><a href="${ url('notebook:editor_m') }?type=impala">${_('Impala')}</a></li>
+             % endif
+           % endif
+          <li><a title="${_('Sign out')}" href="/accounts/logout/">${_('Sign out')}</a></li>
         </ul>
       </div>
     </div>

+ 73 - 11
desktop/libs/notebook/src/notebook/templates/editor_m.mako

@@ -21,7 +21,7 @@
 %>
 <%namespace name="assist" file="/assist.mako" />
 
-${ commonheader_m(_('Editor'), editor_type, user, request, "68px") | n,unicode }
+${ commonheader_m(editor_type, editor_type, user, request, "68px") | n,unicode }
 
 <style>
   .ace-editor {
@@ -30,20 +30,43 @@ ${ commonheader_m(_('Editor'), editor_type, user, request, "68px") | n,unicode }
   }
 
   body.open .main-container {
-    -webkit-transform: rotateY(-32deg) scale(0.8) translateY(-120px) translateX(185px);
-    transform: rotateY(-32deg) scale(0.8) translateY(-120px) translateX(185px);
     overflow: hidden;
     -webkit-transition: -webkit-transform 0.5s;
     transition: transform 0.5s;
-    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
+    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
+    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
+    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
   }
-</style>
 
-<div id="menu" style="width: 200px; background: #CCC; height: 700px; margin-left: -220px; margin-top: -20px; position: absolute">
+  body.open-left .main-container {
+    -webkit-transform: rotateY(-32deg) scale(0.8) translateY(-120px) translateX(185px);
+    transform: rotateY(-32deg) scale(0.8) translateY(-120px) translateX(185px);
+  }
 
-</div>
+  body.open-right .main-container {
+    -webkit-transform: rotateY(32deg) scale(0.8) translateY(-120px) translateX(-185px);
+    transform: rotateY(32deg) scale(0.8) translateY(-120px) translateX(-185px);
+  }
+
+  .table-container {
+    width: 100%;
+    overflow-y: auto;
+    _overflow: auto;
+    margin: 0 0 1em;
+  }
+
+  .table-container::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 14px;
+    height: 14px;
+  }
+
+  .table-container::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    border: 3px solid #fff;
+    background-color: rgba(0, 0, 0, .3);
+  }
+</style>
 
 <div class="container main-container">
 
@@ -64,6 +87,35 @@ ${ commonheader_m(_('Editor'), editor_type, user, request, "68px") | n,unicode }
           minLines: $root.editorMode() ? null : 3
         }
       }"></div>
+
+  <a class="btn margin-top-10" href="javascript: void(0)" data-bind="attr: {'title': $root.editorMode() && result.statements_count() > 1 ? '${ _ko('Execute next statement')}' : '${ _ko('Execute or CTRL + ENTER') }'}, click: function() { wasBatchExecuted(false); execute(); }, visible: status() != 'running' && status() != 'loading', css: {'blue': $parent.history().length == 0 || $root.editorMode(), 'disabled': ! isReady() }">
+    <i class="fa fa-fw fa-play"></i> ${ _('Execute') }
+  </a>
+
+  <a class="btn margin-top-10" data-bind="click: cancel, visible: status() == 'running'" title="${ _('Cancel operation') }">
+    <i class="fa fa-fw fa-stop"></i> ${ _('Cancel') }
+  </a>
+
+  <!-- ko if: result -->
+  <div class="table-container">
+    <table class="table table-condensed table-striped resultTable">
+      <thead>
+      <tr data-bind="foreach: result.meta">
+        <th class="sorting" data-bind="text: ($index() == 0 ? '&nbsp;' : $data.name), css: typeof cssClass != 'undefined' ? cssClass : 'sort-string', attr: {title: $data.type }, style:{'width': $index() == 0 ? '1%' : ''}, click: function(obj, e){ $(e.target).parents('table').trigger('sort', obj); }"></th>
+      </tr>
+      </thead>
+      <tbody data-bind="foreach: result.data">
+        <tr data-bind="foreach: $data">
+          <td data-bind="text: $data"></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div data-bind="visible: status() == 'expired' && result.data() && result.data().length > 99, css: resultsKlass" style="display:none;">
+    <pre class="margin-top-10"><i class="fa fa-check muted"></i> ${ _("Results have expired, rerun the query if needed.") }</pre>
+  </div>
+  <!-- /ko -->
+
   <!-- /ko -->
 
   <div class="clearfix"></div>
@@ -276,11 +328,21 @@ ${ commonheader_m(_('Editor'), editor_type, user, request, "68px") | n,unicode }
     $("body").swipe({fingers: 'all', swipeLeft: swipeLeft, swipeRight: swipeRight, allowPageScroll: "auto"});
 
     function swipeLeft() {
+      if ($('body').hasClass('open-left')){
+         $('body').removeClass('open open-left');
+      }
+      else {
+        $('body').addClass('open open-right');
+      }
     }
 
     function swipeRight() {
-      $('body').addClass('open');
-      $('#menu').css('margin-left', '-20px');
+      if ($('body').hasClass('open-right')){
+         $('body').removeClass('open open-right');
+      }
+      else {
+        $('body').addClass('open open-left');
+      }
     }
 
     viewModel = new EditorViewModel(${ editor_id or 'null' }, ${ notebooks_json | n,unicode }, VIEW_MODEL_OPTIONS);

+ 2 - 0
desktop/libs/notebook/src/notebook/views.py

@@ -99,6 +99,7 @@ def editor(request):
   return render('editor.mako', request, {
       'editor_id': editor_id or None,
       'notebooks_json': '{}',
+      'editor_type': editor_type,
       'options_json': json.dumps({
         'languages': get_interpreters(request.user),
         'mode': 'editor',
@@ -122,6 +123,7 @@ def editor_m(request):
   return render('editor_m.mako', request, {
       'editor_id': editor_id or None,
       'notebooks_json': '{}',
+      'editor_type': editor_type,
       'options_json': json.dumps({
         'languages': get_interpreters(request.user),
         'mode': 'editor',