mirror of https://github.com/veops/cmdb.git
feat(ui): auto discovery
This commit is contained in:
songlh
parent
adac2129fc
commit
a8eb5126ea
|
|
@ -54,6 +54,84 @@
|
|||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cmdb-manual_warehousing</div>
|
||||
<div class="code-name">&#xe95f;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cmdb-not_warehousing</div>
|
||||
<div class="code-name">&#xe95d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cmdb-warehousing</div>
|
||||
<div class="code-name">&#xe95e;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cmdb-prompt</div>
|
||||
<div class="code-name">&#xe95c;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cmdb-arrow</div>
|
||||
<div class="code-name">&#xe95b;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cmdb-automatic_inventory</div>
|
||||
<div class="code-name">&#xe95a;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cmdb-week_additions</div>
|
||||
<div class="code-name">&#xe959;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cmdb-month_additions</div>
|
||||
<div class="code-name">&#xe958;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cmdb-rule</div>
|
||||
<div class="code-name">&#xe955;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cmdb-executing_machine</div>
|
||||
<div class="code-name">&#xe956;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cmdb-resource</div>
|
||||
<div class="code-name">&#xe957;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cmdb-discovery_resources</div>
|
||||
<div class="code-name">&#xe954;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">cmdb-association</div>
|
||||
<div class="code-name">&#xe953;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">ops-is_dynamic-disabled</div>
|
||||
|
|
@ -5100,9 +5178,9 @@
|
|||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1717726223524') format('woff2'),
|
||||
url('iconfont.woff?t=1717726223524') format('woff'),
|
||||
url('iconfont.ttf?t=1717726223524') format('truetype');
|
||||
src: url('iconfont.woff2?t=1718872392430') format('woff2'),
|
||||
url('iconfont.woff?t=1718872392430') format('woff'),
|
||||
url('iconfont.ttf?t=1718872392430') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
|
|
@ -5128,6 +5206,123 @@
|
|||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont cmdb-manual_warehousing"></span>
|
||||
<div class="name">
|
||||
cmdb-manual_warehousing
|
||||
</div>
|
||||
<div class="code-name">.cmdb-manual_warehousing
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont cmdb-not_warehousing"></span>
|
||||
<div class="name">
|
||||
cmdb-not_warehousing
|
||||
</div>
|
||||
<div class="code-name">.cmdb-not_warehousing
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont cmdb-warehousing"></span>
|
||||
<div class="name">
|
||||
cmdb-warehousing
|
||||
</div>
|
||||
<div class="code-name">.cmdb-warehousing
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont cmdb-prompt"></span>
|
||||
<div class="name">
|
||||
cmdb-prompt
|
||||
</div>
|
||||
<div class="code-name">.cmdb-prompt
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont cmdb-arrow"></span>
|
||||
<div class="name">
|
||||
cmdb-arrow
|
||||
</div>
|
||||
<div class="code-name">.cmdb-arrow
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont cmdb-automatic_inventory"></span>
|
||||
<div class="name">
|
||||
cmdb-automatic_inventory
|
||||
</div>
|
||||
<div class="code-name">.cmdb-automatic_inventory
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont cmdb-week_additions"></span>
|
||||
<div class="name">
|
||||
cmdb-week_additions
|
||||
</div>
|
||||
<div class="code-name">.cmdb-week_additions
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont cmdb-month_additions"></span>
|
||||
<div class="name">
|
||||
cmdb-month_additions
|
||||
</div>
|
||||
<div class="code-name">.cmdb-month_additions
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont cmdb-rule"></span>
|
||||
<div class="name">
|
||||
cmdb-rule
|
||||
</div>
|
||||
<div class="code-name">.cmdb-rule
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont cmdb-executing_machine"></span>
|
||||
<div class="name">
|
||||
cmdb-executing_machine
|
||||
</div>
|
||||
<div class="code-name">.cmdb-executing_machine
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont cmdb-resource"></span>
|
||||
<div class="name">
|
||||
cmdb-resource
|
||||
</div>
|
||||
<div class="code-name">.cmdb-resource
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont cmdb-discovery_resources"></span>
|
||||
<div class="name">
|
||||
cmdb-discovery_resources
|
||||
</div>
|
||||
<div class="code-name">.cmdb-discovery_resources
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont cmdb-association"></span>
|
||||
<div class="name">
|
||||
cmdb-association
|
||||
</div>
|
||||
<div class="code-name">.cmdb-association
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont ops-is_dynamic-disabled"></span>
|
||||
<div class="name">
|
||||
|
|
@ -12697,6 +12892,110 @@
|
|||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#cmdb-manual_warehousing"></use>
|
||||
</svg>
|
||||
<div class="name">cmdb-manual_warehousing</div>
|
||||
<div class="code-name">#cmdb-manual_warehousing</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#cmdb-not_warehousing"></use>
|
||||
</svg>
|
||||
<div class="name">cmdb-not_warehousing</div>
|
||||
<div class="code-name">#cmdb-not_warehousing</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#cmdb-warehousing"></use>
|
||||
</svg>
|
||||
<div class="name">cmdb-warehousing</div>
|
||||
<div class="code-name">#cmdb-warehousing</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#cmdb-prompt"></use>
|
||||
</svg>
|
||||
<div class="name">cmdb-prompt</div>
|
||||
<div class="code-name">#cmdb-prompt</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#cmdb-arrow"></use>
|
||||
</svg>
|
||||
<div class="name">cmdb-arrow</div>
|
||||
<div class="code-name">#cmdb-arrow</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#cmdb-automatic_inventory"></use>
|
||||
</svg>
|
||||
<div class="name">cmdb-automatic_inventory</div>
|
||||
<div class="code-name">#cmdb-automatic_inventory</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#cmdb-week_additions"></use>
|
||||
</svg>
|
||||
<div class="name">cmdb-week_additions</div>
|
||||
<div class="code-name">#cmdb-week_additions</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#cmdb-month_additions"></use>
|
||||
</svg>
|
||||
<div class="name">cmdb-month_additions</div>
|
||||
<div class="code-name">#cmdb-month_additions</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#cmdb-rule"></use>
|
||||
</svg>
|
||||
<div class="name">cmdb-rule</div>
|
||||
<div class="code-name">#cmdb-rule</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#cmdb-executing_machine"></use>
|
||||
</svg>
|
||||
<div class="name">cmdb-executing_machine</div>
|
||||
<div class="code-name">#cmdb-executing_machine</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#cmdb-resource"></use>
|
||||
</svg>
|
||||
<div class="name">cmdb-resource</div>
|
||||
<div class="code-name">#cmdb-resource</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#cmdb-discovery_resources"></use>
|
||||
</svg>
|
||||
<div class="name">cmdb-discovery_resources</div>
|
||||
<div class="code-name">#cmdb-discovery_resources</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#cmdb-association"></use>
|
||||
</svg>
|
||||
<div class="name">cmdb-association</div>
|
||||
<div class="code-name">#cmdb-association</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#ops-is_dynamic-disabled"></use>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3857903 */
|
||||
src: url('iconfont.woff2?t=1717726223524') format('woff2'),
|
||||
url('iconfont.woff?t=1717726223524') format('woff'),
|
||||
url('iconfont.ttf?t=1717726223524') format('truetype');
|
||||
src: url('iconfont.woff2?t=1718872392430') format('woff2'),
|
||||
url('iconfont.woff?t=1718872392430') format('woff'),
|
||||
url('iconfont.ttf?t=1718872392430') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
|
|
@ -13,6 +13,58 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.cmdb-manual_warehousing:before {
|
||||
content: "\e95f";
|
||||
}
|
||||
|
||||
.cmdb-not_warehousing:before {
|
||||
content: "\e95d";
|
||||
}
|
||||
|
||||
.cmdb-warehousing:before {
|
||||
content: "\e95e";
|
||||
}
|
||||
|
||||
.cmdb-prompt:before {
|
||||
content: "\e95c";
|
||||
}
|
||||
|
||||
.cmdb-arrow:before {
|
||||
content: "\e95b";
|
||||
}
|
||||
|
||||
.cmdb-automatic_inventory:before {
|
||||
content: "\e95a";
|
||||
}
|
||||
|
||||
.cmdb-week_additions:before {
|
||||
content: "\e959";
|
||||
}
|
||||
|
||||
.cmdb-month_additions:before {
|
||||
content: "\e958";
|
||||
}
|
||||
|
||||
.cmdb-rule:before {
|
||||
content: "\e955";
|
||||
}
|
||||
|
||||
.cmdb-executing_machine:before {
|
||||
content: "\e956";
|
||||
}
|
||||
|
||||
.cmdb-resource:before {
|
||||
content: "\e957";
|
||||
}
|
||||
|
||||
.cmdb-discovery_resources:before {
|
||||
content: "\e954";
|
||||
}
|
||||
|
||||
.cmdb-association:before {
|
||||
content: "\e953";
|
||||
}
|
||||
|
||||
.ops-is_dynamic-disabled:before {
|
||||
content: "\e952";
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,6 +5,97 @@
|
|||
"css_prefix_text": "",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "40795271",
|
||||
"name": "cmdb-manual_warehousing",
|
||||
"font_class": "cmdb-manual_warehousing",
|
||||
"unicode": "e95f",
|
||||
"unicode_decimal": 59743
|
||||
},
|
||||
{
|
||||
"icon_id": "40791408",
|
||||
"name": "cmdb-not_warehousing",
|
||||
"font_class": "cmdb-not_warehousing",
|
||||
"unicode": "e95d",
|
||||
"unicode_decimal": 59741
|
||||
},
|
||||
{
|
||||
"icon_id": "40791401",
|
||||
"name": "cmdb-warehousing",
|
||||
"font_class": "cmdb-warehousing",
|
||||
"unicode": "e95e",
|
||||
"unicode_decimal": 59742
|
||||
},
|
||||
{
|
||||
"icon_id": "40731588",
|
||||
"name": "cmdb-prompt",
|
||||
"font_class": "cmdb-prompt",
|
||||
"unicode": "e95c",
|
||||
"unicode_decimal": 59740
|
||||
},
|
||||
{
|
||||
"icon_id": "40722326",
|
||||
"name": "cmdb-arrow",
|
||||
"font_class": "cmdb-arrow",
|
||||
"unicode": "e95b",
|
||||
"unicode_decimal": 59739
|
||||
},
|
||||
{
|
||||
"icon_id": "40711364",
|
||||
"name": "cmdb-automatic_inventory",
|
||||
"font_class": "cmdb-automatic_inventory",
|
||||
"unicode": "e95a",
|
||||
"unicode_decimal": 59738
|
||||
},
|
||||
{
|
||||
"icon_id": "40711409",
|
||||
"name": "cmdb-week_additions",
|
||||
"font_class": "cmdb-week_additions",
|
||||
"unicode": "e959",
|
||||
"unicode_decimal": 59737
|
||||
},
|
||||
{
|
||||
"icon_id": "40711428",
|
||||
"name": "cmdb-month_additions",
|
||||
"font_class": "cmdb-month_additions",
|
||||
"unicode": "e958",
|
||||
"unicode_decimal": 59736
|
||||
},
|
||||
{
|
||||
"icon_id": "40711344",
|
||||
"name": "cmdb-rule",
|
||||
"font_class": "cmdb-rule",
|
||||
"unicode": "e955",
|
||||
"unicode_decimal": 59733
|
||||
},
|
||||
{
|
||||
"icon_id": "40711349",
|
||||
"name": "cmdb-executing_machine",
|
||||
"font_class": "cmdb-executing_machine",
|
||||
"unicode": "e956",
|
||||
"unicode_decimal": 59734
|
||||
},
|
||||
{
|
||||
"icon_id": "40711356",
|
||||
"name": "cmdb-resource",
|
||||
"font_class": "cmdb-resource",
|
||||
"unicode": "e957",
|
||||
"unicode_decimal": 59735
|
||||
},
|
||||
{
|
||||
"icon_id": "40705423",
|
||||
"name": "cmdb-discovery_resources",
|
||||
"font_class": "cmdb-discovery_resources",
|
||||
"unicode": "e954",
|
||||
"unicode_decimal": 59732
|
||||
},
|
||||
{
|
||||
"icon_id": "40701723",
|
||||
"name": "cmdb-association",
|
||||
"font_class": "cmdb-association",
|
||||
"unicode": "e953",
|
||||
"unicode_decimal": 59731
|
||||
},
|
||||
{
|
||||
"icon_id": "40645466",
|
||||
"name": "ops-is_dynamic-disabled",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -46,10 +46,10 @@ export function getHttpAttributes(name, params) {
|
|||
}
|
||||
|
||||
export function getSnmpAttributes(name) {
|
||||
return axios({
|
||||
url: `/v0.1/adr/snmp/${name}/attributes`,
|
||||
method: 'GET',
|
||||
})
|
||||
return axios({
|
||||
url: `/v0.1/adr/snmp/${name}/attributes`,
|
||||
method: 'GET',
|
||||
})
|
||||
}
|
||||
|
||||
export function getCITypeDiscovery(type_id) {
|
||||
|
|
@ -118,3 +118,65 @@ export function deleteAdc(adc_id) {
|
|||
method: 'DELETE',
|
||||
})
|
||||
}
|
||||
|
||||
export function getAdcCounter(params) {
|
||||
return axios({
|
||||
url: `v0.1/adc/counter`,
|
||||
method: 'GET',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function getAdcExecHistories(params) {
|
||||
return axios({
|
||||
url: `v0.1/adc/exec/histories`,
|
||||
method: 'GET',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function getAdtSyncHistories(adt_id) {
|
||||
return axios({
|
||||
url: `/v0.1/adt/${adt_id}/sync/histories`,
|
||||
method: 'GET',
|
||||
params: {
|
||||
page_size: 9999
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function postAdtTest(adt_id) {
|
||||
return axios({
|
||||
url: `/v0.1/adt/${adt_id}/test`,
|
||||
method: 'POST',
|
||||
})
|
||||
}
|
||||
|
||||
export function getAdtTestResult(exec_id) {
|
||||
return axios({
|
||||
url: `/v0.1/adt/test/${exec_id}/result`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
export function getCITypeAttributes(type_id) {
|
||||
return axios({
|
||||
url: `/v0.1/adt/ci_types/${type_id}/attributes`,
|
||||
method: 'GET',
|
||||
})
|
||||
}
|
||||
|
||||
export function getCITypeRelations(type_id) {
|
||||
return axios({
|
||||
url: `/v0.1/adt/ci_types/${type_id}/relations`,
|
||||
method: 'GET',
|
||||
})
|
||||
}
|
||||
|
||||
export function postCITypeRelations(type_id, data) {
|
||||
return axios({
|
||||
url: `/v0.1/adt/ci_types/${type_id}/relations`,
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,196 @@
|
|||
<template>
|
||||
<div class="attr-map-table">
|
||||
<div class="attr-map-table-left">
|
||||
<div class="attr-map-table-title">{{ $t('cmdb.ciType.attributes') }}</div>
|
||||
<vxe-table
|
||||
ref="attr-xTable-left"
|
||||
size="mini"
|
||||
:data="tableData"
|
||||
:scroll-y="{ enabled: true }"
|
||||
:min-height="78"
|
||||
>
|
||||
<vxe-column field="attr" :title="$t('name')">
|
||||
<template #default="{ row }">
|
||||
<div class="attr-select">
|
||||
<span
|
||||
v-if="uniqueKey"
|
||||
:style="{
|
||||
opacity: uniqueKey === row.name ? 1 : 0
|
||||
}"
|
||||
class="attr-select-unique"
|
||||
>
|
||||
*
|
||||
</span>
|
||||
<vxe-select
|
||||
filterable
|
||||
clearable
|
||||
v-model="row.attr"
|
||||
type="text"
|
||||
:options="ciTypeAttributes"
|
||||
transfer
|
||||
:placeholder="$t('cmdb.ciType.attrMapTableAttrPlaceholder')"
|
||||
></vxe-select>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div class="attr-map-table-right">
|
||||
<div class="attr-map-table-title">{{ $t('cmdb.ciType.autoDiscovery') }}</div>
|
||||
<vxe-table
|
||||
ref="attr-xTable-right"
|
||||
size="mini"
|
||||
show-overflow
|
||||
show-header-overflow
|
||||
:data="tableData"
|
||||
:scroll-y="{ enabled: true }"
|
||||
:row-config="{ height: 42 }"
|
||||
:min-height="78"
|
||||
>
|
||||
<vxe-column field="name" :title="$t('name')"></vxe-column>
|
||||
<vxe-column field="type" :title="$t('type')"></vxe-column>
|
||||
<vxe-column v-if="ruleType !== 'agent'" field="example" :title="$t('cmdb.components.example')">
|
||||
<template #default="{row}">
|
||||
<span v-if="row.type === 'json'">{{ JSON.stringify(row.example) }}</span>
|
||||
<span v-else>{{ row.example }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="desc" :title="$t('desc')"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div class="attr-map-table-link">
|
||||
<div
|
||||
v-for="item in tableData"
|
||||
:key="item._X_ROW_KEY"
|
||||
class="attr-map-table-link-item"
|
||||
>
|
||||
<div class="attr-map-table-link-left"></div>
|
||||
<div class="attr-map-table-link-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AttrMapTable',
|
||||
props: {
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
ciTypeAttributes: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
ruleType: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
uniqueKey: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
getTableData() {
|
||||
const leftTable = this.$refs?.['attr-xTable-left']
|
||||
const rightTable = this.$refs?.['attr-xTable-right']
|
||||
const { fullData: leftFullData } = leftTable.getTableData()
|
||||
const { fullData: rightFullData } = rightTable.getTableData()
|
||||
const fullData = leftFullData.map((item, index) => {
|
||||
return {
|
||||
...(rightFullData?.[index] || {}),
|
||||
...(item || {})
|
||||
}
|
||||
})
|
||||
return {
|
||||
fullData
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.attr-map-table {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
&-left {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
&-right {
|
||||
width: calc(70% - 60px);
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&-link {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 0;
|
||||
left: calc(30% - 6px);
|
||||
width: 66px;
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: calc(42px - 12px);
|
||||
width: 100%;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: calc(21px - 6px);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: @border-color-base;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
&-left {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: @primary-color;
|
||||
border: solid 3px #E2E7FC;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&-right {
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
border-radius: 1px 0px 0px 1px;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.attr-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
&-unique {
|
||||
color: #FD4C6A;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<vxe-table
|
||||
size="mini"
|
||||
stripe
|
||||
class="ops-stripe-table"
|
||||
show-overflow
|
||||
keep-source
|
||||
ref="xTable"
|
||||
resizable
|
||||
height="100%"
|
||||
:data="tableData"
|
||||
:scroll-y="{enabled: true}"
|
||||
>
|
||||
<vxe-column field="name" :title="$t('name')" width="100"> </vxe-column>
|
||||
<vxe-column field="type" :title="$t('type')" width="80"> </vxe-column>
|
||||
<vxe-column field="example" :title="$t('cmdb.components.example')">
|
||||
<template #default="{row}">
|
||||
<span v-if="row.type === 'object'">{{ row.example ? JSON.stringify(row.example) : '' }}</span>
|
||||
<span v-else>{{ row.example }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="desc" :title="$t('desc')"> </vxe-column>
|
||||
</vxe-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ADPreviewTable',
|
||||
props: {
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
<template>
|
||||
<div class="http-ad-category">
|
||||
<div class="http-ad-category-preview" v-if="currentCate">
|
||||
<div class="category-side">
|
||||
<div
|
||||
v-for="category in categories"
|
||||
:key="category.category"
|
||||
class="category-side-item"
|
||||
>
|
||||
<div class="category-side-title">{{ category.category }}</div>
|
||||
<div class="category-side-children">
|
||||
<div
|
||||
v-for="item in category.items"
|
||||
:key="item"
|
||||
:class="['category-side-children-item', item === currentCate ? 'category-side-children-item_active' : '']"
|
||||
@click="clickCategory(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-table">
|
||||
<ADPreviewTable
|
||||
:tableData="tableData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<a-input-search
|
||||
class="category-search"
|
||||
:placeholder="$t('cmdb.ad.httpSearchPlaceHolder')"
|
||||
@search="onSearchHttp"
|
||||
/>
|
||||
<div class="category-main">
|
||||
<div
|
||||
v-for="category in filterCategories"
|
||||
:key="category.category"
|
||||
class="category-item"
|
||||
>
|
||||
<div class="category-title">{{ category.category }}</div>
|
||||
<div class="category-children">
|
||||
<div
|
||||
v-for="item in category.items"
|
||||
:key="item"
|
||||
:class="['category-children-item', item === currentCate ? 'category-children-item_active' : '']"
|
||||
@click="clickCategory(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="corporate-tip">
|
||||
{{ $t('cmdb.ad.corporateTip') }} <a href="mailto:bd@veops.cn">bd@veops.cn</a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import ADPreviewTable from './adPreviewTable.vue'
|
||||
|
||||
export default {
|
||||
name: 'HttpADCategory',
|
||||
components: {
|
||||
ADPreviewTable
|
||||
},
|
||||
props: {
|
||||
categories: {
|
||||
type: Array,
|
||||
default: () => {},
|
||||
},
|
||||
currentCate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchValue: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filterCategories() {
|
||||
const categories = _.cloneDeep(this.categories)
|
||||
const filterCategories = categories.filter((category) => {
|
||||
category.items = category.items.filter((item) => {
|
||||
return item?.indexOf(this.searchValue) !== -1
|
||||
})
|
||||
return category?.items?.length > 0
|
||||
})
|
||||
return filterCategories
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearchHttp(v) {
|
||||
this.searchValue = v
|
||||
},
|
||||
clickCategory(item) {
|
||||
this.$emit('clickCategory', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.http-ad-category {
|
||||
&-preview {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: calc(100vh - 156px);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.category-side {
|
||||
flex-shrink: 0;
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
border-right: solid 1px @border-color-base;
|
||||
padding-right: 10px;
|
||||
|
||||
&-item {
|
||||
&:not(:first-child) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.category-side-title {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: @text-color_4;
|
||||
}
|
||||
|
||||
.category-side-children {
|
||||
margin-top: 5px;
|
||||
|
||||
&-item {
|
||||
padding: 7px 10px;
|
||||
background-color: @layout-content-background;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
color: @text-color_2;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: @layout-sidebar-selected-color;
|
||||
color: @layout-header-font-selected-color;
|
||||
}
|
||||
|
||||
&_active {
|
||||
background-color: @layout-sidebar-selected-color;
|
||||
color: @layout-header-font-selected-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-table {
|
||||
width: calc(100% - 150px - 10px - 16px);
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.category-search {
|
||||
width: 254px;
|
||||
}
|
||||
|
||||
.category-main {
|
||||
.category-item {
|
||||
margin-top: 24px;
|
||||
|
||||
.category-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.category-children {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 19px;
|
||||
|
||||
&-item {
|
||||
padding: 18px 19px;
|
||||
background-color: @layout-content-background;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
color: @text-color_2;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: @layout-sidebar-selected-color;
|
||||
color: @layout-header-font-selected-color;
|
||||
}
|
||||
|
||||
&_active {
|
||||
background-color: @layout-sidebar-selected-color;
|
||||
color: @layout-header-font-selected-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.corporate-tip {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,68 +1,45 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-select v-if="ruleType === 'http'" :style="{ marginBottom: '10px' }" v-model="currentCate">
|
||||
<a-select-option v-for="cate in categories" :key="cate" :value="cate">{{ cate }}</a-select-option>
|
||||
</a-select>
|
||||
<vxe-table
|
||||
size="mini"
|
||||
stripe
|
||||
class="ops-stripe-table"
|
||||
show-overflow
|
||||
keep-source
|
||||
ref="xTable"
|
||||
resizable
|
||||
:data="tableData"
|
||||
:edit-config="isEdit ? { trigger: 'click', mode: 'cell' } : {}"
|
||||
>
|
||||
<template v-if="isEdit">
|
||||
<vxe-colgroup :title="$t('cmdb.ciType.autoDiscovery')">
|
||||
<vxe-column field="name" :title="$t('name')" width="100"> </vxe-column>
|
||||
<vxe-column field="type" :title="$t('type')" width="80"> </vxe-column>
|
||||
<vxe-column field="example" :title="$t('cmdb.components.example')">
|
||||
<template #default="{row}">
|
||||
<span v-if="row.type === 'json'">{{ JSON.stringify(row.example) }}</span>
|
||||
<span v-else>{{ row.example }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="desc" :title="$t('desc')"> </vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup :title="$t('cmdb.ciType.attributes')">
|
||||
<vxe-column field="attr" :title="$t('name')" :edit-render="{}">
|
||||
<template #default="{row}">
|
||||
{{ row.attr }}
|
||||
</template>
|
||||
<template #edit="{ row }">
|
||||
<vxe-select
|
||||
filterable
|
||||
clearable
|
||||
v-model="row.attr"
|
||||
type="text"
|
||||
:options="ciTypeAttributes"
|
||||
transfer
|
||||
></vxe-select>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-colgroup>
|
||||
</template>
|
||||
<template v-else>
|
||||
<vxe-column field="name" :title="$t('name')" width="100"> </vxe-column>
|
||||
<vxe-column field="type" :title="$t('type')" width="80"> </vxe-column>
|
||||
<vxe-column field="example" :title="$t('cmdb.components.example')">
|
||||
<template #default="{row}">
|
||||
<span v-if="row.type === 'object'">{{ JSON.stringify(row.example) }}</span>
|
||||
<span v-else>{{ row.example }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="desc" :title="$t('desc')"> </vxe-column>
|
||||
</template>
|
||||
</vxe-table>
|
||||
<div class="http-snmp-ad">
|
||||
<HttpADCategory
|
||||
v-if="!isEdit && ruleType === 'http'"
|
||||
:categories="categories"
|
||||
:currentCate="currentCate"
|
||||
:tableData="tableData"
|
||||
@clickCategory="setCurrentCate"
|
||||
/>
|
||||
<template v-else>
|
||||
<a-select v-if="ruleType === 'http'" :style="{ marginBottom: '10px' }" v-model="currentCate">
|
||||
<a-select-option v-for="cate in categoriesSelect" :key="cate" :value="cate">{{ cate }}</a-select-option>
|
||||
</a-select>
|
||||
<AttrMapTable
|
||||
v-if="isEdit"
|
||||
ref="attrMapTable"
|
||||
:ruleType="ruleType"
|
||||
:tableData="tableData"
|
||||
:ciTypeAttributes="ciTypeAttributes"
|
||||
:uniqueKey="uniqueKey"
|
||||
/>
|
||||
<ADPreviewTable
|
||||
v-else
|
||||
:tableData="tableData"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getHttpCategories, getHttpAttributes, getSnmpAttributes } from '../../api/discovery'
|
||||
import AttrMapTable from '@/modules/cmdb/components/attrMapTable/index.vue'
|
||||
import ADPreviewTable from './adPreviewTable.vue'
|
||||
import HttpADCategory from './httpADCategory.vue'
|
||||
|
||||
export default {
|
||||
name: 'HttpSnmpAD',
|
||||
components: {
|
||||
AttrMapTable,
|
||||
ADPreviewTable,
|
||||
HttpADCategory
|
||||
},
|
||||
props: {
|
||||
ruleName: {
|
||||
type: String,
|
||||
|
|
@ -88,10 +65,15 @@ export default {
|
|||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
uniqueKey: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
categories: [],
|
||||
categoriesSelect: [],
|
||||
currentCate: '',
|
||||
tableData: [],
|
||||
}
|
||||
|
|
@ -115,7 +97,7 @@ export default {
|
|||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
getHttpAttributes(this.httpMap[`${this.ruleName}`].name, { category: newVal }).then((res) => {
|
||||
getHttpAttributes(this.httpMap[`${this.ruleName}`].name, { resource: newVal }).then((res) => {
|
||||
if (this.isEdit) {
|
||||
this.formatTableData(res)
|
||||
} else {
|
||||
|
|
@ -131,7 +113,7 @@ export default {
|
|||
this.currentCate = ''
|
||||
this.$nextTick(() => {
|
||||
const { ruleType, ruleName } = newVal
|
||||
if (ruleType === 'snmp' && ruleName) {
|
||||
if (['snmp'].includes(ruleType) && ruleName) {
|
||||
getSnmpAttributes(ruleName).then((res) => {
|
||||
if (this.isEdit) {
|
||||
this.formatTableData(res)
|
||||
|
|
@ -143,8 +125,15 @@ export default {
|
|||
if (ruleType === 'http' && ruleName) {
|
||||
getHttpCategories(this.httpMap[`${this.ruleName}`].name).then((res) => {
|
||||
this.categories = res
|
||||
if (res && res.length) {
|
||||
this.currentCate = res[0]
|
||||
const categoriesSelect = []
|
||||
res.forEach((category) => {
|
||||
if (category?.items?.length) {
|
||||
categoriesSelect.push(...category.items)
|
||||
}
|
||||
})
|
||||
this.categoriesSelect = categoriesSelect
|
||||
if (this.isEdit && categoriesSelect?.length) {
|
||||
this.currentCate = categoriesSelect[0]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -181,12 +170,16 @@ export default {
|
|||
})
|
||||
},
|
||||
getTableData() {
|
||||
const $table = this.$refs.xTable
|
||||
const $table = this.$refs.attrMapTable
|
||||
const { fullData } = $table.getTableData()
|
||||
return fullData || []
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style>
|
||||
.http-snmp-ad {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,207 @@
|
|||
<template>
|
||||
<div class="node-setting-wrap">
|
||||
<a-row v-for="(node) in nodes" :key="node.id">
|
||||
<a-col :span="6">
|
||||
<a-form-item :label="$t('cmdb.ciType.nodeSettingIp')">
|
||||
<a-input
|
||||
allowClear
|
||||
v-decorator="[
|
||||
`node_ip_${node.id}`,
|
||||
{
|
||||
rules: [
|
||||
{ required: false, message: $t('cmdb.ciType.nodeSettingIpTip') },
|
||||
{
|
||||
pattern:
|
||||
'^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$',
|
||||
message: $t('cmdb.ciType.nodeSettingIpTip1'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
]"
|
||||
:placeholder="$t('cmdb.ciType.nodeSettingIpTip')"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-form-item :label="$t('cmdb.ciType.nodeSettingCommunity')">
|
||||
<a-input
|
||||
allowClear
|
||||
v-decorator="[
|
||||
`node_community_${node.id}`,
|
||||
{
|
||||
rules: [{ required: false, message: $t('cmdb.ciType.nodeSettingCommunityTip') }],
|
||||
},
|
||||
]"
|
||||
:placeholder="$t('cmdb.ciType.nodeSettingCommunityTip')"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="5">
|
||||
<a-form-item :label="$t('cmdb.ciType.nodeSettingVersion')">
|
||||
<a-select
|
||||
v-decorator="[
|
||||
`node_version_${node.id}`,
|
||||
{
|
||||
rules: [{ required: false, message: $t('cmdb.ciType.nodeSettingVersionTip') }],
|
||||
},
|
||||
]"
|
||||
:placeholder="$t('cmdb.ciType.nodeSettingVersionTip')"
|
||||
allowClear
|
||||
class="node-setting-select"
|
||||
>
|
||||
<a-select-option value="1">
|
||||
v1
|
||||
</a-select-option>
|
||||
<a-select-option value="2c">
|
||||
v2c
|
||||
</a-select-option>
|
||||
<a-select-option value="3">
|
||||
v3
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="3">
|
||||
<div class="action">
|
||||
<a @click="() => copyNode(node.id)">
|
||||
<a-icon type="copy" />
|
||||
</a>
|
||||
<a @click="() => removeNode(node.id, 1)">
|
||||
<a-icon type="minus-circle" />
|
||||
</a>
|
||||
<a @click="addNode">
|
||||
<a-icon type="plus-circle" />
|
||||
</a>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
|
||||
export default {
|
||||
name: 'MonitorNodeSetting',
|
||||
props: {
|
||||
initNodes: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodes: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initNodesFunc() {
|
||||
this.nodes = _.cloneDeep(this.initNodes)
|
||||
},
|
||||
addNode() {
|
||||
const newNode = {
|
||||
id: uuidv4(),
|
||||
ip: '',
|
||||
community: '',
|
||||
version: '',
|
||||
}
|
||||
this.nodes.push(newNode)
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue({
|
||||
[`node_ip_${newNode.id}`]: newNode.ip,
|
||||
[`node_community_${newNode.id}`]: newNode.community,
|
||||
[`node_version_${newNode.id}`]: newNode.version,
|
||||
})
|
||||
})
|
||||
},
|
||||
removeNode(removeId, minLength) {
|
||||
if (this.nodes.length <= minLength) {
|
||||
this.$message.error('不可再删除！')
|
||||
return
|
||||
}
|
||||
const _idx = this.nodes.findIndex((item) => item.id === removeId)
|
||||
if (_idx > -1) {
|
||||
this.nodes.splice(_idx, 1)
|
||||
}
|
||||
},
|
||||
copyNode(id) {
|
||||
const newNode = {
|
||||
id: uuidv4(),
|
||||
ip: this.form.getFieldValue(`node_ip_${id}`),
|
||||
community: this.form.getFieldValue(`node_community_${id}`),
|
||||
version: this.form.getFieldValue(`node_version_${id}`),
|
||||
}
|
||||
this.nodes.push(newNode)
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue({
|
||||
[`node_ip_${newNode.id}`]: newNode.ip,
|
||||
[`node_community_${newNode.id}`]: newNode.community,
|
||||
[`node_version_${newNode.id}`]: newNode.version,
|
||||
})
|
||||
})
|
||||
},
|
||||
getInfoValuesFromForm(values) {
|
||||
return this.nodes.map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
ip: values[`node_ip_${item.id}`],
|
||||
community: values[`node_community_${item.id}`],
|
||||
version: values[`node_version_${item.id}`],
|
||||
}
|
||||
})
|
||||
},
|
||||
setNodeField() {
|
||||
if (this.nodes && this.nodes.length) {
|
||||
this.nodes.forEach((item) => {
|
||||
this.form.setFieldsValue({
|
||||
[`node_ip_${item.id}`]: item.ip,
|
||||
[`node_community_${item.id}`]: item.community,
|
||||
[`node_version_${item.id}`]: item.version,
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
getNodeValue() {
|
||||
const values = this.form.getFieldsValue()
|
||||
return this.getInfoValuesFromForm(values)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.node-setting-wrap {
|
||||
margin-left: 17px;
|
||||
|
||||
.ant-row {
|
||||
// display: flex;
|
||||
|
||||
/deep/ .ant-input-clear-icon {
|
||||
color: rgba(0,0,0,.25);
|
||||
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.node-setting-select {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -29,6 +29,7 @@ const cmdb_en = {
|
|||
attributes: 'Attributes',
|
||||
relation: 'Relation',
|
||||
trigger: 'Triggers',
|
||||
autoDiscoveryTab: 'AutoDiscovery',
|
||||
attributeAD: 'Attributes AutoDiscovery',
|
||||
relationAD: 'Relation AutoDiscovery',
|
||||
grant: 'Grant',
|
||||
|
|
@ -62,6 +63,7 @@ const cmdb_en = {
|
|||
deletePlugin: 'Delete plugin',
|
||||
confirmDeleteADT: 'Do you confirm to delete [{pluginName}]',
|
||||
attributeMap: 'Attribute mapping',
|
||||
nodeConfig: 'Node Configuration',
|
||||
autoDiscovery: 'AutoDiscovery',
|
||||
node: 'Node',
|
||||
adExecConfig: 'Execute configuration',
|
||||
|
|
@ -69,11 +71,12 @@ const cmdb_en = {
|
|||
oneagentIdTips: 'Please enter the hexadecimal OneAgent ID starting with 0x',
|
||||
selectFromCMDBTips: 'Select from CMDB ',
|
||||
adAutoInLib: 'Save as CI auto',
|
||||
adAutoInLibTip: 'Discovered instances are directly warehoused into CI',
|
||||
adInterval: 'Collection frequency',
|
||||
byInterval: 'by interval',
|
||||
allNodes: 'All Instances',
|
||||
specifyNodes: 'Specify Instance',
|
||||
specifyNodesTips: 'Please fill in the specify instance!',
|
||||
allNodes: 'All machines',
|
||||
specifyNodes: 'Specify machine',
|
||||
specifyNodesTips: 'Please fill in the specify machine!',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
link: 'Link',
|
||||
|
|
@ -203,6 +206,43 @@ const cmdb_en = {
|
|||
showTips: 'The names of nodes in the service tree and topology view',
|
||||
isDynamic: 'Dynamic',
|
||||
dynamicTips: 'For example, for monitoring data and frequently updated data, it is recommended to set it as a dynamic attribute, so that the change history of the attribute will not be recorded.',
|
||||
cloudAccessKey: 'Public Cloud AccessKey',
|
||||
cloudAccessKeyTip: 'For the system to synchronize public cloud information without installing Agent',
|
||||
configCheckTitle: 'Configuration check',
|
||||
checkTestTip: 'Save configuration before checking',
|
||||
checkTestBtn: 'Perform machine synchronization rule checking',
|
||||
checkTestTip2: 'Click to view the synchronization status of the discovery rule on the executing machine, the system synchronizes every 5 minutes, if the status is abnormal, you can view the possible problems',
|
||||
checkTestBtn1: 'Automated discovery testing',
|
||||
checkTestTip3: 'At the click of a button, the system will execute the autodiscovery rules on one machine',
|
||||
checkModalTitle: 'Perform machine synchronization rule checking',
|
||||
checkModalTip: 'If the status is down, check the Agent as follows',
|
||||
checkModalTip1: '1. Check if OneAgent process is alive',
|
||||
checkModalTip2: '2. View OneAgent logs with autodiscovery rule synchronisation every 5 minutes',
|
||||
checkModalColumn1: 'Executing machine',
|
||||
checkModalColumn2: 'AgentID',
|
||||
checkModalColumn3: 'Status',
|
||||
checkModalColumnStatus1: 'online',
|
||||
checkModalColumnStatus2: 'offline',
|
||||
checkModalColumn4: 'Last checkup time',
|
||||
testModalTitle: 'Automated discovery testing',
|
||||
attrMapTableAttrPlaceholder: 'Please edit the name',
|
||||
nodeSettingIp: 'IP Addresses',
|
||||
nodeSettingIpTip: 'Please enter the ip address',
|
||||
nodeSettingIpTip1: 'ip address format error',
|
||||
nodeSettingCommunity: 'Community',
|
||||
nodeSettingCommunityTip: 'Please enter community',
|
||||
nodeSettingVersion: 'Version',
|
||||
nodeSettingVersionTip: 'Please select version',
|
||||
cronRequiredTip: 'Acquisition frequency cannot be null',
|
||||
relationADTip: 'Relationship autodiscovery assumes that there is attribute autodiscovery configured',
|
||||
relationADHeader1: 'AutoDiscovery Attributes',
|
||||
relationADHeader2: 'Associative Model Attributes',
|
||||
relationADSelectAttr: 'Please select auto-discovered attributes',
|
||||
relationADSelectCIType: 'Please select the model associated with this model',
|
||||
relationADSelectModelAttr: 'Please select the associated model attribute',
|
||||
relationADTip2: 'When an auto-discovered attribute matches an associated model attribute, the two instance models are automatically associated',
|
||||
relationADTip3: 'If the value of the auto-discovered attribute is a list, multiple relationships are established with the association model',
|
||||
deleteRelationAdTip: 'Cannot be deleted again',
|
||||
},
|
||||
components: {
|
||||
unselectAttributes: 'Unselected',
|
||||
|
|
@ -432,12 +472,13 @@ const cmdb_en = {
|
|||
acceptTime: 'Accept Time',
|
||||
confirmAccept: 'Confirm Accept?',
|
||||
acceptSuccess: 'Accept successfully',
|
||||
isAccept: 'Is accept',
|
||||
isAccept: 'Accept',
|
||||
deleteADC: 'Confirm to delete this data?',
|
||||
batchDelete: 'Confirm to delete this data?',
|
||||
agent: 'Built-in & Plug-ins',
|
||||
agent: 'Server',
|
||||
snmp: 'Network Devices',
|
||||
http: 'Public Clouds',
|
||||
plugin: 'Plugin',
|
||||
rule: 'AutoDiscovery Rules',
|
||||
timeout: 'Timeout error',
|
||||
mode: 'Mode',
|
||||
|
|
@ -495,6 +536,19 @@ if __name__ == "__main__":
|
|||
vserver: 'VServer',
|
||||
nic: 'NIC',
|
||||
disk: 'harddisk',
|
||||
httpSearchPlaceHolder: 'Please enter keywords',
|
||||
corporateTip: 'More types are available in the corporate version, please contact us if you need ',
|
||||
ruleCount: 'Rule count',
|
||||
execMachine: 'Exec. machine count',
|
||||
resource: 'Auto-discovered resources count',
|
||||
autoInventory: 'Inclusions count',
|
||||
newThisWeek: 'New this week',
|
||||
newThisMonth: 'New this month',
|
||||
log: 'Log',
|
||||
discoveryCardResoureTip: 'Number of resource types automatically discovered',
|
||||
addPlugin: 'Add plugin',
|
||||
pluginSearchTip: 'Please search the rules',
|
||||
innerFlag: 'Inner'
|
||||
},
|
||||
ci: {
|
||||
attributeDesc: 'Attribute Description',
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ const cmdb_zh = {
|
|||
attributes: '模型属性',
|
||||
relation: '模型关联',
|
||||
trigger: '触发器',
|
||||
autoDiscoveryTab: '自动发现',
|
||||
attributeAD: '属性自动发现',
|
||||
relationAD: '关系自动发现',
|
||||
grant: '权限配置',
|
||||
|
|
@ -62,18 +63,20 @@ const cmdb_zh = {
|
|||
deletePlugin: '删除plugin',
|
||||
confirmDeleteADT: '确认删除 【{pluginName}】',
|
||||
attributeMap: '字段映射',
|
||||
autoDiscovery: '自动发现',
|
||||
nodeConfig: '节点配置',
|
||||
autoDiscovery: '自动发现属性',
|
||||
node: '节点',
|
||||
adExecConfig: '执行配置',
|
||||
adExecTarget: '执行机器',
|
||||
oneagentIdTips: '请输入以0x开头的16进制OneAgent ID',
|
||||
selectFromCMDBTips: '从CMDB中选择 ',
|
||||
adAutoInLib: '自动入库',
|
||||
adAutoInLibTip: '发现的实例直接入库成CI',
|
||||
adInterval: '采集频率',
|
||||
byInterval: '按间隔',
|
||||
allNodes: '所有实例',
|
||||
specifyNodes: '指定实例',
|
||||
specifyNodesTips: '请填写指定实例！',
|
||||
allNodes: '所有机器',
|
||||
specifyNodes: '指定机器',
|
||||
specifyNodesTips: '请填写指定机器！',
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
link: '链接',
|
||||
|
|
@ -203,6 +206,43 @@ const cmdb_zh = {
|
|||
showTips: '服务树和拓扑视图里节点的名称',
|
||||
isDynamic: '动态属性',
|
||||
dynamicTips: '譬如监控类的数据, 频繁更新的数据, 建议设置为动态属性, 则不会记录该属性的变更历史',
|
||||
cloudAccessKey: '公有云AccessKey',
|
||||
cloudAccessKeyTip: '用于系统在不安装Agent的情况下同步公有云信息',
|
||||
configCheckTitle: '健康检查',
|
||||
checkTestTip: '检查前请先保存配置',
|
||||
checkTestBtn: '执行机器同步规则检查',
|
||||
checkTestTip2: '点击查看发现规则在执行机器上的同步状态，系统每5分钟同步一次，若状态为异常，可查看可能的问题',
|
||||
checkTestBtn1: '自动发现测试',
|
||||
checkTestTip3: '点击按钮，系统将在一台机器上执行自动发现规则',
|
||||
checkModalTitle: '执行机器同步规则检查',
|
||||
checkModalTip: '若状态为下线，请按以下操作检查Agent',
|
||||
checkModalTip1: '1. 检查OneAgent进程是否存活',
|
||||
checkModalTip2: '2. 查看OneAgent的日志，每5分钟有自动发现规则同步的日志',
|
||||
checkModalColumn1: '执行机器',
|
||||
checkModalColumn2: 'AgentID',
|
||||
checkModalColumn3: '状态',
|
||||
checkModalColumnStatus1: '在线',
|
||||
checkModalColumnStatus2: '下线',
|
||||
checkModalColumn4: '最近检查时间',
|
||||
testModalTitle: '自动发现测试',
|
||||
attrMapTableAttrPlaceholder: '请编辑名称',
|
||||
nodeSettingIp: 'ip地址',
|
||||
nodeSettingIpTip: '请输入 ip 地址',
|
||||
nodeSettingIpTip1: 'ip地址格式错误',
|
||||
nodeSettingCommunity: 'Community',
|
||||
nodeSettingCommunityTip: '请输入 community',
|
||||
nodeSettingVersion: '版本',
|
||||
nodeSettingVersionTip: '请选择版本',
|
||||
cronRequiredTip: '采集频率不能为空',
|
||||
relationADTip: '关系自动发现的前提是配置有属性自动发现',
|
||||
relationADHeader1: '自动发现属性',
|
||||
relationADHeader2: '关联模型属性',
|
||||
relationADSelectAttr: '请选择自动发现的属性',
|
||||
relationADSelectCIType: '请选择与本模型关联的模型',
|
||||
relationADSelectModelAttr: '请选择关联模型属性',
|
||||
relationADTip2: '当自动发现属性与关联模型属性一致时，两实例模型则自动关联',
|
||||
relationADTip3: '如果自动发现的属性值是列表，则会和关联模型建立多个关系',
|
||||
deleteRelationAdTip: '不可再删除',
|
||||
},
|
||||
components: {
|
||||
unselectAttributes: '未选属性',
|
||||
|
|
@ -432,12 +472,13 @@ const cmdb_zh = {
|
|||
acceptTime: '入库时间',
|
||||
confirmAccept: '确认入库？',
|
||||
acceptSuccess: '入库成功',
|
||||
isAccept: '是否入库',
|
||||
isAccept: '入库',
|
||||
deleteADC: '确认删除该条数据？',
|
||||
batchDelete: '确认删除这些数据？',
|
||||
agent: '内置 & 插件',
|
||||
agent: '服务器',
|
||||
snmp: '网络设备',
|
||||
http: '公有云资源',
|
||||
http: '公有云',
|
||||
plugin: '插件',
|
||||
rule: '自动发现规则',
|
||||
timeout: '超时错误',
|
||||
mode: '模式',
|
||||
|
|
@ -495,6 +536,19 @@ if __name__ == "__main__":
|
|||
vserver: '虚拟机',
|
||||
nic: '网卡',
|
||||
disk: '硬盘',
|
||||
httpSearchPlaceHolder: '请输入关键词',
|
||||
corporateTip: '更多类型见企业版，有需要请与我们联系 ',
|
||||
ruleCount: '规则数',
|
||||
execMachine: '执行机器数',
|
||||
resource: '自动发现资源数',
|
||||
autoInventory: '入库数',
|
||||
newThisWeek: '本周新增',
|
||||
newThisMonth: '本月新增',
|
||||
log: '日志',
|
||||
discoveryCardResoureTip: '自动发现的资源类型数',
|
||||
addPlugin: '新增插件',
|
||||
pluginSearchTip: '请搜索规则',
|
||||
innerFlag: '内置'
|
||||
},
|
||||
ci: {
|
||||
attributeDesc: '查看属性配置',
|
||||
|
|
|
|||
|
|
@ -167,16 +167,20 @@
|
|||
#default="{ row }"
|
||||
>
|
||||
<span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
|
||||
<a
|
||||
v-else-if="col.is_link && row[col.field]"
|
||||
:href="
|
||||
row[col.field].startsWith('http') || row[col.field].startsWith('https')
|
||||
? `${row[col.field]}`
|
||||
: `http://${row[col.field]}`
|
||||
"
|
||||
target="_blank"
|
||||
>{{ row[col.field] }}</a
|
||||
>
|
||||
<template v-else-if="col.is_link && row[col.field]">
|
||||
<a
|
||||
v-for="(item, linkIndex) in (col.is_list ? row[col.field] : [row[col.field]])"
|
||||
:key="linkIndex"
|
||||
:href="
|
||||
item.startsWith('http') || item.startsWith('https')
|
||||
? `${item}`
|
||||
: `http://${item}`
|
||||
"
|
||||
target="_blank"
|
||||
>
|
||||
{{ item }}
|
||||
</a>
|
||||
</template>
|
||||
<PasswordField
|
||||
v-else-if="col.is_password && row[col.field]"
|
||||
:ci_id="row._id"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<a-modal width="800px" :visible="visible" @ok="handleOK" @cancel="handleCancel" :closable="false">
|
||||
<Discovery :isSelected="true" :style="{ maxHeight: '75vh', overflow: 'auto' }" />
|
||||
<Discovery
|
||||
:isSelected="true"
|
||||
:style="{ maxHeight: '75vh', overflow: 'auto' }"
|
||||
v-if="visible"
|
||||
/>
|
||||
<template #footer>
|
||||
<a-space>
|
||||
<a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
|
||||
|
|
@ -14,7 +18,7 @@
|
|||
<script>
|
||||
import _ from 'lodash'
|
||||
import Discovery from '../discovery'
|
||||
import { postCITypeDiscovery } from '../../api/discovery'
|
||||
|
||||
export default {
|
||||
name: 'ADModal',
|
||||
components: { Discovery },
|
||||
|
|
@ -49,20 +53,17 @@ export default {
|
|||
},
|
||||
async handleOK() {
|
||||
if (this.selectedIds && this.selectedIds.length) {
|
||||
const promises = this.selectedIds.map(({ id, type }) => {
|
||||
return postCITypeDiscovery(this.CITypeId, { adr_id: id, interval: type === 'agent' ? 300 : 3600 })
|
||||
const adCITypeList = this.selectedIds.map((item, index) => {
|
||||
return {
|
||||
adr_id: item.id,
|
||||
id: new Date().getTime() + index,
|
||||
extra_option: {
|
||||
alias: ''
|
||||
},
|
||||
isClient: true,
|
||||
}
|
||||
})
|
||||
await Promise.all(promises)
|
||||
.then((res) => {
|
||||
this.getCITypeDiscovery(res[0].id)
|
||||
this.$message.success(this.$t('addSuccess'))
|
||||
})
|
||||
.catch(() => {
|
||||
this.getCITypeDiscovery()
|
||||
})
|
||||
.finally(() => {
|
||||
this.handleCancel()
|
||||
})
|
||||
this.$emit('pushCITypeList', adCITypeList)
|
||||
}
|
||||
this.handleCancel()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<div class="ad-container" :style="{ height: `${windowHeight - 130}px` }">
|
||||
<div class="ad-btns">
|
||||
<div
|
||||
:class="['ad-btns-item', activeKey === item.key ? 'ad-btns-item_active' : '']"
|
||||
v-for="item in tabs"
|
||||
:key="item.key"
|
||||
@click="changeTab(item.key)"
|
||||
>
|
||||
{{ $t(item.label) }}
|
||||
</div>
|
||||
</div>
|
||||
<AttrAD
|
||||
v-if="activeKey === AD_TAB_KEY.ATTR"
|
||||
:CITypeId="CITypeId"
|
||||
></AttrAD>
|
||||
<RelationAD
|
||||
v-else-if="activeKey === AD_TAB_KEY.RELATION"
|
||||
:CITypeId="CITypeId"
|
||||
></RelationAD>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import AttrAD from './attrAD.vue'
|
||||
import RelationAD from './relationAD.vue'
|
||||
|
||||
const AD_TAB_KEY = {
|
||||
ATTR: '1',
|
||||
RELATION: '2'
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'ADTab',
|
||||
components: {
|
||||
AttrAD,
|
||||
RelationAD,
|
||||
},
|
||||
props: {
|
||||
CITypeId: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
AD_TAB_KEY,
|
||||
activeKey: AD_TAB_KEY.ATTR,
|
||||
tabs: [
|
||||
{
|
||||
key: AD_TAB_KEY.ATTR,
|
||||
label: 'cmdb.ciType.attributeAD'
|
||||
},
|
||||
{
|
||||
key: AD_TAB_KEY.RELATION,
|
||||
label: 'cmdb.ciType.relationAD'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
windowHeight: (state) => state.windowHeight,
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
changeTab(activeKey) {
|
||||
this.activeKey = activeKey
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ad-btns {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: solid 1px @border-color-base;
|
||||
margin-left: 17px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 20px;
|
||||
background-color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
|
||||
color: @text-color_2;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: solid 1px @border-color-base;
|
||||
}
|
||||
|
||||
&_active {
|
||||
background-color: @primary-color;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,37 +1,28 @@
|
|||
<template>
|
||||
<div class="attr-ad" :style="{ height: `${windowHeight - 130}px` }">
|
||||
<div v-if="adCITypeList && adCITypeList.length">
|
||||
<a-tabs size="small" v-model="currentTab">
|
||||
<a-tab-pane v-for="item in adCITypeList" :key="item.id">
|
||||
<a-space slot="tab">
|
||||
<span v-if="item.extra_option && item.extra_option.alias">{{ item.extra_option.alias }}</span>
|
||||
<span v-else>{{ getADCITypeParam(item.adr_id) }}</span>
|
||||
<a-icon type="close-circle" @click="(e) => deleteADT(e, item)" />
|
||||
</a-space>
|
||||
<AttrADTabpane
|
||||
:ref="`attrAdTabpane_${item.id}`"
|
||||
:adr_id="item.adr_id"
|
||||
:adrList="adrList"
|
||||
:adCITypeList="adCITypeList"
|
||||
:currentAdt="item"
|
||||
:ciTypeAttributes="ciTypeAttributes"
|
||||
:currentAdr="getADCITypeParam(item.adr_id, undefined, true)"
|
||||
@openEditDrawer="(data, type, adType) => openEditDrawer(data, type, adType)"
|
||||
@handleSave="getCITypeDiscovery"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-space
|
||||
@click="
|
||||
() => {
|
||||
$refs.adModal.open()
|
||||
}
|
||||
"
|
||||
slot="tabBarExtraContent"
|
||||
:style="{ cursor: 'pointer' }"
|
||||
>
|
||||
<ops-icon type="icon-xianxing-tianjia" :style="{ color: '#2F54EB' }" /><a>{{ $t('add') }}</a>
|
||||
</a-space>
|
||||
</a-tabs>
|
||||
<AttrADTabs
|
||||
:adCITypeList="adCITypeList"
|
||||
:currentTab="currentTab"
|
||||
:getADCITypeParam="getADCITypeParam"
|
||||
@changeTab="changeTab"
|
||||
@changeAlias="changeAlias"
|
||||
@deleteADT="deleteADT"
|
||||
@clickAdd="() => $refs.adModal.open()"
|
||||
/>
|
||||
<AttrADTabpane
|
||||
:key="`attrAdTabpane_${currentTab}`"
|
||||
:ref="`attrAdTabpaneRef`"
|
||||
:adr_id="currentADData.adr_id"
|
||||
:CITypeId="CITypeId"
|
||||
:adrList="adrList"
|
||||
:adCITypeList="adCITypeList"
|
||||
:currentAdt="currentADData"
|
||||
:ciTypeAttributes="ciTypeAttributes"
|
||||
:currentAdr="getADCITypeParam(currentADData.adr_id, undefined, true)"
|
||||
@openEditDrawer="(data, type, adType) => openEditDrawer(data, type, adType)"
|
||||
@handleSave="saveTabpane"
|
||||
/>
|
||||
</div>
|
||||
<a-empty
|
||||
v-else
|
||||
|
|
@ -54,28 +45,41 @@
|
|||
{{ $t('add') }}
|
||||
</a-button>
|
||||
</a-empty>
|
||||
<ADModal ref="adModal" :CITypeId="CITypeId" @addPlugin="openEditDrawer(null, 'add', 'agent')" />
|
||||
<ADModal
|
||||
ref="adModal"
|
||||
:CITypeId="CITypeId"
|
||||
@pushCITypeList="pushCITypeList"
|
||||
@addPlugin="openEditDrawer(null, 'add', 'plugin')"
|
||||
/>
|
||||
<EditDrawer ref="editDrawer" :is_inner="false" @updateNotInner="updateNotInner" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import { mapState } from 'vuex'
|
||||
import ADModal from './adModal.vue'
|
||||
import {
|
||||
getDiscovery,
|
||||
getCITypeDiscovery,
|
||||
deleteCITypeDiscovery,
|
||||
postCITypeDiscovery,
|
||||
deleteDiscovery,
|
||||
putCITypeDiscovery
|
||||
} from '../../api/discovery'
|
||||
import { getCITypeAttributesById } from '../../api/CITypeAttr'
|
||||
|
||||
import ADModal from './adModal.vue'
|
||||
import AttrADTabpane from './attrADTabpane.vue'
|
||||
import EditDrawer from '../discovery/editDrawer.vue'
|
||||
import AttrADTabs from './attrADTabs.vue'
|
||||
|
||||
export default {
|
||||
name: 'AttrAutoDiscovery',
|
||||
components: { ADModal, AttrADTabpane, EditDrawer },
|
||||
components: {
|
||||
ADModal,
|
||||
AttrADTabpane,
|
||||
EditDrawer,
|
||||
AttrADTabs
|
||||
},
|
||||
props: {
|
||||
CITypeId: {
|
||||
type: Number,
|
||||
|
|
@ -86,7 +90,8 @@ export default {
|
|||
return {
|
||||
ciTypeAttributes: [],
|
||||
adrList: [],
|
||||
adCITypeList: [],
|
||||
serviceCITYpeList: [],
|
||||
clientCITypeList: [],
|
||||
currentTab: '',
|
||||
deletePlugin: false,
|
||||
}
|
||||
|
|
@ -95,6 +100,13 @@ export default {
|
|||
...mapState({
|
||||
windowHeight: (state) => state.windowHeight,
|
||||
}),
|
||||
currentADData() {
|
||||
return this?.adCITypeList?.find((item) => item?.id === this?.currentTab) ?? {}
|
||||
},
|
||||
adCITypeList() {
|
||||
const uniqueArray = _.differenceBy(this.clientCITypeList, this.serviceCITYpeList, 'id')
|
||||
return [...this.serviceCITYpeList, ...uniqueArray]
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
|
|
@ -106,7 +118,7 @@ export default {
|
|||
handler() {
|
||||
if (this.currentTab) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs[`attrAdTabpane_${this.currentTab}`][0].init()
|
||||
this.$refs[`attrAdTabpaneRef`].init()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
|
@ -121,7 +133,7 @@ export default {
|
|||
})
|
||||
if (this.currentTab) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs[`attrAdTabpane_${this.currentTab}`][0].init()
|
||||
this.$refs[`attrAdTabpaneRef`].init()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -134,15 +146,34 @@ export default {
|
|||
},
|
||||
async getCITypeDiscovery(currentTab) {
|
||||
await getCITypeDiscovery(this.CITypeId).then((res) => {
|
||||
this.adCITypeList = res.filter((item) => item.adr_id)
|
||||
if (this.adCITypeList && this.adCITypeList.length && !this.currentTab) {
|
||||
this.currentTab = this.adCITypeList[0].id
|
||||
}
|
||||
if (currentTab) {
|
||||
this.currentTab = currentTab
|
||||
}
|
||||
const serviceCITYpeList = res.filter((item) => item.adr_id)
|
||||
serviceCITYpeList.forEach((item) => {
|
||||
const _find = this.adrList.find((adr) => adr.id === item.adr_id)
|
||||
item.icon = _find?.option?.icon || {}
|
||||
})
|
||||
|
||||
this.serviceCITYpeList = serviceCITYpeList
|
||||
this.$nextTick(() => {
|
||||
if (this.adCITypeList && this.adCITypeList.length && !this.currentTab) {
|
||||
this.currentTab = this.adCITypeList[0].id
|
||||
}
|
||||
if (currentTab) {
|
||||
this.currentTab = currentTab
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
pushCITypeList(list) {
|
||||
list.forEach((item) => {
|
||||
const _find = this.adrList.find((adr) => adr.id === item.adr_id)
|
||||
item.icon = _find?.option?.icon || {}
|
||||
})
|
||||
this.$set(this, 'clientCITypeList', [
|
||||
...this.clientCITypeList,
|
||||
...list
|
||||
])
|
||||
this.currentTab = list[0].id
|
||||
},
|
||||
getADCITypeParam(adr_id, params = 'name', isAll = false) {
|
||||
const _find = this.adrList.find((item) => item.id === adr_id)
|
||||
if (_find) {
|
||||
|
|
@ -152,52 +183,115 @@ export default {
|
|||
return _find[`${params}`]
|
||||
}
|
||||
},
|
||||
async deleteADT(e, item) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
async deleteADT(item) {
|
||||
const that = this
|
||||
const is_plugin = this.getADCITypeParam(item.adr_id, 'is_plugin')
|
||||
|
||||
this.$confirm({
|
||||
title: that.$t('cmdb.ciType.confirmDeleteADT', { pluginName: `${item?.extra_option?.alias || this.getADCITypeParam(item.adr_id)}` }),
|
||||
content: (h) => (
|
||||
<div>
|
||||
<a-checkbox v-model={that.deletePlugin}>{that.$t('cmdb.ciType.deletePlugin')}</a-checkbox>
|
||||
</div>
|
||||
),
|
||||
onOk() {
|
||||
deleteCITypeDiscovery(item.id).then(async () => {
|
||||
if (that.currentTab === item.id) {
|
||||
that.currentTab = ''
|
||||
content: (h) => {
|
||||
if (!is_plugin) {
|
||||
return ''
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<a-checkbox
|
||||
v-model={that.deletePlugin}
|
||||
>
|
||||
{that.$t('cmdb.ciType.deletePlugin')}
|
||||
</a-checkbox>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
onOk () {
|
||||
if (item.isClient) {
|
||||
const adtIndex = that.clientCITypeList.findIndex((listItem) => listItem.id === item.id)
|
||||
if (adtIndex !== -1) {
|
||||
that.clientCITypeList.splice(adtIndex, 1)
|
||||
that.currentTab = that?.adCITypeList?.[0]?.id ?? ''
|
||||
|
||||
if (is_plugin && that.deletePlugin) {
|
||||
that.deleteDiscovery(item.adr_id)
|
||||
}
|
||||
}
|
||||
that.$message.success(that.$t('deleteSuccess'))
|
||||
that.getCITypeDiscovery()
|
||||
if (that.deletePlugin) {
|
||||
await deleteDiscovery(item.adr_id).finally(() => {
|
||||
that.deletePlugin = false
|
||||
})
|
||||
}
|
||||
that.deletePlugin = false
|
||||
})
|
||||
} else {
|
||||
deleteCITypeDiscovery(item.id).then(async () => {
|
||||
if (that.currentTab === item.id) {
|
||||
that.currentTab = ''
|
||||
}
|
||||
that.$message.success(that.$t('deleteSuccess'))
|
||||
that.getCITypeDiscovery()
|
||||
if (is_plugin && that.deletePlugin) {
|
||||
that.deleteDiscovery(item.adr_id)
|
||||
}
|
||||
that.deletePlugin = false
|
||||
})
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
that.deletePlugin = false
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
deleteDiscovery(id) {
|
||||
deleteDiscovery(id).finally(async () => {
|
||||
this.deletePlugin = false
|
||||
await this.getDiscovery()
|
||||
})
|
||||
},
|
||||
|
||||
openEditDrawer(data, type, adType) {
|
||||
this.$refs.editDrawer.open(data, type, adType)
|
||||
},
|
||||
async updateNotInner(adr) {
|
||||
const _idx = this.adCITypeList.findIndex((item) => item.adr_id === adr.id)
|
||||
let res
|
||||
if (_idx < 0) {
|
||||
res = await postCITypeDiscovery(this.CITypeId, { adr_id: adr.id, interval: 300 })
|
||||
}
|
||||
await this.getDiscovery()
|
||||
await this.getCITypeDiscovery(res?.id ?? undefined)
|
||||
if (_idx < 0) {
|
||||
const ciType = {
|
||||
adr_id: adr.id,
|
||||
id: new Date().getTime(),
|
||||
extra_option: {
|
||||
alias: ''
|
||||
},
|
||||
isClient: true,
|
||||
}
|
||||
this.pushCITypeList([ciType])
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$refs[`attrAdTabpane_${this.currentTab}`][0].init()
|
||||
this.$refs[`attrAdTabpaneRef`].init()
|
||||
})
|
||||
},
|
||||
|
||||
changeTab(id) {
|
||||
console.log('changeTab', id)
|
||||
this.currentTab = id
|
||||
},
|
||||
|
||||
changeAlias({ id, value, isClient }) {
|
||||
if (isClient) {
|
||||
const adtIndex = this.clientCITypeList.findIndex((item) => item.id === id)
|
||||
this.clientCITypeList[adtIndex].extra_option.alias = value
|
||||
} else {
|
||||
const params = {
|
||||
extra_option: {
|
||||
alias: value
|
||||
}
|
||||
}
|
||||
putCITypeDiscovery(id, params).then(async () => {
|
||||
this.$message.success(this.$t('saveSuccess'))
|
||||
await this.getCITypeDiscovery()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
saveTabpane(id) {
|
||||
const adtIndex = this.clientCITypeList.findIndex((listItem) => listItem.id === this.currentTab)
|
||||
if (adtIndex !== -1) {
|
||||
this.clientCITypeList.splice(adtIndex, 1)
|
||||
}
|
||||
this.getCITypeDiscovery(id)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -206,6 +300,7 @@ export default {
|
|||
.attr-ad {
|
||||
position: relative;
|
||||
padding: 0 20px;
|
||||
|
||||
.attr-ad-header {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
|
|
@ -216,7 +311,13 @@ export default {
|
|||
border-left: 4px solid @primary-color;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.attr-ad-header-margin {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.attr-ad-footer {
|
||||
width: 60%;
|
||||
text-align: right;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div :style="{ height: `${windowHeight - 187}px`, overflow: 'auto', position: 'relative' }">
|
||||
<div class="attr-ad-tab-pane" :style="{ height: `${windowHeight - 254}px` }">
|
||||
<a
|
||||
v-if="!adrIsInner"
|
||||
:style="{ position: 'absolute', right: 0, top: 0 }"
|
||||
@click="
|
||||
() => {
|
||||
$emit('openEditDrawer', currentAdr, 'edit', 'agent')
|
||||
$emit('openEditDrawer', currentAdr, 'edit', 'plugin')
|
||||
}
|
||||
"
|
||||
>
|
||||
|
|
@ -14,75 +14,43 @@
|
|||
<span>{{ $t('edit') }}</span>
|
||||
</a-space>
|
||||
</a>
|
||||
<div>{{ $t('alias') }}：<a-input v-model="alias" style="width:200px;" /></div>
|
||||
<div class="attr-ad-header">{{ $t('cmdb.ciType.attributeMap') }}</div>
|
||||
<vxe-table
|
||||
v-if="adrType === 'agent'"
|
||||
ref="xTable"
|
||||
:edit-config="{ trigger: 'click', mode: 'cell' }"
|
||||
size="mini"
|
||||
stripe
|
||||
class="ops-stripe-table"
|
||||
:data="tableData"
|
||||
:style="{ width: '700px', marginBottom: '20px' }"
|
||||
>
|
||||
<vxe-colgroup :title="$t('cmdb.ciType.autoDiscovery')">
|
||||
<vxe-column field="name" :title="$t('name')"> </vxe-column>
|
||||
<vxe-column field="type" :title="$t('type')"> </vxe-column>
|
||||
<vxe-column field="desc" :title="$t('desc')"> </vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup :title="$t('cmdb.ciType.attributes')">
|
||||
<vxe-column field="attr" :title="$t('name')" :edit-render="{}">
|
||||
<template #default="{row}">
|
||||
{{ row.attr }}
|
||||
</template>
|
||||
<template #edit="{ row }">
|
||||
<vxe-select
|
||||
filterable
|
||||
clearable
|
||||
v-model="row.attr"
|
||||
type="text"
|
||||
:options="ciTypeAttributes"
|
||||
transfer
|
||||
></vxe-select>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
<HttpSnmpAD
|
||||
v-else
|
||||
:isEdit="true"
|
||||
ref="httpSnmpAd"
|
||||
:ruleType="adrType"
|
||||
:ruleName="adrName"
|
||||
:ciTypeAttributes="ciTypeAttributes"
|
||||
:adCITypeList="adCITypeList"
|
||||
:currentTab="adr_id"
|
||||
:style="{ marginBottom: '20px' }"
|
||||
/>
|
||||
<a-form-model
|
||||
v-if="adrType === 'http'"
|
||||
:model="form2"
|
||||
:labelCol="{ span: 2 }"
|
||||
:wrapperCol="{ span: 8 }"
|
||||
:style="{ margin: '20px 0' }"
|
||||
>
|
||||
<a-form-model-item label="key">
|
||||
<a-input-password v-model="form2.key" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="secret">
|
||||
<a-input-password v-model="form2.secret" />
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
<a-form :form="form3" v-if="adrType === 'snmp'" class="attr-ad-snmp-form">
|
||||
<a-col :span="24">
|
||||
<a-form-item :label="$t('cmdb.ciType.node')" :labelCol="{ span: 2 }" :wrapperCol="{ span: 20 }">
|
||||
<MonitorNodeSetting ref="monitorNodeSetting" :initNodes="nodes" :form="form3" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-form>
|
||||
<div class="attr-ad-attributemap-main">
|
||||
<AttrMapTable
|
||||
v-if="adrType === 'agent'"
|
||||
ref="attrMapTable"
|
||||
:ruleType="adrType"
|
||||
:tableData="tableData"
|
||||
:ciTypeAttributes="ciTypeAttributes"
|
||||
:uniqueKey="uniqueKey"
|
||||
/>
|
||||
<HttpSnmpAD
|
||||
v-else
|
||||
:isEdit="true"
|
||||
ref="httpSnmpAd"
|
||||
:ruleType="adrType"
|
||||
:ruleName="adrName"
|
||||
:ciTypeAttributes="ciTypeAttributes"
|
||||
:adCITypeList="adCITypeList"
|
||||
:currentTab="adr_id"
|
||||
:uniqueKey="uniqueKey"
|
||||
:style="{ marginBottom: '20px' }"
|
||||
/>
|
||||
</div>
|
||||
<template v-if="adrType === 'snmp'">
|
||||
<div class="attr-ad-header">{{ $t('cmdb.ciType.nodeConfig') }}</div>
|
||||
<a-form :form="form3" layout="inline" class="attr-ad-snmp-form">
|
||||
<NodeSetting ref="nodeSetting" :initNodes="nodes" :form="form3" />
|
||||
</a-form>
|
||||
</template>
|
||||
<div class="attr-ad-header">{{ $t('cmdb.ciType.adExecConfig') }}</div>
|
||||
<a-form-model :model="form" :labelCol="{ span: 2 }" :wrapperCol="{ span: 20 }">
|
||||
<a-form-model
|
||||
:model="form"
|
||||
:labelCol="labelCol"
|
||||
labelAlign="left"
|
||||
:wrapperCol="{ span: 14 }"
|
||||
class="attr-ad-form"
|
||||
>
|
||||
<a-form-model-item :label="$t('cmdb.ciType.adExecTarget')">
|
||||
<CustomRadio v-model="agent_type" :radioList="agentTypeRadioList">
|
||||
<a-input
|
||||
|
|
@ -103,16 +71,60 @@
|
|||
</a-input>
|
||||
</CustomRadio>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item :label="$t('cmdb.ciType.adAutoInLib')">
|
||||
<a-form-model-item
|
||||
:labelCol="labelCol"
|
||||
:label="$t('cmdb.ciType.adAutoInLib')"
|
||||
:extra="$t('cmdb.ciType.adAutoInLibTip')"
|
||||
>
|
||||
<a-switch v-model="form.auto_accept" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="{ span: 6 }"
|
||||
:label="$t('cmdb.ciType.adInterval')"
|
||||
>
|
||||
<el-popover v-model="cronVisible" trigger="click">
|
||||
<template slot>
|
||||
<Vcrontab
|
||||
v-if="adrType"
|
||||
ref="cronTab"
|
||||
:hideComponent="['second', 'year']"
|
||||
:expression="cron"
|
||||
:hasFooter="true"
|
||||
@fill="crontabFill"
|
||||
@hide="hideCron"
|
||||
></Vcrontab>
|
||||
</template>
|
||||
<a-input
|
||||
v-model="cron"
|
||||
slot="reference"
|
||||
:placeholder="$t('cmdb.reconciliation.cronTips')"
|
||||
/>
|
||||
</el-popover>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
<div class="attr-ad-header">{{ $t('cmdb.ciType.adInterval') }}</div>
|
||||
<CustomRadio :radioList="radioList" v-model="interval">
|
||||
<span v-show="interval === 'interval'" slot="extra_interval">
|
||||
<a-input-number v-model="intervalValue" :min="1" /> {{ $t('seconds') }}
|
||||
</span>
|
||||
</CustomRadio>
|
||||
<template v-if="adrType === 'http'">
|
||||
<div class="attr-ad-header attr-ad-header-margin">{{ $t('cmdb.ciType.cloudAccessKey') }}</div>
|
||||
<div class="public-cloud-info">{{ $t('cmdb.ciType.cloudAccessKeyTip') }}</div>
|
||||
<a-form-model
|
||||
:model="form2"
|
||||
labelAlign="left"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="{ span: 6 }"
|
||||
class="attr-ad-form"
|
||||
>
|
||||
<a-form-model-item label="key">
|
||||
<a-input-password v-model="form2.key" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="secret">
|
||||
<a-input-password v-model="form2.secret" />
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</template>
|
||||
|
||||
<AttrADTest
|
||||
:adtId="currentAdt.id"
|
||||
/>
|
||||
|
||||
<div class="attr-ad-footer">
|
||||
<a-button type="primary" @click="handleSave">{{ $t('save') }}</a-button>
|
||||
|
|
@ -125,14 +137,26 @@
|
|||
import { v4 as uuidv4 } from 'uuid'
|
||||
import { mapState } from 'vuex'
|
||||
import Vcrontab from '@/components/Crontab'
|
||||
import { putCITypeDiscovery } from '../../api/discovery'
|
||||
import { putCITypeDiscovery, postCITypeDiscovery } from '../../api/discovery'
|
||||
|
||||
import HttpSnmpAD from '../../components/httpSnmpAD'
|
||||
import AttrMapTable from '@/modules/cmdb/components/attrMapTable/index.vue'
|
||||
import CMDBExprDrawer from '@/components/CMDBExprDrawer'
|
||||
import MonitorNodeSetting from '@/components/MonitorNodeSetting'
|
||||
import NodeSetting from '@/modules/cmdb/components/nodeSetting/index.vue'
|
||||
import AttrADTest from './attrADTest.vue'
|
||||
import { Popover } from 'element-ui'
|
||||
|
||||
export default {
|
||||
name: 'AttrADTabpane',
|
||||
components: { Vcrontab, HttpSnmpAD, CMDBExprDrawer, MonitorNodeSetting },
|
||||
components: {
|
||||
Vcrontab,
|
||||
HttpSnmpAD,
|
||||
CMDBExprDrawer,
|
||||
NodeSetting,
|
||||
AttrMapTable,
|
||||
AttrADTest,
|
||||
ElPopover: Popover
|
||||
},
|
||||
props: {
|
||||
adr_id: {
|
||||
type: Number,
|
||||
|
|
@ -158,6 +182,10 @@ export default {
|
|||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
CITypeId: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -171,7 +199,7 @@ export default {
|
|||
key: '',
|
||||
secret: '',
|
||||
},
|
||||
interval: 'interval', // interval cron
|
||||
interval: 'cron', // interval cron
|
||||
cron: '',
|
||||
intervalValue: 3,
|
||||
agent_type: 'agent_id',
|
||||
|
|
@ -184,50 +212,57 @@ export default {
|
|||
},
|
||||
],
|
||||
form3: this.$form.createForm(this, { name: 'snmp_form' }),
|
||||
alias: '',
|
||||
cronVisible: false,
|
||||
uniqueKey: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
windowHeight: (state) => state.windowHeight,
|
||||
userRoles: (state) => state.user.roles,
|
||||
user: (state) => state.user,
|
||||
}),
|
||||
adrType() {
|
||||
return this.currentAdr.type
|
||||
return this.currentAdr?.type || ''
|
||||
},
|
||||
adrName() {
|
||||
return this.currentAdr.name
|
||||
return this.currentAdr?.name || ''
|
||||
},
|
||||
adrIsInner() {
|
||||
return this.currentAdr.is_inner
|
||||
return this.currentAdr?.is_inner || ''
|
||||
},
|
||||
agentTypeRadioList() {
|
||||
const { permissions = [] } = this.userRoles
|
||||
if ((permissions.includes('cmdb_admin') || permissions.includes('admin')) && this.adrType !== 'http') {
|
||||
return [
|
||||
{ value: 'all', label: this.$t('cmdb.ciType.allNodes') },
|
||||
{ value: 'agent_id', label: this.$t('cmdb.ciType.specifyNodes') },
|
||||
{ value: 'query_expr', label: this.$t('cmdb.ciType.selectFromCMDBTips') },
|
||||
]
|
||||
}
|
||||
return [
|
||||
const radios = [
|
||||
{ value: 'agent_id', label: this.$t('cmdb.ciType.specifyNodes') },
|
||||
{ value: 'query_expr', label: this.$t('cmdb.ciType.selectFromCMDBTips') },
|
||||
]
|
||||
|
||||
const permissions = this?.user?.roles?.permissions
|
||||
if ((permissions.includes('cmdb_admin') || permissions.includes('admin')) && this.adrType === 'agent') {
|
||||
radios.unshift({ value: 'all', label: this.$t('cmdb.ciType.allNodes') })
|
||||
}
|
||||
|
||||
return radios
|
||||
},
|
||||
radioList() {
|
||||
return [
|
||||
{ value: 'interval', label: this.$t('cmdb.ciType.byInterval') },
|
||||
// { value: 'cron', label: '按cron', layout: 'vertical' },
|
||||
{ value: 'cron', label: '按cron', layout: 'vertical' },
|
||||
]
|
||||
},
|
||||
labelCol() {
|
||||
const span = this.$i18n.locale === 'en' ? 4 : 2
|
||||
return {
|
||||
span
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
init() {
|
||||
const _find = this.adrList.find((item) => Number(item.id) === Number(this.adr_id))
|
||||
const _findADT = this.adCITypeList.find((item) => Number(item.id) === Number(this.currentAdt.id))
|
||||
this.alias = _findADT?.extra_option?.alias ?? ''
|
||||
this.uniqueKey = _find?.unique_key ?? ''
|
||||
|
||||
if (this.adrType === 'http') {
|
||||
const { category = undefined, key = '', secret = '' } = _findADT?.extra_option ?? {}
|
||||
this.form2 = {
|
||||
|
|
@ -237,7 +272,7 @@ export default {
|
|||
this.$refs.httpSnmpAd.setCurrentCate(category)
|
||||
}
|
||||
if (this.adrType === 'snmp') {
|
||||
this.nodes = _findADT?.extra_option?.nodes ?? [
|
||||
this.nodes = _findADT?.extra_option?.nodes?.length ? _findADT?.extra_option?.nodes : [
|
||||
{
|
||||
id: uuidv4(),
|
||||
ip: '',
|
||||
|
|
@ -246,9 +281,9 @@ export default {
|
|||
},
|
||||
]
|
||||
this.$nextTick(() => {
|
||||
this.$refs.monitorNodeSetting.initNodesFunc()
|
||||
this.$refs.nodeSetting.initNodesFunc()
|
||||
this.$nextTick(() => {
|
||||
this.$refs.monitorNodeSetting.setNodeField()
|
||||
this.$refs.nodeSetting.setNodeField()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -283,23 +318,16 @@ export default {
|
|||
} else {
|
||||
this.agent_type = this.agentTypeRadioList[0].value
|
||||
}
|
||||
if (_findADT.interval || (!_findADT.interval && !_findADT.cron)) {
|
||||
this.interval = 'interval'
|
||||
this.intervalValue = _findADT.interval || ''
|
||||
} else {
|
||||
this.interval = 'cron'
|
||||
this.cron = `0 ${_findADT.cron}`
|
||||
}
|
||||
},
|
||||
getAttrNameByAttrName(attrName) {
|
||||
const _find = this.ciTypeAttributes.find((item) => item.name === attrName)
|
||||
return _find?.alias || _find?.name || ''
|
||||
|
||||
this.interval = 'cron'
|
||||
this.cron = _findADT?.cron || ''
|
||||
},
|
||||
|
||||
crontabFill(cron) {
|
||||
this.cron = cron
|
||||
},
|
||||
handleSave() {
|
||||
const { currentAdt, alias } = this
|
||||
const { currentAdt } = this
|
||||
let params
|
||||
if (this.adrType === 'http') {
|
||||
params = {
|
||||
|
|
@ -311,11 +339,11 @@ export default {
|
|||
}
|
||||
if (this.adrType === 'snmp') {
|
||||
params = {
|
||||
extra_option: { nodes: this.$refs.monitorNodeSetting?.getNodeValue() ?? [] },
|
||||
extra_option: { nodes: this.$refs.nodeSetting?.getNodeValue() ?? [] },
|
||||
}
|
||||
}
|
||||
if (this.adrType === 'agent') {
|
||||
const $table = this.$refs.xTable
|
||||
const $table = this.$refs.attrMapTable
|
||||
const { fullData: _tableData } = $table.getTableData()
|
||||
const attributes = {}
|
||||
_tableData.forEach((td) => {
|
||||
|
|
@ -340,17 +368,14 @@ export default {
|
|||
attributes,
|
||||
}
|
||||
}
|
||||
if (this.interval === 'cron') {
|
||||
this.$refs.cronTab.submitFill()
|
||||
}
|
||||
|
||||
params = {
|
||||
...params,
|
||||
...this.form,
|
||||
type_id: this.CITypeId,
|
||||
adr_id: currentAdt.adr_id,
|
||||
interval: this.interval === 'interval' ? this.intervalValue : null,
|
||||
cron: this.interval === 'cron' ? this.cron : null,
|
||||
}
|
||||
|
||||
if (this.agent_type === 'agent_id' || this.agent_type === 'all') {
|
||||
params.query_expr = ''
|
||||
if (this.agent_type === 'agent_id' && !params.agent_id) {
|
||||
|
|
@ -358,6 +383,7 @@ export default {
|
|||
return
|
||||
}
|
||||
}
|
||||
|
||||
if (this.agent_type === 'query_expr' || this.agent_type === 'all') {
|
||||
params.agent_id = ''
|
||||
if (this.agent_type === 'query_expr' && !params.query_expr) {
|
||||
|
|
@ -365,16 +391,29 @@ export default {
|
|||
return
|
||||
}
|
||||
}
|
||||
if (params.extra_option) {
|
||||
params.extra_option.alias = alias
|
||||
} else {
|
||||
params.extra_option = {}
|
||||
params.extra_option.alias = alias
|
||||
|
||||
if (!this.cron) {
|
||||
this.$message.error(this.$t('cmdb.ciType.cronRequiredTip'))
|
||||
return
|
||||
}
|
||||
|
||||
if (currentAdt?.isClient) {
|
||||
if (currentAdt?.extra_option) {
|
||||
params.extra_option = {
|
||||
...(params?.extra_option || {}),
|
||||
...(currentAdt?.extra_option || {})
|
||||
}
|
||||
}
|
||||
postCITypeDiscovery(this.CITypeId, params).then((res) => {
|
||||
this.$message.success(this.$t('saveSuccess'))
|
||||
this.$emit('handleSave', res.id)
|
||||
})
|
||||
} else {
|
||||
putCITypeDiscovery(currentAdt.id, params).then((res) => {
|
||||
this.$message.success(this.$t('saveSuccess'))
|
||||
this.$emit('handleSave', res.id)
|
||||
})
|
||||
}
|
||||
putCITypeDiscovery(currentAdt.id, params).then((res) => {
|
||||
this.$message.success(this.$t('saveSuccess'))
|
||||
this.$emit('handleSave')
|
||||
})
|
||||
},
|
||||
handleOpenCmdb() {
|
||||
this.$refs.cmdbDrawer.open()
|
||||
|
|
@ -385,11 +424,41 @@ export default {
|
|||
query_expr: `${text}`,
|
||||
}
|
||||
},
|
||||
hideCron() {
|
||||
this.cronVisible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
.attr-ad-tab-pane {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
|
||||
.attr-ad-attributemap-main {
|
||||
margin-left: 17px;
|
||||
}
|
||||
|
||||
.attr-ad-form {
|
||||
/deep/ .ant-form-item-label {
|
||||
margin-left: 17px;
|
||||
}
|
||||
|
||||
/deep/ .ant-form-item-control-wrapper {
|
||||
// margin-left: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
.public-cloud-info {
|
||||
color: @text-color_3;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
margin-left: 17px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.attr-ad-snmp-form {
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,183 @@
|
|||
<template>
|
||||
<div class="attr-ad-tabs">
|
||||
<div
|
||||
v-for="item in adCITypeList"
|
||||
:key="item.id"
|
||||
:class="['attr-ad-tab', currentTab === item.id ? 'attr-ad-tab_active' : '']"
|
||||
@click="changeTab(item.id)"
|
||||
>
|
||||
<img
|
||||
v-if="item.icon.id && item.icon.url"
|
||||
:src="`/api/common-setting/v1/file/${item.icon.url}`"
|
||||
class="attr-ad-tab-icon"
|
||||
/>
|
||||
<ops-icon
|
||||
v-else-if="item.icon.name"
|
||||
:type="item.icon.name || 'caise-chajian'"
|
||||
:style="{ color: item.icon.color }"
|
||||
class="attr-ad-tab-icon"
|
||||
/>
|
||||
<a-input
|
||||
v-if="nameEditId === item.id"
|
||||
v-model="nameEditValue"
|
||||
:ref="`name-edit-${item.id}`"
|
||||
size="small"
|
||||
:autofocus="true"
|
||||
@blur="changeAlias(item.isClient || false)"
|
||||
/>
|
||||
<span v-else class="attr-ad-tab-name">
|
||||
{{ item.extra_option && item.extra_option.alias ? item.extra_option.alias : getADCITypeParam(item.adr_id) }}
|
||||
</span>
|
||||
<a-icon
|
||||
type="edit"
|
||||
class="attr-ad-tab-edit"
|
||||
@click="(e) => openNameEdit(e, item)"
|
||||
/>
|
||||
<a-icon
|
||||
type="delete"
|
||||
class="attr-ad-tab-delete"
|
||||
@click="(e) => deleteADT(e, item)"
|
||||
/>
|
||||
</div>
|
||||
<a-icon
|
||||
type="plus-circle"
|
||||
class="attr-ad-tabs-add"
|
||||
@click="clickAdd"
|
||||
></a-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AttrADTabs',
|
||||
props: {
|
||||
currentTab: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
adCITypeList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
getADCITypeParam: {
|
||||
type: Function,
|
||||
default: () => ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nameEditId: '',
|
||||
nameEditValue: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTab(id) {
|
||||
this.$emit('changeTab', id)
|
||||
},
|
||||
openNameEdit(e, item) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
this.nameEditId = item.id
|
||||
if (item?.extra_option?.alias) {
|
||||
this.nameEditValue = item.extra_option.alias
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs?.[`name-edit-${item.id}`]?.[0]) {
|
||||
this.$refs[`name-edit-${item.id}`][0].focus()
|
||||
}
|
||||
})
|
||||
},
|
||||
changeAlias(isClient) {
|
||||
this.$emit('changeAlias', {
|
||||
id: this.nameEditId,
|
||||
value: this.nameEditValue,
|
||||
isClient
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.nameEditId = ''
|
||||
this.nameEditValue = ''
|
||||
})
|
||||
},
|
||||
deleteADT(e, item) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
this.$emit('deleteADT', item)
|
||||
},
|
||||
clickAdd() {
|
||||
this.$emit('clickAdd')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoepd>
|
||||
.attr-ad-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.attr-ad-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 24px;
|
||||
margin-right: 12px;
|
||||
background-color: @primary-color_7;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
|
||||
&-name {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: 12px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&-edit {
|
||||
display: none;
|
||||
font-size: 10px;
|
||||
color: @text-color_4;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&-delete {
|
||||
display: none;
|
||||
font-size: 10px;
|
||||
color: @func-color_1;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
&_active {
|
||||
border: solid 1px @primary-color_8;
|
||||
background-color: @primary-color_6;
|
||||
|
||||
.attr-ad-tab-name {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.attr-ad-tab-edit {
|
||||
display: inline-block;
|
||||
}
|
||||
.attr-ad-tab-delete {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-add {
|
||||
padding: 11px;
|
||||
background-color: @primary-color_7;
|
||||
font-size: 12px;
|
||||
color: @text-color_4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="attr-ad-header attr-ad-header-margin">{{ $t('cmdb.ciType.configCheckTitle') }}</div>
|
||||
<div class="attr-ad-content">
|
||||
<div class="ad-test-title-info">{{ $t('cmdb.ciType.checkTestTip') }}</div>
|
||||
<div
|
||||
class="ad-test-btn"
|
||||
@click="showCheckModal"
|
||||
>
|
||||
{{ $t('cmdb.ciType.checkTestBtn') }}
|
||||
</div>
|
||||
<div class="ad-test-btn-info">{{ $t('cmdb.ciType.checkTestTip2') }}</div>
|
||||
<!-- <div
|
||||
class="ad-test-btn"
|
||||
@click="showTestModal"
|
||||
>
|
||||
{{ $t('cmdb.ciType.checkTestBtn1') }}
|
||||
</div>
|
||||
<div class="ad-test-btn-info">{{ $t('cmdb.ciType.checkTestTip3') }}</div> -->
|
||||
</div>
|
||||
|
||||
<a-modal
|
||||
v-model="checkModalVisible"
|
||||
:footer="null"
|
||||
:width="900"
|
||||
>
|
||||
<div class="check-modal-title">{{ $t('cmdb.ciType.checkModalTitle') }}</div>
|
||||
<div class="check-modal-info">{{ $t('cmdb.ciType.checkModalTip') }}</div>
|
||||
<div class="check-modal-info">{{ $t('cmdb.ciType.checkModalTip1') }}</div>
|
||||
<div class="check-modal-info">{{ $t('cmdb.ciType.checkModalTip2') }}</div>
|
||||
<ops-table
|
||||
size="mini"
|
||||
:data="checkTableData"
|
||||
:scroll-y="{ enabled: true }"
|
||||
height="400"
|
||||
class="check-modal-table"
|
||||
>
|
||||
<vxe-column field="oneagent_name" :title="$t('cmdb.ciType.checkModalColumn1')"></vxe-column>
|
||||
<vxe-column field="oneagent_id" :title="$t('cmdb.ciType.checkModalColumn2')"></vxe-column>
|
||||
<vxe-column
|
||||
field="status"
|
||||
:min-width="70"
|
||||
:title="$t('cmdb.ciType.checkModalColumn3')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div
|
||||
:class="['check-modal-status', row.status ? 'check-modal-status-online' : 'check-modal-status-offline']"
|
||||
>
|
||||
{{ $t(`cmdb.ciType.${row.status ? 'checkModalColumnStatus1' : 'checkModalColumnStatus2'}`) }}
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="sync_at" :title="$t('cmdb.ciType.checkModalColumn4')"></vxe-column>
|
||||
</ops-table>
|
||||
</a-modal>
|
||||
|
||||
<a-modal
|
||||
v-model="testModalVisible"
|
||||
:footer="null"
|
||||
:width="596"
|
||||
>
|
||||
<div class="check-modal-title">{{ $t('cmdb.ciType.testModalTitle') }}</div>
|
||||
<p class="test-modal-text">{{ testResultText }}</p>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getAdtSyncHistories,
|
||||
postAdtTest,
|
||||
getAdtTestResult
|
||||
} from '@/modules/cmdb/api/discovery.js'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: 'AttrADTest',
|
||||
props: {
|
||||
adtId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkModalVisible: false,
|
||||
checkTableData: [],
|
||||
testModalVisible: false,
|
||||
testResultText: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async showCheckModal() {
|
||||
await this.queryCheckTableData()
|
||||
this.checkModalVisible = true
|
||||
},
|
||||
async queryCheckTableData() {
|
||||
const res = await getAdtSyncHistories(this.adtId)
|
||||
if (res?.result?.length) {
|
||||
const newTableData = res.result
|
||||
newTableData.forEach((item) => {
|
||||
const syncTime = moment(item.sync_at).valueOf()
|
||||
const nowTime = new Date().getTime()
|
||||
item.status = nowTime - syncTime <= 10 * 60 * 1000
|
||||
})
|
||||
this.checkTableData = newTableData
|
||||
} else {
|
||||
this.checkTableData = []
|
||||
}
|
||||
},
|
||||
async showTestModal() {
|
||||
await this.queryTestResult()
|
||||
this.testModalVisible = true
|
||||
},
|
||||
async queryTestResult() {
|
||||
const res = await postAdtTest(this.adtId)
|
||||
const exec_id = res?.exec_id
|
||||
if (exec_id) {
|
||||
const res = await getAdtTestResult(exec_id)
|
||||
|
||||
if (res?.stdout) {
|
||||
this.testResultText = res.stdout
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.attr-ad-content {
|
||||
margin-left: 17px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.ad-test-title-info {
|
||||
color: @text-color_3;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ad-test-btn {
|
||||
margin-top: 30px;
|
||||
padding: 5px 12px;
|
||||
background-color: #F4F9FF;
|
||||
border: solid 1px @primary-color_8;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
color: @link-color;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ad-test-btn-info {
|
||||
margin-top: 4px;
|
||||
color: @text-color_3;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.check-modal-table {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.check-modal-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.check-modal-info {
|
||||
color: @text-color_3;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.check-modal-status {
|
||||
display: inline-block;
|
||||
padding: 2px 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
|
||||
&-online {
|
||||
background-color: #E5F6DF;
|
||||
color: #30AD2D;
|
||||
}
|
||||
|
||||
&-offline {
|
||||
background-color: #FFDADA;
|
||||
color: #F14E4E;
|
||||
}
|
||||
}
|
||||
|
||||
.test-modal-text {
|
||||
margin-top: 14px;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
height: 312px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
border: solid 1px @border-color-base;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,21 +5,23 @@
|
|||
<AttributesTable ref="attributesTable" :CITypeId="CITypeId" :CITypeName="CITypeName"></AttributesTable>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" :tab="$t('cmdb.ciType.relation')">
|
||||
<RelationTable :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable>
|
||||
<RelationTable v-if="activeKey === '2'" :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" :tab="$t('cmdb.ciType.attributeAD')">
|
||||
<AttrAD :CITypeId="CITypeId"></AttrAD>
|
||||
<a-tab-pane key="3" :tab="$t('cmdb.ciType.autoDiscoveryTab')">
|
||||
<ADTab v-if="activeKey === '3'" :CITypeId="CITypeId"></ADTab>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="4" :tab="$t('cmdb.ciType.relationAD')">
|
||||
<RelationAD :CITypeId="CITypeId"></RelationAD>
|
||||
<a-tab-pane key="5" :tab="$t('cmdb.reconciliation.tab')">
|
||||
<ReconciliationTable ref="reconciliationTable" :CITypeId="CITypeId" :CITypeChangeDisabled="true" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="5" :tab="$t('cmdb.ciType.trigger')">
|
||||
<a-tab-pane key="6" :tab="$t('cmdb.ciType.trigger')">
|
||||
<TriggerTable ref="triggerTable" :CITypeId="CITypeId"></TriggerTable>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="6" :tab="$t('cmdb.ciType.grant')">
|
||||
<GrantComp :CITypeId="CITypeId" resourceType="CIType" :resourceTypeName="CITypeName"></GrantComp>
|
||||
<div class="citype-detail-title">{{ $t('cmdb.components.relationGrant') }}</div>
|
||||
<RelationTable isInGrantComp :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable>
|
||||
<a-tab-pane key="7" :tab="$t('cmdb.ciType.grant')">
|
||||
<template v-if="activeKey === '7'">
|
||||
<GrantComp :CITypeId="CITypeId" resourceType="CIType" :resourceTypeName="CITypeName"></GrantComp>
|
||||
<div class="citype-detail-title">{{ $t('cmdb.components.relationGrant') }}</div>
|
||||
<RelationTable isInGrantComp :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable>
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
|
|
@ -29,8 +31,7 @@
|
|||
import AttributesTable from './attributesTable'
|
||||
import RelationTable from './relationTable'
|
||||
import TriggerTable from './triggerTable.vue'
|
||||
import AttrAD from './attrAD.vue'
|
||||
import RelationAD from './relationAD.vue'
|
||||
import ADTab from './adTab.vue'
|
||||
import GrantComp from '../../components/cmdbGrant/grantComp.vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -39,8 +40,7 @@ export default {
|
|||
AttributesTable,
|
||||
RelationTable,
|
||||
TriggerTable,
|
||||
AttrAD,
|
||||
RelationAD,
|
||||
ADTab,
|
||||
GrantComp,
|
||||
},
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -1,95 +1,124 @@
|
|||
<template>
|
||||
<div class="relation-ad" :style="{ height: `${windowHeight - 130}px` }">
|
||||
<div class="relation-ad-item" v-for="item in relationList" :key="item.id">
|
||||
<treeselect
|
||||
class="custom-treeselect"
|
||||
:style="{ width: '200px', marginRight: '10px', '--custom-height': '32px' }"
|
||||
v-model="item.attrName"
|
||||
:multiple="false"
|
||||
:clearable="true"
|
||||
searchable
|
||||
:options="ciTypeADTAttributes"
|
||||
value-consists-of="LEAF_PRIORITY"
|
||||
:placeholder="$t('cmdb.ciType.selectAttributes')"
|
||||
:normalizer="
|
||||
(node) => {
|
||||
return {
|
||||
id: node.name,
|
||||
label: node.name,
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<div :title="node.label" slot="option-label" slot-scope="{ node }">
|
||||
<div>{{ node.label }}</div>
|
||||
<div :style="{ fontSize: '12px', color: '#cbcbcb', lineHeight: '12px' }">{{ node.raw.desc }}</div>
|
||||
</div>
|
||||
</treeselect>
|
||||
<a><a-icon type="swap"/></a>
|
||||
<treeselect
|
||||
class="custom-treeselect"
|
||||
:style="{ width: '200px', margin: '0 10px', '--custom-height': '32px' }"
|
||||
v-model="item.type_name"
|
||||
:multiple="false"
|
||||
:clearable="true"
|
||||
searchable
|
||||
:options="ciTypeGroup"
|
||||
value-consists-of="LEAF_PRIORITY"
|
||||
:placeholder="$t('cmdb.ciType.selectCIType')"
|
||||
:disableBranchNodes="true"
|
||||
@select="changeType(item)"
|
||||
:normalizer="
|
||||
(node) => {
|
||||
return {
|
||||
id: node.name || $t('other'),
|
||||
label: node.alias || node.name || $t('other'),
|
||||
title: node.alias || node.name || $t('other'),
|
||||
children: node.ci_types,
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<div
|
||||
:title="node.label"
|
||||
slot="option-label"
|
||||
slot-scope="{ node }"
|
||||
:style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
|
||||
>
|
||||
{{ node.label }}
|
||||
</div>
|
||||
</treeselect>
|
||||
<treeselect
|
||||
class="custom-treeselect"
|
||||
:style="{ width: '200px', marginRight: '10px', '--custom-height': '32px' }"
|
||||
v-model="item.attr_name"
|
||||
:multiple="false"
|
||||
:clearable="true"
|
||||
searchable
|
||||
:options="item.attributes"
|
||||
value-consists-of="LEAF_PRIORITY"
|
||||
:placeholder="$t('cmdb.ciType.selectAttributes')"
|
||||
:normalizer="
|
||||
(node) => {
|
||||
return {
|
||||
id: node.name,
|
||||
label: node.alias || node.name,
|
||||
title: node.alias || node.name,
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<div
|
||||
:title="node.label"
|
||||
slot="option-label"
|
||||
slot-scope="{ node }"
|
||||
:style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
|
||||
>
|
||||
{{ node.label }}
|
||||
</div>
|
||||
</treeselect>
|
||||
<div class="relation-ad" :style="{ height: `${windowHeight - 200}px` }">
|
||||
<div class="relation-ad-table-tip">
|
||||
<ops-icon class="relation-ad-table-tip-icon" type="cmdb-prompt" />
|
||||
<span class="relation-ad-table-tip-text">1. {{ $t('cmdb.ciType.relationADTip') }}</span>
|
||||
<span class="relation-ad-table-tip-text">2. {{ $t('cmdb.ciType.relationADTip2') }}</span>
|
||||
<span class="relation-ad-table-tip-text">3. {{ $t('cmdb.ciType.relationADTip3') }}</span>
|
||||
</div>
|
||||
<div class="relation-ad-footer">
|
||||
<a-button type="primary" @click="handleSave">{{ $t('save') }}</a-button>
|
||||
<!-- <div class="relation-ad-tip">{{ $t('cmdb.ciType.relationADTip') }}</div> -->
|
||||
<div class="relation-ad-header">
|
||||
<div class="relation-ad-header-left">{{ $t('cmdb.ciType.relationADHeader1') }}</div>
|
||||
<div class="relation-ad-header-left">{{ $t('cmdb.ciType.relationADHeader2') }}</div>
|
||||
</div>
|
||||
<div class="relation-ad-main">
|
||||
<div class="relation-ad-item" v-for="item in relationList" :key="item.id">
|
||||
<treeselect
|
||||
class="custom-treeselect"
|
||||
:style="{ width: '230px', '--custom-height': '32px' }"
|
||||
v-model="item.ad_key"
|
||||
:multiple="false"
|
||||
:clearable="true"
|
||||
searchable
|
||||
:options="ciTypeADTAttributes"
|
||||
value-consists-of="LEAF_PRIORITY"
|
||||
:placeholder="$t('cmdb.ciType.relationADSelectAttr')"
|
||||
:normalizer="
|
||||
(node) => {
|
||||
return {
|
||||
id: node.value,
|
||||
label: node.label,
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<div :title="node.label" slot="option-label" slot-scope="{ node }">
|
||||
<div>{{ node.label }}</div>
|
||||
<!-- <div :style="{ fontSize: '12px', color: '#cbcbcb', lineHeight: '12px' }">{{ node.raw.desc }}</div> -->
|
||||
</div>
|
||||
</treeselect>
|
||||
<div
|
||||
class="relation-ad-item-link"
|
||||
>
|
||||
<div class="relation-ad-item-link-left"></div>
|
||||
<div class="relation-ad-item-link-right"></div>
|
||||
</div>
|
||||
<treeselect
|
||||
class="custom-treeselect"
|
||||
:style="{ width: '230px', marginRight: '10px', '--custom-height': '32px' }"
|
||||
v-model="item.peer_type_id"
|
||||
:multiple="false"
|
||||
:clearable="true"
|
||||
searchable
|
||||
:options="relationOptions"
|
||||
value-consists-of="LEAF_PRIORITY"
|
||||
:placeholder="$t('cmdb.ciType.relationADSelectCIType')"
|
||||
:disableBranchNodes="true"
|
||||
@select="changeType(item)"
|
||||
:normalizer="
|
||||
(node) => {
|
||||
return {
|
||||
id: node.value || $t('other'),
|
||||
label: node.alias || node.name || $t('other'),
|
||||
title: node.alias || node.name || $t('other'),
|
||||
children: node.ci_types,
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<div
|
||||
:title="node.label"
|
||||
slot="option-label"
|
||||
slot-scope="{ node }"
|
||||
:style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
|
||||
>
|
||||
{{ node.label }}
|
||||
</div>
|
||||
</treeselect>
|
||||
<treeselect
|
||||
class="custom-treeselect"
|
||||
:style="{ width: '230px', marginRight: '18px', '--custom-height': '32px' }"
|
||||
v-model="item.peer_attr_id"
|
||||
:multiple="false"
|
||||
:clearable="true"
|
||||
searchable
|
||||
:options="item.attributes"
|
||||
value-consists-of="LEAF_PRIORITY"
|
||||
:placeholder="$t('cmdb.ciType.relationADSelectModelAttr')"
|
||||
:normalizer="
|
||||
(node) => {
|
||||
return {
|
||||
id: node.value,
|
||||
label: node.alias || node.name,
|
||||
title: node.alias || node.name,
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<div
|
||||
:title="node.label"
|
||||
slot="option-label"
|
||||
slot-scope="{ node }"
|
||||
:style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
|
||||
>
|
||||
{{ node.label }}
|
||||
</div>
|
||||
</treeselect>
|
||||
<div class="relation-ad-item-action">
|
||||
<a @click="copyRelation(item)">
|
||||
<a-icon type="copy" />
|
||||
</a>
|
||||
<a @click="deleteRelation(item)">
|
||||
<a-icon type="minus-circle" />
|
||||
</a>
|
||||
<a @click="addRelation">
|
||||
<a-icon type="plus-circle" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relation-ad-footer">
|
||||
<a-button type="primary" @click="handleSave">{{ $t('save') }}</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -99,9 +128,15 @@ import _ from 'lodash'
|
|||
import { mapState } from 'vuex'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import { getCITypeAttributesById } from '../../api/CITypeAttr'
|
||||
import { getCITypeGroups } from '../../api/ciTypeGroup'
|
||||
import { getDiscovery, getCITypeDiscovery, postCITypeDiscovery, putCITypeDiscovery } from '../../api/discovery'
|
||||
import {
|
||||
getCITypeAttributes,
|
||||
getCITypeRelations,
|
||||
postCITypeRelations
|
||||
} from '../../api/discovery'
|
||||
import {
|
||||
getCITypeChildren,
|
||||
getCITypeParent
|
||||
} from '../../api/CITypeRelation.js'
|
||||
|
||||
export default {
|
||||
name: 'RelationAutoDiscovery',
|
||||
|
|
@ -114,11 +149,11 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
relationList: [],
|
||||
ciTypeADTAttributes: [],
|
||||
ciTypeGroup: [],
|
||||
relationList: [], // 关系自动发现数据
|
||||
ciTypeADTAttributes: [], // 自动发现 options
|
||||
adt_id: null,
|
||||
adrList: [],
|
||||
relationOptions: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -126,64 +161,62 @@ export default {
|
|||
windowHeight: (state) => state.windowHeight,
|
||||
}),
|
||||
},
|
||||
created() {
|
||||
getCITypeGroups({ need_other: true }).then((res) => {
|
||||
this.ciTypeGroup = res
|
||||
.filter((item) => item.ci_types && item.ci_types.length)
|
||||
.map((item) => {
|
||||
item.id = `parent_${item.id || -1}`
|
||||
return { ..._.cloneDeep(item) }
|
||||
})
|
||||
})
|
||||
},
|
||||
async mounted() {
|
||||
await this.getDiscovery()
|
||||
this.getCITypeDiscovery()
|
||||
await this.getCITypeAttributes()
|
||||
await this.getCITypeRelationOptions()
|
||||
this.getCITypeRelations()
|
||||
},
|
||||
methods: {
|
||||
async getDiscovery() {
|
||||
await getDiscovery().then((res) => {
|
||||
this.adrList = res
|
||||
async getCITypeAttributes() {
|
||||
const res = await getCITypeAttributes(this.CITypeId)
|
||||
this.ciTypeADTAttributes = res.map((item) => {
|
||||
return {
|
||||
id: item,
|
||||
value: item,
|
||||
label: item
|
||||
}
|
||||
})
|
||||
},
|
||||
getCITypeDiscovery() {
|
||||
getCITypeDiscovery(this.CITypeId).then(async (res) => {
|
||||
// Options for the first drop-down box
|
||||
const _ciTypeADTAttributes = []
|
||||
res
|
||||
.filter((adt) => adt.adr_id)
|
||||
.forEach((adt) => {
|
||||
const _find = this.adrList.find((adr) => adr.id === adt.adr_id)
|
||||
if (_find && _find.attributes) {
|
||||
_ciTypeADTAttributes.push(..._find.attributes)
|
||||
}
|
||||
})
|
||||
console.log(_ciTypeADTAttributes)
|
||||
this.ciTypeADTAttributes = _.uniqBy(_ciTypeADTAttributes, 'name')
|
||||
// Options for the first drop-down box
|
||||
const _find = res.find((adt) => !adt.adr_id)
|
||||
if (_find) {
|
||||
this.adt_id = _find.id
|
||||
async getCITypeRelationOptions() {
|
||||
const childRes = await getCITypeChildren(this.CITypeId)
|
||||
const parentRes = await getCITypeParent(this.CITypeId)
|
||||
const options = [...childRes.children, ...parentRes.parents]
|
||||
|
||||
options.forEach((item) => {
|
||||
item.value = item.id
|
||||
item.label = item.alias || item.name
|
||||
const attributes = item?.attributes?.filter((attr) => !attr.is_password && !attr.is_list && attr.value_type !== '6')
|
||||
attributes.forEach((attr) => {
|
||||
attr.value = attr.id
|
||||
attr.label = attr.alias || attr.name
|
||||
})
|
||||
item.attributes = attributes
|
||||
})
|
||||
this.relationOptions = options
|
||||
},
|
||||
async getCITypeRelations() {
|
||||
getCITypeRelations(this.CITypeId).then(async (res) => {
|
||||
if (res?.length) {
|
||||
// this.adt_id = _find.id
|
||||
const _relationList = []
|
||||
const keys = Object.keys(_find.relation)
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const { attributes } = await getCITypeAttributesById(_find.relation[`${keys[i]}`].type_name)
|
||||
res.forEach((item) => {
|
||||
const attributes = this?.relationOptions?.find((option) => option?.value === item.peer_type_id)?.attributes || []
|
||||
_relationList.push({
|
||||
id: uuidv4(),
|
||||
attrName: keys[i],
|
||||
type_name: _find.relation[`${keys[i]}`].type_name,
|
||||
attr_name: _find.relation[`${keys[i]}`].attr_name,
|
||||
ad_key: item.ad_key,
|
||||
peer_type_id: item.peer_type_id,
|
||||
peer_attr_id: item.peer_attr_id,
|
||||
attributes,
|
||||
})
|
||||
}
|
||||
})
|
||||
this.relationList = _relationList.length
|
||||
? _relationList
|
||||
: [
|
||||
{
|
||||
id: uuidv4(),
|
||||
attrName: undefined,
|
||||
type_name: undefined,
|
||||
attr_name: undefined,
|
||||
ad_key: undefined,
|
||||
peer_type_id: undefined,
|
||||
peer_attr_id: undefined,
|
||||
attributes: [],
|
||||
},
|
||||
]
|
||||
|
|
@ -192,9 +225,9 @@ export default {
|
|||
this.relationList = [
|
||||
{
|
||||
id: uuidv4(),
|
||||
attrName: undefined,
|
||||
type_name: undefined,
|
||||
attr_name: undefined,
|
||||
ad_key: undefined,
|
||||
peer_type_id: undefined,
|
||||
peer_attr_id: undefined,
|
||||
attributes: [],
|
||||
},
|
||||
]
|
||||
|
|
@ -202,48 +235,57 @@ export default {
|
|||
})
|
||||
},
|
||||
changeType(item) {
|
||||
console.log(item)
|
||||
this.$nextTick(() => {
|
||||
getCITypeAttributesById(item.type_name).then((res) => {
|
||||
item.attr_name = undefined
|
||||
item.attributes = res.attributes.map((item) => {
|
||||
return { ...item, value: item.id, label: item.alias || item.name }
|
||||
})
|
||||
})
|
||||
const peer_type_id = item.peer_type_id
|
||||
const attributes = this?.relationOptions?.find((option) => option?.value === peer_type_id)?.attributes
|
||||
|
||||
item.attributes = attributes
|
||||
item.peer_attr_id = undefined
|
||||
})
|
||||
},
|
||||
addRelation() {
|
||||
const _relationList = _.cloneDeep(this.relationList)
|
||||
_relationList.push({
|
||||
id: uuidv4(),
|
||||
attrName: undefined,
|
||||
type_name: undefined,
|
||||
attr_name: undefined,
|
||||
ad_key: undefined,
|
||||
peer_type_id: undefined,
|
||||
peer_attr_id: undefined,
|
||||
attributes: [],
|
||||
})
|
||||
this.relationList = _relationList
|
||||
},
|
||||
copyRelation(item) {
|
||||
const _relationList = _.cloneDeep(this.relationList)
|
||||
_relationList.push({
|
||||
...item,
|
||||
id: uuidv4()
|
||||
})
|
||||
this.relationList = _relationList
|
||||
},
|
||||
|
||||
deleteRelation(item) {
|
||||
if (this.relationList.length <= 1) {
|
||||
this.$message.error(this.$t('cmdb.ciType.deleteRelationAdTip'))
|
||||
return
|
||||
}
|
||||
const _idx = this.relationList.findIndex(({ id }) => item.id === id)
|
||||
if (_idx > -1) {
|
||||
this.relationList.splice(_idx, 1)
|
||||
}
|
||||
},
|
||||
|
||||
async handleSave() {
|
||||
const _relation = {}
|
||||
this.relationList.forEach(({ attrName, type_name, attr_name }) => {
|
||||
if (attrName) {
|
||||
_relation[`${attrName}`] = { type_name, attr_name }
|
||||
const _relation = this.relationList.map(({ ad_key, peer_attr_id, peer_type_id }) => {
|
||||
return {
|
||||
ad_key,
|
||||
peer_attr_id,
|
||||
peer_type_id
|
||||
}
|
||||
})
|
||||
if (_relation) {
|
||||
if (this.adt_id) {
|
||||
await putCITypeDiscovery(this.adt_id, { relation: _relation })
|
||||
} else {
|
||||
await postCITypeDiscovery(this.CITypeId, { relation: _relation })
|
||||
}
|
||||
if (_relation.length) {
|
||||
await postCITypeRelations(this.CITypeId, { relations: _relation })
|
||||
this.$message.success(this.$t('saveSuccess'))
|
||||
this.getCITypeDiscovery()
|
||||
this.getCITypeRelations()
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -254,14 +296,103 @@ export default {
|
|||
.relation-ad {
|
||||
overflow: auto;
|
||||
padding: 0 20px;
|
||||
|
||||
&-tip {
|
||||
color: @text-color_4;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
&-header {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
|
||||
&-left {
|
||||
width: 230px;
|
||||
margin-right: 63px;
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.relation-ad-item {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
margin-top: 10px;
|
||||
|
||||
&-link {
|
||||
position: relative;
|
||||
height: 1px;
|
||||
width: 63px;
|
||||
background-color: @border-color-base;
|
||||
|
||||
&-left {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
z-index: 10;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: @primary-color;
|
||||
border: solid 3px #E2E7FC;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
&-right {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: -5px;
|
||||
right: 0px;
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
border-radius: 1px 0px 0px 1px;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
.relation-ad-footer {
|
||||
width: 690px;
|
||||
|
||||
&-table-tip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 3px 16px;
|
||||
color: @text-color_2;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border: solid 1px @primary-color_8;
|
||||
background-color: @primary-color_5;
|
||||
border-radius: 2px;
|
||||
|
||||
&-icon {
|
||||
font-size: 16px;
|
||||
color: @primary-color;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
&:not(:last-child) {
|
||||
padding-right: 10px;
|
||||
margin-right: 10px;
|
||||
border-right: solid 1px @primary-color_8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
// width: 690px;
|
||||
text-align: right;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
>{{ $t('cmdb.ciType.addRelation') }}</a-button
|
||||
>
|
||||
<vxe-table
|
||||
ref="xTable"
|
||||
stripe
|
||||
:data="tableData"
|
||||
size="small"
|
||||
|
|
@ -311,6 +312,8 @@ export default {
|
|||
tableAttrList: [],
|
||||
modalAttrList: [],
|
||||
modalChildAttributes: [],
|
||||
currentEditData: null,
|
||||
isContinueCloseEdit: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -341,7 +344,7 @@ export default {
|
|||
if (!this.isInGrantComp) {
|
||||
await this.getCITypeParent()
|
||||
}
|
||||
this.getCITypeChildren()
|
||||
await this.getCITypeChildren()
|
||||
},
|
||||
async getCITypeParent() {
|
||||
await getCITypeParent(this.CITypeId).then((res) => {
|
||||
|
|
@ -358,8 +361,8 @@ export default {
|
|||
})
|
||||
})
|
||||
},
|
||||
getCITypeChildren() {
|
||||
getCITypeChildren(this.CITypeId).then((res) => {
|
||||
async getCITypeChildren() {
|
||||
await getCITypeChildren(this.CITypeId).then((res) => {
|
||||
const data = res.children.map((obj) => {
|
||||
const parentAndChildAttrList = this.handleAttrList(obj)
|
||||
|
||||
|
|
@ -511,27 +514,45 @@ export default {
|
|||
if (row.isParent) return 'relation-table-parent'
|
||||
},
|
||||
handleEditActived({ row }) {
|
||||
const tableAttrList = []
|
||||
this.$nextTick(async () => {
|
||||
if (this.isContinueCloseEdit) {
|
||||
const editRecord = this.$refs.xTable.getEditRecord()
|
||||
const { row: editRow, column } = editRecord
|
||||
this.currentEditData = {
|
||||
row: editRow,
|
||||
column
|
||||
}
|
||||
return
|
||||
}
|
||||
const tableAttrList = []
|
||||
|
||||
const length = Math.min(row?.parent_attr_ids?.length || 0, row.child_attr_ids?.length || 0)
|
||||
if (length) {
|
||||
for (let i = 0; i < length; i++) {
|
||||
const length = Math.min(row?.parent_attr_ids?.length || 0, row.child_attr_ids?.length || 0)
|
||||
if (length) {
|
||||
for (let i = 0; i < length; i++) {
|
||||
tableAttrList.push({
|
||||
id: uuidv4(),
|
||||
parentAttrId: row?.parent_attr_ids?.[i] ?? undefined,
|
||||
childAttrId: row?.child_attr_ids?.[i] ?? undefined
|
||||
})
|
||||
}
|
||||
} else {
|
||||
tableAttrList.push({
|
||||
id: uuidv4(),
|
||||
parentAttrId: row?.parent_attr_ids?.[i] ?? undefined,
|
||||
childAttrId: row?.child_attr_ids?.[i] ?? undefined
|
||||
parentAttrId: undefined,
|
||||
childAttrId: undefined
|
||||
})
|
||||
}
|
||||
} else {
|
||||
tableAttrList.push({
|
||||
id: uuidv4(),
|
||||
parentAttrId: undefined,
|
||||
childAttrId: undefined
|
||||
})
|
||||
}
|
||||
this.$set(this, 'tableAttrList', tableAttrList)
|
||||
this.$set(this, 'tableAttrList', tableAttrList)
|
||||
})
|
||||
},
|
||||
async handleEditClose({ row }) {
|
||||
if (this.currentEditData) {
|
||||
this.currentEditData = null
|
||||
return
|
||||
}
|
||||
|
||||
this.isContinueCloseEdit = true
|
||||
|
||||
const { source_ci_type_id: parentId, id: childrenId, constraint, relation_type } = row
|
||||
const _find = this.relationTypes.find((item) => item.name === relation_type)
|
||||
const relation_type_id = _find?.id
|
||||
|
|
@ -542,6 +563,7 @@ export default {
|
|||
validate
|
||||
} = this.handleValidateAttrList(this.tableAttrList)
|
||||
if (!validate) {
|
||||
this.isContinueCloseEdit = false
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -550,8 +572,17 @@ export default {
|
|||
constraint,
|
||||
parent_attr_ids,
|
||||
child_attr_ids,
|
||||
}).finally(() => {
|
||||
this.getData()
|
||||
}).finally(async () => {
|
||||
await this.getData()
|
||||
this.isContinueCloseEdit = false
|
||||
|
||||
if (this.currentEditData) {
|
||||
setTimeout(async () => {
|
||||
const { fullData } = this.$refs.xTable.getTableData()
|
||||
const findEdit = fullData.find((item) => item.id === this?.currentEditData?.row?.id)
|
||||
await this.$refs.xTable.setEditRow(findEdit, 'attributeAssociation')
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getAttrNameById(attributes, id) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<vxe-table
|
||||
size="mini"
|
||||
stripe
|
||||
class="ops-stripe-table"
|
||||
show-overflow
|
||||
keep-source
|
||||
ref="xTable"
|
||||
max-height="100%"
|
||||
:data="tableData"
|
||||
:scroll-y="{enabled: true}"
|
||||
>
|
||||
<vxe-column field="name" :title="$t('name')">
|
||||
<template #edit="{ row }">
|
||||
<vxe-input v-model="row.name" type="text"></vxe-input>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="type" :title="$t('type')"></vxe-column>
|
||||
<vxe-column field="desc" :title="$t('desc')"></vxe-column>
|
||||
</vxe-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AgentTable',
|
||||
props: {
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export const DISCOVERY_CATEGORY_TYPE = {
|
||||
AGENT: 'agent',
|
||||
SNMP: 'snmp',
|
||||
HTTP: 'http',
|
||||
PLUGIN: 'plugin'
|
||||
}
|
||||
|
|
@ -2,34 +2,81 @@
|
|||
<div
|
||||
:class="{
|
||||
'discovery-card': true,
|
||||
'discovery-card-http': rule.type === DISCOVERY_CATEGORY_TYPE.HTTP,
|
||||
'discovery-card-small': isSelected,
|
||||
'discovery-card-small-selected': isSelected && selectedIds().findIndex((item) => item.id === rule.id) > -1,
|
||||
}"
|
||||
@click="clickCard"
|
||||
>
|
||||
<div class="discovery-bottom"></div>
|
||||
<div
|
||||
class="discovery-card-inner"
|
||||
v-if="rule.is_inner"
|
||||
>
|
||||
<span class="discovery-card-inner-text">{{ $t('cmdb.ad.innerFlag') }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="discovery-background-top"
|
||||
:style="{ background: borderTopColorMap[rule.name] || '' }"
|
||||
></div>
|
||||
<div class="discovery-top">
|
||||
<div class="discovery-header">
|
||||
<img
|
||||
v-if="icon.id && icon.url"
|
||||
class="discovery-header-icon"
|
||||
:src="`/api/common-setting/v1/file/${icon.url}`"
|
||||
:style="{ maxHeight: '30px', maxWidth: '30px' }"
|
||||
/>
|
||||
<ops-icon v-else :type="icon.name || 'caise-chajian'" :style="{ fontSize: '30px', color: icon.color }" />
|
||||
<ops-icon
|
||||
v-else
|
||||
:type="icon.name || 'caise-chajian'"
|
||||
:style="{ color: icon.color }"
|
||||
class="discovery-header-icon"
|
||||
/>
|
||||
<span :title="rule.name">{{ rule.name }}</span>
|
||||
</div>
|
||||
<template v-if="!isSelected">
|
||||
<a-divider :style="{ margin: '5px 0' }" />
|
||||
<div
|
||||
class="discovery-resources"
|
||||
v-if="rule.type === DISCOVERY_CATEGORY_TYPE.HTTP && rule.resources.length"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
{{ $t('cmdb.ad.discoveryCardResoureTip') }}
|
||||
</template>
|
||||
<div class="discovery-resources-left">
|
||||
<ops-icon class="discovery-resources-icon" type="cmdb-discovery_resources" />
|
||||
<span class="discovery-resources-count">{{ rule.resources.length }}{{ $i18n.locale === 'zh' ? '个' : '' }}</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<div class="discovery-resources-right">
|
||||
<template v-for="(item, index) in rule.resources">
|
||||
<span
|
||||
:key="index"
|
||||
v-if="index < 2"
|
||||
class="discovery-resources-item"
|
||||
>
|
||||
{{ item }}
|
||||
</span>
|
||||
</template>
|
||||
<span v-if="rule.resources.length >= 2" class="discovery-resources-item">
|
||||
<ops-icon type="veops-more" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider
|
||||
:style="{ margin: rule.type === DISCOVERY_CATEGORY_TYPE.HTTP ? '10px 0' : '7px 0' }"
|
||||
/>
|
||||
<div class="discovery-footer">
|
||||
<a-space v-if="rule.type === 'agent'">
|
||||
<a @click="handleEdit"><ops-icon type="icon-xianxing-edit"/></a>
|
||||
<a-space v-if="rule.type === 'agent' && rule.is_plugin">
|
||||
<a @click="handleEdit">
|
||||
<a-icon type="edit" />
|
||||
</a>
|
||||
<a
|
||||
v-if="isDeletable"
|
||||
@click="handleDelete"
|
||||
:style="{ color: 'red' }"
|
||||
><ops-icon
|
||||
type="icon-xianxing-delete"
|
||||
/></a>
|
||||
>
|
||||
<a-icon type="delete" />
|
||||
</a>
|
||||
</a-space>
|
||||
<a v-else @click="handleEdit"><a-icon type="eye"/></a>
|
||||
<span>{{ rule.is_plugin ? 'Plugin' : $t('cmdb.custom_dashboard.default') }}</span>
|
||||
|
|
@ -40,6 +87,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { DISCOVERY_CATEGORY_TYPE } from './constants.js'
|
||||
|
||||
export default {
|
||||
name: 'DiscoveryCard',
|
||||
props: {
|
||||
|
|
@ -52,6 +101,17 @@ export default {
|
|||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
DISCOVERY_CATEGORY_TYPE,
|
||||
borderTopColorMap: {
|
||||
'阿里云': '#FFB287',
|
||||
'腾讯云': '#87BEFF',
|
||||
'华为云': '#FFB8B8',
|
||||
'AWS': '#FFC187',
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
icon() {
|
||||
return this.rule?.option?.icon ?? { color: '', name: 'caise-wuliji' }
|
||||
|
|
@ -95,7 +155,32 @@ export default {
|
|||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
margin-right: 40px;
|
||||
.discovery-bottom {
|
||||
|
||||
&-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 4;
|
||||
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border-left: 50px solid transparent;
|
||||
border-top: 30px solid @primary-color_4;
|
||||
|
||||
&-text {
|
||||
width: 30px;
|
||||
position: absolute;
|
||||
top: -28px;
|
||||
right: 3px;
|
||||
text-align: right;
|
||||
|
||||
color: @primary-color;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.discovery-background-top {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
|
|
@ -105,6 +190,7 @@ export default {
|
|||
background: linear-gradient(90.54deg, #879fff 1.32%, #a0ddff 99.13%);
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.discovery-top {
|
||||
width: 100%;
|
||||
height: calc(100% - 5px);
|
||||
|
|
@ -118,7 +204,7 @@ export default {
|
|||
padding: 12px;
|
||||
.discovery-header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> i {
|
||||
|
|
@ -130,17 +216,73 @@ export default {
|
|||
text-overflow: ellipsis;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: 22px;
|
||||
max-height: 22px;
|
||||
max-width: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.discovery-resources {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&-count {
|
||||
margin-left: 3px;
|
||||
color: @text-color_3;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding: 3px 6px;
|
||||
border-radius: 12px;
|
||||
background-color: @layout-content-background;
|
||||
|
||||
color: @text-color_3;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
max-width: 95px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.discovery-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
> span {
|
||||
color: #a5a9bc;
|
||||
background-color: #d8eaff;
|
||||
color: #86909c;
|
||||
background-color: #f0f5ff;
|
||||
border-radius: 2px;
|
||||
padding: 0 5px;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-http {
|
||||
width: 263px;
|
||||
height: 142px;
|
||||
|
||||
.discovery-header {
|
||||
&-icon {
|
||||
font-size: 30px !important;
|
||||
max-height: 30px !important;
|
||||
max-width: 30px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -149,6 +291,11 @@ export default {
|
|||
width: 170px;
|
||||
height: 80px;
|
||||
cursor: pointer;
|
||||
// &:hover {
|
||||
// .discovery-top {
|
||||
// background-color: #f0f1f5;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.discovery-card-small:hover,
|
||||
.discovery-card-small-selected {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
<template>
|
||||
<CustomDrawer width="800px" :title="title" :visible="visible" @close="handleClose">
|
||||
<template v-if="adType === 'agent'">
|
||||
<CustomDrawer
|
||||
width="800px"
|
||||
:title="title"
|
||||
:visible="visible"
|
||||
:bodyStyle="{ height: 'calc(-108px + 100vh)' }"
|
||||
@close="handleClose"
|
||||
>
|
||||
<AgentTable
|
||||
v-if="adType === DISCOVERY_CATEGORY_TYPE.AGENT"
|
||||
:tableData="tableData"
|
||||
/>
|
||||
<template v-else-if="adType === DISCOVERY_CATEGORY_TYPE.PLUGIN">
|
||||
<a-form-model
|
||||
ref="autoDiscoveryForm"
|
||||
:model="form"
|
||||
|
|
@ -47,8 +57,9 @@
|
|||
icon="plus"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
@click="insertEvent(-1)"
|
||||
>{{ $t('new') }}</a-button
|
||||
>
|
||||
{{ $t('new') }}
|
||||
</a-button>
|
||||
<vxe-table
|
||||
size="mini"
|
||||
stripe
|
||||
|
|
@ -77,7 +88,11 @@
|
|||
<vxe-input v-model="row.desc" type="text"></vxe-input>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column :title="$t('operation')" width="60" v-if="!form.is_plugin">
|
||||
<vxe-column
|
||||
:title="$t('operation')"
|
||||
width="60"
|
||||
v-if="!form.is_plugin"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<a-space v-if="$refs.xTable.isActiveByRow(row)">
|
||||
<a @click="saveRowEvent(row)"><a-icon type="save"/></a>
|
||||
|
|
@ -103,15 +118,24 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import CustomIconSelect from '@/components/CustomIconSelect'
|
||||
import { postDiscovery, putDiscovery } from '../../api/discovery'
|
||||
import { DISCOVERY_CATEGORY_TYPE } from './constants.js'
|
||||
|
||||
import AgentTable from './agentTable.vue'
|
||||
import CustomIconSelect from '@/components/CustomIconSelect'
|
||||
import HttpSnmpAD from '../../components/httpSnmpAD'
|
||||
import CustomCodeMirror from '@/components/CustomCodeMirror'
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
import 'codemirror/theme/monokai.css'
|
||||
|
||||
export default {
|
||||
name: 'EditDrawer',
|
||||
components: { CustomIconSelect, CustomCodeMirror, HttpSnmpAD },
|
||||
components: {
|
||||
CustomIconSelect,
|
||||
CustomCodeMirror,
|
||||
HttpSnmpAD,
|
||||
AgentTable
|
||||
},
|
||||
props: {
|
||||
is_inner: {
|
||||
type: Boolean,
|
||||
|
|
@ -142,11 +166,12 @@ export default {
|
|||
tabSize: 4,
|
||||
lineWrapping: true,
|
||||
},
|
||||
DISCOVERY_CATEGORY_TYPE,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (this.adType === 'http' || this.adType === 'snmp') {
|
||||
if ([DISCOVERY_CATEGORY_TYPE.HTTP, DISCOVERY_CATEGORY_TYPE.SNMP, DISCOVERY_CATEGORY_TYPE.AGENT].includes(this.adType)) {
|
||||
return this.ruleData.name
|
||||
}
|
||||
if (this.type === 'edit') {
|
||||
|
|
@ -173,10 +198,15 @@ export default {
|
|||
is_plugin: true,
|
||||
}
|
||||
}
|
||||
if (adType === 'http' || adType === 'snmp') {
|
||||
if (adType === DISCOVERY_CATEGORY_TYPE.HTTP || adType === DISCOVERY_CATEGORY_TYPE.SNMP) {
|
||||
return
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (adType === DISCOVERY_CATEGORY_TYPE.AGENT) {
|
||||
this.tableData = data?.attributes ?? []
|
||||
return
|
||||
}
|
||||
|
||||
if (this.type === 'edit') {
|
||||
this.form = {
|
||||
name: data.name,
|
||||
|
|
@ -203,7 +233,7 @@ export default {
|
|||
this.tableData = []
|
||||
this.customIcon = { name: '', color: '' }
|
||||
this.form = { name: '', is_plugin: false }
|
||||
if (this.adType === 'agent') {
|
||||
if (this.adType === DISCOVERY_CATEGORY_TYPE.PLUGIN) {
|
||||
this.$refs.autoDiscoveryForm.clearValidate()
|
||||
} else {
|
||||
// this.$refs.httpSnmpAd.currentCate = ''
|
||||
|
|
@ -244,9 +274,10 @@ export default {
|
|||
const $table = this.$refs.xTable
|
||||
const { fullData: _tableData } = $table.getTableData()
|
||||
console.log(_tableData)
|
||||
const type = this.adType === DISCOVERY_CATEGORY_TYPE.PLUGIN ? DISCOVERY_CATEGORY_TYPE.AGENT : this.adType
|
||||
const params = {
|
||||
...this.form,
|
||||
type: this.adType,
|
||||
type,
|
||||
is_inner: this.is_inner,
|
||||
option: { icon: this.customIcon },
|
||||
attributes: this.form.is_plugin
|
||||
|
|
|
|||
|
|
@ -1,39 +1,90 @@
|
|||
<template>
|
||||
<div class="setting-discovery">
|
||||
<div :style="{ textAlign: 'right' }">
|
||||
<a-space v-if="!isSelected">
|
||||
<a-upload name="file" :multiple="false" accept=".json" :fileList="[]" :beforeUpload="beforeUpload">
|
||||
<a><a-icon type="upload" />{{ $t('cmdb.ad.upload') }}</a>
|
||||
</a-upload>
|
||||
<a @click="download"><a-icon type="download" />{{ $t('cmdb.ad.download') }}</a>
|
||||
</a-space>
|
||||
</div>
|
||||
<div v-for="{ type, label } in typeCategory" :key="type">
|
||||
<div class="type-header">
|
||||
<div>{{ label }}</div>
|
||||
<a-space v-if="!isSelected && type === 'agent'">
|
||||
<a @click="handleOpenEditDrawer(null, 'add', type)"><ops-icon type="icon-xianxing-tianjia"/></a>
|
||||
</a-space>
|
||||
<div v-if="!isSelected" class="setting-discovery-header">
|
||||
<a-input-search
|
||||
class="setting-discovery-search"
|
||||
:placeholder="$t('cmdb.ad.pluginSearchTip')"
|
||||
@search="onSearchDiscovery"
|
||||
/>
|
||||
<div class="setting-discovery-radio">
|
||||
<div
|
||||
v-for="{ type, label } in typeCategory"
|
||||
:key="type"
|
||||
:class="['setting-discovery-radio-item', radioKey === type ? 'setting-discovery-radio-item_active' : '']"
|
||||
@click="changeRadio(type)"
|
||||
>
|
||||
{{ label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-discovery-header-action">
|
||||
<a-upload
|
||||
name="file"
|
||||
:multiple="false"
|
||||
accept=".json"
|
||||
:fileList="[]"
|
||||
:beforeUpload="beforeUpload"
|
||||
>
|
||||
<a class="setting-discovery-header-action-btn">
|
||||
<a-icon type="upload" />
|
||||
{{ $t('cmdb.ad.upload') }}
|
||||
</a>
|
||||
</a-upload>
|
||||
<a
|
||||
@click="download"
|
||||
class="setting-discovery-header-action-btn"
|
||||
>
|
||||
<a-icon type="download" />
|
||||
{{ $t('cmdb.ad.download') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-discovery-body">
|
||||
<template v-if="!showNullData">
|
||||
<div v-for="{ type, label } in typeCategory" :key="type">
|
||||
<template v-if="filterCategoryChildren[type] && (filterCategoryChildren[type].children.length || (showAddPlugin && type === DISCOVERY_CATEGORY_TYPE.PLUGIN))">
|
||||
<div class="type-header">
|
||||
<div>{{ label }}</div>
|
||||
</div>
|
||||
<a-row type="flex" justify="start">
|
||||
<DiscoveryCard
|
||||
v-for="rule in filterCategoryChildren[type].children"
|
||||
:key="rule.id"
|
||||
:rule="rule"
|
||||
:isSelected="isSelected"
|
||||
@editRule="handleOpenEditDrawer(rule, 'edit', type)"
|
||||
@deleteRule="deleteRule(rule)"
|
||||
/>
|
||||
<div
|
||||
v-if="showAddPlugin && type === DISCOVERY_CATEGORY_TYPE.PLUGIN"
|
||||
class="setting-discovery-add"
|
||||
@click="handleOpenEditDrawer(null, 'add', DISCOVERY_CATEGORY_TYPE.PLUGIN)"
|
||||
>
|
||||
<a-icon type="plus-circle" theme="twoTone" />
|
||||
<span class="setting-discovery-add-text">
|
||||
{{ $t('cmdb.ad.addPlugin') }}
|
||||
</span>
|
||||
</div>
|
||||
</a-row>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<div class="setting-discovery-empty" v-else>
|
||||
<img class="setting-discovery-empty-img" :src="require(`@/modules/monitor/assets/empty-state.svg`)" />
|
||||
<p class="setting-discovery-empty-text">{{ $t('noData') }}</p>
|
||||
</div>
|
||||
<a-row type="flex" justify="start">
|
||||
<DiscoveryCard
|
||||
@editRule="handleOpenEditDrawer(rule, 'edit', type)"
|
||||
@deleteRule="deleteRule(rule)"
|
||||
v-for="rule in typeCategoryChildren[type]"
|
||||
:key="rule.id"
|
||||
:rule="rule"
|
||||
:isSelected="isSelected"
|
||||
/>
|
||||
</a-row>
|
||||
</div>
|
||||
<EditDrawer ref="editDrawer" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import { getDiscovery, deleteDiscovery } from '../../api/discovery'
|
||||
import { DISCOVERY_CATEGORY_TYPE } from './constants.js'
|
||||
import DiscoveryCard from './discoveryCard.vue'
|
||||
import EditDrawer from './editDrawer.vue'
|
||||
|
||||
export default {
|
||||
name: 'AutoDiscovery',
|
||||
components: { DiscoveryCard, EditDrawer },
|
||||
|
|
@ -45,26 +96,56 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
typeCategoryChildren: { agent: [], snmp: [], http: [] },
|
||||
typeCategoryChildren: {},
|
||||
DISCOVERY_CATEGORY_TYPE,
|
||||
radioKey: '',
|
||||
searchValue: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
typeCategory() {
|
||||
return [
|
||||
{
|
||||
type: 'agent',
|
||||
type: DISCOVERY_CATEGORY_TYPE.HTTP,
|
||||
label: this.$t('cmdb.ad.http'),
|
||||
},
|
||||
{
|
||||
type: DISCOVERY_CATEGORY_TYPE.AGENT,
|
||||
label: this.$t('cmdb.ad.agent'),
|
||||
},
|
||||
{
|
||||
type: 'snmp',
|
||||
type: DISCOVERY_CATEGORY_TYPE.SNMP,
|
||||
label: this.$t('cmdb.ad.snmp'),
|
||||
},
|
||||
{
|
||||
type: 'http',
|
||||
label: this.$t('cmdb.ad.http'),
|
||||
},
|
||||
type: DISCOVERY_CATEGORY_TYPE.PLUGIN,
|
||||
label: this.$t('cmdb.ad.plugin'),
|
||||
}
|
||||
]
|
||||
},
|
||||
filterCategoryChildren() {
|
||||
const _typeCategoryChildren = _.cloneDeep(this.typeCategoryChildren)
|
||||
const _filterCategoryChildren = Object.values(_typeCategoryChildren).reduce((obj, category) => {
|
||||
if (this.radioKey === '' || category.type === this.radioKey) {
|
||||
category.children = category.children.filter((item) => {
|
||||
return item?.name?.indexOf(this.searchValue) !== -1
|
||||
})
|
||||
obj[category.type] = category
|
||||
}
|
||||
return obj
|
||||
}, {})
|
||||
|
||||
return _filterCategoryChildren
|
||||
},
|
||||
showNullData() {
|
||||
const showCount = Object.values(this.filterCategoryChildren).reduce((acc, item) => {
|
||||
return acc + (item?.children?.length || 0)
|
||||
}, 0)
|
||||
return showCount === 0
|
||||
},
|
||||
showAddPlugin() {
|
||||
return !this.isSelected && this.searchValue === ''
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
|
|
@ -76,13 +157,41 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
getDiscovery() {
|
||||
const _typeCategoryChildren = { agent: [], snmp: [], http: [] }
|
||||
const _typeCategoryChildren = {
|
||||
[DISCOVERY_CATEGORY_TYPE.HTTP]: {
|
||||
type: DISCOVERY_CATEGORY_TYPE.HTTP,
|
||||
children: []
|
||||
},
|
||||
[DISCOVERY_CATEGORY_TYPE.AGENT]: {
|
||||
type: DISCOVERY_CATEGORY_TYPE.AGENT,
|
||||
children: []
|
||||
},
|
||||
[DISCOVERY_CATEGORY_TYPE.SNMP]: {
|
||||
type: DISCOVERY_CATEGORY_TYPE.SNMP,
|
||||
children: []
|
||||
},
|
||||
[DISCOVERY_CATEGORY_TYPE.PLUGIN]: {
|
||||
type: DISCOVERY_CATEGORY_TYPE.PLUGIN,
|
||||
children: []
|
||||
}
|
||||
}
|
||||
getDiscovery().then((res) => {
|
||||
this.typeCategory.forEach(({ type }) => {
|
||||
const _filterData = res.filter((list) => list.type === type && list.is_inner)
|
||||
_typeCategoryChildren[`${type}`] = _filterData
|
||||
let categoryChildren = []
|
||||
switch (type) {
|
||||
case DISCOVERY_CATEGORY_TYPE.PLUGIN:
|
||||
categoryChildren = res.filter((list) => list.is_plugin)
|
||||
break
|
||||
case DISCOVERY_CATEGORY_TYPE.AGENT:
|
||||
categoryChildren = res.filter((list) => !list.is_plugin && list.type === type)
|
||||
break
|
||||
default:
|
||||
categoryChildren = res.filter((list) => list.type === type)
|
||||
break
|
||||
}
|
||||
_typeCategoryChildren[`${type}`]['children'] = categoryChildren
|
||||
})
|
||||
this.typeCategoryChildren = _typeCategoryChildren
|
||||
this.$set(this, 'typeCategoryChildren', _typeCategoryChildren)
|
||||
})
|
||||
},
|
||||
handleOpenEditDrawer(data, type, autoType) {
|
||||
|
|
@ -137,15 +246,102 @@ export default {
|
|||
xhr.send(formData)
|
||||
return false
|
||||
},
|
||||
|
||||
onSearchDiscovery(v) {
|
||||
this.searchValue = v
|
||||
},
|
||||
|
||||
changeRadio(key) {
|
||||
this.radioKey = key === this.radioKey ? '' : key
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.setting-discovery {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: @border-radius-box;
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-action {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
|
||||
&-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 12px;
|
||||
border: solid 1px @primary-color_8;
|
||||
background-color: #F4F9FF;
|
||||
color: @link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-search {
|
||||
width: 254px;
|
||||
}
|
||||
|
||||
&-radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 15px;
|
||||
gap: 15px;
|
||||
|
||||
&-item {
|
||||
padding: 4px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
&_active {
|
||||
background-color: @primary-color_3;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
background-color: #fff;
|
||||
border-radius: @border-radius-box;
|
||||
box-shadow: 0px 0px 4px 0px rgba(158, 171, 190, 0.25);
|
||||
padding: 20px;
|
||||
margin-top: 24px;
|
||||
|
||||
.setting-discovery-add {
|
||||
height: 105px;
|
||||
width: 180px;
|
||||
border-radius: @border-radius-base;
|
||||
border: 1px dashed @primary-color_8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
&-text {
|
||||
color: @text-color_3;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
margin-top: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-discovery-empty {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
|
||||
&-text {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.type-header {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<div class="counter-wrap">
|
||||
<div
|
||||
v-for="(group, groupIndex) in counterData"
|
||||
:key="groupIndex"
|
||||
class="counter-group"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in group"
|
||||
:key="index"
|
||||
class="counter-item"
|
||||
>
|
||||
<div class="counter-item-header">
|
||||
<ops-icon class="counter-item-icon" :type="item.icon" />
|
||||
<span
|
||||
class="counter-item-title"
|
||||
:title="$t(item.title)"
|
||||
>
|
||||
{{ $t(item.title) }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="counter-item-number">{{ item.count }}</span>
|
||||
<template v-if="item.percent !== undefined">
|
||||
<span
|
||||
v-if="item.percent !== -1"
|
||||
:class="['counter-item-percent', 'counter-item-percent-' + (item.percentStatus ? 'up' : 'down')]"
|
||||
>
|
||||
<ops-icon class="counter-item-percent-icon" type="cmdb-arrow" />
|
||||
<span
|
||||
class="counter-item-percent-text"
|
||||
>
|
||||
{{ item.percent }}%
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="counter-item-percent-null"
|
||||
>
|
||||
-
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import { getAdcCounter } from '@/modules/cmdb/api/discovery'
|
||||
|
||||
export default {
|
||||
name: 'AdcCounter',
|
||||
props: {
|
||||
typeId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
counterDataTemplate: [
|
||||
[
|
||||
{
|
||||
title: 'cmdb.ad.ruleCount',
|
||||
icon: 'cmdb-rule',
|
||||
type: 'ruleCount',
|
||||
count: 0,
|
||||
},
|
||||
{
|
||||
title: 'cmdb.ad.execMachine',
|
||||
icon: 'cmdb-executing_machine',
|
||||
type: 'execTargetCount',
|
||||
count: 0,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
title: 'cmdb.ad.resource',
|
||||
icon: 'cmdb-resource',
|
||||
type: 'resource',
|
||||
count: 0,
|
||||
},
|
||||
{
|
||||
title: 'cmdb.ad.autoInventory',
|
||||
icon: 'cmdb-automatic_inventory',
|
||||
type: 'autoInventory',
|
||||
count: 0,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
title: 'cmdb.ad.newThisWeek',
|
||||
icon: 'cmdb-week_additions',
|
||||
type: 'rule_count',
|
||||
count: 0,
|
||||
percentStatus: true,
|
||||
percent: '',
|
||||
},
|
||||
{
|
||||
title: 'cmdb.ad.newThisMonth',
|
||||
icon: 'cmdb-month_additions',
|
||||
type: 'rule_count',
|
||||
count: 0,
|
||||
percentStatus: true,
|
||||
percent: '',
|
||||
}
|
||||
]
|
||||
],
|
||||
counterData: [],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
typeId: {
|
||||
immediate: true,
|
||||
handler(id) {
|
||||
if (id) {
|
||||
this.queryAdcCounter(id)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async queryAdcCounter(id) {
|
||||
const res = await getAdcCounter({
|
||||
type_id: id
|
||||
})
|
||||
console.log('getAdcCounter res', res)
|
||||
const _counterData = _.cloneDeep(this.counterDataTemplate)
|
||||
|
||||
_counterData[0][0]['count'] = res?.rule_count ?? 0
|
||||
_counterData[0][1]['count'] = res?.exec_target_count ?? 0
|
||||
|
||||
_counterData[1][0]['count'] = res?.instance_count ?? 0
|
||||
_counterData[1][1]['count'] = res?.accept_count ?? 0
|
||||
|
||||
const newWeekCount = Math.abs(res.this_week_count - res.last_week_count)
|
||||
const newWeekPrecent = res.last_week_count ? Number((newWeekCount / res.last_week_count).toFixed(2)) * 100 : -1
|
||||
_counterData[2][0]['count'] = res.this_week_count || 0
|
||||
_counterData[2][0]['percent'] = newWeekPrecent
|
||||
_counterData[2][0]['percentStatus'] = res.this_week_count >= res.last_week_count
|
||||
|
||||
const newMonthCount = Math.abs(res.this_month_count - res.last_month_count)
|
||||
const newMonthPrecent = res.last_month_count ? Number((newMonthCount / res.last_month_count).toFixed(2)) * 100 : -1
|
||||
_counterData[2][1]['count'] = res.this_month_count || 0
|
||||
_counterData[2][1]['percent'] = newMonthPrecent
|
||||
_counterData[2][1]['percentStatus'] = res.this_month_count >= res.last_month_count
|
||||
|
||||
this.counterData = _counterData
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.counter-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.counter-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 82px;
|
||||
border: solid 1px @border-color-base;
|
||||
flex-grow: 0;
|
||||
width: calc((100% - 30px) / 3);
|
||||
|
||||
.counter-item {
|
||||
padding: 16px 18px;
|
||||
flex-grow: 0;
|
||||
width: 50%;
|
||||
|
||||
&-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 14px;
|
||||
color: @text-color_2;
|
||||
margin-left: 4px;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
&-number {
|
||||
color: @primary-color;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&-percent {
|
||||
margin-left: 5px;
|
||||
|
||||
&-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&-up {
|
||||
color: #00B42A;
|
||||
}
|
||||
|
||||
&-down {
|
||||
color: #FD4C6A;
|
||||
|
||||
.counter-item-percent-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-percent-null {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div>
|
||||
<span v-if="!isShow">{{ showPassword }}</span>
|
||||
<span v-else>{{ password }}</span>
|
||||
<a
|
||||
class="password-eye"
|
||||
@click="switchPassword"
|
||||
>
|
||||
<a-icon :type="isShow ? 'eye-invisible' : 'eye'"/>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PasswordField',
|
||||
props: {
|
||||
password: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
showPassword: '******',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchPassword() {
|
||||
this.isShow = !this.isShow
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.password-eye {
|
||||
margin-left: 10px
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,42 +7,49 @@
|
|||
><span :style="{ color: 'rgb(195, 205, 215)' }">({{ group.ci_types.length }})</span>
|
||||
</p>
|
||||
<div
|
||||
:class="{ 'cmdb-adc-side-item': true, 'cmdb-adc-side-item-selected': currentType === type.id }"
|
||||
v-for="type in group.ci_types"
|
||||
:key="type.id"
|
||||
@click="clickSidebar(type.id)"
|
||||
:class="{ 'cmdb-adc-side-item': true, 'cmdb-adc-side-item-selected': currentType === ciType.id }"
|
||||
v-for="ciType in group.ci_types"
|
||||
:key="ciType.id"
|
||||
@click="clickSidebar(ciType.id)"
|
||||
>
|
||||
<span class="cmdb-adc-side-icon">
|
||||
<template v-if="type.icon">
|
||||
<img v-if="type.icon.split('$$')[2]" :src="`/api/common-setting/v1/file/${type.icon.split('$$')[3]}`" />
|
||||
<template v-if="ciType.icon">
|
||||
<img v-if="ciType.icon.split('$$')[2]" :src="`/api/common-setting/v1/file/${ciType.icon.split('$$')[3]}`" />
|
||||
<ops-icon
|
||||
v-else
|
||||
:style="{
|
||||
color: type.icon.split('$$')[1],
|
||||
color: ciType.icon.split('$$')[1],
|
||||
fontSize: '14px',
|
||||
}"
|
||||
:type="type.icon.split('$$')[0]"
|
||||
:type="ciType.icon.split('$$')[0]"
|
||||
/>
|
||||
</template>
|
||||
<span :style="{ color: '#2f54eb' }" v-else>{{ type.name[0].toUpperCase() }}</span>
|
||||
<span :style="{ color: '#2f54eb' }" v-else>{{ ciType.name[0].toUpperCase() }}</span>
|
||||
</span>
|
||||
<span :title="type.alias || type.name" class="cmdb-adc-side-name">{{ type.alias || type.name }}</span>
|
||||
<span :title="ciType.alias || ciType.name" class="cmdb-adc-side-name">{{ ciType.alias || ciType.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #two>
|
||||
<div id="discovery-ci">
|
||||
<a-input-search
|
||||
:placeholder="$t('cmdb.components.pleaseSearch')"
|
||||
:style="{ width: '200px', marginRight: '20px', marginBottom: '10px' }"
|
||||
@search="handleSearch"
|
||||
allowClear
|
||||
/>
|
||||
<div class="ops-list-batch-action" :style="{ marginBottom: '10px' }" v-show="!!selectedRowKeys.length">
|
||||
<span @click="batchAccept">{{ $t('cmdb.ad.accept') }}</span>
|
||||
<a-divider type="vertical" />
|
||||
<span @click="batchDelete">{{ $t('delete') }}</span>
|
||||
<span>{{ $t('cmdb.ci.selectRows', { rows: selectedRowKeys.length }) }}</span>
|
||||
<AdcCounter :typeId="currentType" />
|
||||
<div class="discovery-ci-header">
|
||||
<a-input-search
|
||||
:placeholder="$t('cmdb.components.pleaseSearch')"
|
||||
:style="{ width: '200px', marginRight: '20px' }"
|
||||
@search="handleSearch"
|
||||
allowClear
|
||||
/>
|
||||
<span class="ops-list-batch-action" v-show="selectedCount">
|
||||
<span @click="batchAccept">{{ $t('cmdb.ad.accept') }}</span>
|
||||
<a-divider type="vertical" />
|
||||
<span @click="batchDelete">{{ $t('delete') }}</span>
|
||||
<span>{{ $t('cmdb.ci.selectRows', { rows: selectedCount }) }}</span>
|
||||
</span>
|
||||
<div @click="clickLog" class="discovery-ci-log">
|
||||
<ops-icon type="a-cmdb-log1" />
|
||||
<span>{{ $t('cmdb.ad.log') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<ops-table
|
||||
show-overflow
|
||||
|
|
@ -62,56 +69,75 @@
|
|||
:checkbox-config="{ reserve: true, highlight: true, range: true }"
|
||||
:sort-config="{ remote: false, trigger: 'cell' }"
|
||||
>
|
||||
<vxe-column align="center" type="checkbox" width="60"></vxe-column>
|
||||
<vxe-column
|
||||
v-for="col in columns"
|
||||
:key="col.field"
|
||||
align="center"
|
||||
type="checkbox"
|
||||
width="60"
|
||||
fixed="left"
|
||||
></vxe-column>
|
||||
<vxe-column
|
||||
v-for="(col, index) in columns"
|
||||
:key="`${col.field}_${index}`"
|
||||
:title="col.title"
|
||||
:field="col.field"
|
||||
:width="col.width"
|
||||
:sortable="col.sortable"
|
||||
>
|
||||
<template v-if="col.value_type === '6'" #default="{row}">
|
||||
<span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column
|
||||
align="center"
|
||||
field="is_accept"
|
||||
:title="$t('cmdb.ad.isAccept')"
|
||||
v-bind="columns.length ? { width: '100px' } : { minWidth: '100px' }"
|
||||
:filters="[
|
||||
{ label: $t('yes'), value: true },
|
||||
{ label: $t('no'), value: false },
|
||||
]"
|
||||
>
|
||||
<template #default="{row}">
|
||||
{{ row.is_accept ? $t('yes') : $t('no') }}
|
||||
<template v-if="col.value_type === '6' || col.is_password" #default="{row}">
|
||||
<PasswordField
|
||||
v-if="col.is_password"
|
||||
:password="row[col.field]"
|
||||
/>
|
||||
<span
|
||||
v-else-if="col.value_type === '6' && row[col.field]"
|
||||
>
|
||||
{{ row[col.field] }}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column
|
||||
field="accept_by"
|
||||
:title="$t('cmdb.ad.acceptBy')"
|
||||
v-bind="columns.length ? { width: '80px' } : { minWidth: '80px' }"
|
||||
:filters="[]"
|
||||
:filters="acceptByFilters"
|
||||
></vxe-column>
|
||||
<vxe-column
|
||||
align="center"
|
||||
field="is_accept"
|
||||
:title="$t('cmdb.ad.isAccept')"
|
||||
v-bind="columns.length ? { width: '80px' } : { minWidth: '80px' }"
|
||||
:filters="[
|
||||
{ label: $t('yes'), value: true },
|
||||
{ label: $t('no'), value: false },
|
||||
]"
|
||||
fixed="right"
|
||||
>
|
||||
<template #default="{row}">
|
||||
<ops-icon
|
||||
:type="row.is_accept ? 'cmdb-warehousing' : 'cmdb-not_warehousing'"
|
||||
:style="{ color: row.is_accept ? '#00B42A' : '#A5A9BC' }"
|
||||
/>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column
|
||||
field="accept_time"
|
||||
:title="$t('cmdb.ad.acceptTime')"
|
||||
sortable
|
||||
v-bind="columns.length ? { width: '130px' } : { minWidth: '130px' }"
|
||||
v-bind="columns.length ? { width: '150px' } : { minWidth: '150px' }"
|
||||
fixed="right"
|
||||
></vxe-column>
|
||||
<vxe-column
|
||||
:title="$t('operation')"
|
||||
v-bind="columns.length ? { width: '60px' } : { minWidth: '60px' }"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template #default="{row}">
|
||||
<a-space>
|
||||
<a-tooltip :title="$t('cmdb.ad.accept')">
|
||||
<a v-if="!row.is_accept" @click="accept(row)"><ops-icon type="icon-xianxing-edit"/></a>
|
||||
<a v-if="!row.is_accept" @click="accept(row)"><ops-icon type="cmdb-manual_warehousing"/></a>
|
||||
</a-tooltip>
|
||||
<a :style="{ color: 'red' }" @click="deleteADC(row)"><ops-icon type="icon-xianxing-delete"/></a>
|
||||
<a :style="{ color: 'red' }" @click="deleteADC(row)"><a-icon type="delete"/></a>
|
||||
</a-space>
|
||||
</template>
|
||||
</vxe-column>
|
||||
|
|
@ -122,6 +148,23 @@
|
|||
</div>
|
||||
</template>
|
||||
</ops-table>
|
||||
|
||||
<a-modal
|
||||
v-model="logModalVisible"
|
||||
:footer="null"
|
||||
:width="596"
|
||||
>
|
||||
<div class="log-modal-title">{{ $t('cmdb.ad.log') }}</div>
|
||||
<p ref="logModelText" class="log-modal-text">
|
||||
<span
|
||||
v-for="(item, index) in logTextArray"
|
||||
:key="index"
|
||||
class="log-modal-text-item"
|
||||
>
|
||||
{{ item }}
|
||||
</span>
|
||||
</p>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
</TwoColumnLayout>
|
||||
|
|
@ -131,11 +174,26 @@
|
|||
import _ from 'lodash'
|
||||
import XEUtils from 'xe-utils'
|
||||
import TwoColumnLayout from '@/components/TwoColumnLayout'
|
||||
import { getADCCiTypes, getAdc, updateADCAccept, getADCCiTypesAttrs, deleteAdc } from '../../api/discovery'
|
||||
import AdcCounter from './components/adcCounter.vue'
|
||||
import PasswordField from './components/passwordField.vue'
|
||||
|
||||
import {
|
||||
getADCCiTypes,
|
||||
getAdc,
|
||||
updateADCAccept,
|
||||
getADCCiTypesAttrs,
|
||||
deleteAdc,
|
||||
getAdcExecHistories
|
||||
} from '../../api/discovery'
|
||||
import { getCITableColumns } from '../../utils/helper'
|
||||
|
||||
export default {
|
||||
name: 'DiscoveryCI',
|
||||
components: { TwoColumnLayout },
|
||||
components: {
|
||||
TwoColumnLayout,
|
||||
AdcCounter,
|
||||
PasswordField
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ci_types_list: [],
|
||||
|
|
@ -145,6 +203,10 @@ export default {
|
|||
columns: [],
|
||||
selectedRowKeys: [],
|
||||
searchValue: '',
|
||||
logModalVisible: false,
|
||||
logTextArray: [],
|
||||
acceptByFilters: [],
|
||||
selectedCount: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -152,7 +214,7 @@ export default {
|
|||
return this.$store.state.windowHeight
|
||||
},
|
||||
tableHeight() {
|
||||
return this.windowHeight - 140
|
||||
return this.windowHeight - 240
|
||||
},
|
||||
filterTableData() {
|
||||
const { searchValue } = this
|
||||
|
|
@ -169,7 +231,7 @@ export default {
|
|||
return rest
|
||||
}
|
||||
return this.tableData
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentType: {
|
||||
|
|
@ -180,6 +242,13 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
selectedRowKeys: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(selectedRowKeys) {
|
||||
this.selectedCount = selectedRowKeys.length
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
getADCCiTypes({ need_other: true }).then((res) => {
|
||||
|
|
@ -213,18 +282,20 @@ export default {
|
|||
if ($table) {
|
||||
const nameColumn = $table.getVxetableRef().getColumnByField('accept_by')
|
||||
if (nameColumn) {
|
||||
const acceptByFilters = _.uniqBy(
|
||||
res.result
|
||||
.filter((item) => item.accept_by)
|
||||
.map((item) => ({
|
||||
value: item.accept_by,
|
||||
label: item.accept_by,
|
||||
})),
|
||||
'value'
|
||||
)
|
||||
$table.getVxetableRef().setFilter(
|
||||
nameColumn,
|
||||
_.uniqBy(
|
||||
res.result
|
||||
.filter((item) => item.accept_by)
|
||||
.map((item) => ({
|
||||
value: item.accept_by,
|
||||
label: item.accept_by,
|
||||
})),
|
||||
'value'
|
||||
)
|
||||
acceptByFilters
|
||||
)
|
||||
this.acceptByFilters = acceptByFilters
|
||||
}
|
||||
}
|
||||
this.tableData = res.result.map((item) => ({ ..._.cloneDeep(item), ...item.instance }))
|
||||
|
|
@ -302,12 +373,33 @@ export default {
|
|||
onCancel() {},
|
||||
})
|
||||
},
|
||||
onSelectChange({ records, checked, row }) {
|
||||
onSelectChange({ records, checked }) {
|
||||
this.selectedRowKeys = records.map((item) => item.id)
|
||||
},
|
||||
handleSearch(value) {
|
||||
this.searchValue = value
|
||||
},
|
||||
|
||||
async clickLog() {
|
||||
this.logModalVisible = true
|
||||
const logRes = await getAdcExecHistories({
|
||||
type_id: this.currentType,
|
||||
page_size: 1000
|
||||
})
|
||||
let logTextArray = []
|
||||
if (logRes?.result?.length) {
|
||||
logTextArray = logRes.result.map((log) => {
|
||||
return `[${log.created_at}] ${log.stdout}`
|
||||
})
|
||||
}
|
||||
this.logTextArray = logTextArray
|
||||
this.$nextTick(() => {
|
||||
const textEl = this.$refs.logModelText
|
||||
if (textEl) {
|
||||
textEl.scrollTop = textEl.scrollHeight
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -350,5 +442,48 @@ export default {
|
|||
.ops_popover_item_selected();
|
||||
background-color: @primary-color_3;
|
||||
}
|
||||
|
||||
.discovery-ci-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 18px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.discovery-ci-log {
|
||||
cursor: pointer;
|
||||
background-color: #F4F9FF;
|
||||
border: solid 1px @primary-color_8;
|
||||
color: @primary-color;
|
||||
font-size: 12px;
|
||||
padding: 5px 12px;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.log-modal-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.log-modal-text {
|
||||
margin-top: 14px;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
height: 312px;
|
||||
overflow: auto;
|
||||
border: solid 1px @border-color-base;
|
||||
background-color: #2f333d;
|
||||
|
||||
&-item {
|
||||
color: #c5c8c6;
|
||||
width: 100%;
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue