《Storm实时数据处理》一2.8 创建日志分析面板-阿里云开发者社区

开发者社区> 华章计算机> 正文

《Storm实时数据处理》一2.8 创建日志分析面板

简介:
+关注继续查看

本节书摘来华章计算机《Storm实时数据处理》一书中的第2章 ,第2.8节,(澳)Quinton Anderson 著 卢誉声 译更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.8 创建日志分析面板

日志分析面板是一个通过图形的方式向用户展示统计信息的Web应用程序。在实现它之前,我们需要先了解一下用户界面设计原则。

  • 区分焦点:只显示必要的内容,根据用户试图得到的东西来创建焦点,而不是让用户因无关内容而分心。
  • 极简主义:从可用性角度考虑,只需要包含必要的图形特性。
  • 响应式处理:这是一种确保显示内容清晰和一致的方法,无论是在PC上还是在平板电脑上进行查看。
  • 基于标准:你不应该使用非标准的技术进行开发,因为这有可能会妨碍在诸如iPad这样的设备上正常访问我们的程序。

本例中的面板会显示每个日志文件每分钟的日志体积动态图。图2-4展示了相关的视图输出。

image

图2-5展示了详细的监视输出。

image

2.8.1 实战

Step01 新建一个名为log-web的项目,使用标准Maven archetype命令来构建我们的项目:
image

该命令会为你生成标准的项目目录结构和Maven POM文件。
Step02 打开pom.xml文件,删除一些默认的依赖项,再添加以下依赖项:
image
image

Step03 然后在POM中的build区域增加以下构建插件:
image
image

Step04 通过mvn eclipse:eclipse命令和Eclipse项目导入功能把项目文件导入Eclipse。
Step05 我们会使用优秀的Twitter Bootstrap GUI库来创建用户界面。首先将这个库下载到你的独立磁盘分区下,然后将其解压缩。
image

Step06 Bootstrap提供了许多实例,这有助于我们快速掌握其基本要领。我们先简单复制一份示例,然后再修改它:
image

对于开发任何基于Web图形用户界面的程序来说,Twitter Bootstrap都是一个非常好的选择。强烈建议你读一读刚才下载的压缩包中的文档,它可能会给你带来很大的帮助。
Step07 有不少HTML都需要修改,我们先把重点放在几项关键内容上面:核心展示内容和图形。先更新index.html文件,用以下代码替换现有的

标签和内容:

image

Step08 对于图形来说,我们准备使用一款优秀的数据可视化库—D3(http://d3js.org/),以及一些基于D3预先定义好的模型—NVD3(http://nvd3.org/),将这些已经编译好的JavaScript文件添加到我们的Web应用程序的assets目录中:
image

Step09 然后在HTML文件中包含这些JavaScript文件,并编写用于获取数据和更新图形的客户端Javascript代码。
Step10 在HTML文件末尾的

Step11 在html头部增加CSS样式表文件:
image

Step12 然后在其他导入脚本的代码之后,靠近文件末尾的位置,将以下自定义JavaScript代码添加到标签中:
image
image

Step13 添加获取服务器数据的代码:
image
image
image
image

Step14 至此,客户端的实现大功告成。为了让客户层能够访问到这些数据,我们还需要为其提供获取数据的服务。
Step15 首先,在storm.cookbook.services.resources包中创建一个工具类CassandraUtils,并添加以下内容:
image
image

Step16 在同一包中创建LogCount类,用于提供RESTful查询服务:
image

Step17 最后,通过创建LogServices类来提供相关数据服务:
image

Step18 配置web.xml文件:
image

Step19 这时就可以运行你的工程了,在web-log项目根目录下执行如下命令:
image

然后通过localhost:8080访问你的日志分析面板。

2.8.2 解析

在上层实现中,面板会根据指定时间周期性地查询服务器。为了能够保存查询结果,它会在客户端维持一个内存中的结构,并将二维数组转换成图形类。我们来看一下HTML,以下代码定义了图形显示的位置:
image

通过以下代码定义图表:
image

内存结构其实是一个简单的数值型二维数组,所以我们能够通过以下方法把这些值映射到图形中的x和y轴:
image

数据是通过fetch()方法来获取的,该方法通过Ajax异步请求将数据发送给服务器。当客户端接收到响应后,通过onDataReceived(series)回调,把相应结果添加到内存结构中。最后,getdata()方法负责将日志结构映射成对应图形的二维数组。
在服务器端,通过Jersey来提供服务。它是一个开源且符合JSR311标准的产品,用于构建RESTful Web服务。在Jersey 中,服务通常是通过注解来定义的。本例只需在LogCount类中定义一种服务,通过以下注解来实现:
image

定义好后,这项服务就可以通过localhost:8080/services/LogCount/TotalForMinutes/[timestamp]来访问了。我们把传递给timestamp变量的值作为查询条件,来执行Cassandra查询。最终的查询结果会被映射到JSON对象上,然后将其返回给调用者:
image

通常来讲,我们不会调用整个Topology和集群,这是为了确保测试Web应用程序的简单性。在支持材料中提到了一个实用的main类,它可以使用随机数据来填充列族,这样就可以对Web应用程序进行简单独立的测试了。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Spring Boot Admin,贼好使!(8)
Spring Boot Admin,贼好使!(8)
22 0
1.3w字,一文详解死锁!(6)
1.3w字,一文详解死锁!(6)
6 0
死锁的 4 种排查工具 !(6)
死锁的 4 种排查工具 !(6)
8 0
Spring Boot Admin,贼好使!(5)
Spring Boot Admin,贼好使!(5)
33 0
死锁的 4 种排查工具 !(3)
死锁的 4 种排查工具 !(3)
5 0
MQTT知识大全【科普贴】
MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于客户端与服务器之间发布/订阅(publish/subscribe)模式的"轻量级"通讯协议。为了保证通讯的安全性和可靠性,该协议基于TCP/IP协议构建。由IBM在1999年发布,最初被用于石油管道传感器与卫星的通讯连接,2014年,它正式成为一个OASIS开放标准并得到了大量开源语言的支持。
9 0
Spring Boot Admin,贼好使!(3)
Spring Boot Admin,贼好使!(3)
27 0
Spring Boot Admin,贼好使!(4)
Spring Boot Admin,贼好使!(4)
27 0
前后端分离 -- 深入浅出 Spring Boot + Vue 实现工程项目进度管理系统 Vue不过如此~
前后端分离 -- 深入浅出 Spring Boot + Vue 实现工程项目进度管理系统 Vue不过如此~
9 0
1.3w字,一文详解死锁!(4)
1.3w字,一文详解死锁!(4)
4 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载