云計(jì)算時(shí)代的到來給人們帶來了很多便利，同時(shí)也帶來了挑戰(zhàn)。比如，硬件環(huán)境更加復(fù)雜、設(shè)備多樣、處理難度大，運(yùn)行的平臺系統(tǒng)更加多樣化，需要更廣的知識面，對運(yùn)維安全要求也更高，所以在云環(huán)境下，我們需要對云運(yùn)維平臺 進(jìn)行可視化管理。

運(yùn)維可視化核心是將所運(yùn)維的服務(wù)、資源、設(shè)備的狀態(tài)和正在發(fā)生的事件通過可視化的手段呈現(xiàn)出來，指導(dǎo)運(yùn)維人員或者產(chǎn)品研發(fā)人員做出正確的運(yùn)維決策。某種程度上，云平臺的運(yùn)維與可視化相輔相成，可視化程度越高，運(yùn)維就越簡單，運(yùn)維效率也就越高。

在云運(yùn)維的工作范疇中，實(shí)時(shí)監(jiān)控對故障的發(fā)現(xiàn)和診斷起到至關(guān)重要的作用。今天，我們以私有云監(jiān)控中的一個(gè)重點(diǎn)場景——內(nèi)網(wǎng)監(jiān)控為例，來介紹可視化的重要作用（內(nèi)網(wǎng)指的是一個(gè)企業(yè)的內(nèi)部網(wǎng)絡(luò)，包括機(jī)房內(nèi)部網(wǎng)絡(luò)和機(jī)房間的網(wǎng)絡(luò)）。

異常事件可視化

當(dāng)運(yùn)維工程師發(fā)現(xiàn)自己負(fù)責(zé)的系統(tǒng)出現(xiàn)故障時(shí)，檢查網(wǎng)絡(luò)連接是否有異常，是故障排查流程當(dāng)中的標(biāo)準(zhǔn)步驟。在這個(gè)場景中，工程師需要知道自己的系統(tǒng)所在的機(jī)房以及所依賴的網(wǎng)絡(luò)通路是否存在故障，所以希望內(nèi)網(wǎng)監(jiān)控系統(tǒng)提供一個(gè)網(wǎng)絡(luò)故障概覽，展示給定的時(shí)間段中相關(guān)機(jī)房的異常事件。

最簡單的方式是將所有的網(wǎng)絡(luò)故障展示在表格當(dāng)中。

如上表所示，每一行代表一個(gè)故障事件。

• 第一列表示故障關(guān)聯(lián)的機(jī)房
• 第二列表示故障的起止時(shí)間
• 第三列表示故障的嚴(yán)重程度

這種展現(xiàn)方式存在以下三個(gè)問題：

• 不能第一眼看出哪些故障嚴(yán)重，哪些故障輕微。
• 不能直觀感受到每個(gè)故障的持續(xù)時(shí)長。
• 很難知道在某一時(shí)刻哪幾個(gè)機(jī)房同時(shí)存在故障。

當(dāng)時(shí)間段很長，篩選出的故障事件很多時(shí)，表格會(huì)變得很長，就更加不利于工程師了解網(wǎng)絡(luò)狀況。

為解決以上問題，我們需要在機(jī)房、時(shí)間、 程度三個(gè)維度上都能直觀的展示故障事件。從時(shí)間跨度來想，有點(diǎn)像事件流的感覺，似乎可以用事件流圖來展示。

圖1  事件流圖

如圖1所示，事件流圖用一條事件河流來表示事件。河流被橫向切分為若干條色帶，每條色帶代表一個(gè)類別的事件。色帶的高度（河流的寬度）代表在某個(gè)時(shí)刻，各類別包含事件的個(gè)數(shù)。事件越多，河流越寬，反之越窄。

這種事件流圖適合展示在一段時(shí)間內(nèi)事件群體的統(tǒng)計(jì)變化，而我們需要能夠展示每個(gè)事件的個(gè)體信息。因此，我們對事件流圖作了幾個(gè)修改：

• 每個(gè)故障事件用一個(gè)矩形條表示，矩形條左右兩邊的位置對應(yīng)事件的起止時(shí)間。
• 矩形條的顏色用來區(qū)分事件的嚴(yán)重程度，而不是事件的類別。
• 關(guān)聯(lián)到某一個(gè)機(jī)房的故障事件矩形條放在河流的同一個(gè)高度位置。如果事件在時(shí)間上能完全錯(cuò)開，則將矩形條左右放置。如果事件在時(shí)間上有重疊，則拓寬機(jī)房所占河流的寬度，將矩形條上下放置。

圖2  異常事件流圖

圖2展示了我們的事件流圖方案。

圖中展示了三個(gè)機(jī)房的異常，其中機(jī)房一有1個(gè)嚴(yán)重的異常事件（用紅色來標(biāo)識），這個(gè)異常事件是一個(gè)時(shí)間跨度比較長的嚴(yán)重異常事件。機(jī)房二有4個(gè)輕度的異常事件（用黃色標(biāo)識），這4個(gè)異常是時(shí)間跨度比較短的輕度異常事件，機(jī)房三有12個(gè)輕度的異常事件（用黃色標(biāo)識），這12個(gè)異常事件中也有三個(gè)時(shí)間跨度比較長的時(shí)間。如果鼠標(biāo)放置在異常事件矩形塊上，就能查看哪個(gè)機(jī)房出現(xiàn)異常。

通過這個(gè)圖，工程師可以很方便地看到每個(gè)機(jī)房的每個(gè)故障事件的詳細(xì)信息，比表格的方式直觀得多。

總結(jié)

事件流圖，從機(jī)房、時(shí)間、異常程度三個(gè)維度都能直觀的展示故障事件，幫助工程師快速查看異常情況。其實(shí)，事件流圖還可以用于展示變更事件，甚至可以將變更事件與異常事件組合，讓工程師能一眼查看異常事件可能是由哪些變更事件引起的。

我們從智能運(yùn)維場景中抽象出一些可視化組件，比如這里的事件流圖組件，再通過前端工程化工具把這些子元素串聯(lián)起來，構(gòu)建出前端統(tǒng)一展現(xiàn)層框架，后面我們會(huì)逐一介紹這些可視化組件與框架其他細(xì)節(jié)。