NoahV | 百度智能運維前端框架開源了

使用微信掃描識別以下二維碼在微信客戶端中閱讀本文：

在AIOps智能運維微信公衆號前面發佈的文章中爲你們介紹了百度智能運維團隊研發的各種運維管理平臺，包括百度內部的系統監控、外網質量監控獵鷹、內網質量監控NetRadar、單機房故障自愈，對外開放的標準運維管理平臺NoahEE、百度雲監控、智能異常檢測等產品。這些平臺覆蓋了故障管理、變動管理、容量管理、服務檯等多個運維場景。如此繁多的運維管理平臺所涉及的前端開發工做量是特別龐大的，特別是運維管理平臺的複雜性還很高，涉及大量的前端業務邏輯開發（如操做交互、數據處理、數據可視化展示等）。那麼智能運維前端研發團隊是如何在人員有限的狀況下開發出完善的覆蓋百度內外的各種運維管理平臺呢？這主要得益於團隊根據多年的實踐經驗推出的NoahV運維前端研發框架。下面咱們就來詳細介紹下NoahV框架是如何提高運維平臺前端研發效率，從而幫助團隊快速高效的研發運維管理平臺。

從運維業務場景出發，尋找解決方案

經過對大量的運維管理平臺調研總結，咱們發現雖然運維場景是多種多樣的，但對應Web平臺展示場景實際上是能夠收斂的。基本能夠分爲以下兩類：

1. 運維操做類

運維操做通常包括程序部署上線、監控任務建立、故障Case記錄、機器上架管理等，這些場景通常都須要輸入一些參數用來確認操做的具體過程以及記錄操做的一些概要信息，因此這類展示場景採用最多的是使用表單方式，運維操做者根據須要輸入或者選擇一些信息，最後提交，將操做任務交給程序來執行，從而完成一次運維操做。

如圖1所示爲變動管理中新建部署任務示例，指定上線內容，上線模塊，上線以後運行帳戶、部署路徑等信息，提交以後，部署程序將會根據提交信息執行部署上線操做。

圖1 新建部署任務示例

2. 數據展現類

除上述運維操做以外，另一個最多見的運維展示場景是數據展現類，如展現歷史上線任務信息、監控任務信息、機器域名等資產信息、最多見的展示方式就是使用表格將任務展現出來。如圖2所示爲監控任務列表頁面，經過表格一行一行展現監控任務的概要信息。

圖2 監控任務列表

另外像監控業務場景中，經常須要比表格更直觀的展示數據形式，一般能夠採用趨勢圖、柱狀圖、餅圖、事件流圖等數據可視化展示形式。如圖3所示爲某服務在一段時間內的PV狀況，使用趨勢圖展示能夠很清晰地看出數據隨時間變化和波動的狀況。

圖3 可視化數據展現示例

既然展示形式是收斂的，那咱們能夠將這些收斂的展示形式作成固定的頁面模板，針對相同的展示形式咱們只需複用同一個頁面模板。同時經過簡化模板的使用，以達到研發效率提高的目標。

頁面模板-簡化運維前端研發利器

如圖4所示爲頁面模板的構成示意圖，在UI組件的基礎上經過添加相應的業務邏輯處理將運維場景中高頻的展示形式作成頁面模板，如表單模板、列表模板、數據可視化模板等。

圖4 頁面模板構成

通常須要在組件基礎上添加以下業務邏輯處理：

1. 數據獲取、處理、渲染：根據數據請求地址和請求參數，經過異步的方式請求到須要展現的數據，並對數據進行過濾、篩選等處理，最終渲染到模板指定區域。

2. 組件佈局控制：按照不一樣模板的使用場景對模板中所包含的組件進行合理佈局展現。

3. 交互事件處理：關聯處理不一樣組件的交互行爲，如點擊查詢或者提交按鈕時自動獲取表單填寫的內容並執行查詢更新展現數據等。

4. 配置解析：主要解析用戶提供的模板配置信息，如表單模板項名稱、輸入類型（輸入框、單選框、多選框、下拉框、時間選擇框等）、須要執行的操做類型（提交、重置等）。

通過這些業務邏輯處理以後產出的頁面模板，只需提供JSON配置信息就能輕鬆產出咱們須要的前端展現頁面。

1. 列表頁面模板使用示例

如圖5所示爲列表模板的使用示例，只需提供如圖6所示JSON數據用來描述須要展現的運維對象，就能生成以下圖所示的列表頁面，開發者再也不須要編寫複雜的JS代碼來處理繁雜的前端業務邏輯，也不須要關心如何獲取表格展現數據，如何獲取用戶填寫的表單內容，也不須要關心分頁和數據展現的邏輯，極大下降了運維管理平臺開發的難度，提高了運維管理平臺的開發效率。

圖5 列表頁面模板示例

圖6 JSON配置數據

2. 數據可視化模板示例

針對運維業務中數據可視化展示的需求，咱們提供了能夠自定義佈局的可視化頁面模板，經過與表單模板、列表模板結合從而構成完整的儀表盤功能。儀表盤主要提供頁面佈局自定義配置(包括組件位置、大小、排版自定義)、組件基礎信息的可視化配置（包括數據來源、外觀、交互等）、自定義頁面的展現和管理等功能。如圖7所示爲使用儀表盤建立的一個可視化展現頁面。

圖7 儀表盤示例

3. 使用效果

有了這些頁面模板，自定義頁面佈局，儀表盤模板以後，開發者再也不須要編寫複雜JS處理邏輯，只需提供對應的配置數據就能夠很方便快捷地搭建出想要的運維管理平臺，極大的下降了研發成本，避免了重複編寫相同代碼邏輯形成的研發效率低下問題。

經過評估：使用頁面模板開發相較於直接使用UI組件開發能提升2-3倍開發效率，當前這些頁面模板和儀表盤功能能覆蓋大部分運維平臺的展現需求，已經應用到了資源管理、部署、監控、故障處理等多個運維場景，落地的運維管理系統達20餘個。此外針對少部分不能覆蓋的狀況，咱們也提供了基礎UI組件庫以及運維業務組件庫，能夠直接使用這些組件來開發須要的頁面。

NoahV框架不只僅是頁面模板

除了上述頁面模板和儀表盤以外，NoahV框架還提供了一系列研發輔助工具和其餘實用的功能模塊，覆蓋了從開發、構建、到線上運行的各個階段。如圖8所示爲NoahV運維框架架構圖：

圖8 NoahV運維前端研發框架

經過將常見運維平臺中的網站導航功能和常見的頁面佈局形式加入到框架中，實現提供JSON配置就能生成通用的網站導航和佈局。

此外咱們也結合豐富的運維前端研發經驗沉澱出項目開發的最佳實踐，包括項目初始目錄結構、頁面模板複用、開發調試、先後端協做、前端路由管理、編譯構建、線上運行統計分析等，同時也將上述部分功能和實踐集成到了腳手架中，經過輸入簡單的命令就能很簡單高效的完成項目初始化、頁面模板複用、項目開發調試。這些工具和功能經過創建規範的前端工程化體系能在頁面模板和儀表盤的基礎上再次提高運維前端項目的研發效率。

項目案例-NoahEE

圖9 NoahEE部署系統

圖10 NoahEE部署系統

圖11 NoahEE監控系統

圖12 NoahEE儀表盤

總 結

目前NoahV框架在百度內部和雲上運維產品已經有了較爲普遍的應用，同時也已經開源到了GitHub，你們有興趣能夠訪問咱們的GitHub主頁：github.com/baidu/NoahV…查看使用文檔來試用，使用過程當中有任何問題均可以經過GitHub Issue或者直接留言反饋給咱們。