Vizceral小白入門

接到一個任務，要求將N個program可視化，能一目瞭然查看當前爬蟲狀態。記得以前作測試時，一個queue service前端可視化效果不錯，經詢問是用vizceral開源框架寫的。網上一查，Vizceral的博文較少，只能參考官方文檔，對於英文很差的我，着實費勁。現將踩坑總結以下。

Vizceral簡介
github地址：https://github.com/Netflix/vizceral
wiki地址：https://github.com/Netflix/vizceral/wiki
奈飛的Vizceral開源框架，用於近乎實時地監控應用程序和集羣之間的網絡流量。

Vizceral是一個可視化組件，用於顯示節點之間的數據流動。這些節點和鏈接將使用每一個鏈接的流量指標進行呈現，爲便於理解，參考下面的配置。

source: "Program1",
target: "MongoDB"
connections: [
{
"metrics": {
"danger": 116.524,
"normal": 15598.906
},
class: "normal",
}]
上述配置是節點Program1向節點MongoDB的鏈接，效果圖：

從上述例子能夠看出，Vizceral實際上只是JSON數據結構的呈現器，根據JSON結構，在節點和鏈接上運行佈局算法，並在屏幕上顯示圖形。

git clone git@github.com:Netflix/vizceral-example.git
cd vizceral-example
npm install
npm run dev

瀏覽器打開localhost:8080便可看到效果。
樣例中給出了幾種配置文件，src/sample_data.json sample_data_region_only.json sample_data_with_shapes_and_notices.json.
若是想查看其它配置文件的展現效果，修改src/components/trafficFlow.jsx

樣例的json配置文件比較大，查看起來比較不方便。結合本人的使用場景，將經常使用的配置及官方配置沒有說明的，詳細介紹一下。

配置說明
官方配置說明，請參考：https://github.com/Netflix/vizceral/wiki/How-to-Use
官方只給出了部分配置說明，下面介紹一些常常使用且實用的配置：

{
"renderer": "region",
"name": "DEMO",
"maxVolume": 50000,
"class": "normal",
"updated": 1466838546805,
"nodes": [
{
"name": "Program1",
"renderer": "focusedChild",
"class": "normal"
},
{
"name": "Program2",
"renderer": "focusedChild",
"class": "normal"
},
{
"name": "INTERNET",
"renderer": "focusedChild",
"node_type":"storage",
"class": "normal"
}
],
"connections": [
{
"source": "INTERNET",
"target": "Program1",
"metrics": {
"danger": 116.524,
"normal": 15598.906
},
"class": "normal"
},{
"source": "INTERNET",
"target": "Program2",
"metrics": {
"danger": 76.524,
"normal": 1598.906
},
"class": "normal"
}
]
}

renderer：取值有兩種global,region,focusedChild，
global：全局樣式主要用於展現總體數據，樣式以下圖。圖片中TOTAL PRS爲數據總和，ERROR RATE爲錯誤率，RPS爲自節點數據佔用比例
region：區域樣式主要用於展現區域節點們的狀態，若是節點有須要展現的connections，須要選擇region樣式，樣式以下圖
focusedChild: 主要用於展現子節點狀態，若是子節點沒有須要展現的connections，須要選擇region樣式。
region與focusedChild區別：從點擊來講下區別，若是rederer爲region，點擊此節點，進入的頁面展現此節點的connections，如沒有connections，顯示空白。若是rederer爲focusedChild，點擊此節點，進入頁面展現與此節點進出相關的內容。

class：取值noraml,warning,danger。樣式分別爲：

node_type: 節點圖標，取值user,users,storage,service,pip,azure,樣式以下圖

notice：通知 severity取值： 0（正常）,1（警告）,2（錯誤）能夠寫在寫在節點中，也能夠寫在connections中
節點通知樣例
{
"name": "immedicably",
"metadata": {
"streaming": 1
},
"renderer": "focusedChild",
"notices": [
{
"severity": 1,
"title": "notice test 3"
}
]
},
connections通知樣例
{
"source": "INTERNET",
"target": "proxy-prod",
"metadata": {
"streaming": 1
},
"metrics": {
"warning": 0.9199999999999999,
"danger": 55.14600000000001,
"normal": 21140.684
},
"notices": [
{
"title": "CPU usage average at 80%",
"link": "http://link/to/relevant/thing",
"severity": 1
},
{
"title": "Reticulating splines"
}
]
},

數據源
Vizceral example都是靜態數據，在實際應用中，這些數據確定是動態的。本人在實際應用中，有兩種數據源，一種是graphite監控數據，一種是日誌。
先來講graphite，這種比較簡單，直接使用graphite獲取數據便可，graphite api文檔，請參考https://graphite.readthedocs.io/en/1.1.5/render_api.html#from-until 。根據業務流程配置node，connection，返回json數據便可。
另一種是日誌，這種比較繁瑣，須要分析日誌，遍歷多種業務場景。建議將日誌及業務流程寫爲配置文件，這樣維護更方便，代碼質量越高，最後也是返回json數據。

定時刷新頁面
經過api獲取動態數據後，須要定時刷新頁面，如10s刷新一次，代碼以下：
接口獲取數據：

10s自動刷新頁面

前端使用
Allow dragging nodes
官方的樣例展現的很漂亮，但在實際應用中，節點少的時候，佈局就沒那麼好看了，可是能夠本身拖動節點，改變展現效果，首頁【Display】-勾選【Allow dragging nodes】便可

展現單個節點
有時候想展現一個單個節點，與其它節點沒有任何connection，能夠這樣設置:本身指向本身

"connections": [
{
"source": "node1",
"target": "node1",
"metrics": {
"normal": 0
},
"class": "normal"
}
]

遺留問題目前還不清楚，如何隨意設置節點位置。