浏览代码

[editor] Wire up the history fetching in the UI

Enrico Berti 10 年之前
父节点
当前提交
9ee775f

+ 2 - 1
desktop/libs/notebook/src/notebook/api.py

@@ -260,7 +260,8 @@ def get_history(request):
   response['history'] = [{
       'name': doc.name,
       'id': doc.id,
-      'data': Notebook(document=doc).get_data()
+      'data': Notebook(document=doc).get_data(),
+      'absoluteUrl': doc.get_absolute_url()
       } for doc in Document2.objects.filter(type='notebook', owner=request.user, is_history=True).order_by('-last_modified')[:25]]
   response['message'] = _('History saved !')
 

+ 1 - 1
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -446,7 +446,7 @@ body {
   transform: scale(1.3,1);
 }
 
-.snippet-log-container {
+.snippet-log-container, .query-history-container {
   margin-left: 35px;
   margin-right: 20px;
 }

+ 19 - 1
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -288,6 +288,7 @@
         self.getLogs();
       }
     });
+
     self.isLoading = ko.computed(function () {
       return self.status() == "loading";
     });
@@ -689,6 +690,13 @@
 
     self.selectedDatabases = notebook.selectedDatabases != "undefined" && notebook.selectedDatabases != null ? notebook.selectedDatabases : {};
     self.assistHelpers = {};
+    self.history = ko.observableArray([]);
+    self.showHistory = ko.observable(typeof snippet.showHistory != "undefined" && snippet.showHistory != null ? snippet.showHistory : false);
+    self.showHistory.subscribe(function (val) {
+      if (val) {
+        self.fetchHistory();
+      }
+    });
 
     self.getAssistHelper = function (snippetType) {
       if (! self.assistHelpers[snippetType]) {
@@ -950,7 +958,17 @@
 
     self.fetchHistory = function () {
       $.get("/notebook/api/get_history", {}, function(data) {
-        console.log(data);
+        var parsedHistory = [];
+        if (data && data.history){
+          data.history.forEach(function(nbk){
+            parsedHistory.push({
+              url: nbk.absoluteUrl,
+              query: nbk.data.statement_raw,
+              lastExecuted: nbk.data.lastExecuted
+            });
+          });
+        }
+        self.history(parsedHistory);
       });
     };
 

+ 34 - 3
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -80,6 +80,8 @@ from desktop.views import _ko
 <script src="${ static('desktop/js/nv.d3.scatter.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/js/nv.d3.scatterChart.js') }" type="text/javascript" charset="utf-8"></script>
 
+<script src="${ static('desktop/ext/js/moment-with-locales.min.js') }" type="text/javascript" charset="utf-8"></script>
+
 <script src="${ static('desktop/ext/select2/select2.min.js') }" type="text/javascript" charset="utf-8"></script>
 
 <!--[if IE 9]>
@@ -402,6 +404,23 @@ ${ require.config() }
   </div>
 </script>
 
+<script type="text/html" id="query-history">
+  <!-- ko if: $root.editorMode -->
+  <div class="query-history-container" data-bind="slideVisible: $parent.showHistory" style="display: none;">
+    <div data-bind="delayedOverflow, css: resultsKlass" style="margin-top: 5px; position: relative;">
+      <table class="table table-compressed">
+        <tbody data-bind="foreach: $parent.history">
+          <tr class="pointer" data-bind="click: function(){ location.href=url }">
+            <td><code data-bind="text: query"></code></td>
+            <td style="width: 200px" class="muted"><span data-bind="text: moment(lastExecuted).format('LLL')"></span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <!-- /ko -->
+</script>
+
 <script type="text/html" id="notebook-snippet-header">
   <div class="inactive-action hover-actions inline"><span class="inactive-action" data-bind="css: { 'empty-title': name() === '' }, editable: name, editableOptions: { emptytext: '${_ko('My Snippet')}', mode: 'inline', enabled: true, placement: 'right' }" style="border:none;color: #DDD"></span></div>
   <div class="hover-actions inline pull-right" style="font-size: 15px;">
@@ -446,6 +465,7 @@ ${ require.config() }
         <!-- ko template: { if: ['text', 'markdown'].indexOf(type()) == -1, name: 'snippet-execution-status' } --><!-- /ko -->
         <!-- ko template: { if: $root.editorMode, name: 'snippet-code-resizer' } --><!-- /ko -->
         <!-- ko template: 'snippet-log' --><!-- /ko -->
+        <!-- ko template: 'query-history' --><!-- /ko -->
         <!-- ko template: { if: ['text', 'jar', 'py', 'markdown'].indexOf(type()) == -1, name: 'snippet-results' } --><!-- /ko -->
         <div style="position: absolute; top:0; z-index: 301; width: 100%;">
           <!-- ko template: 'snippet-settings' --><!-- /ko -->
@@ -821,15 +841,22 @@ ${ require.config() }
 </script>
 
 <script type ="text/html" id="snippet-execution-controls">
+  <!-- ko if: $root.editorMode -->
+  <div class="hover-actions" style="position:absolute; bottom: 26px">
+    <a class="snippet-side-btn" data-bind="click: function() { $parent.showHistory(! $parent.showHistory()); window.setTimeout(redrawFixedHeaders, 100); }, css: {'blue': $parent.showHistory}" title="${ _('Show history') }">
+      <i class="fa fa-fw fa-history"></i>
+    </a>
+  </div>
+  <!-- /ko -->
   <div class="hover-actions" style="position:absolute; bottom: 0">
     <a class="snippet-side-btn" style="cursor: default;" data-bind="visible: status() == 'loading'" title="${ _('Creating session') }">
-      <i class="fa fa-spinner fa-spin"></i>
+      <i class="fa fa-fw fa-spinner fa-spin"></i>
     </a>
     <a class="snippet-side-btn" data-bind="click: cancel, visible: status() == 'running'" title="${ _('Cancel') }">
-      <i class="fa fa-stop"></i>
+      <i class="fa fa-fw fa-stop"></i>
     </a>
     <a class="snippet-side-btn" data-bind="click: execute, visible: status() != 'running' && status() != 'loading'" title="${ _('CTRL + ENTER') }">
-      <i class="fa fa-play"></i>
+      <i class="fa fa-fw fa-play"></i>
     </a>
   </div>
 </script>
@@ -1813,6 +1840,10 @@ ${ require.config() }
       ko.applyBindings(viewModel);
       viewModel.init();
 
+      if (viewModel.editorMode && !viewModel.selectedNotebook().snippets()[0].result.hasSomeResults()) {
+        viewModel.selectedNotebook().showHistory(true);
+      }
+
       if (location.getParameter("github_status") != "") {
         if (location.getParameter("github_status") == "0") {
           $.jHueNotify.info("${ _('User successfully authenticated to GitHub.') }");