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ページをコンパイルして提供します。

新しいページを追加する

新しいページを追加するには

  1. Prestoコンソールルートディレクトリに新しいHTMLページを追加します。HTMLページ内に、必要なCSSおよびJavaScriptライブラリをvendorディレクトリまたは外部のパブリックCDN URIからインクルードするための<link>タグを追加します。<body>要素内に、作成するUIコンポーネントのプレースホルダーとしてid属性を持つ<div>要素を追加し、その後にwebpackによってdistディレクトリに生成される新しいJavaScriptファイルを指す<script>タグを追加します。query.htmlを例として確認してください。

  2. srcディレクトリの下に新しい.jsxファイルと、webpack.config.jsに対応するエントリを追加します。この.jsxファイルは.jsファイルにコンパイルされ、distディレクトリに保存されます。前の手順で作成したHTMLファイルで使用され、新しいUIコンポーネントのルートコンポーネントとして機能します。src/query.jsxを例として確認してください。

  3. 新しいコンポーネントを追加し、src/componentsディレクトリに保存します。src/components/QueryDetail.jsxを例として確認してください。

  4. Web開発サーバーを使用して、新しいページとコンポーネントをテストおよび検証します。

  5. yarn run flowコマンドを使用して、静的型チェッカーを実行します。

  6. yarn installコマンドを使用して、JavaScriptファイルをdistディレクトリに生成します。