# 通过Astro大屏应用自定义AOM监控数据大屏 运维可观测大屏是基于华为云Astro低代码平台开发的面向不同场景、角色的运维监控大屏，基于现网质量、服务韧性、评估优化等N大主题域，通过运维数据建模、可视化等数据分析能力，提供企业级运维沙盘。满足您全场景、自动化、可量化、可观测的一体化监控解决方案，为业务健康和稳定保驾护航。 本入门以业务指标监控大屏为例，向您介绍如何将AOM中的监控数据呈现在大屏页面中，以及如何对页面进行二次开发。业务指标监控大屏统一接入了业务告警、前端性能监控、集群以及云服务指标。通过对业务指标的实时监控，实现业务的实时观察。 #### 约束与限制 - 如果需要在AOM控制台中使用华为云Astro大屏应用的功能，需要提前获取华为云Astro大屏应用的相关权限，详情请参见[华为云Astro大屏应用权限管理](https://support.huaweicloud.com/productdesc-astrocanvas/astrocanvas_03_0007.html)。 - "可观测大屏"功能当前仅在华北-北京四区域开放。 #### 操作流程 使用华为云Astro大屏应用自定义开发业务指标监控大屏的流程，如[图1]所示。 图1开发业务指标监控大屏流程 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002084296209.png) 1. [步骤一：申请华为云Astro大屏应用免费试用并开通模板] 注册华为账号，开通华为云，并申请免费试用华为云Astro大屏应用。未购买过华为云Astro大屏应用付费实例的用户，才能申请免费试用华为云Astro大屏应用（有效期为一个月）。自定义业务指标监控大屏前，需要先开通模板，模板开通后才能编辑该模板。 2. [步骤二：监控AOM系统指标数据] 将AOM系统监控数据（如告警数据、Prometheus监控数据等），呈现在业务指标监控大屏页面上。 3. [步骤三：自定义业务指标监控大屏] 根据自身实际业务的需求，自定义大屏页面呈现的内容。 #### 步骤一：申请华为云Astro大屏应用免费试用并开通模板 申请华为云Astro大屏应用免费试用一个月，并开通业务指标监控大屏模板。未购买过华为云Astro大屏应用付费实例的用户，才能申请免费试用华为云Astro大屏应用。如果您已购买过华为云Astro大屏应用付费实例，请直接单击"立即购买"。 1. 注册华为账号并实名认证。 使用华为云Astro大屏应用前，需要先注册一个华为账号并进行实名认证。如果您已有一个华为账号，可直接执行[2]。 1. 进入[华为云](https://www.huaweicloud.com/)官网，单击页面右上角的"注册"。 2. 参考[注册华为账号并开通华为云](https://support.huaweicloud.com/usermanual-account/account_id_001.html)中操作，完成注册。 3. 注册后参考[个人账号如何完成实名认证](https://support.huaweicloud.com/usermanual-account/zh-cn_topic_0077914254.html)或[企业账号如何完成实名认证](https://support.huaweicloud.com/usermanual-account/zh-cn_topic_0077914253.html)中操作，完成个人或企业账号实名认证。 2. 申请华为云Astro大屏应用免费试用。 1. 使用[1]中的账号，登录[华为云官网](https://www.huaweicloud.com/)，在顶部导航栏右侧单击"控制台"，进入华为云控制台。 2. 在左侧导航栏上方，单击![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002030501138.png)，选择服务实例所在的区域项目。 3. 单击![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002030659570.png)，在查找框中搜索"应用运维管理 AOM"，单击查找到的结果，进入AOM服务控制台。 4. 在左侧导航栏中，选择"仪表盘 \> 可观测大屏"。 5. 在可观测大屏页面，单击"免费试用"。 图2选择申请免费试用 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002030690882.png "点击放大") 6. 在弹出的页面，单击"立即购买"，再单击"去支付"。 7. 在支付页面，单击"确认付款"，即可免费开通华为云Astro大屏应用。 3. 开通业务指标监控大屏模板。 1. 在"仪表盘 \> 可观测大屏 \> 基础版"中，将鼠标放在业务指标监控大屏模板上，单击"立即开通"。 图3选择立即开通 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002048335126.png) 2. 在页面右侧，单击"立即购买"，即可开通该模板。 模板开通后，将鼠标放在模板上，可播放模板或对模板进行编辑。对模板进行操作时，请根据界面提示完成授权。 图4查看已开通的模板 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002048176826.png) #### 步骤二：监控AOM系统指标数据 通过设置模板中全局变量projectId、region、domainName和agencyName，将AOM系统监控数据呈现在大屏页面中。 1. 获取全局变量的值。 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获取全局变量的值 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002031698906.png "点击放大") 2. 修改全局变量的值。 1. 将鼠标放在模板上，单击"编辑"，系统自动为您创建一个业务指标监控大屏页面。 2. 单击已创建的页面，再单击"编辑页面"，进入业务指标监控大屏编辑页面。 图6单击页面 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002031762960.png "点击放大") 图7业务指标监控大屏编辑页面 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002067923969.png "点击放大") 3. 在业务指标监控大屏编辑页面上方，单击![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002067692569.png)。 4. 将全局变量projectId、region、domainName和agencyName的值，设置为[1]中获取的值，其他参数保持默认。 图8设置全局变量的值 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002042245508.png "点击放大") 5. 设置完成后，单击"保存"，再单击"确定"。 6. 单击![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002083931761.png)，预览效果，效果符合预期后单击![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002047774226.png)，保存页面。 图9显示AOM系统监控数据 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002047770904.png "点击放大") #### 步骤三：自定义业务指标监控大屏 使用模板创建大屏页面后，可根据自身的业务需求自定义页面呈现的内容。例如，通过API接口查询AOM阈值规则，并将数据呈现在通用表格中。如何通过接口查询AOM监控的阈值规则，请参见[查询阈值规则列表](https://support.huaweicloud.com/api-aom/ListAlarmRule.html)。 1. 新建转换器。 在使用OpenAPI中alarm的内容时，需要通过转换器将所需的字段转换为您所需要的格式。本示例中，需要将数据转换为数组格式。 1. 单击"默认团队空间"，返回华为云Astro大屏应用项目列表页面。 图10单击默认团队空间 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002069839997.png "点击放大") 2. 在顶部菜单栏中，选择"数据中心"。 3. 在左侧导航栏中，选择"转换器 \> 全部"。 4. 单击"新建转换器"，输入转换器的名称和目录，单击"确定"。 图11新建转换器 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002069048997.png "点击放大") 5. 在function filter(dataset)中，输入"return JSON.parse(dataset.body).thresholds"，即将API接口返回的数据转换为数组的形式。 6. 单击"手工输入"，输入测试数据，再单击"测试"，查看转换后的效果。 ``` { "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数据被转换为数组形式 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002047603468.png "点击放大") 7. 单击"保存"，完成转换器的创建。 2. 为业务指标监控大屏添加一个通用表格组件，用于显示AOM阈值规则。 1. 在业务指标监控大屏的编辑页面，从"全部组件 \> 文本" 中，拖拽一个通用表格组件到画布中，并调整位置。 图13拖拽一个通用表格到画布中 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002032941928.png "点击放大") 2. 选中通用表格组件，单击![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002047605784.png)，将"卡片装饰"设置为"无限"。 3. 选中通用表格组件，单击![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002068866613.png)，"数据类型"选择"HTTP连接器"。 4. 在"数据源选择"中，单击系统预置的"AOM开放接口"。 本示例中，华为云Astro大屏应用已为AOM预置了一个数据源，可直接使用。如果需要使用其他数据源，请参考[数据源管理](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6158.html)中操作创建。 图14选择AOM开放接口 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002032790532.png "点击放大") 5. 在"数据配置 \> 动作"中，选择"ListAlarmRule"。 6. 在"配置域名 \> Host"中，将"region"的"字段类型"设置为"变量"，"字段值"选择"region"。 图15设置region ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002069035441.png "点击放大") 7. 在"配置动作 \> Path"中，将"projectId"的"字段类型"设置为"表达式"，"字段值"设置为全局变量"projectId"。 图16设置projectId ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002069041481.png "点击放大") 8. "转换器"选择[1]中创建的，单击"测试API接口"，查看效果。 图17预览数据 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002069065441.png "点击放大") 如果不选择[1]中的转换器，直接单击"测试API接口"，会提示您返回的数据不是数组形式，如[图18]所示。 图18报错 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002032819318.png "点击放大") 9. 在"组件预览"中，拖拽所需的字段到"列数据"中，并预览效果。 图19拖拽字段到列数据中 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002032992070.png "点击放大") 10. 单击"保存"，返回大屏编辑页面。 11. 选中通用表格组件，单击![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002069086017.png)，开启"标题设置"并将内容设置为"阈值规则"。 通用表格组件其他属性介绍，请参见[通用表格](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6097.html)。 图20设置表格标题 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002083926177.png "点击放大") 3. 单击![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002032834866.png)，预览效果，效果符合预期后，单击![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002081798649.png)，保存页面。 图21最终展示效果 ![](https://support.huaweicloud.com/qs-aom2/zh-cn_image_0000002047766184.png "点击放大")