《阿里云飞天大数据平台 DataWorks 前端技术解密:工作流调度可视化》(脱敏版本)

本文涉及的产品
云原生大数据计算服务MaxCompute,500CU*H 100GB 3个月
大数据开发治理平台DataWorks,Serverless资源组抵扣包300CU*H
云原生大数据计算服务 MaxCompute,5000CU*H 100GB 3个月
简介: ## ![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2021/png/13481/1614773723538-e8d99a86-b04d-47bb-86ad-90cdb07ac657.png#height=220&id=QQWI7&margin=%5Bobject%20Object%5D&name=image.png&or

image.png

一、摘要

工作流调度的可视化,主要是将任务的依赖关系展示出来,帮助用户尽快的发现和定位问题。面对业务数据量暴增(千万级)的情景下,如何从用户视角更好的展示调度关系,成为工作流调度可视化的重点和难点。
针对上述问题,我们从图渲染性能、布局以及交互三个方面,优化了工作流调度的可视化展示。

  • 性能优化:基于新版G6,解决渲染层的性能;通过算法优化,解决业务数据处理的性能;
  • 布局创新:结合Dagre和网格布局算法,实现Dagre+变种网格的子图布局方案;
  • 交互创新:通过一些新交互和视角,帮助用户快速定位问题。

二、业务背景

1. 业务介绍

工作流调度,意在通过上下游的设置,将不同的任务编排成一个DAG,从而满足处理过程中相互依赖的需求。工作流调度的可视化即需要将编排的DAG、以及DAG中节点的信息可视化的展示出来。
在DataWorks运维中心的业务中,DAG中需要包含的业务信息如下。

  • 节点。包含名称、状态、实例序列、类型、跨项目、是否关联报警。
  • 。包含跨region关系、自依赖关系以及check流程关系。
  • 工具栏。节点搜索功能。
  • 信息卡片。展示更多节点的信息和操作。
  • 节点详情。展示节点的全量信息,包括基本信息、运行日志和操作日志等。

2. 业务特征

DataWorks工作流的DAG图有以下三个特点:

  • 数据量大。峰值情况达到 百万级别
  • 同层节点数多。峰值情况达到 十万级别
  • 关系复杂。关系数峰值达到 千万级别 。平均是节点数的3倍。

image.png

三、当前痛点

随着集团内数据业务的暴增,这张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,并无依赖关系。

image.png                             image.png
图a 图b

2.2 同层节点数多

业务特性,导致同层节点数可能非常多,往往会出现图c所展示的情况。用户无法一屏看到节点的所有下游关系,往往需要通过左右拖拽才能看到其他节点信息。
image.png
图c

3. 缺失分析能力

可视化本身要解决的问题,就是将数据中展示的信息用更容易被人理解的形式传达给用户。回到工作流调度DAG本身的业务来说,其需要传达给用户的,主要有以下内容:

  • 关系展示:以用户关心的节点为中心,展示该节点的上下游依赖。
  • 上游分析:当节点运行被阻塞时,展示阻塞链路的原因和解法。
  • 下游影响:针对某个节点,分析其下游影响面。

然而现在的可视化方案,并不能很好的传达以上的信息。如下图中,如何帮助用户快速定位graph_edge_inst节点的阻塞源头。
image.png

四、解决方案

1. 图元素设计

如业务介绍中描述的DAG元素中需要表达的业务信息,最终的设计样式如下:

1.1 节点

节点根据业务特性,需要分为两个类型:任务和实例。
任务:用户通常关心以下信息,任务名称、任务类型、任务是否跨项目依赖。
实例:用户通常关心以下信息,名称、实例状态、实例序列、任务类型、是否跨项目依赖、是否配置dqc校验规则。
image.png

1.2 边

相对节点信息而言,边上展示的信息相对简单。
image.png

1.3 工具栏

工具栏中主要提供常用的图操作和一些基本的分析工具,包括:聚合工具、节点搜索、刷新、放大/缩小、视图切换等。
image.png

1.4 信息卡片

单击节点,触发信息卡片,将其作为一种辅助展示形式,用于展示更多的节点信息。
image.png

1.5 节点详情

双击节点,触发节点详情面板,用于展示节点的全量信息。
image.png

2. 图布局设计

图布局是指图中节点的排布方式,根据图的数据结构不同,布局可以分为两类:一般图布局、树图布局。适用于我们业务的是一般图布局。常见的图布局算法有:力导布局、Dagre布局、网格布局、同心圆布局等。
结合业务的“图宽”特征,发现单一的一种布局方式已经远远不能满足我们的业务需求。因此我们设计一种新的子图布局方案,方案核心:

  • 同层分组:同层节点数过多时,进行分组聚合。
  • 维度聚合:提供针对某个业务维度,对数据进行聚合分析。
  • 辅助视角:聚合后损失的信息,通过辅助视角提供。

2.1 同层分组

同层分组的视角如下图所示,同时在分组内增加翻页功能,展示更多信息,节省画布空间。
image.png
分组后,针对分组内的节点,丢失了其直接上下游的信息,提供节点的独立操作,便于用户针对自己关心的节点进行进一步分析。
image.png

2.2 维度聚合

通过一些方式,对节点进行聚合操作。聚合节点的设计如下图所示:
image.png
与分组组合的设计如下图所示:
image.png

2.3 辅助展示

聚合后提供辅助视角,查看聚合后的节点详情。
image.png

3. 图分析设计

即便在上述的布局方案下,大数据量下的节点问题定位,对用户来说,还是很难。
因此我们针对用户常用的业务分析场景,提供了聚合分析、上游分析以及下游分析工具,尽可能的帮用户快速分析任务问题和影响。

3.1 聚合工具

当节点的上游或者下游过多时,没法一眼找到用户想要的节点。这时,可以通过对某个维度做聚合,然后再进行细分查找。
image.png

3.2 上游阻塞链路定位

当节点在期望时间内仍处于未运行状态时,用户需要查看阻塞任务的原因。
新增上游分析功能,针对未运行的节点,一键定位上游的阻塞节点。

  1. 上游分析页面只展示阻塞当前实例运行的实例,即:非成功态的上游实例
  2. 如果一级上游中存在未运行的实例,则需要对该实例进行上游分析,将阻塞该实例运行的上游展示出来。
  3. 出于性能和稳定性的考虑,默认分析6层上游,用户可以选择继续分析。

3.3 下游影响分析

当用户需要修改自己的节点时,需要清楚修改后的影响到的业务和范围。
新增下游分析功能,结合聚合视图,可高效直观地完成当前节点的影响分析。

  1. 提供合并和分层两种视角。
  2. 合并视角下,对当前任务的所有下游(1/2/3/...级)做聚合,支持的聚合维度有:工作空间、责任人、优先级、状态。
  3. 分层视角下,对任务的各层下游分别做聚合,支持的维度同上。
  4. 当用户点击某个分组,画布右下角展示分组中的任务列表,点击某个任务可以跳转到对应的列表并定位该任务。
  5. 出于性能和稳定性的考虑,默认分析6层上游,用户可以选择继续分析。

五、参考文献

  1. https://airflow.apache.org/
  2. https://azkaban.readthedocs.io/en/latest/useAzkaban.html
  3. http://106.75.43.194:8888/dolphinscheduler/ui/#/home
  4. https://antv-g6.gitee.io/zh/docs/manual/middle/elements/edges/built-in/polyline
  5. https://www.gdcvault.com/play/1022094/JPS-Over-100x-Faster-than

[
](https://yuque.antfin.com/cfe/ngcn7p/fqpqs6)

相关实践学习
基于MaxCompute的热门话题分析
本实验围绕社交用户发布的文章做了详尽的分析,通过分析能得到用户群体年龄分布,性别分布,地理位置分布,以及热门话题的热度。
一站式大数据开发治理平台DataWorks初级课程
DataWorks 从 2009 年开始,十ー年里一直支持阿里巴巴集团内部数据中台的建设,2019 年双 11 稳定支撑每日千万级的任务调度。每天阿里巴巴内部有数万名数据和算法工程师正在使用DataWorks,承了阿里巴巴 99%的据业务构建。本课程主要介绍了阿里巴巴大数据技术发展历程与 DataWorks 几大模块的基本能力。 课程目标  通过讲师的详细讲解与实际演示,学员可以一边学习一边进行实际操作,可以深入了解DataWorks各大模块的使用方式和具体功能,让学员对DataWorks数据集成、开发、分析、运维、安全、治理等方面有深刻的了解,加深对阿里云大数据产品体系的理解与认识。 适合人群  企业数据仓库开发人员  大数据平台开发人员  数据分析师  大数据运维人员  对于大数据平台、数据中台产品感兴趣的开发者
相关文章
|
1月前
|
前端开发
如何解决前端工程化中出现的版本冲突问题?
如何解决前端工程化中出现的版本冲突问题?
53 4
|
1月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
1月前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
162 29
|
27天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
35 6
|
1月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
45 5
|
1月前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。
|
1月前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
35 3
|
1月前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
1月前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
45 3