通过AstroCanvas自定义AOM监控数据大屏

运维可观测大屏是基于华为云Astro低代码平台开发的面向不同场景、角色的运维监控大屏，基于现网质量、服务韧性、评估优化等N大主题域，通过运维数据建模、可视化等数据分析能力，提供企业级运维沙盘。满足您全场景、自动化、可量化、可观测的一体化监控解决方案，为业务健康和稳定保驾护航。

本入门以业务指标监控大屏为例，向您介绍如何将AOM中的监控数据呈现在大屏页面中，以及如何对页面进行二次开发。业务指标监控大屏统一接入了业务告警、前端性能监控、集群以及云服务指标。通过对业务指标的实时监控，实现业务的实时观察。

约束与限制

如果需要在AOM控制台中使用AstroCanvas的功能，需要提前获取AstroCanvas的相关权限，详情请参见AstroCanvas权限管理。
“可观测大屏”功能当前仅在华北-北京四区域开放。

操作流程

使用AstroCanvas自定义开发业务指标监控大屏的流程，如图1所示。

图1 开发业务指标监控大屏流程

步骤一：申请AstroCanvas免费试用并开通模板
注册华为账号，开通华为云，并申请免费试用AstroCanvas。未购买过AstroCanvas付费实例的用户，才能申请免费试用AstroCanvas（有效期为一个月）。自定义业务指标监控大屏前，需要先开通模板，模板开通后才能编辑该模板。
步骤二：监控AOM系统指标数据
将AOM系统监控数据（如告警数据、Prometheus监控数据等），呈现在业务指标监控大屏页面上。
步骤三：自定义业务指标监控大屏
根据自身实际业务的需求，自定义大屏页面呈现的内容。

步骤一：申请AstroCanvas免费试用并开通模板

申请AstroCanvas免费试用一个月，并开通业务指标监控大屏模板。未购买过AstroCanvas付费实例的用户，才能申请免费试用AstroCanvas。如果您已购买过AstroCanvas付费实例，请直接单击“立即购买”。

注册华为账号并实名认证。

使用AstroCanvas前，需要先注册一个华为账号并进行实名认证。如果您已有一个华为账号，可直接执行2。
1. 进入华为云官网，单击页面右上角的“注册”。
2. 参考注册华为账号并开通华为云中操作，完成注册。
3. 注册后参考个人账号如何完成实名认证或企业账号如何完成实名认证中操作，完成个人或企业账号实名认证。
申请AstroCanvas免费试用。
1. 使用1中的账号，登录华为云官网，在顶部导航栏右侧单击“控制台”，进入华为云控制台。
2. 在左侧导航栏上方，单击，选择服务实例所在的区域项目。
3. 单击，在查找框中搜索“应用运维管理 AOM”，单击查找到的结果，进入AOM服务控制台。
4. 在左侧导航栏中，选择“仪表盘 > 可观测大屏”。
5. 在可观测大屏页面，单击“免费试用”。
  图2 选择申请免费试用
6. 在弹出的页面，单击“立即购买”，再单击“去支付”。
7. 在支付页面，单击“确认付款”，即可免费开通AstroCanvas。
开通业务指标监控大屏模板。
1. 在“仪表盘 > 可观测大屏 > 基础版”中，将鼠标放在业务指标监控大屏模板上，单击“立即开通”。
  图3 选择立即开通
2. 在页面右侧，单击“立即购买”，即可开通该模板。
  模板开通后，将鼠标放在模板上，可播放模板或对模板进行编辑。对模板进行操作时，请根据界面提示完成授权。
  
  图4 查看已开通的模板

步骤二：监控AOM系统指标数据

通过设置模板中全局变量projectId、region、domainName和agencyName，将AOM系统监控数据呈现在大屏页面中。

获取全局变量的值。
1. 将鼠标放在模板上，单击“播放”。
2. 在跳转的页面中，获取projectId、region、domainName和agencyName的值。
  例如，跳转页面的URL地址为https://8cc59***644.canvas.astro.***.com/magno/render/share/1922823178***b65df967b4?_dmax_time=1727**875&agencyName=Canvas_AOM_Agency&domainName=paas_astro_public&projectId=e60ff07077***6e1781a&region=region-7&_dmax_signature=L6PZM7avdA***tk%3D，请记录对应变量的值。
  图5 获取全局变量的值
修改全局变量的值。
1. 将鼠标放在模板上，单击“编辑”，系统自动为您创建一个业务指标监控大屏页面。
2. 单击已创建的页面，再单击“编辑页面”，进入业务指标监控大屏编辑页面。
  图6 单击页面
  
  图7 业务指标监控大屏编辑页面
3. 在业务指标监控大屏编辑页面上方，单击。
4. 将全局变量projectId、region、domainName和agencyName的值，设置为1中获取的值，其他参数保持默认。
  图8 设置全局变量的值
5. 设置完成后，单击“保存”，再单击“确定”。
6. 单击，预览效果，效果符合预期后单击，保存页面。
  图9 显示AOM系统监控数据

步骤三：自定义业务指标监控大屏

使用模板创建大屏页面后，可根据自身的业务需求自定义页面呈现的内容。例如，通过API接口查询AOM阈值规则，并将数据呈现在通用表格中。如何通过接口查询AOM监控的阈值规则，请参见查询阈值规则列表。

新建转换器。

在使用OpenAPI中alarm的内容时，需要通过转换器将所需的字段转换为您所需要的格式。本示例中，需要将数据转换为数组格式。

单击“默认团队空间”，返回AstroCanvas项目列表页面。
图10 单击默认团队空间
在顶部菜单栏中，选择“数据中心”。
在左侧导航栏中，选择“转换器 > 全部”。
单击“新建转换器”，输入转换器的名称和目录，单击“确定”。
图11 新建转换器
在function filter(dataset)中，输入“return JSON.parse(dataset.body).thresholds”，即将API接口返回的数据转换为数组的形式。

单击“手工输入”，输入测试数据，再单击“测试”，查看转换后的效果。

{
    "status": {
        "protocolVersion": "HTTP/1.1",
        "statusCode": 200,
        "reasonPhrase": ""
    },
    "headers": null,
    "type": null,
    "body": "{\"meta_data\":{\"count\":22,\"start\":null,\"total\":22},\"thresholds\":[{\"alarm_rule_name\":\"dasdasd\",\"alarm_description\":\"\",\"alarm_rule_id\":\"1241079310786232329\",\"id_turn_on\":true,\"type\":null,\"action_enabled\":false,\"ok_actions\":[],\"policy_name\":null,\"alarm_actions\":[],\"insufficient_data_actions\":[],\"state_updated_timestamp\":null,\"state_value\":\"insufficientdata\",\"state_reason\":\"\",\"metric_name\":\"cpuUsage\",\"statistic\":\"average\",\"namespace\":\"PAAS.NODE\",\"dimensions\":[{\"name\":\"clusterId\",\"value\":\"\"},{\"name\":\"nameSpace\",\"value\":\"\"},{\"name\":\"nodeIP\",\"value\":\"\"}],\"resources\":[],\"evaluation_periods\":1,\"period\":60000,\"unit\":\"Percent\",\"threshold\":\"8989\",\"alarm_advice\":null,\"comparison_operator\":\">=\",\"alarm_level\":\"1\"},{\"alarm_rule_name\":\"xpfxpf123\",\"alarm_description\":\"\",\"alarm_rule_id\":\"1220687366688079872\",\"id_turn_on\":true,\"type\":null,\"action_enabled\":false,\"ok_actions\":[],\"policy_name\":null,\"alarm_actions\":[],\"insufficient_data_actions\":[],\"state_updated_timestamp\":null,\"state_value\":\"insufficientdata\",\"state_reason\":\"\",\"metric_name\":\"cpuUsage\",\"statistic\":\"average\",\"namespace\":\"PAAS.AGGR\",\"dimensions\":[{\"name\":\"clusterId\",\"value\":\"\"},{\"name\":\"clusterName\",\"value\":\"\"}],\"resources\":[],\"evaluation_periods\":1,\"period\":60000,\"unit\":\"Percent\",\"threshold\":\"0\",\"alarm_advice\":null,\"comparison_operator\":\">=\",\"alarm_level\":\"1\"}]}",
    "requestUrl": "https://域名.com/v2/fc6d40abe7e54492b7c7aa5a29d6cbab/alarm-rules",
    "requestMethod": "get",
    "requestHeaders": null,
    "requestBody": null
}

图12 数据被转换为数组形式
点击放大

单击“保存”，完成转换器的创建。

为业务指标监控大屏添加一个通用表格组件，用于显示AOM阈值规则。
1. 在业务指标监控大屏的编辑页面，从“全部组件 > 文本” 中，拖拽一个通用表格组件到画布中，并调整位置。
  图13 拖拽一个通用表格到画布中
2. 选中通用表格组件，单击，将“卡片装饰”设置为“无限”。
3. 选中通用表格组件，单击，“数据类型”选择“HTTP连接器”。
4. 在“数据源选择”中，单击系统预置的“AOM开放接口”。
  本示例中，AstroCanvas已为AOM预置了一个数据源，可直接使用。如果需要使用其他数据源，请参考数据源管理中操作创建。
  图14 选择AOM开放接口
5. 在“数据配置 > 动作”中，选择“ListAlarmRule”。
6. 在“配置域名 > Host”中，将“region”的“字段类型”设置为“变量”，“字段值”选择“region”。
  图15 设置region
7. 在“配置动作 > Path”中，将“projectId”的“字段类型”设置为“表达式”，“字段值”设置为全局变量“projectId”。
  图16 设置projectId
8. “转换器”选择1中创建的，单击“测试API接口”，查看效果。
  图17 预览数据
  
  如果不选择1中的转换器，直接单击“测试API接口”，会提示您返回的数据不是数组形式，如图18所示。
  图18 报错
9. 在“组件预览”中，拖拽所需的字段到“列数据”中，并预览效果。
  图19 拖拽字段到列数据中
10. 单击“保存”，返回大屏编辑页面。
11. 选中通用表格组件，单击，开启“标题设置”并将内容设置为“阈值规则”。
  通用表格组件其他属性介绍，请参见通用表格。
  图20 设置表格标题
单击，预览效果，效果符合预期后，单击，保存页面。

图21 最终展示效果