前言
最近需要为公司内部的presto新增一些UI功能，便学习了一下presto的webUI，记录在此。
介绍
presto的ui界面代码集中在presto-main/src/main/resources/webapp，重点介绍下面的三部分
- *.html: ui页面的基本框架，从中引入大量js(来自dist)
- src: js的源码位置
- dist: node编译之后的文件
因此简单的需求，只需要修改html和node对应的部分即可。
开发示例
Presot的UI界面可以显示最近的查询，但是没有统计个数，我们可以通过添加一行代码来实现这个功能。
ACTIVE WORKERS链接到新的页面也是我为公司开发的新功能，但是涉及到公司内部的信息就不适合分享了。
在presto-main/src/main/resources/webapp/src/components/QueryList.jsx中添加
<span className="input-group-addon filter-addon" style={
{"background-color":"#454A58"}}>{this.state.displayedQueries.length} query</span>
yarn --cwd presto-main/src/main/resources/webapp/src run package根据react代码生成js文件
接下来就启动Presto，再提交SQL试试吧～
本地debug可以参考我的另一篇博客