基于蓝鲸 Magicbox 和 Vue 的前端业务组件
#### 使用
##### service.js
``javascript`
export default {
fetchTopologyWithCount: (params) => {
return http.post('topology_width_count', { params })
},
fetchTopologyHost: (params) => {
return http.post('topology_host', { params })
},
fetchTopologyHostIdsNodes: (params) => {
return http.post('topology_host_ids_noodes', { params })
},
// ...
}
##### 创建组件
` javascript
import vue from 'vue';
import createFactory from '@blueking/ip-selector';
import Service from './service'
// 初始化配置,创建组件
const IpSelector = createFactory({
// 组件版本(改变版本重置用户自定义配置)
version: '',
// 需要支持的面板('staticTopo', 'dynamicTopo', 'dynamicGroup', 'serviceTemplate', 'setTemplate', 'serviceInstance', 'manualInput')
panelList: ['staticTopo', 'dynamicTopo', 'dynamicGroup', 'manualInput'],
// 面板选项的值是否唯一
unqiuePanelValue: false,
// 字段命名风格('camelCase', 'kebabCase')
nameStyle: 'camelCase',
// 主机列表全选模式,false: 本页全选;true: 跨页全选
hostTableDefaultSelectAllMode: false,
// 主机列表开启仅显示可用过滤
hostOnlyValid: false,
// 主机列表开启仅显示可用过滤时,手动输入 tab 判断主机可用的回调
manualInputHostValidMethod: () => true,
// 自定义主机列表列
hostTableCustomColumnList: [
// {
// key: 'collectStatus',
// index: 5,
// width: '100px',
// label: '采集状态',
// renderHead: h => h('span', '采集状态'),
// field: 'collect_status',
// renderCell: (h, row) => h('span', row.collect_status || '--'),
// }
],
nodeTableCustomColumnList: [], // 自定义动态拓扑列表列 同上
serviceTemplateTableCustomColumnList: [], // 自定义服务模板列表列 同上
setTemplateCustomColumnList: [], // 自定义集群模板列表列 同上
hostMemuExtends: [
// {
// name: '复制采集状态异常',
// action: () => {
// console.log('复制成功');
// },
// },
],
// 主机预览字段显示
hostViewFieldRender: (host, primaryField) => host.host_id,
// 主机列表显示列(默认值:['ip', 'ipv6', 'alive', 'osName']),按配置顺序显示列
// 内置所有列的 key ['ip', 'ipv6', 'cloudArea', 'alive', 'hostName', 'osName', 'coludVerdor', 'osType', 'hostId', 'agentId']
hostTableRenderColumnList: [],
// 选择完成后结果展示时是否统计主机总数(支持 dynamicTopo,dynamicGroup 两种类型的主机统计)
showViewFinalHostTotalCount: false,
// 创建时是否提示 service 信息
serviceConfigError: false,
// 需要的数据源配置(返回 Promise)
// 主机拓扑
fetchTopologyHostCount: Service.fetchTopologyWithCount,
fetchTopologyHostsNodes: Service.fetchTopologyHost, // (params: Object, hostOnlyValid: boolean) => Promise
fetchTopologyHostIdsNodes: Service.fetchTopogyHostIdList, // (params: Object, hostOnlyValid: boolean) => Promise
fetchHostsDetails: Service.fetchHostInfoByHostId,
fetchHostCheck: Service.fetchInputParseHostList,
fetchNodesQueryPath: Service.fetchNodePath,
fetchHostAgentStatisticsNodes: Service.fetchBatchNodeAgentStatistics,
// 动态分组
fetchDynamicGroups: Service.fetchDynamicGroup,
fetchHostsDynamicGroup: Service.fetchDynamicGroupHost,
fetchHostAgentStatisticsDynamicGroups: Service.fetchBatchGroupAgentStatistics,
// 服务模板
fetchServiceTemplates: Service.fetchServiceTemplates,
fetchNodesServiceTemplate: Service.fetchNodesServiceTemplate,
fetchHostServiceTemplate: Service.fetchHostServiceTemplate,
fetchHostAgentStatisticsServiceTemplate: Service.fetchHostAgentStatisticsServiceTemplate,
// 集群模板
fetchSetTemplates: Service.fetchSetTemplates,
fetchNodesSetTemplate: Service.fetchNodesSetTemplate,
fetchHostSetTemplate: Service.fetchHostSetTemplate,
fetchHostAgentStatisticsSetTemplate: Service.fetchHostAgentStatisticsSetTemplate,
// 服务实例
fetchSeriviceInstanceList: Service.fetchSeriviceInstanceList,
fetchSeriviceInstanceDetails: Service.fetchSeriviceInstanceDetails,
// DBM 白名单
fetchDBMWhitelist: Service.fetchDBMWhitelist,
// 自定义配置
fetchCustomSettings: Service.fetchAll,
updateCustomSettings: Service.update,
// 系统相关配置
fetchConfig: () => Promise.resolve()
.then(() => ({
// CMDB 动态分组链接
bk_cmdb_dynamic_group_url: http:xx.yy.zz.com/#/business/1/custom-query,http:xx.yy.zz.com/#/business/1/custom-query
// CMDB 拓扑节点链接
bk_cmdb_static_topo_url: ,http:xx.yy.zz.com/#/business/1/custom-query
// DBM 创建白名单链接
bk_dbm_whitelist: ,http:xx.yy.zz.com/#/business/1/custom-query
// CMDB 服务模版链接
bk_cmdb_service_template_url: ,http://xx.yy.com
// 人员选择器组件 HOST
bk_user_selector_host:
})),
})
// 全局注册
vue.component('IpSelector', IpSelector)
``
#### 组件 Props
| 属性名 | 说明 | 类型 | 可选值 | 默认值 | 必填 |
|---|---|---|---|---|---|
| mode | IP 选择的交互模式 | String | dialog| section | dialog | true |
| showDialog | mode 为 dialog 时弹出 dialog | Boolean | true| false | false | true |
| showView | IP 选择完成后是否显示结果 | Boolean | true| false | false | true |
| value | 默认结果 | Object | -- |
| false |
| originalValue | 编辑状态的初始值,用于和最新选择的值进行对比 | Object | -- |
| false |
| showViewDiff | 是否在选择结果面板显示数据对比 | Boolean | true| false | false | false |
| viewSearchKey | 在选择结果面板搜索主机 | String | -- | -- | false |
| defaultOutputFieldList | 蓝鲸监控场景下的默认主机输出字段 | Array | -- | ['ip', 'ipv6'] | -- |
| outputFieldOptionalHostTableColumn | 蓝鲸监控场景下主机输出备选字段列表 (为空则可选所有主机字段,值为主机 column 的 key) | Array | -- | -- | -- |
| outputFieldList | 蓝鲸监控场景下的配置主机输出字段 (如果要开启该功能则值不能为空) | Array | -- | -- | -- |
| readonly | 只读 | Boolean | true| false | -- | false |
| singleHostSelect | 静态拓扑主机单选 | Boolean | true| false | -- | false |
| disableDialogSubmitMethod | Dialog 确定按钮是否禁用 返回 Boolean 表示禁用状态,返回 String 表示禁用状态的 Tips | Function | -- | -- | false |
| disableHostMethod | 静态拓扑主机是否禁用 params: (hostData, hostList) 返回 Boolean 表示禁用状态,返回 String 表示禁用状态的 Tips | Function | -- | -- | false |
| allowHostListMissHostId | 允许 hostList 中缺少 hostId,通过 ip + cloudArea.id 回填选中主机 | Boolean | -- | -- | false |
| allowHostListOnlyIpv4 | 允许 hostList 中缺少 hostId,通过 ip 回填选中主机 | Boolean | -- | -- | false |
| keepHostFieldOutput | change 事件回调时输出完整的主机字段 | Boolean | -- | -- | false |
| completeHostList | 完整的主机列表,主机结果预览时直接渲染传入的值(部分使用场景只需要渲染提供的数据,不需要选择功能) | Array | -- | -- | false |
| completeContainerList | 完整的容器列表,主机结果预览时直接渲染传入的值(部分使用场景只需要渲染提供的数据,不需要选择功能) | Array | -- | -- | false |
| renderHostTag | 在主机 ip 后进行 tag 标记 |
| -- | -- | false |
| renderNodeTag | 在动态节点后进行 tag 标记 |
| -- | -- | false |
| service | 覆盖组件初始的数据源配置 | Object |
| -- | false |
| config | 覆盖组件初始的基础配置 | Object |
| -- | false |
#### 组件 Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| change | 选择完成 |
|
| close-dialog | 关闭 dialog | -- |
| panel-change | 面板切换 | -- |
| output-field-change | 输出字段更改 | ['ip', 'ipv6'] |
#### 实例方法
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| getHostList | 获取选择结果的主机列表 | -- |
|
| getHostIpv4List | 获取选择结果的主机 IPv4 列表 | -- |
|
| getHostIpv6List | 获取选择结果的主机 IPv6 列表 | -- |
|
| getAbnormalHostIpv4List | 获取选择结果的异常主机 IPv4 列表 | -- |
|
| getAbnormalHostIpv6List | 获取选择结果的异常主机 IPv6 列表 | -- |
|
| resetValue | 重置选择结果 | -- | -- |
| refresh | 刷新结果展示面板的主机状态 | -- | -- |
| collapseToggle | 切换结果展示面板的折叠状态 |
| -- |
| removeInvalidData | 移除 view 面板无效数据 | -- | -- |