mirror of https://github.com/veops/cmdb.git
feat(ui): auto discovery
This commit is contained in:
songlh
parent
cbc58d4a4c
commit
b379ff74c0
|
|
@ -54,6 +54,84 @@
|
||||||
<div class="content unicode" style="display: block;">
|
<div class="content unicode" style="display: block;">
|
||||||
<ul class="icon_lists dib-box">
|
<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">
|
<li class="dib">
|
||||||
<span class="icon iconfont"></span>
|
<span class="icon iconfont"></span>
|
||||||
<div class="name">ops-is_dynamic-disabled</div>
|
<div class="name">ops-is_dynamic-disabled</div>
|
||||||
|
|
@ -5100,9 +5178,9 @@
|
||||||
<pre><code class="language-css"
|
<pre><code class="language-css"
|
||||||
>@font-face {
|
>@font-face {
|
||||||
font-family: 'iconfont';
|
font-family: 'iconfont';
|
||||||
src: url('iconfont.woff2?t=1717726223524') format('woff2'),
|
src: url('iconfont.woff2?t=1718872392430') format('woff2'),
|
||||||
url('iconfont.woff?t=1717726223524') format('woff'),
|
url('iconfont.woff?t=1718872392430') format('woff'),
|
||||||
url('iconfont.ttf?t=1717726223524') format('truetype');
|
url('iconfont.ttf?t=1718872392430') format('truetype');
|
||||||
}
|
}
|
||||||
</code></pre>
|
</code></pre>
|
||||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||||
|
|
@ -5128,6 +5206,123 @@
|
||||||
<div class="content font-class">
|
<div class="content font-class">
|
||||||
<ul class="icon_lists dib-box">
|
<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">
|
<li class="dib">
|
||||||
<span class="icon iconfont ops-is_dynamic-disabled"></span>
|
<span class="icon iconfont ops-is_dynamic-disabled"></span>
|
||||||
<div class="name">
|
<div class="name">
|
||||||
|
|
@ -12697,6 +12892,110 @@
|
||||||
<div class="content symbol">
|
<div class="content symbol">
|
||||||
<ul class="icon_lists dib-box">
|
<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">
|
<li class="dib">
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
<use xlink:href="#ops-is_dynamic-disabled"></use>
|
<use xlink:href="#ops-is_dynamic-disabled"></use>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "iconfont"; /* Project id 3857903 */
|
font-family: "iconfont"; /* Project id 3857903 */
|
||||||
src: url('iconfont.woff2?t=1717726223524') format('woff2'),
|
src: url('iconfont.woff2?t=1718872392430') format('woff2'),
|
||||||
url('iconfont.woff?t=1717726223524') format('woff'),
|
url('iconfont.woff?t=1718872392430') format('woff'),
|
||||||
url('iconfont.ttf?t=1717726223524') format('truetype');
|
url('iconfont.ttf?t=1718872392430') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
|
|
@ -13,6 +13,58 @@
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-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 {
|
.ops-is_dynamic-disabled:before {
|
||||||
content: "\e952";
|
content: "\e952";
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -5,6 +5,97 @@
|
||||||
"css_prefix_text": "",
|
"css_prefix_text": "",
|
||||||
"description": "",
|
"description": "",
|
||||||
"glyphs": [
|
"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",
|
"icon_id": "40645466",
|
||||||
"name": "ops-is_dynamic-disabled",
|
"name": "ops-is_dynamic-disabled",
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -118,3 +118,65 @@ export function deleteAdc(adc_id) {
|
||||||
method: 'DELETE',
|
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>
|
<template>
|
||||||
<div>
|
<div class="http-snmp-ad">
|
||||||
<a-select v-if="ruleType === 'http'" :style="{ marginBottom: '10px' }" v-model="currentCate">
|
<HttpADCategory
|
||||||
<a-select-option v-for="cate in categories" :key="cate" :value="cate">{{ cate }}</a-select-option>
|
v-if="!isEdit && ruleType === 'http'"
|
||||||
</a-select>
|
:categories="categories"
|
||||||
<vxe-table
|
:currentCate="currentCate"
|
||||||
size="mini"
|
:tableData="tableData"
|
||||||
stripe
|
@clickCategory="setCurrentCate"
|
||||||
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>
|
<template v-else>
|
||||||
<vxe-column field="name" :title="$t('name')" width="100"> </vxe-column>
|
<a-select v-if="ruleType === 'http'" :style="{ marginBottom: '10px' }" v-model="currentCate">
|
||||||
<vxe-column field="type" :title="$t('type')" width="80"> </vxe-column>
|
<a-select-option v-for="cate in categoriesSelect" :key="cate" :value="cate">{{ cate }}</a-select-option>
|
||||||
<vxe-column field="example" :title="$t('cmdb.components.example')">
|
</a-select>
|
||||||
<template #default="{row}">
|
<AttrMapTable
|
||||||
<span v-if="row.type === 'object'">{{ JSON.stringify(row.example) }}</span>
|
v-if="isEdit"
|
||||||
<span v-else>{{ row.example }}</span>
|
ref="attrMapTable"
|
||||||
|
:ruleType="ruleType"
|
||||||
|
:tableData="tableData"
|
||||||
|
:ciTypeAttributes="ciTypeAttributes"
|
||||||
|
:uniqueKey="uniqueKey"
|
||||||
|
/>
|
||||||
|
<ADPreviewTable
|
||||||
|
v-else
|
||||||
|
:tableData="tableData"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
|
||||||
<vxe-column field="desc" :title="$t('desc')"> </vxe-column>
|
|
||||||
</template>
|
|
||||||
</vxe-table>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getHttpCategories, getHttpAttributes, getSnmpAttributes } from '../../api/discovery'
|
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 {
|
export default {
|
||||||
name: 'HttpSnmpAD',
|
name: 'HttpSnmpAD',
|
||||||
|
components: {
|
||||||
|
AttrMapTable,
|
||||||
|
ADPreviewTable,
|
||||||
|
HttpADCategory
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
ruleName: {
|
ruleName: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
@ -88,10 +65,15 @@ export default {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0,
|
default: 0,
|
||||||
},
|
},
|
||||||
|
uniqueKey: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
categories: [],
|
categories: [],
|
||||||
|
categoriesSelect: [],
|
||||||
currentCate: '',
|
currentCate: '',
|
||||||
tableData: [],
|
tableData: [],
|
||||||
}
|
}
|
||||||
|
|
@ -115,7 +97,7 @@ export default {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
if (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) {
|
if (this.isEdit) {
|
||||||
this.formatTableData(res)
|
this.formatTableData(res)
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -131,7 +113,7 @@ export default {
|
||||||
this.currentCate = ''
|
this.currentCate = ''
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
const { ruleType, ruleName } = newVal
|
const { ruleType, ruleName } = newVal
|
||||||
if (ruleType === 'snmp' && ruleName) {
|
if (['snmp'].includes(ruleType) && ruleName) {
|
||||||
getSnmpAttributes(ruleName).then((res) => {
|
getSnmpAttributes(ruleName).then((res) => {
|
||||||
if (this.isEdit) {
|
if (this.isEdit) {
|
||||||
this.formatTableData(res)
|
this.formatTableData(res)
|
||||||
|
|
@ -143,8 +125,15 @@ export default {
|
||||||
if (ruleType === 'http' && ruleName) {
|
if (ruleType === 'http' && ruleName) {
|
||||||
getHttpCategories(this.httpMap[`${this.ruleName}`].name).then((res) => {
|
getHttpCategories(this.httpMap[`${this.ruleName}`].name).then((res) => {
|
||||||
this.categories = res
|
this.categories = res
|
||||||
if (res && res.length) {
|
const categoriesSelect = []
|
||||||
this.currentCate = res[0]
|
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() {
|
getTableData() {
|
||||||
const $table = this.$refs.xTable
|
const $table = this.$refs.attrMapTable
|
||||||
const { fullData } = $table.getTableData()
|
const { fullData } = $table.getTableData()
|
||||||
return fullData || []
|
return fullData || []
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</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',
|
attributes: 'Attributes',
|
||||||
relation: 'Relation',
|
relation: 'Relation',
|
||||||
trigger: 'Triggers',
|
trigger: 'Triggers',
|
||||||
|
autoDiscoveryTab: 'AutoDiscovery',
|
||||||
attributeAD: 'Attributes AutoDiscovery',
|
attributeAD: 'Attributes AutoDiscovery',
|
||||||
relationAD: 'Relation AutoDiscovery',
|
relationAD: 'Relation AutoDiscovery',
|
||||||
grant: 'Grant',
|
grant: 'Grant',
|
||||||
|
|
@ -62,6 +63,7 @@ const cmdb_en = {
|
||||||
deletePlugin: 'Delete plugin',
|
deletePlugin: 'Delete plugin',
|
||||||
confirmDeleteADT: 'Do you confirm to delete [{pluginName}]',
|
confirmDeleteADT: 'Do you confirm to delete [{pluginName}]',
|
||||||
attributeMap: 'Attribute mapping',
|
attributeMap: 'Attribute mapping',
|
||||||
|
nodeConfig: 'Node Configuration',
|
||||||
autoDiscovery: 'AutoDiscovery',
|
autoDiscovery: 'AutoDiscovery',
|
||||||
node: 'Node',
|
node: 'Node',
|
||||||
adExecConfig: 'Execute configuration',
|
adExecConfig: 'Execute configuration',
|
||||||
|
|
@ -69,11 +71,12 @@ const cmdb_en = {
|
||||||
oneagentIdTips: 'Please enter the hexadecimal OneAgent ID starting with 0x',
|
oneagentIdTips: 'Please enter the hexadecimal OneAgent ID starting with 0x',
|
||||||
selectFromCMDBTips: 'Select from CMDB ',
|
selectFromCMDBTips: 'Select from CMDB ',
|
||||||
adAutoInLib: 'Save as CI auto',
|
adAutoInLib: 'Save as CI auto',
|
||||||
|
adAutoInLibTip: 'Discovered instances are directly warehoused into CI',
|
||||||
adInterval: 'Collection frequency',
|
adInterval: 'Collection frequency',
|
||||||
byInterval: 'by interval',
|
byInterval: 'by interval',
|
||||||
allNodes: 'All Instances',
|
allNodes: 'All machines',
|
||||||
specifyNodes: 'Specify Instance',
|
specifyNodes: 'Specify machine',
|
||||||
specifyNodesTips: 'Please fill in the specify instance!',
|
specifyNodesTips: 'Please fill in the specify machine!',
|
||||||
username: 'Username',
|
username: 'Username',
|
||||||
password: 'Password',
|
password: 'Password',
|
||||||
link: 'Link',
|
link: 'Link',
|
||||||
|
|
@ -203,6 +206,43 @@ const cmdb_en = {
|
||||||
showTips: 'The names of nodes in the service tree and topology view',
|
showTips: 'The names of nodes in the service tree and topology view',
|
||||||
isDynamic: 'Dynamic',
|
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.',
|
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: {
|
components: {
|
||||||
unselectAttributes: 'Unselected',
|
unselectAttributes: 'Unselected',
|
||||||
|
|
@ -432,12 +472,13 @@ const cmdb_en = {
|
||||||
acceptTime: 'Accept Time',
|
acceptTime: 'Accept Time',
|
||||||
confirmAccept: 'Confirm Accept?',
|
confirmAccept: 'Confirm Accept?',
|
||||||
acceptSuccess: 'Accept successfully',
|
acceptSuccess: 'Accept successfully',
|
||||||
isAccept: 'Is accept',
|
isAccept: 'Accept',
|
||||||
deleteADC: 'Confirm to delete this data?',
|
deleteADC: 'Confirm to delete this data?',
|
||||||
batchDelete: 'Confirm to delete this data?',
|
batchDelete: 'Confirm to delete this data?',
|
||||||
agent: 'Built-in & Plug-ins',
|
agent: 'Server',
|
||||||
snmp: 'Network Devices',
|
snmp: 'Network Devices',
|
||||||
http: 'Public Clouds',
|
http: 'Public Clouds',
|
||||||
|
plugin: 'Plugin',
|
||||||
rule: 'AutoDiscovery Rules',
|
rule: 'AutoDiscovery Rules',
|
||||||
timeout: 'Timeout error',
|
timeout: 'Timeout error',
|
||||||
mode: 'Mode',
|
mode: 'Mode',
|
||||||
|
|
@ -495,6 +536,19 @@ if __name__ == "__main__":
|
||||||
vserver: 'VServer',
|
vserver: 'VServer',
|
||||||
nic: 'NIC',
|
nic: 'NIC',
|
||||||
disk: 'harddisk',
|
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: {
|
ci: {
|
||||||
attributeDesc: 'Attribute Description',
|
attributeDesc: 'Attribute Description',
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,7 @@ const cmdb_zh = {
|
||||||
attributes: '模型属性',
|
attributes: '模型属性',
|
||||||
relation: '模型关联',
|
relation: '模型关联',
|
||||||
trigger: '触发器',
|
trigger: '触发器',
|
||||||
|
autoDiscoveryTab: '自动发现',
|
||||||
attributeAD: '属性自动发现',
|
attributeAD: '属性自动发现',
|
||||||
relationAD: '关系自动发现',
|
relationAD: '关系自动发现',
|
||||||
grant: '权限配置',
|
grant: '权限配置',
|
||||||
|
|
@ -62,18 +63,20 @@ const cmdb_zh = {
|
||||||
deletePlugin: '删除plugin',
|
deletePlugin: '删除plugin',
|
||||||
confirmDeleteADT: '确认删除 【{pluginName}】',
|
confirmDeleteADT: '确认删除 【{pluginName}】',
|
||||||
attributeMap: '字段映射',
|
attributeMap: '字段映射',
|
||||||
autoDiscovery: '自动发现',
|
nodeConfig: '节点配置',
|
||||||
|
autoDiscovery: '自动发现属性',
|
||||||
node: '节点',
|
node: '节点',
|
||||||
adExecConfig: '执行配置',
|
adExecConfig: '执行配置',
|
||||||
adExecTarget: '执行机器',
|
adExecTarget: '执行机器',
|
||||||
oneagentIdTips: '请输入以0x开头的16进制OneAgent ID',
|
oneagentIdTips: '请输入以0x开头的16进制OneAgent ID',
|
||||||
selectFromCMDBTips: '从CMDB中选择 ',
|
selectFromCMDBTips: '从CMDB中选择 ',
|
||||||
adAutoInLib: '自动入库',
|
adAutoInLib: '自动入库',
|
||||||
|
adAutoInLibTip: '发现的实例直接入库成CI',
|
||||||
adInterval: '采集频率',
|
adInterval: '采集频率',
|
||||||
byInterval: '按间隔',
|
byInterval: '按间隔',
|
||||||
allNodes: '所有实例',
|
allNodes: '所有机器',
|
||||||
specifyNodes: '指定实例',
|
specifyNodes: '指定机器',
|
||||||
specifyNodesTips: '请填写指定实例！',
|
specifyNodesTips: '请填写指定机器！',
|
||||||
username: '用户名',
|
username: '用户名',
|
||||||
password: '密码',
|
password: '密码',
|
||||||
link: '链接',
|
link: '链接',
|
||||||
|
|
@ -203,6 +206,43 @@ const cmdb_zh = {
|
||||||
showTips: '服务树和拓扑视图里节点的名称',
|
showTips: '服务树和拓扑视图里节点的名称',
|
||||||
isDynamic: '动态属性',
|
isDynamic: '动态属性',
|
||||||
dynamicTips: '譬如监控类的数据, 频繁更新的数据, 建议设置为动态属性, 则不会记录该属性的变更历史',
|
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: {
|
components: {
|
||||||
unselectAttributes: '未选属性',
|
unselectAttributes: '未选属性',
|
||||||
|
|
@ -432,12 +472,13 @@ const cmdb_zh = {
|
||||||
acceptTime: '入库时间',
|
acceptTime: '入库时间',
|
||||||
confirmAccept: '确认入库？',
|
confirmAccept: '确认入库？',
|
||||||
acceptSuccess: '入库成功',
|
acceptSuccess: '入库成功',
|
||||||
isAccept: '是否入库',
|
isAccept: '入库',
|
||||||
deleteADC: '确认删除该条数据？',
|
deleteADC: '确认删除该条数据？',
|
||||||
batchDelete: '确认删除这些数据？',
|
batchDelete: '确认删除这些数据？',
|
||||||
agent: '内置 & 插件',
|
agent: '服务器',
|
||||||
snmp: '网络设备',
|
snmp: '网络设备',
|
||||||
http: '公有云资源',
|
http: '公有云',
|
||||||
|
plugin: '插件',
|
||||||
rule: '自动发现规则',
|
rule: '自动发现规则',
|
||||||
timeout: '超时错误',
|
timeout: '超时错误',
|
||||||
mode: '模式',
|
mode: '模式',
|
||||||
|
|
@ -495,6 +536,19 @@ if __name__ == "__main__":
|
||||||
vserver: '虚拟机',
|
vserver: '虚拟机',
|
||||||
nic: '网卡',
|
nic: '网卡',
|
||||||
disk: '硬盘',
|
disk: '硬盘',
|
||||||
|
httpSearchPlaceHolder: '请输入关键词',
|
||||||
|
corporateTip: '更多类型见企业版，有需要请与我们联系 ',
|
||||||
|
ruleCount: '规则数',
|
||||||
|
execMachine: '执行机器数',
|
||||||
|
resource: '自动发现资源数',
|
||||||
|
autoInventory: '入库数',
|
||||||
|
newThisWeek: '本周新增',
|
||||||
|
newThisMonth: '本月新增',
|
||||||
|
log: '日志',
|
||||||
|
discoveryCardResoureTip: '自动发现的资源类型数',
|
||||||
|
addPlugin: '新增插件',
|
||||||
|
pluginSearchTip: '请搜索规则',
|
||||||
|
innerFlag: '内置'
|
||||||
},
|
},
|
||||||
ci: {
|
ci: {
|
||||||
attributeDesc: '查看属性配置',
|
attributeDesc: '查看属性配置',
|
||||||
|
|
|
||||||
|
|
@ -167,16 +167,20 @@
|
||||||
#default="{ row }"
|
#default="{ row }"
|
||||||
>
|
>
|
||||||
<span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
|
<span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
|
||||||
|
<template v-else-if="col.is_link && row[col.field]">
|
||||||
<a
|
<a
|
||||||
v-else-if="col.is_link && row[col.field]"
|
v-for="(item, linkIndex) in (col.is_list ? row[col.field] : [row[col.field]])"
|
||||||
|
:key="linkIndex"
|
||||||
:href="
|
:href="
|
||||||
row[col.field].startsWith('http') || row[col.field].startsWith('https')
|
item.startsWith('http') || item.startsWith('https')
|
||||||
? `${row[col.field]}`
|
? `${item}`
|
||||||
: `http://${row[col.field]}`
|
: `http://${item}`
|
||||||
"
|
"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>{{ row[col.field] }}</a
|
|
||||||
>
|
>
|
||||||
|
{{ item }}
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
<PasswordField
|
<PasswordField
|
||||||
v-else-if="col.is_password && row[col.field]"
|
v-else-if="col.is_password && row[col.field]"
|
||||||
:ci_id="row._id"
|
:ci_id="row._id"
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<a-modal width="800px" :visible="visible" @ok="handleOK" @cancel="handleCancel" :closable="false">
|
<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>
|
<template #footer>
|
||||||
<a-space>
|
<a-space>
|
||||||
<a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
|
<a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
|
||||||
|
|
@ -14,7 +18,7 @@
|
||||||
<script>
|
<script>
|
||||||
import _ from 'lodash'
|
import _ from 'lodash'
|
||||||
import Discovery from '../discovery'
|
import Discovery from '../discovery'
|
||||||
import { postCITypeDiscovery } from '../../api/discovery'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ADModal',
|
name: 'ADModal',
|
||||||
components: { Discovery },
|
components: { Discovery },
|
||||||
|
|
@ -49,20 +53,17 @@ export default {
|
||||||
},
|
},
|
||||||
async handleOK() {
|
async handleOK() {
|
||||||
if (this.selectedIds && this.selectedIds.length) {
|
if (this.selectedIds && this.selectedIds.length) {
|
||||||
const promises = this.selectedIds.map(({ id, type }) => {
|
const adCITypeList = this.selectedIds.map((item, index) => {
|
||||||
return postCITypeDiscovery(this.CITypeId, { adr_id: id, interval: type === 'agent' ? 300 : 3600 })
|
return {
|
||||||
})
|
adr_id: item.id,
|
||||||
await Promise.all(promises)
|
id: new Date().getTime() + index,
|
||||||
.then((res) => {
|
extra_option: {
|
||||||
this.getCITypeDiscovery(res[0].id)
|
alias: ''
|
||||||
this.$message.success(this.$t('addSuccess'))
|
},
|
||||||
})
|
isClient: true,
|
||||||
.catch(() => {
|
}
|
||||||
this.getCITypeDiscovery()
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
this.handleCancel()
|
|
||||||
})
|
})
|
||||||
|
this.$emit('pushCITypeList', adCITypeList)
|
||||||
}
|
}
|
||||||
this.handleCancel()
|
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>
|
<template>
|
||||||
<div class="attr-ad" :style="{ height: `${windowHeight - 130}px` }">
|
<div class="attr-ad" :style="{ height: `${windowHeight - 130}px` }">
|
||||||
<div v-if="adCITypeList && adCITypeList.length">
|
<div v-if="adCITypeList && adCITypeList.length">
|
||||||
<a-tabs size="small" v-model="currentTab">
|
<AttrADTabs
|
||||||
<a-tab-pane v-for="item in adCITypeList" :key="item.id">
|
:adCITypeList="adCITypeList"
|
||||||
<a-space slot="tab">
|
:currentTab="currentTab"
|
||||||
<span v-if="item.extra_option && item.extra_option.alias">{{ item.extra_option.alias }}</span>
|
:getADCITypeParam="getADCITypeParam"
|
||||||
<span v-else>{{ getADCITypeParam(item.adr_id) }}</span>
|
@changeTab="changeTab"
|
||||||
<a-icon type="close-circle" @click="(e) => deleteADT(e, item)" />
|
@changeAlias="changeAlias"
|
||||||
</a-space>
|
@deleteADT="deleteADT"
|
||||||
|
@clickAdd="() => $refs.adModal.open()"
|
||||||
|
/>
|
||||||
<AttrADTabpane
|
<AttrADTabpane
|
||||||
:ref="`attrAdTabpane_${item.id}`"
|
:key="`attrAdTabpane_${currentTab}`"
|
||||||
:adr_id="item.adr_id"
|
:ref="`attrAdTabpaneRef`"
|
||||||
|
:adr_id="currentADData.adr_id"
|
||||||
|
:CITypeId="CITypeId"
|
||||||
:adrList="adrList"
|
:adrList="adrList"
|
||||||
:adCITypeList="adCITypeList"
|
:adCITypeList="adCITypeList"
|
||||||
:currentAdt="item"
|
:currentAdt="currentADData"
|
||||||
:ciTypeAttributes="ciTypeAttributes"
|
:ciTypeAttributes="ciTypeAttributes"
|
||||||
:currentAdr="getADCITypeParam(item.adr_id, undefined, true)"
|
:currentAdr="getADCITypeParam(currentADData.adr_id, undefined, true)"
|
||||||
@openEditDrawer="(data, type, adType) => openEditDrawer(data, type, adType)"
|
@openEditDrawer="(data, type, adType) => openEditDrawer(data, type, adType)"
|
||||||
@handleSave="getCITypeDiscovery"
|
@handleSave="saveTabpane"
|
||||||
/>
|
/>
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
<a-empty
|
<a-empty
|
||||||
v-else
|
v-else
|
||||||
|
|
@ -54,28 +45,41 @@
|
||||||
{{ $t('add') }}
|
{{ $t('add') }}
|
||||||
</a-button>
|
</a-button>
|
||||||
</a-empty>
|
</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" />
|
<EditDrawer ref="editDrawer" :is_inner="false" @updateNotInner="updateNotInner" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import _ from 'lodash'
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
import ADModal from './adModal.vue'
|
|
||||||
import {
|
import {
|
||||||
getDiscovery,
|
getDiscovery,
|
||||||
getCITypeDiscovery,
|
getCITypeDiscovery,
|
||||||
deleteCITypeDiscovery,
|
deleteCITypeDiscovery,
|
||||||
postCITypeDiscovery,
|
|
||||||
deleteDiscovery,
|
deleteDiscovery,
|
||||||
|
putCITypeDiscovery
|
||||||
} from '../../api/discovery'
|
} from '../../api/discovery'
|
||||||
import { getCITypeAttributesById } from '../../api/CITypeAttr'
|
import { getCITypeAttributesById } from '../../api/CITypeAttr'
|
||||||
|
|
||||||
|
import ADModal from './adModal.vue'
|
||||||
import AttrADTabpane from './attrADTabpane.vue'
|
import AttrADTabpane from './attrADTabpane.vue'
|
||||||
import EditDrawer from '../discovery/editDrawer.vue'
|
import EditDrawer from '../discovery/editDrawer.vue'
|
||||||
|
import AttrADTabs from './attrADTabs.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AttrAutoDiscovery',
|
name: 'AttrAutoDiscovery',
|
||||||
components: { ADModal, AttrADTabpane, EditDrawer },
|
components: {
|
||||||
|
ADModal,
|
||||||
|
AttrADTabpane,
|
||||||
|
EditDrawer,
|
||||||
|
AttrADTabs
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
CITypeId: {
|
CITypeId: {
|
||||||
type: Number,
|
type: Number,
|
||||||
|
|
@ -86,7 +90,8 @@ export default {
|
||||||
return {
|
return {
|
||||||
ciTypeAttributes: [],
|
ciTypeAttributes: [],
|
||||||
adrList: [],
|
adrList: [],
|
||||||
adCITypeList: [],
|
serviceCITYpeList: [],
|
||||||
|
clientCITypeList: [],
|
||||||
currentTab: '',
|
currentTab: '',
|
||||||
deletePlugin: false,
|
deletePlugin: false,
|
||||||
}
|
}
|
||||||
|
|
@ -95,6 +100,13 @@ export default {
|
||||||
...mapState({
|
...mapState({
|
||||||
windowHeight: (state) => state.windowHeight,
|
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() {
|
provide() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -106,7 +118,7 @@ export default {
|
||||||
handler() {
|
handler() {
|
||||||
if (this.currentTab) {
|
if (this.currentTab) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs[`attrAdTabpane_${this.currentTab}`][0].init()
|
this.$refs[`attrAdTabpaneRef`].init()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -121,7 +133,7 @@ export default {
|
||||||
})
|
})
|
||||||
if (this.currentTab) {
|
if (this.currentTab) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs[`attrAdTabpane_${this.currentTab}`][0].init()
|
this.$refs[`attrAdTabpaneRef`].init()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -134,7 +146,14 @@ export default {
|
||||||
},
|
},
|
||||||
async getCITypeDiscovery(currentTab) {
|
async getCITypeDiscovery(currentTab) {
|
||||||
await getCITypeDiscovery(this.CITypeId).then((res) => {
|
await getCITypeDiscovery(this.CITypeId).then((res) => {
|
||||||
this.adCITypeList = res.filter((item) => item.adr_id)
|
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) {
|
if (this.adCITypeList && this.adCITypeList.length && !this.currentTab) {
|
||||||
this.currentTab = this.adCITypeList[0].id
|
this.currentTab = this.adCITypeList[0].id
|
||||||
}
|
}
|
||||||
|
|
@ -142,6 +161,18 @@ export default {
|
||||||
this.currentTab = 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) {
|
getADCITypeParam(adr_id, params = 'name', isAll = false) {
|
||||||
const _find = this.adrList.find((item) => item.id === adr_id)
|
const _find = this.adrList.find((item) => item.id === adr_id)
|
||||||
|
|
@ -152,52 +183,115 @@ export default {
|
||||||
return _find[`${params}`]
|
return _find[`${params}`]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async deleteADT(e, item) {
|
async deleteADT(item) {
|
||||||
e.preventDefault()
|
|
||||||
e.stopPropagation()
|
|
||||||
const that = this
|
const that = this
|
||||||
|
const is_plugin = this.getADCITypeParam(item.adr_id, 'is_plugin')
|
||||||
|
|
||||||
this.$confirm({
|
this.$confirm({
|
||||||
title: that.$t('cmdb.ciType.confirmDeleteADT', { pluginName: `${item?.extra_option?.alias || this.getADCITypeParam(item.adr_id)}` }),
|
title: that.$t('cmdb.ciType.confirmDeleteADT', { pluginName: `${item?.extra_option?.alias || this.getADCITypeParam(item.adr_id)}` }),
|
||||||
content: (h) => (
|
content: (h) => {
|
||||||
|
if (!is_plugin) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
return (
|
||||||
<div>
|
<div>
|
||||||
<a-checkbox v-model={that.deletePlugin}>{that.$t('cmdb.ciType.deletePlugin')}</a-checkbox>
|
<a-checkbox
|
||||||
|
v-model={that.deletePlugin}
|
||||||
|
>
|
||||||
|
{that.$t('cmdb.ciType.deletePlugin')}
|
||||||
|
</a-checkbox>
|
||||||
</div>
|
</div>
|
||||||
),
|
)
|
||||||
onOk() {
|
},
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
deleteCITypeDiscovery(item.id).then(async () => {
|
deleteCITypeDiscovery(item.id).then(async () => {
|
||||||
if (that.currentTab === item.id) {
|
if (that.currentTab === item.id) {
|
||||||
that.currentTab = ''
|
that.currentTab = ''
|
||||||
}
|
}
|
||||||
that.$message.success(that.$t('deleteSuccess'))
|
that.$message.success(that.$t('deleteSuccess'))
|
||||||
that.getCITypeDiscovery()
|
that.getCITypeDiscovery()
|
||||||
if (that.deletePlugin) {
|
if (is_plugin && that.deletePlugin) {
|
||||||
await deleteDiscovery(item.adr_id).finally(() => {
|
that.deleteDiscovery(item.adr_id)
|
||||||
that.deletePlugin = false
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
that.deletePlugin = false
|
that.deletePlugin = false
|
||||||
})
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onCancel() {
|
onCancel() {
|
||||||
that.deletePlugin = false
|
that.deletePlugin = false
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
deleteDiscovery(id) {
|
||||||
|
deleteDiscovery(id).finally(async () => {
|
||||||
|
this.deletePlugin = false
|
||||||
|
await this.getDiscovery()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
openEditDrawer(data, type, adType) {
|
openEditDrawer(data, type, adType) {
|
||||||
this.$refs.editDrawer.open(data, type, adType)
|
this.$refs.editDrawer.open(data, type, adType)
|
||||||
},
|
},
|
||||||
async updateNotInner(adr) {
|
async updateNotInner(adr) {
|
||||||
const _idx = this.adCITypeList.findIndex((item) => item.adr_id === adr.id)
|
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.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.$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>
|
</script>
|
||||||
|
|
@ -206,6 +300,7 @@ export default {
|
||||||
.attr-ad {
|
.attr-ad {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
|
|
||||||
.attr-ad-header {
|
.attr-ad-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|
@ -216,7 +311,13 @@ export default {
|
||||||
border-left: 4px solid @primary-color;
|
border-left: 4px solid @primary-color;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: rgba(0, 0, 0, 0.75);
|
color: rgba(0, 0, 0, 0.75);
|
||||||
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.attr-ad-header-margin {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.attr-ad-footer {
|
.attr-ad-footer {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div :style="{ height: `${windowHeight - 187}px`, overflow: 'auto', position: 'relative' }">
|
<div class="attr-ad-tab-pane" :style="{ height: `${windowHeight - 254}px` }">
|
||||||
<a
|
<a
|
||||||
v-if="!adrIsInner"
|
v-if="!adrIsInner"
|
||||||
:style="{ position: 'absolute', right: 0, top: 0 }"
|
:style="{ position: 'absolute', right: 0, top: 0 }"
|
||||||
@click="
|
@click="
|
||||||
() => {
|
() => {
|
||||||
$emit('openEditDrawer', currentAdr, 'edit', 'agent')
|
$emit('openEditDrawer', currentAdr, 'edit', 'plugin')
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
|
@ -14,41 +14,16 @@
|
||||||
<span>{{ $t('edit') }}</span>
|
<span>{{ $t('edit') }}</span>
|
||||||
</a-space>
|
</a-space>
|
||||||
</a>
|
</a>
|
||||||
<div>{{ $t('alias') }}：<a-input v-model="alias" style="width:200px;" /></div>
|
|
||||||
<div class="attr-ad-header">{{ $t('cmdb.ciType.attributeMap') }}</div>
|
<div class="attr-ad-header">{{ $t('cmdb.ciType.attributeMap') }}</div>
|
||||||
<vxe-table
|
<div class="attr-ad-attributemap-main">
|
||||||
|
<AttrMapTable
|
||||||
v-if="adrType === 'agent'"
|
v-if="adrType === 'agent'"
|
||||||
ref="xTable"
|
ref="attrMapTable"
|
||||||
:edit-config="{ trigger: 'click', mode: 'cell' }"
|
:ruleType="adrType"
|
||||||
size="mini"
|
:tableData="tableData"
|
||||||
stripe
|
:ciTypeAttributes="ciTypeAttributes"
|
||||||
class="ops-stripe-table"
|
:uniqueKey="uniqueKey"
|
||||||
: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
|
<HttpSnmpAD
|
||||||
v-else
|
v-else
|
||||||
:isEdit="true"
|
:isEdit="true"
|
||||||
|
|
@ -58,31 +33,24 @@
|
||||||
:ciTypeAttributes="ciTypeAttributes"
|
:ciTypeAttributes="ciTypeAttributes"
|
||||||
:adCITypeList="adCITypeList"
|
:adCITypeList="adCITypeList"
|
||||||
:currentTab="adr_id"
|
:currentTab="adr_id"
|
||||||
|
:uniqueKey="uniqueKey"
|
||||||
:style="{ marginBottom: '20px' }"
|
:style="{ marginBottom: '20px' }"
|
||||||
/>
|
/>
|
||||||
<a-form-model
|
</div>
|
||||||
v-if="adrType === 'http'"
|
<template v-if="adrType === 'snmp'">
|
||||||
:model="form2"
|
<div class="attr-ad-header">{{ $t('cmdb.ciType.nodeConfig') }}</div>
|
||||||
:labelCol="{ span: 2 }"
|
<a-form :form="form3" layout="inline" class="attr-ad-snmp-form">
|
||||||
:wrapperCol="{ span: 8 }"
|
<NodeSetting ref="nodeSetting" :initNodes="nodes" :form="form3" />
|
||||||
: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>
|
</a-form>
|
||||||
|
</template>
|
||||||
<div class="attr-ad-header">{{ $t('cmdb.ciType.adExecConfig') }}</div>
|
<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')">
|
<a-form-model-item :label="$t('cmdb.ciType.adExecTarget')">
|
||||||
<CustomRadio v-model="agent_type" :radioList="agentTypeRadioList">
|
<CustomRadio v-model="agent_type" :radioList="agentTypeRadioList">
|
||||||
<a-input
|
<a-input
|
||||||
|
|
@ -103,16 +71,60 @@
|
||||||
</a-input>
|
</a-input>
|
||||||
</CustomRadio>
|
</CustomRadio>
|
||||||
</a-form-model-item>
|
</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-switch v-model="form.auto_accept" />
|
||||||
</a-form-model-item>
|
</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>
|
</a-form-model>
|
||||||
<div class="attr-ad-header">{{ $t('cmdb.ciType.adInterval') }}</div>
|
<template v-if="adrType === 'http'">
|
||||||
<CustomRadio :radioList="radioList" v-model="interval">
|
<div class="attr-ad-header attr-ad-header-margin">{{ $t('cmdb.ciType.cloudAccessKey') }}</div>
|
||||||
<span v-show="interval === 'interval'" slot="extra_interval">
|
<div class="public-cloud-info">{{ $t('cmdb.ciType.cloudAccessKeyTip') }}</div>
|
||||||
<a-input-number v-model="intervalValue" :min="1" /> {{ $t('seconds') }}
|
<a-form-model
|
||||||
</span>
|
:model="form2"
|
||||||
</CustomRadio>
|
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">
|
<div class="attr-ad-footer">
|
||||||
<a-button type="primary" @click="handleSave">{{ $t('save') }}</a-button>
|
<a-button type="primary" @click="handleSave">{{ $t('save') }}</a-button>
|
||||||
|
|
@ -125,14 +137,26 @@
|
||||||
import { v4 as uuidv4 } from 'uuid'
|
import { v4 as uuidv4 } from 'uuid'
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
import Vcrontab from '@/components/Crontab'
|
import Vcrontab from '@/components/Crontab'
|
||||||
import { putCITypeDiscovery } from '../../api/discovery'
|
import { putCITypeDiscovery, postCITypeDiscovery } from '../../api/discovery'
|
||||||
|
|
||||||
import HttpSnmpAD from '../../components/httpSnmpAD'
|
import HttpSnmpAD from '../../components/httpSnmpAD'
|
||||||
|
import AttrMapTable from '@/modules/cmdb/components/attrMapTable/index.vue'
|
||||||
import CMDBExprDrawer from '@/components/CMDBExprDrawer'
|
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 {
|
export default {
|
||||||
name: 'AttrADTabpane',
|
name: 'AttrADTabpane',
|
||||||
components: { Vcrontab, HttpSnmpAD, CMDBExprDrawer, MonitorNodeSetting },
|
components: {
|
||||||
|
Vcrontab,
|
||||||
|
HttpSnmpAD,
|
||||||
|
CMDBExprDrawer,
|
||||||
|
NodeSetting,
|
||||||
|
AttrMapTable,
|
||||||
|
AttrADTest,
|
||||||
|
ElPopover: Popover
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
adr_id: {
|
adr_id: {
|
||||||
type: Number,
|
type: Number,
|
||||||
|
|
@ -158,6 +182,10 @@ export default {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
},
|
},
|
||||||
|
CITypeId: {
|
||||||
|
type: Number,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -171,7 +199,7 @@ export default {
|
||||||
key: '',
|
key: '',
|
||||||
secret: '',
|
secret: '',
|
||||||
},
|
},
|
||||||
interval: 'interval', // interval cron
|
interval: 'cron', // interval cron
|
||||||
cron: '',
|
cron: '',
|
||||||
intervalValue: 3,
|
intervalValue: 3,
|
||||||
agent_type: 'agent_id',
|
agent_type: 'agent_id',
|
||||||
|
|
@ -184,50 +212,57 @@ export default {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
form3: this.$form.createForm(this, { name: 'snmp_form' }),
|
form3: this.$form.createForm(this, { name: 'snmp_form' }),
|
||||||
alias: '',
|
cronVisible: false,
|
||||||
|
uniqueKey: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
windowHeight: (state) => state.windowHeight,
|
windowHeight: (state) => state.windowHeight,
|
||||||
userRoles: (state) => state.user.roles,
|
user: (state) => state.user,
|
||||||
}),
|
}),
|
||||||
adrType() {
|
adrType() {
|
||||||
return this.currentAdr.type
|
return this.currentAdr?.type || ''
|
||||||
},
|
},
|
||||||
adrName() {
|
adrName() {
|
||||||
return this.currentAdr.name
|
return this.currentAdr?.name || ''
|
||||||
},
|
},
|
||||||
adrIsInner() {
|
adrIsInner() {
|
||||||
return this.currentAdr.is_inner
|
return this.currentAdr?.is_inner || ''
|
||||||
},
|
},
|
||||||
agentTypeRadioList() {
|
agentTypeRadioList() {
|
||||||
const { permissions = [] } = this.userRoles
|
const radios = [
|
||||||
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: 'agent_id', label: this.$t('cmdb.ciType.specifyNodes') },
|
||||||
{ value: 'query_expr', label: this.$t('cmdb.ciType.selectFromCMDBTips') },
|
{ 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 [
|
|
||||||
{ value: 'agent_id', label: this.$t('cmdb.ciType.specifyNodes') },
|
return radios
|
||||||
{ value: 'query_expr', label: this.$t('cmdb.ciType.selectFromCMDBTips') },
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
radioList() {
|
radioList() {
|
||||||
return [
|
return [
|
||||||
{ value: 'interval', label: this.$t('cmdb.ciType.byInterval') },
|
{ 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() {},
|
mounted() {},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
init() {
|
||||||
const _find = this.adrList.find((item) => Number(item.id) === Number(this.adr_id))
|
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))
|
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') {
|
if (this.adrType === 'http') {
|
||||||
const { category = undefined, key = '', secret = '' } = _findADT?.extra_option ?? {}
|
const { category = undefined, key = '', secret = '' } = _findADT?.extra_option ?? {}
|
||||||
this.form2 = {
|
this.form2 = {
|
||||||
|
|
@ -237,7 +272,7 @@ export default {
|
||||||
this.$refs.httpSnmpAd.setCurrentCate(category)
|
this.$refs.httpSnmpAd.setCurrentCate(category)
|
||||||
}
|
}
|
||||||
if (this.adrType === 'snmp') {
|
if (this.adrType === 'snmp') {
|
||||||
this.nodes = _findADT?.extra_option?.nodes ?? [
|
this.nodes = _findADT?.extra_option?.nodes?.length ? _findADT?.extra_option?.nodes : [
|
||||||
{
|
{
|
||||||
id: uuidv4(),
|
id: uuidv4(),
|
||||||
ip: '',
|
ip: '',
|
||||||
|
|
@ -246,9 +281,9 @@ export default {
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.monitorNodeSetting.initNodesFunc()
|
this.$refs.nodeSetting.initNodesFunc()
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.monitorNodeSetting.setNodeField()
|
this.$refs.nodeSetting.setNodeField()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -283,23 +318,16 @@ export default {
|
||||||
} else {
|
} else {
|
||||||
this.agent_type = this.agentTypeRadioList[0].value
|
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.interval = 'cron'
|
||||||
this.cron = `0 ${_findADT.cron}`
|
this.cron = _findADT?.cron || ''
|
||||||
}
|
|
||||||
},
|
|
||||||
getAttrNameByAttrName(attrName) {
|
|
||||||
const _find = this.ciTypeAttributes.find((item) => item.name === attrName)
|
|
||||||
return _find?.alias || _find?.name || ''
|
|
||||||
},
|
},
|
||||||
|
|
||||||
crontabFill(cron) {
|
crontabFill(cron) {
|
||||||
this.cron = cron
|
this.cron = cron
|
||||||
},
|
},
|
||||||
handleSave() {
|
handleSave() {
|
||||||
const { currentAdt, alias } = this
|
const { currentAdt } = this
|
||||||
let params
|
let params
|
||||||
if (this.adrType === 'http') {
|
if (this.adrType === 'http') {
|
||||||
params = {
|
params = {
|
||||||
|
|
@ -311,11 +339,11 @@ export default {
|
||||||
}
|
}
|
||||||
if (this.adrType === 'snmp') {
|
if (this.adrType === 'snmp') {
|
||||||
params = {
|
params = {
|
||||||
extra_option: { nodes: this.$refs.monitorNodeSetting?.getNodeValue() ?? [] },
|
extra_option: { nodes: this.$refs.nodeSetting?.getNodeValue() ?? [] },
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.adrType === 'agent') {
|
if (this.adrType === 'agent') {
|
||||||
const $table = this.$refs.xTable
|
const $table = this.$refs.attrMapTable
|
||||||
const { fullData: _tableData } = $table.getTableData()
|
const { fullData: _tableData } = $table.getTableData()
|
||||||
const attributes = {}
|
const attributes = {}
|
||||||
_tableData.forEach((td) => {
|
_tableData.forEach((td) => {
|
||||||
|
|
@ -340,17 +368,14 @@ export default {
|
||||||
attributes,
|
attributes,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.interval === 'cron') {
|
|
||||||
this.$refs.cronTab.submitFill()
|
|
||||||
}
|
|
||||||
params = {
|
params = {
|
||||||
...params,
|
...params,
|
||||||
...this.form,
|
...this.form,
|
||||||
type_id: this.CITypeId,
|
|
||||||
adr_id: currentAdt.adr_id,
|
adr_id: currentAdt.adr_id,
|
||||||
interval: this.interval === 'interval' ? this.intervalValue : null,
|
|
||||||
cron: this.interval === 'cron' ? this.cron : null,
|
cron: this.interval === 'cron' ? this.cron : null,
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.agent_type === 'agent_id' || this.agent_type === 'all') {
|
if (this.agent_type === 'agent_id' || this.agent_type === 'all') {
|
||||||
params.query_expr = ''
|
params.query_expr = ''
|
||||||
if (this.agent_type === 'agent_id' && !params.agent_id) {
|
if (this.agent_type === 'agent_id' && !params.agent_id) {
|
||||||
|
|
@ -358,6 +383,7 @@ export default {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.agent_type === 'query_expr' || this.agent_type === 'all') {
|
if (this.agent_type === 'query_expr' || this.agent_type === 'all') {
|
||||||
params.agent_id = ''
|
params.agent_id = ''
|
||||||
if (this.agent_type === 'query_expr' && !params.query_expr) {
|
if (this.agent_type === 'query_expr' && !params.query_expr) {
|
||||||
|
|
@ -365,16 +391,29 @@ export default {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (params.extra_option) {
|
|
||||||
params.extra_option.alias = alias
|
if (!this.cron) {
|
||||||
} else {
|
this.$message.error(this.$t('cmdb.ciType.cronRequiredTip'))
|
||||||
params.extra_option = {}
|
return
|
||||||
params.extra_option.alias = alias
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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) => {
|
putCITypeDiscovery(currentAdt.id, params).then((res) => {
|
||||||
this.$message.success(this.$t('saveSuccess'))
|
this.$message.success(this.$t('saveSuccess'))
|
||||||
this.$emit('handleSave')
|
this.$emit('handleSave', res.id)
|
||||||
})
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
handleOpenCmdb() {
|
handleOpenCmdb() {
|
||||||
this.$refs.cmdbDrawer.open()
|
this.$refs.cmdbDrawer.open()
|
||||||
|
|
@ -385,11 +424,41 @@ export default {
|
||||||
query_expr: `${text}`,
|
query_expr: `${text}`,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
hideCron() {
|
||||||
|
this.cronVisible = false
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</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 {
|
.attr-ad-snmp-form {
|
||||||
.ant-form-item {
|
.ant-form-item {
|
||||||
margin-bottom: 0;
|
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>
|
<AttributesTable ref="attributesTable" :CITypeId="CITypeId" :CITypeName="CITypeName"></AttributesTable>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane key="2" :tab="$t('cmdb.ciType.relation')">
|
<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>
|
||||||
<a-tab-pane key="3" :tab="$t('cmdb.ciType.attributeAD')">
|
<a-tab-pane key="3" :tab="$t('cmdb.ciType.autoDiscoveryTab')">
|
||||||
<AttrAD :CITypeId="CITypeId"></AttrAD>
|
<ADTab v-if="activeKey === '3'" :CITypeId="CITypeId"></ADTab>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane key="4" :tab="$t('cmdb.ciType.relationAD')">
|
<a-tab-pane key="5" :tab="$t('cmdb.reconciliation.tab')">
|
||||||
<RelationAD :CITypeId="CITypeId"></RelationAD>
|
<ReconciliationTable ref="reconciliationTable" :CITypeId="CITypeId" :CITypeChangeDisabled="true" />
|
||||||
</a-tab-pane>
|
</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>
|
<TriggerTable ref="triggerTable" :CITypeId="CITypeId"></TriggerTable>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane key="6" :tab="$t('cmdb.ciType.grant')">
|
<a-tab-pane key="7" :tab="$t('cmdb.ciType.grant')">
|
||||||
|
<template v-if="activeKey === '7'">
|
||||||
<GrantComp :CITypeId="CITypeId" resourceType="CIType" :resourceTypeName="CITypeName"></GrantComp>
|
<GrantComp :CITypeId="CITypeId" resourceType="CIType" :resourceTypeName="CITypeName"></GrantComp>
|
||||||
<div class="citype-detail-title">{{ $t('cmdb.components.relationGrant') }}</div>
|
<div class="citype-detail-title">{{ $t('cmdb.components.relationGrant') }}</div>
|
||||||
<RelationTable isInGrantComp :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable>
|
<RelationTable isInGrantComp :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable>
|
||||||
|
</template>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
</a-card>
|
</a-card>
|
||||||
|
|
@ -29,8 +31,7 @@
|
||||||
import AttributesTable from './attributesTable'
|
import AttributesTable from './attributesTable'
|
||||||
import RelationTable from './relationTable'
|
import RelationTable from './relationTable'
|
||||||
import TriggerTable from './triggerTable.vue'
|
import TriggerTable from './triggerTable.vue'
|
||||||
import AttrAD from './attrAD.vue'
|
import ADTab from './adTab.vue'
|
||||||
import RelationAD from './relationAD.vue'
|
|
||||||
import GrantComp from '../../components/cmdbGrant/grantComp.vue'
|
import GrantComp from '../../components/cmdbGrant/grantComp.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -39,8 +40,7 @@ export default {
|
||||||
AttributesTable,
|
AttributesTable,
|
||||||
RelationTable,
|
RelationTable,
|
||||||
TriggerTable,
|
TriggerTable,
|
||||||
AttrAD,
|
ADTab,
|
||||||
RelationAD,
|
|
||||||
GrantComp,
|
GrantComp,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,64 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="relation-ad" :style="{ height: `${windowHeight - 130}px` }">
|
<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-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">
|
<div class="relation-ad-item" v-for="item in relationList" :key="item.id">
|
||||||
<treeselect
|
<treeselect
|
||||||
class="custom-treeselect"
|
class="custom-treeselect"
|
||||||
:style="{ width: '200px', marginRight: '10px', '--custom-height': '32px' }"
|
:style="{ width: '230px', '--custom-height': '32px' }"
|
||||||
v-model="item.attrName"
|
v-model="item.ad_key"
|
||||||
:multiple="false"
|
:multiple="false"
|
||||||
:clearable="true"
|
:clearable="true"
|
||||||
searchable
|
searchable
|
||||||
:options="ciTypeADTAttributes"
|
:options="ciTypeADTAttributes"
|
||||||
value-consists-of="LEAF_PRIORITY"
|
value-consists-of="LEAF_PRIORITY"
|
||||||
:placeholder="$t('cmdb.ciType.selectAttributes')"
|
:placeholder="$t('cmdb.ciType.relationADSelectAttr')"
|
||||||
:normalizer="
|
:normalizer="
|
||||||
(node) => {
|
(node) => {
|
||||||
return {
|
return {
|
||||||
id: node.name,
|
id: node.value,
|
||||||
label: node.name,
|
label: node.label,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div :title="node.label" slot="option-label" slot-scope="{ node }">
|
<div :title="node.label" slot="option-label" slot-scope="{ node }">
|
||||||
<div>{{ node.label }}</div>
|
<div>{{ node.label }}</div>
|
||||||
<div :style="{ fontSize: '12px', color: '#cbcbcb', lineHeight: '12px' }">{{ node.raw.desc }}</div>
|
<!-- <div :style="{ fontSize: '12px', color: '#cbcbcb', lineHeight: '12px' }">{{ node.raw.desc }}</div> -->
|
||||||
</div>
|
</div>
|
||||||
</treeselect>
|
</treeselect>
|
||||||
<a><a-icon type="swap"/></a>
|
<div
|
||||||
|
class="relation-ad-item-link"
|
||||||
|
>
|
||||||
|
<div class="relation-ad-item-link-left"></div>
|
||||||
|
<div class="relation-ad-item-link-right"></div>
|
||||||
|
</div>
|
||||||
<treeselect
|
<treeselect
|
||||||
class="custom-treeselect"
|
class="custom-treeselect"
|
||||||
:style="{ width: '200px', margin: '0 10px', '--custom-height': '32px' }"
|
:style="{ width: '230px', marginRight: '10px', '--custom-height': '32px' }"
|
||||||
v-model="item.type_name"
|
v-model="item.peer_type_id"
|
||||||
:multiple="false"
|
:multiple="false"
|
||||||
:clearable="true"
|
:clearable="true"
|
||||||
searchable
|
searchable
|
||||||
:options="ciTypeGroup"
|
:options="relationOptions"
|
||||||
value-consists-of="LEAF_PRIORITY"
|
value-consists-of="LEAF_PRIORITY"
|
||||||
:placeholder="$t('cmdb.ciType.selectCIType')"
|
:placeholder="$t('cmdb.ciType.relationADSelectCIType')"
|
||||||
:disableBranchNodes="true"
|
:disableBranchNodes="true"
|
||||||
@select="changeType(item)"
|
@select="changeType(item)"
|
||||||
:normalizer="
|
:normalizer="
|
||||||
(node) => {
|
(node) => {
|
||||||
return {
|
return {
|
||||||
id: node.name || $t('other'),
|
id: node.value || $t('other'),
|
||||||
label: node.alias || node.name || $t('other'),
|
label: node.alias || node.name || $t('other'),
|
||||||
title: node.alias || node.name || $t('other'),
|
title: node.alias || node.name || $t('other'),
|
||||||
children: node.ci_types,
|
children: node.ci_types,
|
||||||
|
|
@ -60,18 +77,18 @@
|
||||||
</treeselect>
|
</treeselect>
|
||||||
<treeselect
|
<treeselect
|
||||||
class="custom-treeselect"
|
class="custom-treeselect"
|
||||||
:style="{ width: '200px', marginRight: '10px', '--custom-height': '32px' }"
|
:style="{ width: '230px', marginRight: '18px', '--custom-height': '32px' }"
|
||||||
v-model="item.attr_name"
|
v-model="item.peer_attr_id"
|
||||||
:multiple="false"
|
:multiple="false"
|
||||||
:clearable="true"
|
:clearable="true"
|
||||||
searchable
|
searchable
|
||||||
:options="item.attributes"
|
:options="item.attributes"
|
||||||
value-consists-of="LEAF_PRIORITY"
|
value-consists-of="LEAF_PRIORITY"
|
||||||
:placeholder="$t('cmdb.ciType.selectAttributes')"
|
:placeholder="$t('cmdb.ciType.relationADSelectModelAttr')"
|
||||||
:normalizer="
|
:normalizer="
|
||||||
(node) => {
|
(node) => {
|
||||||
return {
|
return {
|
||||||
id: node.name,
|
id: node.value,
|
||||||
label: node.alias || node.name,
|
label: node.alias || node.name,
|
||||||
title: node.alias || node.name,
|
title: node.alias || node.name,
|
||||||
}
|
}
|
||||||
|
|
@ -87,11 +104,23 @@
|
||||||
{{ node.label }}
|
{{ node.label }}
|
||||||
</div>
|
</div>
|
||||||
</treeselect>
|
</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>
|
||||||
<div class="relation-ad-footer">
|
<div class="relation-ad-footer">
|
||||||
<a-button type="primary" @click="handleSave">{{ $t('save') }}</a-button>
|
<a-button type="primary" @click="handleSave">{{ $t('save') }}</a-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -99,9 +128,15 @@ import _ from 'lodash'
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
import { v4 as uuidv4 } from 'uuid'
|
import { v4 as uuidv4 } from 'uuid'
|
||||||
import Treeselect from '@riophae/vue-treeselect'
|
import Treeselect from '@riophae/vue-treeselect'
|
||||||
import { getCITypeAttributesById } from '../../api/CITypeAttr'
|
import {
|
||||||
import { getCITypeGroups } from '../../api/ciTypeGroup'
|
getCITypeAttributes,
|
||||||
import { getDiscovery, getCITypeDiscovery, postCITypeDiscovery, putCITypeDiscovery } from '../../api/discovery'
|
getCITypeRelations,
|
||||||
|
postCITypeRelations
|
||||||
|
} from '../../api/discovery'
|
||||||
|
import {
|
||||||
|
getCITypeChildren,
|
||||||
|
getCITypeParent
|
||||||
|
} from '../../api/CITypeRelation.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'RelationAutoDiscovery',
|
name: 'RelationAutoDiscovery',
|
||||||
|
|
@ -114,11 +149,11 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
relationList: [],
|
relationList: [], // 关系自动发现数据
|
||||||
ciTypeADTAttributes: [],
|
ciTypeADTAttributes: [], // 自动发现 options
|
||||||
ciTypeGroup: [],
|
|
||||||
adt_id: null,
|
adt_id: null,
|
||||||
adrList: [],
|
adrList: [],
|
||||||
|
relationOptions: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -126,64 +161,62 @@ export default {
|
||||||
windowHeight: (state) => state.windowHeight,
|
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() {
|
async mounted() {
|
||||||
await this.getDiscovery()
|
await this.getCITypeAttributes()
|
||||||
this.getCITypeDiscovery()
|
await this.getCITypeRelationOptions()
|
||||||
|
this.getCITypeRelations()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async getDiscovery() {
|
async getCITypeAttributes() {
|
||||||
await getDiscovery().then((res) => {
|
const res = await getCITypeAttributes(this.CITypeId)
|
||||||
this.adrList = res
|
this.ciTypeADTAttributes = res.map((item) => {
|
||||||
|
return {
|
||||||
|
id: item,
|
||||||
|
value: item,
|
||||||
|
label: item
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
getCITypeDiscovery() {
|
async getCITypeRelationOptions() {
|
||||||
getCITypeDiscovery(this.CITypeId).then(async (res) => {
|
const childRes = await getCITypeChildren(this.CITypeId)
|
||||||
// Options for the first drop-down box
|
const parentRes = await getCITypeParent(this.CITypeId)
|
||||||
const _ciTypeADTAttributes = []
|
const options = [...childRes.children, ...parentRes.parents]
|
||||||
res
|
|
||||||
.filter((adt) => adt.adr_id)
|
options.forEach((item) => {
|
||||||
.forEach((adt) => {
|
item.value = item.id
|
||||||
const _find = this.adrList.find((adr) => adr.id === adt.adr_id)
|
item.label = item.alias || item.name
|
||||||
if (_find && _find.attributes) {
|
const attributes = item?.attributes?.filter((attr) => !attr.is_password && !attr.is_list && attr.value_type !== '6')
|
||||||
_ciTypeADTAttributes.push(..._find.attributes)
|
attributes.forEach((attr) => {
|
||||||
}
|
attr.value = attr.id
|
||||||
|
attr.label = attr.alias || attr.name
|
||||||
})
|
})
|
||||||
console.log(_ciTypeADTAttributes)
|
item.attributes = attributes
|
||||||
this.ciTypeADTAttributes = _.uniqBy(_ciTypeADTAttributes, 'name')
|
})
|
||||||
// Options for the first drop-down box
|
this.relationOptions = options
|
||||||
const _find = res.find((adt) => !adt.adr_id)
|
},
|
||||||
if (_find) {
|
async getCITypeRelations() {
|
||||||
this.adt_id = _find.id
|
getCITypeRelations(this.CITypeId).then(async (res) => {
|
||||||
|
if (res?.length) {
|
||||||
|
// this.adt_id = _find.id
|
||||||
const _relationList = []
|
const _relationList = []
|
||||||
const keys = Object.keys(_find.relation)
|
res.forEach((item) => {
|
||||||
for (let i = 0; i < keys.length; i++) {
|
const attributes = this?.relationOptions?.find((option) => option?.value === item.peer_type_id)?.attributes || []
|
||||||
const { attributes } = await getCITypeAttributesById(_find.relation[`${keys[i]}`].type_name)
|
|
||||||
_relationList.push({
|
_relationList.push({
|
||||||
id: uuidv4(),
|
id: uuidv4(),
|
||||||
attrName: keys[i],
|
ad_key: item.ad_key,
|
||||||
type_name: _find.relation[`${keys[i]}`].type_name,
|
peer_type_id: item.peer_type_id,
|
||||||
attr_name: _find.relation[`${keys[i]}`].attr_name,
|
peer_attr_id: item.peer_attr_id,
|
||||||
attributes,
|
attributes,
|
||||||
})
|
})
|
||||||
}
|
})
|
||||||
this.relationList = _relationList.length
|
this.relationList = _relationList.length
|
||||||
? _relationList
|
? _relationList
|
||||||
: [
|
: [
|
||||||
{
|
{
|
||||||
id: uuidv4(),
|
id: uuidv4(),
|
||||||
attrName: undefined,
|
ad_key: undefined,
|
||||||
type_name: undefined,
|
peer_type_id: undefined,
|
||||||
attr_name: undefined,
|
peer_attr_id: undefined,
|
||||||
attributes: [],
|
attributes: [],
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
@ -192,9 +225,9 @@ export default {
|
||||||
this.relationList = [
|
this.relationList = [
|
||||||
{
|
{
|
||||||
id: uuidv4(),
|
id: uuidv4(),
|
||||||
attrName: undefined,
|
ad_key: undefined,
|
||||||
type_name: undefined,
|
peer_type_id: undefined,
|
||||||
attr_name: undefined,
|
peer_attr_id: undefined,
|
||||||
attributes: [],
|
attributes: [],
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
@ -202,48 +235,57 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
changeType(item) {
|
changeType(item) {
|
||||||
console.log(item)
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
getCITypeAttributesById(item.type_name).then((res) => {
|
const peer_type_id = item.peer_type_id
|
||||||
item.attr_name = undefined
|
const attributes = this?.relationOptions?.find((option) => option?.value === peer_type_id)?.attributes
|
||||||
item.attributes = res.attributes.map((item) => {
|
|
||||||
return { ...item, value: item.id, label: item.alias || item.name }
|
item.attributes = attributes
|
||||||
})
|
item.peer_attr_id = undefined
|
||||||
})
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
addRelation() {
|
addRelation() {
|
||||||
const _relationList = _.cloneDeep(this.relationList)
|
const _relationList = _.cloneDeep(this.relationList)
|
||||||
_relationList.push({
|
_relationList.push({
|
||||||
id: uuidv4(),
|
id: uuidv4(),
|
||||||
attrName: undefined,
|
ad_key: undefined,
|
||||||
type_name: undefined,
|
peer_type_id: undefined,
|
||||||
attr_name: undefined,
|
peer_attr_id: undefined,
|
||||||
attributes: [],
|
attributes: [],
|
||||||
})
|
})
|
||||||
this.relationList = _relationList
|
this.relationList = _relationList
|
||||||
},
|
},
|
||||||
|
copyRelation(item) {
|
||||||
|
const _relationList = _.cloneDeep(this.relationList)
|
||||||
|
_relationList.push({
|
||||||
|
...item,
|
||||||
|
id: uuidv4()
|
||||||
|
})
|
||||||
|
this.relationList = _relationList
|
||||||
|
},
|
||||||
|
|
||||||
deleteRelation(item) {
|
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)
|
const _idx = this.relationList.findIndex(({ id }) => item.id === id)
|
||||||
if (_idx > -1) {
|
if (_idx > -1) {
|
||||||
this.relationList.splice(_idx, 1)
|
this.relationList.splice(_idx, 1)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async handleSave() {
|
async handleSave() {
|
||||||
const _relation = {}
|
const _relation = this.relationList.map(({ ad_key, peer_attr_id, peer_type_id }) => {
|
||||||
this.relationList.forEach(({ attrName, type_name, attr_name }) => {
|
return {
|
||||||
if (attrName) {
|
ad_key,
|
||||||
_relation[`${attrName}`] = { type_name, attr_name }
|
peer_attr_id,
|
||||||
|
peer_type_id
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
if (_relation) {
|
if (_relation.length) {
|
||||||
if (this.adt_id) {
|
await postCITypeRelations(this.CITypeId, { relations: _relation })
|
||||||
await putCITypeDiscovery(this.adt_id, { relation: _relation })
|
|
||||||
} else {
|
|
||||||
await postCITypeDiscovery(this.CITypeId, { relation: _relation })
|
|
||||||
}
|
|
||||||
this.$message.success(this.$t('saveSuccess'))
|
this.$message.success(this.$t('saveSuccess'))
|
||||||
this.getCITypeDiscovery()
|
this.getCITypeRelations()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -254,14 +296,103 @@ export default {
|
||||||
.relation-ad {
|
.relation-ad {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 0 20px;
|
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 {
|
.relation-ad-item {
|
||||||
display: inline-flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
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%
|
||||||
}
|
}
|
||||||
.relation-ad-footer {
|
|
||||||
width: 690px;
|
&-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-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;
|
text-align: right;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
>{{ $t('cmdb.ciType.addRelation') }}</a-button
|
>{{ $t('cmdb.ciType.addRelation') }}</a-button
|
||||||
>
|
>
|
||||||
<vxe-table
|
<vxe-table
|
||||||
|
ref="xTable"
|
||||||
stripe
|
stripe
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
size="small"
|
size="small"
|
||||||
|
|
@ -311,6 +312,8 @@ export default {
|
||||||
tableAttrList: [],
|
tableAttrList: [],
|
||||||
modalAttrList: [],
|
modalAttrList: [],
|
||||||
modalChildAttributes: [],
|
modalChildAttributes: [],
|
||||||
|
currentEditData: null,
|
||||||
|
isContinueCloseEdit: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -341,7 +344,7 @@ export default {
|
||||||
if (!this.isInGrantComp) {
|
if (!this.isInGrantComp) {
|
||||||
await this.getCITypeParent()
|
await this.getCITypeParent()
|
||||||
}
|
}
|
||||||
this.getCITypeChildren()
|
await this.getCITypeChildren()
|
||||||
},
|
},
|
||||||
async getCITypeParent() {
|
async getCITypeParent() {
|
||||||
await getCITypeParent(this.CITypeId).then((res) => {
|
await getCITypeParent(this.CITypeId).then((res) => {
|
||||||
|
|
@ -358,8 +361,8 @@ export default {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
getCITypeChildren() {
|
async getCITypeChildren() {
|
||||||
getCITypeChildren(this.CITypeId).then((res) => {
|
await getCITypeChildren(this.CITypeId).then((res) => {
|
||||||
const data = res.children.map((obj) => {
|
const data = res.children.map((obj) => {
|
||||||
const parentAndChildAttrList = this.handleAttrList(obj)
|
const parentAndChildAttrList = this.handleAttrList(obj)
|
||||||
|
|
||||||
|
|
@ -511,6 +514,16 @@ export default {
|
||||||
if (row.isParent) return 'relation-table-parent'
|
if (row.isParent) return 'relation-table-parent'
|
||||||
},
|
},
|
||||||
handleEditActived({ row }) {
|
handleEditActived({ row }) {
|
||||||
|
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 tableAttrList = []
|
||||||
|
|
||||||
const length = Math.min(row?.parent_attr_ids?.length || 0, row.child_attr_ids?.length || 0)
|
const length = Math.min(row?.parent_attr_ids?.length || 0, row.child_attr_ids?.length || 0)
|
||||||
|
|
@ -530,8 +543,16 @@ export default {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
this.$set(this, 'tableAttrList', tableAttrList)
|
this.$set(this, 'tableAttrList', tableAttrList)
|
||||||
|
})
|
||||||
},
|
},
|
||||||
async handleEditClose({ row }) {
|
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 { source_ci_type_id: parentId, id: childrenId, constraint, relation_type } = row
|
||||||
const _find = this.relationTypes.find((item) => item.name === relation_type)
|
const _find = this.relationTypes.find((item) => item.name === relation_type)
|
||||||
const relation_type_id = _find?.id
|
const relation_type_id = _find?.id
|
||||||
|
|
@ -542,6 +563,7 @@ export default {
|
||||||
validate
|
validate
|
||||||
} = this.handleValidateAttrList(this.tableAttrList)
|
} = this.handleValidateAttrList(this.tableAttrList)
|
||||||
if (!validate) {
|
if (!validate) {
|
||||||
|
this.isContinueCloseEdit = false
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -550,8 +572,17 @@ export default {
|
||||||
constraint,
|
constraint,
|
||||||
parent_attr_ids,
|
parent_attr_ids,
|
||||||
child_attr_ids,
|
child_attr_ids,
|
||||||
}).finally(() => {
|
}).finally(async () => {
|
||||||
this.getData()
|
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) {
|
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
|
<div
|
||||||
:class="{
|
:class="{
|
||||||
'discovery-card': true,
|
'discovery-card': true,
|
||||||
|
'discovery-card-http': rule.type === DISCOVERY_CATEGORY_TYPE.HTTP,
|
||||||
'discovery-card-small': isSelected,
|
'discovery-card-small': isSelected,
|
||||||
'discovery-card-small-selected': isSelected && selectedIds().findIndex((item) => item.id === rule.id) > -1,
|
'discovery-card-small-selected': isSelected && selectedIds().findIndex((item) => item.id === rule.id) > -1,
|
||||||
}"
|
}"
|
||||||
@click="clickCard"
|
@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-top">
|
||||||
<div class="discovery-header">
|
<div class="discovery-header">
|
||||||
<img
|
<img
|
||||||
v-if="icon.id && icon.url"
|
v-if="icon.id && icon.url"
|
||||||
|
class="discovery-header-icon"
|
||||||
:src="`/api/common-setting/v1/file/${icon.url}`"
|
: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>
|
<span :title="rule.name">{{ rule.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="!isSelected">
|
<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">
|
<div class="discovery-footer">
|
||||||
<a-space v-if="rule.type === 'agent'">
|
<a-space v-if="rule.type === 'agent' && rule.is_plugin">
|
||||||
<a @click="handleEdit"><ops-icon type="icon-xianxing-edit"/></a>
|
<a @click="handleEdit">
|
||||||
|
<a-icon type="edit" />
|
||||||
|
</a>
|
||||||
<a
|
<a
|
||||||
v-if="isDeletable"
|
v-if="isDeletable"
|
||||||
@click="handleDelete"
|
@click="handleDelete"
|
||||||
:style="{ color: 'red' }"
|
:style="{ color: 'red' }"
|
||||||
><ops-icon
|
>
|
||||||
type="icon-xianxing-delete"
|
<a-icon type="delete" />
|
||||||
/></a>
|
</a>
|
||||||
</a-space>
|
</a-space>
|
||||||
<a v-else @click="handleEdit"><a-icon type="eye"/></a>
|
<a v-else @click="handleEdit"><a-icon type="eye"/></a>
|
||||||
<span>{{ rule.is_plugin ? 'Plugin' : $t('cmdb.custom_dashboard.default') }}</span>
|
<span>{{ rule.is_plugin ? 'Plugin' : $t('cmdb.custom_dashboard.default') }}</span>
|
||||||
|
|
@ -40,6 +87,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { DISCOVERY_CATEGORY_TYPE } from './constants.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DiscoveryCard',
|
name: 'DiscoveryCard',
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -52,6 +101,17 @@ export default {
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
DISCOVERY_CATEGORY_TYPE,
|
||||||
|
borderTopColorMap: {
|
||||||
|
'阿里云': '#FFB287',
|
||||||
|
'腾讯云': '#87BEFF',
|
||||||
|
'华为云': '#FFB8B8',
|
||||||
|
'AWS': '#FFC187',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
icon() {
|
icon() {
|
||||||
return this.rule?.option?.icon ?? { color: '', name: 'caise-wuliji' }
|
return this.rule?.option?.icon ?? { color: '', name: 'caise-wuliji' }
|
||||||
|
|
@ -95,7 +155,32 @@ export default {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
margin-right: 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%;
|
width: 100%;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -105,6 +190,7 @@ export default {
|
||||||
background: linear-gradient(90.54deg, #879fff 1.32%, #a0ddff 99.13%);
|
background: linear-gradient(90.54deg, #879fff 1.32%, #a0ddff 99.13%);
|
||||||
border-radius: 4px 4px 0 0;
|
border-radius: 4px 4px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discovery-top {
|
.discovery-top {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 5px);
|
height: calc(100% - 5px);
|
||||||
|
|
@ -118,7 +204,7 @@ export default {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
.discovery-header {
|
.discovery-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
height: 45px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
> i {
|
> i {
|
||||||
|
|
@ -130,17 +216,73 @@ export default {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
color: #000;
|
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 {
|
.discovery-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
> span {
|
> span {
|
||||||
color: #a5a9bc;
|
color: #86909c;
|
||||||
background-color: #d8eaff;
|
background-color: #f0f5ff;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
padding: 0 5px;
|
padding: 2px 8px;
|
||||||
font-size: 12px;
|
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;
|
width: 170px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
// &:hover {
|
||||||
|
// .discovery-top {
|
||||||
|
// background-color: #f0f1f5;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
.discovery-card-small:hover,
|
.discovery-card-small:hover,
|
||||||
.discovery-card-small-selected {
|
.discovery-card-small-selected {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<CustomDrawer width="800px" :title="title" :visible="visible" @close="handleClose">
|
<CustomDrawer
|
||||||
<template v-if="adType === 'agent'">
|
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
|
<a-form-model
|
||||||
ref="autoDiscoveryForm"
|
ref="autoDiscoveryForm"
|
||||||
:model="form"
|
:model="form"
|
||||||
|
|
@ -47,8 +57,9 @@
|
||||||
icon="plus"
|
icon="plus"
|
||||||
:style="{ marginBottom: '10px' }"
|
:style="{ marginBottom: '10px' }"
|
||||||
@click="insertEvent(-1)"
|
@click="insertEvent(-1)"
|
||||||
>{{ $t('new') }}</a-button
|
|
||||||
>
|
>
|
||||||
|
{{ $t('new') }}
|
||||||
|
</a-button>
|
||||||
<vxe-table
|
<vxe-table
|
||||||
size="mini"
|
size="mini"
|
||||||
stripe
|
stripe
|
||||||
|
|
@ -77,7 +88,11 @@
|
||||||
<vxe-input v-model="row.desc" type="text"></vxe-input>
|
<vxe-input v-model="row.desc" type="text"></vxe-input>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</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 }">
|
<template #default="{ row }">
|
||||||
<a-space v-if="$refs.xTable.isActiveByRow(row)">
|
<a-space v-if="$refs.xTable.isActiveByRow(row)">
|
||||||
<a @click="saveRowEvent(row)"><a-icon type="save"/></a>
|
<a @click="saveRowEvent(row)"><a-icon type="save"/></a>
|
||||||
|
|
@ -103,15 +118,24 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import CustomIconSelect from '@/components/CustomIconSelect'
|
|
||||||
import { postDiscovery, putDiscovery } from '../../api/discovery'
|
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 HttpSnmpAD from '../../components/httpSnmpAD'
|
||||||
import CustomCodeMirror from '@/components/CustomCodeMirror'
|
import CustomCodeMirror from '@/components/CustomCodeMirror'
|
||||||
import 'codemirror/lib/codemirror.css'
|
import 'codemirror/lib/codemirror.css'
|
||||||
import 'codemirror/theme/monokai.css'
|
import 'codemirror/theme/monokai.css'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'EditDrawer',
|
name: 'EditDrawer',
|
||||||
components: { CustomIconSelect, CustomCodeMirror, HttpSnmpAD },
|
components: {
|
||||||
|
CustomIconSelect,
|
||||||
|
CustomCodeMirror,
|
||||||
|
HttpSnmpAD,
|
||||||
|
AgentTable
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
is_inner: {
|
is_inner: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
|
@ -142,11 +166,12 @@ export default {
|
||||||
tabSize: 4,
|
tabSize: 4,
|
||||||
lineWrapping: true,
|
lineWrapping: true,
|
||||||
},
|
},
|
||||||
|
DISCOVERY_CATEGORY_TYPE,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
title() {
|
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
|
return this.ruleData.name
|
||||||
}
|
}
|
||||||
if (this.type === 'edit') {
|
if (this.type === 'edit') {
|
||||||
|
|
@ -173,10 +198,15 @@ export default {
|
||||||
is_plugin: true,
|
is_plugin: true,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (adType === 'http' || adType === 'snmp') {
|
if (adType === DISCOVERY_CATEGORY_TYPE.HTTP || adType === DISCOVERY_CATEGORY_TYPE.SNMP) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
if (adType === DISCOVERY_CATEGORY_TYPE.AGENT) {
|
||||||
|
this.tableData = data?.attributes ?? []
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if (this.type === 'edit') {
|
if (this.type === 'edit') {
|
||||||
this.form = {
|
this.form = {
|
||||||
name: data.name,
|
name: data.name,
|
||||||
|
|
@ -203,7 +233,7 @@ export default {
|
||||||
this.tableData = []
|
this.tableData = []
|
||||||
this.customIcon = { name: '', color: '' }
|
this.customIcon = { name: '', color: '' }
|
||||||
this.form = { name: '', is_plugin: false }
|
this.form = { name: '', is_plugin: false }
|
||||||
if (this.adType === 'agent') {
|
if (this.adType === DISCOVERY_CATEGORY_TYPE.PLUGIN) {
|
||||||
this.$refs.autoDiscoveryForm.clearValidate()
|
this.$refs.autoDiscoveryForm.clearValidate()
|
||||||
} else {
|
} else {
|
||||||
// this.$refs.httpSnmpAd.currentCate = ''
|
// this.$refs.httpSnmpAd.currentCate = ''
|
||||||
|
|
@ -244,9 +274,10 @@ export default {
|
||||||
const $table = this.$refs.xTable
|
const $table = this.$refs.xTable
|
||||||
const { fullData: _tableData } = $table.getTableData()
|
const { fullData: _tableData } = $table.getTableData()
|
||||||
console.log(_tableData)
|
console.log(_tableData)
|
||||||
|
const type = this.adType === DISCOVERY_CATEGORY_TYPE.PLUGIN ? DISCOVERY_CATEGORY_TYPE.AGENT : this.adType
|
||||||
const params = {
|
const params = {
|
||||||
...this.form,
|
...this.form,
|
||||||
type: this.adType,
|
type,
|
||||||
is_inner: this.is_inner,
|
is_inner: this.is_inner,
|
||||||
option: { icon: this.customIcon },
|
option: { icon: this.customIcon },
|
||||||
attributes: this.form.is_plugin
|
attributes: this.form.is_plugin
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,90 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="setting-discovery">
|
<div class="setting-discovery">
|
||||||
<div :style="{ textAlign: 'right' }">
|
<div v-if="!isSelected" class="setting-discovery-header">
|
||||||
<a-space v-if="!isSelected">
|
<a-input-search
|
||||||
<a-upload name="file" :multiple="false" accept=".json" :fileList="[]" :beforeUpload="beforeUpload">
|
class="setting-discovery-search"
|
||||||
<a><a-icon type="upload" />{{ $t('cmdb.ad.upload') }}</a>
|
:placeholder="$t('cmdb.ad.pluginSearchTip')"
|
||||||
</a-upload>
|
@search="onSearchDiscovery"
|
||||||
<a @click="download"><a-icon type="download" />{{ $t('cmdb.ad.download') }}</a>
|
/>
|
||||||
</a-space>
|
<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>
|
||||||
|
|
||||||
|
<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">
|
<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 class="type-header">
|
||||||
<div>{{ label }}</div>
|
<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>
|
</div>
|
||||||
<a-row type="flex" justify="start">
|
<a-row type="flex" justify="start">
|
||||||
<DiscoveryCard
|
<DiscoveryCard
|
||||||
@editRule="handleOpenEditDrawer(rule, 'edit', type)"
|
v-for="rule in filterCategoryChildren[type].children"
|
||||||
@deleteRule="deleteRule(rule)"
|
|
||||||
v-for="rule in typeCategoryChildren[type]"
|
|
||||||
:key="rule.id"
|
:key="rule.id"
|
||||||
:rule="rule"
|
:rule="rule"
|
||||||
:isSelected="isSelected"
|
: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>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<EditDrawer ref="editDrawer" />
|
<EditDrawer ref="editDrawer" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import _ from 'lodash'
|
||||||
import { getDiscovery, deleteDiscovery } from '../../api/discovery'
|
import { getDiscovery, deleteDiscovery } from '../../api/discovery'
|
||||||
|
import { DISCOVERY_CATEGORY_TYPE } from './constants.js'
|
||||||
import DiscoveryCard from './discoveryCard.vue'
|
import DiscoveryCard from './discoveryCard.vue'
|
||||||
import EditDrawer from './editDrawer.vue'
|
import EditDrawer from './editDrawer.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AutoDiscovery',
|
name: 'AutoDiscovery',
|
||||||
components: { DiscoveryCard, EditDrawer },
|
components: { DiscoveryCard, EditDrawer },
|
||||||
|
|
@ -45,26 +96,56 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
typeCategoryChildren: { agent: [], snmp: [], http: [] },
|
typeCategoryChildren: {},
|
||||||
|
DISCOVERY_CATEGORY_TYPE,
|
||||||
|
radioKey: '',
|
||||||
|
searchValue: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
typeCategory() {
|
typeCategory() {
|
||||||
return [
|
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'),
|
label: this.$t('cmdb.ad.agent'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'snmp',
|
type: DISCOVERY_CATEGORY_TYPE.SNMP,
|
||||||
label: this.$t('cmdb.ad.snmp'),
|
label: this.$t('cmdb.ad.snmp'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'http',
|
type: DISCOVERY_CATEGORY_TYPE.PLUGIN,
|
||||||
label: this.$t('cmdb.ad.http'),
|
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() {
|
provide() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -76,13 +157,41 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getDiscovery() {
|
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) => {
|
getDiscovery().then((res) => {
|
||||||
this.typeCategory.forEach(({ type }) => {
|
this.typeCategory.forEach(({ type }) => {
|
||||||
const _filterData = res.filter((list) => list.type === type && list.is_inner)
|
let categoryChildren = []
|
||||||
_typeCategoryChildren[`${type}`] = _filterData
|
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) {
|
handleOpenEditDrawer(data, type, autoType) {
|
||||||
|
|
@ -137,15 +246,102 @@ export default {
|
||||||
xhr.send(formData)
|
xhr.send(formData)
|
||||||
return false
|
return false
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onSearchDiscovery(v) {
|
||||||
|
this.searchValue = v
|
||||||
|
},
|
||||||
|
|
||||||
|
changeRadio(key) {
|
||||||
|
this.radioKey = key === this.radioKey ? '' : key
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.setting-discovery {
|
.setting-discovery {
|
||||||
|
&-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;
|
background-color: #fff;
|
||||||
padding: 20px;
|
|
||||||
border-radius: @border-radius-box;
|
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 {
|
.type-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: inline-flex;
|
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>
|
><span :style="{ color: 'rgb(195, 205, 215)' }">({{ group.ci_types.length }})</span>
|
||||||
</p>
|
</p>
|
||||||
<div
|
<div
|
||||||
:class="{ 'cmdb-adc-side-item': true, 'cmdb-adc-side-item-selected': currentType === type.id }"
|
:class="{ 'cmdb-adc-side-item': true, 'cmdb-adc-side-item-selected': currentType === ciType.id }"
|
||||||
v-for="type in group.ci_types"
|
v-for="ciType in group.ci_types"
|
||||||
:key="type.id"
|
:key="ciType.id"
|
||||||
@click="clickSidebar(type.id)"
|
@click="clickSidebar(ciType.id)"
|
||||||
>
|
>
|
||||||
<span class="cmdb-adc-side-icon">
|
<span class="cmdb-adc-side-icon">
|
||||||
<template v-if="type.icon">
|
<template v-if="ciType.icon">
|
||||||
<img v-if="type.icon.split('$$')[2]" :src="`/api/common-setting/v1/file/${type.icon.split('$$')[3]}`" />
|
<img v-if="ciType.icon.split('$$')[2]" :src="`/api/common-setting/v1/file/${ciType.icon.split('$$')[3]}`" />
|
||||||
<ops-icon
|
<ops-icon
|
||||||
v-else
|
v-else
|
||||||
:style="{
|
:style="{
|
||||||
color: type.icon.split('$$')[1],
|
color: ciType.icon.split('$$')[1],
|
||||||
fontSize: '14px',
|
fontSize: '14px',
|
||||||
}"
|
}"
|
||||||
:type="type.icon.split('$$')[0]"
|
:type="ciType.icon.split('$$')[0]"
|
||||||
/>
|
/>
|
||||||
</template>
|
</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>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #two>
|
<template #two>
|
||||||
<div id="discovery-ci">
|
<div id="discovery-ci">
|
||||||
|
<AdcCounter :typeId="currentType" />
|
||||||
|
<div class="discovery-ci-header">
|
||||||
<a-input-search
|
<a-input-search
|
||||||
:placeholder="$t('cmdb.components.pleaseSearch')"
|
:placeholder="$t('cmdb.components.pleaseSearch')"
|
||||||
:style="{ width: '200px', marginRight: '20px', marginBottom: '10px' }"
|
:style="{ width: '200px', marginRight: '20px' }"
|
||||||
@search="handleSearch"
|
@search="handleSearch"
|
||||||
allowClear
|
allowClear
|
||||||
/>
|
/>
|
||||||
<div class="ops-list-batch-action" :style="{ marginBottom: '10px' }" v-show="!!selectedRowKeys.length">
|
<span class="ops-list-batch-action" v-show="selectedCount">
|
||||||
<span @click="batchAccept">{{ $t('cmdb.ad.accept') }}</span>
|
<span @click="batchAccept">{{ $t('cmdb.ad.accept') }}</span>
|
||||||
<a-divider type="vertical" />
|
<a-divider type="vertical" />
|
||||||
<span @click="batchDelete">{{ $t('delete') }}</span>
|
<span @click="batchDelete">{{ $t('delete') }}</span>
|
||||||
<span>{{ $t('cmdb.ci.selectRows', { rows: selectedRowKeys.length }) }}</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>
|
</div>
|
||||||
<ops-table
|
<ops-table
|
||||||
show-overflow
|
show-overflow
|
||||||
|
|
@ -62,56 +69,75 @@
|
||||||
:checkbox-config="{ reserve: true, highlight: true, range: true }"
|
:checkbox-config="{ reserve: true, highlight: true, range: true }"
|
||||||
:sort-config="{ remote: false, trigger: 'cell' }"
|
:sort-config="{ remote: false, trigger: 'cell' }"
|
||||||
>
|
>
|
||||||
<vxe-column align="center" type="checkbox" width="60"></vxe-column>
|
|
||||||
<vxe-column
|
<vxe-column
|
||||||
v-for="col in columns"
|
align="center"
|
||||||
:key="col.field"
|
type="checkbox"
|
||||||
|
width="60"
|
||||||
|
fixed="left"
|
||||||
|
></vxe-column>
|
||||||
|
<vxe-column
|
||||||
|
v-for="(col, index) in columns"
|
||||||
|
:key="`${col.field}_${index}`"
|
||||||
:title="col.title"
|
:title="col.title"
|
||||||
:field="col.field"
|
:field="col.field"
|
||||||
:width="col.width"
|
:width="col.width"
|
||||||
:sortable="col.sortable"
|
:sortable="col.sortable"
|
||||||
>
|
>
|
||||||
<template v-if="col.value_type === '6'" #default="{row}">
|
<template v-if="col.value_type === '6' || col.is_password" #default="{row}">
|
||||||
<span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
|
<PasswordField
|
||||||
</template>
|
v-if="col.is_password"
|
||||||
</vxe-column>
|
:password="row[col.field]"
|
||||||
<vxe-column
|
/>
|
||||||
align="center"
|
<span
|
||||||
field="is_accept"
|
v-else-if="col.value_type === '6' && row[col.field]"
|
||||||
: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[col.field] }}
|
||||||
{{ row.is_accept ? $t('yes') : $t('no') }}
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
<vxe-column
|
<vxe-column
|
||||||
field="accept_by"
|
field="accept_by"
|
||||||
:title="$t('cmdb.ad.acceptBy')"
|
:title="$t('cmdb.ad.acceptBy')"
|
||||||
v-bind="columns.length ? { width: '80px' } : { minWidth: '80px' }"
|
v-bind="columns.length ? { width: '80px' } : { minWidth: '80px' }"
|
||||||
:filters="[]"
|
:filters="acceptByFilters"
|
||||||
></vxe-column>
|
></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
|
<vxe-column
|
||||||
field="accept_time"
|
field="accept_time"
|
||||||
:title="$t('cmdb.ad.acceptTime')"
|
:title="$t('cmdb.ad.acceptTime')"
|
||||||
sortable
|
sortable
|
||||||
v-bind="columns.length ? { width: '130px' } : { minWidth: '130px' }"
|
v-bind="columns.length ? { width: '150px' } : { minWidth: '150px' }"
|
||||||
|
fixed="right"
|
||||||
></vxe-column>
|
></vxe-column>
|
||||||
<vxe-column
|
<vxe-column
|
||||||
:title="$t('operation')"
|
:title="$t('operation')"
|
||||||
v-bind="columns.length ? { width: '60px' } : { minWidth: '60px' }"
|
v-bind="columns.length ? { width: '60px' } : { minWidth: '60px' }"
|
||||||
align="center"
|
align="center"
|
||||||
|
fixed="right"
|
||||||
>
|
>
|
||||||
<template #default="{row}">
|
<template #default="{row}">
|
||||||
<a-space>
|
<a-space>
|
||||||
<a-tooltip :title="$t('cmdb.ad.accept')">
|
<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-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>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
|
|
@ -122,6 +148,23 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</ops-table>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</TwoColumnLayout>
|
</TwoColumnLayout>
|
||||||
|
|
@ -131,11 +174,26 @@
|
||||||
import _ from 'lodash'
|
import _ from 'lodash'
|
||||||
import XEUtils from 'xe-utils'
|
import XEUtils from 'xe-utils'
|
||||||
import TwoColumnLayout from '@/components/TwoColumnLayout'
|
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'
|
import { getCITableColumns } from '../../utils/helper'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DiscoveryCI',
|
name: 'DiscoveryCI',
|
||||||
components: { TwoColumnLayout },
|
components: {
|
||||||
|
TwoColumnLayout,
|
||||||
|
AdcCounter,
|
||||||
|
PasswordField
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
ci_types_list: [],
|
ci_types_list: [],
|
||||||
|
|
@ -145,6 +203,10 @@ export default {
|
||||||
columns: [],
|
columns: [],
|
||||||
selectedRowKeys: [],
|
selectedRowKeys: [],
|
||||||
searchValue: '',
|
searchValue: '',
|
||||||
|
logModalVisible: false,
|
||||||
|
logTextArray: [],
|
||||||
|
acceptByFilters: [],
|
||||||
|
selectedCount: 0,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -152,7 +214,7 @@ export default {
|
||||||
return this.$store.state.windowHeight
|
return this.$store.state.windowHeight
|
||||||
},
|
},
|
||||||
tableHeight() {
|
tableHeight() {
|
||||||
return this.windowHeight - 140
|
return this.windowHeight - 240
|
||||||
},
|
},
|
||||||
filterTableData() {
|
filterTableData() {
|
||||||
const { searchValue } = this
|
const { searchValue } = this
|
||||||
|
|
@ -169,7 +231,7 @@ export default {
|
||||||
return rest
|
return rest
|
||||||
}
|
}
|
||||||
return this.tableData
|
return this.tableData
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
currentType: {
|
currentType: {
|
||||||
|
|
@ -180,6 +242,13 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
selectedRowKeys: {
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
handler(selectedRowKeys) {
|
||||||
|
this.selectedCount = selectedRowKeys.length
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
getADCCiTypes({ need_other: true }).then((res) => {
|
getADCCiTypes({ need_other: true }).then((res) => {
|
||||||
|
|
@ -213,9 +282,7 @@ export default {
|
||||||
if ($table) {
|
if ($table) {
|
||||||
const nameColumn = $table.getVxetableRef().getColumnByField('accept_by')
|
const nameColumn = $table.getVxetableRef().getColumnByField('accept_by')
|
||||||
if (nameColumn) {
|
if (nameColumn) {
|
||||||
$table.getVxetableRef().setFilter(
|
const acceptByFilters = _.uniqBy(
|
||||||
nameColumn,
|
|
||||||
_.uniqBy(
|
|
||||||
res.result
|
res.result
|
||||||
.filter((item) => item.accept_by)
|
.filter((item) => item.accept_by)
|
||||||
.map((item) => ({
|
.map((item) => ({
|
||||||
|
|
@ -224,7 +291,11 @@ export default {
|
||||||
})),
|
})),
|
||||||
'value'
|
'value'
|
||||||
)
|
)
|
||||||
|
$table.getVxetableRef().setFilter(
|
||||||
|
nameColumn,
|
||||||
|
acceptByFilters
|
||||||
)
|
)
|
||||||
|
this.acceptByFilters = acceptByFilters
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.tableData = res.result.map((item) => ({ ..._.cloneDeep(item), ...item.instance }))
|
this.tableData = res.result.map((item) => ({ ..._.cloneDeep(item), ...item.instance }))
|
||||||
|
|
@ -302,12 +373,33 @@ export default {
|
||||||
onCancel() {},
|
onCancel() {},
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
onSelectChange({ records, checked, row }) {
|
onSelectChange({ records, checked }) {
|
||||||
this.selectedRowKeys = records.map((item) => item.id)
|
this.selectedRowKeys = records.map((item) => item.id)
|
||||||
},
|
},
|
||||||
handleSearch(value) {
|
handleSearch(value) {
|
||||||
this.searchValue = 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>
|
</script>
|
||||||
|
|
@ -350,5 +442,48 @@ export default {
|
||||||
.ops_popover_item_selected();
|
.ops_popover_item_selected();
|
||||||
background-color: @primary-color_3;
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue