《阿裡雲飛天大資料平台 DataWorks 前端技術解密：工作流排程可視化》（脫敏版本）

一、摘要

工作流排程的可視化，主要是将任務的依賴關系展示出來，幫助使用者盡快的發現和定位問題。面對業務資料量暴增（千萬級）的情景下，如何從使用者視角更好的展示排程關系，成為工作流排程可視化的重點和難點。

針對上述問題，我們從圖渲染性能、布局以及互動三個方面，優化了工作流排程的可視化展示。

性能優化：基于新版G6，解決渲染層的性能；通過算法優化，解決業務資料處理的性能；
布局創新：結合Dagre和網格布局算法，實作Dagre+變種網格的子圖布局方案；
互動創新：通過一些新互動和視角，幫助使用者快速定位問題。

二、業務背景

1. 業務介紹

工作流排程，意在通過上下遊的設定，将不同的任務編排成一個DAG，進而滿足處理過程中互相依賴的需求。工作流排程的可視化即需要将編排的DAG、以及DAG中節點的資訊可視化的展示出來。

在DataWorks運維中心的業務中，DAG中需要包含的業務資訊如下。

節點。包含名稱、狀态、執行個體序列、類型、跨項目、是否關聯報警。
邊。包含跨region關系、自依賴關系以及check流程關系。
工具欄。節點搜尋功能。
資訊卡片。展示更多節點的資訊和操作。
節點詳情。展示節點的全量資訊，包括基本資訊、運作日志和記錄檔等。

2. 業務特征

DataWorks工作流的DAG圖有以下三個特點：

資料量大。峰值情況達到百萬級别。
同層節點數多。峰值情況達到十萬級别。
關系複雜。關系數峰值達到千萬級别。平均是節點數的3倍。

《阿裡雲飛天大資料平台 DataWorks 前端技術解密：工作流排程可視化》（脫敏版本）

三、目前痛點

随着集團内資料業務的暴增，這張DAG越來越大，截止2020年，集團内的排程執行個體數已達千萬級别。在如此大資料量的可視化展示中，遇到的挑戰除了性能問題，還有就是如何将如此多的資料通過合理的方式，向使用者傳達其關心的資訊。

遇到的具體問題和挑戰主要包括以下三個方面：

1. 性能問題

由于資料處理的複雜以及底層引擎渲染的瓶頸，經常導緻使用者浏覽器崩潰卡死。目前瓶頸資料如下：

前端瓶頸：之前DAG最多隻能展示2000節點，超過2000後會直接導緻浏覽器崩潰。其中，底層依賴的G6引擎，渲染瓶頸是10000個圖元，我們的業務場景中一個節點對應6個圖元，是以節點數的瓶頸是10000/6=1666。
後端瓶頸：接口一次最多傳回1w節點，主要來源是資料庫和記憶體壓力。

2. 布局問題

布局問題主要展現在以下兩個方面。

2.1 依賴關系不清晰

當依賴關系複雜時，使用者無法從現有的圖中清晰的看到節點的依賴關系。

如下圖中，圖a中展示的資訊是ecs_dw_root以及rc_location_firs兩個節點，均為impl_pet_plan以及exception_impact的上遊節點。然而真實的依賴關系，如圖b，rc_location_firs與impl_pet_plan以及exception_impact，并無依賴關系。

圖a 圖b

2.2 同層節點數多

業務特性，導緻同層節點數可能非常多，往往會出現圖c所展示的情況。使用者無法一屏看到節點的所有下遊關系，往往需要通過左右拖拽才能看到其他節點資訊。

圖c

3. 缺失分析能力

可視化本身要解決的問題，就是将資料中展示的資訊用更容易被人了解的形式傳達給使用者。回到工作流排程DAG本身的業務來說，其需要傳達給使用者的，主要有以下内容：

關系展示：以使用者關心的節點為中心，展示該節點的上下遊依賴。
上遊分析：當節點運作被阻塞時，展示阻塞鍊路的原因和解法。
下遊影響：針對某個節點，分析其下遊影響面。

然而現在的可視化方案，并不能很好的傳達以上的資訊。如下圖中，如何幫助使用者快速定位graph_edge_inst節點的阻塞源頭。

四、解決方案

1. 圖元素設計

如業務介紹中描述的DAG元素中需要表達的業務資訊，最終的設計樣式如下：

1.1 節點

節點根據業務特性，需要分為兩個類型：任務和執行個體。

任務：使用者通常關心以下資訊，任務名稱、任務類型、任務是否跨項目依賴。

執行個體：使用者通常關心以下資訊，名稱、執行個體狀态、執行個體序列、任務類型、是否跨項目依賴、是否配置dqc校驗規則。

1.2 邊

相對節點資訊而言，邊上展示的資訊相對簡單。

1.3 工具欄

工具欄中主要提供常用的圖操作和一些基本的分析工具，包括：聚合工具、節點搜尋、重新整理、放大/縮小、視圖切換等。

1.4 資訊卡片

單擊節點，觸發資訊卡片，将其作為一種輔助展示形式，用于展示更多的節點資訊。

1.5 節點詳情

輕按兩下節點，觸發節點詳情面闆，用于展示節點的全量資訊。

2. 圖布局設計

圖布局是指圖中節點的排布方式，根據圖的資料結構不同，布局可以分為兩類：一般圖布局、樹圖布局。适用于我們業務的是一般圖布局。常見的圖布局算法有：力導布局、Dagre布局、網格布局、同心圓布局等。

結合業務的“圖寬”特征，發現單一的一種布局方式已經遠遠不能滿足我們的業務需求。是以我們設計一種新的子圖布局方案，方案核心：

同層分組：同層節點數過多時，進行分組聚合。
次元聚合：提供針對某個業務次元，對資料進行聚合分析。
輔助視角：聚合後損失的資訊，通過輔助視角提供。

2.1 同層分組

同層分組的視角如下圖所示，同時在分組内增加翻頁功能，展示更多資訊，節省畫布空間。

分組後，針對分組内的節點，丢失了其直接上下遊的資訊，提供節點的獨立操作，便于使用者針對自己關心的節點進行進一步分析。

2.2 次元聚合

通過一些方式，對節點進行聚合操作。聚合節點的設計如下圖所示：

與分組組合的設計如下圖所示：

2.3 輔助展示

聚合後提供輔助視角，檢視聚合後的節點詳情。

3. 圖分析設計

即便在上述的布局方案下，大資料量下的節點問題定位，對使用者來說，還是很難。

是以我們針對使用者常用的業務分析場景，提供了聚合分析、上遊分析以及下遊分析工具，盡可能的幫使用者快速分析任務問題和影響。

3.1 聚合工具

當節點的上遊或者下遊過多時，沒法一眼找到使用者想要的節點。這時，可以通過對某個次元做聚合，然後再進行細分查找。

3.2 上遊阻塞鍊路定位

當節點在期望時間内仍處于未運作狀态時，使用者需要檢視阻塞任務的原因。

新增上遊分析功能，針對未運作的節點，一鍵定位上遊的阻塞節點。

上遊分析頁面隻展示阻塞目前執行個體運作的執行個體，即：非成功态的上遊執行個體
如果一級上遊中存在未運作的執行個體，則需要對該執行個體進行上遊分析，将阻塞該執行個體運作的上遊展示出來。
出于性能和穩定性的考慮，預設分析6層上遊，使用者可以選擇繼續分析。

3.3 下遊影響分析

當使用者需要修改自己的節點時，需要清楚修改後的影響到的業務和範圍。

新增下遊分析功能，結合聚合視圖，可高效直覺地完成目前節點的影響分析。

提供合并和分層兩種視角。
合并視角下，對目前任務的所有下遊（1/2/3/...級）做聚合，支援的聚合次元有：工作空間、責任人、優先級、狀态。
分層視角下，對任務的各層下遊分别做聚合，支援的次元同上。
當使用者點選某個分組，畫布右下角展示分組中的任務清單，點選某個任務可以跳轉到對應的清單并定位該任務。

五、參考文獻

[

](

https://yuque.antfin.com/cfe/ngcn7p/fqpqs6)

《阿裡雲飛天大資料平台 DataWorks 前端技術解密：工作流排程可視化》（脫敏版本）