@blueking/ip-selector

0.3.0-beta.39 • Public • Published

蓝鲸 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 面板无效数据 -- --

/@blueking/ip-selector/

    Package Sidebar

    Install

    npm i @blueking/ip-selector

    Weekly Downloads

    359

    Version

    0.3.0-beta.39

    License

    ISC

    Unpacked Size

    14.6 MB

    Total Files

    19

    Last publish

    Collaborators

    • blueking