浏览代码

HUE-3294 [core] Skeleton for function categories in the right assist panel

Johan Ahlen 9 年之前
父节点
当前提交
b6d04a2

+ 29 - 0
desktop/core/src/desktop/static/desktop/js/sqlFunctions.js

@@ -2176,6 +2176,34 @@ var SqlFunctions = (function () {
     }
   };
 
+  var CATEGORIZED_FUNCTIONS = {
+    hive: [
+      { name: 'Collection', functions: COLLECTION_FUNCTIONS['hive'] },
+      { name: 'Conditional', functions: CONDITIONAL_FUNCTIONS['hive'] },
+      { name: 'Complex Type', functions: COMPLEX_TYPE_CONSTRUCTS['hive'] },
+      { name: 'Date', functions: DATE_FUNCTIONS['hive'] },
+      { name: 'Mathematical', functions: MATHEMATICAL_FUNCTIONS['hive'] },
+      { name: 'Type Conversion', functions: TYPE_CONVERSION_FUNCTIONS['hive'] },
+      { name: 'String', functions: STRING_FUNCTIONS['hive'] },
+      { name: 'Misc', functions: MISC_FUNCTIONS['hive'] },
+      { name: 'Table Generating', functions: TABLE_GENERATING_FUNCTIONS['hive'] },
+      { name: 'Aggregate', functions: AGGREGATE_FUNCTIONS['hive'] },
+      { name: 'Analytic', functions: ANALYTIC_FUNCTIONS['hive'] }
+    ],
+    impala: [
+      { name: 'Collection', functions: COLLECTION_FUNCTIONS['impala'] },
+      { name: 'Conditional', functions: CONDITIONAL_FUNCTIONS['impala'] },
+      { name: 'Complex Type', functions: COMPLEX_TYPE_CONSTRUCTS['impala'] },
+      { name: 'Date', functions: DATE_FUNCTIONS['impala'] },
+      { name: 'Mathematical', functions: MATHEMATICAL_FUNCTIONS['impala'] },
+      { name: 'Type Conversion', functions: TYPE_CONVERSION_FUNCTIONS['impala'] },
+      { name: 'String', functions: STRING_FUNCTIONS['impala'] },
+      { name: 'Misc', functions: MISC_FUNCTIONS['impala'] },
+      { name: 'Aggregate', functions: AGGREGATE_FUNCTIONS['impala'] },
+      { name: 'Analytic', functions: ANALYTIC_FUNCTIONS['impala'] }
+    ]
+  };
+
   var typeImplicitConversion = {
     hive: {
       BOOLEAN: {
@@ -2436,6 +2464,7 @@ var SqlFunctions = (function () {
   return {
     suggestFunctions: suggestFunctions,
     getArgumentTypes: getArgumentTypes,
+    CATEGORIZED_FUNCTIONS: CATEGORIZED_FUNCTIONS,
     getFunctionsWithReturnTypes: getFunctionsWithReturnTypes,
     getReturnTypes: getReturnTypes,
     matchesType: matchesType,

+ 38 - 23
desktop/core/src/desktop/templates/responsive.mako

@@ -277,7 +277,7 @@ ${ hueIcons.symbols() }
     <div class="right-panel" data-bind="css: { 'side-panel-closed': !rightAssistVisible() }">
       <a href="javascript:void(0);" style="z-index: 1000; display: none;" title="${_('Show Assist')}" class="pointer side-panel-toggle show-right-side-panel" data-bind="visible: ! rightAssistVisible(), toggle: rightAssistVisible"><i class="fa fa-chevron-left"></i></a>
       <a href="javascript:void(0);" style="display: none;" title="${_('Hide Assist')}" class="pointer side-panel-toggle hide-right-side-panel" data-bind="visible: rightAssistVisible, toggle: rightAssistVisible"><i class="fa fa-chevron-right"></i></a>
-      <div style="position: relative; width: 100%; height: 100%;" data-bind="component: { name: 'right-assist-panel' }"></div>
+      <div style="position: absolute; top: 25px; bottom: 0; left: 0; right: 0" data-bind="component: { name: 'right-assist-panel' }"></div>
     </div>
   </div>
 </div>
@@ -331,12 +331,17 @@ ${ assist.assistPanel() }
       <a href="javascript:void(0);" data-bind="click: function () { $parent.activeType($data); }, text: $data"></a>
       <!-- /ko -->
     </div>
-    <div data-bind="foreach: functions">
-      <div style="margin-top: 20px;">
-        <div style="font-weight: 600"><a href="javascript:void(0);" data-bind="text: signature, toggle: open"></a></div>
-        <div data-bind="visible: open, text: description"></div>
-      </div>
-    </div>
+    <ul data-bind="foreach: activeCategories">
+      <li>
+        <a href="javascript: void(0);" data-bind="toggle: open"><i class="fa fa-fw" data-bind="css: { 'fa-chevron-right': !open(), 'fa-chevron-down': open }"></i> <span data-bind="text: name"></span></a>
+        <ul data-bind="slideVisible: open, foreach: functions">
+          <li>
+            <a href="javascript: void(0);" data-bind="toggle: open, text: signature"></a>
+            <div data-bind="slideVisible: open, text: description"></div>
+          </li>
+        </ul>
+      </li>
+    </ul>
   </div>
 </script>
 
@@ -344,31 +349,41 @@ ${ assist.assistPanel() }
   (function () {
     function RightAssist(params) {
       var self = this;
-      self.functions = ko.observableArray();
+      self.categories = {};
+
       self.activeType = ko.observable();
       self.availableTypes = ['hive', 'impala'];
-      self.cachedFunctions = {};
+
+      self.initSqlFunctions('hive');
+      self.initSqlFunctions('impala');
+
+      self.activeCategories = ko.observable();
 
       self.activeType.subscribe(function (newValue) {
-        if (newValue === 'hive' || newValue === 'impala') {
-          if (!self.cachedFunctions[newValue]) {
-            var functionIndex = SqlFunctions.getFunctionsWithReturnTypes(newValue, ['T'], true, true);
-            var keys = Object.keys(functionIndex);
-            keys.sort();
-            var funcs = [];
-            keys.forEach(function (key) {
-              functionIndex[key].open = ko.observable(false);
-              funcs.push(functionIndex[key]);
-            });
-            self.cachedFunctions[newValue] = funcs;
-          }
-          self.functions(self.cachedFunctions[newValue]);
-        }
+        self.activeCategories(self.categories[newValue]);
       });
 
       self.activeType(self.availableTypes[0]);
     }
 
+    RightAssist.prototype.initSqlFunctions = function (dialect) {
+      var self = this;
+      self.categories[dialect] = [];
+      SqlFunctions.CATEGORIZED_FUNCTIONS[dialect].forEach(function (category) {
+        self.categories[dialect].push({
+          name: category.name,
+          open: ko.observable(false),
+          functions: $.map(category.functions, function(fn) {
+            return {
+              signature: fn.signature,
+              open: ko.observable(false),
+              description: fn.description
+            }
+          })
+        })
+      });
+    };
+
     ko.components.register('right-assist-panel', {
       viewModel: RightAssist,
       template: { element: 'right-assist-template' }