Explorar o código

HUE-8888 [docs] Moving how to register components to main section

Romain %!s(int64=5) %!d(string=hai) anos
pai
achega
7b81844696

+ 1 - 2
docs/docs-site/content/developer/_index.md

@@ -11,7 +11,6 @@ Those are the main categories of development:
 * **[Web application](/developer/development)**: Ramping-up with on the overall Hue development service
 * **[Web application](/developer/development)**: Ramping-up with on the overall Hue development service
 * **[Connector](/developer/connectors)**: Access your own data services or data warehouses
 * **[Connector](/developer/connectors)**: Access your own data services or data warehouses
 * **[SQL parsers](/developer/parsers)**: Tokenize SQL queries, build autocompletes
 * **[SQL parsers](/developer/parsers)**: Tokenize SQL queries, build autocompletes
-* **[UI components](/developer/components)**: Reusable UI elements
-* **[GetHue](/developer/gethue)**: Packaged library of reusable SQL parsers and UI components
+* **[Components](/developer/components)**: Packaged library of reusable SQL parsers and UI components
 
 
 Also check on how to get started on [contribution ideas](https://github.com/cloudera/hue/blob/master/CONTRIBUTING.md).
 Also check on how to get started on [contribution ideas](https://github.com/cloudera/hue/blob/master/CONTRIBUTING.md).

+ 33 - 6
docs/docs-site/content/developer/components/_index.md

@@ -6,7 +6,7 @@ weight: 4
 
 
 Some of the UI elements in Hue are available as generic [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). They are library/framework agnostic, and can be used in any web project irrespective of what its built upon - React, Angular, Ember or something else. They can be [imported](#using-hue-ui-components-in-your-project) as classic JavaScript modules for your own development needs.
 Some of the UI elements in Hue are available as generic [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). They are library/framework agnostic, and can be used in any web project irrespective of what its built upon - React, Angular, Ember or something else. They can be [imported](#using-hue-ui-components-in-your-project) as classic JavaScript modules for your own development needs.
 
 
-## Generic Components
+## Component list
 
 
 Following are the generic components in Hue. Doc for each component must give you a sound idea on the attributes/props that the components accept, and events they generate.
 Following are the generic components in Hue. Doc for each component must give you a sound idea on the attributes/props that the components accept, and events they generate.
 
 
@@ -14,15 +14,22 @@ Following are the generic components in Hue. Doc for each component must give yo
 * [ER-diagram](/developer/components/er-diagram)
 * [ER-diagram](/developer/components/er-diagram)
 * [SQL Scratchpad](/developer/components/scratchpad)
 * [SQL Scratchpad](/developer/components/scratchpad)
 
 
-## Using UI components in your project
+## Importing in your project
 
 
-All the Generic Hue components are published as [GetHue](/developer/gethue/) NPM package. Following will install the latest from https://www.npmjs.com/package/gethue.
+There are two ways to get them:
+
+- [npm registry](#npm-registry)
+- [Local dependency](#local-dependency)
+
+### npm registry
+
+All the Generic Hue components are published as NPM package. Following will install the latest from https://www.npmjs.com/package/gethue.
 
 
     npm install --save gethue
     npm install --save gethue
 
 
 Here is an example on how to use the er-diagram component once installed:
 Here is an example on how to use the er-diagram component once installed:
 
 
-### Import
+#### Import
 
 
 er-diagram can be imported into an html file using a simple script tag as follows.
 er-diagram can be imported into an html file using a simple script tag as follows.
 
 
@@ -32,7 +39,7 @@ If you are using a bundler like webpack. They can be imported using a normal imp
 
 
     import 'gethue/web/er-diagram';
     import 'gethue/web/er-diagram';
 
 
-### Usage
+#### Usage
 
 
 Once imported they can be used like a native HTML tag.
 Once imported they can be used like a native HTML tag.
 
 
@@ -40,8 +47,28 @@ Once imported they can be used like a native HTML tag.
 
 
 Please refer these [demo apps](https://github.com/cloudera/hue/tree/master/tools/examples/components) for examples on how the components can be used. You must be able to directly pass attributes, and listen to custom and native events.
 Please refer these [demo apps](https://github.com/cloudera/hue/tree/master/tools/examples/components) for examples on how the components can be used. You must be able to directly pass attributes, and listen to custom and native events.
 
 
-### Use as Vue Components
+#### Use as Vue Components
 
 
 Internally these components are created using Vue.js & TypeScript. So you can even use them as plain Vue component, and take advantage of Vue features. Vue version of the components are under `gethue/components`.
 Internally these components are created using Vue.js & TypeScript. So you can even use them as plain Vue component, and take advantage of Vue features. Vue version of the components are under `gethue/components`.
 
 
     import ERDiagram from 'gethue/components/er-diagram/index.vue';
     import ERDiagram from 'gethue/components/er-diagram/index.vue';
+
+### Local dependency
+
+Checkout Hue and cd to the [demo app](https://github.com/cloudera/hue/tree/master/tools/examples/api/hue_dep). Steps are similar if you would like to use your own app instead of the demo app (hue_dep).
+
+    cd tools/examples/api/hue_dep
+
+    npm install
+    npm run webpack
+    npm run app
+
+In hue_dep `package.json` there is a dependency on Hue:
+
+    "dependencies": {
+      "hue": "file:../../.."
+    },
+
+Now let's import the Hive parser:
+
+    import sqlAutocompleteParser from 'hue/desktop/core/src/desktop/js/parse/sql/hive/hiveAutocompleteParser';

+ 85 - 0
docs/docs-site/content/developer/components/parsers/_index.md

@@ -0,0 +1,85 @@
+---
+title: "SQL Parsers"
+draft: false
+---
+
+Parsers generated are JavaScript modules. This makes it easy to import a parser into your own apps (e.g. Webapp, Node.Js...). Importing a parser can be simply done via a npm package.
+
+Here is an example on how to use the Hive parser:
+
+    npm install --save gethue
+
+Will install the latest from https://www.npmjs.com/package/gethue. Currently webpack needs to be used. An example of `webpack.config.js` can be found in the demo app [README](https://github.com/cloudera/hue/blob/master/tools/examples/api/hue_dep/README.md#gethue).
+
+Then import the parser you need with something like below and run it on an SQL statement:
+
+    import sqlAutocompleteParser from 'gethue/parse/sql/hive/hiveAutocompleteParser';
+
+    const beforeCursor = 'SELECT col1, col2, tbl2.col3 FROM tbl; '; // Note extra space at end
+    const afterCursor = '';
+    const dialect = 'hive';
+    const debug = false;
+
+    console.log(
+      JSON.stringify(
+        sqlAutocompleteParser.parseSql(beforeCursor, afterCursor, dialect, debug),
+        null,
+        2
+      )
+    );
+
+Which then will output keywords suggestions and all the known locations:
+
+    { locations:
+      [ { type: 'statement', location: [Object] },
+        { type: 'statementType',
+          location: [Object],
+          identifier: 'SELECT' },
+        { type: 'selectList', missing: false, location: [Object] },
+        { type: 'column',
+          location: [Object],
+          identifierChain: [Array],
+          qualified: false,
+          tables: [Array] },
+        { type: 'column',
+          location: [Object],
+          identifierChain: [Array],
+          qualified: false,
+          tables: [Array] },
+        { type: 'column',
+          location: [Object],
+          identifierChain: [Array],
+          qualified: false,
+          tables: [Array] },
+        { type: 'table', location: [Object], identifierChain: [Array] },
+        { type: 'whereClause', missing: true, location: [Object] },
+        { type: 'limitClause', missing: true, location: [Object] } ],
+      lowerCase: false,
+      suggestKeywords:
+      [ { value: 'ABORT', weight: -1 },
+        { value: 'ALTER', weight: -1 },
+        { value: 'ANALYZE TABLE', weight: -1 },
+        { value: 'CREATE', weight: -1 },
+        { value: 'DELETE', weight: -1 },
+        { value: 'DESCRIBE', weight: -1 },
+        { value: 'DROP', weight: -1 },
+        { value: 'EXPLAIN', weight: -1 },
+        { value: 'EXPORT', weight: -1 },
+        { value: 'FROM', weight: -1 },
+        { value: 'GRANT', weight: -1 },
+        { value: 'IMPORT', weight: -1 },
+        { value: 'INSERT', weight: -1 },
+        { value: 'LOAD', weight: -1 },
+        { value: 'MERGE', weight: -1 },
+        { value: 'MSCK', weight: -1 },
+        { value: 'RELOAD FUNCTION', weight: -1 },
+        { value: 'RESET', weight: -1 },
+        { value: 'REVOKE', weight: -1 },
+        { value: 'SELECT', weight: -1 },
+        { value: 'SET', weight: -1 },
+        { value: 'SHOW', weight: -1 },
+        { value: 'TRUNCATE', weight: -1 },
+        { value: 'UPDATE', weight: -1 },
+        { value: 'USE', weight: -1 },
+        { value: 'WITH', weight: -1 } ],
+      definitions: [] }

+ 0 - 43
docs/docs-site/content/developer/gethue/_index.md

@@ -1,43 +0,0 @@
----
-title: "Hue in Your Project"
-date: 2019-03-13T18:28:09-07:00
-draft: false
-weight: 20
----
-
-Some modules of Hue like the [SQL parsers](/developer/parsers/#using-hue-parsers-in-your-project) or [UI Components](/developer/components/#using-ui-components-in-your-project) can be imported independently as dependencies into your own apps. There are two ways to get them:
-
-- [npm registry](#npm-registry)
-- [Local dependency](#local-dependency)
-
-## npm registry
-
-    npm install gethue
-
-Will install the latest from https://www.npmjs.com/package/gethue. Then import the module you need with something like below:
-
-    import sqlAutocompleteParser from 'gethue/parse/sql/hive/hiveAutocompleteParser';
-
-UI components can be imported in a similar way.
-
-    import 'gethue/web/er-diagram';
-
-## Local dependency
-
-Checkout Hue and cd to the [demo app](https://github.com/cloudera/hue/tree/master/tools/examples/api/hue_dep). Steps are similar if you would like to use your own app instead of the demo app (hue_dep).
-
-    cd tools/examples/api/hue_dep
-
-    npm install
-    npm run webpack
-    npm run app
-
-In hue_dep `package.json` add a dependency on Hue:
-
-    "dependencies": {
-      "hue": "file:../../.."
-    },
-
-Now let's import the Hive parser:
-
-    import sqlAutocompleteParser from 'hue/desktop/core/src/desktop/js/parse/sql/hive/hiveAutocompleteParser';

+ 1 - 1
tools/examples/api/hue_dep/README.md

@@ -6,7 +6,7 @@
     npm run webpack   // Build demo app
     npm run webpack   // Build demo app
     npm run app       // Run demo app
     npm run app       // Run demo app
 
 
-In package.json theres a dependency on Hue git project:
+In package.json there's a dependency on Hue git project:
 
 
     "dependencies": {
     "dependencies": {
       "hue": "file:../../../.."
       "hue": "file:../../../.."