深度揭秘！蚂蚁业务自定义监控大盘是怎么设计的？

简介：如今，体验诉求成为各个技术产品迭代升级过程中的重要诉求之一，蚂蚁监控产品亦是如此。一份业界体验优秀的自定义监控大盘是怎么样的？本文将介绍蚂蚁监控产品在监控大盘方面的创新设计与尝试，新版自定义监控大盘 Barad-Dur 在交互、体验与设计理念上有诸多创新点，同时将以模块的形式发布，支持二次开发，可同时为蚂蚁内外监控系统服务。

背景

蚂蚁业务自定义监控是蚂蚁监控产品中的一个重要功能，主要是通过自定义日志数据源并配置大盘的方式来解决蚂蚁业务实时监控的需求。在产品功能上，用户可以通过对一系列日志数据源的创建、组织、管理及表单配置化的方式，简单、快速组织出一个多维监控大盘。这项能力在当时是一个具有创新性的能力，从功能到产品体验上很好解决了当时蚂蚁复杂业务监控的痛点。

但是，随着蚂蚁监控产品的不断迭代更新，以及云原生可观测性对于监控大盘的高要求，大家对自定义监控的体验诉求也越来越多，包括更便捷的交互方式、更丰富的图表、更丰富的数据源、更多扩展点等，因此对监控大盘的升级也势在必行。

原文链接：https://developer.aliyun.com/article/766653

产品体验

WYSIWYG
当前优秀的监控大盘产品都标配一个“所见即所得（WYSIWYG）”编辑器，这方面能力是蚂蚁监控产品一直缺失的。在蚂蚁监控产品中配置大盘还是通过传统的表单方式，对用户非常不友好、学习曲线陡峭、配置效率不高。导致用户经常将配置大盘作为一项需求提给监控团队，由监控团队的“大盘配置专家”来进行配置，不仅存在较高的沟通成本，也给监控团队增加了很大的负担。

在新版监控大盘 Barad-Dur 中，对 WYSIWYG 编辑器的交互体验进行了大量工作，力求做到市面上优秀的编辑体验。

体验1：缩放
Barad-Dur 的缩放是可以在四周以及四角上进行的，而市面上常见的大盘产品只支持右下角的缩放。由于坐标系统一般采用的是 (left,top,width,height) 来定义一个矩形，最容易实现的就是右下角缩放，只需要变动 width 和 height 两个参数即可。最难实现的是左上角的缩放，四个参数需要同时变动，且关系比较复杂。特别是在引入网格布局后，缩放时要自动“吸附”临近的网格点，难上加难。

体验2：拖动
Barad-Dur 的图表拖动可以实现图表位置的一步交换，而市面上常见的大盘产品需要进行多次拖