Version: 2.x

Dashboard 接入指引

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

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

方案

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

最简单的，iframe 嵌入。此方案太挫
构件级别复用，重新搭。明显这种方案，如果后期 Dashboard 做了编排更改，那这边就不适用了
跳转过去，带上来源信息，并利用上框架支持的记忆能力

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

操作

来源信息

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

namespace，我们设计 Dashboard 有不同的命名空间，比如监控大屏(resource-monitor）、某资源监控（resource-monitor.${objectId}），CMDB(cmdb）、某资源 CMDB（cmdb.${objectId}）等，通过命名空间来隔离不同的微应用各自的 Dashboard，如果namespace不为空，则不能在 Dashboard 本身的列表页面看到这个 Dashboard。在创建 Dashboard 的时候，在 url 参数带上_namespace_，在保存 Dashboard 的时候，将自动将其值写入到数据库中
redirect，我们在创建或编辑 Dashboard 的时候，希望保存成功后能够自动跳转会老页面。请在 url 参数带上_redirect_，在保存时候，将会跳回到改uri
dashboardId，在跳转回来源页面的时候，如果能够自动打开该 Dashboard 详情页面就更好了。我们在redirect页面的时候会自动在后面加上&dashboardId=xxx参数，故要求redirect的 url 需要有 url 参数，如果没有的话，也需要加上?

举例说明

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

namespace设置为resource-moniotr.HOST
创建 Dashboard 的链接为：/dashboard/dashboard/create?objectId=HOST&instanceId=5c6f6cf0d8079&\_namespace_=resource-monitor.HOST&\_redirect\_=/resource-monitor/HOST/instance/5c6f6cf0d8079/dashboard?
编辑 Dashboard 的链接为：/dashboard/dashboard/5a08f1603e6b4/edit?objectId=HOST&instanceId=5c6f6cf0d8079&_namespace_=resource-monitor.HOST&_redirect_=/resource-monitor/HOST/instance/5c6f6cf0d8079/dashboard/5a08f1603e6b4?

Demo 截图

创建或编辑的 URL
编辑状态下，框架会自动记忆来源微应用的能力，以便于用户跳转
详情直接使用构件复用（已经封装成一个唯一的template，Dashboard 的配置本质就是一个 storyboard 片段）

{
  template: "dashboard.dashboard-detail",
  lifeCycle: {
    useResolves: [
      {
        provider:
          "providers-of-cmdb\\.instance-api-get-detail",
        args: [
          DASHBOARD_VIEW_OBJECT_ID,
          "${dashboardId}"
        ],
        transform: {
          dashboardData: "@{}"
        }
      }
    ]
  }
}

方案​

操作​

来源信息​

举例说明​

Demo 截图​

方案

操作

来源信息

举例说明

Demo 截图