Browse Source

HUE-8893 [tb] Create a separate table browser entry in webpack

Johan Ahlen 6 years ago
parent
commit
2bad642ecb

+ 0 - 1
apps/beeswax/src/beeswax/templates/create_database.mako

@@ -29,7 +29,6 @@ ${ commonheader(_("Create database"), 'metastore', user, request) | n,unicode }
 ${layout.metastore_menubar()}
 
 <script src="${ static('desktop/js/hue.routie.js') }" type="text/javascript" charset="utf-8"></script>
-<script src="${ static('metastore/js/metastore.ko.js') }"></script>
 
 <link rel="stylesheet" href="${ static('metastore/css/metastore.css') }" type="text/css">
 <link rel="stylesheet" href="${ static('notebook/css/notebook.css') }">

+ 0 - 2
apps/beeswax/src/beeswax/templates/create_table_manually.mako

@@ -27,8 +27,6 @@ ${ commonheader(_("Create table manually"), 'metastore', user, request) | n,unic
 <span class="notebook">
 ${ layout.metastore_menubar() }
 
-<script src="${ static('metastore/js/metastore.ko.js') }"></script>
-
 <link rel="stylesheet" href="${ static('metastore/css/metastore.css') }">
 <link rel="stylesheet" href="${ static('notebook/css/notebook.css') }">
 <link rel="stylesheet" href="${ static('notebook/css/notebook-layout.css') }">

+ 0 - 2
apps/beeswax/src/beeswax/templates/import_wizard_choose_delimiter.mako

@@ -27,8 +27,6 @@ ${ commonheader(_('Create table from file'), 'metastore', user, request) | n,uni
 <span class="notebook">
 ${ layout.metastore_menubar() }
 
-<script src="${ static('metastore/js/metastore.ko.js') }"></script>
-
 <link rel="stylesheet" href="${ static('metastore/css/metastore.css') }" type="text/css">
 <link rel="stylesheet" href="${ static('notebook/css/notebook.css') }">
 <link rel="stylesheet" href="${ static('notebook/css/notebook-layout.css') }">

+ 0 - 2
apps/beeswax/src/beeswax/templates/import_wizard_choose_file.mako

@@ -26,8 +26,6 @@ ${ commonheader(_('Create table from file'), 'metastore', user, request) | n,uni
 <span class="notebook">
 ${ layout.metastore_menubar() }
 
-<script src="${ static('metastore/js/metastore.ko.js') }"></script>
-
 <link rel="stylesheet" href="${ static('metastore/css/metastore.css') }" type="text/css">
 <link rel="stylesheet" href="${ static('notebook/css/notebook.css') }">
 <link rel="stylesheet" href="${ static('notebook/css/notebook-layout.css') }">

+ 0 - 2
apps/beeswax/src/beeswax/templates/import_wizard_define_columns.mako

@@ -27,8 +27,6 @@ ${ commonheader(_('Create table from file'), 'metastore', user, request) | n,uni
 <span class="notebook">
 ${ layout.metastore_menubar() }
 
-<script src="${ static('metastore/js/metastore.ko.js') }"></script>
-
 <link rel="stylesheet" href="${ static('metastore/css/metastore.css') }" type="text/css">
 <link rel="stylesheet" href="${ static('notebook/css/notebook.css') }">
 <link rel="stylesheet" href="${ static('notebook/css/notebook-layout.css') }">

+ 5 - 136
apps/metastore/src/metastore/templates/metastore.mako

@@ -24,6 +24,8 @@ from desktop.views import commonheader, commonfooter, _ko
 from beeswax.conf import LIST_PARTITIONS_LIMIT
 
 from metastore.conf import ENABLE_NEW_CREATE_TABLE
+
+from webpack_loader.templatetags.webpack_loader import render_bundle
 %>
 
 <%namespace name="actionbar" file="actionbar.mako" />
@@ -64,11 +66,13 @@ ${ commonheader(_("Metastore"), app_name, user, request) | n,unicode }
 <link rel="stylesheet" href="${ static('desktop/ext/css/bootstrap-wysihtml5-0.0.2.css') }">
 <link rel="stylesheet" href="${ static('notebook/css/notebook.css') }">
 
+## ${ render_bundle('vendors~tableBrowser') | n,unicode }
+${ render_bundle('tableBrowser') | n,unicode }
+
 <span class="notebook">
 
 ${ components.menubar(is_embeddable) }
 
-<script src="${ static('metastore/js/metastore.ko.js') }"></script>
 <link rel="stylesheet" href="${ static('metastore/css/metastore.css') }" type="text/css">
 
 <script type="text/html" id="metastore-breadcrumbs">
@@ -1041,141 +1045,6 @@ ${ components.menubar(is_embeddable) }
     queryAndWatchUrl('/notebook/browse/' + catalogEntry.path.join('/') + '/', catalogEntry.getSourceType(),
             catalogEntry.namespace && catalogEntry.namespace.id, catalogEntry.compute)
   }
-
-  (function () {
-    if (ko.options) {
-      ko.options.deferUpdates = true;
-    }
-
-    $(document).ready(function () {
-      var options = {
-        user: '${ user.username }',
-        optimizerEnabled: '${ is_optimizer_enabled }' === 'True',
-        navigatorEnabled: window.HAS_CATALOG,
-        optimizerUrl: '${ optimizer_url }',
-        navigatorUrl: '${ navigator_url }',
-        sourceType: '${ source_type }'
-      };
-
-      var viewModel = new MetastoreViewModel(options);
-
-      huePubSub.subscribe('metastore.scroll.to.top', function () {
-        $('${ MAIN_SCROLLABLE }').scrollTop(0);
-      });
-
-      huePubSub.subscribe('metastore.clear.selection', function () {
-        viewModel.sources().forEach(function (source) {
-          source.namespaces().forEach(function (namespace) {
-            namespace.selectedDatabases.removeAll();
-            namespace.databases().forEach(function (database) {
-              database.selectedTables.removeAll();
-            })
-          })
-        });
-      }, 'metastore');
-
-      viewModel.currentTab.subscribe(function(tab){
-        if (tab === 'relationships') {
-          // viewModel.database().table().getRelationships();
-        } else if (tab === 'sample') {
-          var selector = 'samplesTable';
-          % if conf.CUSTOM.BANNER_TOP_HTML.get():
-            var bannerTopHeight = 30;
-          % else:
-            var bannerTopHeight = 0;
-          % endif
-          if ($(selector).parents('.dataTables_wrapper').length == 0){
-            hueUtils.waitForRendered(selector, function(el){ return el.find('td').length > 0 }, function(){
-              $(selector).dataTable({
-                "bPaginate": false,
-                "bLengthChange": false,
-                "bInfo": false,
-                "bDestroy": true,
-                "bFilter": false,
-                "bAutoWidth": false,
-                "oLanguage": {
-                  "sEmptyTable": "${_('No data available')}",
-                  "sZeroRecords": "${_('No matching records')}"
-                },
-                "fnDrawCallback": function (oSettings) {
-                  $(selector).parents('.dataTables_wrapper').css('overflow-x', 'hidden');
-                  $(selector).jHueTableExtender2({
-                    fixedHeader: true,
-                    fixedFirstColumn: true,
-                    includeNavigator: false,
-                    lockSelectedRow: false,
-                    parentId: 'sample',
-                    classToRemove: 'sample-table',
-                    mainScrollable: '${ MAIN_SCROLLABLE }',
-                    % if is_embeddable:
-                    stickToTopPosition: 51 + bannerTopHeight,
-                    % else:
-                    stickToTopPosition: 76 + bannerTopHeight,
-                    % endif
-                    clonedContainerPosition: 'fixed',
-                    app: 'metastore'
-                  });
-                  $(selector).jHueHorizontalScrollbar();
-                },
-                "aoColumnDefs": [
-                  {
-                    "sType": "numeric",
-                    "aTargets": [ "sort-numeric" ]
-                  },
-                  {
-                    "sType": "string",
-                    "aTargets": [ "sort-string" ]
-                  },
-                  {
-                    "sType": "date",
-                    "aTargets": [ "sort-date" ]
-                  }
-                ]
-              });
-            });
-          }
-        }
-      });
-
-      viewModel.scrollToColumn = function (col) {
-        if (!col.table.samples.loading()) {
-          $('.page-content').scrollTop(0);
-          viewModel.currentTab('sample');
-          hueUtils.waitForRendered('#sampleTable', function (el) {
-            return el.parent().hasClass('dataTables_wrapper')
-          }, function () {
-            var sampleTable = $('#sampleTable');
-            var sampleCol = sampleTable.find('th').filter(function () {
-              return $.trim($(this).text()).indexOf(col.catalogEntry.name) > -1;
-            });
-            sampleTable.find('.columnSelected').removeClass('columnSelected');
-            sampleTable.find('tr td:nth-child(' + (sampleCol.index() + 1) + ')').addClass('columnSelected');
-            var scrollLeft = 0;
-            sampleTable.find('th:lt(' + sampleCol.index() + ')').each(function () {
-              scrollLeft += $(this).outerWidth();
-            });
-            scrollLeft = Math.max(0, scrollLeft - 40);
-            sampleTable.parent().scrollLeft(scrollLeft);
-            sampleTable.parent().trigger('scroll_update');
-          });
-        }
-      };
-
-      ko.applyBindings(viewModel, $('#metastoreComponents')[0]);
-
-      huePubSub.subscribe('cluster.config.set.config', function (clusterConfig) {
-        viewModel.appConfig(clusterConfig && clusterConfig['app_config']);
-      });
-      huePubSub.publish('cluster.config.get.config');
-
-      if (location.getParameter('refresh') === 'true') {
-        dataCatalog.getEntry({ namespace: viewModel.source().namespace().namespace, compute: viewModel.source().namespace().compute, sourceType: viewModel.source().type, path: [], definition: { type: 'source' }}).done(function (entry) {
-          entry.clearCache({ invalidate: viewMode.source().type === 'impala' ? 'invalidate' : 'cache', silenceErrors: true });
-          hueUtils.replaceURL('?');
-        });
-      }
-    });
-  })();
 </script>
 </span>
 

+ 0 - 2
apps/useradmin/src/useradmin/templates/list_configurations.mako

@@ -29,8 +29,6 @@ ${commonheader(_('Configurations'), "useradmin", user, request) | n,unicode}
 %endif
 ${layout.menubar(section='configurations')}
 
-<script src="${ static('metastore/js/metastore.ko.js') }"></script>
-
 <script id="app-list" type="text/html">
   <div class="card card-small">
     <h1 class="card-heading simple">${ _('Configurations') }</h1>

+ 156 - 0
desktop/core/src/desktop/js/apps/table_browser/app.js

@@ -0,0 +1,156 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import $ from 'jquery';
+import ko from 'knockout';
+
+import dataCatalog from 'catalog/dataCatalog';
+import huePubSub from 'utils/huePubSub';
+import MetastoreViewModel from 'apps/table_browser/metastoreViewModel';
+import hueUtils from 'utils/hueUtils';
+import I18n from 'utils/i18n';
+
+const HUE_PUB_SUB_EDITOR_ID = 'metastore';
+
+if (ko.options) {
+  ko.options.deferUpdates = true;
+}
+
+huePubSub.subscribe('app.dom.loaded', app => {
+  if (app !== 'metastore') {
+    return;
+  }
+
+  const options = {
+    user: window.LOGGED_USERNAME,
+    optimizerEnabled: window.HAS_OPTIMIZER,
+    navigatorEnabled: window.HAS_CATALOG,
+    optimizerUrl: window.OPTIMIZER_URL,
+    navigatorUrl: window.CATALOG_URL
+  };
+
+  const viewModel = new MetastoreViewModel(options);
+
+  huePubSub.subscribe(
+    'metastore.scroll.to.top',
+    () => {
+      $('.page-content').scrollTop(0);
+    },
+    HUE_PUB_SUB_EDITOR_ID
+  );
+
+  huePubSub.subscribe(
+    'metastore.clear.selection',
+    () => {
+      viewModel.sources().forEach(source => {
+        source.namespaces().forEach(namespace => {
+          namespace.selectedDatabases.removeAll();
+          namespace.databases().forEach(database => {
+            database.selectedTables.removeAll();
+          });
+        });
+      });
+    },
+    HUE_PUB_SUB_EDITOR_ID
+  );
+
+  viewModel.currentTab.subscribe(tab => {
+    if (tab === 'relationships') {
+      // viewModel.database().table().getRelationships();
+    } else if (tab === 'sample') {
+      const selector = 'samplesTable';
+      const bannerTopHeight = window.BANNER_TOP_HTML ? 30 : 0;
+      if ($(selector).parents('.dataTables_wrapper').length === 0) {
+        hueUtils.waitForRendered(
+          selector,
+          el => el.find('td').length > 0,
+          () => {
+            $(selector).dataTable({
+              bPaginate: false,
+              bLengthChange: false,
+              bInfo: false,
+              bDestroy: true,
+              bFilter: false,
+              bAutoWidth: false,
+              oLanguage: {
+                sEmptyTable: I18n('No data available'),
+                sZeroRecords: I18n('No matching records')
+              },
+              fnDrawCallback: () => {
+                $(selector)
+                  .parents('.dataTables_wrapper')
+                  .css('overflow-x', 'hidden');
+                $(selector).jHueTableExtender2({
+                  fixedHeader: true,
+                  fixedFirstColumn: true,
+                  includeNavigator: false,
+                  lockSelectedRow: false,
+                  parentId: 'sample',
+                  classToRemove: 'sample-table',
+                  mainScrollable: '.page-content',
+                  stickToTopPosition: 51 + bannerTopHeight,
+                  clonedContainerPosition: 'fixed',
+                  app: 'metastore'
+                });
+                $(selector).jHueHorizontalScrollbar();
+              },
+              aoColumnDefs: [
+                {
+                  sType: 'numeric',
+                  aTargets: ['sort-numeric']
+                },
+                {
+                  sType: 'string',
+                  aTargets: ['sort-string']
+                },
+                {
+                  sType: 'date',
+                  aTargets: ['sort-date']
+                }
+              ]
+            });
+          }
+        );
+      }
+    }
+  });
+
+  ko.applyBindings(viewModel, $('#metastoreComponents')[0]);
+
+  huePubSub.subscribe('cluster.config.set.config', clusterConfig => {
+    viewModel.appConfig(clusterConfig && clusterConfig['app_config']);
+  });
+
+  huePubSub.publish('cluster.config.get.config');
+
+  if (location.getParameter('refresh') === 'true') {
+    dataCatalog
+      .getEntry({
+        namespace: viewModel.source().namespace().namespace,
+        compute: viewModel.source().namespace().compute,
+        sourceType: viewModel.source().type,
+        path: [],
+        definition: { type: 'source' }
+      })
+      .done(entry => {
+        entry.clearCache({
+          invalidate: viewModel.source().type === 'impala' ? 'invalidate' : 'cache',
+          silenceErrors: true
+        });
+        hueUtils.replaceURL('?');
+      });
+  }
+});

+ 0 - 3
desktop/core/src/desktop/js/hue.js

@@ -72,8 +72,6 @@ import sqlStatementsParser from 'parse/sqlStatementsParser'; // In search.ko and
 import HueFileEntry from 'doc/hueFileEntry';
 import HueDocument from 'doc/hueDocument';
 
-import sqlParserRepository from 'parse/sql/sqlParserRepository';
-
 // TODO: Migrate away
 window._ = _;
 window.apiHelper = apiHelper;
@@ -112,7 +110,6 @@ window.sprintf = sprintf;
 window.SqlAutocompleter = SqlAutocompleter;
 window.SqlFunctions = SqlFunctions;
 window.SqlSetOptions = SqlSetOptions;
-window.sqlParserRepository = sqlParserRepository;
 window.sqlStatementsParser = sqlStatementsParser;
 window.sqlUtils = sqlUtils;
 window.sqlWorkerHandler = sqlWorkerHandler;

+ 0 - 2
desktop/core/src/desktop/templates/assist_m.mako

@@ -21,8 +21,6 @@ from django.utils.translation import ugettext as _
 
 ${ commonheader_m(_('Assist'), 'assist', user, request) | n,unicode }
 
-<script src="${ static('metastore/js/metastore.ko.js') }"></script>
-
 <style type="text/css">
   .assist {
     margin-left: -10px;

+ 0 - 2
desktop/core/src/desktop/templates/common_header.mako

@@ -162,8 +162,6 @@ if USE_NEW_EDITOR.get():
     ace.config.set("basePath", "${ static('desktop/js/ace') }");
   </script>
 
-  <script src="${ static('metastore/js/metastore.model.js') }"></script>
-
   ${ hueAceAutocompleter.hueAceAutocompleter() }
 %endif
 

+ 5 - 1
desktop/core/src/desktop/templates/global_js_constants.mako

@@ -25,7 +25,7 @@
   from dashboard.conf import HAS_SQL_ENABLED
   from filebrowser.conf import SHOW_UPLOAD_BUTTON
   from indexer.conf import ENABLE_NEW_INDEXER
-  from metadata.conf import has_catalog, has_readonly_catalog, has_optimizer, has_workload_analytics, OPTIMIZER
+  from metadata.conf import has_catalog, has_readonly_catalog, has_optimizer, has_workload_analytics, OPTIMIZER, get_optimizer_url, get_catalog_url
   from metastore.conf import ENABLE_NEW_CREATE_TABLE
   from metastore.views import has_write_access
   from notebook.conf import ENABLE_NOTEBOOK_2, ENABLE_QUERY_ANALYSIS, ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, get_ordered_interpreters, SHOW_NOTEBOOKS
@@ -74,9 +74,11 @@
   window.ENABLE_SQL_SYNTAX_CHECK = '${ conf.ENABLE_SQL_SYNTAX_CHECK.get() }' === 'True';
 
   window.HAS_CATALOG = '${ has_catalog(request.user) }' === 'True';
+  window.CATALOG_URL = '${ get_catalog_url() }'
   window.HAS_READ_ONLY_CATALOG = '${ has_readonly_catalog(request.user) }' === 'True' || '${ has_write_access(request.user) }' === 'False';
 
   window.HAS_OPTIMIZER = '${ has_optimizer() }' === 'True';
+  window.OPTIMIZER_URL = '${ get_optimizer_url() }'
   window.AUTO_UPLOAD_OPTIMIZER_STATS = '${ OPTIMIZER.AUTO_UPLOAD_STATS.get() }' === 'True';
 
   ## In the past was has_workload_analytics()
@@ -295,6 +297,7 @@
     'No clusters found': '${ _('No clusters found') }',
     'No columns found': '${ _('No columns found') }',
     'No computes found': '${ _('No computes found') }',
+    'No data available': '${ _('No data available') }',
     'No Data Available.': '${ _('No Data Available.') }',
     'No databases found': '${ _('No databases found') }',
     'No databases found.': '${ _('No databases found.') }',
@@ -303,6 +306,7 @@
     'No indexes selected.': '${ _('No indexes selected.') }',
     'No logs available at this moment.': '${ _('No logs available at this moment.') }',
     'No match found': '${ _('No match found') }',
+    'No matching records': '${ _('No matching records') }',
     'No namespaces found': '${ _('No namespaces found') }',
     'No namespaces found.': '${ _('No namespaces found.') }',
     'No optimizations identified.': '${ _('No optimizations identified.') }',

+ 4 - 2
desktop/core/src/desktop/templates/hue.mako

@@ -459,9 +459,12 @@ ${ hueIcons.symbols() }
 
 ${ commonshare() | n,unicode }
 
-${ render_bundle('vendors~hue~notebook') | n,unicode }
+${ render_bundle('vendors~hue~notebook~tableBrowser') | n,unicode }
+${ render_bundle('vendors~hue~tableBrowser') | n,unicode }
 ${ render_bundle('vendors~hue') | n,unicode }
 ${ render_bundle('hue~notebook') | n,unicode }
+${ render_bundle('hue~notebook~tableBrowser') | n,unicode }
+${ render_bundle('hue~tableBrowser') | n,unicode }
 ${ render_bundle('hue') | n,unicode }
 
 <script src="${ static('desktop/js/polyfills.js') }"></script>
@@ -483,7 +486,6 @@ ${ render_bundle('hue') | n,unicode }
 <script>ace.config.set("basePath", "${ static('desktop/js/ace') }");</script>
 
 <script src="${ static('desktop/js/share2.vm.js') }"></script>
-<script src="${ static('metastore/js/metastore.model.js') }"></script>
 
 <script>
   var shareViewModel = initSharing("#documentShareModal");

+ 0 - 2
desktop/libs/indexer/src/indexer/templates/importer.mako

@@ -30,8 +30,6 @@
 %if not is_embeddable:
 ${ commonheader(_("Importer"), "indexer", user, request, "60px") | n,unicode }
 
-<script src="${ static('metastore/js/metastore.ko.js') }"></script>
-
 <link rel="stylesheet" href="${ static('notebook/css/notebook.css') }">
 <link rel="stylesheet" href="${ static('notebook/css/notebook-layout.css') }">
 %endif

+ 0 - 2
desktop/libs/indexer/src/indexer/templates/indexer.mako

@@ -26,8 +26,6 @@
 %if not is_embeddable:
 ${ commonheader(_("Solr Indexes"), "search", user, request, "60px") | n,unicode }
 
-<script src="${ static('metastore/js/metastore.ko.js') }"></script>
-
 <link rel="stylesheet" href="${ static('notebook/css/notebook.css') }">
 <link rel="stylesheet" href="${ static('notebook/css/notebook-layout.css') }">
 %endif

+ 2 - 1
webpack.config.js

@@ -41,7 +41,8 @@ module.exports = {
   },
   entry: {
     hue: ['./desktop/core/src/desktop/js/hue.js'],
-    notebook: ['./desktop/core/src/desktop/js/apps/notebook/app.js']
+    notebook: ['./desktop/core/src/desktop/js/apps/notebook/app.js'],
+    tableBrowser: ['./desktop/core/src/desktop/js/apps/table_browser/app.js']
   },
   optimization: {
     minimize: true,