Grafana動(dòng)態(tài)視圖在轉(zhuǎn)轉(zhuǎn)推送系統(tǒng)中的應(yīng)用

作者：張鵬程 2024-08-08 07:13:36

動(dòng)態(tài)視圖，即：Flowcharting，是Grafana的一個(gè)插件。該插件借助在線圖形庫draw.io繪制、展示復(fù)雜圖表。

1 背景

轉(zhuǎn)轉(zhuǎn)的推送系統(tǒng)為自研產(chǎn)物，實(shí)現(xiàn)過程簡述為：對外提供一個(gè)接入層，以多次MQ轉(zhuǎn)發(fā)形式進(jìn)行多系統(tǒng)交互，內(nèi)部包括：推送內(nèi)容過濾、免打擾策略、廠商通道分發(fā)等邏輯，最終發(fā)起http請求至廠商通道，推送至設(shè)備，如圖1所示。一條Push經(jīng)過的邏輯節(jié)點(diǎn)眾多，業(yè)務(wù)側(cè)同學(xué)經(jīng)常反饋Push收不到。每次收到反饋，都需要對鏈路中的每個(gè)集群進(jìn)行排查，費(fèi)時(shí)費(fèi)力，亟需一種快速定位問題的方式，解放人力。

圖1 轉(zhuǎn)轉(zhuǎn)推送系統(tǒng)-推送流程

2 idea的誕生

在調(diào)用鏈路層面，一次接口調(diào)用中，traceId貫穿整個(gè)調(diào)用鏈路，該能力由Radar（自研能力，負(fù)責(zé)埋點(diǎn)的生成等）+ Zipkin實(shí)現(xiàn)。當(dāng)Push發(fā)送失敗時(shí)，一定會(huì)在某個(gè)邏輯節(jié)點(diǎn)終止，如果我們可以將正向邏輯節(jié)點(diǎn)、異常邏輯節(jié)點(diǎn)以可視化的方式呈現(xiàn)出來，以traceId作為查詢問題的線索，則可以在圖中快速定位問題原因。

在數(shù)據(jù)采集方向上，對數(shù)據(jù)上報(bào)有嚴(yán)格的耗時(shí)、低性能開銷要求。Prometheus監(jiān)控體系的QPS在千萬級別，耗時(shí)為納秒級，內(nèi)存占用和資源消耗都相對較小，主要取決于標(biāo)簽的數(shù)量，標(biāo)簽越多，內(nèi)存占用越多。若采用traceId作為查詢條件（對應(yīng)Prometheus中的一個(gè)標(biāo)簽），可以通過抽樣、限制收集的環(huán)境，即：只在測試、沙箱環(huán)境收集，降低對內(nèi)存等資源的消耗。

以這兩個(gè)層面為出發(fā)點(diǎn)，Grafana動(dòng)態(tài)視圖與我們訴求不謀而合。

3 什么是動(dòng)態(tài)視圖

動(dòng)態(tài)視圖，即：Flowcharting，是Grafana的一個(gè)插件。該插件借助在線圖形庫draw.io繪制、展示復(fù)雜圖表。draw.io支持的圖表包括：技術(shù)架構(gòu)方案（Legacy、Cloud、Azure、AWS、GCP、Kubernetes、Terraform）、UML方案、工作流等。

可以用這個(gè)插件動(dòng)態(tài)填充數(shù)據(jù)、自定義數(shù)據(jù)與圖表的交互，它可以/支持：

監(jiān)視狀態(tài)和性能
與圖表交互
根據(jù)數(shù)據(jù)或狀態(tài)更改顯示的對象
向?qū)ο筇砑渔溄?/li>
充分利用變量修改形狀、顏色、鏈接、下載路徑等
支持正則表達(dá)式進(jìn)行匹配和替換

附官方動(dòng)態(tài)視圖樣例，如圖2所示。

圖2 官方Grafana動(dòng)態(tài)視圖樣例

4 構(gòu)建看板

4.1 繪制視圖

我們將一條Push經(jīng)過的每個(gè)邏輯節(jié)點(diǎn)繪畫出來，如圖3所示。上方的綠色底色節(jié)點(diǎn)為正向節(jié)點(diǎn)，每個(gè)正向節(jié)點(diǎn)正下方對應(yīng)一些異常節(jié)點(diǎn)，即：圖中的土黃色節(jié)點(diǎn)。多個(gè)正向節(jié)點(diǎn)之間用箭頭串聯(lián)起來。此外，所有節(jié)點(diǎn)都定義了一個(gè)狀態(tài)碼，用來唯一標(biāo)識該節(jié)點(diǎn)。節(jié)點(diǎn)狀態(tài)碼釋義放在了最右側(cè)的灰色底色節(jié)點(diǎn)中，點(diǎn)擊該節(jié)點(diǎn)可以進(jìn)入狀態(tài)碼說明在線文檔。

圖3 轉(zhuǎn)轉(zhuǎn)推送系統(tǒng)-鏈路流程圖

4.2 上報(bào)數(shù)據(jù)

在公共jar包中定義一個(gè)Counter，該Counter中包含了兩個(gè)標(biāo)簽：nodeName、traceId。其中，traceId對應(yīng)視圖中每個(gè)節(jié)點(diǎn)的名稱。

private static final Counter NODE_COUNTER = Counter.build().name("push_link_graph_node_monitor").help("push鏈路節(jié)點(diǎn)監(jiān)控").labelNames("nodeName", "traceId").disableAutoCreateGraph(true).register();

此外，在jar包中提供上報(bào)方法，供各服務(wù)上報(bào)數(shù)據(jù)使用。

public static void reportNodeInfoStrWithTraceId(String nodeName, String traceId) {
    try {
        if (StringUtils.isBlank(traceId)) {
            traceId = com.bj58.zhuanzhuan.radar.util.RadarUtils.getTraceId();
        }

        NODE_COUNTER.labels(nodeName, traceId).inc();
    } catch (Exception e) {
        // DO NOTHING
    }
    return;
}

最后，在業(yè)務(wù)代碼中上報(bào)埋點(diǎn)數(shù)據(jù)，如圖4所示。

圖4 上報(bào)埋點(diǎn)數(shù)據(jù)

4.3 創(chuàng)建Grafana看板

新建一個(gè)Grafana看板如圖5所示。

圖5 創(chuàng)建Grafana看板

點(diǎn)擊《設(shè)置》按鈕，完善基礎(chǔ)信息、設(shè)置變量，如圖6所示。

圖6 設(shè)置按鈕圖示

基礎(chǔ)信息的填寫如圖7所示，基礎(chǔ)信息包括：看板名稱、看板標(biāo)簽（可用來標(biāo)記看板所屬的部門信息）、看板數(shù)據(jù)的時(shí)間查詢條件等。

圖7 完善看板基礎(chǔ)信息

設(shè)置變量如圖8所示，該變量用作后續(xù)的數(shù)據(jù)源召回條件。變量的類型支持：即時(shí)手動(dòng)輸入、實(shí)時(shí)數(shù)據(jù)源、常量等等。這里將traceId設(shè)置為：即時(shí)手動(dòng)輸入類型。

圖8 設(shè)置變量

4.4 將圖導(dǎo)入Grafana

在已繪制好的流程界面中，選中《其它》tab，勾選其中的《編輯繪圖》選項(xiàng)，如圖9所示。然后復(fù)制XML內(nèi)容到剪貼板中，如圖10所示。最后將復(fù)制好的內(nèi)容粘貼在FlowCharting看板內(nèi)，如圖11所示。

圖9 編輯繪圖

圖10 復(fù)制XML內(nèi)容

圖11 粘貼XML內(nèi)容

4.5 完善PromQL數(shù)據(jù)

這一步驟是書寫查詢語句，以獲取視圖中動(dòng)態(tài)查詢到的數(shù)據(jù)。在《Query》tab中填寫PromQL、數(shù)據(jù)的圖例維度，如圖12所示。圖例維度用作后續(xù)數(shù)據(jù)與圖表的交互條件。

圖12 完善PromQL與圖例

對當(dāng)前的推送場景來說，PromQL按照traceId聚合，圖例使用nodeName。附，PromQL如下:

increase(push_link_graph_node_monitor{traceId="${traceId}"}[$__rate_interval])

如果對PromQL不了解，可以查閱參考資料中的第4點(diǎn)。

填寫好的PromQL可以通過2種方式驗(yàn)證結(jié)果，如圖13所示。

QL驗(yàn)證方式一：打開頁面右上角的《Table view》開關(guān)，可以觀測到下方有查詢數(shù)據(jù)展示出來。
QL驗(yàn)證方式二：點(diǎn)擊頁面中部靠下的《Query Inspector》按鈕，出現(xiàn)查詢結(jié)果半層，半層中可以看到查詢結(jié)果，如圖14所示。當(dāng)出錯(cuò)時(shí)，會(huì)給出提示信息，按提示排查即可。

圖13 QL驗(yàn)證方式

圖14 Query Inspector半層

4.6 定義Mapping

這一步驟是定義數(shù)據(jù)與圖表的交互。Mapping包括：

Color/Tooltip Mappings：將數(shù)據(jù)關(guān)聯(lián)drwa.io XML元素，動(dòng)態(tài)修改圖的顏色、提示。如：訂單數(shù)小于100單將圖變紅。
Label/Text Mappings：將計(jì)算的數(shù)據(jù)展示到圖上。
Link Mappings：將圖配置跳轉(zhuǎn)鏈接，點(diǎn)擊即可跳轉(zhuǎn)。
Event/Animation Mappings：用于將圖的數(shù)據(jù)綁定事件，如：訂單數(shù)小于100單，圖的邊框閃爍。

每個(gè)場景的使用方式可以參考官方網(wǎng)站，詳見《參考資料》第3點(diǎn)，或點(diǎn)擊每個(gè)頁面元素右側(cè)的問號查看幫助信息、樣例，如圖15所示。

圖15 頁面元素右側(cè)的幫助信息

在推送場景中，我們使用Event/Animation Mappings，當(dāng)數(shù)據(jù)滿足一定條件時(shí)，圖中的元素閃爍展示。首先我們配置數(shù)據(jù)的聚合方式與觸發(fā)閾值，配置樣例如圖16所示。

圖16 配置數(shù)據(jù)的聚合方式與觸發(fā)閾值

其中l(wèi)vl字段0值代表nodeName為21000的第一個(gè)不為空的數(shù)據(jù)大于等于0。后面會(huì)用到這個(gè)lvl值觸發(fā)圖形交互。

接下來，我們配置圖形閃爍的條件，如圖17所示。點(diǎn)擊紅色框中的《鏈接》按鈕，然后在左側(cè)選中要關(guān)聯(lián)的頁面圖形元素，對應(yīng)本圖中的左側(cè)藍(lán)色框內(nèi)容。選中之后，該元素的唯一標(biāo)識會(huì)出現(xiàn)自動(dòng)填充在右側(cè)藍(lán)色框中。之后，在黃色框里選擇lvl的值，即我們剛剛設(shè)置的lvl為0這個(gè)值，代表當(dāng)滿足該條件時(shí)，元素會(huì)出現(xiàn)動(dòng)效。最后在綠色框中設(shè)置動(dòng)效效果為閃爍。

圖17 圖的數(shù)據(jù)綁定事件示例

以此類推，給頁面上每個(gè)元素設(shè)置數(shù)據(jù)交互效果。

5 成果與收效

5.1 成果

通過draw.io繪制出含有Push鏈路中每個(gè)邏輯節(jié)點(diǎn)的視圖，然后在Grafana上構(gòu)建數(shù)據(jù)交互規(guī)則，將推送系統(tǒng)鏈路以可視化的方式呈現(xiàn)出來。

當(dāng)我們拿到一個(gè)traceId后，輸入到搜索框中，Grafana自動(dòng)獲取到數(shù)據(jù)，觸發(fā)數(shù)據(jù)交互，高亮每一個(gè)邏輯節(jié)點(diǎn)，如圖18所示，非常直觀。

圖18 推送系統(tǒng)動(dòng)態(tài)視圖演示

當(dāng)異常節(jié)點(diǎn)高亮?xí)r，業(yè)務(wù)側(cè)同學(xué)可以根據(jù)狀態(tài)碼查看說明文檔，找出對應(yīng)的解決方案，如圖19所示，該圖表明是蘋果APNs通道返回了狀態(tài)碼為400，且原因?yàn)锽adDeviceToken。

圖19 推送系統(tǒng)動(dòng)態(tài)視圖-鏈路異常case

我們可以在圖中灰色節(jié)點(diǎn)的在線文檔鏈接中找到解決方案，如圖20所示。

圖20 推送系統(tǒng)APNs異常狀態(tài)碼釋義

5.2 收效

在動(dòng)態(tài)視圖出現(xiàn)之前，人均排查時(shí)間為0.25小時(shí)以上，詢問頻率為每天N次。有了動(dòng)態(tài)視圖，業(yè)務(wù)側(cè)同學(xué)基本能夠根據(jù)動(dòng)態(tài)視圖定位到異常原因，實(shí)現(xiàn)自助解決問題，沒有再詢問過（排除服務(wù)異常的case，需要人工再次介入），極大降低了人力成本的投入。