Presto 控制台¶

Presto 內建儀表板，您可以在其中查看叢集資訊，例如執行中的 SQL 查詢、查詢詳細資訊和資源群組資訊。Presto 控制台包含一系列 HTML 頁面和 JavaScript 檔案，這些檔案會呼叫協調器提供的 Presto API。UI 元件是以 React JS 編寫，並由 webpack 建置。以下是 Presto 控制台開發的指南。

程式碼¶

Presto 控制台程式碼位於 Presto 原始程式碼樹根目錄中的 presto-ui/src 目錄中。此目錄在本文件中稱為 Presto 控制台根目錄，並包含

HTML 檔案：Presto 控制台的靜態頁面。
src/static 資料夾：包含靜態資產，例如 Presto favicon、標誌和 Presto CSS 檔案。
src/static/dev 目錄：包含 查詢檢視器 頁面及其 JS 檔案。
src/static/vendor 目錄：包含 UI 元件使用的第三方 JS/CSS 程式庫。
src/ 目錄：包含 UI 元件和 webpack 設定檔。

先決條件¶

yarn：Node.js 專案的套件管理器。Yarn 用於管理 UI 元件使用的套件，以及編譯和產生 JavaScript 檔案的指令碼。

UI 元件¶

所有 UI 元件都位於 Presto 控制台根目錄 下的 src 資料夾中。這些元件是使用 React JS 以 JSX 編寫，並以 .jsx 檔案副檔名命名。

請遵循這些規則來組成 UI 元件

將元件定義為 JavaScript 函數而不是類別：一些舊元件是以類別編寫，必須重構為函數。對於新的元件，請使用函數元件。如需詳細資訊，請查看定義元件。
Bootstrap：目前的程式碼基底使用 Bootstrap v3.3.5。您可以在 Bootstrap 入門中找到它提供的 CSS 和元件。
使用 flow 作為靜態類型檢查器：在 .jsx 檔案的開頭新增 //@flow 以啟用類型檢查器，並使用 yarn run flow 來執行 flow 檢查器。

Web 開發伺服器¶

為了加速 UI 開發，請使用 webpack 提供的 web 開發伺服器來驗證您正在處理的新 UI 元件或更新。

首先，您需要一個 Presto 伺服器，該伺服器會提供 Presto 控制台所需的所有 API 呼叫。例如，您可以在本機執行 Presto 協調器 + worker。
執行 yarn serve 以在 src 目錄上啟動 web 開發伺服器。預設情況下，它會將 API 呼叫代理至 localhost:8080。如果您的 Presto 伺服器正在不同的 IP 位址或連接埠上接聽，您可以使用在 yarn 命令中新增 --env=apiHost=<IP 位址> 和 --env=apiPort=<連接埠號碼> 引數來指定 IP 位址和連接埠號碼。請注意輸出訊息，並尋找類似 [webpack-dev-server] Loopback: https://127.0.0.1:8081/ 的訊息。它會告訴您在哪裡存取 web 開發伺服器。

web 開發伺服器會監看 webpack.config.js 中列出的項目、編譯並提供 Presto 控制台根目錄 目錄中的 HTML 頁面。

新增頁面¶

若要新增頁面

在 Presto 控制台根目錄 目錄中新增 HTML 頁面。在 HTML 頁面內，新增必要的 <link> 標籤，以包含來自 vendor 目錄或外部公用 CDN URI 的必要 CSS 和 JavaScript 程式庫。在 <body> 元素內，新增一個 <div> 元素，其 id 屬性作為您要建立的 UI 元件的預留位置，後接一個 <script> 標籤，以指向 webpack 將在 dist 目錄中產生的新 JavaScript 檔案。請查看 query.html 作為範例。
在 src 目錄下新增 .jsx 檔案，並在 webpack.config.js 中新增對應的項目。此 .jsx 檔案會編譯為 .js 檔案，並儲存在 dist 目錄下。它會由您在上一步建立的 HTML 檔案使用，並作為新 UI 元件的根元件。請查看 src/query.jsx 作為範例。
新增元件並將其儲存在 src/components 目錄中。請查看 src/components/QueryDetail.jsx 作為範例。
使用 web 開發伺服器來測試和驗證新的頁面和元件。
使用 yarn run flow 命令來執行靜態類型檢查器。
使用 yarn install 命令來產生 dist 目錄的 JavaScript 檔案。