@blueking/ip-selector

蓝鲸 IPv6 选择器

使用

service.js

  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 })
    },
    // ...
  }

创建组件

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: [],

  // 创建时是否提示 service 信息
  serviceConfigError: false,

  // 需要的数据源配置（返回 Promise）
  // 主机拓扑
  fetchTopologyHostCount: Service.fetchTopologyWithCount,
  fetchTopologyHostsNodes: Service.fetchTopologyHost, // (params: Object, hostOnlyValid: boolean) => Promise<any[]>
  fetchTopologyHostIdsNodes: Service.fetchTopogyHostIdList, // (params: Object, hostOnlyValid: boolean) => Promise<any[]>
  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`,
      // 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.zz.com/#/business/1/custom-query`,
    })),
})

// 全局注册
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	--	{ hostList: [], nodeList: [], dynamicGroupList: [], serviceTemplateList: [], setTemplateList: [] }	false
originalValue	编辑状态的初始值，用于和最新选择的值进行对比	Object	--	{ hostList: [], nodeList: [], dynamicGroupList: [], serviceTemplateList: [], setTemplateList: [] }	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	change 事件回调时输出完整的主机字段	Boolean	--	--	false
service	覆盖组件初始的数据源配置	Object	{ fetchTopologyHostCount: () => Promise.resolve([]), fetchTopologyHostsNodes: () => Promise.resolve([]), fetchTopologyHostIdsNodes: () => Promise.resolve([]), }	--	false
config	覆盖组件初始的基础配置	Object	{ panelList: [ 'staticTopo', 'dynamicTopo', 'dynamicGroup', 'manualInput' ], unqiuePanelValue: true, nameStyle: 'camelCase', }	--	false

组件 Events

事件名	说明	参数
change	选择完成	// 根据配置的 panelList 返回关联结果字段 { hostList: [ { hostId: 1111, ip: 'x.x.x.x', cloudArea: { id: 2222, name: 'default area', } } ], nodeList: [ { objectId: 'module', instanceId: 3333 } ], dynamicGroupList: [ { id: 4444 } ], serviceTemplateList: [ { id: 5555 } ], setTemplateList: [ { id: 666 } ] }
close-dialog	关闭 dialog	--
panel-change	面板切换	--
output-field-change	输出字段更改	['ip', 'ipv6']

实例方法

方法名	说明	参数	返回值
getHostList	获取选择结果的主机列表	--	Promise.resolve([ { host_id: 1, ip: '1.1.1.1', ... } ])
getHostIpv4List	获取选择结果的主机 IPv4 列表	--	[ 1.1.1.1, ... ]
getHostIpv6List	获取选择结果的主机 IPv6 列表	--	[ ee.fff.ddd.111, ... ]
getAbnormalHostIpv4List	获取选择结果的异常主机 IPv4 列表	--	[ 2.2.2.2, ... ]
getAbnormalHostIpv6List	获取选择结果的异常主机 IPv6 列表	--	[ ee.fff.ddd.222, ... ]
resetValue	重置选择结果	--	--
refresh	刷新结果展示面板的主机状态	--	--
collapseToggle	切换结果展示面板的折叠状态	true // 展开所有 false // 收起所有 [ // 展开指定 'host', 'node', 'dynamicGroup', 'setTemplate', 'serviceTemplate' ]	--
removeInvalidData	移除 view 面板无效数据	--	--