轉載請注明出處： https:////www.cnblogs.com/shining5/p/12387478.html

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結構，在節點和連接上運行布局算法，並在屏幕上顯示圖形。

Quick Start

官方給出了快速入門的樣例，地址：https://github.com/Netflix/vizceral-example，源碼下載到本地后啟動即可。

git clone [e-mail]: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"
}
]


遺留問題

• 目前還不清楚，如何隨意設置節點位置。