• 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下载贵州快三开奖 江川县 | 荆州市 | 玛曲县 | 信阳市 | 和田县 | 无锡市 | 湘阴县 | 榆中县 | 乌兰浩特市 | 惠东县 | 玉溪市 | 酉阳 | 蓝田县 | 镇坪县 | 历史 | 康定县 | 德昌县 | 保靖县 | 大田县 | 博野县 | 通江县 | 五河县 | 丹凤县 | 安义县 | 尚义县 | 资源县 | 普洱 | 葫芦岛市 | 武冈市 | 白水县 | 肃南 | 江口县 | 曲麻莱县 | 杭锦旗 | 佳木斯市 | 庆元县 | 繁昌县 | 南安市 | 崇明县 | 邳州市 | 新河县 | 沙雅县 | 扶绥县 | 松溪县 | 出国 | 随州市 | 兴安盟 | 余庆县 | 长丰县 | 普兰县 | 永泰县 | 黎平县 | 多伦县 | 原阳县 | 六枝特区 | 海兴县 | 青阳县 | 十堰市 | 丰都县 | 陇川县 | 油尖旺区 | 清徐县 | 奈曼旗 | 卓资县 | 新河县 | 宣化县 | 海晏县 | 瓮安县 | 重庆市 | 湖北省 | 洞头县 | 吴忠市 | 汝南县 | 滦南县 | 邛崃市 | 义乌市 | 西乡县 | 鞍山市 | 安陆市 | 玛多县 | 娄烦县 | 嘉善县 | 团风县 | 梓潼县 | 玛多县 | 新疆 | 临朐县 | 黔西县 | 道孚县 | 喜德县 | 玉林市 | 莱芜市 | 建昌县 | 财经 | 海丰县 | 奉新县 | 霍州市 | 贞丰县 | 灵璧县 | 陕西省 | 遂川县 | 吉木乃县 | 章丘市 | 永宁县 | 灌云县 | 淳化县 | 陈巴尔虎旗 | 雅安市 | 桃园县 | 靖宇县 | 庆云县 | 平远县 | 渝中区 | 周至县 | 洱源县 | 南投县 | 莎车县 | 泾川县 | 正安县 | 开江县 | 莱西市 | 柳河县 | 中西区 | 天峨县 | 滨海县 | 乌鲁木齐县 | 兴仁县 | 宝应县 | 工布江达县 | 福安市 | 蓝田县 | 阿拉善盟 | 高州市 | 桓仁 | 综艺 | 乌兰察布市 | 新田县 | 思南县 | 噶尔县 | 温宿县 | 天峻县 | 专栏 | 武山县 | 宁蒗 | 兴义市 | 江北区 | 平阴县 | 尚志市 | 平遥县 | 措勤县 | 瑞金市 | 石景山区 | 安龙县 | 定远县 | 高台县 | 如东县 | 纳雍县 | 临西县 | 福州市 | 崇左市 | 普兰县 | 阳城县 | 东山县 | 卢氏县 | 宜州市 | 綦江县 | 重庆市 | 易门县 | 察隅县 | 施秉县 | 自贡市 | 万州区 | 宁都县 | 蚌埠市 | 垣曲县 | 华坪县 | 鄄城县 | 石柱 | 文登市 | 河西区 | 阳西县 | 都安 | 虹口区 | 仁化县 | 屯留县 | 寿光市 | 五家渠市 | 通河县 | 平南县 | 甘泉县 | 治多县 | 科尔 | 府谷县 | 延安市 | 乃东县 | 屏山县 | 旺苍县 | 彝良县 | 蓝山县 | 全南县 | 五原县 | 青铜峡市 | 宁明县 | 莱州市 | 曲松县 | 隆化县 | 屏南县 |