7x31
/
cmdb
mirror of https://github.com/veops/cmdb.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): auto discovery

This commit is contained in:
songlh 2024-06-20 17:28:09 +08:00
parent cbc58d4a4c
commit b379ff74c0
33 changed files with 3558 additions and 632 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

305
cmdb-ui/public/iconfont/demo_index.html
View File

@ -54,6 +54,84 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe95f;</span>
<div class="name">cmdb-manual_warehousing</div>
<div class="code-name">&amp;#xe95f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe95d;</span>
<div class="name">cmdb-not_warehousing</div>
<div class="code-name">&amp;#xe95d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe95e;</span>
<div class="name">cmdb-warehousing</div>
<div class="code-name">&amp;#xe95e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe95c;</span>
<div class="name">cmdb-prompt</div>
<div class="code-name">&amp;#xe95c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe95b;</span>
<div class="name">cmdb-arrow</div>
<div class="code-name">&amp;#xe95b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe95a;</span>
<div class="name">cmdb-automatic_inventory</div>
<div class="code-name">&amp;#xe95a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe959;</span>
<div class="name">cmdb-week_additions</div>
<div class="code-name">&amp;#xe959;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe958;</span>
<div class="name">cmdb-month_additions</div>
<div class="code-name">&amp;#xe958;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe955;</span>
<div class="name">cmdb-rule</div>
<div class="code-name">&amp;#xe955;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe956;</span>
<div class="name">cmdb-executing_machine</div>
<div class="code-name">&amp;#xe956;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe957;</span>
<div class="name">cmdb-resource</div>
<div class="code-name">&amp;#xe957;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe954;</span>
<div class="name">cmdb-discovery_resources</div>
<div class="code-name">&amp;#xe954;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe953;</span>
<div class="name">cmdb-association</div>
<div class="code-name">&amp;#xe953;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe952;</span>
<div class="name">ops-is_dynamic-disabled</div>
@ -5100,9 +5178,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1717726223524') format('woff2'),
url('iconfont.woff?t=1717726223524') format('woff'),
url('iconfont.ttf?t=1717726223524') format('truetype');
src: url('iconfont.woff2?t=1718872392430') format('woff2'),
url('iconfont.woff?t=1718872392430') format('woff'),
url('iconfont.ttf?t=1718872392430') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -5128,6 +5206,123 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont cmdb-manual_warehousing"></span>
<div class="name">
cmdb-manual_warehousing
</div>
<div class="code-name">.cmdb-manual_warehousing
</div>
</li>
<li class="dib">
<span class="icon iconfont cmdb-not_warehousing"></span>
<div class="name">
cmdb-not_warehousing
</div>
<div class="code-name">.cmdb-not_warehousing
</div>
</li>
<li class="dib">
<span class="icon iconfont cmdb-warehousing"></span>
<div class="name">
cmdb-warehousing
</div>
<div class="code-name">.cmdb-warehousing
</div>
</li>
<li class="dib">
<span class="icon iconfont cmdb-prompt"></span>
<div class="name">
cmdb-prompt
</div>
<div class="code-name">.cmdb-prompt
</div>
</li>
<li class="dib">
<span class="icon iconfont cmdb-arrow"></span>
<div class="name">
cmdb-arrow
</div>
<div class="code-name">.cmdb-arrow
</div>
</li>
<li class="dib">
<span class="icon iconfont cmdb-automatic_inventory"></span>
<div class="name">
cmdb-automatic_inventory
</div>
<div class="code-name">.cmdb-automatic_inventory
</div>
</li>
<li class="dib">
<span class="icon iconfont cmdb-week_additions"></span>
<div class="name">
cmdb-week_additions
</div>
<div class="code-name">.cmdb-week_additions
</div>
</li>
<li class="dib">
<span class="icon iconfont cmdb-month_additions"></span>
<div class="name">
cmdb-month_additions
</div>
<div class="code-name">.cmdb-month_additions
</div>
</li>
<li class="dib">
<span class="icon iconfont cmdb-rule"></span>
<div class="name">
cmdb-rule
</div>
<div class="code-name">.cmdb-rule
</div>
</li>
<li class="dib">
<span class="icon iconfont cmdb-executing_machine"></span>
<div class="name">
cmdb-executing_machine
</div>
<div class="code-name">.cmdb-executing_machine
</div>
</li>
<li class="dib">
<span class="icon iconfont cmdb-resource"></span>
<div class="name">
cmdb-resource
</div>
<div class="code-name">.cmdb-resource
</div>
</li>
<li class="dib">
<span class="icon iconfont cmdb-discovery_resources"></span>
<div class="name">
cmdb-discovery_resources
</div>
<div class="code-name">.cmdb-discovery_resources
</div>
</li>
<li class="dib">
<span class="icon iconfont cmdb-association"></span>
<div class="name">
cmdb-association
</div>
<div class="code-name">.cmdb-association
</div>
</li>
<li class="dib">
<span class="icon iconfont ops-is_dynamic-disabled"></span>
<div class="name">
@ -12697,6 +12892,110 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#cmdb-manual_warehousing"></use>
</svg>
<div class="name">cmdb-manual_warehousing</div>
<div class="code-name">#cmdb-manual_warehousing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#cmdb-not_warehousing"></use>
</svg>
<div class="name">cmdb-not_warehousing</div>
<div class="code-name">#cmdb-not_warehousing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#cmdb-warehousing"></use>
</svg>
<div class="name">cmdb-warehousing</div>
<div class="code-name">#cmdb-warehousing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#cmdb-prompt"></use>
</svg>
<div class="name">cmdb-prompt</div>
<div class="code-name">#cmdb-prompt</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#cmdb-arrow"></use>
</svg>
<div class="name">cmdb-arrow</div>
<div class="code-name">#cmdb-arrow</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#cmdb-automatic_inventory"></use>
</svg>
<div class="name">cmdb-automatic_inventory</div>
<div class="code-name">#cmdb-automatic_inventory</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#cmdb-week_additions"></use>
</svg>
<div class="name">cmdb-week_additions</div>
<div class="code-name">#cmdb-week_additions</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#cmdb-month_additions"></use>
</svg>
<div class="name">cmdb-month_additions</div>
<div class="code-name">#cmdb-month_additions</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#cmdb-rule"></use>
</svg>
<div class="name">cmdb-rule</div>
<div class="code-name">#cmdb-rule</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#cmdb-executing_machine"></use>
</svg>
<div class="name">cmdb-executing_machine</div>
<div class="code-name">#cmdb-executing_machine</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#cmdb-resource"></use>
</svg>
<div class="name">cmdb-resource</div>
<div class="code-name">#cmdb-resource</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#cmdb-discovery_resources"></use>
</svg>
<div class="name">cmdb-discovery_resources</div>
<div class="code-name">#cmdb-discovery_resources</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#cmdb-association"></use>
</svg>
<div class="name">cmdb-association</div>
<div class="code-name">#cmdb-association</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ops-is_dynamic-disabled"></use>

58
cmdb-ui/public/iconfont/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 3857903 */
src: url('iconfont.woff2?t=1717726223524') format('woff2'),
url('iconfont.woff?t=1717726223524') format('woff'),
url('iconfont.ttf?t=1717726223524') format('truetype');
src: url('iconfont.woff2?t=1718872392430') format('woff2'),
url('iconfont.woff?t=1718872392430') format('woff'),
url('iconfont.ttf?t=1718872392430') format('truetype');
}
.iconfont {
@ -13,6 +13,58 @@
-moz-osx-font-smoothing: grayscale;
}
.cmdb-manual_warehousing:before {
content: "\e95f";
}
.cmdb-not_warehousing:before {
content: "\e95d";
}
.cmdb-warehousing:before {
content: "\e95e";
}
.cmdb-prompt:before {
content: "\e95c";
}
.cmdb-arrow:before {
content: "\e95b";
}
.cmdb-automatic_inventory:before {
content: "\e95a";
}
.cmdb-week_additions:before {
content: "\e959";
}
.cmdb-month_additions:before {
content: "\e958";
}
.cmdb-rule:before {
content: "\e955";
}
.cmdb-executing_machine:before {
content: "\e956";
}
.cmdb-resource:before {
content: "\e957";
}
.cmdb-discovery_resources:before {
content: "\e954";
}
.cmdb-association:before {
content: "\e953";
}
.ops-is_dynamic-disabled:before {
content: "\e952";
}

2
cmdb-ui/public/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

91
cmdb-ui/public/iconfont/iconfont.json
View File

@ -5,6 +5,97 @@
"css_prefix_text": "",
"description": "",
"glyphs": [
{
"icon_id": "40795271",
"name": "cmdb-manual_warehousing",
"font_class": "cmdb-manual_warehousing",
"unicode": "e95f",
"unicode_decimal": 59743
},
{
"icon_id": "40791408",
"name": "cmdb-not_warehousing",
"font_class": "cmdb-not_warehousing",
"unicode": "e95d",
"unicode_decimal": 59741
},
{
"icon_id": "40791401",
"name": "cmdb-warehousing",
"font_class": "cmdb-warehousing",
"unicode": "e95e",
"unicode_decimal": 59742
},
{
"icon_id": "40731588",
"name": "cmdb-prompt",
"font_class": "cmdb-prompt",
"unicode": "e95c",
"unicode_decimal": 59740
},
{
"icon_id": "40722326",
"name": "cmdb-arrow",
"font_class": "cmdb-arrow",
"unicode": "e95b",
"unicode_decimal": 59739
},
{
"icon_id": "40711364",
"name": "cmdb-automatic_inventory",
"font_class": "cmdb-automatic_inventory",
"unicode": "e95a",
"unicode_decimal": 59738
},
{
"icon_id": "40711409",
"name": "cmdb-week_additions",
"font_class": "cmdb-week_additions",
"unicode": "e959",
"unicode_decimal": 59737
},
{
"icon_id": "40711428",
"name": "cmdb-month_additions",
"font_class": "cmdb-month_additions",
"unicode": "e958",
"unicode_decimal": 59736
},
{
"icon_id": "40711344",
"name": "cmdb-rule",
"font_class": "cmdb-rule",
"unicode": "e955",
"unicode_decimal": 59733
},
{
"icon_id": "40711349",
"name": "cmdb-executing_machine",
"font_class": "cmdb-executing_machine",
"unicode": "e956",
"unicode_decimal": 59734
},
{
"icon_id": "40711356",
"name": "cmdb-resource",
"font_class": "cmdb-resource",
"unicode": "e957",
"unicode_decimal": 59735
},
{
"icon_id": "40705423",
"name": "cmdb-discovery_resources",
"font_class": "cmdb-discovery_resources",
"unicode": "e954",
"unicode_decimal": 59732
},
{
"icon_id": "40701723",
"name": "cmdb-association",
"font_class": "cmdb-association",
"unicode": "e953",
"unicode_decimal": 59731
},
{
"icon_id": "40645466",
"name": "ops-is_dynamic-disabled",

BIN
cmdb-ui/public/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
cmdb-ui/public/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
cmdb-ui/public/iconfont/iconfont.woff2
View File

Binary file not shown.

62
cmdb-ui/src/modules/cmdb/api/discovery.js
View File

@ -118,3 +118,65 @@ export function deleteAdc(adc_id) {
method: 'DELETE',
})
}
export function getAdcCounter(params) {
return axios({
url: `v0.1/adc/counter`,
method: 'GET',
params
})
}
export function getAdcExecHistories(params) {
return axios({
url: `v0.1/adc/exec/histories`,
method: 'GET',
params
})
}
export function getAdtSyncHistories(adt_id) {
return axios({
url: `/v0.1/adt/${adt_id}/sync/histories`,
method: 'GET',
params: {
page_size: 9999
}
})
}
export function postAdtTest(adt_id) {
return axios({
url: `/v0.1/adt/${adt_id}/test`,
method: 'POST',
})
}
export function getAdtTestResult(exec_id) {
return axios({
url: `/v0.1/adt/test/${exec_id}/result`,
method: 'GET'
})
}
export function getCITypeAttributes(type_id) {
return axios({
url: `/v0.1/adt/ci_types/${type_id}/attributes`,
method: 'GET',
})
}
export function getCITypeRelations(type_id) {
return axios({
url: `/v0.1/adt/ci_types/${type_id}/relations`,
method: 'GET',
})
}
export function postCITypeRelations(type_id, data) {
return axios({
url: `/v0.1/adt/ci_types/${type_id}/relations`,
method: 'POST',
data
})
}

196
cmdb-ui/src/modules/cmdb/components/attrMapTable/index.vue Normal file
View File

@ -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>

39
cmdb-ui/src/modules/cmdb/components/httpSnmpAD/adPreviewTable.vue Normal file
View File

@ -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>

223
cmdb-ui/src/modules/cmdb/components/httpSnmpAD/httpADCategory.vue Normal file
View File

@ -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>

117
cmdb-ui/src/modules/cmdb/components/httpSnmpAD/index.vue
View File

@ -1,68 +1,45 @@
<template>
<div>
<a-select v-if="ruleType === 'http'" :style="{ marginBottom: '10px' }" v-model="currentCate">
<a-select-option v-for="cate in categories" :key="cate" :value="cate">{{ cate }}</a-select-option>
</a-select>
<vxe-table
size="mini"
stripe
class="ops-stripe-table"
show-overflow
keep-source
ref="xTable"
resizable
:data="tableData"
:edit-config="isEdit ? { trigger: 'click', mode: 'cell' } : {}"
>
<template v-if="isEdit">
<vxe-colgroup :title="$t('cmdb.ciType.autoDiscovery')">
<vxe-column field="name" :title="$t('name')" width="100"> </vxe-column>
<vxe-column field="type" :title="$t('type')" width="80"> </vxe-column>
<vxe-column field="example" :title="$t('cmdb.components.example')">
<template #default="{row}">
<span v-if="row.type === 'json'">{{ JSON.stringify(row.example) }}</span>
<span v-else>{{ row.example }}</span>
</template>
</vxe-column>
<vxe-column field="desc" :title="$t('desc')"> </vxe-column>
</vxe-colgroup>
<vxe-colgroup :title="$t('cmdb.ciType.attributes')">
<vxe-column field="attr" :title="$t('name')" :edit-render="{}">
<template #default="{row}">
{{ row.attr }}
</template>
<template #edit="{ row }">
<vxe-select
filterable
clearable
v-model="row.attr"
type="text"
:options="ciTypeAttributes"
transfer
></vxe-select>
</template>
</vxe-column>
</vxe-colgroup>
</template>
<div class="http-snmp-ad">
<HttpADCategory
v-if="!isEdit && ruleType === 'http'"
:categories="categories"
:currentCate="currentCate"
:tableData="tableData"
@clickCategory="setCurrentCate"
/>
<template v-else>
<vxe-column field="name" :title="$t('name')" width="100"> </vxe-column>
<vxe-column field="type" :title="$t('type')" width="80"> </vxe-column>
<vxe-column field="example" :title="$t('cmdb.components.example')">
<template #default="{row}">
<span v-if="row.type === 'object'">{{ JSON.stringify(row.example) }}</span>
<span v-else>{{ row.example }}</span>
<a-select v-if="ruleType === 'http'" :style="{ marginBottom: '10px' }" v-model="currentCate">
<a-select-option v-for="cate in categoriesSelect" :key="cate" :value="cate">{{ cate }}</a-select-option>
</a-select>
<AttrMapTable
v-if="isEdit"
ref="attrMapTable"
:ruleType="ruleType"
:tableData="tableData"
:ciTypeAttributes="ciTypeAttributes"
:uniqueKey="uniqueKey"
/>
<ADPreviewTable
v-else
:tableData="tableData"
/>
</template>
</vxe-column>
<vxe-column field="desc" :title="$t('desc')"> </vxe-column>
</template>
</vxe-table>
</div>
</template>
<script>
import { getHttpCategories, getHttpAttributes, getSnmpAttributes } from '../../api/discovery'
import AttrMapTable from '@/modules/cmdb/components/attrMapTable/index.vue'
import ADPreviewTable from './adPreviewTable.vue'
import HttpADCategory from './httpADCategory.vue'
export default {
name: 'HttpSnmpAD',
components: {
AttrMapTable,
ADPreviewTable,
HttpADCategory
},
props: {
ruleName: {
type: String,
@ -88,10 +65,15 @@ export default {
type: Number,
default: 0,
},
uniqueKey: {
type: String,
default: '',
}
},
data() {
return {
categories: [],
categoriesSelect: [],
currentCate: '',
tableData: [],
}
@ -115,7 +97,7 @@ export default {
immediate: true,
handler(newVal) {
if (newVal) {
getHttpAttributes(this.httpMap[`${this.ruleName}`].name, { category: newVal }).then((res) => {
getHttpAttributes(this.httpMap[`${this.ruleName}`].name, { resource: newVal }).then((res) => {
if (this.isEdit) {
this.formatTableData(res)
} else {
@ -131,7 +113,7 @@ export default {
this.currentCate = ''
this.$nextTick(() => {
const { ruleType, ruleName } = newVal
if (ruleType === 'snmp' && ruleName) {
if (['snmp'].includes(ruleType) && ruleName) {
getSnmpAttributes(ruleName).then((res) => {
if (this.isEdit) {
this.formatTableData(res)
@ -143,8 +125,15 @@ export default {
if (ruleType === 'http' && ruleName) {
getHttpCategories(this.httpMap[`${this.ruleName}`].name).then((res) => {
this.categories = res
if (res && res.length) {
this.currentCate = res[0]
const categoriesSelect = []
res.forEach((category) => {
if (category?.items?.length) {
categoriesSelect.push(...category.items)
}
})
this.categoriesSelect = categoriesSelect
if (this.isEdit && categoriesSelect?.length) {
this.currentCate = categoriesSelect[0]
}
})
}
@ -181,12 +170,16 @@ export default {
})
},
getTableData() {
const $table = this.$refs.xTable
const $table = this.$refs.attrMapTable
const { fullData } = $table.getTableData()
return fullData || []
},
}
},
}
</script>
<style></style>
<style>
.http-snmp-ad {
height: 100%;
}
</style>

207
cmdb-ui/src/modules/cmdb/components/nodeSetting/index.vue Normal file
View File

@ -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>

64
cmdb-ui/src/modules/cmdb/lang/en.js
View File

@ -29,6 +29,7 @@ const cmdb_en = {
attributes: 'Attributes',
relation: 'Relation',
trigger: 'Triggers',
autoDiscoveryTab: 'AutoDiscovery',
attributeAD: 'Attributes AutoDiscovery',
relationAD: 'Relation AutoDiscovery',
grant: 'Grant',
@ -62,6 +63,7 @@ const cmdb_en = {
deletePlugin: 'Delete plugin',
confirmDeleteADT: 'Do you confirm to delete [{pluginName}]',
attributeMap: 'Attribute mapping',
nodeConfig: 'Node Configuration',
autoDiscovery: 'AutoDiscovery',
node: 'Node',
adExecConfig: 'Execute configuration',
@ -69,11 +71,12 @@ const cmdb_en = {
oneagentIdTips: 'Please enter the hexadecimal OneAgent ID starting with 0x',
selectFromCMDBTips: 'Select from CMDB ',
adAutoInLib: 'Save as CI auto',
adAutoInLibTip: 'Discovered instances are directly warehoused into CI',
adInterval: 'Collection frequency',
byInterval: 'by interval',
allNodes: 'All Instances',
specifyNodes: 'Specify Instance',
specifyNodesTips: 'Please fill in the specify instance!',
allNodes: 'All machines',
specifyNodes: 'Specify machine',
specifyNodesTips: 'Please fill in the specify machine!',
username: 'Username',
password: 'Password',
link: 'Link',
@ -203,6 +206,43 @@ const cmdb_en = {
showTips: 'The names of nodes in the service tree and topology view',
isDynamic: 'Dynamic',
dynamicTips: 'For example, for monitoring data and frequently updated data, it is recommended to set it as a dynamic attribute, so that the change history of the attribute will not be recorded.',
cloudAccessKey: 'Public Cloud AccessKey',
cloudAccessKeyTip: 'For the system to synchronize public cloud information without installing Agent',
configCheckTitle: 'Configuration check',
checkTestTip: 'Save configuration before checking',
checkTestBtn: 'Perform machine synchronization rule checking',
checkTestTip2: 'Click to view the synchronization status of the discovery rule on the executing machine, the system synchronizes every 5 minutes, if the status is abnormal, you can view the possible problems',
checkTestBtn1: 'Automated discovery testing',
checkTestTip3: 'At the click of a button, the system will execute the autodiscovery rules on one machine',
checkModalTitle: 'Perform machine synchronization rule checking',
checkModalTip: 'If the status is down, check the Agent as follows',
checkModalTip1: '1. Check if OneAgent process is alive',
checkModalTip2: '2. View OneAgent logs with autodiscovery rule synchronisation every 5 minutes',
checkModalColumn1: 'Executing machine',
checkModalColumn2: 'AgentID',
checkModalColumn3: 'Status',
checkModalColumnStatus1: 'online',
checkModalColumnStatus2: 'offline',
checkModalColumn4: 'Last checkup time',
testModalTitle: 'Automated discovery testing',
attrMapTableAttrPlaceholder: 'Please edit the name',
nodeSettingIp: 'IP Addresses',
nodeSettingIpTip: 'Please enter the ip address',
nodeSettingIpTip1: 'ip address format error',
nodeSettingCommunity: 'Community',
nodeSettingCommunityTip: 'Please enter community',
nodeSettingVersion: 'Version',
nodeSettingVersionTip: 'Please select version',
cronRequiredTip: 'Acquisition frequency cannot be null',
relationADTip: 'Relationship autodiscovery assumes that there is attribute autodiscovery configured',
relationADHeader1: 'AutoDiscovery Attributes',
relationADHeader2: 'Associative Model Attributes',
relationADSelectAttr: 'Please select auto-discovered attributes',
relationADSelectCIType: 'Please select the model associated with this model',
relationADSelectModelAttr: 'Please select the associated model attribute',
relationADTip2: 'When an auto-discovered attribute matches an associated model attribute, the two instance models are automatically associated',
relationADTip3: 'If the value of the auto-discovered attribute is a list, multiple relationships are established with the association model',
deleteRelationAdTip: 'Cannot be deleted again',
},
components: {
unselectAttributes: 'Unselected',
@ -432,12 +472,13 @@ const cmdb_en = {
acceptTime: 'Accept Time',
confirmAccept: 'Confirm Accept?',
acceptSuccess: 'Accept successfully',
isAccept: 'Is accept',
isAccept: 'Accept',
deleteADC: 'Confirm to delete this data?',
batchDelete: 'Confirm to delete this data?',
agent: 'Built-in & Plug-ins',
agent: 'Server',
snmp: 'Network Devices',
http: 'Public Clouds',
plugin: 'Plugin',
rule: 'AutoDiscovery Rules',
timeout: 'Timeout error',
mode: 'Mode',
@ -495,6 +536,19 @@ if __name__ == "__main__":
vserver: 'VServer',
nic: 'NIC',
disk: 'harddisk',
httpSearchPlaceHolder: 'Please enter keywords',
corporateTip: 'More types are available in the corporate version, please contact us if you need ',
ruleCount: 'Rule count',
execMachine: 'Exec. machine count',
resource: 'Auto-discovered resources count',
autoInventory: 'Inclusions count',
newThisWeek: 'New this week',
newThisMonth: 'New this month',
log: 'Log',
discoveryCardResoureTip: 'Number of resource types automatically discovered',
addPlugin: 'Add plugin',
pluginSearchTip: 'Please search the rules',
innerFlag: 'Inner'
},
ci: {
attributeDesc: 'Attribute Description',

68
cmdb-ui/src/modules/cmdb/lang/zh.js
View File

@ -29,6 +29,7 @@ const cmdb_zh = {
attributes: '模型属性',
relation: '模型关联',
trigger: '触发器',
autoDiscoveryTab: '自动发现',
attributeAD: '属性自动发现',
relationAD: '关系自动发现',
grant: '权限配置',
@ -62,18 +63,20 @@ const cmdb_zh = {
deletePlugin: '删除plugin',
confirmDeleteADT: '确认删除 【{pluginName}】',
attributeMap: '字段映射',
autoDiscovery: '自动发现',
nodeConfig: '节点配置',
autoDiscovery: '自动发现属性',
node: '节点',
adExecConfig: '执行配置',
adExecTarget: '执行机器',
oneagentIdTips: '请输入以0x开头的16进制OneAgent ID',
selectFromCMDBTips: '从CMDB中选择 ',
adAutoInLib: '自动入库',
adAutoInLibTip: '发现的实例直接入库成CI',
adInterval: '采集频率',
byInterval: '按间隔',
allNodes: '所有实例',
specifyNodes: '指定实例',
specifyNodesTips: '请填写指定实例！',
allNodes: '所有机器',
specifyNodes: '指定机器',
specifyNodesTips: '请填写指定机器！',
username: '用户名',
password: '密码',
link: '链接',
@ -203,6 +206,43 @@ const cmdb_zh = {
showTips: '服务树和拓扑视图里节点的名称',
isDynamic: '动态属性',
dynamicTips: '譬如监控类的数据, 频繁更新的数据, 建议设置为动态属性, 则不会记录该属性的变更历史',
cloudAccessKey: '公有云AccessKey',
cloudAccessKeyTip: '用于系统在不安装Agent的情况下同步公有云信息',
configCheckTitle: '健康检查',
checkTestTip: '检查前请先保存配置',
checkTestBtn: '执行机器同步规则检查',
checkTestTip2: '点击查看发现规则在执行机器上的同步状态，系统每5分钟同步一次，若状态为异常，可查看可能的问题',
checkTestBtn1: '自动发现测试',
checkTestTip3: '点击按钮，系统将在一台机器上执行自动发现规则',
checkModalTitle: '执行机器同步规则检查',
checkModalTip: '若状态为下线，请按以下操作检查Agent',
checkModalTip1: '1. 检查OneAgent进程是否存活',
checkModalTip2: '2. 查看OneAgent的日志，每5分钟有自动发现规则同步的日志',
checkModalColumn1: '执行机器',
checkModalColumn2: 'AgentID',
checkModalColumn3: '状态',
checkModalColumnStatus1: '在线',
checkModalColumnStatus2: '下线',
checkModalColumn4: '最近检查时间',
testModalTitle: '自动发现测试',
attrMapTableAttrPlaceholder: '请编辑名称',
nodeSettingIp: 'ip地址',
nodeSettingIpTip: '请输入 ip 地址',
nodeSettingIpTip1: 'ip地址格式错误',
nodeSettingCommunity: 'Community',
nodeSettingCommunityTip: '请输入 community',
nodeSettingVersion: '版本',
nodeSettingVersionTip: '请选择版本',
cronRequiredTip: '采集频率不能为空',
relationADTip: '关系自动发现的前提是配置有属性自动发现',
relationADHeader1: '自动发现属性',
relationADHeader2: '关联模型属性',
relationADSelectAttr: '请选择自动发现的属性',
relationADSelectCIType: '请选择与本模型关联的模型',
relationADSelectModelAttr: '请选择关联模型属性',
relationADTip2: '当自动发现属性与关联模型属性一致时，两实例模型则自动关联',
relationADTip3: '如果自动发现的属性值是列表，则会和关联模型建立多个关系',
deleteRelationAdTip: '不可再删除',
},
components: {
unselectAttributes: '未选属性',
@ -432,12 +472,13 @@ const cmdb_zh = {
acceptTime: '入库时间',
confirmAccept: '确认入库？',
acceptSuccess: '入库成功',
isAccept: '是否入库',
isAccept: '入库',
deleteADC: '确认删除该条数据？',
batchDelete: '确认删除这些数据？',
agent: '内置 & 插件',
agent: '服务器',
snmp: '网络设备',
http: '公有云资源',
http: '公有云',
plugin: '插件',
rule: '自动发现规则',
timeout: '超时错误',
mode: '模式',
@ -495,6 +536,19 @@ if __name__ == "__main__":
vserver: '虚拟机',
nic: '网卡',
disk: '硬盘',
httpSearchPlaceHolder: '请输入关键词',
corporateTip: '更多类型见企业版，有需要请与我们联系 ',
ruleCount: '规则数',
execMachine: '执行机器数',
resource: '自动发现资源数',
autoInventory: '入库数',
newThisWeek: '本周新增',
newThisMonth: '本月新增',
log: '日志',
discoveryCardResoureTip: '自动发现的资源类型数',
addPlugin: '新增插件',
pluginSearchTip: '请搜索规则',
innerFlag: '内置'
},
ci: {
attributeDesc: '查看属性配置',

14
cmdb-ui/src/modules/cmdb/views/ci/index.vue
View File

@ -167,16 +167,20 @@
#default="{ row }"
>
<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
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="
row[col.field].startsWith('http') || row[col.field].startsWith('https')
? `${row[col.field]}`
: `http://${row[col.field]}`
item.startsWith('http') || item.startsWith('https')
? `${item}`
: `http://${item}`
"
target="_blank"
>{{ row[col.field] }}</a
>
{{ item }}
</a>
</template>
<PasswordField
v-else-if="col.is_password && row[col.field]"
:ci_id="row._id"

31
cmdb-ui/src/modules/cmdb/views/ci_types/adModal.vue
View File

@ -1,6 +1,10 @@
<template>
<a-modal width="800px" :visible="visible" @ok="handleOK" @cancel="handleCancel" :closable="false">
<Discovery :isSelected="true" :style="{ maxHeight: '75vh', overflow: 'auto' }" />
<Discovery
:isSelected="true"
:style="{ maxHeight: '75vh', overflow: 'auto' }"
v-if="visible"
/>
<template #footer>
<a-space>
<a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
@ -14,7 +18,7 @@
<script>
import _ from 'lodash'
import Discovery from '../discovery'
import { postCITypeDiscovery } from '../../api/discovery'
export default {
name: 'ADModal',
components: { Discovery },
@ -49,20 +53,17 @@ export default {
},
async handleOK() {
if (this.selectedIds && this.selectedIds.length) {
const promises = this.selectedIds.map(({ id, type }) => {
return postCITypeDiscovery(this.CITypeId, { adr_id: id, interval: type === 'agent' ? 300 : 3600 })
})
await Promise.all(promises)
.then((res) => {
this.getCITypeDiscovery(res[0].id)
this.$message.success(this.$t('addSuccess'))
})
.catch(() => {
this.getCITypeDiscovery()
})
.finally(() => {
this.handleCancel()
const adCITypeList = this.selectedIds.map((item, index) => {
return {
adr_id: item.id,
id: new Date().getTime() + index,
extra_option: {
alias: ''
},
isClient: true,
}
})
this.$emit('pushCITypeList', adCITypeList)
}
this.handleCancel()
},

105
cmdb-ui/src/modules/cmdb/views/ci_types/adTab.vue Normal file
View File

@ -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>

199
cmdb-ui/src/modules/cmdb/views/ci_types/attrAD.vue
View File

@ -1,37 +1,28 @@
<template>
<div class="attr-ad" :style="{ height: `${windowHeight - 130}px` }">
<div v-if="adCITypeList && adCITypeList.length">
<a-tabs size="small" v-model="currentTab">
<a-tab-pane v-for="item in adCITypeList" :key="item.id">
<a-space slot="tab">
<span v-if="item.extra_option && item.extra_option.alias">{{ item.extra_option.alias }}</span>
<span v-else>{{ getADCITypeParam(item.adr_id) }}</span>
<a-icon type="close-circle" @click="(e) => deleteADT(e, item)" />
</a-space>
<AttrADTabs
:adCITypeList="adCITypeList"
:currentTab="currentTab"
:getADCITypeParam="getADCITypeParam"
@changeTab="changeTab"
@changeAlias="changeAlias"
@deleteADT="deleteADT"
@clickAdd="() => $refs.adModal.open()"
/>
<AttrADTabpane
:ref="`attrAdTabpane_${item.id}`"
:adr_id="item.adr_id"
:key="`attrAdTabpane_${currentTab}`"
:ref="`attrAdTabpaneRef`"
:adr_id="currentADData.adr_id"
:CITypeId="CITypeId"
:adrList="adrList"
:adCITypeList="adCITypeList"
:currentAdt="item"
:currentAdt="currentADData"
:ciTypeAttributes="ciTypeAttributes"
:currentAdr="getADCITypeParam(item.adr_id, undefined, true)"
:currentAdr="getADCITypeParam(currentADData.adr_id, undefined, true)"
@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>
<a-empty
v-else
@ -54,28 +45,41 @@
{{ $t('add') }}
</a-button>
</a-empty>
<ADModal ref="adModal" :CITypeId="CITypeId" @addPlugin="openEditDrawer(null, 'add', 'agent')" />
<ADModal
ref="adModal"
:CITypeId="CITypeId"
@pushCITypeList="pushCITypeList"
@addPlugin="openEditDrawer(null, 'add', 'plugin')"
/>
<EditDrawer ref="editDrawer" :is_inner="false" @updateNotInner="updateNotInner" />
</div>
</template>
<script>
import _ from 'lodash'
import { mapState } from 'vuex'
import ADModal from './adModal.vue'
import {
getDiscovery,
getCITypeDiscovery,
deleteCITypeDiscovery,
postCITypeDiscovery,
deleteDiscovery,
putCITypeDiscovery
} from '../../api/discovery'
import { getCITypeAttributesById } from '../../api/CITypeAttr'
import ADModal from './adModal.vue'
import AttrADTabpane from './attrADTabpane.vue'
import EditDrawer from '../discovery/editDrawer.vue'
import AttrADTabs from './attrADTabs.vue'
export default {
name: 'AttrAutoDiscovery',
components: { ADModal, AttrADTabpane, EditDrawer },
components: {
ADModal,
AttrADTabpane,
EditDrawer,
AttrADTabs
},
props: {
CITypeId: {
type: Number,
@ -86,7 +90,8 @@ export default {
return {
ciTypeAttributes: [],
adrList: [],
adCITypeList: [],
serviceCITYpeList: [],
clientCITypeList: [],
currentTab: '',
deletePlugin: false,
}
@ -95,6 +100,13 @@ export default {
...mapState({
windowHeight: (state) => state.windowHeight,
}),
currentADData() {
return this?.adCITypeList?.find((item) => item?.id === this?.currentTab) ?? {}
},
adCITypeList() {
const uniqueArray = _.differenceBy(this.clientCITypeList, this.serviceCITYpeList, 'id')
return [...this.serviceCITYpeList, ...uniqueArray]
}
},
provide() {
return {
@ -106,7 +118,7 @@ export default {
handler() {
if (this.currentTab) {
this.$nextTick(() => {
this.$refs[`attrAdTabpane_${this.currentTab}`][0].init()
this.$refs[`attrAdTabpaneRef`].init()
})
}
},
@ -121,7 +133,7 @@ export default {
})
if (this.currentTab) {
this.$nextTick(() => {
this.$refs[`attrAdTabpane_${this.currentTab}`][0].init()
this.$refs[`attrAdTabpaneRef`].init()
})
}
})
@ -134,7 +146,14 @@ export default {
},
async getCITypeDiscovery(currentTab) {
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) {
this.currentTab = this.adCITypeList[0].id
}
@ -142,6 +161,18 @@ export default {
this.currentTab = currentTab
}
})
})
},
pushCITypeList(list) {
list.forEach((item) => {
const _find = this.adrList.find((adr) => adr.id === item.adr_id)
item.icon = _find?.option?.icon || {}
})
this.$set(this, 'clientCITypeList', [
...this.clientCITypeList,
...list
])
this.currentTab = list[0].id
},
getADCITypeParam(adr_id, params = 'name', isAll = false) {
const _find = this.adrList.find((item) => item.id === adr_id)
@ -152,52 +183,115 @@ export default {
return _find[`${params}`]
}
},
async deleteADT(e, item) {
e.preventDefault()
e.stopPropagation()
async deleteADT(item) {
const that = this
const is_plugin = this.getADCITypeParam(item.adr_id, 'is_plugin')
this.$confirm({
title: that.$t('cmdb.ciType.confirmDeleteADT', { pluginName: `${item?.extra_option?.alias || this.getADCITypeParam(item.adr_id)}` }),
content: (h) => (
content: (h) => {
if (!is_plugin) {
return ''
}
return (
<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>
),
)
},
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 () => {
if (that.currentTab === item.id) {
that.currentTab = ''
}
that.$message.success(that.$t('deleteSuccess'))
that.getCITypeDiscovery()
if (that.deletePlugin) {
await deleteDiscovery(item.adr_id).finally(() => {
that.deletePlugin = false
})
if (is_plugin && that.deletePlugin) {
that.deleteDiscovery(item.adr_id)
}
that.deletePlugin = false
})
}
},
onCancel() {
that.deletePlugin = false
},
})
},
deleteDiscovery(id) {
deleteDiscovery(id).finally(async () => {
this.deletePlugin = false
await this.getDiscovery()
})
},
openEditDrawer(data, type, adType) {
this.$refs.editDrawer.open(data, type, adType)
},
async updateNotInner(adr) {
const _idx = this.adCITypeList.findIndex((item) => item.adr_id === adr.id)
let res
if (_idx < 0) {
res = await postCITypeDiscovery(this.CITypeId, { adr_id: adr.id, interval: 300 })
}
await this.getDiscovery()
await this.getCITypeDiscovery(res?.id ?? undefined)
if (_idx < 0) {
const ciType = {
adr_id: adr.id,
id: new Date().getTime(),
extra_option: {
alias: ''
},
isClient: true,
}
this.pushCITypeList([ciType])
}
this.$nextTick(() => {
this.$refs[`attrAdTabpane_${this.currentTab}`][0].init()
this.$refs[`attrAdTabpaneRef`].init()
})
},
changeTab(id) {
console.log('changeTab', id)
this.currentTab = id
},
changeAlias({ id, value, isClient }) {
if (isClient) {
const adtIndex = this.clientCITypeList.findIndex((item) => item.id === id)
this.clientCITypeList[adtIndex].extra_option.alias = value
} else {
const params = {
extra_option: {
alias: value
}
}
putCITypeDiscovery(id, params).then(async () => {
this.$message.success(this.$t('saveSuccess'))
await this.getCITypeDiscovery()
})
}
},
saveTabpane(id) {
const adtIndex = this.clientCITypeList.findIndex((listItem) => listItem.id === this.currentTab)
if (adtIndex !== -1) {
this.clientCITypeList.splice(adtIndex, 1)
}
this.getCITypeDiscovery(id)
}
},
}
</script>
@ -206,6 +300,7 @@ export default {
.attr-ad {
position: relative;
padding: 0 20px;
.attr-ad-header {
width: 100%;
display: inline-flex;
@ -216,7 +311,13 @@ export default {
border-left: 4px solid @primary-color;
font-size: 16px;
color: rgba(0, 0, 0, 0.75);
margin-top: 30px;
}
.attr-ad-header-margin {
margin-bottom: 0px;
}
.attr-ad-footer {
width: 60%;
text-align: right;

289
cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue
View File

@ -1,11 +1,11 @@
<template>
<div :style="{ height: `${windowHeight - 187}px`, overflow: 'auto', position: 'relative' }">
<div class="attr-ad-tab-pane" :style="{ height: `${windowHeight - 254}px` }">
<a
v-if="!adrIsInner"
:style="{ position: 'absolute', right: 0, top: 0 }"
@click="
() => {
$emit('openEditDrawer', currentAdr, 'edit', 'agent')
$emit('openEditDrawer', currentAdr, 'edit', 'plugin')
}
"
>
@ -14,41 +14,16 @@
<span>{{ $t('edit') }}</span>
</a-space>
</a>
<div>{{ $t('alias') }}：<a-input v-model="alias" style="width:200px;" /></div>
<div class="attr-ad-header">{{ $t('cmdb.ciType.attributeMap') }}</div>
<vxe-table
<div class="attr-ad-attributemap-main">
<AttrMapTable
v-if="adrType === 'agent'"
ref="xTable"
:edit-config="{ trigger: 'click', mode: 'cell' }"
size="mini"
stripe
class="ops-stripe-table"
:data="tableData"
:style="{ width: '700px', marginBottom: '20px' }"
>
<vxe-colgroup :title="$t('cmdb.ciType.autoDiscovery')">
<vxe-column field="name" :title="$t('name')"> </vxe-column>
<vxe-column field="type" :title="$t('type')"> </vxe-column>
<vxe-column field="desc" :title="$t('desc')"> </vxe-column>
</vxe-colgroup>
<vxe-colgroup :title="$t('cmdb.ciType.attributes')">
<vxe-column field="attr" :title="$t('name')" :edit-render="{}">
<template #default="{row}">
{{ row.attr }}
</template>
<template #edit="{ row }">
<vxe-select
filterable
clearable
v-model="row.attr"
type="text"
:options="ciTypeAttributes"
transfer
></vxe-select>
</template>
</vxe-column>
</vxe-colgroup>
</vxe-table>
ref="attrMapTable"
:ruleType="adrType"
:tableData="tableData"
:ciTypeAttributes="ciTypeAttributes"
:uniqueKey="uniqueKey"
/>
<HttpSnmpAD
v-else
:isEdit="true"
@ -58,31 +33,24 @@
:ciTypeAttributes="ciTypeAttributes"
:adCITypeList="adCITypeList"
:currentTab="adr_id"
:uniqueKey="uniqueKey"
:style="{ marginBottom: '20px' }"
/>
<a-form-model
v-if="adrType === 'http'"
:model="form2"
:labelCol="{ span: 2 }"
:wrapperCol="{ span: 8 }"
:style="{ margin: '20px 0' }"
>
<a-form-model-item label="key">
<a-input-password v-model="form2.key" />
</a-form-model-item>
<a-form-model-item label="secret">
<a-input-password v-model="form2.secret" />
</a-form-model-item>
</a-form-model>
<a-form :form="form3" v-if="adrType === 'snmp'" class="attr-ad-snmp-form">
<a-col :span="24">
<a-form-item :label="$t('cmdb.ciType.node')" :labelCol="{ span: 2 }" :wrapperCol="{ span: 20 }">
<MonitorNodeSetting ref="monitorNodeSetting" :initNodes="nodes" :form="form3" />
</a-form-item>
</a-col>
</div>
<template v-if="adrType === 'snmp'">
<div class="attr-ad-header">{{ $t('cmdb.ciType.nodeConfig') }}</div>
<a-form :form="form3" layout="inline" class="attr-ad-snmp-form">
<NodeSetting ref="nodeSetting" :initNodes="nodes" :form="form3" />
</a-form>
</template>
<div class="attr-ad-header">{{ $t('cmdb.ciType.adExecConfig') }}</div>
<a-form-model :model="form" :labelCol="{ span: 2 }" :wrapperCol="{ span: 20 }">
<a-form-model
:model="form"
:labelCol="labelCol"
labelAlign="left"
:wrapperCol="{ span: 14 }"
class="attr-ad-form"
>
<a-form-model-item :label="$t('cmdb.ciType.adExecTarget')">
<CustomRadio v-model="agent_type" :radioList="agentTypeRadioList">
<a-input
@ -103,16 +71,60 @@
</a-input>
</CustomRadio>
</a-form-model-item>
<a-form-model-item :label="$t('cmdb.ciType.adAutoInLib')">
<a-form-model-item
:labelCol="labelCol"
:label="$t('cmdb.ciType.adAutoInLib')"
:extra="$t('cmdb.ciType.adAutoInLibTip')"
>
<a-switch v-model="form.auto_accept" />
</a-form-model-item>
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="{ span: 6 }"
:label="$t('cmdb.ciType.adInterval')"
>
<el-popover v-model="cronVisible" trigger="click">
<template slot>
<Vcrontab
v-if="adrType"
ref="cronTab"
:hideComponent="['second', 'year']"
:expression="cron"
:hasFooter="true"
@fill="crontabFill"
@hide="hideCron"
></Vcrontab>
</template>
<a-input
v-model="cron"
slot="reference"
:placeholder="$t('cmdb.reconciliation.cronTips')"
/>
</el-popover>
</a-form-model-item>
</a-form-model>
<div class="attr-ad-header">{{ $t('cmdb.ciType.adInterval') }}</div>
<CustomRadio :radioList="radioList" v-model="interval">
<span v-show="interval === 'interval'" slot="extra_interval">
<a-input-number v-model="intervalValue" :min="1" /> {{ $t('seconds') }}
</span>
</CustomRadio>
<template v-if="adrType === 'http'">
<div class="attr-ad-header attr-ad-header-margin">{{ $t('cmdb.ciType.cloudAccessKey') }}</div>
<div class="public-cloud-info">{{ $t('cmdb.ciType.cloudAccessKeyTip') }}</div>
<a-form-model
:model="form2"
labelAlign="left"
:labelCol="labelCol"
:wrapperCol="{ span: 6 }"
class="attr-ad-form"
>
<a-form-model-item label="key">
<a-input-password v-model="form2.key" />
</a-form-model-item>
<a-form-model-item label="secret">
<a-input-password v-model="form2.secret" />
</a-form-model-item>
</a-form-model>
</template>
<AttrADTest
:adtId="currentAdt.id"
/>
<div class="attr-ad-footer">
<a-button type="primary" @click="handleSave">{{ $t('save') }}</a-button>
@ -125,14 +137,26 @@
import { v4 as uuidv4 } from 'uuid'
import { mapState } from 'vuex'
import Vcrontab from '@/components/Crontab'
import { putCITypeDiscovery } from '../../api/discovery'
import { putCITypeDiscovery, postCITypeDiscovery } from '../../api/discovery'
import HttpSnmpAD from '../../components/httpSnmpAD'
import AttrMapTable from '@/modules/cmdb/components/attrMapTable/index.vue'
import CMDBExprDrawer from '@/components/CMDBExprDrawer'
import MonitorNodeSetting from '@/components/MonitorNodeSetting'
import NodeSetting from '@/modules/cmdb/components/nodeSetting/index.vue'
import AttrADTest from './attrADTest.vue'
import { Popover } from 'element-ui'
export default {
name: 'AttrADTabpane',
components: { Vcrontab, HttpSnmpAD, CMDBExprDrawer, MonitorNodeSetting },
components: {
Vcrontab,
HttpSnmpAD,
CMDBExprDrawer,
NodeSetting,
AttrMapTable,
AttrADTest,
ElPopover: Popover
},
props: {
adr_id: {
type: Number,
@ -158,6 +182,10 @@ export default {
type: Array,
default: () => [],
},
CITypeId: {
type: Number,
default: null,
},
},
data() {
return {
@ -171,7 +199,7 @@ export default {
key: '',
secret: '',
},
interval: 'interval', // interval cron
interval: 'cron', // interval cron
cron: '',
intervalValue: 3,
agent_type: 'agent_id',
@ -184,50 +212,57 @@ export default {
},
],
form3: this.$form.createForm(this, { name: 'snmp_form' }),
alias: '',
cronVisible: false,
uniqueKey: '',
}
},
computed: {
...mapState({
windowHeight: (state) => state.windowHeight,
userRoles: (state) => state.user.roles,
user: (state) => state.user,
}),
adrType() {
return this.currentAdr.type
return this.currentAdr?.type || ''
},
adrName() {
return this.currentAdr.name
return this.currentAdr?.name || ''
},
adrIsInner() {
return this.currentAdr.is_inner
return this.currentAdr?.is_inner || ''
},
agentTypeRadioList() {
const { permissions = [] } = this.userRoles
if ((permissions.includes('cmdb_admin') || permissions.includes('admin')) && this.adrType !== 'http') {
return [
{ value: 'all', label: this.$t('cmdb.ciType.allNodes') },
const radios = [
{ value: 'agent_id', label: this.$t('cmdb.ciType.specifyNodes') },
{ value: 'query_expr', label: this.$t('cmdb.ciType.selectFromCMDBTips') },
]
const permissions = this?.user?.roles?.permissions
if ((permissions.includes('cmdb_admin') || permissions.includes('admin')) && this.adrType === 'agent') {
radios.unshift({ value: 'all', label: this.$t('cmdb.ciType.allNodes') })
}
return [
{ value: 'agent_id', label: this.$t('cmdb.ciType.specifyNodes') },
{ value: 'query_expr', label: this.$t('cmdb.ciType.selectFromCMDBTips') },
]
return radios
},
radioList() {
return [
{ value: 'interval', label: this.$t('cmdb.ciType.byInterval') },
// { value: 'cron', label: '按cron', layout: 'vertical' },
{ value: 'cron', label: '按cron', layout: 'vertical' },
]
},
labelCol() {
const span = this.$i18n.locale === 'en' ? 4 : 2
return {
span
}
}
},
mounted() {},
methods: {
init() {
const _find = this.adrList.find((item) => Number(item.id) === Number(this.adr_id))
const _findADT = this.adCITypeList.find((item) => Number(item.id) === Number(this.currentAdt.id))
this.alias = _findADT?.extra_option?.alias ?? ''
this.uniqueKey = _find?.unique_key ?? ''
if (this.adrType === 'http') {
const { category = undefined, key = '', secret = '' } = _findADT?.extra_option ?? {}
this.form2 = {
@ -237,7 +272,7 @@ export default {
this.$refs.httpSnmpAd.setCurrentCate(category)
}
if (this.adrType === 'snmp') {
this.nodes = _findADT?.extra_option?.nodes ?? [
this.nodes = _findADT?.extra_option?.nodes?.length ? _findADT?.extra_option?.nodes : [
{
id: uuidv4(),
ip: '',
@ -246,9 +281,9 @@ export default {
},
]
this.$nextTick(() => {
this.$refs.monitorNodeSetting.initNodesFunc()
this.$refs.nodeSetting.initNodesFunc()
this.$nextTick(() => {
this.$refs.monitorNodeSetting.setNodeField()
this.$refs.nodeSetting.setNodeField()
})
})
}
@ -283,23 +318,16 @@ export default {
} else {
this.agent_type = this.agentTypeRadioList[0].value
}
if (_findADT.interval || (!_findADT.interval && !_findADT.cron)) {
this.interval = 'interval'
this.intervalValue = _findADT.interval || ''
} else {
this.interval = 'cron'
this.cron = `0 ${_findADT.cron}`
}
},
getAttrNameByAttrName(attrName) {
const _find = this.ciTypeAttributes.find((item) => item.name === attrName)
return _find?.alias || _find?.name || ''
this.cron = _findADT?.cron || ''
},
crontabFill(cron) {
this.cron = cron
},
handleSave() {
const { currentAdt, alias } = this
const { currentAdt } = this
let params
if (this.adrType === 'http') {
params = {
@ -311,11 +339,11 @@ export default {
}
if (this.adrType === 'snmp') {
params = {
extra_option: { nodes: this.$refs.monitorNodeSetting?.getNodeValue() ?? [] },
extra_option: { nodes: this.$refs.nodeSetting?.getNodeValue() ?? [] },
}
}
if (this.adrType === 'agent') {
const $table = this.$refs.xTable
const $table = this.$refs.attrMapTable
const { fullData: _tableData } = $table.getTableData()
const attributes = {}
_tableData.forEach((td) => {
@ -340,17 +368,14 @@ export default {
attributes,
}
}
if (this.interval === 'cron') {
this.$refs.cronTab.submitFill()
}
params = {
...params,
...this.form,
type_id: this.CITypeId,
adr_id: currentAdt.adr_id,
interval: this.interval === 'interval' ? this.intervalValue : null,
cron: this.interval === 'cron' ? this.cron : null,
}
if (this.agent_type === 'agent_id' || this.agent_type === 'all') {
params.query_expr = ''
if (this.agent_type === 'agent_id' && !params.agent_id) {
@ -358,6 +383,7 @@ export default {
return
}
}
if (this.agent_type === 'query_expr' || this.agent_type === 'all') {
params.agent_id = ''
if (this.agent_type === 'query_expr' && !params.query_expr) {
@ -365,16 +391,29 @@ export default {
return
}
}
if (params.extra_option) {
params.extra_option.alias = alias
} else {
params.extra_option = {}
params.extra_option.alias = alias
if (!this.cron) {
this.$message.error(this.$t('cmdb.ciType.cronRequiredTip'))
return
}
if (currentAdt?.isClient) {
if (currentAdt?.extra_option) {
params.extra_option = {
...(params?.extra_option || {}),
...(currentAdt?.extra_option || {})
}
}
postCITypeDiscovery(this.CITypeId, params).then((res) => {
this.$message.success(this.$t('saveSuccess'))
this.$emit('handleSave', res.id)
})
} else {
putCITypeDiscovery(currentAdt.id, params).then((res) => {
this.$message.success(this.$t('saveSuccess'))
this.$emit('handleSave')
this.$emit('handleSave', res.id)
})
}
},
handleOpenCmdb() {
this.$refs.cmdbDrawer.open()
@ -385,11 +424,41 @@ export default {
query_expr: `${text}`,
}
},
hideCron() {
this.cronVisible = false
},
},
}
</script>
<style lang="less">
<style lang="less" scoped>
.attr-ad-tab-pane {
overflow-y: auto;
overflow-x: hidden;
position: relative;
.attr-ad-attributemap-main {
margin-left: 17px;
}
.attr-ad-form {
/deep/ .ant-form-item-label {
margin-left: 17px;
}
/deep/ .ant-form-item-control-wrapper {
// margin-left: -40px;
}
}
.public-cloud-info {
color: @text-color_3;
font-size: 12px;
font-weight: 400;
margin-left: 17px;
margin-bottom: 20px;
}
}
.attr-ad-snmp-form {
.ant-form-item {
margin-bottom: 0;

183
cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabs.vue Normal file
View File

@ -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>

205
cmdb-ui/src/modules/cmdb/views/ci_types/attrADTest.vue Normal file
View File

@ -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>

22
cmdb-ui/src/modules/cmdb/views/ci_types/ciTypedetail.vue
View File

@ -5,21 +5,23 @@
<AttributesTable ref="attributesTable" :CITypeId="CITypeId" :CITypeName="CITypeName"></AttributesTable>
</a-tab-pane>
<a-tab-pane key="2" :tab="$t('cmdb.ciType.relation')">
<RelationTable :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable>
<RelationTable v-if="activeKey === '2'" :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable>
</a-tab-pane>
<a-tab-pane key="3" :tab="$t('cmdb.ciType.attributeAD')">
<AttrAD :CITypeId="CITypeId"></AttrAD>
<a-tab-pane key="3" :tab="$t('cmdb.ciType.autoDiscoveryTab')">
<ADTab v-if="activeKey === '3'" :CITypeId="CITypeId"></ADTab>
</a-tab-pane>
<a-tab-pane key="4" :tab="$t('cmdb.ciType.relationAD')">
<RelationAD :CITypeId="CITypeId"></RelationAD>
<a-tab-pane key="5" :tab="$t('cmdb.reconciliation.tab')">
<ReconciliationTable ref="reconciliationTable" :CITypeId="CITypeId" :CITypeChangeDisabled="true" />
</a-tab-pane>
<a-tab-pane key="5" :tab="$t('cmdb.ciType.trigger')">
<a-tab-pane key="6" :tab="$t('cmdb.ciType.trigger')">
<TriggerTable ref="triggerTable" :CITypeId="CITypeId"></TriggerTable>
</a-tab-pane>
<a-tab-pane key="6" :tab="$t('cmdb.ciType.grant')">
<a-tab-pane key="7" :tab="$t('cmdb.ciType.grant')">
<template v-if="activeKey === '7'">
<GrantComp :CITypeId="CITypeId" resourceType="CIType" :resourceTypeName="CITypeName"></GrantComp>
<div class="citype-detail-title">{{ $t('cmdb.components.relationGrant') }}</div>
<RelationTable isInGrantComp :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable>
</template>
</a-tab-pane>
</a-tabs>
</a-card>
@ -29,8 +31,7 @@
import AttributesTable from './attributesTable'
import RelationTable from './relationTable'
import TriggerTable from './triggerTable.vue'
import AttrAD from './attrAD.vue'
import RelationAD from './relationAD.vue'
import ADTab from './adTab.vue'
import GrantComp from '../../components/cmdbGrant/grantComp.vue'
export default {
@ -39,8 +40,7 @@ export default {
AttributesTable,
RelationTable,
TriggerTable,
AttrAD,
RelationAD,
ADTab,
GrantComp,
},
props: {

317
cmdb-ui/src/modules/cmdb/views/ci_types/relationAD.vue
View File

@ -1,47 +1,64 @@
<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">
<treeselect
class="custom-treeselect"
:style="{ width: '200px', marginRight: '10px', '--custom-height': '32px' }"
v-model="item.attrName"
:style="{ width: '230px', '--custom-height': '32px' }"
v-model="item.ad_key"
:multiple="false"
:clearable="true"
searchable
:options="ciTypeADTAttributes"
value-consists-of="LEAF_PRIORITY"
:placeholder="$t('cmdb.ciType.selectAttributes')"
:placeholder="$t('cmdb.ciType.relationADSelectAttr')"
:normalizer="
(node) => {
return {
id: node.name,
label: node.name,
id: node.value,
label: node.label,
}
}
"
>
<div :title="node.label" slot="option-label" slot-scope="{ node }">
<div>{{ node.label }}</div>
<div :style="{ fontSize: '12px', color: '#cbcbcb', lineHeight: '12px' }">{{ node.raw.desc }}</div>
<!-- <div :style="{ fontSize: '12px', color: '#cbcbcb', lineHeight: '12px' }">{{ node.raw.desc }}</div> -->
</div>
</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
class="custom-treeselect"
:style="{ width: '200px', margin: '0 10px', '--custom-height': '32px' }"
v-model="item.type_name"
:style="{ width: '230px', marginRight: '10px', '--custom-height': '32px' }"
v-model="item.peer_type_id"
:multiple="false"
:clearable="true"
searchable
:options="ciTypeGroup"
:options="relationOptions"
value-consists-of="LEAF_PRIORITY"
:placeholder="$t('cmdb.ciType.selectCIType')"
:placeholder="$t('cmdb.ciType.relationADSelectCIType')"
:disableBranchNodes="true"
@select="changeType(item)"
:normalizer="
(node) => {
return {
id: node.name || $t('other'),
id: node.value || $t('other'),
label: node.alias || node.name || $t('other'),
title: node.alias || node.name || $t('other'),
children: node.ci_types,
@ -60,18 +77,18 @@
</treeselect>
<treeselect
class="custom-treeselect"
:style="{ width: '200px', marginRight: '10px', '--custom-height': '32px' }"
v-model="item.attr_name"
:style="{ width: '230px', marginRight: '18px', '--custom-height': '32px' }"
v-model="item.peer_attr_id"
:multiple="false"
:clearable="true"
searchable
:options="item.attributes"
value-consists-of="LEAF_PRIORITY"
:placeholder="$t('cmdb.ciType.selectAttributes')"
:placeholder="$t('cmdb.ciType.relationADSelectModelAttr')"
:normalizer="
(node) => {
return {
id: node.name,
id: node.value,
label: node.alias || node.name,
title: node.alias || node.name,
}
@ -87,11 +104,23 @@
{{ node.label }}
</div>
</treeselect>
<div class="relation-ad-item-action">
<a @click="copyRelation(item)">
<a-icon type="copy" />
</a>
<a @click="deleteRelation(item)">
<a-icon type="minus-circle" />
</a>
<a @click="addRelation">
<a-icon type="plus-circle" />
</a>
</div>
</div>
<div class="relation-ad-footer">
<a-button type="primary" @click="handleSave">{{ $t('save') }}</a-button>
</div>
</div>
</div>
</template>
<script>
@ -99,9 +128,15 @@ import _ from 'lodash'
import { mapState } from 'vuex'
import { v4 as uuidv4 } from 'uuid'
import Treeselect from '@riophae/vue-treeselect'
import { getCITypeAttributesById } from '../../api/CITypeAttr'
import { getCITypeGroups } from '../../api/ciTypeGroup'
import { getDiscovery, getCITypeDiscovery, postCITypeDiscovery, putCITypeDiscovery } from '../../api/discovery'
import {
getCITypeAttributes,
getCITypeRelations,
postCITypeRelations
} from '../../api/discovery'
import {
getCITypeChildren,
getCITypeParent
} from '../../api/CITypeRelation.js'
export default {
name: 'RelationAutoDiscovery',
@ -114,11 +149,11 @@ export default {
},
data() {
return {
relationList: [],
ciTypeADTAttributes: [],
ciTypeGroup: [],
relationList: [], // 关系自动发现数据
ciTypeADTAttributes: [], // 自动发现 options
adt_id: null,
adrList: [],
relationOptions: [],
}
},
computed: {
@ -126,64 +161,62 @@ export default {
windowHeight: (state) => state.windowHeight,
}),
},
created() {
getCITypeGroups({ need_other: true }).then((res) => {
this.ciTypeGroup = res
.filter((item) => item.ci_types && item.ci_types.length)
.map((item) => {
item.id = `parent_${item.id || -1}`
return { ..._.cloneDeep(item) }
})
})
},
async mounted() {
await this.getDiscovery()
this.getCITypeDiscovery()
await this.getCITypeAttributes()
await this.getCITypeRelationOptions()
this.getCITypeRelations()
},
methods: {
async getDiscovery() {
await getDiscovery().then((res) => {
this.adrList = res
async getCITypeAttributes() {
const res = await getCITypeAttributes(this.CITypeId)
this.ciTypeADTAttributes = res.map((item) => {
return {
id: item,
value: item,
label: item
}
})
},
getCITypeDiscovery() {
getCITypeDiscovery(this.CITypeId).then(async (res) => {
// Options for the first drop-down box
const _ciTypeADTAttributes = []
res
.filter((adt) => adt.adr_id)
.forEach((adt) => {
const _find = this.adrList.find((adr) => adr.id === adt.adr_id)
if (_find && _find.attributes) {
_ciTypeADTAttributes.push(..._find.attributes)
}
async getCITypeRelationOptions() {
const childRes = await getCITypeChildren(this.CITypeId)
const parentRes = await getCITypeParent(this.CITypeId)
const options = [...childRes.children, ...parentRes.parents]
options.forEach((item) => {
item.value = item.id
item.label = item.alias || item.name
const attributes = item?.attributes?.filter((attr) => !attr.is_password && !attr.is_list && attr.value_type !== '6')
attributes.forEach((attr) => {
attr.value = attr.id
attr.label = attr.alias || attr.name
})
console.log(_ciTypeADTAttributes)
this.ciTypeADTAttributes = _.uniqBy(_ciTypeADTAttributes, 'name')
// Options for the first drop-down box
const _find = res.find((adt) => !adt.adr_id)
if (_find) {
this.adt_id = _find.id
item.attributes = attributes
})
this.relationOptions = options
},
async getCITypeRelations() {
getCITypeRelations(this.CITypeId).then(async (res) => {
if (res?.length) {
// this.adt_id = _find.id
const _relationList = []
const keys = Object.keys(_find.relation)
for (let i = 0; i < keys.length; i++) {
const { attributes } = await getCITypeAttributesById(_find.relation[`${keys[i]}`].type_name)
res.forEach((item) => {
const attributes = this?.relationOptions?.find((option) => option?.value === item.peer_type_id)?.attributes || []
_relationList.push({
id: uuidv4(),
attrName: keys[i],
type_name: _find.relation[`${keys[i]}`].type_name,
attr_name: _find.relation[`${keys[i]}`].attr_name,
ad_key: item.ad_key,
peer_type_id: item.peer_type_id,
peer_attr_id: item.peer_attr_id,
attributes,
})
}
})
this.relationList = _relationList.length
? _relationList
: [
{
id: uuidv4(),
attrName: undefined,
type_name: undefined,
attr_name: undefined,
ad_key: undefined,
peer_type_id: undefined,
peer_attr_id: undefined,
attributes: [],
},
]
@ -192,9 +225,9 @@ export default {
this.relationList = [
{
id: uuidv4(),
attrName: undefined,
type_name: undefined,
attr_name: undefined,
ad_key: undefined,
peer_type_id: undefined,
peer_attr_id: undefined,
attributes: [],
},
]
@ -202,48 +235,57 @@ export default {
})
},
changeType(item) {
console.log(item)
this.$nextTick(() => {
getCITypeAttributesById(item.type_name).then((res) => {
item.attr_name = undefined
item.attributes = res.attributes.map((item) => {
return { ...item, value: item.id, label: item.alias || item.name }
})
})
const peer_type_id = item.peer_type_id
const attributes = this?.relationOptions?.find((option) => option?.value === peer_type_id)?.attributes
item.attributes = attributes
item.peer_attr_id = undefined
})
},
addRelation() {
const _relationList = _.cloneDeep(this.relationList)
_relationList.push({
id: uuidv4(),
attrName: undefined,
type_name: undefined,
attr_name: undefined,
ad_key: undefined,
peer_type_id: undefined,
peer_attr_id: undefined,
attributes: [],
})
this.relationList = _relationList
},
copyRelation(item) {
const _relationList = _.cloneDeep(this.relationList)
_relationList.push({
...item,
id: uuidv4()
})
this.relationList = _relationList
},
deleteRelation(item) {
if (this.relationList.length <= 1) {
this.$message.error(this.$t('cmdb.ciType.deleteRelationAdTip'))
return
}
const _idx = this.relationList.findIndex(({ id }) => item.id === id)
if (_idx > -1) {
this.relationList.splice(_idx, 1)
}
},
async handleSave() {
const _relation = {}
this.relationList.forEach(({ attrName, type_name, attr_name }) => {
if (attrName) {
_relation[`${attrName}`] = { type_name, attr_name }
const _relation = this.relationList.map(({ ad_key, peer_attr_id, peer_type_id }) => {
return {
ad_key,
peer_attr_id,
peer_type_id
}
})
if (_relation) {
if (this.adt_id) {
await putCITypeDiscovery(this.adt_id, { relation: _relation })
} else {
await postCITypeDiscovery(this.CITypeId, { relation: _relation })
}
if (_relation.length) {
await postCITypeRelations(this.CITypeId, { relations: _relation })
this.$message.success(this.$t('saveSuccess'))
this.getCITypeDiscovery()
this.getCITypeRelations()
}
},
},
@ -254,14 +296,103 @@ export default {
.relation-ad {
overflow: auto;
padding: 0 20px;
&-tip {
color: @text-color_4;
font-size: 12px;
font-weight: 400;
line-height: 22px;
}
&-header {
margin-top: 20px;
display: flex;
align-items: center;
font-size: 14px;
font-weight: 700;
line-height: 22px;
&-left {
width: 230px;
margin-right: 63px;
}
}
&-main {
display: inline-block;
}
.relation-ad-item {
display: inline-flex;
display: flex;
justify-content: flex-start;
align-items: center;
margin: 10px 0;
margin-top: 10px;
&-link {
position: relative;
height: 1px;
width: 63px;
background-color: @border-color-base;
&-left {
position: absolute;
top: -6px;
left: -6px;
z-index: 10;
width: 12px;
height: 12px;
background-color: @primary-color;
border: solid 3px #E2E7FC;
border-radius: 50%
}
.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;
margin: 10px 0;
}

41
cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue
View File

@ -10,6 +10,7 @@
>{{ $t('cmdb.ciType.addRelation') }}</a-button
>
<vxe-table
ref="xTable"
stripe
:data="tableData"
size="small"
@ -311,6 +312,8 @@ export default {
tableAttrList: [],
modalAttrList: [],
modalChildAttributes: [],
currentEditData: null,
isContinueCloseEdit: false,
}
},
computed: {
@ -341,7 +344,7 @@ export default {
if (!this.isInGrantComp) {
await this.getCITypeParent()
}
this.getCITypeChildren()
await this.getCITypeChildren()
},
async getCITypeParent() {
await getCITypeParent(this.CITypeId).then((res) => {
@ -358,8 +361,8 @@ export default {
})
})
},
getCITypeChildren() {
getCITypeChildren(this.CITypeId).then((res) => {
async getCITypeChildren() {
await getCITypeChildren(this.CITypeId).then((res) => {
const data = res.children.map((obj) => {
const parentAndChildAttrList = this.handleAttrList(obj)
@ -511,6 +514,16 @@ export default {
if (row.isParent) return 'relation-table-parent'
},
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 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)
})
},
async handleEditClose({ row }) {
if (this.currentEditData) {
this.currentEditData = null
return
}
this.isContinueCloseEdit = true
const { source_ci_type_id: parentId, id: childrenId, constraint, relation_type } = row
const _find = this.relationTypes.find((item) => item.name === relation_type)
const relation_type_id = _find?.id
@ -542,6 +563,7 @@ export default {
validate
} = this.handleValidateAttrList(this.tableAttrList)
if (!validate) {
this.isContinueCloseEdit = false
return
}
@ -550,8 +572,17 @@ export default {
constraint,
parent_attr_ids,
child_attr_ids,
}).finally(() => {
this.getData()
}).finally(async () => {
await this.getData()
this.isContinueCloseEdit = false
if (this.currentEditData) {
setTimeout(async () => {
const { fullData } = this.$refs.xTable.getTableData()
const findEdit = fullData.find((item) => item.id === this?.currentEditData?.row?.id)
await this.$refs.xTable.setEditRow(findEdit, 'attributeAssociation')
})
}
})
},
getAttrNameById(attributes, id) {

36
cmdb-ui/src/modules/cmdb/views/discovery/agentTable.vue Normal file
View File

@ -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>

6
cmdb-ui/src/modules/cmdb/views/discovery/constants.js Normal file
View File

@ -0,0 +1,6 @@
export const DISCOVERY_CATEGORY_TYPE = {
AGENT: 'agent',
SNMP: 'snmp',
HTTP: 'http',
PLUGIN: 'plugin'
}

177
cmdb-ui/src/modules/cmdb/views/discovery/discoveryCard.vue
View File

@ -2,34 +2,81 @@
<div
:class="{
'discovery-card': true,
'discovery-card-http': rule.type === DISCOVERY_CATEGORY_TYPE.HTTP,
'discovery-card-small': isSelected,
'discovery-card-small-selected': isSelected && selectedIds().findIndex((item) => item.id === rule.id) > -1,
}"
@click="clickCard"
>
<div class="discovery-bottom"></div>
<div
class="discovery-card-inner"
v-if="rule.is_inner"
>
<span class="discovery-card-inner-text">{{ $t('cmdb.ad.innerFlag') }}</span>
</div>
<div
class="discovery-background-top"
:style="{ background: borderTopColorMap[rule.name] || '' }"
></div>
<div class="discovery-top">
<div class="discovery-header">
<img
v-if="icon.id && icon.url"
class="discovery-header-icon"
:src="`/api/common-setting/v1/file/${icon.url}`"
:style="{ maxHeight: '30px', maxWidth: '30px' }"
/>
<ops-icon v-else :type="icon.name || 'caise-chajian'" :style="{ fontSize: '30px', color: icon.color }" />
<ops-icon
v-else
:type="icon.name || 'caise-chajian'"
:style="{ color: icon.color }"
class="discovery-header-icon"
/>
<span :title="rule.name">{{ rule.name }}</span>
</div>
<template v-if="!isSelected">
<a-divider :style="{ margin: '5px 0' }" />
<div
class="discovery-resources"
v-if="rule.type === DISCOVERY_CATEGORY_TYPE.HTTP && rule.resources.length"
>
<a-tooltip>
<template slot="title">
{{ $t('cmdb.ad.discoveryCardResoureTip') }}
</template>
<div class="discovery-resources-left">
<ops-icon class="discovery-resources-icon" type="cmdb-discovery_resources" />
<span class="discovery-resources-count">{{ rule.resources.length }}{{ $i18n.locale === 'zh' ? '个' : '' }}</span>
</div>
</a-tooltip>
<div class="discovery-resources-right">
<template v-for="(item, index) in rule.resources">
<span
:key="index"
v-if="index < 2"
class="discovery-resources-item"
>
{{ item }}
</span>
</template>
<span v-if="rule.resources.length >= 2" class="discovery-resources-item">
<ops-icon type="veops-more" />
</span>
</div>
</div>
<a-divider
:style="{ margin: rule.type === DISCOVERY_CATEGORY_TYPE.HTTP ? '10px 0' : '7px 0' }"
/>
<div class="discovery-footer">
<a-space v-if="rule.type === 'agent'">
<a @click="handleEdit"><ops-icon type="icon-xianxing-edit"/></a>
<a-space v-if="rule.type === 'agent' && rule.is_plugin">
<a @click="handleEdit">
<a-icon type="edit" />
</a>
<a
v-if="isDeletable"
@click="handleDelete"
:style="{ color: 'red' }"
><ops-icon
type="icon-xianxing-delete"
/></a>
>
<a-icon type="delete" />
</a>
</a-space>
<a v-else @click="handleEdit"><a-icon type="eye"/></a>
<span>{{ rule.is_plugin ? 'Plugin' : $t('cmdb.custom_dashboard.default') }}</span>
@ -40,6 +87,8 @@
</template>
<script>
import { DISCOVERY_CATEGORY_TYPE } from './constants.js'
export default {
name: 'DiscoveryCard',
props: {
@ -52,6 +101,17 @@ export default {
default: false,
},
},
data() {
return {
DISCOVERY_CATEGORY_TYPE,
borderTopColorMap: {
'阿里云': '#FFB287',
'腾讯云': '#87BEFF',
'华为云': '#FFB8B8',
'AWS': '#FFC187',
}
}
},
computed: {
icon() {
return this.rule?.option?.icon ?? { color: '', name: 'caise-wuliji' }
@ -95,7 +155,32 @@ export default {
position: relative;
margin-bottom: 40px;
margin-right: 40px;
.discovery-bottom {
&-inner {
position: absolute;
top: 0;
right: 0;
z-index: 4;
width: 50px;
height: 30px;
border-left: 50px solid transparent;
border-top: 30px solid @primary-color_4;
&-text {
width: 30px;
position: absolute;
top: -28px;
right: 3px;
text-align: right;
color: @primary-color;
font-size: 10px;
font-weight: 400;
}
}
.discovery-background-top {
width: 100%;
height: 10px;
position: absolute;
@ -105,6 +190,7 @@ export default {
background: linear-gradient(90.54deg, #879fff 1.32%, #a0ddff 99.13%);
border-radius: 4px 4px 0 0;
}
.discovery-top {
width: 100%;
height: calc(100% - 5px);
@ -118,7 +204,7 @@ export default {
padding: 12px;
.discovery-header {
width: 100%;
height: 50px;
height: 45px;
display: flex;
align-items: center;
> i {
@ -130,17 +216,73 @@ export default {
text-overflow: ellipsis;
color: #000;
}
&-icon {
font-size: 22px;
max-height: 22px;
max-width: 22px;
}
}
.discovery-resources {
display: flex;
justify-content: space-between;
align-items: center;
&-count {
margin-left: 3px;
color: @text-color_3;
font-size: 12px;
font-weight: 400;
}
&-right {
display: flex;
align-items: center;
}
&-item {
padding: 3px 6px;
border-radius: 12px;
background-color: @layout-content-background;
color: @text-color_3;
font-size: 11px;
font-weight: 400;
max-width: 95px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:not(:last-child) {
margin-right: 6px;
}
}
}
.discovery-footer {
display: flex;
align-items: center;
justify-content: space-between;
> span {
color: #a5a9bc;
background-color: #d8eaff;
color: #86909c;
background-color: #f0f5ff;
border-radius: 2px;
padding: 0 5px;
font-size: 12px;
padding: 2px 8px;
font-size: 11px;
}
}
}
&-http {
width: 263px;
height: 142px;
.discovery-header {
&-icon {
font-size: 30px !important;
max-height: 30px !important;
max-width: 30px !important;
}
}
}
@ -149,6 +291,11 @@ export default {
width: 170px;
height: 80px;
cursor: pointer;
// &:hover {
// .discovery-top {
// background-color: #f0f1f5;
// }
// }
}
.discovery-card-small:hover,
.discovery-card-small-selected {

51
cmdb-ui/src/modules/cmdb/views/discovery/editDrawer.vue
View File

@ -1,6 +1,16 @@
<template>
<CustomDrawer width="800px" :title="title" :visible="visible" @close="handleClose">
<template v-if="adType === 'agent'">
<CustomDrawer
width="800px"
:title="title"
:visible="visible"
:bodyStyle="{ height: 'calc(-108px + 100vh)' }"
@close="handleClose"
>
<AgentTable
v-if="adType === DISCOVERY_CATEGORY_TYPE.AGENT"
:tableData="tableData"
/>
<template v-else-if="adType === DISCOVERY_CATEGORY_TYPE.PLUGIN">
<a-form-model
ref="autoDiscoveryForm"
:model="form"
@ -47,8 +57,9 @@
icon="plus"
:style="{ marginBottom: '10px' }"
@click="insertEvent(-1)"
>{{ $t('new') }}</a-button
>
{{ $t('new') }}
</a-button>
<vxe-table
size="mini"
stripe
@ -77,7 +88,11 @@
<vxe-input v-model="row.desc" type="text"></vxe-input>
</template>
</vxe-column>
<vxe-column :title="$t('operation')" width="60" v-if="!form.is_plugin">
<vxe-column
:title="$t('operation')"
width="60"
v-if="!form.is_plugin"
>
<template #default="{ row }">
<a-space v-if="$refs.xTable.isActiveByRow(row)">
<a @click="saveRowEvent(row)"><a-icon type="save"/></a>
@ -103,15 +118,24 @@
</template>
<script>
import CustomIconSelect from '@/components/CustomIconSelect'
import { postDiscovery, putDiscovery } from '../../api/discovery'
import { DISCOVERY_CATEGORY_TYPE } from './constants.js'
import AgentTable from './agentTable.vue'
import CustomIconSelect from '@/components/CustomIconSelect'
import HttpSnmpAD from '../../components/httpSnmpAD'
import CustomCodeMirror from '@/components/CustomCodeMirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
export default {
name: 'EditDrawer',
components: { CustomIconSelect, CustomCodeMirror, HttpSnmpAD },
components: {
CustomIconSelect,
CustomCodeMirror,
HttpSnmpAD,
AgentTable
},
props: {
is_inner: {
type: Boolean,
@ -142,11 +166,12 @@ export default {
tabSize: 4,
lineWrapping: true,
},
DISCOVERY_CATEGORY_TYPE,
}
},
computed: {
title() {
if (this.adType === 'http' || this.adType === 'snmp') {
if ([DISCOVERY_CATEGORY_TYPE.HTTP, DISCOVERY_CATEGORY_TYPE.SNMP, DISCOVERY_CATEGORY_TYPE.AGENT].includes(this.adType)) {
return this.ruleData.name
}
if (this.type === 'edit') {
@ -173,10 +198,15 @@ export default {
is_plugin: true,
}
}
if (adType === 'http' || adType === 'snmp') {
if (adType === DISCOVERY_CATEGORY_TYPE.HTTP || adType === DISCOVERY_CATEGORY_TYPE.SNMP) {
return
}
this.$nextTick(() => {
if (adType === DISCOVERY_CATEGORY_TYPE.AGENT) {
this.tableData = data?.attributes ?? []
return
}
if (this.type === 'edit') {
this.form = {
name: data.name,
@ -203,7 +233,7 @@ export default {
this.tableData = []
this.customIcon = { name: '', color: '' }
this.form = { name: '', is_plugin: false }
if (this.adType === 'agent') {
if (this.adType === DISCOVERY_CATEGORY_TYPE.PLUGIN) {
this.$refs.autoDiscoveryForm.clearValidate()
} else {
// this.$refs.httpSnmpAd.currentCate = ''
@ -244,9 +274,10 @@ export default {
const $table = this.$refs.xTable
const { fullData: _tableData } = $table.getTableData()
console.log(_tableData)
const type = this.adType === DISCOVERY_CATEGORY_TYPE.PLUGIN ? DISCOVERY_CATEGORY_TYPE.AGENT : this.adType
const params = {
...this.form,
type: this.adType,
type,
is_inner: this.is_inner,
option: { icon: this.customIcon },
attributes: this.form.is_plugin

244
cmdb-ui/src/modules/cmdb/views/discovery/index.vue
View File

@ -1,39 +1,90 @@
<template>
<div class="setting-discovery">
<div :style="{ textAlign: 'right' }">
<a-space v-if="!isSelected">
<a-upload name="file" :multiple="false" accept=".json" :fileList="[]" :beforeUpload="beforeUpload">
<a><a-icon type="upload" />{{ $t('cmdb.ad.upload') }}</a>
</a-upload>
<a @click="download"><a-icon type="download" />{{ $t('cmdb.ad.download') }}</a>
</a-space>
<div v-if="!isSelected" class="setting-discovery-header">
<a-input-search
class="setting-discovery-search"
:placeholder="$t('cmdb.ad.pluginSearchTip')"
@search="onSearchDiscovery"
/>
<div class="setting-discovery-radio">
<div
v-for="{ type, label } in typeCategory"
:key="type"
:class="['setting-discovery-radio-item', radioKey === type ? 'setting-discovery-radio-item_active' : '']"
@click="changeRadio(type)"
>
{{ label }}
</div>
</div>
<div class="setting-discovery-header-action">
<a-upload
name="file"
:multiple="false"
accept=".json"
:fileList="[]"
:beforeUpload="beforeUpload"
>
<a class="setting-discovery-header-action-btn">
<a-icon type="upload" />
{{ $t('cmdb.ad.upload') }}
</a>
</a-upload>
<a
@click="download"
class="setting-discovery-header-action-btn"
>
<a-icon type="download" />
{{ $t('cmdb.ad.download') }}
</a>
</div>
</div>
<div class="setting-discovery-body">
<template v-if="!showNullData">
<div v-for="{ type, label } in typeCategory" :key="type">
<template v-if="filterCategoryChildren[type] && (filterCategoryChildren[type].children.length || (showAddPlugin && type === DISCOVERY_CATEGORY_TYPE.PLUGIN))">
<div class="type-header">
<div>{{ label }}</div>
<a-space v-if="!isSelected && type === 'agent'">
<a @click="handleOpenEditDrawer(null, 'add', type)"><ops-icon type="icon-xianxing-tianjia"/></a>
</a-space>
</div>
<a-row type="flex" justify="start">
<DiscoveryCard
@editRule="handleOpenEditDrawer(rule, 'edit', type)"
@deleteRule="deleteRule(rule)"
v-for="rule in typeCategoryChildren[type]"
v-for="rule in filterCategoryChildren[type].children"
:key="rule.id"
:rule="rule"
:isSelected="isSelected"
@editRule="handleOpenEditDrawer(rule, 'edit', type)"
@deleteRule="deleteRule(rule)"
/>
<div
v-if="showAddPlugin && type === DISCOVERY_CATEGORY_TYPE.PLUGIN"
class="setting-discovery-add"
@click="handleOpenEditDrawer(null, 'add', DISCOVERY_CATEGORY_TYPE.PLUGIN)"
>
<a-icon type="plus-circle" theme="twoTone" />
<span class="setting-discovery-add-text">
{{ $t('cmdb.ad.addPlugin') }}
</span>
</div>
</a-row>
</template>
</div>
</template>
<div class="setting-discovery-empty" v-else>
<img class="setting-discovery-empty-img" :src="require(`@/modules/monitor/assets/empty-state.svg`)" />
<p class="setting-discovery-empty-text">{{ $t('noData') }}</p>
</div>
</div>
<EditDrawer ref="editDrawer" />
</div>
</template>
<script>
import _ from 'lodash'
import { getDiscovery, deleteDiscovery } from '../../api/discovery'
import { DISCOVERY_CATEGORY_TYPE } from './constants.js'
import DiscoveryCard from './discoveryCard.vue'
import EditDrawer from './editDrawer.vue'
export default {
name: 'AutoDiscovery',
components: { DiscoveryCard, EditDrawer },
@ -45,26 +96,56 @@ export default {
},
data() {
return {
typeCategoryChildren: { agent: [], snmp: [], http: [] },
typeCategoryChildren: {},
DISCOVERY_CATEGORY_TYPE,
radioKey: '',
searchValue: '',
}
},
computed: {
typeCategory() {
return [
{
type: 'agent',
type: DISCOVERY_CATEGORY_TYPE.HTTP,
label: this.$t('cmdb.ad.http'),
},
{
type: DISCOVERY_CATEGORY_TYPE.AGENT,
label: this.$t('cmdb.ad.agent'),
},
{
type: 'snmp',
type: DISCOVERY_CATEGORY_TYPE.SNMP,
label: this.$t('cmdb.ad.snmp'),
},
{
type: 'http',
label: this.$t('cmdb.ad.http'),
},
type: DISCOVERY_CATEGORY_TYPE.PLUGIN,
label: this.$t('cmdb.ad.plugin'),
}
]
},
filterCategoryChildren() {
const _typeCategoryChildren = _.cloneDeep(this.typeCategoryChildren)
const _filterCategoryChildren = Object.values(_typeCategoryChildren).reduce((obj, category) => {
if (this.radioKey === '' || category.type === this.radioKey) {
category.children = category.children.filter((item) => {
return item?.name?.indexOf(this.searchValue) !== -1
})
obj[category.type] = category
}
return obj
}, {})
return _filterCategoryChildren
},
showNullData() {
const showCount = Object.values(this.filterCategoryChildren).reduce((acc, item) => {
return acc + (item?.children?.length || 0)
}, 0)
return showCount === 0
},
showAddPlugin() {
return !this.isSelected && this.searchValue === ''
}
},
provide() {
return {
@ -76,13 +157,41 @@ export default {
},
methods: {
getDiscovery() {
const _typeCategoryChildren = { agent: [], snmp: [], http: [] }
const _typeCategoryChildren = {
[DISCOVERY_CATEGORY_TYPE.HTTP]: {
type: DISCOVERY_CATEGORY_TYPE.HTTP,
children: []
},
[DISCOVERY_CATEGORY_TYPE.AGENT]: {
type: DISCOVERY_CATEGORY_TYPE.AGENT,
children: []
},
[DISCOVERY_CATEGORY_TYPE.SNMP]: {
type: DISCOVERY_CATEGORY_TYPE.SNMP,
children: []
},
[DISCOVERY_CATEGORY_TYPE.PLUGIN]: {
type: DISCOVERY_CATEGORY_TYPE.PLUGIN,
children: []
}
}
getDiscovery().then((res) => {
this.typeCategory.forEach(({ type }) => {
const _filterData = res.filter((list) => list.type === type && list.is_inner)
_typeCategoryChildren[`${type}`] = _filterData
let categoryChildren = []
switch (type) {
case DISCOVERY_CATEGORY_TYPE.PLUGIN:
categoryChildren = res.filter((list) => list.is_plugin)
break
case DISCOVERY_CATEGORY_TYPE.AGENT:
categoryChildren = res.filter((list) => !list.is_plugin && list.type === type)
break
default:
categoryChildren = res.filter((list) => list.type === type)
break
}
_typeCategoryChildren[`${type}`]['children'] = categoryChildren
})
this.typeCategoryChildren = _typeCategoryChildren
this.$set(this, 'typeCategoryChildren', _typeCategoryChildren)
})
},
handleOpenEditDrawer(data, type, autoType) {
@ -137,15 +246,102 @@ export default {
xhr.send(formData)
return false
},
onSearchDiscovery(v) {
this.searchValue = v
},
changeRadio(key) {
this.radioKey = key === this.radioKey ? '' : key
}
},
}
</script>
<style lang="less" scoped>
.setting-discovery {
&-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;
padding: 20px;
border-radius: @border-radius-box;
box-shadow: 0px 0px 4px 0px rgba(158, 171, 190, 0.25);
padding: 20px;
margin-top: 24px;
.setting-discovery-add {
height: 105px;
width: 180px;
border-radius: @border-radius-base;
border: 1px dashed @primary-color_8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
&-text {
color: @text-color_3;
font-size: 12px;
font-weight: 400;
margin-top: 13px;
}
}
.setting-discovery-empty {
text-align: center;
padding: 20px 0;
&-text {
margin-top: 20px;
}
}
}
.type-header {
width: 100%;
display: inline-flex;

234
cmdb-ui/src/modules/cmdb/views/discoveryCI/components/adcCounter.vue Normal file
View File

@ -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>

41
cmdb-ui/src/modules/cmdb/views/discoveryCI/components/passwordField.vue Normal file
View File

@ -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>

221
cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue
View File

@ -7,42 +7,49 @@
><span :style="{ color: 'rgb(195, 205, 215)' }">({{ group.ci_types.length }})</span>
</p>
<div
:class="{ 'cmdb-adc-side-item': true, 'cmdb-adc-side-item-selected': currentType === type.id }"
v-for="type in group.ci_types"
:key="type.id"
@click="clickSidebar(type.id)"
:class="{ 'cmdb-adc-side-item': true, 'cmdb-adc-side-item-selected': currentType === ciType.id }"
v-for="ciType in group.ci_types"
:key="ciType.id"
@click="clickSidebar(ciType.id)"
>
<span class="cmdb-adc-side-icon">
<template v-if="type.icon">
<img v-if="type.icon.split('$$')[2]" :src="`/api/common-setting/v1/file/${type.icon.split('$$')[3]}`" />
<template v-if="ciType.icon">
<img v-if="ciType.icon.split('$$')[2]" :src="`/api/common-setting/v1/file/${ciType.icon.split('$$')[3]}`" />
<ops-icon
v-else
:style="{
color: type.icon.split('$$')[1],
color: ciType.icon.split('$$')[1],
fontSize: '14px',
}"
:type="type.icon.split('$$')[0]"
:type="ciType.icon.split('$$')[0]"
/>
</template>
<span :style="{ color: '#2f54eb' }" v-else>{{ type.name[0].toUpperCase() }}</span>
<span :style="{ color: '#2f54eb' }" v-else>{{ ciType.name[0].toUpperCase() }}</span>
</span>
<span :title="type.alias || type.name" class="cmdb-adc-side-name">{{ type.alias || type.name }}</span>
<span :title="ciType.alias || ciType.name" class="cmdb-adc-side-name">{{ ciType.alias || ciType.name }}</span>
</div>
</div>
</template>
<template #two>
<div id="discovery-ci">
<AdcCounter :typeId="currentType" />
<div class="discovery-ci-header">
<a-input-search
:placeholder="$t('cmdb.components.pleaseSearch')"
:style="{ width: '200px', marginRight: '20px', marginBottom: '10px' }"
:style="{ width: '200px', marginRight: '20px' }"
@search="handleSearch"
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>
<a-divider type="vertical" />
<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>
<ops-table
show-overflow
@ -62,56 +69,75 @@
:checkbox-config="{ reserve: true, highlight: true, range: true }"
:sort-config="{ remote: false, trigger: 'cell' }"
>
<vxe-column align="center" type="checkbox" width="60"></vxe-column>
<vxe-column
v-for="col in columns"
:key="col.field"
align="center"
type="checkbox"
width="60"
fixed="left"
></vxe-column>
<vxe-column
v-for="(col, index) in columns"
:key="`${col.field}_${index}`"
:title="col.title"
:field="col.field"
:width="col.width"
:sortable="col.sortable"
>
<template v-if="col.value_type === '6'" #default="{row}">
<span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
</template>
</vxe-column>
<vxe-column
align="center"
field="is_accept"
:title="$t('cmdb.ad.isAccept')"
v-bind="columns.length ? { width: '100px' } : { minWidth: '100px' }"
:filters="[
{ label: $t('yes'), value: true },
{ label: $t('no'), value: false },
]"
<template v-if="col.value_type === '6' || col.is_password" #default="{row}">
<PasswordField
v-if="col.is_password"
:password="row[col.field]"
/>
<span
v-else-if="col.value_type === '6' && row[col.field]"
>
<template #default="{row}">
{{ row.is_accept ? $t('yes') : $t('no') }}
{{ row[col.field] }}
</span>
</template>
</vxe-column>
<vxe-column
field="accept_by"
:title="$t('cmdb.ad.acceptBy')"
v-bind="columns.length ? { width: '80px' } : { minWidth: '80px' }"
:filters="[]"
:filters="acceptByFilters"
></vxe-column>
<vxe-column
align="center"
field="is_accept"
:title="$t('cmdb.ad.isAccept')"
v-bind="columns.length ? { width: '80px' } : { minWidth: '80px' }"
:filters="[
{ label: $t('yes'), value: true },
{ label: $t('no'), value: false },
]"
fixed="right"
>
<template #default="{row}">
<ops-icon
:type="row.is_accept ? 'cmdb-warehousing' : 'cmdb-not_warehousing'"
:style="{ color: row.is_accept ? '#00B42A' : '#A5A9BC' }"
/>
</template>
</vxe-column>
<vxe-column
field="accept_time"
:title="$t('cmdb.ad.acceptTime')"
sortable
v-bind="columns.length ? { width: '130px' } : { minWidth: '130px' }"
v-bind="columns.length ? { width: '150px' } : { minWidth: '150px' }"
fixed="right"
></vxe-column>
<vxe-column
:title="$t('operation')"
v-bind="columns.length ? { width: '60px' } : { minWidth: '60px' }"
align="center"
fixed="right"
>
<template #default="{row}">
<a-space>
<a-tooltip :title="$t('cmdb.ad.accept')">
<a v-if="!row.is_accept" @click="accept(row)"><ops-icon type="icon-xianxing-edit"/></a>
<a v-if="!row.is_accept" @click="accept(row)"><ops-icon type="cmdb-manual_warehousing"/></a>
</a-tooltip>
<a :style="{ color: 'red' }" @click="deleteADC(row)"><ops-icon type="icon-xianxing-delete"/></a>
<a :style="{ color: 'red' }" @click="deleteADC(row)"><a-icon type="delete"/></a>
</a-space>
</template>
</vxe-column>
@ -122,6 +148,23 @@
</div>
</template>
</ops-table>
<a-modal
v-model="logModalVisible"
:footer="null"
:width="596"
>
<div class="log-modal-title">{{ $t('cmdb.ad.log') }}</div>
<p ref="logModelText" class="log-modal-text">
<span
v-for="(item, index) in logTextArray"
:key="index"
class="log-modal-text-item"
>
{{ item }}
</span>
</p>
</a-modal>
</div>
</template>
</TwoColumnLayout>
@ -131,11 +174,26 @@
import _ from 'lodash'
import XEUtils from 'xe-utils'
import TwoColumnLayout from '@/components/TwoColumnLayout'
import { getADCCiTypes, getAdc, updateADCAccept, getADCCiTypesAttrs, deleteAdc } from '../../api/discovery'
import AdcCounter from './components/adcCounter.vue'
import PasswordField from './components/passwordField.vue'
import {
getADCCiTypes,
getAdc,
updateADCAccept,
getADCCiTypesAttrs,
deleteAdc,
getAdcExecHistories
} from '../../api/discovery'
import { getCITableColumns } from '../../utils/helper'
export default {
name: 'DiscoveryCI',
components: { TwoColumnLayout },
components: {
TwoColumnLayout,
AdcCounter,
PasswordField
},
data() {
return {
ci_types_list: [],
@ -145,6 +203,10 @@ export default {
columns: [],
selectedRowKeys: [],
searchValue: '',
logModalVisible: false,
logTextArray: [],
acceptByFilters: [],
selectedCount: 0,
}
},
computed: {
@ -152,7 +214,7 @@ export default {
return this.$store.state.windowHeight
},
tableHeight() {
return this.windowHeight - 140
return this.windowHeight - 240
},
filterTableData() {
const { searchValue } = this
@ -169,7 +231,7 @@ export default {
return rest
}
return this.tableData
},
}
},
watch: {
currentType: {
@ -180,6 +242,13 @@ export default {
}
},
},
selectedRowKeys: {
deep: true,
immediate: true,
handler(selectedRowKeys) {
this.selectedCount = selectedRowKeys.length
},
},
},
mounted() {
getADCCiTypes({ need_other: true }).then((res) => {
@ -213,9 +282,7 @@ export default {
if ($table) {
const nameColumn = $table.getVxetableRef().getColumnByField('accept_by')
if (nameColumn) {
$table.getVxetableRef().setFilter(
nameColumn,
_.uniqBy(
const acceptByFilters = _.uniqBy(
res.result
.filter((item) => item.accept_by)
.map((item) => ({
@ -224,7 +291,11 @@ export default {
})),
'value'
)
$table.getVxetableRef().setFilter(
nameColumn,
acceptByFilters
)
this.acceptByFilters = acceptByFilters
}
}
this.tableData = res.result.map((item) => ({ ..._.cloneDeep(item), ...item.instance }))
@ -302,12 +373,33 @@ export default {
onCancel() {},
})
},
onSelectChange({ records, checked, row }) {
onSelectChange({ records, checked }) {
this.selectedRowKeys = records.map((item) => item.id)
},
handleSearch(value) {
this.searchValue = value
},
async clickLog() {
this.logModalVisible = true
const logRes = await getAdcExecHistories({
type_id: this.currentType,
page_size: 1000
})
let logTextArray = []
if (logRes?.result?.length) {
logTextArray = logRes.result.map((log) => {
return `[${log.created_at}] ${log.stdout}`
})
}
this.logTextArray = logTextArray
this.$nextTick(() => {
const textEl = this.$refs.logModelText
if (textEl) {
textEl.scrollTop = textEl.scrollHeight
}
})
}
},
}
</script>
@ -350,5 +442,48 @@ export default {
.ops_popover_item_selected();
background-color: @primary-color_3;
}
.discovery-ci-header {
display: flex;
align-items: center;
padding-top: 18px;
padding-bottom: 10px;
}
.discovery-ci-log {
cursor: pointer;
background-color: #F4F9FF;
border: solid 1px @primary-color_8;
color: @primary-color;
font-size: 12px;
padding: 5px 12px;
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
}
}
.log-modal-title {
font-size: 14px;
font-weight: 500;
}
.log-modal-text {
margin-top: 14px;
padding: 12px;
width: 100%;
height: 312px;
overflow: auto;
border: solid 1px @border-color-base;
background-color: #2f333d;
&-item {
color: #c5c8c6;
width: 100%;
display: block;
white-space: pre-wrap;
word-break: break-all;
}
}
</style>