Przeglądaj źródła

GH-1403 [parser] Live docs - Added demo for all parsers

sreenaths 5 lat temu
rodzic
commit
30b93f919c

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

@@ -3,6 +3,62 @@ title: "SQL Parsers"
 draft: false
 ---
 
+## Live Demo
+
+{{< rawhtml >}}
+  <link rel="stylesheet" href="demo/styles.css">
+  <div class="live-parser-container">
+    <div class="parser-scripts-container"></div>
+    <select>
+      <option value="hiveAutocompleteParser">Hive Autocomplete Parser</option>
+      <option value="hiveSyntaxParser">Hive Syntax Parser</option>
+      <option disabled> </option>
+      <option value="impalaAutocompleteParser">Impala Autocomplete Parser</option>
+      <option value="impalaSyntaxParser">Impala Syntax Parser</option>
+      <option disabled> </option>
+      <option value="calciteAutocompleteParser">Calcite Autocomplete Parser</option>
+      <option value="calciteSyntaxParser">Calcite Syntax Parser</option>
+      <option disabled> </option>
+      <option value="elasticsearchAutocompleteParser">Elasticsearch Autocomplete Parser</option>
+      <option value="elasticsearchSyntaxParser">Elasticsearch Syntax Parser</option>
+      <option disabled> </option>
+      <option value="phoenixAutocompleteParser">Phoenix Autocomplete Parser</option>
+      <option value="phoenixSyntaxParser">Phoenix Syntax Parser</option>
+      <option disabled> </option>
+      <option value="druidAutocompleteParser">Druid Autocomplete Parser</option>
+      <option value="druidSyntaxParser">Druid Syntax Parser</option>
+      <option disabled> </option>
+      <option value="flinkAutocompleteParser">Flink Autocomplete Parser</option>
+      <option value="flinkSyntaxParser">Flink Syntax Parser</option>
+      <option disabled> </option>
+      <option value="ksqlAutocompleteParser">Ksql Autocomplete Parser</option>
+      <option value="ksqlSyntaxParser">Ksql Syntax Parser</option>
+      <option disabled> </option>
+      <option value="prestoAutocompleteParser">Presto Autocomplete Parser</option>
+      <option value="prestoSyntaxParser">Presto Syntax Parser</option>
+      <option disabled> </option>
+      <option value="genericAutocompleteParser">Generic Autocomplete Parser</option>
+      <option value="genericSyntaxParser">Generic Syntax Parser</option>
+    </select>
+    <div class="live-message"></div>
+    <label>Query <textarea>
+      SELECT accountid,
+            account.name,
+            sum(expectedrevenue) AS expected,
+            count(*) ct
+      FROM sfdc.opportunity_history
+      JOIN sfdc.account ON account.id = opportunity_history.accountid
+      WHERE opportunity_history.`snapshottime` = '2017-09-25'
+      GROUP BY accountid,
+              account.name
+      ORDER BY expected DESC
+      LIMIT 100;
+    </textarea></label>
+    <label>Parsed Result <textarea readonly></textarea></label>
+  </div>
+  <script src="demo/live-parser.js"></script>
+{{< /rawhtml >}}
+
 ## Import
 
 Import the parser you need with something like below and run it on an SQL statement:

+ 69 - 0
docs/docs-site/content/developer/components/parsers/demo/live-parser.js

@@ -0,0 +1,69 @@
+// 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.
+
+const liveParsers = document.querySelectorAll('.live-parser-container');
+
+function stringify(obj) {
+  return JSON.stringify(obj, null, 2);
+}
+
+liveParsers.forEach(parserEl => {
+  const scriptsContainer = parserEl.querySelector('.parser-scripts-container');
+  const msg = parserEl.querySelector('.live-message');
+  const select = parserEl.querySelector('select');
+  const [queryText, jsonText] = parserEl.querySelectorAll('textarea');
+
+  const parseQuery = () => {
+    const parser = window[select.value];
+
+    if (parser) {
+      msg.innerHTML = 'Parser ready';
+
+      const beforeCursor = queryText.value + ' ';
+      const afterCursor = '';
+      const debug = false;
+
+      const parsedObj = parser.parseSql(beforeCursor, afterCursor, debug);
+      jsonText.value = stringify(parsedObj);
+    } else {
+      msg.innerHTML = 'Parser not loaded!';
+    }
+  };
+
+  const loadParser = () => {
+    const parser = window[select.value];
+
+    if (parser) {
+      parseQuery();
+    } else {
+      const parserFile = `/js/gethue/parsers/${select.value}.js`;
+
+      const parserScript = document.createElement('script');
+      parserScript.setAttribute('type', 'text/javascript');
+      parserScript.setAttribute('src', parserFile);
+      parserScript.addEventListener('load', parseQuery);
+      parserScript.addEventListener('error', () => (msg.innerHTML = 'Parser loading failed!'));
+
+      msg.innerHTML = 'Loading parser...';
+      scriptsContainer.appendChild(parserScript);
+    }
+  };
+
+  loadParser();
+
+  select.onchange = loadParser;
+  queryText.onkeyup = parseQuery;
+});

+ 47 - 0
docs/docs-site/content/developer/components/parsers/demo/styles.css

@@ -0,0 +1,47 @@
+/*
+ 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.
+*/
+
+.live-parser-container {
+  position: relative;
+
+  border: 1px solid silver;
+  border-radius: 5px;
+
+  background: #F6F6F6;
+
+  padding: 10px;
+}
+.live-parser-container select {
+  margin-bottom: 10px;
+}
+.live-parser-container textarea, .live-parser-container label {
+  margin-bottom: 0;
+}
+.live-parser-container textarea {
+  min-height: 100px;
+  height: 200px;
+  font-size: .7em;
+}
+.live-parser-container textarea:read-only {
+  cursor: default;
+}
+.live-parser-container .live-message {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}

+ 2 - 0
docs/docs-site/layouts/shortcodes/rawhtml.html

@@ -0,0 +1,2 @@
+<!-- raw html -->
+{{.Inner}}