10min手写(二):日志展示系统

本文原载于:日志可视化的进阶

本文需要有一定的 Python和前端基础,如果没基础的,请关注我后续的基础教程系列博客
本文所有的demo,都是浏览器下展示的

基情授权,非授权拒绝任何形式的转载

基于 Python,前端基于echarts,力求用简单的代码说明原理

提纲

  • access日志按照什么维度展示数据
  • 和web结合,更好的体验,只需记住URL
  • 分页排序和搜索,表格展示体验的提升
  • 一图胜万言,汇总信息更友好的展示
  • 逼格满满,让IP信息在地图上展示
  • 后续展望–机房网络流量可视化,机器、机柜、机房3D展示

背景

老板要看日志数据汇总

  • 本文重点:如何做可视化
  • 目标:如何用友好的方式去展现沉闷繁冗的数据
  • 下个月就发年终奖!!!
  • 为了说明可视化的方式,用一个简单的log举例子

原材料

  • 一个标准的access_log日志 大概2W行
  • 老板想要这个日志的分析结果,每个url,ip,status分别访问多少次,把前几名统计出来看看
  • 分析出统计数据 展现结果

很普通的日志,大概长这样

为了方便展示,切割了一下,大概2W行

目标

  • 初级展现
  • 友好交互
  • 饼图汇总
  • 更进一步
  • 后续展望

级别1

  • 数据处理,命令行展现
  • 打开文件,处理完数据后排序
  • 打印前10

talk is cheap, show me the code!

处理结果

任务完成

  • 下一步粘到邮件里,或者生成一个csv文件发出去
  • 然而这是一个看脸的社会,运维也逃脱不了这个魔咒

级别2

浏览器端展现

生成list之后,拼接SQL,存入数据库

talk is cheap, show me the code!

前端展现

读库 展现页面

talk is cheap, show me the money!

给老板一个url即可,老板想看随时能看

1

但是老板表示有点丑

2

完整的思路

3

前端展现上做一些优化

  • 分页
  • 表格排序
  • 搜索
  • 控制每页显示数量
  • 数据多了之后,前端交互和后端数据的接口配合

我们的console页面,提供几个汇总信息,那就更好啦,比如根据http的status来个汇总,难不倒我,一句SQL搞定

汇总信息可视化

根据https状态汇总

4

其他功能

  • 图例开关
  • 图表转换
  • 数据视图
  • 直接导出图片

可视化并不仅限于此,上面只是举得小栗子
如果你对时间更感兴趣,我们的log里也是有时间信息的,可以像下面这样

统计量,时间轴拖动,保存图片,etc

如何让日志数据更加一目了然,让老板觉得你很有逼格呢

IP都是有地址位置的,定位每个ip的位置,画个地图出来汇总

经纬度坐标系统

  • 地球坐标(WGS84)
    • 国际标准,从 GPS 设备中取出的数据的坐标系
    • 国际地图提供商使用的坐标系
  • 火星坐标(GCJ-02)
    • 中国标准,从国行移动设备中定位获取的坐标数据使用这个坐标系
  • 百度坐标(BD-09)
    • 百度标准,百度 SDK,百度地图,Geocoding 使用

应用场景

  • WGS84坐标系:
    • 国际标准,谷歌国外地图、osm地图等国外的地图一般都是这个
  • 火星坐标系:
    • iOS 地图
    • Gogole地图
    • 搜搜、阿里云、高德地图
  • 百度坐标系:
    • 当然只有百度地图

地图是需要经纬度的,用第三方的ip库转换一下

webapi/ip-api

5

talk is cheap, show me the code!

就想玩网游时候,坐标可以定位一个人,经纬度可以再地图上定位一个点,画图展现

6

刚才那个图仅关注区域,进阶一下,还要关注访问量

可以根据value筛选

7

进阶:多台机器的日志

  • 获取每个机器的hostname和ip,和日志数据一起存在数据库里
  • 一个表存日志,带上一个机器的id
  • 机器的id=>ip和经纬度
  • 最终统计访问量

8

后续扩展

  • 日志数据
  • 前端展现场景

怎么实践

  • 这次分享的主题关注与可视化
  • 我们用了一个很小的静态日志,目的是说明可视化的思路
  • 实际工作中日志数据应该怎么处理

ELK == Logstash + ElasticSearch + Kibana4

9

  • Logstash
    • 日志进行收集、分析,并将其存储供使用
  • ElasticSearch
    • 开源分布式搜索引擎,
  • Kibana4
    • 日志分析友好的 Web 界面
  • 其他
    • Kafka scribe等

常见日志处理架构

  • ELK
  • logstash+Hadoop
  • scribe+hadoop
  • 线上数据->Flume->Kafka->Hdfs->Map/Reduce
  • 线上数据->flume->kafka->storm
  • 在上面的基础上定制化二次开发,比如MR平台上写代码,我们的代码就可以直接拿来用
  • 日志的数据处理架构详情,请见下回分解

知乎不资瓷GIF,移步这里:日志可视化的进阶

7008c662deb255e4403640e068f6fd02_r

文章分类 Reboot分享, 前端, 技术博客

发表评论

电子邮件地址不会被公开。

在线交流

数百位业内高手和同行在等你交流
Reboot运维开发分享