Presto 控制台¶

Presto 带有一个内置仪表板，您可以在其中查看集群信息，例如正在运行的 SQL 查询、查询详细信息和资源组信息。Presto 控制台包含一系列 HTML 页面和 JavaScript 文件，它们调用由协调器提供的 Presto API。UI 组件使用 React JS 编写，并由 webpack 构建。以下是 Presto 控制台开发的指导原则。

代码¶

Presto 控制台代码位于 Presto 源代码树根目录下的 presto-ui/src 目录中。本文件中将其称为 Presto Console root，它包含

HTML 文件：Presto 控制台的静态页面。
src/static 文件夹：包含静态资源，例如 Presto 收藏夹、徽标和 Presto CSS 文件。
src/static/dev 目录：包含 Query Viewer 页面及其 JS 文件。
src/static/vendor 目录：包含 UI 组件使用的第三方 JS/CSS 库。
src/ 目录：包含 UI 组件和 webpack 配置文件。

先决条件¶

yarn：Node.js 项目的包管理器。Yarn 用于管理 UI 组件使用的包以及编译和生成 JavaScript 文件的脚本。

UI 组件¶

所有 UI 组件都位于 Presto Console root 目录下的 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 协调器 + 工作器。
运行 yarn serve 以在 src 目录上启动 Web 开发服务器。默认情况下，它将 API 调用代理到 localhost:8080。如果您的 Presto 服务器正在监听不同的 IP 地址或端口，您可以通过添加 --env=apiHost=<IP address> 和 --env=apiPort=<port number> 参数到 yarn 命令来指定 IP 地址和端口号。注意输出消息，并查找类似于 [webpack-dev-server] Loopback: https://127.0.0.1:8081/ 的消息。它告诉您在哪里访问 Web 开发服务器。

Web 开发服务器监视 webpack.config.js 中列出的条目，编译并提供 Presto Console root 目录中的 HTML 页面。

添加新页面¶

要添加新页面

在 Presto Console root 目录中添加一个新的 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 命令将 JavaScript 文件生成到 dist 目录。