• Vizceral小白入門

    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 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"
    }
    ]

    遺留問題

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

     

     

    posted @ 2020-03-01 14:31  sunshine_5  閱讀(...)  評論(...編輯  收藏
    贵州快三平台贵州快三主页贵州快三网站贵州快三官网贵州快三娱乐贵州快三开户贵州快三注册贵州快三是真的吗贵州快三登入贵州快三快三贵州快三时时彩贵州快三手机app下载贵州快三开奖 甘南县 | 山丹县 | 曲阜市 | 扎囊县 | 老河口市 | 肇州县 | 霍城县 | 连平县 | 凉城县 | 通海县 | 金坛市 | 龙里县 | 池州市 | 贡嘎县 | 遂昌县 | 益阳市 | 乐亭县 | 长宁区 | 蚌埠市 | 黎平县 | 西乡县 | 两当县 | 韩城市 | 独山县 | 四川省 | 蒲江县 | 上杭县 | 康平县 | 甘德县 | 宾川县 | 衡山县 | 芮城县 | 锦屏县 | 长岭县 | 亚东县 | 扬中市 | 城口县 | 涞水县 | 鹰潭市 | 玛纳斯县 | 富锦市 | 洞口县 | 康定县 | 太原市 | 西乌珠穆沁旗 | 宣恩县 | 遂宁市 | 剑阁县 | 永德县 | 揭阳市 | 京山县 | 金湖县 | 河津市 | 平泉县 | 麻江县 | 平顶山市 | 明水县 | 庆城县 | 资兴市 | 东乡 | 从化市 | 澎湖县 | 都昌县 | 柞水县 | 平山县 | 枝江市 | 金阳县 | 沽源县 | 庆云县 | 兖州市 | 德保县 | 潼南县 | 察哈 | 江口县 | 西畴县 | 余庆县 | 团风县 | 宁远县 | 金寨县 | 安泽县 | 石嘴山市 | 榕江县 | 民县 | 阳城县 | 正宁县 | 阜阳市 | 罗甸县 | 浦江县 | 昌都县 | 溧水县 | 大埔县 | 札达县 | 教育 | 康平县 | 沁阳市 | 仁寿县 | 彝良县 | 贵州省 | 东乡族自治县 | 平陆县 | 呼伦贝尔市 | 奉贤区 | 双鸭山市 | 达拉特旗 | 二手房 | 仲巴县 | 宜昌市 | 句容市 | 和政县 | 将乐县 | 若羌县 | 高安市 | 平凉市 | 宜兴市 | 尼木县 | 清苑县 | 龙游县 | 神农架林区 | 和静县 | 东乡 | 东光县 | 福安市 | 连城县 | 黄梅县 | 随州市 | 衡阳市 | 泰安市 | 南城县 | 天台县 | 讷河市 | 家居 | 呈贡县 | 连平县 | 平和县 | 前郭尔 | 汕头市 | 闵行区 | 宝鸡市 | 十堰市 | 买车 | 平邑县 | 东乡族自治县 | 商丘市 | 金昌市 | 长垣县 | 百色市 | 宜兰县 | 海安县 | 海盐县 | 婺源县 | 安阳市 | 景德镇市 | 三台县 | 从江县 | 富顺县 | 夹江县 | 新郑市 | 南皮县 | 甘孜 | 田阳县 | 九江县 | 静宁县 | 唐河县 | 灵丘县 | 陆川县 | 涞水县 | 当阳市 | 谢通门县 | 安丘市 | 额敏县 | 洮南市 | 沁阳市 | 禄丰县 | 务川 | 馆陶县 | 连云港市 | 武城县 | 平江县 | 社旗县 | 十堰市 | 丰城市 | 诸城市 | 永康市 | 林口县 | 吉木乃县 | 昂仁县 | 蒙阴县 | 正定县 | 宜宾市 | 金坛市 | 察雅县 | 高安市 | 周至县 | 宝清县 | 麻江县 | 宁武县 | 临沂市 | 罗江县 | 花莲市 | 左云县 | 尤溪县 | 宣恩县 | 安多县 | 旬邑县 | 乐业县 | 高要市 | 兴城市 |