在運維自動化平臺中，任務系統無疑是最核心的組成部分之一。它承擔著所有打包編譯、專案上線、日常維護等運維任務的執行。透過任務系統，我們能夠靈活地構建滿足不同需求的自定義任務流。早期的任務流後端採用了類似列表的儲存結構，根據任務流內子任務的排序依次執行，儘管透過配置相同的順序可以實現子任務的並行執行，但由於前端使用了簡單的steps.js外掛，無法直觀地展示並行執行的過程。就像下圖這樣，儘管iOS更新和安卓更新配置了相同的執行排序，可以並行執行，但在圖示上並沒有直觀的顯示方式，容易讓人產生誤解
儘管如此，這種簡單的序列展示方式仍然使用了較長時間。然而，隨著接入流程越來越多，會遇到一個大流程內可能有十幾甚至幾十個子任務的情況，這種簡單的平鋪展示方式逐漸顯得不夠友好，同時，隨著使用的深入，會有一些更加複雜的流程定義，比如序列並行交替，多序列並行的迴圈執行等，那原本的展示方式就完全無法滿足需求了，再加上流程的定義越來越複雜，會有一些更高階的流程定義需求，例如根據不同的變數/引數執行不同的任務流節點等，原本的任務流構建方式和執行邏輯顯然不再適用，因此，我們重構了任務流
重構後的任務流基本遵循了BPMN規範，採用拖拖拽拽的方式來編排任務流，從而生成視覺化的任務流程圖，後端也完全根據流程圖的節點、閘道器和連線依次執行，執行狀態和結果實時展示在流程圖上，不同的執行結果和狀態採用不同的顏色渲染，流程圖上的節點也可以點選，根據不同的節點型別展示不同的操作按鈕和資料，整個過程清晰直觀，互動性更強，使用者體驗大大提升
BPMN
我們的任務流設計基本遵循了BPMN規範，BPMN是由業務流程管理倡議組織BPMI開發的一套標準的業務流程建模符號規範，旨在為使用者提供一套容易理解的標準符號，這些符號作為BPMN的基礎元素，將業務流程建模簡單化、圖形化，將複雜的建模過程視覺化，便於所有業務相關人員的理解和使用
BPMN的核心價值在於其統一標準，業務相關者都按照這個標準來繪製業務流程圖，能夠減少各方對於流程圖的理解歧義，從而達到高效協作的目的。市面上的很多流程系統都遵循這個規範，只要遵循規範，那大家的理解和使用成本就會小很多，我們的流程實現上也基本遵循這個規範，並進行了一定的簡化，更加符合大眾的使用習慣
在流程編排和渲染上，我們使用了前端元件bpmn-js，bpmn-js是基於BPMN標準實現的一套渲染工具包和web建模器，使用十分廣泛，也特別好用，我之前寫過一系列的文章介紹BPMN這個元件，感興趣的可以深入去看看
流程編排
我們基於bpmn-js進行了自定義改造，簡化了流程編排的操作，主要包含三個核心元素：任務、閘道器和事件
任務： 對應任務系統中的子任務，代表實際執行的內容，有很多不同的型別，例如命令、指令碼、Ansible-Playbook、Jenkins-Job、通知、審批等
閘道器： 用於條件判斷或並行匯聚，例如根據前一個任務的不同執行結果狀態呼叫不同的執行任務等
事件： 定義流程的開始和結束節點
除了這三個核心元素之外還有個連線，不同的元素透過連線相連，決定了流程的執行順序。流程編排則主要是根據實際需求來構建這個流程圖，給流程圖新增元素，給元素繫結屬性，然後將不同的元素用連線連起來，從而構建完整的流程圖
一個流程裡可以包含多種不同型別的元素，例如一個流程裡會有很多工、也會有多個閘道器，但只會有一個開始節點和一個結束節點。一個元素可以繫結多個不同的屬性，不同的元素繫結的屬性也不同，例如任務元素可以繫結子任務，對於不同的子任務型別，繫結的屬性也會不同，例如指令碼型別子任務會繫結指令碼執行的主機、超時時間、以及失敗後的動作等，而審批型別的子任務則可以繫結審批型別是或籤或者與籤等
不同型別的任務渲染不同樣式的ICON，例如指令碼型別就會是一個指令碼的ICON、而審批型別則渲染一個使用者的ICON，同時也自定義了一些非BPMN標準樣式的ICON，例如API型別的任務，則渲染了一個自定義的標識API的ICON，以滿足我們多樣的子任務型別需求。不同的元素型別也會有不同的操作按鈕，例如普通連線只有刪除按鈕、而排他閘道器下的連線則會有編輯、預設閘道器和刪除按鈕、而對於任務元素的按鈕則更加豐富
流程編排還支援許多實用的小功能，例如流程變更的撤銷或重做，流程圖的放大或縮小、流程的匯入或匯出、以及全螢幕最大化編輯流程圖等等，流程編排也支援常見的快捷鍵操作，ctrl+c複製、ctrl+v貼上、ctrl+z撤銷等等，流程變更會自動提交到後端，後端儲存之後會觸發流程校驗，校驗流程是否有邏輯錯誤，判斷流程是否能正常執行，只有校驗透過的流程才能正常執行。如果流程校驗失敗還能在右上角展示校驗失敗原因，可根據提示修正流程
流程執行
編排完成的流程會以xml格式儲存在資料庫，任務執行時，後端程式會解析xml資料，找到開始節點，從開始節點依次按照設計好的線路去執行，執行過程實時返回給前端，前端則透過bpmn-js渲染出實時的流程圖，實現從編排到執行的視覺化展示。任務執行預設會進入任務執行詳情頁，在這個頁面切換到任務流程標籤，預設情況下左側是任務流程圖，右側則是任務執行的流轉日誌，點選任務節點則右側會變更為執行節點的詳情
點選不同的節點型別，右側詳情顯示不同的內容，例如上圖點選了傳送通知的節點，則顯示這個節點的詳情、操作、日誌和引數，如果是點選指令碼執行的節點，則還會顯示執行的主機以及主機執行的狀態等等，點選節點除了右側的詳情內容會變之外，還會在節點的右下角出現操作按鈕，這些操作按鈕會根據節點的不同型別及不同狀態而不同，例如對於未執行的節點會有暫停執行的按鈕，對於任務流型別的節點則會有檢視任務流執行詳情的按鈕，對於執行失敗的API型別節點來說，則會有重試&繼續、忽略&繼續和檢視子任務按鈕
透過這樣的設計，我們實現了任務流程從編排到執行的清晰視覺化，提升了任務執行過程的透明度，使得流程執行過程更加直觀，操作更加便捷易用