优维低代码开发平台是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。

《高级指引:Dashboard 接入指引



Dashboard 即可以作为独立微应用入口也可以支撑其他微应用。作为独立微应用入口,他是一个大屏中心,作为支撑性微应用,他可以为监控提供指标图表能力,为 CMDB 提供统计报表能力。


那如何做好其他微应用与 Dashboard 的对接,总不能粗暴的直接链接跳转过来创建 Dashboard 吧。这个文章给出详细的开发指引文档:


# 方案


在说怎么做之前,先说下我们想要达到怎样的效果。当然,最好的效果是让用户无感,直接在微应用里面嵌入 Dashboard 微应用,这里有 3 种实现方式:


  1. 最简单的,iframe 嵌入。此方案太挫

  2. 构件级别复用,重新搭。明显这种方案,如果后期 Dashboard 做了编排更改,那这边就不适用了

  3. 跳转过去,带上来源信息,并利用上框架支持的记忆能力


对比上述 3 种方案,比较可行的是方案 3(因为 Brick 框架支持自动记忆来源微应用的跳转能力)


# 操作

来源信息


因为操作会涉及到 Dashboard 的 CRUD,我们肯定希望从某个微应用跳过来创建的 Dashboard 可自动去设置某些特定字段。Dashboard 这里提供了如下默认几个字段:


  1. namespace,我们设计 Dashboard 有不同的命名空间,比如监控大屏(resource-monitor)、某资源监控(resource-monitor.${objectId}),CMDB(cmdb)、某资源 CMDB(cmdb.${objectId})等,通过命名空间来隔离不同的微应用各自的 Dashboard,如果namespace不为空,则不能在 Dashboard 本身的列表页面看到这个 Dashboard。在创建 Dashboard 的时候,在 url 参数带上_namespace_,在保存 Dashboard 的时候,将自动将其值写入到数据库中

  2. redirect,我们在创建或编辑 Dashboard 的时候,希望保存成功后能够自动跳转会老页面。请在 url 参数带上_redirect_,在保存时候,将会跳回到改uri

  3. dashboardId,在跳转回来源页面的时候,如果能够自动打开该 Dashboard 详情页面就更好了。我们在redirect页面的时候会自动在后面加上&dashboardId=xxx参数,故要求redirect的 url 需要有 url 参数,如果没有的话,也需要加上?


# 举例说明


场景:在主机监控希望能够自定义主机的 Dashboard 分析:这里需要的是主机实例级别的 Dashboard,他应该是在主机实例监控页面有个 Dashboard 页面来对 Dashboard 做 CRUD。故:


  1. namespace设置为resource-moniotr.HOST

  2. 创建 Dashboard 的链接为:/dashboard/dashboard/create?objectId=HOST&instanceId=5c6f6cf0d8079&\_namespace_=resource-monitor.HOST&\_redirect\_=/resource-monitor/HOST/instance/5c6f6cf0d8079/dashboard?

  3. 编辑 Dashboard 的链接为:/dashboard/dashboard/5a08f1603e6b4/edit?objectId=HOST&instanceId=5c6f6cf0d8079&_namespace_=resource-monitor.HOST&_redirect_=/resource-monitor/HOST/instance/5c6f6cf0d8079/dashboard/5a08f1603e6b4?


# Demo 截图


1.创建或编辑的 URL


2.编辑状态下,框架会自动记忆来源微应用的能力,以便于用户跳转


3.详情直接使用构件复用(已经封装成一个唯一的template,Dashboard 的配置本质就是一个 storyboard 片段)






低代码开发 相关技术文章:

优维低代码:微应用的国际化配置

0基础也能学会!手把手教你做低代码开发

低代码开发平台哪家强?Top35已出炉!

Mendix预测!Low-CodeOps将大幅提升IT运营效率

优维低代码:Storyboard Functions 微应用函数

5719个字详解优维低代码在某银行&券商的实践