Prestoコンソール¶
Prestoには、実行中のSQLクエリ、クエリ詳細、リソースグループ情報など、クラスタの情報を確認できる組み込みダッシュボードが付属しています。Prestoコンソールは、コーディネーターによって提供されるPresto APIを呼び出す一連のHTMLページとJavaScriptファイルで構成されています。UIコンポーネントはReact JSで記述され、webpackによってビルドされます。Prestoコンソールの開発に関するガイダンスを以下に示します。
コード¶
Prestoコンソールのコードは、Prestoソースツリーのルートにあるpresto-ui/src
ディレクトリにあります。このディレクトリは、このドキュメントではPrestoコンソールルート
と呼ばれ、以下を含みます。
HTMLファイル:Prestoコンソールの静的ページ。
src/static
フォルダ:Prestoファビコン、ロゴ、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を使用しています。提供されているCSSとコンポーネントは、Bootstrap Getting Startedにあります。
flowを静的型チェッカーとして使用する:
.jsx
ファイルの先頭に//@flow
を追加して型チェッカーを有効にし、yarn run flow
を使用してflowチェッカーを実行します。
Web開発サーバー¶
UI開発を高速化するために、webpackが提供するWeb開発サーバーを使用して、新しいUIコンポーネントまたは作業中の更新を確認します。
まず、Prestoコンソールに必要なすべてのAPI呼び出しを提供するPrestoサーバーが必要です。たとえば、Prestoコーディネーター+ワーカーをローカルで実行できます。
yarn serve
を実行して、src
ディレクトリにWeb開発サーバーを起動します。デフォルトでは、API呼び出しをlocalhost:8080
にプロキシします。Prestoサーバーが異なるIPアドレスまたはポートでリッスンしている場合は、yarnコマンドに--env=apiHost=<IPアドレス>
および--env=apiPort=<ポート番号>
引数を追加することで、IPアドレスとポート番号を指定できます。出力メッセージに注意し、[webpack-dev-server] Loopback: http://localhost:8081/
のようなメッセージを探します。これは、Web開発サーバーにアクセスする場所を示しています。
Web開発サーバーは、webpack.config.js
にリストされているエントリを監視し、Prestoコンソールルート
ディレクトリにあるHTMLページをコンパイルして提供します。
新しいページを追加する¶
新しいページを追加するには
Prestoコンソールルート
ディレクトリに新しいHTMLページを追加します。HTMLページ内に、必要なCSSおよびJavaScriptライブラリをvendor
ディレクトリまたは外部のパブリックCDN URIからインクルードするための<link>
タグを追加します。<body>
要素内に、作成するUIコンポーネントのプレースホルダーとしてid
属性を持つ<div>
要素を追加し、その後にwebpackによってdist
ディレクトリに生成される新しいJavaScriptファイルを指す<script>
タグを追加します。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
コマンドを使用して、JavaScriptファイルをdist
ディレクトリに生成します。