用HTML5让传统企业应用可视化

传统企业应用常常重视系统的健壮、数据的规范、完整，业务流程实现的灵活。

图形化的部分仅限于对业务数据本身的统计，常常忽视了应用系统本身运维信息的可视化。

 

各应用系统的日志系统通常各行其是，维护工程师、系统运维人员、领导、最终用户面对多个离散的应用系统，必须到每个系统查看自己关注的信息；

这些信息缺乏直观、分层汇总、统一的展示和可交互图表。

 

 

对于拥有自己的信息部门维护其IT设施的企业或机构而言，统一的日志显然更有利于运维：

将各应用或设备的运维信息采集到一个统一的系统，对运维日志进行分析和可视化展示，对运维的实时状态以发布——订阅模式进行分发。

状态以WebSocket推送到关注各类运维信息的用户浏览器，以HTML5提供图形化展示。

 

对传统企业应用可以在以下几方面进行可视化增强：

• IT设施可视化
• 接口调用可视化
• 用户操作日志可视化

 针对IT设施可视化，最终效果类似下图：

 

（这张截图是采用HT for Web 的评估系统搭建的，不得不说HT上手真的非常快，我花了两天时间看手册，用了一天时间搭这个原型，原型以机房->机柜->服务器->实时状态四个层次进行展示，利用HT提供的数据绑定机制，我对约500个实时状态每秒更新两次，在macbook pro上运行流畅）。

通过采集机房环境设备的实时运行状态，并以Web方式予以直观展示。

运维人员可以远程了解：机房温湿度、供电情况、安防情况、

设备的地理分布、设备的工作负荷：包括CPU占用率、磁盘空间、网络流量。

系统引入脚本引擎建立预警规则，对需要人工干预的情况予以显著提醒。

此外、设备监控也可以与企业的资产管理相结合、将设备的型号、出厂日期、使用时长、故障日志纳入管理。

 

 在服务器层次，提供设备的实时工作负荷及历史曲线

历史曲线支持拖拽缩放时间轴、对不同特征状态以不同的颜色标识，可以用HTML5的图表组件实现效果如下：

 

 
 在应用层，通过将系统提供的外部接口调用日志可视化，可以直观了解各应用系统之间的调用关系、调用频度、系统负荷。

采用了自动弹力布局的heatmap图，节点半径与调用频度等比例，通过颜色标识出系统设备的工作负荷。

选中节点，可以引导用户查看应用系统的运行概况。包括：系统名称、工作负荷等。

选中连线，可以引导用户了解系统接口的概况，包括：上线时间（启动日志时间）、调用次数、调用-时间曲线。如下图：

 

 

通过记录用户操作日志、领导查看系统的使用频度，了解哪些系统繁忙。

查看部门-系统使用频度分布，了解不同月份各部门使用系统的频度。

对有价值的系统增加投入，提升系统使用体验。

 

 

将观察角度切换到个人用户，可以通过图表了解本人-各系统的使用分布。

对通过IT应用完成的任务获得直观感受，并可以仿效游戏的积分成就系统，根据个人用户操作日志，以颁发勋章、提升级别等方式予以鼓励。

 

对系统实现的相关组件和模型，按数据流向叙述如下：

• 数据采集：

数据采集应当将引入日志对系统本身的性能影响降至最低，并通过测试给出明确的引入日志对系统本身性能影响的量化指标。

对于非关键日志，可以借鉴NoSQL的妥协，尽量在内存中操作。

在数据访问层面，可以考虑引入log4JDBC类似的代理日志组件；

在设备状态层面：通过操作系统提供的API获得系统负荷相关数据，包括：CPU使用率、磁盘使用率、网络流量等；对于非标准设备或传感器，则通过标准的通信协议，针对报文格式编写相应的适配器进行数据采集；

在应用层：则需要对原有系统的日志模块进行适应性改造，向统一日志上报符合格式要求的数据。

 

• 数据分发

状态数据的生成、修改、删除 生命周期，通过发布——订阅模型，由分布式组件进行增量分发。

在统一运维服务和浏览器之间，可以采用一致的数据模型和订阅模式，

只不过具体负责数据传输的组件由服务之间的mina或JMS替换成了WebSocket。

• 数据展示：

数据绑定技术：AngularJS、ExtJS5、HT for Web；利用数据绑定技术，可以大大简化在数据和状态之间同步维护；

实时状态：canvas、SVG、物理引擎、arbor.js、HT for Web；物理引擎可用于自动布局，简单的展示可采用底图+SVG图元的实现，openlayers也采用了此种思路，对于性能要求较高、拓扑关系较复杂的展示，选用HT for web这类的现成库，无疑会大大节约开发成本。

 

统计类图表：d3.js、ExtJS；HTML5实现的统计图表可选组件非常多，简单的曲线也可以考虑自己用canvas或SVG画。

 

大量的实时状态分发、展示完毕就可以抛弃，但是关键值是必须持久化供后续分析的。

 

• 数据存贮：

工业控制类：实时数据库

数据规模小、分析结果：关系型数据库

数据规模大：NoSQL

 

 

• 数据分析：

采用R语言极其工具包进行非实时的统计分析。

通过脚本引擎，在状态数据之上引入实时的状态联动，比如：报警的条件触发。

 

PPT文件已附