本节书摘来华章计算机《Storm实时数据处理》一书中的第2章 ，第2.8节，（澳）Quinton Anderson 著 卢誉声 译更多章节内容可以访问云栖社区“华章计算机”公众号查看。
2.8 创建日志分析面板
日志分析面板是一个通过图形的方式向用户展示统计信息的Web应用程序。在实现它之前，我们需要先了解一下用户界面设计原则。
- 区分焦点：只显示必要的内容，根据用户试图得到的东西来创建焦点，而不是让用户因无关内容而分心。
- 极简主义：从可用性角度考虑，只需要包含必要的图形特性。
- 响应式处理：这是一种确保显示内容清晰和一致的方法，无论是在PC上还是在平板电脑上进行查看。
- 基于标准：你不应该使用非标准的技术进行开发，因为这有可能会妨碍在诸如iPad这样的设备上正常访问我们的程序。
本例中的面板会显示每个日志文件每分钟的日志体积动态图。图2-4展示了相关的视图输出。
图2-5展示了详细的监视输出。
2.8.1 实战
Step01 新建一个名为log-web的项目，使用标准Maven archetype命令来构建我们的项目：
该命令会为你生成标准的项目目录结构和Maven POM文件。
Step02 打开pom.xml文件，删除一些默认的依赖项，再添加以下依赖项：
Step03 然后在POM中的build区域增加以下构建插件：
Step04 通过mvn eclipse:eclipse命令和Eclipse项目导入功能把项目文件导入Eclipse。
Step05 我们会使用优秀的Twitter Bootstrap GUI库来创建用户界面。首先将这个库下载到你的独立磁盘分区下，然后将其解压缩。
Step06 Bootstrap提供了许多实例，这有助于我们快速掌握其基本要领。我们先简单复制一份示例，然后再修改它：
对于开发任何基于Web图形用户界面的程序来说，Twitter Bootstrap都是一个非常好的选择。强烈建议你读一读刚才下载的压缩包中的文档，它可能会给你带来很大的帮助。
Step07 有不少HTML都需要修改，我们先把重点放在几项关键内容上面：核心展示内容和图形。先更新index.html文件，用以下代码替换现有的
Step08 对于图形来说，我们准备使用一款优秀的数据可视化库—D3（http://d3js.org/），以及一些基于D3预先定义好的模型—NVD3（http://nvd3.org/），将这些已经编译好的JavaScript文件添加到我们的Web应用程序的assets目录中：
Step09 然后在HTML文件中包含这些JavaScript文件，并编写用于获取数据和更新图形的客户端Javascript代码。
Step10 在HTML文件末尾的
Step11 在html头部增加CSS样式表文件：
Step12 然后在其他导入脚本的代码之后，靠近文件末尾的位置，将以下自定义JavaScript代码添加到标签中：
Step13 添加获取服务器数据的代码：
Step14 至此，客户端的实现大功告成。为了让客户层能够访问到这些数据，我们还需要为其提供获取数据的服务。
Step15 首先，在storm.cookbook.services.resources包中创建一个工具类CassandraUtils，并添加以下内容：
Step16 在同一包中创建LogCount类，用于提供RESTful查询服务：
Step17 最后，通过创建LogServices类来提供相关数据服务：
Step18 配置web.xml文件：
Step19 这时就可以运行你的工程了，在web-log项目根目录下执行如下命令：
然后通过localhost:8080访问你的日志分析面板。
2.8.2 解析
在上层实现中，面板会根据指定时间周期性地查询服务器。为了能够保存查询结果，它会在客户端维持一个内存中的结构，并将二维数组转换成图形类。我们来看一下HTML，以下代码定义了图形显示的位置：
通过以下代码定义图表：
内存结构其实是一个简单的数值型二维数组，所以我们能够通过以下方法把这些值映射到图形中的x和y轴：
数据是通过fetch()方法来获取的，该方法通过Ajax异步请求将数据发送给服务器。当客户端接收到响应后，通过onDataReceived(series)回调，把相应结果添加到内存结构中。最后，getdata()方法负责将日志结构映射成对应图形的二维数组。
在服务器端，通过Jersey来提供服务。它是一个开源且符合JSR311标准的产品，用于构建RESTful Web服务。在Jersey 中，服务通常是通过注解来定义的。本例只需在LogCount类中定义一种服务，通过以下注解来实现：
定义好后，这项服务就可以通过localhost:8080/services/LogCount/TotalForMinutes/[timestamp]来访问了。我们把传递给timestamp变量的值作为查询条件，来执行Cassandra查询。最终的查询结果会被映射到JSON对象上，然后将其返回给调用者：
通常来讲，我们不会调用整个Topology和集群，这是为了确保测试Web应用程序的简单性。在支持材料中提到了一个实用的main类，它可以使用随机数据来填充列族，这样就可以对Web应用程序进行简单独立的测试了。