浏览代码

HUE-9191 [ui] Add table Foreign Keys icons to the assist

Note:
- key name could be added to the left assist tooltip (it is present in
the column popup already)
- for FK, we could add the pointed db.table.column in the text
- if there is no Optimizer setup or we could smart merge FK infos into joinColumns() (probably
better to keep separate for now, but injecting the FK info would bump
the UX by a lot)
- there is a current POC to get those FK infos in SqlAlchemy API
Romain 5 年之前
父节点
当前提交
ff60175a83

+ 1 - 1
apps/beeswax/src/beeswax/api.py

@@ -144,7 +144,7 @@ def _autocomplete(db, database=None, table=None, column=None, nested=None, query
       response['is_view'] = table.is_view
       response['is_view'] = table.is_view
       response['partition_keys'] = [{'name': part.name, 'type': part.type} for part in table.partition_keys]
       response['partition_keys'] = [{'name': part.name, 'type': part.type} for part in table.partition_keys]
       response['primary_keys'] = [{'name': pk} for pk in primary_keys]
       response['primary_keys'] = [{'name': pk} for pk in primary_keys]
-      response['foreign_keys'] = [{'name': pk.name, 'to': pk.type} for pk in primary_keys]
+      response['foreign_keys'] = [{'name': fk.name, 'to': fk.type} for fk in foreign_keys]
     else:
     else:
       col = db.get_column(database, table, column)
       col = db.get_column(database, table, column)
       if col:
       if col:

+ 8 - 5
desktop/core/src/desktop/js/ko/components/contextPopover/ko.contextPopover.js

@@ -293,6 +293,9 @@ const SUPPORT_TEMPLATES = `
           <i class="fa fa-key" title="${I18n(
           <i class="fa fa-key" title="${I18n(
             'Partition key'
             'Partition key'
           )}" data-bind="visible: isPartitionKey()"></i>
           )}" data-bind="visible: isPartitionKey()"></i>
+          <i class="fa fa-key" title="${I18n(
+            'Foreign key'
+          )}" data-bind="visible: isForeignKey()"></i>
           <!-- /ko -->
           <!-- /ko -->
           <!-- /ko -->
           <!-- /ko -->
         </div>
         </div>
@@ -338,7 +341,7 @@ const SUPPORT_TEMPLATES = `
               'Show columns'
               'Show columns'
             )}' : '${I18n('Show view SQL')}'"></a>
             )}' : '${I18n('Show view SQL')}'"></a>
             <!-- /ko -->
             <!-- /ko -->
-  
+
             <!-- ko if: $parent.viewSqlVisible -->
             <!-- ko if: $parent.viewSqlVisible -->
             <div class="context-popover-sql" data-bind="highlight: { value: $parent.viewSql, enableOverflow: true, formatted: true, dialect: getSourceType() }"></div>
             <div class="context-popover-sql" data-bind="highlight: { value: $parent.viewSql, enableOverflow: true, formatted: true, dialect: getSourceType() }"></div>
             <!-- /ko -->
             <!-- /ko -->
@@ -400,7 +403,7 @@ const SUPPORT_TEMPLATES = `
       </div>
       </div>
     </div>
     </div>
   </script>
   </script>
-  
+
   <script type="text/html" id="context-storage-entry-contents">
   <script type="text/html" id="context-storage-entry-contents">
     <div class="context-popover-content" data-bind="with: storageEntry">
     <div class="context-popover-content" data-bind="with: storageEntry">
       <!-- ko if: !loading() && hasErrors() -->
       <!-- ko if: !loading() && hasErrors() -->
@@ -408,9 +411,9 @@ const SUPPORT_TEMPLATES = `
         <div class="alert" data-bind="text: errorText"></div>
         <div class="alert" data-bind="text: errorText"></div>
       </div>
       </div>
       <!-- /ko -->
       <!-- /ko -->
-  
+
       <div class="context-popover-flex-fill" data-bind="visible: loading"><!-- ko hueSpinner: { spin: loading, center: true, size: 'xlarge' } --><!-- /ko --></div>
       <div class="context-popover-flex-fill" data-bind="visible: loading"><!-- ko hueSpinner: { spin: loading, center: true, size: 'xlarge' } --><!-- /ko --></div>
-  
+
       <!-- ko if: !loading() && !hasErrors() -->
       <!-- ko if: !loading() && !hasErrors() -->
       <!-- ko with: definition -->
       <!-- ko with: definition -->
       <div class="context-popover-flex-attributes">
       <div class="context-popover-flex-attributes">
@@ -483,7 +486,7 @@ const SUPPORT_TEMPLATES = `
       </div>
       </div>
       <!-- /ko -->
       <!-- /ko -->
       <!-- /ko -->
       <!-- /ko -->
-  
+
       <div class="context-popover-flex-bottom-links">
       <div class="context-popover-flex-bottom-links">
         <div class="context-popover-link-row">
         <div class="context-popover-link-row">
           <!-- ko ifnot: loading -->
           <!-- ko ifnot: loading -->

+ 12 - 2
desktop/core/src/desktop/js/ko/components/ko.catalogEntriesList.js

@@ -235,6 +235,7 @@ class SampleEnrichedEntry {
       return (
       return (
         self.catalogEntry().isPrimaryKey() ||
         self.catalogEntry().isPrimaryKey() ||
         self.catalogEntry().isPartitionKey() ||
         self.catalogEntry().isPartitionKey() ||
+        self.catalogEntry().isForeignKey() ||
         self.joinColumns().length
         self.joinColumns().length
       );
       );
     });
     });
@@ -247,6 +248,9 @@ class SampleEnrichedEntry {
       if (self.catalogEntry().isPartitionKey()) {
       if (self.catalogEntry().isPartitionKey()) {
         keys.push(I18n('Partition key'));
         keys.push(I18n('Partition key'));
       }
       }
+      if (self.catalogEntry().isForeignKey()) {
+        keys.push(I18n('Foreign key'));
+      }
       if (self.joinColumns().length) {
       if (self.joinColumns().length) {
         let key = I18n(self.joinColumns().length > 1 ? 'Foreign keys' : 'Foreign key') + ':';
         let key = I18n(self.joinColumns().length > 1 ? 'Foreign keys' : 'Foreign key') + ':';
         self.joinColumns().forEach(joinCol => {
         self.joinColumns().forEach(joinCol => {
@@ -413,8 +417,14 @@ class CatalogEntriesList {
     };
     };
 
 
     const entrySort = function(a, b) {
     const entrySort = function(a, b) {
-      const aIsKey = a.catalogEntry().isPrimaryKey() || a.catalogEntry().isPartitionKey();
-      const bIsKey = b.catalogEntry().isPrimaryKey() || b.catalogEntry().isPartitionKey();
+      const aIsKey =
+        a.catalogEntry().isPrimaryKey() ||
+        a.catalogEntry().isPartitionKey() ||
+        a.catalogEntry().isForeignKey();
+      const bIsKey =
+        b.catalogEntry().isPrimaryKey() ||
+        b.catalogEntry().isPartitionKey() ||
+        b.catalogEntry().isForeignKey();
       if (aIsKey && !bIsKey) {
       if (aIsKey && !bIsKey) {
         return -1;
         return -1;
       }
       }

+ 3 - 0
desktop/core/src/desktop/templates/hue_ace_autocompleter.mako

@@ -689,6 +689,9 @@ from desktop.views import _ko
     <!-- ko if: catalogEntry.isPrimaryKey() -->
     <!-- ko if: catalogEntry.isPrimaryKey() -->
     <div class="details-attribute" ><i class="fa fa-key fa-fw"></i> ${ _('Primary key') }</div>
     <div class="details-attribute" ><i class="fa fa-key fa-fw"></i> ${ _('Primary key') }</div>
     <!-- /ko -->
     <!-- /ko -->
+    <!-- ko if: catalogEntry.isForeignKey() -->
+    <div class="details-attribute" ><i class="fa fa-key fa-fw"></i> ${ _('Foreign key') }</div>
+    <!-- /ko -->
     <!-- /ko -->
     <!-- /ko -->
     <!-- ko if: loading -->
     <!-- ko if: loading -->
     <div class="details-comment" ><!-- ko hueSpinner: { spin: loading, size: 'small', inline: true } --><!-- /ko --></div>
     <div class="details-comment" ><!-- ko hueSpinner: { spin: loading, size: 'small', inline: true } --><!-- /ko --></div>