10min系列之二日誌可視化進階

10min系列之二日誌可視化進階（做者原創，同步發佈在github）

本文須要有必定的python和前端基礎，若是沒基礎的，請關注我後續的基礎教程系列博客
本文全部的demo，都是瀏覽器下展現的

原創文章，本文同步發佈在github,跪求github右上角star

基於python，前端基於echarts,力求用簡單的代碼說明原理

提綱

• access日誌按照什麼維度展現數據
• 和web結合，更好的體驗，只需記住URL
• 分頁排序和搜索，表格展現體驗的提高
• 一圖勝萬言，彙總信息更友好的展現
• 逼格滿滿，讓IP信息在地圖上展現
• 後續展望--機房網絡流量可視化，機器、機櫃、機房3D展現
• 但願能給你們帶來一些處理log的思路

背景

老闆要看日誌數據彙總

• 本文重點：如何作可視化
• 目標：如何用友好的方式去展示沉悶繁冗的數據
• 下個月就發年終獎！！！
• 爲了說明可視化的方式，用一個簡單的log舉例子

## 原材料

• 一個標準的access_log日誌 大概2W行
• 老闆想要這個日誌的分析結果，每一個url,ip,status分別訪問多少次，把前幾名統計出來看看
• 分析出統計數據 展示結果

很普通的日誌，大概長這樣

爲了方便展現，切割了一下，大概2W行

61.159.140.123 - - [23/Aug/2014:00:01:42 +0800] "GET /favicon.ico HTTP/1.1" 404 \ "-" "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36 LBBROWSER" "-"
61.159.140.123 - - [23/Aug/2014:00:01:42 +0800] "GET /favicon.ico HTTP/1.1" 404 \ "-" "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36 LBBROWSER" "-"
61.159.140.123 - - [23/Aug/2014:00:01:42 +0800] "GET /favicon.ico HTTP/1.1" 404 \ "-" "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36 LBBROWSER" "-"
61.159.140.123 - - [23/Aug/2014:00:01:42 +0800] "GET /favicon.ico HTTP/1.1" 404 \ "-" "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36 LBBROWSER" "-"
66.249.64.5 - - [23/Aug/2014:00:02:16 +0800] "GET /data/uploads/2013/0519/09/small_51982ba18e012.jpg HTTP/1.1" 200 \ "-" "Googlebot-Image/1.0" "-"
66.249.64.10 - - [23/Aug/2014:00:02:54 +0800] "GET /data/uploads/2013/0319/08/middle_5147b116e93b4.jpg HTTP/1.1" 200 \ "-" "Googlebot-Image/1.0" "-"

目標

• 初級展示
• 友好交互
• 餅圖彙總
• 更進一步
• 後續展望

## 級別1

• 數據處理，命令行展示
• 打開文件，處理完數據後排序
• 打印前10

talk is cheap, show me the money code!

# coding=utf-8
f = open('www_access_20140823.log')
res = {}
for l in f:
    arr = l.split(' ')
    # 獲取ip url 和status
    ip = arr[0]
    url = arr[6]
    status = arr[8]
    # ip url 和status當key，每次統計+1
    res[(ip,url,status)] = res.get((ip,url,status),0)+1
# 生成一個臨時的list
res_list = [(k[0],k[1],k[2],v) for k,v in res.items()]
# 按照統計數量排序，打印前10
for k in sorted(res_list,key=lambda x:x[3],reverse=True)[:10]:
    print k

處理結果

('222.86.153.12', '/images/cursor_minify.cur', '404', 60)
('222.86.153.12', '/images/cursor_zoom.cur', '404', 32)
('58.253.6.133', '/images/cursor_minify.cur', '404', 32)
('111.85.34.165', '/%3Ca%20href=', '404', 28)
('58.253.6.133', '/images/cursor_zoom.cur', '404', 27)
('218.29.111.117', '/images/cursor_zoom.cur', '404', 27)
('218.29.111.117', '/images/cursor_minify.cur', '404', 26)
('117.63.146.40', '/public/js/common.js?20110824', '200', 19)
('117.63.146.40', '/favicon.ico', '404', 18)
('117.63.146.40', '/public/js/weibo.js?20110824', '200', 16)

任務完成

• 下一步粘到郵件裏，或者生成一個csv文件發出去
• 然而這是一個看臉的社會,運維也逃脫不了這個魔咒

級別2

瀏覽器端展示

生成list以後，拼接sql，存入數據庫

talk is cheap, show me the money code!

import MySQLdb as mysql
con = mysql.connect(user='root',\
                    passwd='',\
                    db='log',\
                    host='localhost')
con.autocommit(True)
cur = con.cursor()
# 處理文件省略
for s in res_list:
    sql = 'insert log values ("%s","%s",%s,%s)' % s
    try:
        # 入庫
        cur.execute(sql)
    except Exception, e:
        pass

前端展示

讀庫 展示頁面

talk is cheap, show me the money code!

from flask import Flask,request,render_template
app = Flask(__name__)
import MySQLdb as mysql
con = mysql.connect(user='xx',\
                    passwd='xx',\
                    db='xx')
cur = con.cursor()
@app.route('/')
def index():
    table = '<table border="1">'
    cur.execute('select * from log order by value desc limit 20; ')
    for c in cur.fetchall():
        table += '<tr><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>'%c
    table +='</table>'
    return table

if __name__ == '__main__':
    app.run(host='0.0.0.0',port=9092)

給老闆一個url便可，老闆想看隨時能看

可是老闆表示有點醜

完整的思路

前端展示上作一些優化

• 分頁
• 表格排序
• 搜索
• 控制每頁顯示數量
• 數據多了以後，前端交互和後端數據的接口配合

不動戳大

咱們的console頁面，提供幾個彙總信息，那就更好啦

好比根據http的status來個彙總

難不倒我

一句sql搞定

select status,sum(value) from log group by status
+--------+------------+
| status | sum(value) |
+--------+------------+
|    200 |      15529 |
|    206 |          6 |
|    301 |          2 |
|    304 |       3549 |
|    403 |          1 |
|    404 |        847 |
+--------+------------+
6 rows in set (0.02 sec)

彙總信息可視化

根據https狀態彙總

其餘功能

• 圖例開關
• 圖表轉換
• 數據視圖
• 直接導出圖片

可視化並不只限於此

上面只是舉得小栗子

若是你對時間更感興趣，咱們的log裏也是有時間信息的,能夠像下面這樣

統計量，時間軸拖動，保存圖片，etc

更進一步

如何讓日誌數據更加一目瞭然，讓老闆以爲你頗有逼格呢

IP都是有地址位置的，定位每一個ip的位置，畫個地圖出來彙總

經緯度座標系統

• 地球座標(WGS84)
  • 國際標準，從 GPS 設備中取出的數據的座標系
  • 國際地圖提供商使用的座標系
• 火星座標(GCJ-02)
  • 中國標準，從國行移動設備中定位獲取的座標數據使用這個座標系
• 百度座標(BD-09)
  • 百度標準，百度 SDK，百度地圖，Geocoding 使用

應用場景

• WGS84座標系：
  • 國際標準，谷歌國外地圖、osm地圖等國外的地圖通常都是這個
• 火星座標系：
  • iOS 地圖
  • Gogole地圖
  • 搜搜、阿里雲、高德地圖
• 百度座標系：
  • 固然只有百度地圖

地圖是須要經緯度的，用第三方的ip庫轉換一下

http://developer.baidu.com/map/index.php?title=webapi/ip-api

talk is cheap, show me the money code!

import urllib2
import json
key = 'q5mTrTGzCSVq5QmGpI9y18Bo'
ipurl = 'http://api.map.baidu.com/location/ip?ak='+key+'&coor=bd09ll&ip='
sqlarr = []
def getGeo(ip):
    try:
        u = urllib2.urlopen(ipurl+ip)
        page = json.load(u)
        if 'content' in page:
            point = page['content'].get('point')
            print 'ip %s has geoX %s and geoY %s' % (ip,point['x'],point['y']) 
    except:
        print 'error'
getGeo('202.198.16.3')
# ip 202.198.16.3 has geoX 125.31364243 and geoY 43.89833761

就想玩網遊時候，座標能夠定位一我的，經緯度能夠再地圖上定位一個點，畫圖展示

剛纔那個圖僅關注區域，進階一下，還要關注訪問量

能夠根據value篩選

進階:多臺機器的日誌

• 獲取每一個機器的hostname和ip，和日誌數據一塊兒存在數據庫裏
• 一個表存日誌，帶上一個機器的id
• 機器的id=>ip和經緯度
• 最終統計訪問量

後續擴展

• 日誌數據
• 前端展示場景

怎麼實踐

• 此次分享的主題關注與可視化
• 咱們用了一個很小的靜態日誌，目的是說明可視化的思路
• 實際工做中日誌數據應該怎麼處理

elk

Logstash+ElasticSearch+Kibana4

• logstash
  • 日誌進行收集、分析，並將其存儲供使用
• ElasticSearch
  • 開源分佈式搜索引擎，
• Kibana4
  • 日誌分析友好的 Web 界面
• 其餘
  • Kafka scribe等

常見日誌處理架構

• ELK
• logstash+Hadoop
• scribe+hadoop
• 線上數據->Flume->Kafka->Hdfs->Map/Reduce
• 線上數據->flume->kafka->storm
• 在上面的基礎上定製化二次開發，好比MR平臺上寫代碼，咱們的代碼就能夠直接拿來用
• 日誌的數據處理架構詳情，請見下回分解

前端展示場景

• 展示逼格更高一些，數據同樣，效果更好
• 運維人員權限樹
• 流量圖
• 年終數據統計
• 區域點擊統計圖
• 3D機房

你們具體須要哪一個，能夠繼續擴展,給你們展示幾個假數據的demo

高逼格餅圖展現狀態彙總（假數據，能夠替換爲http_status）

人員權限樹(假數據,能夠做爲運維人員權限展現)

流量圖(假數據，能夠做爲機房之間，或者網卡的流量)

日誌統計彙總（假數據，能夠用來展現年日誌數據彙總）

區域數據彙總餅圖展現（假數據，可選擇省份，生成餅圖）

3D展現機房（網上盜圖，後續會作一個相似的開源）

json生成，實時查看機器狀態，點擊時間

3D展現不止於此 有圖有XX

謝謝！

原創文章，本文同步發佈在github 繼續求star