Răsfoiți Sursa

[release] 4.10 Blog post

Romain Rigaux 4 ani în urmă
părinte
comite
dec2c1b8b0

+ 132 - 0
docs/gethue/content/en/posts/2021-06-14-release-hue-4-10.md

@@ -0,0 +1,132 @@
+---
+title: Hue 4.10 and its new SQL Editor component, REST API, small File Importer and Slack App are out!
+author: Hue Team
+type: post
+date: 2021-06-14T00:00:00+00:00
+url: /blog/hue-4-10-sql-scratchpad-component-rest-api-small-file-importer-slack-app/
+sf_thumbnail_type:
+  - none
+sf_thumbnail_link_type:
+  - link_to_post
+sf_detail_type:
+  - none
+sf_page_title:
+  - 1
+sf_page_title_style:
+  - standard
+sf_no_breadcrumbs:
+  - 1
+sf_page_title_bg:
+  - none
+sf_page_title_text_style:
+  - light
+sf_background_image_size:
+  - cover
+sf_social_sharing:
+  - 1
+sf_related_articles:
+  - 1
+sf_sidebar_config:
+  - left-sidebar
+sf_left_sidebar:
+  - Sidebar-2
+sf_right_sidebar:
+  - Sidebar-1
+sf_caption_position:
+  - caption-right
+sf_remove_promo_bar:
+  - 1
+ampforwp-amp-on-off:
+  - default
+categories:
+  - Version 4.10
+  - Release
+
+---
+Hi Data Explorers,
+
+The Hue Team is glad to thanks all the contributors and release Hue 4.10!
+
+<a href="https://cdn.gethue.com/uploads/2021/02/hue-4.9.png">
+  <img src="https://cdn.gethue.com/uploads/2021/02/hue-4.9.png" />
+</a>
+
+&nbsp;
+
+Here is a summary of the [main improvements](/categories/version-4.10/) of 4.10 on top of the previous [4.9](/blog/hue-4-9-sql-dialects-phoenix-dasksql-flink-components/) release:
+
+
+## SQL Editor Component & API
+Now build your own SQL Editor in three HTML line by leveraging the [SQL Scratchpad](https://docs.gethue.com/developer/components/scratchpad/) component. The first version of the public [REST API](https://docs.gethue.com/developer/api/rest/) for executing queries was also published.
+
+Read more about the [SQL Scratchpad and REST API](https://gethue.com/blog/2021-05-29-create-own-sql-editor-via-webcomponent-and-public-api/).
+
+Here is a live demo of how easy it is to add the component:
+
+{{< rawhtml >}}
+<p>
+  <div style="position: absolute; height: 10%; width: 100%">
+    <sql-scratchpad api-url="https://demo.gethue.com" username="demo" password="demo" dialect="mysql" />
+  </div>
+
+  <script type="text/javascript" src="https://unpkg.com/gethue/lib/components/SqlScratchpadWebComponent.js"></script>
+
+  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+</p>
+{{< /rawhtml >}}
+
+![Adding the component in 3 lines and watching the interaction with the public API of demo.gethue.com](https://cdn-images-1.medium.com/max/2356/1*yXRjYQN_eRUimzlXPl5SwQ.gif)*Adding the component in 3 lines and watching the interaction with the public API of demo.gethue.com*
+
+## Create Table Wizard
+
+Create a Hive, Impala, MySql, Phoenix SQL table via a small file in three clicks. Just upload it via your browser, without the need to have any Storage filesystem like HDFS or S3 configured and follow the wizard.
+
+Read more about the [create table from a small file](https://gethue.com/blog/2021-05-26-improved-hue-importer-select-a-file-choose-a-dialect-create-a-table/).
+
+![Importer direct upload steps](https://cdn.gethue.com/uploads/2021/05/Importer_direct_upload_steps.gif)
+
+## Slack App
+Collaborate more via Slack thanks to the rich preview of SQL queries, auto links, query bank and export result to Slack.
+
+[Install the app](/blog/2021-05-18-installing-hue-slack-app-in-three-simple-steps/) in a few clicks and learn more about the [functionalities of assistance](https://docs.gethue.com/user/concept/#slack).
+
+![Slack Installation Flow](https://cdn.gethue.com/uploads/2021/05/slack-install.gif)
+
+## Tech stack & Tooling
+
+- [Provide your users proper S3 file access without giving them any credential keys](https://gethue.com/blog/2021-04-23-s3-file-access-without-any-credentials-and-signed-urls/)
+- [Distribute your container App as a Package](https://gethue.com/blog/2021-04-19-publish-kubernetes-container-application-via-package-with-helm/)
+- [Performing Web/API Service upgrades without Downtime](https://gethue.com/blog/2021-03-06-web-api-service-upgrade-no-downtime-kubernetes-rollout/)
+- [Interactively Querying HBase via SQL - Tech Talk](https://gethue.com/blog/2021-04-05-interactively-querying-hbase-via-sql-tech-talk/)
+- [Process & Learnings when upgrading the Webserver Stack - Django Upgrade (1.11 to 3.1)](https://gethue.com/blog/2021-03-09-process-and-learnings-when-upgrading-the-webserver-stack-django-upgrade-1-to-3/)
+- [Introducing Vue 3 & Web Components in Hue Query Editor](https://gethue.com/blog/vue3-build-cli-options-composition-api-template-web-components-hue/)
+- Docker Image size [reduced by 60%](https://github.com/cloudera/hue/pull/2129)
+- [Phoenix SQL](/sql-querying-apache-hbase-with-apache-phoenix/) column keys are now displayed in the left assist
+
+
+It has more than 600+ commits and 200+ bug fixes! For more details on all the changes, check out the [release notes](https://docs.gethue.com/releases/release-notes-4.10.0/).
+
+Go grab it and give it a spin!
+
+* Docker
+    ```
+    docker run -it -p 8888:8888 gethue/4.10.0
+    ```
+* Kubernetes :
+    ```
+    helm repo add gethue https://helm.gethue.com
+    helm repo update
+    helm install hue gethue/hue
+    ```
+* [demo.gethue.com](demo.gethue.com)
+* [Tarball](https://cdn.gethue.com/downloads/hue-4.10.0.tgz) or [source](https://github.com/cloudera/hue/archive/release-4.10.0.zip)
+
+</br>
+</br>
+
+Any feedback or question? Feel free to comment here or on the <a href="https://discourse.gethue.com/">Forum</a> and <a href="https://docs.gethue.com/quickstart/">quick start</a> SQL querying!
+
+
+Onwards!
+
+Romain from the Hue Team

+ 2 - 0
docs/gethue/themes/stack-hue-theme/layouts/shortcodes/rawhtml.html

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

+ 206 - 0
docs/gethue/themes/stack-hue-theme/layouts/shortcodes/webcomp.html

@@ -0,0 +1,206 @@
+<style>
+  .webcomp-sc {
+    position: relative;
+    color: var(--MAIN-TITLES-TEXT-color);
+  }
+
+  .comp-container {
+    margin-right: 30px;
+    transition: margin-right .5s ease-in-out;
+  }
+  .webcomp-sc.expanded .comp-container {
+    margin-right: 250px;
+  }
+
+  // customizer panel
+  .customizer-panel {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+
+    overflow: hidden;
+
+    width: 25px;
+    height: 100%;
+
+    border: 1px solid #d6d8db;
+    border-radius: 5px;
+
+    padding: 3px 5px;
+
+    transition: width .5s ease-in-out;
+  }
+  .webcomp-sc.expanded .customizer-panel {
+    width: 245px;
+  }
+
+  // customizer panel content
+  .customizer-panel .panel-content {
+    height: 100%;
+    margin-left: 20px;
+    transition: margin-left .5s ease-in-out;
+
+    display: flex;
+    flex-direction: column;
+  }
+  .webcomp-sc.expanded .customizer-panel .panel-content {
+    margin-left: 0;
+  }
+  .webcomp-sc.hide-events .wc-events {
+    display: none;
+  }
+
+  .customizer-panel .panel-content textarea {
+    width: 232px;
+    margin-bottom: 5px;
+
+    resize: none;
+
+    font-family: "Lucida Console", Courier, monospace;
+    font-size: .7em;
+    white-space: pre;
+  }
+
+  .customizer-panel .panel-content .attributes-txt {
+    flex: 4;
+  }
+  .customizer-panel .panel-content .events-txt {
+    flex: 1;
+  }
+
+  // Expand collapse button
+  .customizer-panel .exp-collapse-button {
+    position: absolute;
+    right: 5px;
+    top: 3px;
+    height: 100%;
+
+    display: inline-block;
+    user-select: none;
+  }
+  .customizer-panel .exp-collapse-button em.fa-plus {
+    transition: transform .5s ease-in-out;
+  }
+  .webcomp-sc.expanded .customizer-panel .exp-collapse-button em.fa-plus {
+    transform: rotate(45deg);
+  }
+
+  .customizer-panel .exp-collapse-button .cust-txt {
+    position: absolute;
+    left: -5px;
+    top: 50%;
+    margin-top: -50px;
+
+    writing-mode: vertical-rl;
+    color: var(--MAIN-TITLES-TEXT-color);
+    letter-spacing: .15em;
+
+    transition: left .2s ease-in-out;
+  }
+  .webcomp-sc.expanded .customizer-panel .exp-collapse-button .cust-txt {
+    left: 20px;
+  }
+</style>
+
+<div class="webcomp-sc">
+  <script type = "text/javascript" src={{ .Get "src" }}></script>
+
+  <div class="comp-container"></div>
+
+  <div class="customizer-panel">
+    <div class="panel-content">
+      <b>Attributes</b>
+      <textarea class="attributes-txt"></textarea>
+      <b class="wc-events">Events</b>
+      <textarea class="wc-events events-txt" readonly></textarea>
+    </div>
+
+    <div class="exp-collapse-button">
+      <a href="javascript:void(0);"><em class="fa fa-plus"></em></a>
+      <span class="cust-txt">Customize</span>
+    </div>
+  </div>
+</div>
+
+<script type = "text/javascript">
+  function initWebcomp() {
+    const webcomps = document.querySelectorAll(".webcomp-sc");
+    const currentWebcomp = webcomps[webcomps.length - 1];
+
+    currentWebcomp.querySelector(".exp-collapse-button a")
+        .addEventListener("click", event => {
+          currentWebcomp.classList.toggle("expanded");
+        });
+
+    return currentWebcomp;
+  }
+
+  function createComponent(name, innerHTML) {
+    const webcomp = initWebcomp();
+    const container = webcomp.querySelector(".comp-container");
+    const eventsTxtArea = webcomp.querySelector("textarea.events-txt");
+    const attributesTextArea = webcomp.querySelector("textarea.attributes-txt");
+
+    const component = document.createElement(name);
+    component.innerHTML = innerHTML;
+    container.appendChild(component);
+
+    return {webcomp, component, eventsTxtArea, attributesTextArea};
+  }
+
+  function loadAttrs(url, callback) {
+    fetch(url)
+      .then(response => response.json())
+      .then(json => callback(json));
+  }
+
+  (function ({webcomp, component, eventsTxtArea, attributesTextArea}, params){
+    const attrsPrefix = "-";
+
+    // Init attributes
+    function initAttrs(attrs) {
+      Object.assign(component, attrs);
+      attributesTextArea.value = JSON.stringify(attrs, null, 2);
+    }
+
+    if(params.attrSrc) {
+      loadAttrs(params.attrSrc, initAttrs);
+    } else {
+      const attrs = params.filter(param => param.startsWith(attrsPrefix));
+      initAttrs(params);
+    }
+
+    attributesTextArea.addEventListener("input", function () {
+      Object.assign(component, JSON.parse(attributesTextArea.value));
+    });
+
+    // Add event listeners
+    function handleEvent(propertyName, event) {
+      console.log("Event triggered:", event, $);
+
+      let eventTxt = event.type;
+
+      const eventProp = event.detail[0][propertyName];
+
+      if(eventProp) {
+        eventTxt = `${eventTxt} : ${eventProp}`;
+      }
+
+      eventsTxtArea.value +=  `${eventTxt}\r\n`;
+      eventsTxtArea.scrollTop = eventsTxtArea.scrollHeight;
+    }
+
+    if(params.events) {
+      params.events.split(",").forEach(event => {
+        const [eventName, propertyName] = event.split(":");
+        component.addEventListener(eventName, handleEvent.bind(this, propertyName));
+      });
+    } else {
+      webcomp.classList.add("hide-events");
+    }
+
+  })(
+    createComponent({{ .Get "name" }}, {{ .Inner }}),
+    {{ .Params }}
+  );
+</script>