编排详解
在开始入门中，我们学习到了如何创建一个微应用，下来我们将详细讲解 storyboard 的配置，及该如何使用构件及构件间事件传递。
为了更好的理解 storyboard 的常用配置及相关细节，这里以一个 CRUD 的页面案例来讲解，初学者请将如下代码复制到开始入门示例的storyboard.json，并开启构建查看效果：
yarn serve --auto-remote --server YOUR-EASYOPS-SERVER-IP。
下来我们将该 storyboard 拆解分块讲解
storyboard.json
虽然看起来很多，在拆解过程中，你会发现其实不复杂
{
"$schema": "../../node_modules/@next-core/brick-types/.schema/storyboard.json",
"imports": [
"@next-bricks/basic-bricks",
"@templates/cmdb-instances",
"@next-bricks/presentational-bricks",
"@next-bricks/providers-of-cmdb"
],
"app": {
"name": "Demo",
"id": "demo",
"homepage": "/demo"
},
"routes": [
{
"path": "${APP.homepage}",
"exact": true,
"menu": {
"breadcrumb": {
"items": [
{
"text": "APP 管理"
}
]
}
},
"bricks": [
{
"brick": "basic-bricks.micro-view",
"properties": {
"pageTitle": "APP 列表"
},
"slots": {
"content": {
"type": "bricks",
"bricks": [
{
"template": "cmdb-instances.instance-list",
"params": {
"objectId": "APP",
"detailUrlTemplates": {
"APP": "${APP.homepage}/#{instanceId}"
},
"presetConfigs": {
"fieldIds": ["name", "_hierarchy", "businesses", "owner"]
},
"relationLinkDisabled": true
}
}
]
}
}
}
]
},
{
"path": "${APP.homepage}/:instanceId",
"menu": {
"breadcrumb": {
"items": [
{
"text": "APP 管理",
"to": "${APP.homepage}"
}
]
},
"sidebarMenu": {
"title": "APP 管理",
"link": "${APP.homepage}",
"icon": {
"lib": "easyops",
"category": "app",
"icon": "mysql-resource"
},
"defaultCollapsed": false,
"menuItems": [
{
"icon": {
"lib": "fa",
"icon": "info-circle"
},
"text": "基本信息",
"to": "${APP.homepage}/${instanceId}/detail"
},
{
"icon": {
"lib": "fa",
"icon": "sitemap"
},
"text": "集群实例",
"to": "${APP.homepage}/${instanceId}/nodes",
"exact": true
}
]
}
},
"providers": [
"providers-of-cmdb.cmdb-object-api-get-object-all",
"providers-of-cmdb.instance-api-get-detail"
],
"type": "routes",
"routes": [
{
"path": "${APP.homepage}/:instanceId",
"exact": true,
"type": "redirect",
"redirect": "${APP.homepage}/${instanceId}/detail"
},
{
"path": "${APP.homepage}/:instanceId/detail",
"exact": true,
"menu": {
"breadcrumb": {
"items": [
{
"text": "基本信息"
}
]
}
},
"bricks": [
{
"brick": "basic-bricks.micro-view",
"slots": {
"titleBar": {
"type": "bricks",
"bricks": [
{
"brick": "basic-bricks.page-title",
"lifeCycle": {
"useResolves": [
{
"provider": "providers-of-cmdb\\.instance-api-get-detail",
"args": [
"APP",
"${instanceId}",
{
"params": {
"fields": "name"
}
}
],
"transform": {
"pageTitle": "name"
}
}
]
}
}
]
},
"toolbar": {
"type": "bricks",
"bricks": [
{
"brick": "basic-bricks.general-button",
"properties": {
"buttonName": "编辑",
"buttonUrl": "${APP.homepage}/${instanceId}/edit"
}
},
{
"template": "cmdb-instances.cmdb-instance-delete",
"params": {
"objectId": "APP",
"redirectUrl": "${APP.homepage}",
"instanceId": "${instanceId}",
"btnName": "删除"
}
}
]
},
"content": {
"type": "bricks",
"bricks": [
{
"brick": "cmdb-instances.instance-detail",
"properties": {
"instanceId": "${instanceId}",
"objectId": "APP",
"attrCustomConfigs": {
"_hierarchy": {
"useBrick": {
"brick": "presentational-bricks.brick-value-mapping",
"properties": {
"mapping": {
"接入上层": {
"color": "green"
},
"接入中层": {
"color": "green"
},
"接入下层": {
"color": "green"
},
"逻辑上层": {
"color": "blue"
},
"逻辑中层": {
"color": "blue"
},
"逻辑下层": {
"color": "blue"
},
"数据上层": {
"color": "cyan"
},
"数据中层": {
"color": "cyan"
},
"数据下层": {
"color": "cyan"
}
}
},
"transform": {
"value": "@{instanceData._hierarchy}"
}
}
}
},
"fieldsByTag": [
{
"name": "",
"fields": ["name", "_hierarchy"]
}
]
}
},
{
"template": "topology.instance-topology-view",
"params": {
"objectId": "APP",
"instanceId": "${instanceId}",
"initViewData": {
"object_id": "APP",
"child": [
{
"parentOut": "clusters",
"child": [
{
"parentOut": "deviceList"
}
]
}
]
}
}
}
]
}
}
}
]
},
{
"path": "${APP.homepage}/:instanceId/edit",
"exact": true,
"menu": {
"breadcrumb": {
"items": [
{
"text": "编辑"
}
]
}
},
"bricks": [
{
"brick": "basic-bricks.micro-view",
"slots": {
"content": {
"type": "bricks",
"bricks": [
{
"brick": "cmdb-instances.instance-edit",
"properties": {
"objectId": "APP",
"instanceId": "${instanceId}",
"fieldsByTag": [
{
"name": "基本信息",
"fields": ["name", "_hierarchy"]
}
]
},
"events": {
"update.single.success": [
{
"action": "message.success",
"args": ["编辑成功"]
},
{
"action": "history.push",
"args": ["${APP.homepage}/${instanceId}/detail"]
}
],
"update.single.failed": {
"action": "handleHttpError"
}
}
}
]
}
}
}
]
},
{
"path": "${APP.homepage}/:instanceId/nodes",
"exact": true,
"menu": {
"breadcrumb": {
"items": [
{
"text": "集群实例"
}
]
}
},
"bricks": [
{
"brick": "basic-bricks.micro-view",
"slots": {
"titleBar": {
"type": "bricks",
"bricks": [
{
"brick": "providers-of-cmdb.instance-api-get-detail",
"bg": true
},
{
"brick": "basic-bricks.page-title",
"lifeCycle": {
"useResolves": [
{
"name": "pageTitle",
"provider": "providers-of-cmdb\\.instance-api-get-detail",
"args": [
"APP",
"${instanceId}",
{
"params": {
"fields": "name"
}
}
],
"field": "name"
}
]
}
}
]
},
"content": {
"type": "bricks",
"bricks": [
{
"template": "cmdb-instances.instance-list",
"params": {
"objectId": "HOST",
"presetConfigs": {
"fieldIds": ["hostname", "ip"],
"query": {
"_deviceList_CLUSTER.appId.instanceId": {
"$eq": "${instanceId}"
}
}
}
}
}
]
}
}
}
]
}
]
}
]
}