作者簡介
喻友文 百度高級前端研發工程師
負責百度智能運維產品（Noah）的前端研發工作，在前端框架、前端工程化等方向有廣泛的實踐經驗。
乾貨概覽
在前面的文章中爲大家介紹了百度智能運維團隊研發的各類運維管理平臺，包括百度內部的系統監控、外網質量監控獵鷹、內網質量監控NetRadar、單機房故障自愈，對外開放的標準運維管理平臺NoahEE、百度雲監控、智能異常檢測等產品。這些平臺覆蓋了故障管理、變更管理、容量管理、服務檯等多個運維場景。如此繁多的運維管理平臺所涉及的前端開發工作量是特別龐大的，特別是運維管理平臺的複雜性還很高，涉及大量的前端業務邏輯開發（如操作交互、數據處理、數據可視化展現等）。那麼智能運維前端研發團隊是如何在人員有限的情況下開發出完善的覆蓋百度內外的各類運維管理平臺呢？這主要得益於團隊根據多年的實踐經驗推出的NoahV運維前端研發框架。下面我們就來詳細介紹下NoahV框架是如何提升運維平臺前端研發效率，從而幫助團隊快速高效的研發運維管理平臺。
從運維業務場景出發，尋找解決方案
通過對大量的運維管理平臺調研總結，我們發現雖然運維場景是多種多樣的，但對應Web平臺展現場景其實是可以收斂的。基本可以分爲如下兩類：
1
運維操作類
運維操作一般包括程序部署上線、監控任務創建、故障Case記錄、機器上架管理等，這些場景一般都需要輸入一些參數用來確認操作的具體過程以及記錄操作的一些概要信息，所以這類展現場景採用最多的是使用表單方式，運維操作者根據需要輸入或者選擇一些信息，最後提交，將操作任務交給程序來執行，從而完成一次運維操作。
如圖1所示爲變更管理中新建部署任務示例，指定上線內容，上線模塊，上線之後運行賬戶、部署路徑等信息，提交之後，部署程序將會根據提交信息執行部署上線操作。
圖1 新建部署任務示例
2
數據展示類
除上述運維操作之外，另外一個最常見的運維展現場景是數據展示類，如展示歷史上線任務信息、監控任務信息、機器域名等資產信息、最常見的展現方式就是使用表格將任務展示出來。如圖2所示爲監控任務列表頁面，通過表格一行一行展示監控任務的概要信息。
圖2 監控任務列表
另外像監控業務場景中，常常需要比表格更直觀的展現數據形式，通常可以採用趨勢圖、柱狀圖、餅圖、事件流圖等數據可視化展現形式。如圖3所示爲某服務在一段時間內的PV情況，使用趨勢圖展現可以很清晰地看出數據隨時間變化和波動的情況。
圖3 可視化數據展示示例
既然展現形式是收斂的，那我們可以將這些收斂的展現形式做成固定的頁面模板，針對相同的展現形式我們只需複用同一個頁面模板。同時通過簡化模板的使用，以達到研發效率提升的目標。
頁面模板-簡化運維前端研發利器
如圖4所示爲頁面模板的構成示意圖，在UI組件的基礎上通過添加相應的業務邏輯處理將運維場景中高頻的展現形式做成頁面模板，如表單模板、列表模板、數據可視化模板等。
圖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，大家有興趣可以點擊閱讀原文（https://github.com/baidu/NoahV）訪問我們的GitHub主頁查看使用文檔來試用，使用過程中有任何問題都可以通過GitHub Issue或者直接留言反饋給我們。
溫馨提示
如果你喜歡本文，請分享到朋友圈，想要獲得更多信息，請關注我們！
如果你有任何問題歡迎留言諮詢~
如果想試用我們的企業級運維平臺NoahEE，請聯繫郵箱：[email protected]
RECOMMEND
推薦閱讀
↓↓↓ 點擊"閱讀原文" 【瞭解更多精彩內容】