Răsfoiți Sursa

HUE-7062 [frontend] Move context popover and related ko components to ko_components

Johan Ahlen 8 ani în urmă
părinte
comite
a5d95e5

+ 0 - 6
desktop/core/src/desktop/templates/assist.mako

@@ -52,12 +52,6 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, get_ord
       home_dir = '/'
   %>
 
-  <%namespace name="contextPopover" file="/context_popover.mako" />
-  <%namespace name="nav_components" file="/nav_components.mako" />
-
-  ${ contextPopover.contextPopover() }
-  ${ nav_components.nav_tags(readOnly=not user.has_hue_permission(action="write", app="metadata")) }
-
   <script type="text/html" id="assist-no-database-entries">
     <ul class="assist-tables">
       <li>

+ 6 - 0
desktop/core/src/desktop/templates/ko_components.mako

@@ -15,21 +15,27 @@
 ## limitations under the License.
 
 <%namespace name="koBreadCrumbs" file="/ko_components/ko_breadcrumbs.mako" />
+<%namespace name="koContextPopover" file="/ko_components/ko_context_popover.mako" />
 <%namespace name="koDropDown" file="/ko_components/ko_drop_down.mako" />
 <%namespace name="koFavoriteApp" file="/ko_components/ko_favorite_app.mako" />
 <%namespace name="koGlobalSearch" file="/ko_components/ko_global_search.mako" />
 <%namespace name="koHistoryPanel" file="/ko_components/ko_history_panel.mako" />
 <%namespace name="koInlineAutocomplete" file="/ko_components/ko_inline_autocomplete.mako" />
 <%namespace name="koJobBrowserLinks" file="/ko_components/ko_job_browser_links.mako" />
+<%namespace name="koNavTags" file="/ko_components/ko_nav_tags.mako" />
 <%namespace name="koSimpleAceEditor" file="/ko_components/ko_simple_ace_editor.mako" />
+<%namespace name="koSqlColumnsTable" file="/ko_components/ko_sql_columns_table.mako" />
 
 <%def name="all()">
   ${ koBreadCrumbs.breadCrumbs() }
+  ${ koContextPopover.contextPopover() }
   ${ koDropDown.dropDown() }
   ${ koFavoriteApp.favoriteApp() }
   ${ koGlobalSearch.globalSearch() }
   ${ koHistoryPanel.historyPanel() }
   ${ koInlineAutocomplete.inlineAutocomplete() }
   ${ koJobBrowserLinks.jobBrowserLinks() }
+  ${ koNavTags.navTags() }
   ${ koSimpleAceEditor.simpleAceEditor() }
+  ${ koSqlColumnsTable.sqlColumnsTable() }
 </%def>

+ 0 - 96
desktop/core/src/desktop/templates/context_popover.mako → desktop/core/src/desktop/templates/ko_components/ko_context_popover.mako

@@ -19,7 +19,6 @@ from django.utils.translation import ugettext as _
 
 from dashboard.conf import HAS_SQL_ENABLED
 from desktop import conf
-from desktop.conf import USE_NEW_SIDE_PANELS
 from desktop.lib.i18n import smart_unicode
 from desktop.views import _ko
 
@@ -1808,99 +1807,4 @@ from metadata.conf import has_navigator
       })
     })();
   </script>
-
-  <script type="text/html" id="sql-columns-table-template">
-    <div class="context-popover-flex">
-      <div class="context-popover-flex-header">
-        <div class="context-popover-header" style="display:inline-block;">${_('Columns')} (<span data-bind="text: filteredColumns().length"></span>)</div>
-        <a href="#" data-bind="toggle: searchVisible"><i class="snippet-icon fa fa-search inactive-action margin-left-10" data-bind="css: { 'blue': searchVisible }"></i></a>
-        <input class="input-large context-popover-inline-search" style="padding: 3px 6px;" type="text" data-bind="visible: searchVisible, hasFocus: searchFocus, clearable: searchInput, valueUpdate:'afterkeydown'" placeholder="${ _('Filter columns...') }">
-      </div>
-      <div class="context-popover-flex-fill sql-columns-table" style="position:relative; height: 100%; overflow-y: auto;">
-        <table id="sqlColumnsTable" style="width: 100%" class="table table-condensed table-nowrap">
-          <!-- ko if: filteredColumns().length !== 0 -->
-          <thead>
-          <tr>
-            <th width="6%">&nbsp;</th>
-            <!-- ko if: typeof filteredColumns()[0].table === 'undefined' -->
-            <th width="60%">${_('Name')}</th>
-            <!-- /ko -->
-            <!-- ko if: typeof filteredColumns()[0].table !== 'undefined' -->
-            <th width="40%">${_('Name')}</th>
-            <th width="20%">${_('Table')}</th>
-            <!-- /ko -->
-            <th width="34%">${_('Type')}</th>
-            <th width="6%">&nbsp;</th>
-          </tr>
-          </thead>
-          <!-- /ko -->
-          <tbody data-bind="foreachVisible: { data: filteredColumns, minHeight: 29, container: '.sql-columns-table', pubSubDispose: 'context.popover.dispose' }">
-          <tr>
-            <!-- ko if: typeof selected === 'undefined' -->
-            <td data-bind="text: $index()+$indexOffset()+1"></td>
-            <!-- /ko -->
-            <!-- ko if: typeof selected !== 'undefined' -->
-            <td data-bind="toggle: selected" class="center" style="cursor: default;">
-              <div class="hueCheckbox fa" data-bind="multiCheck: '#sqlColumnsTable', css: {'fa-check': selected }"></div>
-            </td>
-
-            <!-- /ko -->
-            <td style="overflow: hidden;">
-              <!-- ko if: $parent.scrollToColumns -->
-              <a href="javascript:void(0)" class="column-selector" data-bind="click: function() { huePubSub.publish('context.popover.scroll.to.column', name); }" title="${ _("Show sample") }"><span data-bind="text: name"></span> <i class="fa fa-key" data-bind="visible: typeof primary_key !== 'undefined' && primary_key === 'true'"></i></a>
-              <!-- /ko -->
-              <!-- ko ifnot: $parent.scrollToColumns -->
-              <span data-bind="text: name"></span> <i class="fa fa-key" data-bind="visible: typeof primary_key !== 'undefined' && primary_key === 'true'"></i>
-              <!-- /ko -->
-            </td>
-            <!-- ko if: typeof table !== 'undefined' -->
-            <td><span data-bind="text: table"></span></td>
-            <!-- /ko -->
-            <td><span data-bind="text: type, attr: { 'title': extendedType }, tooltip: { placement: 'bottom' }"></span></td>
-            <td><i class="snippet-icon fa fa-question-circle" data-bind="visible: comment, attr: { 'title': comment }, tooltip: { placement: 'bottom' }"></i></td>
-          </tr>
-          </tbody>
-        </table>
-        <div class="context-popover-empty-columns" data-bind="visible: filteredColumns().length === 0">${_('No columns found')}</div>
-      </div>
-    </div>
-  </script>
-
-  <script type="text/javascript">
-    (function () {
-
-      function SqlColumnsTable(params) {
-        var self = this;
-        var columns = params.columns;
-        self.scrollToColumns = typeof params.scrollToColumns !== 'undefined' ?  params.scrollToColumns : true;
-        self.searchInput = ko.observable('');
-        self.searchVisible = ko.observable(true);
-        self.searchFocus = ko.observable(false);
-
-        self.searchVisible.subscribe(function (newValue) {
-          if (newValue) {
-            self.searchFocus(true);
-          }
-        });
-
-        self.filteredColumns = ko.pureComputed(function () {
-          if (self.searchInput() === '') {
-            return columns;
-          }
-          var query = self.searchInput().toLowerCase();
-          return columns.filter(function (column) {
-            return column.name.toLowerCase().indexOf(query) != -1
-                || column.type.toLowerCase().indexOf(query) != -1
-                || column.comment.toLowerCase().indexOf(query) != -1
-                || (typeof column.table !== 'undefined' && column.table.toLowerCase().indexOf(query) !== -1);
-          })
-        });
-      }
-
-      ko.components.register('sql-columns-table', {
-        viewModel: SqlColumnsTable,
-        template: { element: 'sql-columns-table-template' }
-      });
-    })();
-  </script>
 </%def>

+ 2 - 2
desktop/core/src/desktop/templates/nav_components.mako → desktop/core/src/desktop/templates/ko_components/ko_nav_tags.mako

@@ -19,7 +19,7 @@ from desktop.views import _ko
 from django.utils.translation import ugettext as _
 %>
 
-<%def name="nav_tags(readOnly=False)">
+<%def name="navTags()">
   <link href="${ static('desktop/ext/css/selectize.css') }" rel="stylesheet">
 
   <script type="text/html" id="nav-tags-template">
@@ -29,7 +29,7 @@ from django.utils.translation import ugettext as _
      <div style="width: 100%" data-bind="ifnot: loading">
        <textarea style="width: 100%" data-bind="tagEditor: {
           placeholder: '${_ko('No tags')}',
-          readOnly: '${ readOnly }' === 'True',
+          readOnly: '${ not user.has_hue_permission(action="write", app="metadata") }' === 'True',
           hasErrors: hasErrors,
           errorMessage: '${_ko("Tags could not be loaded.")}',
           setTags: currentTags,

+ 119 - 0
desktop/core/src/desktop/templates/ko_components/ko_sql_columns_table.mako

@@ -0,0 +1,119 @@
+## 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.
+
+<%!
+from django.utils.translation import ugettext as _
+from desktop.lib.i18n import smart_unicode
+from desktop.views import _ko
+%>
+
+<%def name="sqlColumnsTable()">
+
+  <script type="text/html" id="sql-columns-table-template">
+    <div class="context-popover-flex">
+      <div class="context-popover-flex-header">
+        <div class="context-popover-header" style="display:inline-block;">${_('Columns')} (<span data-bind="text: filteredColumns().length"></span>)</div>
+        <a href="#" data-bind="toggle: searchVisible"><i class="snippet-icon fa fa-search inactive-action margin-left-10" data-bind="css: { 'blue': searchVisible }"></i></a>
+        <input class="input-large context-popover-inline-search" style="padding: 3px 6px;" type="text" data-bind="visible: searchVisible, hasFocus: searchFocus, clearable: searchInput, valueUpdate:'afterkeydown'" placeholder="${ _('Filter columns...') }">
+      </div>
+      <div class="context-popover-flex-fill sql-columns-table" style="position:relative; height: 100%; overflow-y: auto;">
+        <table id="sqlColumnsTable" style="width: 100%" class="table table-condensed table-nowrap">
+          <!-- ko if: filteredColumns().length !== 0 -->
+          <thead>
+          <tr>
+            <th width="6%">&nbsp;</th>
+            <!-- ko if: typeof filteredColumns()[0].table === 'undefined' -->
+            <th width="60%">${_('Name')}</th>
+            <!-- /ko -->
+            <!-- ko if: typeof filteredColumns()[0].table !== 'undefined' -->
+            <th width="40%">${_('Name')}</th>
+            <th width="20%">${_('Table')}</th>
+            <!-- /ko -->
+            <th width="34%">${_('Type')}</th>
+            <th width="6%">&nbsp;</th>
+          </tr>
+          </thead>
+          <!-- /ko -->
+          <tbody data-bind="foreachVisible: { data: filteredColumns, minHeight: 29, container: '.sql-columns-table', pubSubDispose: 'context.popover.dispose' }">
+          <tr>
+            <!-- ko if: typeof selected === 'undefined' -->
+            <td data-bind="text: $index()+$indexOffset()+1"></td>
+            <!-- /ko -->
+            <!-- ko if: typeof selected !== 'undefined' -->
+            <td data-bind="toggle: selected" class="center" style="cursor: default;">
+              <div class="hueCheckbox fa" data-bind="multiCheck: '#sqlColumnsTable', css: {'fa-check': selected }"></div>
+            </td>
+
+            <!-- /ko -->
+            <td style="overflow: hidden;">
+              <!-- ko if: $parent.scrollToColumns -->
+              <a href="javascript:void(0)" class="column-selector" data-bind="click: function() { huePubSub.publish('context.popover.scroll.to.column', name); }" title="${ _("Show sample") }"><span data-bind="text: name"></span> <i class="fa fa-key" data-bind="visible: typeof primary_key !== 'undefined' && primary_key === 'true'"></i></a>
+              <!-- /ko -->
+              <!-- ko ifnot: $parent.scrollToColumns -->
+              <span data-bind="text: name"></span> <i class="fa fa-key" data-bind="visible: typeof primary_key !== 'undefined' && primary_key === 'true'"></i>
+              <!-- /ko -->
+            </td>
+            <!-- ko if: typeof table !== 'undefined' -->
+            <td><span data-bind="text: table"></span></td>
+            <!-- /ko -->
+            <td><span data-bind="text: type, attr: { 'title': extendedType }, tooltip: { placement: 'bottom' }"></span></td>
+            <td><i class="snippet-icon fa fa-question-circle" data-bind="visible: comment, attr: { 'title': comment }, tooltip: { placement: 'bottom' }"></i></td>
+          </tr>
+          </tbody>
+        </table>
+        <div class="context-popover-empty-columns" data-bind="visible: filteredColumns().length === 0">${_('No columns found')}</div>
+      </div>
+    </div>
+  </script>
+
+  <script type="text/javascript">
+    (function () {
+
+      function SqlColumnsTable(params) {
+        var self = this;
+        var columns = params.columns;
+        self.scrollToColumns = typeof params.scrollToColumns !== 'undefined' ?  params.scrollToColumns : true;
+        self.searchInput = ko.observable('');
+        self.searchVisible = ko.observable(true);
+        self.searchFocus = ko.observable(false);
+
+        self.searchVisible.subscribe(function (newValue) {
+          if (newValue) {
+            self.searchFocus(true);
+          }
+        });
+
+        self.filteredColumns = ko.pureComputed(function () {
+          if (self.searchInput() === '') {
+            return columns;
+          }
+          var query = self.searchInput().toLowerCase();
+          return columns.filter(function (column) {
+            return column.name.toLowerCase().indexOf(query) != -1
+                || column.type.toLowerCase().indexOf(query) != -1
+                || column.comment.toLowerCase().indexOf(query) != -1
+                || (typeof column.table !== 'undefined' && column.table.toLowerCase().indexOf(query) !== -1);
+          })
+        });
+      }
+
+      ko.components.register('sql-columns-table', {
+        viewModel: SqlColumnsTable,
+        template: { element: 'sql-columns-table-template' }
+      });
+    })();
+  </script>
+</%def>